Revert "Vue: Make globals reactive in decorators"

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

@@ -1,9 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
-import type { Args, Globals } from 'storybook/internal/types';
-
 import { expectTypeOf } from 'expect-type';
-import { computed, reactive } from 'vue';
+import { reactive } from 'vue';
 
 import { updateArgs } from './render';
 
@@ -25,7 +23,7 @@ describe('Render Story', () => {
     expectTypeOf(reactiveArgs).toEqualTypeOf<{ objectArg: { argFoo: string; argBar: string } }>();
 
     const newArgs = { argFoo: 'foo2', argBar: 'bar2' };
-    updateArgs<Args>(reactiveArgs, newArgs);
+    updateArgs(reactiveArgs, newArgs);
     expectTypeOf(reactiveArgs).toEqualTypeOf<{ objectArg: { argFoo: string; argBar: string } }>();
     expect(reactiveArgs).toEqual({
       argFoo: 'foo2',
@@ -39,7 +37,7 @@ describe('Render Story', () => {
     expectTypeOf(reactiveArgs).toEqualTypeOf<{ objectArg: { argFoo: string } }>();
 
     const newArgs = { argFoo: 'foo2', argBar: 'bar2' };
-    updateArgs<Args>(reactiveArgs, newArgs);
+    updateArgs(reactiveArgs, newArgs);
     expect(reactiveArgs).toEqual({ argFoo: 'foo2', argBar: 'bar2' });
   });
 
@@ -55,7 +53,7 @@ describe('Render Story', () => {
     }>();
 
     const newArgs = { argFoo: 'foo2', argBar: 'bar2' };
-    updateArgs<Args>(reactiveArgs, newArgs);
+    updateArgs(reactiveArgs, newArgs);
 
     expect(reactiveArgs).toEqual({
       argFoo: 'foo2',
@@ -90,23 +88,4 @@ describe('Render Story', () => {
 
     expect(reactiveArgs).toEqual({ objectArg: { argFoo: 'bar' } });
   });
-
-  it('update reactive Globals', async () => {
-    const reactiveGlobals = reactive<Globals>({ theme: 'light', locale: 'en' });
-
-    let observedTheme: string | undefined;
-    const watcher = computed(() => {
-      observedTheme = reactiveGlobals.theme as string;
-      return reactiveGlobals.theme;
-    });
-
-    expect(watcher.value).toBe('light');
-    expect(observedTheme).toBe('light');
-
-    updateArgs<Globals>(reactiveGlobals, { theme: 'dark', locale: 'en' });
-
-    expect(watcher.value).toBe('dark');
-    expect(observedTheme).toBe('dark');
-    expect(reactiveGlobals).toEqual({ theme: 'dark', locale: 'en' });
-  });
 });

code/renderers/vue3/src/render.ts

@@ -1,11 +1,5 @@
 /* eslint-disable local-rules/no-uncategorized-errors */
-import type { Globals } from 'storybook/internal/types';
-import {
-  type Args,
-  type ArgsStoryFn,
-  type RenderContext,
-  type StoryContext,
-} from 'storybook/internal/types';
+import type { Args, ArgsStoryFn, RenderContext, StoryContext } from 'storybook/internal/types';
 
 import type { PreviewWeb } from 'storybook/preview-api';
 import type { App } from 'vue';
@@ -45,7 +39,6 @@ const map = new Map<
   {
     vueApp: ReturnType<typeof createApp>;
     reactiveArgs: Args;
-    reactiveGlobals: Globals;
   }
 >();
 
@@ -63,8 +56,7 @@ export async function renderToCanvas(
     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<Args>(existingApp.reactiveArgs, args);
-    updateArgs<Globals>(existingApp.reactiveGlobals, storyContext.globals);
+    updateArgs(existingApp.reactiveArgs, args);
     return () => {
       teardown(existingApp.vueApp, canvasElement);
     };
@@ -74,19 +66,20 @@ export async function renderToCanvas(
     teardown(existingApp.vueApp, canvasElement);
   }
 
+  // create vue app for the story
+
   // create vue app for the story
   const vueApp = createApp({
     setup() {
       storyContext.args = reactive(storyContext.args);
-      storyContext.globals = reactive(storyContext.globals);
       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),
-        reactiveGlobals: storyContext.globals,
       };
       map.set(canvasElement, appState);
+
       return () => {
         // not passing args here as props
         // treat the rootElement as a component without props
@@ -148,11 +141,7 @@ function getArgs(element: StoryFnVueReturnType, storyContext: StoryContext<VueRe
  * @param nextArgs
  * @returns
  */
-export function updateArgs<
-  T extends {
-    [name: string]: unknown;
-  },
->(reactiveArgs: T, nextArgs: T) {
+export function updateArgs(reactiveArgs: Args, nextArgs: Args) {
   if (Object.keys(nextArgs).length === 0) {
     return;
   }

code/renderers/vue3/template/stories_vue3-vite-default-ts/decorators.stories.ts

@@ -3,9 +3,7 @@ import type { DecoratorFunction } from 'storybook/internal/types';
 import { global as globalThis } from '@storybook/global';
 import type { Meta, StoryObj, VueRenderer } from '@storybook/vue3';
 
-import { useArgs } from 'storybook/preview-api';
 import { h } from 'vue';
-import { computed } from 'vue';
 
 const { Button, Pre } = (globalThis as any).__TEMPLATE_COMPONENTS__;
 
@@ -49,62 +47,6 @@ const DynamicWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, { args }
   computed: { level: () => `${args.level}px` },
 });
 
-const getCaptionForLocale = (locale: string) => {
-  switch (locale) {
-    case 'es':
-      return 'Hola!';
-    case 'kr':
-      return '안녕하세요!';
-    case 'zh':
-      return '你好!';
-    case 'en':
-      return 'Hello!';
-    default:
-      return undefined;
-  }
-};
-
-const updateArgsDecorator: DecoratorFunction<VueRenderer> = (story, { args }) => {
-  const [, updateArgs] = useArgs();
-  return {
-    components: { story },
-    setup() {
-      return {
-        args,
-        updateArgs,
-      };
-    },
-    template: `
-      <div>
-        <button @click="() => updateArgs({ label: Number(args.label) + 1 })">Add 1</button>
-        <hr />
-        <story />
-      </div>
-    `,
-  };
-};
-
-const localeDecorator: DecoratorFunction<VueRenderer> = (story, { globals }) => {
-  return {
-    components: { story },
-    setup() {
-      const ctxGreeting = computed(() => getCaptionForLocale(globals?.locale) || 'Hello!');
-
-      return {
-        ctxGreeting,
-        globals,
-      };
-    },
-    template: `
-      <div>
-        <p>Greeting: {{ctxGreeting}}</p>
-        <p>Locale: {{globals?.locale}}</p>
-        <story />
-      </div>
-    `,
-  };
-};
-
 export const ComponentTemplate: Story = {
   args: { label: 'With component' },
   decorators: [ComponentTemplateWrapper],
@@ -142,13 +84,3 @@ export const MultipleWrappers = {
     DynamicWrapperWrapper,
   ],
 };
-
-export const UpdateArgs = {
-  args: { label: '0' },
-  decorators: [updateArgsDecorator],
-};
-
-export const ReactiveGlobalDecorator = {
-  args: { label: 'With reactive global decorator' },
-  decorators: [localeDecorator],
-};