Vue3: Try reactivity without invoking args as props

storybookjs · Apr 24, 2023 · 35cf9bd · 35cf9bd
1 parent b307e75
commit 35cf9bd
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 71 deletions.
diff --git a/code/renderers/vue3/src/decorateStory.ts b/code/renderers/vue3/src/decorateStory.ts
@@ -1,9 +1,7 @@
-import type { ConcreteComponent, Component, ComponentOptions } from 'vue';
+import type { Component, ComponentOptions, ConcreteComponent } from 'vue';
 import { h } from 'vue';
-import type { DecoratorFunction, StoryContext, LegacyStoryFn, Args } from '@storybook/types';
+import type { DecoratorFunction, LegacyStoryFn, StoryContext } from '@storybook/types';
 import { sanitizeStoryContextUpdate } from '@storybook/preview-api';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { looseEqual } from '@vue/shared';
 import type { VueRenderer } from './types';
 
 /*
@@ -45,7 +43,6 @@ export function decorateStory(
   storyFn: LegacyStoryFn<VueRenderer>,
   decorators: DecoratorFunction<VueRenderer>[]
 ): LegacyStoryFn<VueRenderer> {
-  let updatedArgs: Args;
   return decorators.reduce(
     (decorated: LegacyStoryFn<VueRenderer>, decorator) => (context: StoryContext<VueRenderer>) => {
       let story: VueRenderer['storyResult'] | undefined;
@@ -55,22 +52,20 @@ export function decorateStory(
           ...context,
           ...sanitizeStoryContextUpdate(update),
         });
-
-        if (update && update.args && !looseEqual(update.args, context.args))
-          updatedArgs ??= update.args;
         return story;
       }, context);
 
-      context.args = updatedArgs ?? context.args;
       if (!story) story = decorated(context);
 
       if (decoratedStory === story) {
         return story;
       }
 
-      const innerStory = () => h(story!, context.args);
+      const innerStory = () => h(story!);
       return prepare(decoratedStory, innerStory) as VueRenderer['storyResult'];
     },
-    (context) => prepare(storyFn(context)) as LegacyStoryFn<VueRenderer>
+    (context) => {
+      return prepare(storyFn(context)) as LegacyStoryFn<VueRenderer>;
+    }
   );
 }
diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts
@@ -22,7 +22,7 @@ export const render: ArgsStoryFn<VueRenderer> = (props, context) => {
     );
   }
 
-  return h(Component, props, createOrUpdateSlots(context));
+  return () => h(Component, props, createOrUpdateSlots(context));
 };
 
 let setupFunction = (_app: any) => {};
@@ -73,7 +73,9 @@ export function renderToCanvas(
       map.set(canvasElement, appState);
 
       return () => {
-        return h(rootElement, appState.reactiveArgs);
+        // not passing args here as props
+        // treat the rootElement as a component without props
+        return h(rootElement);
       };
     },
   });

diff --git a/code/renderers/vue3/template/stories/CustomRenderFunctionalComponent.stories.ts b/code/renderers/vue3/template/stories/CustomRenderFunctionalComponent.stories.ts
@@ -27,8 +27,6 @@ export {
   NoDecorators,
   DecoratorFunctionalComponent,
   DecoratorFunctionalComponentArgsFromContext,
-  DecoratorFunctionalComponentArgsFromProps,
   DecoratorComponentOptions,
   DecoratorComponentOptionsArgsFromData,
-  DecoratorComponentOptionsArgsFromProps,
 } from './ReactiveDecorators.stories';
diff --git a/code/renderers/vue3/template/stories/CustomRenderOptionsArgsFromData.stories.ts b/code/renderers/vue3/template/stories/CustomRenderOptionsArgsFromData.stories.ts
@@ -40,8 +40,6 @@ export {
   NoDecorators,
   DecoratorFunctionalComponent,
   DecoratorFunctionalComponentArgsFromContext,
-  DecoratorFunctionalComponentArgsFromProps,
   DecoratorComponentOptions,
   DecoratorComponentOptionsArgsFromData,
-  DecoratorComponentOptionsArgsFromProps,
 } from './ReactiveDecorators.stories';
diff --git a/code/renderers/vue3/template/stories/CustomRenderOptionsArgsFromProps.stories.ts b/code/renderers/vue3/template/stories/CustomRenderOptionsArgsFromProps.stories.ts
diff --git a/code/renderers/vue3/template/stories/ReactiveDecorators.stories.ts b/code/renderers/vue3/template/stories/ReactiveDecorators.stories.ts
@@ -69,16 +69,6 @@ export const DecoratorFunctionalComponentArgsFromContext: Story = {
   ],
 };
 
-export const DecoratorFunctionalComponentArgsFromProps: Story = {
-  decorators: [
-    (storyFn, context) => {
-      const story = storyFn();
-      return (args) =>
-        h('div', [h('h2', `Decorator using args.label: ${args.label}`), h(story, context.args)]);
-    },
-  ],
-};
-
 export const DecoratorComponentOptions: Story = {
   decorators: [
     (storyFn, context) => {
@@ -99,14 +89,3 @@ export const DecoratorComponentOptionsArgsFromData: Story = {
     },
   ],
 };
-
-export const DecoratorComponentOptionsArgsFromProps: Story = {
-  decorators: [
-    (storyFn, context) => {
-      return {
-        props: ['label'],
-        template: '<div><h2>Decorator using label: {{label}}</h2><story /></div>',
-      };
-    },
-  ],
-};