Vue3:fix reactive decorators

code/lib/store/template/stories/args.stories.ts

@@ -70,13 +70,13 @@ export const Events = {
   parameters: { argNames: ['test'] },
   play: async ({ canvasElement, id }: PlayFunctionContext<any>) => {
     const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+    await channel.emit(RESET_STORY_ARGS, { storyId: id });
+    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));
+
     await within(canvasElement).findByText(/initial/);
 
     await channel.emit(UPDATE_STORY_ARGS, { storyId: id, updatedArgs: { test: 'updated' } });
-    await within(canvasElement).findByText(/updated/);
-
-    await channel.emit(RESET_STORY_ARGS, { storyId: id });
     await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));
-    await within(canvasElement).findByText(/initial/);
+    await within(canvasElement).findByText(/updated/);
   },
 };

code/lib/store/template/stories/globals.stories.ts

@@ -29,6 +29,7 @@ export const Events = {
   ],
   play: async ({ canvasElement }: PlayFunctionContext<any>) => {
     const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+    await channel.emit('updateGlobals', { globals: { foo: 'fooValue' } });
     await within(canvasElement).findByText('fooValue');
 
     await channel.emit('updateGlobals', { globals: { foo: 'updated' } });

code/renderers/vue3/src/decorateStory.ts

@@ -1,5 +1,5 @@
 import type { ConcreteComponent, Component, ComponentOptions } from 'vue';
-import { h } from 'vue';
+import { isVNode, h } from 'vue';
 import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/types';
 import { sanitizeStoryContextUpdate } from '@storybook/preview-api';
 
@@ -11,6 +11,7 @@ import type { VueRenderer } from './types';
   The concept is taken from Vue 3's `defineComponent` but changed from creating a `setup`
   method on the ComponentOptions so end-users don't need to specify a "thunk" as a decorator.
  */
+
 function normalizeFunctionalComponent(options: ConcreteComponent): ComponentOptions {
   return typeof options === 'function' ? { render: options, name: options.name } : options;
 }
@@ -20,12 +21,12 @@ function prepare(
   innerStory?: ConcreteComponent
 ): Component | null {
   const story = rawStory as ComponentOptions;
-
-  if (story == null) {
+  if (story === null) {
     return null;
   }
 
   if (innerStory) {
+    if (typeof story === 'function') return story; // we don't need to wrap a functional component nor to convert it to a component options
     return {
       // Normalize so we can always spread an object
       ...normalizeFunctionalComponent(story),
@@ -46,25 +47,32 @@ export function decorateStory(
 ): LegacyStoryFn<VueRenderer> {
   return decorators.reduce(
     (decorated: LegacyStoryFn<VueRenderer>, decorator) => (context: StoryContext<VueRenderer>) => {
-      let story: VueRenderer['storyResult'] | undefined;
-
+      let story: VueRenderer['storyResult'] = { isNull: true };
       const decoratedStory: VueRenderer['storyResult'] = decorator((update) => {
         story = decorated({
           ...context,
           ...sanitizeStoryContextUpdate(update),
         });
+        const argsChanged =
+          update && update.args && Object.keys(update).length === 1 && !isVNode(story);
+        // TODO: this is a hack to avoid re-rendering the story when the args are not changed
+        // we should find a better way to do this
+        // i should get only update = { args: { ...context.args, text:... } } from the decorator and not the whole context
+        if (argsChanged) {
+          story = h(story, update.args);
+        }
         return story;
       }, context);
 
-      if (!story) {
-        story = decorated(context);
-      }
+      if (story.isNull) story = decorated(context);
 
       if (decoratedStory === story) {
         return story;
       }
 
-      return prepare(decoratedStory, h(story, context.args)) as VueRenderer['storyResult'];
+      const props = story.props ?? context.args;
+      const innerStory = () => h(story, props);
+      return prepare(decoratedStory, innerStory) as VueRenderer['storyResult'];
     },
     (context) => prepare(storyFn(context)) as LegacyStoryFn<VueRenderer>
   );

code/renderers/vue3/src/render.test.ts

@@ -0,0 +1,89 @@
+import { expectTypeOf } from 'expect-type';
+
+import { reactive } from 'vue';
+import { updateArgs } from './render';
+
+describe('Render Story', () => {
+  test('update reactive Args updateArgs()', () => {
+    const reactiveArgs = reactive({ argFoo: 'foo', argBar: 'bar' }); // get reference to reactiveArgs or create a new one;
+    expectTypeOf(reactiveArgs).toMatchTypeOf<Record<string, any>>();
+    expectTypeOf(reactiveArgs).toEqualTypeOf<{ argFoo: string; argBar: string }>();
+
+    const newArgs = { argFoo: 'foo2', argBar: 'bar2' };
+    updateArgs(reactiveArgs, newArgs);
+    expectTypeOf(reactiveArgs).toEqualTypeOf<{ argFoo: string; argBar: string }>();
+    expect(reactiveArgs).toEqual({ argFoo: 'foo2', argBar: 'bar2' });
+  });
+
+  test('update reactive Args component inherit objectArg updateArgs()', () => {
+    const reactiveArgs = reactive({ objectArg: { argFoo: 'foo', argBar: 'bar' } }); // get reference to reactiveArgs or create a new one;
+    expectTypeOf(reactiveArgs).toMatchTypeOf<Record<string, any>>();
+    expectTypeOf(reactiveArgs).toEqualTypeOf<{ objectArg: { argFoo: string; argBar: string } }>();
+
+    const newArgs = { argFoo: 'foo2', argBar: 'bar2' };
+    updateArgs(reactiveArgs, newArgs);
+    expectTypeOf(reactiveArgs).toEqualTypeOf<{ objectArg: { argFoo: string; argBar: string } }>();
+    expect(reactiveArgs).toEqual({
+      argFoo: 'foo2',
+      argBar: 'bar2',
+    });
+  });
+
+  test('update reactive Args component inherit objectArg', () => {
+    const reactiveArgs = reactive({ objectArg: { argFoo: 'foo' } }); // get reference to reactiveArgs or create a new one;
+    expectTypeOf(reactiveArgs).toMatchTypeOf<Record<string, any>>();
+    expectTypeOf(reactiveArgs).toEqualTypeOf<{ objectArg: { argFoo: string } }>();
+
+    const newArgs = { argFoo: 'foo2', argBar: 'bar2' };
+    updateArgs(reactiveArgs, newArgs);
+    expect(reactiveArgs).toEqual({ argFoo: 'foo2', argBar: 'bar2' });
+  });
+
+  test('update reactive Args component 2 object args  ->  updateArgs()', () => {
+    const reactiveArgs = reactive({
+      objectArg: { argFoo: 'foo' },
+      objectArg2: { argBar: 'bar' },
+    }); // get reference to reactiveArgs or create a new one;
+    expectTypeOf(reactiveArgs).toMatchTypeOf<Record<string, any>>();
+    expectTypeOf(reactiveArgs).toEqualTypeOf<{
+      objectArg: { argFoo: string };
+      objectArg2: { argBar: string };
+    }>();
+
+    const newArgs = { argFoo: 'foo2', argBar: 'bar2' };
+    updateArgs(reactiveArgs, newArgs);
+
+    expect(reactiveArgs).toEqual({
+      argFoo: 'foo2',
+      argBar: 'bar2',
+    });
+  });
+
+  test('update reactive Args component object with object  ->  updateArgs()', () => {
+    const reactiveArgs = reactive({
+      objectArg: { argFoo: 'foo' },
+    }); // get reference to reactiveArgs or create a new one;
+    expectTypeOf(reactiveArgs).toMatchTypeOf<Record<string, any>>();
+    expectTypeOf(reactiveArgs).toEqualTypeOf<{
+      objectArg: { argFoo: string };
+    }>();
+
+    const newArgs = { objectArg: { argFoo: 'bar' } };
+    updateArgs(reactiveArgs, newArgs);
+
+    expect(reactiveArgs).toEqual({ objectArg: { argFoo: 'bar' } });
+  });
+
+  test('update reactive Args component no arg with all args -> updateArgs()', () => {
+    const reactiveArgs = reactive({ objectArg: { argFoo: 'foo' } }); // get reference to reactiveArgs or create a new one;
+    expectTypeOf(reactiveArgs).toMatchTypeOf<Record<string, any>>();
+    expectTypeOf(reactiveArgs).toEqualTypeOf<{
+      objectArg: { argFoo: string };
+    }>();
+
+    const newArgs = { objectArg: { argFoo: 'bar' } };
+    updateArgs(reactiveArgs, newArgs);
+
+    expect(reactiveArgs).toEqual({ objectArg: { argFoo: 'bar' } });
+  });
+});

code/renderers/vue3/src/render.ts

@@ -1,8 +1,9 @@
 /* eslint-disable no-param-reassign */
-import { createApp, h, reactive } from 'vue';
+import { createApp, h, isReactive, isVNode, reactive } from 'vue';
 import type { RenderContext, ArgsStoryFn } from '@storybook/types';
 import type { Args, StoryContext } from '@storybook/csf';
-import type { StoryFnVueReturnType, VueRenderer } from './types';
+
+import type { VueRenderer, StoryFnVueReturnType } from './types';
 
 export const render: ArgsStoryFn<VueRenderer> = (props, context) => {
   const { id, component: Component } = context;
@@ -12,7 +13,7 @@ export const render: ArgsStoryFn<VueRenderer> = (props, context) => {
     );
   }
 
-  return h(Component, props, getSlots(props, context));
+  return h(Component, props, generateSlots(context));
 };
 
 let setupFunction = (_app: any) => {};
@@ -22,65 +23,84 @@ export const setup = (fn: (app: any) => void) => {
 
 const map = new Map<
   VueRenderer['canvasElement'],
-  { vueApp: ReturnType<typeof createApp>; reactiveArgs: any }
+  {
+    vueApp: ReturnType<typeof createApp>;
+    reactiveArgs: Args;
+  }
 >();
 
-const elementMap = new Map<VueRenderer['canvasElement'], StoryFnVueReturnType>();
-
 export function renderToCanvas(
-  { storyFn, forceRemount, showMain, showException, storyContext }: RenderContext<VueRenderer>,
+  { storyFn, forceRemount, showMain, showException, storyContext, id }: RenderContext<VueRenderer>,
   canvasElement: VueRenderer['canvasElement']
 ) {
-  // fetch the story with the updated context (with reactive args)
-  storyContext.args = reactive(storyContext.args);
-  const element: StoryFnVueReturnType = storyFn();
-  elementMap.set(canvasElement, element);
-
-  const props = (element as any).render?.().props;
-  const reactiveArgs = props ? reactive(props) : storyContext.args;
-
   const existingApp = map.get(canvasElement);
+
+  // if the story is already rendered and we are not forcing a remount, we just update the reactive args
   if (existingApp && !forceRemount) {
-    updateArgs(existingApp.reactiveArgs, reactiveArgs);
+    // normally storyFn should be call once only in setup function,but because the nature of react and how storybook rendering the decorators
+    // we need to call here to run the decorators again
+    // i may wrap each decorator in memoized function to avoid calling it if the args are not changed
+    const element = storyFn(); // call the story function to get the root element with all the decorators
+    const args = getArgs(element, storyContext); // get args in case they are altered by decorators otherwise use the args from the context
+
+    updateArgs(existingApp.reactiveArgs, args);
     return () => {
       teardown(existingApp.vueApp, canvasElement);
     };
   }
-
   if (existingApp && forceRemount) teardown(existingApp.vueApp, canvasElement);
 
-  const storybookApp = createApp({
-    render() {
-      const renderedElement: any = elementMap.get(canvasElement);
-      const current = renderedElement && renderedElement.template ? renderedElement : element;
-      map.set(canvasElement, { vueApp: storybookApp, reactiveArgs });
-      return h(current, reactiveArgs);
+  // create vue app for the story
+  const vueApp = createApp({
+    setup() {
+      storyContext.args = reactive(storyContext.args);
+      const rootElement = storyFn(); // call the story function to get the root element with all the decorators
+      const args = getArgs(rootElement, storyContext); // get args in case they are altered by decorators otherwise use the args from the context
+      const appState = {
+        vueApp,
+        reactiveArgs: reactive(args),
+      };
+      map.set(canvasElement, appState);
+
+      return () => {
+        return h(rootElement, appState.reactiveArgs);
+      };
     },
   });
-
-  storybookApp.config.errorHandler = (e: unknown) => showException(e as Error);
-  setupFunction(storybookApp);
-  storybookApp.mount(canvasElement);
+  vueApp.config.errorHandler = (e: unknown) => showException(e as Error);
+  setupFunction(vueApp);
+  vueApp.mount(canvasElement);
 
   showMain();
   return () => {
-    teardown(storybookApp, canvasElement);
+    teardown(vueApp, canvasElement);
   };
 }
 
 /**
- * get the slots as functions to be rendered
- * @param props
+ * generate slots for default story without render function template
  * @param context
  */
 
-function getSlots(props: Args, context: StoryContext<VueRenderer, Args>) {
+function generateSlots(context: StoryContext<VueRenderer, Args>) {
   const { argTypes } = context;
-  const slots = Object.entries(props)
+  const slots = Object.entries(argTypes)
     .filter(([key, value]) => argTypes[key]?.table?.category === 'slots')
-    .map(([key, value]) => [key, typeof value === 'function' ? value : () => value]);
+    .map(([key, value]) => {
+      const slotValue = context.args[key];
+      return [key, typeof slotValue === 'function' ? slotValue : () => slotValue];
+    });
 
-  return Object.fromEntries(slots);
+  return reactive(Object.fromEntries(slots));
+}
+/**
+ * get the args from the root element props if it is a vnode otherwise from the context
+ * @param element is the root element of the story
+ * @param storyContext is the story context
+ */
+
+function getArgs(element: StoryFnVueReturnType, storyContext: StoryContext<VueRenderer, Args>) {
+  return element.props && isVNode(element) ? element.props : storyContext.args;
 }
 
 /**
@@ -89,14 +109,27 @@ function getSlots(props: Args, context: StoryContext<VueRenderer, Args>) {
  * @param nextArgs
  * @returns
  */
-function updateArgs(reactiveArgs: Args, nextArgs: Args) {
-  if (!nextArgs) return;
-  Object.keys(reactiveArgs).forEach((key) => {
-    delete reactiveArgs[key];
+export function updateArgs(reactiveArgs: Args, nextArgs: Args) {
+  if (Object.keys(nextArgs).length === 0) return;
+  const currentArgs = isReactive(reactiveArgs) ? reactiveArgs : reactive(reactiveArgs);
+  // delete all args in currentArgs that are not in nextArgs
+  Object.keys(currentArgs).forEach((key) => {
+    if (!(key in nextArgs)) {
+      delete currentArgs[key];
+    }
   });
-  Object.assign(reactiveArgs, nextArgs);
+  // update currentArgs with nextArgs
+  Object.assign(currentArgs, nextArgs);
 }
 
+/**
+ * unmount the vue app
+ * @param storybookApp
+ * @param canvasElement
+ * @returns void
+ * @private
+ * */
+
 function teardown(
   storybookApp: ReturnType<typeof createApp>,
   canvasElement: VueRenderer['canvasElement']

code/renderers/vue3/template/stories/BaseLayout.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps({
+  label: String,
+});
+</script>
+<template>
+  <div>
+    <header data-testid="header-slot">
+      <slot name="header" title="Header title from the slot"></slot>
+    </header>
+    <main data-testid="default-slot">
+      <slot></slot>
+    </main>
+    <footer data-testid="footer-slot">
+      <slot name="footer"></slot>
+    </footer>
+  </div>
+</template>

code/renderers/vue3/template/stories/MySlotComponent.vue

@@ -0,0 +1,12 @@
+<!-- <MyComponent> template -->
+<script setup lang="ts">
+const props = defineProps({
+  label: String,
+  year: Number,
+});
+</script>
+<template>
+  <div data-testid="scoped-slot">
+    <slot :text="`Hello ${props.label} from the slot`" :year="props.year"></slot>
+  </div>
+</template>