@storybook/web-components 11.0.0-alpha.1 → 11.0.0-alpha.2

package/dist/index.js

@@ -6,8 +6,8 @@ import {
   setCustomElements,
   setCustomElementsManifest,
   setProjectAnnotations
-} from "./_browser-chunks/chunk-FQI5YULV.js";
-import "./_browser-chunks/chunk-UN5GYDGC.js";
+} from "./_browser-chunks/chunk-ZTODZABH.js";
+import "./_browser-chunks/chunk-Z3YF52EY.js";
 import "./_browser-chunks/chunk-6ZSMINL7.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 export {

package/dist/preset.js

@@ -1,26 +1,79 @@
-import CJS_COMPAT_NODE_URL_8pft5enqcao from 'node:url';
-import CJS_COMPAT_NODE_PATH_8pft5enqcao from 'node:path';
-import CJS_COMPAT_NODE_MODULE_8pft5enqcao from "node:module";
+import CJS_COMPAT_NODE_URL_rucz8cqr0ps from 'node:url';
+import CJS_COMPAT_NODE_PATH_rucz8cqr0ps from 'node:path';
+import CJS_COMPAT_NODE_MODULE_rucz8cqr0ps from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_8pft5enqcao.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_8pft5enqcao.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_8pft5enqcao.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_rucz8cqr0ps.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_rucz8cqr0ps.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_rucz8cqr0ps.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
+import {
+  DEFAULT_TYPE_PROPERTY
+} from "./_node-chunks/chunk-36BPTBR5.js";
 
 // src/preset.ts
+import { fileURLToPath as fileURLToPath2 } from "node:url";
+
+// src/docgen/preset.ts
 import { fileURLToPath } from "node:url";
+
+// src/docgen/component-docgen/config/resolve-manifest-paths.ts
+import { findFilesUp } from "storybook/internal/common";
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+var asPathArray = (value) => typeof value == "string" ? [value] : Array.isArray(value) && value.every((item) => typeof item == "string") ? value : [], readPackageCustomElements = (configDir) => {
+  let packageJsonPath = findFilesUp(["package.json"], configDir)[0];
+  if (!packageJsonPath)
+    return [];
+  let packageJson = JSON.parse(readFileSync(packageJsonPath, "utf8"));
+  return asPathArray(packageJson.customElements).map(
+    (path) => resolve(dirname(packageJsonPath), path)
+  );
+}, resolveFrameworkManifestPaths = (configDir, frameworkOptions) => asPathArray(frameworkOptions.customElementsManifest).map((path) => resolve(configDir, path)), resolveManifestPaths = (configDir, frameworkOptions) => frameworkOptions.customElementsManifest === void 0 ? readPackageCustomElements(configDir) : resolveFrameworkManifestPaths(configDir, frameworkOptions);
+
+// src/docgen/worker-specifier.ts
+var DOCGEN_WORKER_SPECIFIER = "@storybook/web-components/internal/docgen-worker";
+
+// src/docgen/preset.ts
+var experimental_docgenProvider = async (existing = [], options) => {
+  if (!(await options.presets.apply("features", {}))?.experimentalDocgenServer)
+    return existing;
+  let frameworkOptions = await options.presets.apply(
+    "frameworkOptions"
+  ) ?? {}, descriptor = {
+    moduleSpecifier: fileURLToPath(import.meta.resolve(DOCGEN_WORKER_SPECIFIER)),
+    options: {
+      manifestPaths: resolveManifestPaths(options.configDir, frameworkOptions),
+      typeProperty: frameworkOptions.docgen?.typeProperty ?? DEFAULT_TYPE_PROPERTY
+    }
+  };
+  return [...existing, descriptor];
+}, experimental_manifests = async (existingManifests = {}, options) => {
+  let features = await options.presets.apply("features", {});
+  return !features?.experimentalDocgenServer || !features?.componentsManifest ? existingManifests : {
+    ...existingManifests,
+    components: {
+      v: 0,
+      components: {},
+      meta: { docgen: "custom-elements-manifest", durationMs: 0 }
+    }
+  };
+};
+
+// src/preset.ts
 var previewAnnotations = async (input = [], options) => {
   let docsEnabled = Object.keys(await options.presets.apply("docs", {}, options)).length > 0;
   return [].concat(input).concat([
-    fileURLToPath(import.meta.resolve("@storybook/web-components/entry-preview")),
-    fileURLToPath(import.meta.resolve("@storybook/web-components/entry-preview-argtypes"))
+    fileURLToPath2(import.meta.resolve("@storybook/web-components/entry-preview")),
+    fileURLToPath2(import.meta.resolve("@storybook/web-components/entry-preview-argtypes"))
   ]).concat(
-    docsEnabled ? [fileURLToPath(import.meta.resolve("@storybook/web-components/entry-preview-docs"))] : []
+    docsEnabled ? [fileURLToPath2(import.meta.resolve("@storybook/web-components/entry-preview-docs"))] : []
   );
 };
 export {
+  experimental_docgenProvider,
+  experimental_manifests,
   previewAnnotations
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "11.0.0-alpha.1",
+  "version": "11.0.0-alpha.2",
   "description": "Storybook Web Components renderer: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
@@ -35,6 +35,12 @@
     "./entry-preview": "./dist/entry-preview.js",
     "./entry-preview-argtypes": "./dist/entry-preview-argtypes.js",
     "./entry-preview-docs": "./dist/entry-preview-docs.js",
+    "./internal/docgen": {
+      "types": "./dist/docgen/index.d.ts",
+      "code": "./src/docgen/index.ts",
+      "default": "./dist/docgen/index.js"
+    },
+    "./internal/docgen-worker": "./dist/docgen/docgen-worker.js",
     "./package.json": "./package.json",
     "./preset": "./dist/preset.js"
   },
