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

package/dist/docgen/docgen-worker.js

@@ -0,0 +1,18 @@
+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_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 {
+  createDocgenProvider
+} from "../_node-chunks/chunk-FABV47GL.js";
+import "../_node-chunks/chunk-36BPTBR5.js";
+export {
+  createDocgenProvider
+};

package/dist/docgen/index.d.ts

@@ -0,0 +1,49 @@
+import { DocgenError, DocgenMiddleware, DocgenPayload, DocgenProviderInput } from "storybook/internal/types";
+import { CustomElementDeclaration, CustomElementMixinDeclaration } from "custom-elements-manifest";
+
+//#region code/renderers/web-components/.dts-emit/code/renderers/web-components/src/docgen/component-docgen/manifest/types.d.ts
+type ManifestDeclaration = CustomElementDeclaration | CustomElementMixinDeclaration;
+//#endregion
+//#region code/renderers/web-components/.dts-emit/code/renderers/web-components/src/docgen/component-docgen/manifest/cem-manager.d.ts
+interface CemTag {
+  declaration: ManifestDeclaration;
+  /** Path relative to `process.cwd()`, as shown in messages and payloads. */
+  manifestPath: string;
+  warning?: string;
+}
+interface CemSnapshot {
+  /** First manifest in configuration order wins a tag. */
+  tags: ReadonlyMap<string, CemTag>;
+  /** Manifests that contribute nothing: missing or invalid with no last valid version. */
+  errors: DocgenError[];
+  paths: string[];
+}
+//#endregion
+//#region code/renderers/web-components/.dts-emit/code/renderers/web-components/src/docgen/component-docgen/build-docgen.d.ts
+interface WebComponentsDocgenOptions {
+  manifestPaths: string[];
+  typeProperty: string;
+}
+type WebComponentsDocgenPayload = DocgenPayload & {
+  /** Set while the manifest is served from its last valid version after a failed reload. */warning?: string;
+  customElementsManifest?: {
+    manifestPath: string;
+    declaration: ManifestDeclaration;
+  };
+};
+interface BuildDocgenContext {
+  cem: CemSnapshot;
+  typeProperty: string;
+}
+declare function buildDocgenPayload(input: DocgenProviderInput, context: BuildDocgenContext): WebComponentsDocgenPayload | undefined;
+//#endregion
+//#region code/renderers/web-components/.dts-emit/code/renderers/web-components/src/docgen/docgen-worker.d.ts
+declare const createDocgenProvider: ({
+  manifestPaths,
+  typeProperty
+}: WebComponentsDocgenOptions) => DocgenMiddleware;
+//#endregion
+//#region code/renderers/web-components/.dts-emit/code/renderers/web-components/src/docgen/component-docgen/arg-types/alt-type.d.ts
+declare const DEFAULT_TYPE_PROPERTY = "parsedType";
+//#endregion
+export { DEFAULT_TYPE_PROPERTY, type WebComponentsDocgenOptions, type WebComponentsDocgenPayload, buildDocgenPayload, createDocgenProvider };

package/dist/docgen/index.js

@@ -0,0 +1,23 @@
+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_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 {
+  buildDocgenPayload,
+  createDocgenProvider
+} from "../_node-chunks/chunk-FABV47GL.js";
+import {
+  DEFAULT_TYPE_PROPERTY
+} from "../_node-chunks/chunk-36BPTBR5.js";
+export {
+  DEFAULT_TYPE_PROPERTY,
+  buildDocgenPayload,
+  createDocgenProvider
+};

package/dist/entry-preview-argtypes.js

@@ -2,8 +2,8 @@ import {
   getCustomElements,
   isValidComponent,
   isValidMetaData
-} 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";
 
@@ -12,29 +12,70 @@ import { enhanceArgTypes } from "storybook/internal/docs-tools";
 
 // src/docs/custom-elements.ts
 import { logger } from "storybook/internal/client-logger";
