Merge pull request #22717 from storybookjs/kasper/update-args-reactively

Vue3: Fix reactive args updates in decorators
storybookjs · May 25, 2023 · de856ce · de856ce
1 parent 9cee100
commit de856ce
Show file tree

Hide file tree

Showing 12 changed files with 24 additions and 15 deletions.
diff --git a/code/addons/controls/template/stories/basics.stories.ts b/code/addons/controls/template/stories/basics.stories.ts
@@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: { ...context.args } } }),
   ],
   argTypes: {
     boolean: { control: 'boolean' },

diff --git a/code/addons/controls/template/stories/conditional.stories.ts b/code/addons/controls/template/stories/conditional.stories.ts
@@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: { ...context.args } } }),
   ],
 };
 

diff --git a/code/addons/controls/template/stories/disable.stories.ts b/code/addons/controls/template/stories/disable.stories.ts
@@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: { ...context.args } } }),
   ],
 };
 

diff --git a/code/addons/controls/template/stories/filters.stories.ts b/code/addons/controls/template/stories/filters.stories.ts
@@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: { ...context.args } } }),
   ],
   args: {
     helloWorld: 1,

diff --git a/code/addons/controls/template/stories/issues.stories.ts b/code/addons/controls/template/stories/issues.stories.ts
@@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: { ...context.args } } }),
   ],
 };
 

diff --git a/code/addons/controls/template/stories/matchers.stories.ts b/code/addons/controls/template/stories/matchers.stories.ts
@@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: { ...context.args } } }),
   ],
 };
 

diff --git a/code/addons/controls/template/stories/sorting.stories.ts b/code/addons/controls/template/stories/sorting.stories.ts
@@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: { ...context.args } } }),
   ],
   argTypes: {
     x: { type: { required: true } },

diff --git a/code/lib/store/template/stories/argMapping.stories.ts b/code/lib/store/template/stories/argMapping.stories.ts
@@ -22,7 +22,7 @@ export default {
   decorators: [
     (storyFn: PartialStoryFn, context: StoryContext) => {
       return storyFn({
-        args: { object: context.args },
+        args: { object: { ...context.args } },
       });
     },
   ],

diff --git a/code/lib/store/template/stories/argTypes.stories.ts b/code/lib/store/template/stories/argTypes.stories.ts
@@ -8,7 +8,7 @@ export default {
   // Compose all the argTypes into `object`, so the pre component only needs a single prop
   decorators: [
     (storyFn: PartialStoryFn, context: StoryContext) =>
-      storyFn({ args: { object: context.argTypes } }),
+      storyFn({ args: { object: { ...context.argTypes } } }),
   ],
   argTypes: {
     componentArg: { type: 'string' },

diff --git a/code/lib/store/template/stories/args.stories.ts b/code/lib/store/template/stories/args.stories.ts
@@ -20,7 +20,8 @@ export default {
   decorators: [
     (storyFn: PartialStoryFn, context: StoryContext) => {
       const { argNames } = context.parameters;
-      const object = argNames ? pick(context.args, argNames) : context.args;
+      const args = { ...context.args };
+      const object = argNames ? pick(args, argNames) : args;
       return storyFn({ args: { object } });
     },
   ],

diff --git a/code/renderers/vue3/src/decorateStory.ts b/code/renderers/vue3/src/decorateStory.ts
@@ -49,10 +49,10 @@ export function decorateStory(
       let story: VueRenderer['storyResult'] | undefined;
 
       const decoratedStory: VueRenderer['storyResult'] = decorator((update) => {
-        story = decorated({
-          ...context,
-          ...sanitizeStoryContextUpdate(update),
-        });
+        const sanitizedUpdate = sanitizeStoryContextUpdate(update);
+        // update the args in a reactive way
+        if (update) sanitizedUpdate.args = Object.assign(context.args, sanitizedUpdate.args);
+        story = decorated({ ...context, ...sanitizedUpdate });
         return story;
       }, context);
 

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -9,6 +9,7 @@ import parserHTML from 'prettier/parser-html';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { isArray } from '@vue/shared';
+import { toRaw } from 'vue';
 
 type ArgEntries = [string, any][];
 type Attribute = {
@@ -60,7 +61,7 @@ function getComponentNameAndChildren(component: any): {
  */
 function generateAttributesSource(_args: Args, argTypes: ArgTypes, byRef?: boolean): string {
   // create a copy of the args object to avoid modifying the original
-  const args = { ..._args };
+  const args = { ...toRaw(_args) };
   // filter out keys that are children or slots, and convert event keys to the proper format
   const argsKeys = Object.keys(args)
     .filter(