@sit-onyx/storybook-utils 1.0.0-beta.22 → 1.0.0-beta.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.23",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -27,7 +27,7 @@
     "storybook": ">= 8.2.0",
     "storybook-dark-mode": ">= 4",
     "@sit-onyx/icons": "^1.0.0-beta.0",
-    "sit-onyx": "^1.0.0-beta.21"
+    "sit-onyx": "^1.0.0-beta.22"
   },
   "dependencies": {
     "deepmerge-ts": "^7.1.0"

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

@@ -156,16 +156,20 @@ test("should generate source code for slots with bindings", () => {
   type TestBindings = {
     foo: string;
     bar?: number;
+    boo: {
+      mimeType: string;
+    };
   };
 
   const slots = {
-    a: ({ foo, bar }: TestBindings) => `Slot with bindings ${foo} and ${bar}`,
-    b: ({ foo }: TestBindings) => h("a", { href: foo, target: foo }, `Test link: ${foo}`),
+    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 }">Slot with bindings {{ foo }} and {{ bar }}</template>
+  const expectedCode = `<template #a="{ foo, bar, boo }">Slot with bindings {{ foo }}, {{ bar }} and {{ boo.mimeType }}</template>
 
-<template #b="{ foo }"><a :href="foo" :target="foo">Test link: {{ foo }}</a></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: {},

package/src/source-code-generator.ts

@@ -8,6 +8,20 @@ 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.
  */
@@ -184,6 +198,10 @@ export const generatePropsSourceCode = (
     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
@@ -225,7 +243,7 @@ export const generatePropsSourceCode = (
       case "object": {
         properties.push({
           name: propName,
-          value: formatObject(value),
+          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,
@@ -373,25 +391,60 @@ const generateSlotChildrenSourceCode = (
           (param) => !["{", "}"].includes(param),
         );
 
-        const parameters = paramNames.reduce<Record<string, string>>((obj, param) => {
-          obj[param] = `{{ ${param} }}`;
-          return obj;
-        }, {});
-
-        const returnValue = child(parameters);
-        let 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"
+        // 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) => {
-          slotSourceCode = replaceAll(
-            slotSourceCode,
-            new RegExp(` (\\S+)="{{ ${param} }}"`, "g"),
-            ` :$1="${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,
+              }),
+            },
           );
         });
 
-        return slotSourceCode;
+        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":