-import invariant from "tiny-invariant";
+
+// ../../../node_modules/es-toolkit/dist/string/capitalize.mjs
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+}
+
+// ../../../node_modules/es-toolkit/dist/string/words.mjs
+var CASE_SPLIT_PATTERN = new RegExp("\\p{Lu}?\\p{Ll}+|[0-9]+|\\p{Lu}+(?!\\p{Ll})|\\p{Emoji_Presentation}|\\p{Extended_Pictographic}|\\p{L}+", "gu");
+function words(str) {
+  return Array.from(str.match(CASE_SPLIT_PATTERN) ?? []);
+}
+
+// ../../../node_modules/es-toolkit/dist/string/pascalCase.mjs
+function pascalCase(str) {
+  return words(str).map((word) => capitalize(word)).join("");
+}
+
+// src/docgen/component-docgen/arg-types/event-action-name.ts
+function eventActionName(name) {
+  return `on${pascalCase(name)}`;
+}
+
+// src/docs/map-arg-types.ts
+var ITEM_GROUPS = [
+  ["members", "properties"],
+  ["properties", "properties"],
+  ["attributes", "attributes"],
+  ["events", "events"],
+  ["slots", "slots"],
+  ["cssProperties", "css custom properties"],
+  ["cssParts", "css shadow parts"]
+];
+function mapArgTypes(groups) {
+  return ITEM_GROUPS.reduce(
+    (argTypes, [groupName, category]) => ({
+      ...argTypes,
+      ...mapData(groups[groupName] ?? [], category)
+    }),
+    {}
+  );
+}
 function mapItem(item, category) {
-  let type;
+  let text = typeText(item), typeName;
   switch (category) {
     case "attributes":
     case "properties":
-      type = { name: item.type?.text || item.type };
+      typeName = text;
       break;
     case "slots":
-      type = { name: "string" };
+      typeName = "string";
       break;
     default:
-      type = { name: "void" };
+      typeName = "void";
       break;
   }
   return {
     name: item.name,
     required: !1,
     description: item.description,
-    type,
+    // The legacy runtime keeps manifest type text as the sbType name; server docgen maps real SBTypes.
+    type: { name: typeName },
     table: {
       category,
-      type: { summary: item.type?.text || item.type },
+      type: { summary: text },
       defaultValue: {
         summary: item.default !== void 0 ? item.default : item.defaultValue
       }
@@ -42,14 +83,18 @@ function mapItem(item, category) {
   };
 }
 function mapEvent(item) {
-  let name = item.name.replace(/(-|_|:|\.|\s)+(.)?/g, (_match, _separator, chr) => chr ? chr.toUpperCase() : "").replace(/^([A-Z])/, (match) => match.toLowerCase());
-  return name = `on${name.charAt(0).toUpperCase() + name.substr(1)}`, [{ name, action: { name: item.name }, table: { disable: !0 } }, mapItem(item, "events")];
+  return [{ name: eventActionName(item.name), action: { name: item.name }, table: { disable: !0 } }, mapItem(item, "events")];
 }
-function mapData(data, category) {
-  return data && data.filter((item) => item && item.name).reduce((acc, item) => (item.kind === "method" || (category === "events" ? mapEvent(item).forEach((argType) => {
-    invariant(argType.name, `${argType} should have a name property.`), acc[argType.name] = argType;
+function mapData(items, category) {
+  return items.filter((item) => item?.name).reduce((acc, item) => (item.kind === "method" || (category === "events" ? mapEvent(item).forEach((argType) => {
+    acc[argType.name] = argType;
   }) : acc[item.name] = mapItem(item, category)), acc), {});
 }
+function typeText(item) {
+  return typeof item.type == "string" ? item.type : item.type?.text;
+}
+
+// src/docs/custom-elements.ts
 var getMetaDataExperimental = (tagName, customElements) => {
   if (!isValidComponent(tagName) || !isValidMetaData(customElements))
     return null;
@@ -68,15 +113,7 @@ var getMetaDataExperimental = (tagName, customElements) => {
   }), metadata || logger.warn(`Component not found in custom-elements.json: ${tagName}`), metadata;
 }, getMetaData = (tagName, manifest) => manifest?.version === "experimental" ? getMetaDataExperimental(tagName, manifest) : getMetaDataV1(tagName, manifest), extractArgTypesFromElements = (tagName, customElements) => {
   let metaData = getMetaData(tagName, customElements);
-  return metaData && {
-    ...mapData(metaData.members ?? [], "properties"),
-    ...mapData(metaData.properties ?? [], "properties"),
-    ...mapData(metaData.attributes ?? [], "attributes"),
-    ...mapData(metaData.events ?? [], "events"),
-    ...mapData(metaData.slots ?? [], "slots"),
-    ...mapData(metaData.cssProperties ?? [], "css custom properties"),
-    ...mapData(metaData.cssParts ?? [], "css shadow parts")
-  };
+  return metaData && mapArgTypes(metaData);
 }, extractArgTypes = (tagName) => {
   let cem = getCustomElements();
   return extractArgTypesFromElements(tagName, cem);

package/dist/entry-preview.js

@@ -2,7 +2,7 @@ import {
   parameters,
   render,
   renderToCanvas
-} from "./_browser-chunks/chunk-UN5GYDGC.js";
+} from "./_browser-chunks/chunk-Z3YF52EY.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 export {
   parameters,