From 928ea3c1abec888e2e79aa494398d957b94c5a78 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 17 Dec 2020 05:04:24 +0800 Subject: [PATCH] Merge pull request #13466 from j3rem1e/issue-13247 Svelte: Statically load docgen info for svelte components --- .../src/frameworks/svelte/extractArgTypes.ts | 4 +--- addons/docs/src/frameworks/svelte/preset.ts | 2 +- .../frameworks/svelte/svelte-docgen-loader.ts | 13 ++++++---- .../src/stories/button.stories.js | 24 +++++++++++-------- 4 files changed, 24 insertions(+), 19 deletions(-) diff --git a/addons/docs/src/frameworks/svelte/extractArgTypes.ts b/addons/docs/src/frameworks/svelte/extractArgTypes.ts index d9374d2476c8..957b902dc502 100644 --- a/addons/docs/src/frameworks/svelte/extractArgTypes.ts +++ b/addons/docs/src/frameworks/svelte/extractArgTypes.ts @@ -35,10 +35,8 @@ type Docgen = { export const extractArgTypes: ArgTypesExtractor = (component) => { try { - // eslint-disable-next-line new-cap - const comp: ComponentWithDocgen = new component({ props: {} }); // eslint-disable-next-line no-underscore-dangle - const docgen = comp.__docgen; + const docgen = component.__docgen; if (docgen) { return createArgTypes(docgen); } diff --git a/addons/docs/src/frameworks/svelte/preset.ts b/addons/docs/src/frameworks/svelte/preset.ts index f68fa8ce340d..9feb2647f424 100644 --- a/addons/docs/src/frameworks/svelte/preset.ts +++ b/addons/docs/src/frameworks/svelte/preset.ts @@ -6,7 +6,7 @@ export function webpackFinal(webpackConfig: Configuration, options: any = {}) { webpackConfig.module.rules.push({ test: /\.svelte$/, loader: path.resolve(`${__dirname}/svelte-docgen-loader`), - enforce: 'pre', + enforce: 'post', }); return webpackConfig; diff --git a/addons/docs/src/frameworks/svelte/svelte-docgen-loader.ts b/addons/docs/src/frameworks/svelte/svelte-docgen-loader.ts index ca853d29ebc9..5ce93a7ac7a1 100644 --- a/addons/docs/src/frameworks/svelte/svelte-docgen-loader.ts +++ b/addons/docs/src/frameworks/svelte/svelte-docgen-loader.ts @@ -7,13 +7,14 @@ import * as path from 'path'; * @param source raw svelte component */ export default async function svelteDocgen(source: string) { - // get filename for source content // eslint-disable-next-line no-underscore-dangle - const file = path.basename(this._module.resource); + const { resource } = this._module; + // get filename for source content + const file = path.basename(resource); // set SvelteDoc options const options = { - fileContent: source, + filename: resource, version: 3, }; @@ -25,14 +26,16 @@ export default async function svelteDocgen(source: string) { // populate filename in docgen componentDoc.name = path.basename(file); + const componentName = path.parse(resource).name; + docgen = ` - export const __docgen = ${JSON.stringify(componentDoc)}; + ${componentName}.__docgen = ${JSON.stringify(componentDoc)}; `; } catch (error) { console.error(error); } // inject __docgen prop in svelte component - const output = source.replace('', `${docgen}`); + const output = source + docgen; return output; } diff --git a/examples/svelte-kitchen-sink/src/stories/button.stories.js b/examples/svelte-kitchen-sink/src/stories/button.stories.js index af0b416d9c25..92e5cfeb8526 100644 --- a/examples/svelte-kitchen-sink/src/stories/button.stories.js +++ b/examples/svelte-kitchen-sink/src/stories/button.stories.js @@ -2,20 +2,24 @@ import ButtonView from './views/ButtonView.svelte'; export default { title: 'Button', + component: ButtonView, }; -export const Rounded = () => ({ +const Template = (args) => ({ Component: ButtonView, props: { - rounded: true, - message: 'Rounded text', + ...args, }, }); -export const Square = () => ({ - Component: ButtonView, - props: { - rounded: false, - message: 'Squared text', - }, -}); +export const Rounded = Template.bind({}); +Rounded.args = { + rounded: true, + message: 'Squared text', +}; + +export const Square = Template.bind({}); +Square.args = { + rounded: false, + message: 'Squared text', +};