@sit-onyx/storybook-utils 1.0.0-beta.43 → 1.0.0-beta.45

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-beta.43",
+  "version": "1.0.0-beta.45",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -23,11 +23,11 @@
     "url": "https://github.com/SchwarzIT/onyx/issues"
   },
   "peerDependencies": {
-    "@storybook/vue3": ">= 8.2.0",
-    "storybook": ">= 8.2.0",
+    "@storybook/vue3": ">= 8.3.0-alpha.5",
+    "storybook": ">= 8.3.0-alpha.5",
     "storybook-dark-mode": ">= 4",
-    "@sit-onyx/icons": "^1.0.0-beta.1",
-    "sit-onyx": "^1.0.0-beta.40"
+    "@sit-onyx/icons": "^1.0.0-beta.2",
+    "sit-onyx": "^1.0.0-beta.41"
   },
   "dependencies": {
     "deepmerge-ts": "^7.1.0"

package/src/preview.spec.ts

@@ -1,25 +1,19 @@
 import bellRing from "@sit-onyx/icons/bell-ring.svg?raw";
 import calendar from "@sit-onyx/icons/calendar.svg?raw";
 import placeholder from "@sit-onyx/icons/placeholder.svg?raw";
-import { describe, expect, test, vi } from "vitest";
+import { describe, expect, test } from "vitest";
 import { replaceAll, sourceCodeTransformer } from "./preview";
-import * as sourceCodeGenerator from "./source-code-generator";
 
 describe("preview.ts", () => {
   test("should transform source code and add icon/onyx imports", () => {
-    // ARRANGE
-    const generatorSpy = vi.spyOn(sourceCodeGenerator, "generateSourceCode")
-      .mockReturnValue(`<template>
+    // ACT
+    const sourceCode = sourceCodeTransformer(`<template>
 <OnyxTest icon='${placeholder}' test='${bellRing}' :obj="{foo:'${replaceAll(calendar, '"', "\\'")}'}" />
 <OnyxOtherComponent />
 <OnyxComp>Test</OnyxComp>
 </template>`);
 
-    // ACT
-    const sourceCode = sourceCodeTransformer("", { title: "OnyxTest", args: {} });
-
     // ASSERT
-    expect(generatorSpy).toHaveBeenCalledOnce();
     expect(sourceCode).toBe(`<script lang="ts" setup>
 import { OnyxComp, OnyxOtherComponent, OnyxTest } from "sit-onyx";
 import bellRing from "@sit-onyx/icons/bell-ring.svg?raw";

package/src/preview.ts

@@ -1,5 +1,5 @@
 import { getIconImportName } from "@sit-onyx/icons";
-import { type Preview, type StoryContext } from "@storybook/vue3";
+import type { Preview } from "@storybook/vue3";
 import { deepmerge } from "deepmerge-ts";
 import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
 import { DOCS_RENDERED } from "storybook/internal/core-events";
@@ -7,7 +7,6 @@ import { addons } from "storybook/internal/preview-api";
 import type { ThemeVars } from "storybook/internal/theming";
 import { enhanceEventArgTypes } from "./actions";
 import { requiredGlobalType, withRequired } from "./required";
-import { generateSourceCode } from "./source-code-generator";
 import { ONYX_BREAKPOINTS, createTheme } from "./theme";
 
 const themes = {
@@ -126,16 +125,15 @@ export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
  *
  * @see https://storybook.js.org/docs/react/api/doc-block-source
  */
-export const sourceCodeTransformer = (
-  sourceCode: string,
-  ctx: Pick<StoryContext, "title" | "component" | "args">,
-): string => {
+export const sourceCodeTransformer = (originalSourceCode: string): string => {
   const RAW_ICONS = import.meta.glob("../node_modules/@sit-onyx/icons/src/assets/*.svg", {
     query: "?raw",
     import: "default",
     eager: true,
   });
 
+  let code = originalSourceCode;
+
   /**
    * Mapping between icon SVG content (key) and icon name (value).
    * Needed to display a labelled dropdown list of all available icons.
@@ -148,8 +146,6 @@ export const sourceCodeTransformer = (
     {},
   );
 
-  let code = generateSourceCode(ctx);
-
   const additionalImports: string[] = [];
 
   // add icon imports to the source code for all used onyx icons

package/src/source-code-generator.spec.ts

@@ -1,262 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-//
-// This file is only a temporary copy of the improved source code generation for Storybook.
-// It is intended to be deleted once its officially released in Storybook itself, see:
-// https://github.com/storybookjs/storybook/pull/27194
-//
-import { expect, test } from "vitest";
-import { h } from "vue";
-import {
-  generatePropsSourceCode,
-  generateSlotSourceCode,
-  generateSourceCode,
-  getFunctionParamNames,
-  parseDocgenInfo,
-  type SourceCodeGeneratorContext,
-} from "./source-code-generator";
-
-test("should generate source code for props", () => {
-  const ctx: SourceCodeGeneratorContext = {
-    scriptVariables: {},
-    imports: {},
-  };
-
-  const code = generatePropsSourceCode(
-    {
-      a: "foo",
-      b: '"I am double quoted"',
-      c: 42,
-      d: true,
-      e: false,
-      f: [1, 2, 3],
-      g: {
-        g1: "foo",
-        g2: 42,
-      },
-      h: undefined,
-      i: null,
-      j: "",
-      k: BigInt(9007199254740991),
-      l: Symbol(),
-      m: Symbol("foo"),
-      modelValue: "test-v-model",
-      otherModelValue: 42,
-      default: "default slot",
-      testSlot: "test slot",
-    },
-    ["default", "testSlot"],
-    ["update:modelValue", "update:otherModelValue"],
-    ctx,
-  );
-
-  expect(code).toBe(
-    `a="foo" b='"I am double quoted"' :c="42" d :e="false" :f="f" :g="g" :k="BigInt(9007199254740991)" :l="Symbol()" :m="Symbol('foo')" v-model="modelValue" v-model:otherModelValue="otherModelValue"`,
-  );
-
-  expect(ctx.scriptVariables).toStrictEqual({
-    f: `[1,2,3]`,
-    g: `{"g1":"foo","g2":42}`,
-    modelValue: 'ref("test-v-model")',
-    otherModelValue: "ref(42)",
-  });
-
-  expect(Array.from(ctx.imports.vue.values())).toStrictEqual(["ref"]);
-});
-
-test("should generate source code for slots", () => {
-  // slot code generator should support primitive values (string, number etc.)
-  // but also VNodes (e.g. created using h()) so custom Vue components can also be used
-  // inside slots with proper generated code
-
-  const slots = {
-    default: "default content",
-    a: "a content",
-    b: 42,
-    c: true,
-    // single VNode without props
-    d: h("div", "d content"),
-    // VNode with props and single child
-    e: h("div", { style: "color:red" }, "e content"),
-    // VNode with props and single child returned as getter
-    f: h("div", { style: "color:red" }, () => "f content"),
-    // VNode with multiple children
-    g: h("div", { style: "color:red" }, [
-      "child 1",
-      h("span", { style: "color:green" }, "child 2"),
-    ]),
-    // VNode multiple children but returned as getter
-    h: h("div", { style: "color:red" }, () => [
-      "child 1",
-      h("span", { style: "color:green" }, "child 2"),
-    ]),
-    // VNode with multiple and nested children
-    i: h("div", { style: "color:red" }, [
-      "child 1",
-      h("span", { style: "color:green" }, ["nested child 1", h("p", "nested child 2")]),
-    ]),
-    j: ["child 1", "child 2"],
-    k: null,
-    l: { foo: "bar" },
-    m: BigInt(9007199254740991),
-  };
-
-  const expectedCode = `default content
-
-<template #a>a content</template>
-
-<template #b>42</template>
-
-<template #c>true</template>
-
-<template #d><div>d content</div></template>
-
-<template #e><div style="color:red">e content</div></template>
-
-<template #f><div style="color:red">f content</div></template>
-
-<template #g><div style="color:red">child 1
-<span style="color:green">child 2</span></div></template>
-
-<template #h><div style="color:red">child 1
-<span style="color:green">child 2</span></div></template>
-
-<template #i><div style="color:red">child 1
-<span style="color:green">nested child 1
-<p>nested child 2</p></span></div></template>
-
-<template #j>child 1
-child 2</template>
-
-<template #l>{"foo":"bar"}</template>
-
-<template #m>{{ BigInt(9007199254740991) }}</template>`;
-
-  let actualCode = generateSlotSourceCode(slots, Object.keys(slots), {
-    scriptVariables: {},
-    imports: {},
-  });
-  expect(actualCode).toBe(expectedCode);
-
-  // should generate the same code if getters/functions are used to return the slot content
-  const slotsWithGetters = Object.entries(slots).reduce<
-    Record<string, () => (typeof slots)[keyof typeof slots]>
-  >((obj, [slotName, value]) => {
-    obj[slotName] = () => value;
-    return obj;
-  }, {});
-
-  actualCode = generateSlotSourceCode(slotsWithGetters, Object.keys(slotsWithGetters), {
-    scriptVariables: {},
-    imports: {},
-  });
-  expect(actualCode).toBe(expectedCode);
-});
-
-test("should generate source code for slots with bindings", () => {
-  type TestBindings = {
-    foo: string;
-    bar?: number;
-    boo: {
-      mimeType: string;
-    };
-  };
-
-  const slots = {
-    a: ({ foo, bar, boo }: TestBindings) => `Slot with bindings ${foo}, ${bar} and ${boo.mimeType}`,
-    b: ({ foo, boo }: TestBindings) =>
-      h("a", { href: foo, target: foo, type: boo.mimeType, ...boo }, `Test link: ${foo}`),
-  };
-
-  const expectedCode = `<template #a="{ foo, bar, boo }">Slot with bindings {{ foo }}, {{ bar }} and {{ boo.mimeType }}</template>
-
-<template #b="{ foo, boo }"><a :href="foo" :target="foo" :type="boo.mimeType" v-bind="boo">Test link: {{ foo }}</a></template>`;
-
-  const actualCode = generateSlotSourceCode(slots, Object.keys(slots), {
-    imports: {},
-    scriptVariables: {},
-  });
-  expect(actualCode).toBe(expectedCode);
-});
-
-test("should generate source code with <script setup> block", () => {
-  const actualCode = generateSourceCode({
-    title: "MyComponent",
-    component: {
-      __docgenInfo: {
-        slots: [{ name: "mySlot" }],
-        events: [{ name: "update:c" }],
-      },
-    },
-    args: {
-      a: 42,
-      b: "foo",
-      c: [1, 2, 3],
-      d: { bar: "baz" },
-      mySlot: () => h("div", { test: [1, 2], d: { nestedProp: "foo" } }),
-    },
-  });
-
-  expect(actualCode).toBe(`<script lang="ts" setup>
-import { ref } from "vue";
-
-const c = ref([1,2,3]);
-
-const d = {"bar":"baz"};
-
-const d1 = {"nestedProp":"foo"};
-
-const test = [1,2];
-</script>
-
-<template>
-  <MyComponent :a="42" b="foo" v-model:c="c" :d="d"> <template #mySlot><div :d="d1" :test="test" /></template> </MyComponent>
-</template>`);
-});
-
-test.each([
-  { __docgenInfo: "invalid-value", slotNames: [] },
-  { __docgenInfo: {}, slotNames: [] },
-  { __docgenInfo: { slots: "invalid-value" }, slotNames: [] },
-  { __docgenInfo: { slots: ["invalid-value"] }, slotNames: [] },
-  {
-    __docgenInfo: { slots: [{ name: "slot-1" }, { name: "slot-2" }, { notName: "slot-3" }] },
-    slotNames: ["slot-1", "slot-2"],
-  },
-])("should parse slots names from __docgenInfo", ({ __docgenInfo, slotNames }) => {
-  const docgenInfo = parseDocgenInfo({ __docgenInfo });
-  expect(docgenInfo.slotNames).toStrictEqual(slotNames);
-});
-
-test.each([
-  { __docgenInfo: "invalid-value", eventNames: [] },
-  { __docgenInfo: {}, eventNames: [] },
-  { __docgenInfo: { events: "invalid-value" }, eventNames: [] },
-  { __docgenInfo: { events: ["invalid-value"] }, eventNames: [] },
-  {
-    __docgenInfo: { events: [{ name: "event-1" }, { name: "event-2" }, { notName: "event-3" }] },
-    eventNames: ["event-1", "event-2"],
-  },
-])("should parse event names from __docgenInfo", ({ __docgenInfo, eventNames }) => {
-  const docgenInfo = parseDocgenInfo({ __docgenInfo });
-  expect(docgenInfo.eventNames).toStrictEqual(eventNames);
-});
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-test.each<{ fn: (...args: any[]) => unknown; expectedNames: string[] }>([
-  { fn: () => ({}), expectedNames: [] },
-  { fn: (a) => ({}), expectedNames: ["a"] },
-  { fn: (a, b) => ({}), expectedNames: ["a", "b"] },
-  { fn: (a, b, { c }) => ({}), expectedNames: ["a", "b", "{", "c", "}"] },
-  { fn: ({ a, b }) => ({}), expectedNames: ["{", "a", "b", "}"] },
-  {
-    fn: {
-      // simulate minified function after running "storybook build"
-      toString: () => "({a:foo,b:bar})=>({})",
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } as (...args: any[]) => unknown,
-    expectedNames: ["{", "a", "b", "}"],
-  },
-])("should extract function parameter names", ({ fn, expectedNames }) => {
-  const paramNames = getFunctionParamNames(fn);
-  expect(paramNames).toStrictEqual(expectedNames);
-});

package/src/source-code-generator.ts

@@ -1,592 +0,0 @@
-//
-// This file is only a temporary copy of the improved source code generation for Storybook.
-// It is intended to be deleted once its officially released in Storybook itself, see:
-// https://github.com/storybookjs/storybook/pull/27194
-//
-import type { Args, StoryContext } from "@storybook/vue3";
-import { SourceType } from "storybook/internal/docs-tools";
-import { isVNode, type VNode } from "vue";
-import { replaceAll } from "./preview";
-
-/**
- * Used to get the tracking data from the proxy.
- * A symbol is unique, so when using it as a key it can't be accidentally accessed.
- */
-const TRACKING_SYMBOL = Symbol("DEEP_ACCESS_SYMBOL");
-
-type TrackingProxy = {
-  [TRACKING_SYMBOL]: true;
-  toString: () => string;
-};
-
-const isProxy = (obj: unknown): obj is TrackingProxy =>
-  !!(obj && typeof obj === "object" && TRACKING_SYMBOL in obj);
-
-/**
- * Context that is passed down to nested components/slots when generating the source code for a single story.
- */
-export type SourceCodeGeneratorContext = {
-  /**
-   * Properties/variables that should be placed inside a `<script lang="ts" setup>` block.
-   * Usually contains complex property values like objects and arrays.
-   */
-  scriptVariables: Record<string, string>;
-  /**
-   * Optional imports to add inside the `<script lang="ts" setup>` block.
-   * e.g. to add 'import { ref } from "vue";'
-   *
-   * key = package name, values = imports
-   */
-  imports: Record<string, Set<string>>;
-};
-
-/**
- * Generate Vue source code for the given Story.
- * @returns Source code or empty string if source code could not be generated.
- */
-export const generateSourceCode = (
-  ctx: Pick<StoryContext, "title" | "component" | "args"> & {
-    component?: StoryContext["component"] & { __docgenInfo?: unknown };
-  },
-): string => {
-  const sourceCodeContext: SourceCodeGeneratorContext = {
-    imports: {},
-    scriptVariables: {},
-  };
-
-  const { displayName, slotNames, eventNames } = parseDocgenInfo(ctx.component);
-
-  const props = generatePropsSourceCode(ctx.args, slotNames, eventNames, sourceCodeContext);
-  const slotSourceCode = generateSlotSourceCode(ctx.args, slotNames, sourceCodeContext);
-  const componentName = displayName || ctx.title.split("/").at(-1)!;
-
-  // prefer self closing tag if no slot content exists
-  const templateCode = slotSourceCode
-    ? `<${componentName} ${props}> ${slotSourceCode} </${componentName}>`
-    : `<${componentName} ${props} />`;
-
-  const variablesCode = Object.entries(sourceCodeContext.scriptVariables)
-    .map(([name, value]) => `const ${name} = ${value};`)
-    .join("\n\n");
-
-  const importsCode = Object.entries(sourceCodeContext.imports)
-    .map(([packageName, imports]) => {
-      return `import { ${Array.from(imports.values()).sort().join(", ")} } from "${packageName}";`;
-    })
-    .join("\n");
-
-  const template = `<template>\n  ${templateCode}\n</template>`;
-
-  if (!importsCode && !variablesCode) return template;
-
-  return `<script lang="ts" setup>
-${importsCode ? `${importsCode}\n\n${variablesCode}` : variablesCode}
-</script>
-
-${template}`;
-};
-
-/**
- * Checks if the source code generation should be skipped for the given Story context.
- * Will be true if one of the following is true:
- * - view mode is not "docs"
- * - story is no arg story
- * - story has set custom source code via parameters.docs.source.code
- * - story has set source type to "code" via parameters.docs.source.type
- */
-export const shouldSkipSourceCodeGeneration = (context: StoryContext): boolean => {
-  const sourceParams = context?.parameters.docs?.source;
-  if (sourceParams?.type === SourceType.DYNAMIC) {
-    // always render if the user forces it
-    return false;
-  }
-
-  const isArgsStory = context?.parameters.__isArgsStory;
-  const isDocsViewMode = context?.viewMode === "docs";
-
-  // never render if the user is forcing the block to render code, or
-  // if the user provides code, or if it's not an args story.
-  return (
-    !isDocsViewMode || !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE
-  );
-};
-
-/**
- * Parses the __docgenInfo of the given component.
- * Requires Storybook docs addon to be enabled.
- * Default slot will always be sorted first, remaining slots are sorted alphabetically.
- */
-export const parseDocgenInfo = (
-  component?: StoryContext["component"] & { __docgenInfo?: unknown },
-) => {
-  // type check __docgenInfo to prevent errors
-  if (
-    !component ||
-    !("__docgenInfo" in component) ||
-    !component.__docgenInfo ||
-    typeof component.__docgenInfo !== "object"
-  ) {
-    return {
-      displayName: component?.__name,
-      eventNames: [],
-      slotNames: [],
-    };
-  }
-
-  const docgenInfo = component.__docgenInfo as Record<string, unknown>;
-
-  const displayName =
-    "displayName" in docgenInfo && typeof docgenInfo.displayName === "string"
-      ? docgenInfo.displayName
-      : undefined;
-
-  const parseNames = (key: "slots" | "events") => {
-    if (!(key in docgenInfo) || !Array.isArray(docgenInfo[key])) return [];
-
-    const values = docgenInfo[key] as unknown[];
-
-    return values
-      .map((i) => (i && typeof i === "object" && "name" in i ? i.name : undefined))
-      .filter((i): i is string => typeof i === "string");
-  };
-
-  return {
-    displayName: displayName || component.__name,
-    slotNames: parseNames("slots").sort((a, b) => {
-      if (a === "default") return -1;
-      if (b === "default") return 1;
-      return a.localeCompare(b);
-    }),
-    eventNames: parseNames("events"),
-  };
-};
-
-/**
- * Generates the source code for the given Vue component properties.
- * Props with complex values (objects and arrays) and v-models will be added to the ctx.scriptVariables because they should be
- * generated in a `<script lang="ts" setup>` block.
- *
- * @param args Story args / property values.
- * @param slotNames All slot names of the component. Needed to not generate code for args that are slots.
- * Can be extracted using `parseDocgenInfo()`.
- * @param eventNames All event names of the component. Needed to generate v-model properties. Can be extracted using `parseDocgenInfo()`.
- *
- * @example `:a="42" b="Hello World" v-model="modelValue" v-model:search="search"`
- */
-export const generatePropsSourceCode = (
-  args: Record<string, unknown>,
-  slotNames: string[],
-  eventNames: string[],
-  ctx: SourceCodeGeneratorContext,
-) => {
-  type Property = {
-    /** Property name */
-    name: string;
-    /** Stringified property value */
-    value: string;
-    /**
-     * Function that returns the source code when used inside the `<template>`.
-     * If unset, the property will be generated inside the `<script lang="ts" setup>` block.
-     */
-    templateFn?: (name: string, value: string) => string;
-  };
-
-  const properties: Property[] = [];
-
-  Object.entries(args).forEach(([propName, value]) => {
-    // ignore slots
-    if (slotNames.includes(propName)) return;
-    if (value == undefined) return; // do not render undefined/null values
-
-    if (isProxy(value)) {
-      value = value!.toString();
-    }
-
-    switch (typeof value) {
-      case "string":
-        if (value === "") return; // do not render empty strings
-
-        properties.push({
-          name: propName,
-          value: value.includes('"') ? `'${value}'` : `"${value}"`,
-          templateFn: (name, propValue) => `${name}=${propValue}`,
-        });
-        break;
-      case "number":
-        properties.push({
-          name: propName,
-          value: value.toString(),
-          templateFn: (name, propValue) => `:${name}="${propValue}"`,
-        });
-        break;
-      case "bigint":
-        properties.push({
-          name: propName,
-          value: `BigInt(${value.toString()})`,
-          templateFn: (name, propValue) => `:${name}="${propValue}"`,
-        });
-        break;
-      case "boolean":
-        properties.push({
-          name: propName,
-          value: value ? "true" : "false",
-          templateFn: (name, propValue) => (propValue === "true" ? name : `:${name}="false"`),
-        });
-        break;
-      case "symbol":
-        properties.push({
-          name: propName,
-          value: `Symbol(${value.description ? `'${value.description}'` : ""})`,
-          templateFn: (name, propValue) => `:${name}="${propValue}"`,
-        });
-        break;
-      case "object": {
-        properties.push({
-          name: propName,
-          value: formatObject(value ?? {}),
-          // to follow Vue best practices, complex values like object and arrays are
-          // usually placed inside the <script setup> block instead of inlining them in the <template>
-          templateFn: undefined,
-        });
-        break;
-      }
-      case "function":
-        // TODO: check if functions should be rendered in source code
-        break;
-    }
-  });
-
-  properties.sort((a, b) => a.name.localeCompare(b.name));
-
-  /**
-   * List of generated source code for the props.
-   * @example [':a="42"', 'b="Hello World"']
-   */
-  const props: string[] = [];
-
-  // now that we have all props parsed, we will generate them either inside the `<script lang="ts" setup>` block
-  // or inside the `<template>`.
-  // we also make sure to render v-model properties accordingly (see https://vuejs.org/guide/components/v-model)
-  properties.forEach((prop) => {
-    const isVModel = eventNames.includes(`update:${prop.name}`);
-
-    if (!isVModel && prop.templateFn) {
-      props.push(prop.templateFn(prop.name, prop.value));
-      return;
-    }
-
-    let variableName = prop.name;
-
-    // a variable with the same name might already exist (e.g. from a parent component)
-    // so we need to make sure to use a unique name here to not generate multiple variables with the same name
-    if (variableName in ctx.scriptVariables) {
-      let index = 1;
-      do {
-        variableName = `${prop.name}${index}`;
-        index++;
-      } while (variableName in ctx.scriptVariables);
-    }
-
-    if (!isVModel) {
-      ctx.scriptVariables[variableName] = prop.value;
-      props.push(`:${prop.name}="${variableName}"`);
-      return;
-    }
-
-    // always generate v-models inside the `<script lang="ts" setup>` block
-    ctx.scriptVariables[variableName] = `ref(${prop.value})`;
-
-    if (!ctx.imports.vue) ctx.imports.vue = new Set();
-    ctx.imports.vue.add("ref");
-
-    if (prop.name === "modelValue") {
-      props.push(`v-model="${variableName}"`);
-    } else {
-      props.push(`v-model:${prop.name}="${variableName}"`);
-    }
-  });
-
-  return props.join(" ");
-};
-
-/**
- * Generates the source code for the given Vue component slots.
- * Supports primitive slot content (e.g. strings, numbers etc.) and nested components/VNodes (e.g. created using Vue's `h()` function).
- *
- * @param args Story args.
- * @param slotNames All slot names of the component. Needed to only generate slots and ignore props etc.
- * Can be extracted using `parseDocgenInfo()`.
- * @param ctx Context so complex props of nested slot children will be set in the ctx.scriptVariables.
- *
- * @example `<template #slotName="{ foo }">Content {{ foo }}</template>`
- */
-export const generateSlotSourceCode = (
-  args: Args,
-  slotNames: string[],
-  ctx: SourceCodeGeneratorContext,
-): string => {
-  /** List of slot source codes (e.g. <template #slotName>Content</template>) */
-  const slotSourceCodes: string[] = [];
-
-  slotNames.forEach((slotName) => {
-    const arg = args[slotName];
-    if (!arg) return;
-
-    const slotContent = generateSlotChildrenSourceCode([arg], ctx);
-    if (!slotContent) return; // do not generate source code for empty slots
-
-    const slotBindings = typeof arg === "function" ? getFunctionParamNames(arg) : [];
-
-    if (slotName === "default" && !slotBindings.length) {
-      // do not add unnecessary "<template #default>" tag since the default slot content without bindings
-      // can be put directly into the slot without need of "<template #default>"
-      slotSourceCodes.push(slotContent);
-    } else {
-      slotSourceCodes.push(
-        `<template ${slotBindingsToString(slotName, slotBindings)}>${slotContent}</template>`,
-      );
-    }
-  });
-
-  return slotSourceCodes.join("\n\n");
-};
-
-/**
- * Generates the source code for the given slot children (the code inside <template #slotName></template>).
- */
-const generateSlotChildrenSourceCode = (
-  children: unknown[],
-  ctx: SourceCodeGeneratorContext,
-): string => {
-  const slotChildrenSourceCodes: string[] = [];
-
-  /**
-   * Recursively generates the source code for a single slot child and all its children.
-   * @returns Source code for child and all nested children or empty string if child is of a non-supported type.
-   */
-  const generateSingleChildSourceCode = (child: unknown): string => {
-    if (isVNode(child)) {
-      return generateVNodeSourceCode(child, ctx);
-    }
-
-    switch (typeof child) {
-      case "string":
-      case "number":
-      case "boolean":
-        return child.toString();
-
-      case "object":
-        if (child === null) return "";
-        if (Array.isArray(child)) {
-          // if child also has children, we generate them recursively
-          return child
-            .map(generateSingleChildSourceCode)
-            .filter((code) => code !== "")
-            .join("\n");
-        }
-        return JSON.stringify(child);
-
-      case "function": {
-        const paramNames = getFunctionParamNames(child).filter(
-          (param) => !["{", "}"].includes(param),
-        );
-
-        // We create proxy to track how and which properties of a parameter are accessed
-        const parameters: Record<string, string> = {};
-        const proxied: Record<string, TrackingProxy> = {};
-        paramNames.forEach((param) => {
-          parameters[param] = `{{ ${param} }}`;
-          // TODO: we should be able to extend the proxy logic here and maybe get rid of the `generatePropsSourceCode` code
-          proxied[param] = new Proxy(
-            {
-              // we use the symbol to identify the proxy
-              [TRACKING_SYMBOL]: true,
-            } as TrackingProxy,
-            {
-              // getter is called when any prop of the parameter is read
-              get: (t, key) => {
-                if (key === TRACKING_SYMBOL) {
-                  // allow retrieval of the tracking data
-                  return t[TRACKING_SYMBOL];
-                }
-                if ([Symbol.toPrimitive, Symbol.toStringTag, "toString"].includes(key)) {
-                  // when the parameter is used as a string we return the parameter name
-                  // we use the double brace notation as we don't know if the parameter is used in text or in a binding
-                  return () => `{{ ${param} }}`;
-                }
-                if (key === "v-bind") {
-                  // if this key is returned we just return the parameter name
-                  return `${param}`;
-                }
-                // otherwise a specific key of the parameter was accessed
-                // we use the double brace notation as we don't know if the parameter is used in text or in a binding
-                return `{{ ${param}.${key.toString()} }}`;
-              },
-              // ownKeys is called, among other uses, when an object is destructured
-              // in this case we assume the parameter is supposed to be bound using "v-bind"
-              // Therefore we only return one special key "v-bind" and the getter will be called afterwards with it
-              ownKeys: () => {
-                return [`v-bind`];
-              },
-              /** called when destructured */
-              getOwnPropertyDescriptor: () => ({
-                configurable: true,
-                enumerable: true,
-                value: param,
-                writable: true,
-              }),
-            },
-          );
-        });
-
-        const returnValue = child(proxied);
-        const slotSourceCode = generateSlotChildrenSourceCode([returnValue], ctx);
-
-        // if slot bindings are used for properties of other components, our {{ paramName }} is incorrect because
-        // it would generate e.g. my-prop="{{ paramName }}", therefore, we replace it here to e.g. :my-prop="paramName"
-        return replaceAll(slotSourceCode, / (\S+)="{{ (\S+) }}"/g, ` :$1="$2"`);
-      }
-
-      case "bigint":
-        return `{{ BigInt(${child.toString()}) }}`;
-
-      // the only missing case here is "symbol"
-      // because rendering a symbol as slot / HTML does not make sense and is not supported by Vue
-      default:
-        return "";
-    }
-  };
-
-  children.forEach((child) => {
-    const sourceCode = generateSingleChildSourceCode(child);
-    if (sourceCode !== "") slotChildrenSourceCodes.push(sourceCode);
-  });
-
-  return slotChildrenSourceCodes.join("\n");
-};
-
-/**
- * Generates source code for the given VNode and all its children (e.g. created using `h(MyComponent)` or `h("div")`).
- */
-const generateVNodeSourceCode = (vnode: VNode, ctx: SourceCodeGeneratorContext): string => {
-  const componentName = getVNodeName(vnode);
-  let childrenCode = "";
-
-  if (typeof vnode.children === "string") {
-    childrenCode = vnode.children;
-  } else if (Array.isArray(vnode.children)) {
-    childrenCode = generateSlotChildrenSourceCode(vnode.children, ctx);
-  } else if (vnode.children) {
-    // children are an object, just like if regular Story args where used
-    // so we can generate the source code with the regular "generateSlotSourceCode()".
-    childrenCode = generateSlotSourceCode(
-      vnode.children,
-      // $stable is a default property in vnode.children so we need to filter it out
-      // to not generate source code for it
-      Object.keys(vnode.children).filter((i) => i !== "$stable"),
-      ctx,
-    );
-  }
-
-  const props = vnode.props ? generatePropsSourceCode(vnode.props, [], [], ctx) : "";
-
-  // prefer self closing tag if no children exist
-  if (childrenCode) {
-    return `<${componentName}${props ? ` ${props}` : ""}>${childrenCode}</${componentName}>`;
-  }
-  return `<${componentName}${props ? ` ${props}` : ""} />`;
-};
-
-/**
- * Gets the name for the given VNode.
- * Will return "component" if name could not be extracted.
- *
- * @example "div" for `h("div")` or "MyComponent" for `h(MyComponent)`
- */
-const getVNodeName = (vnode: VNode) => {
-  // this is e.g. the case when rendering native HTML elements like, h("div")
-  if (typeof vnode.type === "string") return vnode.type;
-
-  if (typeof vnode.type === "object") {
-    // this is the case when using custom Vue components like h(MyComponent)
-    if ("name" in vnode.type && vnode.type.name) {
-      // prefer custom component name set by the developer
-      return vnode.type.name;
-    } else if ("__name" in vnode.type && vnode.type.__name) {
-      // otherwise use name inferred by Vue from the file name
-      return vnode.type.__name;
-    }
-  }
-
-  return "component";
-};
-
-/**
- * Gets a list of parameters for the given function since func.arguments can not be used since
- * it throws a TypeError.
- *
- * If the arguments are destructured (e.g. "func({ foo, bar })"), the returned array will also
- * include "{" and "}".
- *
- * @see Based on https://stackoverflow.com/a/9924463
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-export const getFunctionParamNames = (func: Function): string[] => {
-  const STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm;
-  const ARGUMENT_NAMES = /([^\s,]+)/g;
-
-  const fnStr = func.toString().replace(STRIP_COMMENTS, "");
-  const result = fnStr.slice(fnStr.indexOf("(") + 1, fnStr.indexOf(")")).match(ARGUMENT_NAMES);
-  if (!result) return [];
-
-  // when running "storybook build", the function will be minified, so result for e.g.
-  // `({ foo, bar }) => { // function body }` will be `["{foo:e", "bar:a}"]`
-  // therefore we need to remove the :e and :a mappings and extract the "{" and "}"" from the destructured object
-  // so the final result becomes `["{", "foo", "bar", "}"]`
-  return result.flatMap((param) => {
-    if (["{", "}"].includes(param)) return param;
-    const nonMinifiedName = param.split(":")[0].trim();
-    if (nonMinifiedName.startsWith("{")) {
-      return ["{", nonMinifiedName.substring(1)];
-    }
-    if (param.endsWith("}") && !nonMinifiedName.endsWith("}")) {
-      return [nonMinifiedName, "}"];
-    }
-    return nonMinifiedName;
-  });
-};
-
-/**
- * Converts the given slot bindings/parameters to a string.
- *
- * @example
- * If no params: '#slotName'
- * If params: '#slotName="{ foo, bar }"'
- */
-const slotBindingsToString = (
-  slotName: string,
-  params: string[],
-): `#${string}` | `#${string}="${string}"` => {
-  if (!params.length) return `#${slotName}`;
-  if (params.length === 1) return `#${slotName}="${params[0]}"`;
-
-  // parameters might be destructured so remove duplicated brackets here
-  return `#${slotName}="{ ${params.filter((i) => !["{", "}"].includes(i)).join(", ")} }"`;
-};
-
-/**
- * Formats the given object as string.
- * Will format in single line if it only contains non-object values.
- * Otherwise will format multiline.
- */
-export const formatObject = (obj: object): string => {
-  const isPrimitive = Object.values(obj).every(
-    (value) => value == null || typeof value !== "object",
-  );
-
-  // if object/array only contains non-object values, we format all values in one line
-  if (isPrimitive) return JSON.stringify(obj);
-
-  // otherwise, we use a "pretty" formatting with newlines and spaces
-  return JSON.stringify(obj, null, 2);
-};