@@ -48,6 +54,7 @@
   ],
   "dependencies": {
     "@storybook/global": "^5.0.0",
+    "custom-elements-manifest": "^2.1.0",
     "tiny-invariant": "^1.3.1",
     "ts-dedent": "^2.0.0"
   },
@@ -56,6 +63,7 @@
     "@types/node": "^22.19.1",
     "@types/tmp": "^0.2.6",
     "cross-spawn": "^7.0.6",
+    "es-toolkit": "^1.43.0",
     "lit": "2.3.1",
     "tmp": "^0.2.3",
     "typescript": "^6.0.3",
@@ -63,7 +71,7 @@
   },
   "peerDependencies": {
     "lit": "^2.0.0 || ^3.0.0",
-    "storybook": "^11.0.0-alpha.1"
+    "storybook": "^11.0.0-alpha.2"
   },
   "publishConfig": {
     "access": "public"

package/template/cli/js/Header.js

@@ -34,12 +34,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html`
                 onClick: onLogin,
                 label: 'Log in',
               })}
-            ${Button({
-              primary: true,
-              size: 'small',
-              onClick: onCreateAccount,
-              label: 'Sign up',
-            })}`
+              ${Button({
+                primary: true,
+                size: 'small',
+                onClick: onCreateAccount,
+                label: 'Sign up',
+              })}`
         }
       </div>
     </div>

package/template/cli/ts/Header.ts

@@ -45,12 +45,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
                 onClick: onLogin,
                 label: 'Log in',
               })}
-            ${Button({
-              primary: true,
-              size: 'small',
-              onClick: onCreateAccount,
-              label: 'Sign up',
-            })}`
+              ${Button({
+                primary: true,
+                size: 'small',
+                onClick: onCreateAccount,
+                label: 'Sign up',
+              })}`
         }
       </div>
     </div>

package/template/stories/demo-wc-card/DemoWcCard.js

@@ -71,15 +71,15 @@ export class DemoWcCard extends LitElement {
             this.rows.length === 0
               ? html``
               : html`
-                <dl>
-                  ${this.rows.map(
-                    (row) => html`
-                      <dt>${row.header}</dt>
-                      <dd>${row.value}</dd>
-                    `
-                  )}
-                </dl>
-              `
+                  <dl>
+                    ${this.rows.map(
+                      (row) => html`
+                        <dt>${row.header}</dt>
+                        <dd>${row.value}</dd>
+                      `
+                    )}
+                  </dl>
+                `
           }
         </div>
         <div class="footer">

package/dist/_browser-chunks/chunk-UN5GYDGC.js

@@ -1,62 +0,0 @@
-import {
-  __export
-} from "./chunk-4BE7D4DS.js";
-
-// src/entry-preview.ts
-var entry_preview_exports = {};
-__export(entry_preview_exports, {
-  parameters: () => parameters,
-  render: () => render,
-  renderToCanvas: () => renderToCanvas
-});
-
-// src/render.ts
-import { global } from "@storybook/global";
-import { render as litRender } from "lit";
-import { isTemplateResult } from "lit/directive-helpers.js";
-import { simulateDOMContentLoaded, simulatePageLoad } from "storybook/preview-api";
-import { dedent } from "ts-dedent";
-var { Node } = global, render = (args, context) => {
-  let { id, component } = context;
-  if (!component)
-    throw new Error(
-      `Unable to render story ${id} as the component annotation is missing from the default export`
-    );
-  let element = document.createElement(component);
-  return Object.entries(args).forEach(([key, val]) => {
-    element[key] = val;
-  }), element;
-};
-function renderToCanvas({ storyFn, kind, name, showMain, showError, forceRemount }, canvasElement) {
-  let element = storyFn();
-  if (showMain(), isTemplateResult(element)) {
-    (forceRemount || !canvasElement.querySelector('[id="root-inner"]')) && (canvasElement.innerHTML = '<div id="root-inner"></div>');
-    let renderTo = canvasElement.querySelector('[id="root-inner"]');
-    litRender(element, renderTo), simulatePageLoad(canvasElement);
-  } else if (typeof element == "string")
-    canvasElement.innerHTML = element, simulatePageLoad(canvasElement);
-  else if (element instanceof Node) {
-    if (canvasElement.firstChild === element && !forceRemount)
-      return;
-    canvasElement.innerHTML = "", canvasElement.appendChild(element), simulateDOMContentLoaded();
-  } else
-    showError({
-      title: `Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,
-      description: dedent`
-        Did you forget to return the HTML snippet from the story?
-        Use "() => <your snippet or node>" or when defining the story.
-      `
-    });
-}
-
-// src/entry-preview.ts
-var parameters = {
-  renderer: "web-components"
-};
-
-export {
-  render,
-  renderToCanvas,
-  parameters,
-  entry_preview_exports
-};