Merge pull request #22692 from storybookjs/kasper/main-patch-back-rol…

…lback Vue3: Rollback v7 breaking change and keep reactive v6-compatible API
storybookjs · May 26, 2023 · f56ed0d · f56ed0d
2 parents 2381a05 + 8df92ef
commit f56ed0d
Show file tree

Hide file tree

Showing 13 changed files with 27 additions and 18 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);
 
@@ -64,7 +64,7 @@ export function decorateStory(
         return story;
       }
 
-      return prepare(decoratedStory, h(story, context.args)) as VueRenderer['storyResult'];
+      return prepare(decoratedStory, h(story)) as VueRenderer['storyResult'];
     },
     (context) => prepare(storyFn(context)) as LegacyStoryFn<VueRenderer>
   );

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(

diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts
@@ -12,7 +12,7 @@ export const render: ArgsStoryFn<VueRenderer> = (props, context) => {
     );
   }
 
-  return h(Component, props, getSlots(props, context));
+  return () => h(Component, props, getSlots(props, context));
 };
 
 let setupFunction = (_app: any) => {};
@@ -54,7 +54,7 @@ export function renderToCanvas(
       const renderedElement: any = elementMap.get(canvasElement);
       const current = renderedElement && renderedElement.template ? renderedElement : element;
       map.set(canvasElement, { vueApp: storybookApp, reactiveArgs });
-      return h(current, reactiveArgs);
+      return h(current);
     },
   });