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

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

@@ -0,0 +1,172 @@
+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";
+
+// src/arg-keys.ts
+var DEFAULT_SLOT_NAME = "default";
+function parseArgKey(key) {
+  if (key.startsWith("--"))
+    return { category: "cssProperties", name: key };
+  for (let [category, suffix] of Object.entries(ARG_KEY_SUFFIXES))
+    if (key.endsWith(suffix))
+      return { category, name: key.slice(0, -suffix.length) };
+}
+var ARG_KEY_SUFFIXES = {
+  events: "-event",
+  methods: "-method",
+  slots: "-slot",
+  cssParts: "-part",
+  cssStates: "-state"
+};
+
+// src/bind-args.ts
+var BINDERS = {
+  events: (element, name, value) => {
+    typeof value == "function" && element.addEventListener(name, value);
+  },
+  methods: () => {
+  },
+  slots: bindSlot,
+  cssParts: (element, name, value) => styleRule(`${element.localName}::part(${name})`, value),
+  cssStates: (element, name, value) => styleRule(`${element.localName}:state(${name})`, value)
+};
+function bindArgs(element, args) {
+  let observedAttributes = observedAttributesOf(element), styleRules = [];
+  for (let [key, value] of Object.entries(args)) {
+    let parsedKey = parseArgKey(key);
+    if (parsedKey?.category === "cssProperties") {
+      bindCssCustomProperty(element, key, value);
+      continue;
+    }
+    if (key in element) {
+      assignProperty(element, key, value);
+      continue;
+    }
+    if (observedAttributes.has(key) && isPrimitive(value)) {
+      bindAttribute(element, key, value);
+      continue;
+    }
+    if (parsedKey) {
+      let rule = BINDERS[parsedKey.category](element, parsedKey.name, value);
+      rule && styleRules.push(rule);
+      continue;
+    }
+    assignProperty(element, key, value);
+  }
+  return styleRules;
+}
+function observedAttributesOf(element) {
+  let observedAttributes = customElements.get(element.localName)?.observedAttributes;
+  return new Set(Array.isArray(observedAttributes) ? observedAttributes : []);
+}
+function isPrimitive(value) {
+  return value === null || typeof value != "object" && typeof value != "function";
+}
+function isUnset(value) {
+  return value == null || value === "";
+}
+function assignProperty(element, key, value) {
+  element[key] = value;
+}
+function bindAttribute(element, name, value) {
+  isUnset(value) || value === !1 || element.setAttribute(name, value === !0 ? "" : String(value));
+}
+function bindCssCustomProperty(element, name, value) {
+  isUnset(value) || element.style.setProperty(name, String(value));
+}
+function bindSlot(element, name, value) {
+  if (isUnset(value))
+    return;
+  let template = document.createElement("template");
+  template.innerHTML = String(value);
+  let nodes = Array.from(template.content.childNodes);
+  if (name === DEFAULT_SLOT_NAME) {
+    element.append(...nodes);
+    return;
+  }
+  for (let node of nodes) {
+    let slottedNode = toNamedSlotNode(node, name);
+    slottedNode && element.append(slottedNode);
+  }
+}
+function toNamedSlotNode(node, name) {
+  if (node.nodeType === Node.ELEMENT_NODE)
+    return node.slot = name, node;
+  if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+    let span = document.createElement("span");
+    return span.slot = name, span.textContent = node.textContent, span;
+  }
+}
+function styleRule(selector, value) {
+  if (!isUnset(value))
+    return `${selector} { ${String(value)} }`;
+}
+
+// src/render.ts
+var { Node: Node2 } = 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);
+  if (!global.FEATURES?.experimentalDocgenServer)
+    return Object.assign(element, args);
+  let styleRules = bindArgs(element, args), fragment = document.createDocumentFragment();
+  if (styleRules.length > 0) {
+    let style = document.createElement("style");
+    style.textContent = `@scope {
+  ${styleRules.map((rule) => `:scope > style + ${rule}`).join(`
+  `)}
+}`, fragment.append(style);
+  }
+  return fragment.append(element), fragment;
+};
+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 Node2) {
+    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
+};

package/dist/_browser-chunks/{chunk-FQI5YULV.js → chunk-ZTODZABH.js}

@@ -1,6 +1,6 @@
 import {
   entry_preview_exports
-} from "./chunk-UN5GYDGC.js";
+} from "./chunk-Z3YF52EY.js";
 import {
   entry_preview_docs_exports
 } from "./chunk-6ZSMINL7.js";

package/dist/_node-chunks/chunk-36BPTBR5.js

@@ -0,0 +1,56 @@
+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
+// ------------------------------------------------------------
+
+// src/docgen/component-docgen/utils.ts
+function isRecord(value) {
+  return value !== null && typeof value == "object";
+}
+function namedItems(value) {
+  return Array.isArray(value) ? value.filter((item) => isRecord(item) && typeof item.name == "string") : [];
+}
+function errorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+var trimmedOrUndefined = (text) => typeof text == "string" && text.trim() || void 0;
+function deprecationMessage(deprecated) {
+  if (deprecated)
+    return typeof deprecated == "string" ? trimmedOrUndefined(deprecated) : "deprecated";
+}
+function firstValue(sources, read) {
+  for (let source of sources) {
+    let value = read(source);
+    if (value !== void 0)
+      return value;
+  }
+}
+
+// src/docgen/component-docgen/arg-types/alt-type.ts
+var DEFAULT_TYPE_PROPERTY = "parsedType";
+function readTypeText(item, typeProperty) {
+  let alternate = Reflect.get(item, typeProperty);
+  return isRecord(alternate) && typeof alternate.text == "string" && alternate.text.trim() ? alternate.text : typeof item.type?.text == "string" ? item.type.text : void 0;
+}
+function readCssPropertySyntax(property, typeProperty) {
+  return property.syntax ?? readTypeText(property, typeProperty);
+}
+
+export {
+  isRecord,
+  namedItems,
+  errorMessage,
+  trimmedOrUndefined,
+  deprecationMessage,
+  firstValue,
+  DEFAULT_TYPE_PROPERTY,
+  readTypeText,
+  readCssPropertySyntax
+};