From 8a502243738a9ad4c7a73cf2a58e9de2aed5efd9 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 24 Apr 2023 12:48:00 +0200 Subject: [PATCH 1/7] Vue3: Try reactivity without invoking args as props --- code/renderers/vue3/src/decorateStory.ts | 17 ++++------ code/renderers/vue3/src/render.ts | 6 ++-- ...CustomRenderFunctionalComponent.stories.ts | 2 -- ...CustomRenderOptionsArgsFromData.stories.ts | 2 -- ...ustomRenderOptionsArgsFromProps.stories.ts | 33 ------------------- .../ReactiveDecorators.stories.ts | 21 ------------ 6 files changed, 10 insertions(+), 71 deletions(-) diff --git a/code/renderers/vue3/src/decorateStory.ts b/code/renderers/vue3/src/decorateStory.ts index 3955eba07644..c831c3e1b450 100644 --- 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, decorators: DecoratorFunction[] ): LegacyStoryFn { - let updatedArgs: Args; return decorators.reduce( (decorated: LegacyStoryFn, decorator) => (context: StoryContext) => { 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 + (context) => { + return prepare(storyFn(context)) as LegacyStoryFn; + } ); } diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index 9cb7973910ac..83e06165ede3 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -22,7 +22,7 @@ export const render: ArgsStoryFn = (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_vue3-vite-default-ts/CustomRenderFunctionalComponent.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/CustomRenderFunctionalComponent.stories.ts index 2e723ab01b98..bf70bc34f074 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/CustomRenderFunctionalComponent.stories.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/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_vue3-vite-default-ts/CustomRenderOptionsArgsFromData.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/CustomRenderOptionsArgsFromData.stories.ts index 75d25b464bff..9c904283d3bd 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/CustomRenderOptionsArgsFromData.stories.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/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_vue3-vite-default-ts/CustomRenderOptionsArgsFromProps.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/CustomRenderOptionsArgsFromProps.stories.ts index 68c0ee37997b..e69de29bb2d1 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/CustomRenderOptionsArgsFromProps.stories.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/CustomRenderOptionsArgsFromProps.stories.ts @@ -1,33 +0,0 @@ -import type { Meta } from '@storybook/vue3'; -import { defineComponent } from 'vue'; -import Reactivity from './Reactivity.vue'; -import * as ReactiveDecorators from './ReactiveDecorators.stories'; - -const meta = { - ...ReactiveDecorators.default, - component: Reactivity, - render: (args, { argTypes }) => { - return defineComponent({ - props: Object.keys(argTypes), - components: { Reactivity }, - template: `
Custom render uses options api and binds args to props: - - {{ $props.default }} - - -
`, - }); - }, -} satisfies Meta; - -export default meta; - -export { - NoDecorators, - DecoratorFunctionalComponent, - DecoratorFunctionalComponentArgsFromContext, - DecoratorFunctionalComponentArgsFromProps, - DecoratorComponentOptions, - DecoratorComponentOptionsArgsFromData, - DecoratorComponentOptionsArgsFromProps, -} from './ReactiveDecorators.stories'; diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveDecorators.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveDecorators.stories.ts index 01c1727c4e8b..6f169b665f9f 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveDecorators.stories.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/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: '

Decorator using label: {{label}}

', - }; - }, - ], -}; From b212c003879c270d6aee401f44daa80c8597e480 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 24 Apr 2023 14:19:53 +0200 Subject: [PATCH 2/7] Fix chromatic errors --- code/renderers/vue3/src/render.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index 83e06165ede3..28648ae5abb3 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -153,11 +153,12 @@ function teardown( function createOrUpdateSlots(context: StoryContext) { const { id: storyID, component } = context; const slots = generateSlots(context); - if (slotsMap.has(storyID)) { - const app = slotsMap.get(storyID); - if (app?.reactiveSlots) updateArgs(app.reactiveSlots, slots); - return app?.reactiveSlots; - } + // this seem to cause recursive updates, and vue errors + // if (slotsMap.has(storyID)) { + // const app = slotsMap.get(storyID); + // if (app?.reactiveSlots) updateArgs(app.reactiveSlots, slots); + // return app?.reactiveSlots; + // } slotsMap.set(storyID, { component, reactiveSlots: slots }); return slots; } From 0b730f7a3976ed6b610ed234de4ea29cbcb20bdd Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 24 Apr 2023 14:53:32 +0200 Subject: [PATCH 3/7] Update tests --- .../stories_vue3-vite-default-ts/ReactiveArgs.stories.ts | 8 +++++--- .../stories_vue3-vite-default-ts/ScopedSlots.stories.ts | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveArgs.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveArgs.stories.ts index fce608950be9..d48352194c55 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveArgs.stories.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveArgs.stories.ts @@ -88,10 +88,12 @@ export const ReactiveHtmlWrapper: Story = { }; // to test that Simple html Decorators in CSF2 format are applied correctly in reactive mode -const ReactiveCSF2WrapperTempl: StoryFn = (args, { argTypes }) => ({ +const ReactiveCSF2WrapperTempl: StoryFn = (args) => ({ components: { ReactiveArgs }, - props: Object.keys(argTypes), - template: '', + setup() { + return { args }; + }, + template: '', }); export const ReactiveCSF2Wrapper = ReactiveCSF2WrapperTempl.bind({}); diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts index 1d338dc24f9e..95266e452711 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts @@ -60,7 +60,7 @@ export const CustomRender: Story = { setup() { return { args }; }, - template: ` + template: ` {{ slotProps.text }}, {{ slotProps.year }} `, }), @@ -73,7 +73,7 @@ export const CustomRenderUsingFunctionSlot: Story = { setup() { return { args }; }, - template: ` + template: ` {{args.default(slotProps)}} `, }), From b853be5cf8ec4f8d11c94ff31890dd3f55228b33 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 24 Apr 2023 15:00:35 +0200 Subject: [PATCH 4/7] Undo small change --- code/renderers/vue3/src/decorateStory.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/code/renderers/vue3/src/decorateStory.ts b/code/renderers/vue3/src/decorateStory.ts index c831c3e1b450..df9f6bb16d6c 100644 --- a/code/renderers/vue3/src/decorateStory.ts +++ b/code/renderers/vue3/src/decorateStory.ts @@ -64,8 +64,6 @@ export function decorateStory( const innerStory = () => h(story!); return prepare(decoratedStory, innerStory) as VueRenderer['storyResult']; }, - (context) => { - return prepare(storyFn(context)) as LegacyStoryFn; - } + (context) => prepare(storyFn(context)) as LegacyStoryFn ); } From 947d895f1a9754ef4f2c0247e6ad91433352d9e4 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 25 Apr 2023 16:42:07 +0200 Subject: [PATCH 5/7] Remove empty file --- .../CustomRenderOptionsArgsFromProps.stories.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 code/renderers/vue3/template/stories_vue3-vite-default-ts/CustomRenderOptionsArgsFromProps.stories.ts diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/CustomRenderOptionsArgsFromProps.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/CustomRenderOptionsArgsFromProps.stories.ts deleted file mode 100644 index e69de29bb2d1..000000000000 From 77743b10290fa48b93ef52544a0659c8f10d2e09 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 28 Apr 2023 15:04:14 +0200 Subject: [PATCH 6/7] Remove createOrUpdateSlots as it is not needed anymore --- code/renderers/vue3/src/render.ts | 28 +++------------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index 28648ae5abb3..7bdf6e4816fa 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -1,18 +1,9 @@ /* eslint-disable no-param-reassign */ -import type { ConcreteComponent } from 'vue'; import { createApp, h, isReactive, isVNode, reactive } from 'vue'; -import type { RenderContext, ArgsStoryFn } from '@storybook/types'; +import type { ArgsStoryFn, RenderContext } from '@storybook/types'; import type { Args, StoryContext } from '@storybook/csf'; -import type { VueRenderer, StoryFnVueReturnType, StoryID } from './types'; - -const slotsMap = new Map< - StoryID, - { - component?: Omit, 'props'>; - reactiveSlots?: Args; - } ->(); +import type { StoryFnVueReturnType, StoryID, VueRenderer } from './types'; export const render: ArgsStoryFn = (props, context) => { const { id, component: Component } = context; @@ -22,7 +13,7 @@ export const render: ArgsStoryFn = (props, context) => { ); } - return () => h(Component, props, createOrUpdateSlots(context)); + return () => h(Component, props, generateSlots(context)); }; let setupFunction = (_app: any) => {}; @@ -149,16 +140,3 @@ function teardown( storybookApp?.unmount(); if (map.has(canvasElement)) map.delete(canvasElement); } - -function createOrUpdateSlots(context: StoryContext) { - const { id: storyID, component } = context; - const slots = generateSlots(context); - // this seem to cause recursive updates, and vue errors - // if (slotsMap.has(storyID)) { - // const app = slotsMap.get(storyID); - // if (app?.reactiveSlots) updateArgs(app.reactiveSlots, slots); - // return app?.reactiveSlots; - // } - slotsMap.set(storyID, { component, reactiveSlots: slots }); - return slots; -} From 8fd8a487826fe560a56cff01f2aa452f8f5459e3 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 28 Apr 2023 16:00:57 +0200 Subject: [PATCH 7/7] Update tests to reflect API --- .../ReactiveDecorators.stories.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveDecorators.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveDecorators.stories.ts index 6f169b665f9f..143cd1784559 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveDecorators.stories.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveDecorators.stories.ts @@ -51,7 +51,7 @@ export const DecoratorFunctionalComponent: Story = { decorators: [ (storyFn, context) => { const story = storyFn(); - return () => h('div', [h('h2', ['Decorator not using args']), [h(story, context.args)]]); + return () => h('div', [h('h2', ['Decorator not using args']), [h(story)]]); }, ], }; @@ -61,10 +61,7 @@ export const DecoratorFunctionalComponentArgsFromContext: Story = { (storyFn, context) => { const story = storyFn(); return () => - h('div', [ - h('h2', ['Decorator using args.label: ', context.args.label]), - [h(story, context.args)], - ]); + h('div', [h('h2', ['Decorator using args.label: ', context.args.label]), [h(story)]]); }, ], };