@storybook/vue3 9.2.0-alpha.2 → 10.0.0-beta.0

package/README.md

@@ -1 +1,5 @@
 # Storybook Vue3 renderer
+
+Develop, document, and test UI components in isolation.
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

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

@@ -0,0 +1,427 @@
+import {
+  __export,
+  __name
+} from "./chunk-JFJ5UJ7Q.js";
+
+// src/entry-preview.ts
+var entry_preview_exports = {};
+__export(entry_preview_exports, {
+  applyDecorators: () => decorateStory,
+  argTypesEnhancers: () => argTypesEnhancers,
+  mount: () => mount,
+  parameters: () => parameters,
+  render: () => render,
+  renderToCanvas: () => renderToCanvas
+});
+import { enhanceArgTypes, extractComponentDescription } from "storybook/internal/docs-tools";
+
+// src/extractArgTypes.ts
+import {
+  convert,
+  extractComponentProps,
+  hasDocgen
+} from "storybook/internal/docs-tools";
+var ARG_TYPE_SECTIONS = ["props", "events", "slots", "exposed", "expose"];
+var extractArgTypes = /* @__PURE__ */ __name((component) => {
+  if (!hasDocgen(component)) {
+    return null;
+  }
+  const usedDocgenPlugin = "exposed" in component.__docgenInfo ? "vue-component-meta" : "vue-docgen-api";
+  const argTypes = {};
+  ARG_TYPE_SECTIONS.forEach((section) => {
+    const props = extractComponentProps(component, section);
+    props.forEach((extractedProp) => {
+      let argType;
+      if (usedDocgenPlugin === "vue-docgen-api") {
+        const docgenInfo = extractedProp.docgenInfo;
+        argType = extractFromVueDocgenApi(docgenInfo, section, extractedProp);
+      } else {
+        const docgenInfo = extractedProp.docgenInfo;
+        argType = extractFromVueComponentMeta(docgenInfo, section);
+      }
+      if (!argType || argTypes[argType.name]) {
+        return;
+      }
+      const sectionsToDisableControls = ["events", "expose", "exposed"];
+      if (sectionsToDisableControls.includes(section)) {
+        argType.control = { disable: true };
+      }
+      argTypes[argType.name] = argType;
+    });
+  });
+  return argTypes;
+}, "extractArgTypes");
+var extractFromVueDocgenApi = /* @__PURE__ */ __name((docgenInfo, section, extractedProp) => {
+  let type;
+  let sbType;
+  if (section === "events") {
+    const eventInfo = docgenInfo;
+    type = eventInfo.type?.names.join();
+    sbType = { name: "other", value: type ?? "", required: false };
+  }
+  if (section === "slots") {
+    const slotInfo = docgenInfo;
+    const slotBindings = slotInfo.bindings?.filter((binding) => !!binding.name).map((binding) => {
+      return `${binding.name}: ${binding.type?.name ?? "unknown"}`;
+    }).join("; ");
+    type = slotBindings ? `{ ${slotBindings} }` : void 0;
+    sbType = { name: "other", value: type ?? "", required: false };
+  }
+  if (section === "props") {
+    const propInfo = docgenInfo;
+    type = propInfo.type?.name;
+    sbType = extractedProp ? convert(extractedProp.docgenInfo) : { name: "other", value: type };
+    if (propInfo.type && "elements" in propInfo.type && Array.isArray(propInfo.type.elements) && propInfo.type.elements.length > 0) {
+      const elements = propInfo.type.elements.map((i) => i.name);
+      if (type === "Array") {
+        const arrayElements = elements.length === 1 ? elements[0] : `(${elements.join(" | ")})`;
+        type = `${arrayElements}[]`;
+      }
+      if (type === "union") {
+        type = elements.join(" | ");
+      } else if (type === "intersection") {
+        type = elements.join(" & ");
+      }
+    }
+  }
+  const required = "required" in docgenInfo ? docgenInfo.required ?? false : false;
+  return {
+    name: docgenInfo.name,
+    description: docgenInfo.description,
+    type: sbType ? { ...sbType, required } : { name: "other", value: type ?? "" },
+    table: {
+      type: type ? { summary: type } : void 0,
+      defaultValue: extractedProp?.propDef.defaultValue ?? void 0,
+      jsDocTags: extractedProp?.propDef.jsDocTags,
+      category: section
+    }
+  };
+}, "extractFromVueDocgenApi");
+var extractFromVueComponentMeta = /* @__PURE__ */ __name((docgenInfo, section) => {
+  if ("global" in docgenInfo && docgenInfo.global) {
+    return;
+  }
+  const tableType = { summary: docgenInfo.type.replace(" | undefined", "") };
+  if (section === "props") {
+    const propInfo = docgenInfo;
+    const defaultValue = propInfo.default ? { summary: propInfo.default } : void 0;
+    return {
+      name: propInfo.name,
+      description: formatDescriptionWithTags(propInfo.description, propInfo.tags),
+      defaultValue,
+      type: convertVueComponentMetaProp(propInfo),
+      table: {
+        type: tableType,
+        defaultValue,
+        category: section
+      }
+    };
+  } else {
+    return {
+      name: docgenInfo.name,
+      description: "description" in docgenInfo ? docgenInfo.description : "",
+      type: { name: "other", value: docgenInfo.type },
+      table: { type: tableType, category: section }
+    };
+  }
+}, "extractFromVueComponentMeta");
+var convertVueComponentMetaProp = /* @__PURE__ */ __name((propInfo) => {
+  const schema = propInfo.schema;
+  const required = propInfo.required;
+  const fallbackSbType = { name: "other", value: propInfo.type, required };
+  const KNOWN_SCHEMAS = ["string", "number", "function", "boolean", "symbol"];
+  if (typeof schema === "string") {
+    if (KNOWN_SCHEMAS.includes(schema)) {
+      return { name: schema, required };
+    }
+    return fallbackSbType;
+  }
+  switch (schema.kind) {
+    case "enum": {
+      let definedSchemas = schema.schema?.filter((item) => item !== "undefined") ?? [];
+      if (isBooleanSchema(definedSchemas)) {
+        return { name: "boolean", required };
+      }
+      if (isLiteralUnionSchema(definedSchemas) || isEnumSchema(definedSchemas)) {
+        const literals = definedSchemas.map((literal) => literal.replace(/"/g, ""));
+        return { name: "enum", value: literals, required };
+      }
+      if (definedSchemas.length === 1) {
+        return convertVueComponentMetaProp({
+          schema: definedSchemas[0],
+          type: propInfo.type,
+          required
+        });
+      }
+      if (definedSchemas.length > 2 && definedSchemas.includes("true") && definedSchemas.includes("false")) {
+        definedSchemas = definedSchemas.filter((i) => i !== "true" && i !== "false");
+        definedSchemas.push("boolean");
+      }
+      return {
+        name: "union",
+        value: definedSchemas.map((i) => {
+          if (typeof i === "object") {
+            return convertVueComponentMetaProp({
+              schema: i,
+              type: i.type,
+              required: false
+            });
+          } else {
+            return convertVueComponentMetaProp({ schema: i, type: i, required: false });
+          }
+        }),
+        required
+      };
+    }
+    case "array": {
+      const definedSchemas = schema.schema?.filter((item) => item !== "undefined") ?? [];
+      if (definedSchemas.length === 0) {
+        return fallbackSbType;
+      }
+      if (definedSchemas.length === 1) {
+        return {
+          name: "array",
+          value: convertVueComponentMetaProp({
+            schema: definedSchemas[0],
+            type: propInfo.type,
+            required: false
+          }),
+          required
+        };
+      }
+      return {
+        name: "union",
+        value: definedSchemas.map((i) => {
+          if (typeof i === "object") {
+            return convertVueComponentMetaProp({
+              schema: i,
+              type: i.type,
+              required: false
+            });
+          } else {
+            return convertVueComponentMetaProp({ schema: i, type: i, required: false });
+          }
+        }),
+        required
+      };
+    }
+    case "object":
+      return {
+        name: "object",
+        // while Storybook generates simple JSON object controls, nested schemas don't have specialized controls
+        // so we don't need to recursively map the object schema here
+        value: {},
+        required
+      };
+    default:
+      return fallbackSbType;
+  }
+}, "convertVueComponentMetaProp");
+var formatDescriptionWithTags = /* @__PURE__ */ __name((description, tags) => {
+  if (!tags?.length || !description) {
+    return description ?? "";
+  }
+  const tagDescriptions = tags.map((tag) => `@${tag.name}: ${tag.text}`).join("<br>");
+  return `${tagDescriptions}<br><br>${description}`;
+}, "formatDescriptionWithTags");
+var isLiteralUnionSchema = /* @__PURE__ */ __name((schemas) => {
+  return schemas.every(
+    (schema) => typeof schema === "string" && schema.startsWith('"') && schema.endsWith('"')
+  );
+}, "isLiteralUnionSchema");
+var isEnumSchema = /* @__PURE__ */ __name((schemas) => {
+  return schemas.every((schema) => typeof schema === "string" && schema.includes("."));
+}, "isEnumSchema");
+var isBooleanSchema = /* @__PURE__ */ __name((schemas) => {
+  return schemas.length === 2 && schemas.includes("true") && schemas.includes("false");
+}, "isBooleanSchema");
+
+// src/render.ts
+import { createApp, h, isReactive, isVNode, reactive } from "vue";
+var render = /* @__PURE__ */ __name((props, context) => {
+  const { id, component: Component } = context;
+  if (!Component) {
+    throw new Error(
+      `Unable to render story ${id} as the component annotation is missing from the default export`
+    );
+  }
+  return () => h(Component, props, getSlots(props, context));
+}, "render");
+var setup = /* @__PURE__ */ __name((fn) => {
+  globalThis.PLUGINS_SETUP_FUNCTIONS ??= /* @__PURE__ */ new Set();
+  globalThis.PLUGINS_SETUP_FUNCTIONS.add(fn);
+}, "setup");
+var runSetupFunctions = /* @__PURE__ */ __name(async (app, storyContext) => {
+  if (globalThis && globalThis.PLUGINS_SETUP_FUNCTIONS) {
+    await Promise.all([...globalThis.PLUGINS_SETUP_FUNCTIONS].map((fn) => fn(app, storyContext)));
+  }
+}, "runSetupFunctions");
+var map = /* @__PURE__ */ new Map();
+async function renderToCanvas({ storyFn, forceRemount, showMain, showException, storyContext, id }, canvasElement) {
+  const existingApp = map.get(canvasElement);
+  if (existingApp && !forceRemount) {
+    const element = storyFn();
+    const args = getArgs(element, storyContext);
+    updateArgs(existingApp.reactiveArgs, args);
+    return () => {
+      teardown(existingApp.vueApp, canvasElement);
+    };
+  }
+  if (existingApp && forceRemount) {
+    teardown(existingApp.vueApp, canvasElement);
+  }
+  const vueApp = createApp({
+    setup() {
+      storyContext.args = reactive(storyContext.args);
+      const rootElement = storyFn();
+      const args = getArgs(rootElement, storyContext);
+      const appState = {
+        vueApp,
+        reactiveArgs: reactive(args)
+      };
+      map.set(canvasElement, appState);
+      return () => {
+        return h(rootElement);
+      };
+    }
+  });
+  vueApp.config.errorHandler = (e, instance, info) => {
+    const preview = window.__STORYBOOK_PREVIEW__;
+    const isPlaying = preview?.storyRenders.some(
+      (renderer) => renderer.id === id && renderer.phase === "playing"
+    );
+    if (isPlaying) {
+      setTimeout(() => {
+        throw e;
+      }, 0);
+    } else {
+      showException(e);
+    }
+  };
+  await runSetupFunctions(vueApp, storyContext);
+  vueApp.mount(canvasElement);
+  showMain();
+  return () => {
+    teardown(vueApp, canvasElement);
+  };
+}
+__name(renderToCanvas, "renderToCanvas");
+function getSlots(props, context) {
+  const { argTypes } = context;
+  const slots = Object.entries(props).filter(([key]) => argTypes[key]?.table?.category === "slots").map(([key, value]) => [key, typeof value === "function" ? value : () => value]);
+  return Object.fromEntries(slots);
+}
+__name(getSlots, "getSlots");
+function getArgs(element, storyContext) {
+  return element.props && isVNode(element) ? element.props : storyContext.args;
+}
+__name(getArgs, "getArgs");
+function updateArgs(reactiveArgs, nextArgs) {
+  if (Object.keys(nextArgs).length === 0) {
+    return;
+  }
+  const currentArgs = isReactive(reactiveArgs) ? reactiveArgs : reactive(reactiveArgs);
+  Object.keys(currentArgs).forEach((key) => {
+    if (!(key in nextArgs)) {
+      delete currentArgs[key];
+    }
+  });
+  Object.assign(currentArgs, nextArgs);
+}
+__name(updateArgs, "updateArgs");
+function teardown(storybookApp, canvasElement) {
+  storybookApp?.unmount();
+  if (map.has(canvasElement)) {
+    map.delete(canvasElement);
+  }
+}
+__name(teardown, "teardown");
+
+// src/decorateStory.ts
+import { sanitizeStoryContextUpdate } from "storybook/preview-api";
+import { h as h2 } from "vue";
+function normalizeFunctionalComponent(options) {
+  return typeof options === "function" ? { render: options, name: options.name } : options;
+}
+__name(normalizeFunctionalComponent, "normalizeFunctionalComponent");
+function prepare(rawStory, innerStory) {
+  const story = rawStory;
+  if (story === null) {
+    return null;
+  }
+  if (typeof story === "function") {
+    return story;
+  }
+  if (innerStory) {
+    return {
+      // Normalize so we can always spread an object
+      ...normalizeFunctionalComponent(story),
+      components: { ...story.components || {}, story: innerStory }
+    };
+  }
+  return {
+    render() {
+      return h2(story);
+    }
+  };
+}
+__name(prepare, "prepare");
+function decorateStory(storyFn, decorators) {
+  return decorators.reduce(
+    (decorated, decorator) => (context) => {
+      let story;
+      const decoratedStory = decorator((update) => {
+        const sanitizedUpdate = sanitizeStoryContextUpdate(update);
+        if (update) {
+          sanitizedUpdate.args = Object.assign(context.args, sanitizedUpdate.args);
+        }
+        story = decorated({ ...context, ...sanitizedUpdate });
+        return story;
+      }, context);
+      if (!story) {
+        story = decorated(context);
+      }
+      if (decoratedStory === story) {
+        return story;
+      }
+      const innerStory = /* @__PURE__ */ __name(() => h2(story), "innerStory");
+      return prepare(decoratedStory, innerStory);
+    },
+    (context) => prepare(storyFn(context))
+  );
+}
+__name(decorateStory, "decorateStory");
+
+// src/mount.ts
+import { h as h3 } from "vue";
+var mount = /* @__PURE__ */ __name((context) => {
+  return async (Component, options) => {
+    if (Component) {
+      context.originalStoryFn = () => () => h3(Component, options?.props, options?.slots);
+    }
+    await context.renderToCanvas();
+    return context.canvas;
+  };
+}, "mount");
+
+// src/entry-preview.ts
+var parameters = {
+  renderer: "vue3",
+  docs: {
+    story: { inline: true },
+    extractArgTypes,
+    extractComponentDescription
+  }
+};
+var argTypesEnhancers = [enhanceArgTypes];
+
+export {
+  render,
+  setup,
+  renderToCanvas,
+  decorateStory,
+  mount,
+  parameters,
+  argTypesEnhancers,
+  entry_preview_exports
+};

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

@@ -0,0 +1,11 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export {
+  __name,
+  __export
+};