From d9483a05a8c12e02cfbeb5e6b7542e249dcf9f23 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Sat, 30 Oct 2021 14:57:20 +1100 Subject: [PATCH] Export `decorateStory` from frameworks that have it. And no longer emit warnings for exported `decorateStory` or `renderToDOM` --- app/angular/src/client/preview/config.ts | 1 + .../src/client/preview/decorateStory.ts | 2 + app/svelte/src/client/preview/config.ts | 1 + app/vue/src/client/preview/config.ts | 1 + app/vue/src/client/preview/decorateStory.ts | 85 ++++++++++++++++++ app/vue/src/client/preview/index.ts | 86 +------------------ app/vue3/src/client/preview/config.ts | 1 + app/vue3/src/client/preview/decorateStory.ts | 70 +++++++++++++++ app/vue3/src/client/preview/index.ts | 69 +-------------- .../preview/virtualModuleEntry.template.js | 4 + .../preview/virtualModuleEntry.template.js | 4 + 11 files changed, 174 insertions(+), 150 deletions(-) create mode 100644 app/vue/src/client/preview/decorateStory.ts create mode 100644 app/vue3/src/client/preview/decorateStory.ts diff --git a/app/angular/src/client/preview/config.ts b/app/angular/src/client/preview/config.ts index 2ea6e7700bc..f6f8d190dc7 100644 --- a/app/angular/src/client/preview/config.ts +++ b/app/angular/src/client/preview/config.ts @@ -1,3 +1,4 @@ export { render, renderToDOM } from './render'; +export { decorateStory } from './decorateStory'; export const parameters = { framework: 'angular' }; diff --git a/app/angular/src/client/preview/decorateStory.ts b/app/angular/src/client/preview/decorateStory.ts index fbd70c8285d..85ee8da7bf3 100644 --- a/app/angular/src/client/preview/decorateStory.ts +++ b/app/angular/src/client/preview/decorateStory.ts @@ -27,6 +27,8 @@ export default function decorateStory( return returnDecorators; } +export { decorateStory }; + const prepareMain = ( story: AngularFramework['storyResult'], context: StoryContext diff --git a/app/svelte/src/client/preview/config.ts b/app/svelte/src/client/preview/config.ts index 1a3054f5126..4549936701a 100644 --- a/app/svelte/src/client/preview/config.ts +++ b/app/svelte/src/client/preview/config.ts @@ -1,3 +1,4 @@ export { renderToDOM } from './render'; +export { decorateStory } from './decorators'; export const parameters = { framework: 'svelte' }; diff --git a/app/vue/src/client/preview/config.ts b/app/vue/src/client/preview/config.ts index 1ffa6048478..964f711b2d7 100644 --- a/app/vue/src/client/preview/config.ts +++ b/app/vue/src/client/preview/config.ts @@ -1,3 +1,4 @@ export { renderToDOM } from './render'; +export { decorateStory } from './decorateStory'; export const parameters = { framework: 'vue' }; diff --git a/app/vue/src/client/preview/decorateStory.ts b/app/vue/src/client/preview/decorateStory.ts new file mode 100644 index 00000000000..cd2d2c20ed2 --- /dev/null +++ b/app/vue/src/client/preview/decorateStory.ts @@ -0,0 +1,85 @@ +import Vue, { VueConstructor, ComponentOptions } from 'vue'; +import { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf'; +import { sanitizeStoryContextUpdate } from '@storybook/store'; + +import { StoryFnVueReturnType } from './types'; +import { VueFramework } from './types-6-0'; +import { extractProps } from './util'; +import { VALUES } from './render'; + +export const WRAPS = 'STORYBOOK_WRAPS'; + +function prepare( + rawStory: StoryFnVueReturnType, + innerStory?: VueConstructor +): VueConstructor | null { + let story: ComponentOptions | VueConstructor; + + if (typeof rawStory === 'string') { + story = { template: rawStory }; + } else if (rawStory != null) { + story = rawStory as ComponentOptions; + } else { + return null; + } + + // @ts-ignore + // eslint-disable-next-line no-underscore-dangle + if (!story._isVue) { + if (innerStory) { + story.components = { ...(story.components || {}), story: innerStory }; + } + story = Vue.extend(story); + // @ts-ignore // https://github.com/storybookjs/storybook/pull/7578#discussion_r307984824 + } else if (story.options[WRAPS]) { + return story as VueConstructor; + } + + return Vue.extend({ + // @ts-ignore // https://github.com/storybookjs/storybook/pull/7578#discussion_r307985279 + [WRAPS]: story, + // @ts-ignore // https://github.com/storybookjs/storybook/pull/7578#discussion_r307984824 + [VALUES]: { ...(innerStory ? innerStory.options[VALUES] : {}), ...extractProps(story) }, + functional: true, + render(h, { data, parent, children }) { + return h( + story, + { + ...data, + // @ts-ignore // https://github.com/storybookjs/storybook/pull/7578#discussion_r307986196 + props: { ...(data.props || {}), ...parent.$root[VALUES] }, + }, + children + ); + }, + }); +} + +export function decorateStory( + storyFn: LegacyStoryFn, + decorators: DecoratorFunction[] +): LegacyStoryFn { + return decorators.reduce( + (decorated: LegacyStoryFn, decorator) => ( + context: StoryContext + ) => { + let story; + + const decoratedStory = decorator((update) => { + story = decorated({ ...context, ...sanitizeStoryContextUpdate(update) }); + return story; + }, context); + + if (!story) { + story = decorated(context); + } + + if (decoratedStory === story) { + return story; + } + + return prepare(decoratedStory, story as any); + }, + (context) => prepare(storyFn(context)) + ); +} diff --git a/app/vue/src/client/preview/index.ts b/app/vue/src/client/preview/index.ts index 1470e77e91b..14f10b1c1be 100644 --- a/app/vue/src/client/preview/index.ts +++ b/app/vue/src/client/preview/index.ts @@ -1,93 +1,13 @@ /* eslint-disable prefer-destructuring */ -import Vue, { VueConstructor, ComponentOptions } from 'vue'; import { start } from '@storybook/core/client'; -import { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf'; import { ClientStoryApi, Loadable } from '@storybook/addons'; -import { sanitizeStoryContextUpdate } from '@storybook/store'; import './globals'; -import { IStorybookSection, StoryFnVueReturnType } from './types'; +import { IStorybookSection } from './types'; import { VueFramework } from './types-6-0'; +import { renderToDOM } from './render'; +import { decorateStory } from './decorateStory'; -import { renderToDOM, VALUES } from './render'; -import { extractProps } from './util'; - -export const WRAPS = 'STORYBOOK_WRAPS'; - -function prepare( - rawStory: StoryFnVueReturnType, - innerStory?: VueConstructor -): VueConstructor | null { - let story: ComponentOptions | VueConstructor; - - if (typeof rawStory === 'string') { - story = { template: rawStory }; - } else if (rawStory != null) { - story = rawStory as ComponentOptions; - } else { - return null; - } - - // @ts-ignore - // eslint-disable-next-line no-underscore-dangle - if (!story._isVue) { - if (innerStory) { - story.components = { ...(story.components || {}), story: innerStory }; - } - story = Vue.extend(story); - // @ts-ignore // https://github.com/storybookjs/storybook/pull/7578#discussion_r307984824 - } else if (story.options[WRAPS]) { - return story as VueConstructor; - } - - return Vue.extend({ - // @ts-ignore // https://github.com/storybookjs/storybook/pull/7578#discussion_r307985279 - [WRAPS]: story, - // @ts-ignore // https://github.com/storybookjs/storybook/pull/7578#discussion_r307984824 - [VALUES]: { ...(innerStory ? innerStory.options[VALUES] : {}), ...extractProps(story) }, - functional: true, - render(h, { data, parent, children }) { - return h( - story, - { - ...data, - // @ts-ignore // https://github.com/storybookjs/storybook/pull/7578#discussion_r307986196 - props: { ...(data.props || {}), ...parent.$root[VALUES] }, - }, - children - ); - }, - }); -} - -function decorateStory( - storyFn: LegacyStoryFn, - decorators: DecoratorFunction[] -): LegacyStoryFn { - return decorators.reduce( - (decorated: LegacyStoryFn, decorator) => ( - context: StoryContext - ) => { - let story; - - const decoratedStory = decorator((update) => { - story = decorated({ ...context, ...sanitizeStoryContextUpdate(update) }); - return story; - }, context); - - if (!story) { - story = decorated(context); - } - - if (decoratedStory === story) { - return story; - } - - return prepare(decoratedStory, story as any); - }, - (context) => prepare(storyFn(context)) - ); -} const framework = 'vue'; interface ClientApi extends ClientStoryApi { diff --git a/app/vue3/src/client/preview/config.ts b/app/vue3/src/client/preview/config.ts index 256d07e9a05..3baf26e63d0 100644 --- a/app/vue3/src/client/preview/config.ts +++ b/app/vue3/src/client/preview/config.ts @@ -1,3 +1,4 @@ export { renderToDOM } from './render'; +export { decorateStory } from './decorateStory'; export const parameters = { framework: 'vue3' }; diff --git a/app/vue3/src/client/preview/decorateStory.ts b/app/vue3/src/client/preview/decorateStory.ts new file mode 100644 index 00000000000..97e56dc1f1d --- /dev/null +++ b/app/vue3/src/client/preview/decorateStory.ts @@ -0,0 +1,70 @@ +import type { ConcreteComponent, Component, ComponentOptions } from 'vue'; +import { h } from 'vue'; +import { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf'; +import { sanitizeStoryContextUpdate } from '@storybook/store'; + +import { VueFramework } from './types-6-0'; + +/* + This normalizes a functional component into a render method in ComponentOptions. + + 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; +} + +function prepare( + rawStory: VueFramework['storyResult'], + innerStory?: ConcreteComponent +): Component | null { + const story = rawStory as ComponentOptions; + + if (story == null) { + return null; + } + + if (innerStory) { + return { + // Normalize so we can always spread an object + ...normalizeFunctionalComponent(story), + components: { ...(story.components || {}), story: innerStory }, + }; + } + + return { + render() { + return h(story); + }, + }; +} + +export function decorateStory( + storyFn: LegacyStoryFn, + decorators: DecoratorFunction[] +): LegacyStoryFn { + return decorators.reduce( + (decorated: LegacyStoryFn, decorator) => ( + context: StoryContext + ) => { + let story: VueFramework['storyResult']; + + const decoratedStory: VueFramework['storyResult'] = decorator((update) => { + story = decorated({ ...context, ...sanitizeStoryContextUpdate(update) }); + return story; + }, context); + + if (!story) { + story = decorated(context); + } + + if (decoratedStory === story) { + return story; + } + + return prepare(decoratedStory, story) as VueFramework['storyResult']; + }, + (context) => prepare(storyFn(context)) as LegacyStoryFn + ); +} diff --git a/app/vue3/src/client/preview/index.ts b/app/vue3/src/client/preview/index.ts index 145cdf7b1e7..6c3642f1937 100644 --- a/app/vue3/src/client/preview/index.ts +++ b/app/vue3/src/client/preview/index.ts @@ -1,79 +1,14 @@ -import type { ConcreteComponent, Component, ComponentOptions, App } from 'vue'; -import { h } from 'vue'; +import type { App } from 'vue'; import { start } from '@storybook/core/client'; -import { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf'; import { ClientStoryApi, Loadable } from '@storybook/addons'; -import { sanitizeStoryContextUpdate } from '@storybook/store'; import './globals'; import { IStorybookSection } from './types'; import { VueFramework } from './types-6-0'; +import { decorateStory } from './decorateStory'; import { renderToDOM, storybookApp } from './render'; -/* - This normalizes a functional component into a render method in ComponentOptions. - - 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; -} - -function prepare( - rawStory: VueFramework['storyResult'], - innerStory?: ConcreteComponent -): Component | null { - const story = rawStory as ComponentOptions; - - if (story == null) { - return null; - } - - if (innerStory) { - return { - // Normalize so we can always spread an object - ...normalizeFunctionalComponent(story), - components: { ...(story.components || {}), story: innerStory }, - }; - } - - return { - render() { - return h(story); - }, - }; -} - -function decorateStory( - storyFn: LegacyStoryFn, - decorators: DecoratorFunction[] -): LegacyStoryFn { - return decorators.reduce( - (decorated: LegacyStoryFn, decorator) => ( - context: StoryContext - ) => { - let story: VueFramework['storyResult']; - - const decoratedStory: VueFramework['storyResult'] = decorator((update) => { - story = decorated({ ...context, ...sanitizeStoryContextUpdate(update) }); - return story; - }, context); - - if (!story) { - story = decorated(context); - } - - if (decoratedStory === story) { - return story; - } - - return prepare(decoratedStory, story) as VueFramework['storyResult']; - }, - (context) => prepare(storyFn(context)) as LegacyStoryFn - ); -} const framework = 'vue3'; interface ClientApi extends ClientStoryApi { diff --git a/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js b/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js index 4131893f8fd..cd9e191534d 100644 --- a/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js +++ b/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js @@ -41,6 +41,10 @@ Object.keys(config).forEach((key) => { v[key] = value; return addParameters(v, false); } + case 'decorateStory': + case 'renderToDOM': { + return null; // This key is not handled directly in v6 mode. + } default: { // eslint-disable-next-line prefer-template return console.log(key + ' was not supported :( !'); diff --git a/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js b/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js index 4131893f8fd..cd9e191534d 100644 --- a/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js +++ b/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js @@ -41,6 +41,10 @@ Object.keys(config).forEach((key) => { v[key] = value; return addParameters(v, false); } + case 'decorateStory': + case 'renderToDOM': { + return null; // This key is not handled directly in v6 mode. + } default: { // eslint-disable-next-line prefer-template return console.log(key + ' was not supported :( !');