From 7c85a39e0de2365af376612bc2710898858964d0 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Fri, 2 Aug 2024 11:30:25 +0200
Subject: [PATCH 1/3] extend vue3 sourceDecorator to support v-bind and nested
 keys

---
 .../vue3/src/docs/sourceDecorator.test.ts     | 12 ++-
 .../vue3/src/docs/sourceDecorator.ts          | 84 +++++++++++++++----
 2 files changed, 77 insertions(+), 19 deletions(-)

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
index 4f92bcd9cb27..764ba403cf3a 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -150,16 +150,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: {},
diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index 764aacf91fe7..375db1b3a4c4 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -23,6 +23,20 @@ export type SourceCodeGeneratorContext = {
   imports: Record<string, Set<string>>;
 };
 
+/**
+ * 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);
+
 /**
  * Decorator to generate Vue source code for stories.
  */
@@ -208,6 +222,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
@@ -249,7 +267,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,
@@ -397,24 +415,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> = {};
+        // TODO: it should be possible to extend the proxy logic here and maybe get rid of the `generatePropsSourceCode` and `getFunctionParamNames`
+        const proxied: Record<string, TrackingProxy> = {};
         paramNames.forEach((param) => {
-          slotSourceCode = slotSourceCode.replaceAll(
-            new RegExp(` (\\S+)="{{ ${param} }}"`, 'g'),
-            ` :$1="${param}"`
+          parameters[param] = `{{ ${param} }}`;
+          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 slotSourceCode.replaceAll(/ (\S+)="{{ (\S+) }}"/g, ` :$1="$2"`);
       }
 
       case 'bigint':

From ea9e1956b1013a84b7fb893e4f36f6eaaf618c94 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Fri, 2 Aug 2024 14:50:52 +0200
Subject: [PATCH 2/3] extended TemplateSlots example

---
 .../component-meta/TemplateSlots.stories.ts              | 9 ++++++++-
 .../component-meta/template-slots/component.vue          | 5 ++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/TemplateSlots.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/TemplateSlots.stories.ts
index 7ae73f819caf..0acf03cda9c2 100644
--- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/TemplateSlots.stories.ts
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/TemplateSlots.stories.ts
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
 import Component from './template-slots/component.vue';
+import { h } from 'vue';
 
 const meta = {
   component: Component,
@@ -13,6 +14,12 @@ export const Default: Story = {
   args: {
     default: ({ num }) => `Default slot: num=${num}`,
     named: ({ str }) => `Named slot: str=${str}`,
-    vbind: ({ num, str }) => `Named v-bind slot: num=${num}, str=${str}`,
+    vbind: ({ num, str, obj }) => [
+      `Named v-bind slot: num=${num}, str=${str}, obj.title=${obj.title}`,
+      h('br'),
+      h('button', obj, 'button'),
+      h('br'),
+      h('button', { disabled: true, ...obj }, 'merged props'),
+    ],
   },
 };
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/template-slots/component.vue b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/template-slots/component.vue
index b71a49de53d8..ae79d527dd5a 100644
--- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/template-slots/component.vue
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/template-slots/component.vue
@@ -7,5 +7,8 @@
   <br />
   <slot name="named" str="str"></slot>
   <br />
-  <slot name="vbind" v-bind="{ num: 123, str: 'str' }"></slot>
+  <slot
+    name="vbind"
+    v-bind="{ num: 123, str: 'str', obj: { title: 'see me', style: { color: 'blue' } } }"
+  ></slot>
 </template>

From f360c2738b8ea9bf5d10adf02008f28975457530 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Tue, 24 Sep 2024 21:26:31 +0200
Subject: [PATCH 3/3] fix lint issues

---
 code/addons/docs/docs/props-tables.md                  |  2 +-
 code/renderers/vue3/src/docs/sourceDecorator.ts        | 10 ++++------
 .../component-meta/TemplateSlots.stories.ts            |  3 ++-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/code/addons/docs/docs/props-tables.md b/code/addons/docs/docs/props-tables.md
index 7a44a6c653ae..9e6a754b918e 100644
--- a/code/addons/docs/docs/props-tables.md
+++ b/code/addons/docs/docs/props-tables.md
@@ -18,7 +18,7 @@ Storybook Docs automatically generates props tables for components in supported
 
 ## Usage
 
-For framework-specific setup instructions, see the framework's README: [React](../react/README.md), [Vue3 ](../vue3/README.md), [Angular](../angular/README.md), [Web Components](../web-components/README.md), [Ember](../ember/README.md).
+For framework-specific setup instructions, see the framework's README: [React](../react/README.md), [Vue3](../vue3/README.md), [Angular](../angular/README.md), [Web Components](../web-components/README.md), [Ember](../ember/README.md).
 
 ### DocsPage
 
diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index c6d565fc7db1..46ea4fd12bff 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -27,8 +27,8 @@ export type SourceCodeGeneratorContext = {
 };
 
 /**
- * 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.
+ * 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');
 
@@ -40,9 +40,7 @@ type TrackingProxy = {
 const isProxy = (obj: unknown): obj is TrackingProxy =>
   !!(obj && typeof obj === 'object' && TRACKING_SYMBOL in obj);
 
-/**
- * Decorator to generate Vue source code for stories.
- */
+/** Decorator to generate Vue source code for stories. */
 export const sourceDecorator: Decorator = (storyFn, ctx) => {
   const story = storyFn();
 
@@ -490,7 +488,7 @@ const generateSlotChildrenSourceCode = (
               ownKeys: () => {
                 return [`v-bind`];
               },
-              /** called when destructured */
+              /** Called when destructured */
               getOwnPropertyDescriptor: () => ({
                 configurable: true,
                 enumerable: true,
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/TemplateSlots.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/TemplateSlots.stories.ts
index 4a8edaf0b008..ff2237366ee4 100644
--- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/TemplateSlots.stories.ts
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/TemplateSlots.stories.ts
@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
 
-import Component from './template-slots/component.vue';
 import { h } from 'vue';
 
+import Component from './template-slots/component.vue';
+
 const meta = {
   component: Component,
   tags: ['autodocs'],