@storybook/web-components - npm Package Compare versions

Comparing version 0.0.0-pr-31819-sha-f1d52147 to 0.0.0-pr-31819-sha-f8d78539

dist/entry-preview-argtypes.js

 import {
-  a as p,
-  b as i,
-  e as m
-} from "./_browser-chunks/chunk-LL2JRKKR.js";
-import "./_browser-chunks/chunk-2FOD3PM3.js";
+  getCustomElements,
+  isValidComponent,
+  isValidMetaData
+} from "./_browser-chunks/chunk-CTBWQQZK.js";
+import "./_browser-chunks/chunk-NIAEHH3S.js";
 import {
-  a as s
-} from "./_browser-chunks/chunk-A47P2DCZ.js";
+  __name
+} from "./_browser-chunks/chunk-JFJ5UJ7Q.js";
 
 // src/entry-preview-argtypes.ts
-import { enhanceArgTypes as I } from "storybook/internal/docs-tools";
+import { enhanceArgTypes } from "storybook/internal/docs-tools";
 
 // src/docs/custom-elements.ts
-import { logger as u } from "storybook/internal/client-logger";
-import f from "tiny-invariant";
-function c(e, r) {
-  let t;
-  switch (r) {
+import { logger } from "storybook/internal/client-logger";
+import invariant from "tiny-invariant";
+function mapItem(item, category) {
+  let type;
+  switch (category) {
     case "attributes":
     case "properties":
-      t = { name: e.type?.text || e.type };
+      type = { name: item.type?.text || item.type };
       break;
     case "slots":
-      t = { name: "string" };
+      type = { name: "string" };
       break;
     default:
-      t = { name: "void" };
+      type = { name: "void" };
       break;
   }
   return {
-    name: e.name,
-    required: !1,
-    description: e.description,
-    type: t,
+    name: item.name,
+    required: false,
+    description: item.description,
+    type,
     table: {
-      category: r,
-      type: { summary: e.type?.text || e.type },
+      category,
+      type: { summary: item.type?.text || item.type },
       defaultValue: {
-        summary: e.default !== void 0 ? e.default : e.defaultValue
+        summary: item.default !== void 0 ? item.default : item.defaultValue
       }
@@ -45,71 +45,98 @@ }
 }
-s(c, "mapItem");
-function y(e) {
-  let r = e.name.replace(/(-|_|:|\.|\s)+(.)?/g, (t, a, n) => n ? n.toUpperCase() : "").replace(/^([A-Z])/, (t) => t.toLowerCase());
-  return r = `on${r.charAt(0).toUpperCase() + r.substr(1)}`, [{ name: r, action: { name: e.name }, table: { disable: !0 } }, c(e, "events")];
+__name(mapItem, "mapItem");
+function mapEvent(item) {
+  let name = item.name.replace(/(-|_|:|\.|\s)+(.)?/g, (_match, _separator, chr) => {
+    return chr ? chr.toUpperCase() : "";
+  }).replace(/^([A-Z])/, (match) => match.toLowerCase());
+  name = `on${name.charAt(0).toUpperCase() + name.substr(1)}`;
+  return [{ name, action: { name: item.name }, table: { disable: true } }, mapItem(item, "events")];
 }
-s(y, "mapEvent");
-function o(e, r) {
-  return e && e.filter((t) => t && t.name).reduce((t, a) => {
-    if (a.kind === "method")
-      return t;
-    switch (r) {
+__name(mapEvent, "mapEvent");
+function mapData(data, category) {
+  return data && data.filter((item) => item && item.name).reduce((acc, item) => {
+    if (item.kind === "method") {
+      return acc;
+    }
+    switch (category) {
       case "events":
-        y(a).forEach((n) => {
-          f(n.name, `${n} should have a name property.`), t[n.name] = n;
+        mapEvent(item).forEach((argType) => {
+          invariant(argType.name, `${argType} should have a name property.`);
+          acc[argType.name] = argType;
         });
         break;
       default:
-        t[a.name] = c(a, r);
+        acc[item.name] = mapItem(item, category);
         break;
     }
-    return t;
+    return acc;
   }, {});
 }
-s(o, "mapData");
-var T = /* @__PURE__ */ s((e, r) => {
-  if (!p(e) || !i(r))
+__name(mapData, "mapData");
+var getMetaDataExperimental = /* @__PURE__ */ __name((tagName, customElements) => {
+  if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
     return null;
-  let t = r.tags.find(
-    (a) => a.name.toUpperCase() === e.toUpperCase()
+  }
+  const metaData = customElements.tags.find(
+    (tag) => tag.name.toUpperCase() === tagName.toUpperCase()
   );
-  return t || u.warn(`Component not found in custom-elements.json: ${e}`), t;
-}, "getMetaDataExperimental"), b = /* @__PURE__ */ s((e, r) => {
-  if (!p(e) || !i(r))
+  if (!metaData) {
+    logger.warn(`Component not found in custom-elements.json: ${tagName}`);
+  }
+  return metaData;
+}, "getMetaDataExperimental");
+var getMetaDataV1 = /* @__PURE__ */ __name((tagName, customElements) => {
+  if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
     return null;
-  let t;
-  return r?.modules?.forEach((a) => {
-    a?.declarations?.forEach((n) => {
-      n.tagName === e && (t = n);
+  }
+  let metadata;
+  customElements?.modules?.forEach((_module) => {
+    _module?.declarations?.forEach((declaration) => {
+      if (declaration.tagName === tagName) {
+        metadata = declaration;
+      }
     });
-  }), t || u.warn(`Component not found in custom-elements.json: ${e}`), t;
-}, "getMetaDataV1"), l = /* @__PURE__ */ s((e, r) => r?.version === "experimental" ? T(e, r) : b(e, r), "getMetaData"), C = /* @__PURE__ */ s((e, r) => {
-  let t = l(e, r);
-  return t && {
-    ...o(t.members ?? [], "properties"),
-    ...o(t.properties ?? [], "properties"),
-    ...o(t.attributes ?? [], "attributes"),
-    ...o(t.events ?? [], "events"),
-    ...o(t.slots ?? [], "slots"),
-    ...o(t.cssProperties ?? [], "css custom properties"),
-    ...o(t.cssParts ?? [], "css shadow parts")
+  });
+  if (!metadata) {
+    logger.warn(`Component not found in custom-elements.json: ${tagName}`);
+  }
+  return metadata;
+}, "getMetaDataV1");
+var getMetaData = /* @__PURE__ */ __name((tagName, manifest) => {
+  if (manifest?.version === "experimental") {
+    return getMetaDataExperimental(tagName, manifest);
+  }
+  return getMetaDataV1(tagName, manifest);
+}, "getMetaData");
+var extractArgTypesFromElements = /* @__PURE__ */ __name((tagName, customElements) => {
+  const 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")
   };
-}, "extractArgTypesFromElements"), g = /* @__PURE__ */ s((e) => {
-  let r = m();
-  return C(e, r);
-}, "extractArgTypes"), d = /* @__PURE__ */ s((e) => {
-  let r = l(e, m());
-  return r && r.description;
+}, "extractArgTypesFromElements");
+var extractArgTypes = /* @__PURE__ */ __name((tagName) => {
+  const cem = getCustomElements();
+  return extractArgTypesFromElements(tagName, cem);
+}, "extractArgTypes");
+var extractComponentDescription = /* @__PURE__ */ __name((tagName) => {
+  const metaData = getMetaData(tagName, getCustomElements());
+  return metaData && metaData.description;
 }, "extractComponentDescription");
 
 // src/entry-preview-argtypes.ts
-var w = {
+var parameters = {
   docs: {
-    extractArgTypes: g,
-    extractComponentDescription: d
+    extractArgTypes,
+    extractComponentDescription
   }
-}, M = [I];
+};
+var argTypesEnhancers = [enhanceArgTypes];
 export {
-  M as argTypesEnhancers,
-  w as parameters
+  argTypesEnhancers,
+  parameters
 };

dist/entry-preview-docs.js

 import {
-  a as p
-} from "./_browser-chunks/chunk-A47P2DCZ.js";
+  __name
+} from "./_browser-chunks/chunk-JFJ5UJ7Q.js";
 
 // src/entry-preview-docs.ts
-import { SourceType as f } from "storybook/internal/docs-tools";
+import { SourceType as SourceType2 } from "storybook/internal/docs-tools";
 
 // src/docs/sourceDecorator.ts
-import { SourceType as m } from "storybook/internal/docs-tools";
-import { render as c } from "lit";
-import { emitTransformCode as a, useEffect as y } from "storybook/preview-api";
-var u = /<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;
-function d(r) {
-  let e = r?.parameters.docs?.source, o = r?.parameters.__isArgsStory;
-  return e?.type === m.DYNAMIC ? !1 : !o || e?.code || e?.type === m.CODE;
+import { SourceType } from "storybook/internal/docs-tools";
+import { render } from "lit";
+import { emitTransformCode, useEffect } from "storybook/preview-api";
+var LIT_EXPRESSION_COMMENTS = /<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;
+function skipSourceRender(context) {
+  const sourceParams = context?.parameters.docs?.source;
+  const isArgsStory = context?.parameters.__isArgsStory;
+  if (sourceParams?.type === SourceType.DYNAMIC) {
+    return false;
+  }
+  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
 }
-p(d, "skipSourceRender");
-function i(r, e) {
-  let o = r(), t = e?.parameters.docs?.source?.excludeDecorators ? e.originalStoryFn(e.args, e) : o, n;
-  if (y(() => {
-    n && a(n, e);
-  }), !d(e)) {
-    let s = window.document.createElement("div");
-    t instanceof DocumentFragment ? c(t.cloneNode(!0), s) : c(t, s), n = s.innerHTML.replace(u, "");
+__name(skipSourceRender, "skipSourceRender");
+function sourceDecorator(storyFn, context) {
+  const story = storyFn();
+  const renderedForSource = context?.parameters.docs?.source?.excludeDecorators ? context.originalStoryFn(context.args, context) : story;
+  let source;
+  useEffect(() => {
+    if (source) {
+      emitTransformCode(source, context);
+    }
+  });
+  if (!skipSourceRender(context)) {
+    const container = window.document.createElement("div");
+    if (renderedForSource instanceof DocumentFragment) {
+      render(renderedForSource.cloneNode(true), container);
+    } else {
+      render(renderedForSource, container);
+    }
+    source = container.innerHTML.replace(LIT_EXPRESSION_COMMENTS, "");
   }
-  return o;
+  return story;
 }
-p(i, "sourceDecorator");
+__name(sourceDecorator, "sourceDecorator");
 
 // src/entry-preview-docs.ts
-var F = [i], W = {
+var decorators = [sourceDecorator];
+var parameters = {
   docs: {
     source: {
-      type: f.DYNAMIC,
+      type: SourceType2.DYNAMIC,
       language: "html"
     },
-    story: { inline: !0 }
+    story: { inline: true }
   }
 };
 export {
-  F as decorators,
-  W as parameters
+  decorators,
+  parameters
 };

dist/entry-preview.js

 import {
-  a,
-  b,
-  c
-} from "./_browser-chunks/chunk-2FOD3PM3.js";
-import "./_browser-chunks/chunk-A47P2DCZ.js";
+  parameters,
+  render,
+  renderToCanvas
+} from "./_browser-chunks/chunk-NIAEHH3S.js";
+import "./_browser-chunks/chunk-JFJ5UJ7Q.js";
 export {
-  c as parameters,
-  a as render,
-  b as renderToCanvas
+  parameters,
+  render,
+  renderToCanvas
 };

dist/index.js

 import {
-  a,
-  b,
-  c,
-  d,
-  e,
-  f
-} from "./_browser-chunks/chunk-LL2JRKKR.js";
-import "./_browser-chunks/chunk-2FOD3PM3.js";
-import "./_browser-chunks/chunk-A47P2DCZ.js";
+  getCustomElements,
+  isValidComponent,
+  isValidMetaData,
+  setCustomElements,
+  setCustomElementsManifest,
+  setProjectAnnotations
+} from "./_browser-chunks/chunk-CTBWQQZK.js";
+import "./_browser-chunks/chunk-NIAEHH3S.js";
+import "./_browser-chunks/chunk-JFJ5UJ7Q.js";
 export {
-  e as getCustomElements,
-  a as isValidComponent,
-  b as isValidMetaData,
-  c as setCustomElements,
-  d as setCustomElementsManifest,
-  f as setProjectAnnotations
+  getCustomElements,
+  isValidComponent,
+  isValidMetaData,
+  setCustomElements,
+  setCustomElementsManifest,
+  setProjectAnnotations
 };

dist/preset.js

@@ -1,24 +0,26 @@
-import CJS_COMPAT_NODE_URL from 'node:url';
-import CJS_COMPAT_NODE_PATH from 'node:path';
-import CJS_COMPAT_NODE_MODULE from "node:module";
+import CJS_COMPAT_NODE_URL_j37rb0hu3di from 'node:url';
+import CJS_COMPAT_NODE_PATH_j37rb0hu3di from 'node:path';
+import CJS_COMPAT_NODE_MODULE_j37rb0hu3di from "node:module";
 
-const __filename = CJS_COMPAT_NODE_URL.fileURLToPath(import.meta.url);
-const __dirname = CJS_COMPAT_NODE_PATH.dirname(__filename);
-const require = CJS_COMPAT_NODE_MODULE.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_j37rb0hu3di.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_j37rb0hu3di.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_j37rb0hu3di.createRequire(import.meta.url);
+
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
-var s = Object.defineProperty;
-var o = (t, e) => s(t, "name", { value: e, configurable: !0 });
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
 // src/preset.ts
-import { fileURLToPath as r } from "node:url";
-var i = /* @__PURE__ */ o(async (t = [], e) => {
-  let n = Object.keys(await e.presets.apply("docs", {}, e)).length > 0;
-  return [].concat(t).concat([r(import.meta.resolve("@storybook/web-components/entry-preview"))]).concat(
-    n ? [r(import.meta.resolve("@storybook/web-components/entry-preview-docs"))] : []
+import { fileURLToPath } from "node:url";
+var previewAnnotations = /* @__PURE__ */ __name(async (input = [], options) => {
+  const docsEnabled = Object.keys(await options.presets.apply("docs", {}, options)).length > 0;
+  const result = [];
+  return result.concat(input).concat([fileURLToPath(import.meta.resolve("@storybook/web-components/entry-preview"))]).concat(
+    docsEnabled ? [fileURLToPath(import.meta.resolve("@storybook/web-components/entry-preview-docs"))] : []
   );
 }, "previewAnnotations");
 export {
-  i as previewAnnotations
+  previewAnnotations
 };

package.json

 {
   "name": "@storybook/web-components",
-  "version": "0.0.0-pr-31819-sha-f1d52147",
+  "version": "0.0.0-pr-31819-sha-f8d78539",
   "description": "Storybook web-components renderer",
@@ -66,3 +66,3 @@ "keywords": [
     "lit": "^2.0.0 || ^3.0.0",
-    "storybook": "^0.0.0-pr-31819-sha-f1d52147"
+    "storybook": "^0.0.0-pr-31819-sha-f8d78539"
   },
@@ -72,3 +72,3 @@ "publishConfig": {
   },
-  "gitHead": "a6e7fd8a655c69780bc20b9749c2699e44beae78"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae14"
 }

template/components/Html.js

@@ -6,3 +6,2 @@ import { global as globalThis } from '@storybook/global';
 const { customElements } = globalThis;
-
 /** @tag sb-html */
@@ -30,4 +29,3 @@ export class SbHtml extends LitElement {
 }
-
 export const HtmlTag = 'sb-html';
 customElements.define(HtmlTag, SbHtml);

No alert changes

Improved metrics

Total package byte prevSize

42923

9.3%

Number of package files

36

2.86%

Lines of code

1311

5.39%

No dependency changes