From 4c1ad9b22ebdb67db350448e3a3c666f6eccf928 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Wed, 28 Sep 2022 13:39:36 +0000 Subject: [PATCH 01/10] feat: allow definition of stories in vue files --- packages/builder-vite/plugins/vue-docgen.ts | 2 +- packages/builder-vite/source-loader-plugin.ts | 2 +- packages/builder-vite/vite-config.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/builder-vite/plugins/vue-docgen.ts b/packages/builder-vite/plugins/vue-docgen.ts index ab5a1ec7..58911298 100644 --- a/packages/builder-vite/plugins/vue-docgen.ts +++ b/packages/builder-vite/plugins/vue-docgen.ts @@ -7,7 +7,7 @@ export function vueDocgen(vueVersion: 2 | 3): Plugin { name: 'vue-docgen', async transform(src: string, id: string) { - if (/\.(vue)$/.test(id)) { + if (/\.(vue)$/.test(id) && !/\.(stories)\.(vue)$/.test(id)) { const metaData = await parse(id); const metaSource = JSON.stringify(metaData); const s = new MagicString(src); diff --git a/packages/builder-vite/source-loader-plugin.ts b/packages/builder-vite/source-loader-plugin.ts index 65d5a4d2..31f18c39 100644 --- a/packages/builder-vite/source-loader-plugin.ts +++ b/packages/builder-vite/source-loader-plugin.ts @@ -3,7 +3,7 @@ import sourceLoaderTransform from '@storybook/source-loader'; import type { ExtendedOptions } from './types'; import MagicString from 'magic-string'; -const storyPattern = /\.stories\.[jt]sx?$/; +const storyPattern = /\.stories\.(([jt]sx?)|(vue))$/; const storySourcePattern = /var __STORY__ = "(.*)"/; const storySourceReplacement = '--STORY_SOURCE_REPLACEMENT--'; diff --git a/packages/builder-vite/vite-config.ts b/packages/builder-vite/vite-config.ts index 7f838f66..5d6b18b9 100644 --- a/packages/builder-vite/vite-config.ts +++ b/packages/builder-vite/vite-config.ts @@ -120,7 +120,7 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig if (framework === 'vue3') { try { const vuePlugin = require('@vitejs/plugin-vue'); - plugins.push(vuePlugin()); + plugins.push(vuePlugin({exclude: [/\.stories\.vue$/]})); } catch (err) { if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') { throw new Error(` From 0d632e97da797acad44824d507c92c9f34ce8c44 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Thu, 10 Nov 2022 21:30:51 +0100 Subject: [PATCH 02/10] Update vite-config.ts --- packages/builder-vite/vite-config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/builder-vite/vite-config.ts b/packages/builder-vite/vite-config.ts index 5d6b18b9..ee73f573 100644 --- a/packages/builder-vite/vite-config.ts +++ b/packages/builder-vite/vite-config.ts @@ -66,7 +66,7 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig // We need the react plugin here to support MDX. viteReact({ // Do not treat story files as HMR boundaries, storybook itself needs to handle them. - exclude: [/\.stories\.([tj])sx?$/, /node_modules/].concat(framework === 'react' ? [] : [/\.([tj])sx?$/]), + exclude: [/\.stories\.(([jt]sx?)|(vue))$/, /node_modules/].concat(framework === 'react' ? [] : [/\.([tj])sx?$/]), }), { name: 'vite-plugin-storybook-allow', @@ -120,7 +120,7 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig if (framework === 'vue3') { try { const vuePlugin = require('@vitejs/plugin-vue'); - plugins.push(vuePlugin({exclude: [/\.stories\.vue$/]})); + plugins.push(vuePlugin()); } catch (err) { if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') { throw new Error(` From ad2b2643cc34b9bac4c55e317705f6b0c60e40a2 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Thu, 10 Nov 2022 21:31:55 +0100 Subject: [PATCH 03/10] Update inject-export-order-plugin.ts --- packages/builder-vite/inject-export-order-plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder-vite/inject-export-order-plugin.ts b/packages/builder-vite/inject-export-order-plugin.ts index 09e00992..6d2151c8 100644 --- a/packages/builder-vite/inject-export-order-plugin.ts +++ b/packages/builder-vite/inject-export-order-plugin.ts @@ -6,7 +6,7 @@ export const injectExportOrderPlugin = { // This should only run after the typescript has been transpiled enforce: 'post', async transform(code: string, id: string) { - if (!/\.stories\.([tj])sx?$/.test(id) && !/(stories|story).mdx$/.test(id)) { + if (!/\.stories\.(([jt]sx?)|(vue))$/.test(id) && !/(stories|story).mdx$/.test(id)) { return; } // TODO: Maybe convert `injectExportOrderPlugin` to function that returns object, From af2d13278a14bddb137b7ac087198cd0acaa8c55 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Thu, 10 Nov 2022 21:32:45 +0100 Subject: [PATCH 04/10] Update codegen-importfn-script.ts --- packages/builder-vite/codegen-importfn-script.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder-vite/codegen-importfn-script.ts b/packages/builder-vite/codegen-importfn-script.ts index 958ca5c5..1ca4d9b5 100644 --- a/packages/builder-vite/codegen-importfn-script.ts +++ b/packages/builder-vite/codegen-importfn-script.ts @@ -29,7 +29,7 @@ async function toImportFn(stories: string[]) { const objectEntries = stories.map((file) => { const ext = path.extname(file); const relativePath = normalizePath(path.relative(process.cwd(), file)); - if (!['.js', '.jsx', '.ts', '.tsx', '.mdx'].includes(ext)) { + if (!['.js', '.jsx', '.ts', '.tsx', '.mdx', '.vue'].includes(ext)) { logger.warn(`Cannot process ${ext} file with storyStoreV7: ${relativePath}`); } From 34d25fdb3bb646e9401ebb271f8a7a83ddb5e307 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Thu, 10 Nov 2022 21:34:10 +0100 Subject: [PATCH 05/10] Update code-generator-plugin.ts --- packages/builder-vite/code-generator-plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder-vite/code-generator-plugin.ts b/packages/builder-vite/code-generator-plugin.ts index 753cce7a..178a05be 100644 --- a/packages/builder-vite/code-generator-plugin.ts +++ b/packages/builder-vite/code-generator-plugin.ts @@ -39,7 +39,7 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin { // HMR to update the importFn. server.watcher.on('add', (path) => { // TODO maybe use the stories declaration in main - if (/\.stories\.([tj])sx?$/.test(path) || /\.(story|stories).mdx$/.test(path)) { + if (/\.stories\.(([tj]sx?)|(vue))$/.test(path) || /\.(story|stories).mdx$/.test(path)) { // We need to emit a change event to trigger HMR server.watcher.emit('change', virtualStoriesFile); } From 9ce0396d54da16d99c503211abb1fdf4b76ea521 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Sun, 8 Jan 2023 19:14:36 +0800 Subject: [PATCH 06/10] Update packages/builder-vite/vite-config.ts Co-authored-by: Ian VanSchooten --- packages/builder-vite/vite-config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder-vite/vite-config.ts b/packages/builder-vite/vite-config.ts index ee73f573..775ecccf 100644 --- a/packages/builder-vite/vite-config.ts +++ b/packages/builder-vite/vite-config.ts @@ -66,7 +66,7 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig // We need the react plugin here to support MDX. viteReact({ // Do not treat story files as HMR boundaries, storybook itself needs to handle them. - exclude: [/\.stories\.(([jt]sx?)|(vue))$/, /node_modules/].concat(framework === 'react' ? [] : [/\.([tj])sx?$/]), + exclude: [/\.stories\.(?:[tj]sx?|vue)$/, /node_modules/].concat(framework === 'react' ? [] : [/\.([tj])sx?$/]), }), { name: 'vite-plugin-storybook-allow', From b32910fbcc32437f6ebb730f03bd46635ebf88bc Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Sun, 8 Jan 2023 19:15:22 +0800 Subject: [PATCH 07/10] Update packages/builder-vite/code-generator-plugin.ts Co-authored-by: Ian VanSchooten --- packages/builder-vite/code-generator-plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder-vite/code-generator-plugin.ts b/packages/builder-vite/code-generator-plugin.ts index 178a05be..049e5f54 100644 --- a/packages/builder-vite/code-generator-plugin.ts +++ b/packages/builder-vite/code-generator-plugin.ts @@ -39,7 +39,7 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin { // HMR to update the importFn. server.watcher.on('add', (path) => { // TODO maybe use the stories declaration in main - if (/\.stories\.(([tj]sx?)|(vue))$/.test(path) || /\.(story|stories).mdx$/.test(path)) { + if (/\.stories\.(?:[tj]sx?|vue)$/.test(path) || /\.(story|stories).mdx$/.test(path)) { // We need to emit a change event to trigger HMR server.watcher.emit('change', virtualStoriesFile); } From 3dfe39d43f486b27274f3476248260c8e4e8457c Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Sun, 8 Jan 2023 19:15:41 +0800 Subject: [PATCH 08/10] Update packages/builder-vite/inject-export-order-plugin.ts Co-authored-by: Ian VanSchooten --- packages/builder-vite/inject-export-order-plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder-vite/inject-export-order-plugin.ts b/packages/builder-vite/inject-export-order-plugin.ts index 6d2151c8..98661883 100644 --- a/packages/builder-vite/inject-export-order-plugin.ts +++ b/packages/builder-vite/inject-export-order-plugin.ts @@ -6,7 +6,7 @@ export const injectExportOrderPlugin = { // This should only run after the typescript has been transpiled enforce: 'post', async transform(code: string, id: string) { - if (!/\.stories\.(([jt]sx?)|(vue))$/.test(id) && !/(stories|story).mdx$/.test(id)) { + if (!/\.stories\.(?:[tj]sx?|vue)$/.test(id) && !/(stories|story).mdx$/.test(id)) { return; } // TODO: Maybe convert `injectExportOrderPlugin` to function that returns object, From 2ce003d8067ca0cfe86882dce14b6078a93b20f7 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Sun, 8 Jan 2023 19:20:16 +0800 Subject: [PATCH 09/10] Update packages/builder-vite/source-loader-plugin.ts Co-authored-by: Ian VanSchooten --- packages/builder-vite/source-loader-plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder-vite/source-loader-plugin.ts b/packages/builder-vite/source-loader-plugin.ts index 31f18c39..d2de797a 100644 --- a/packages/builder-vite/source-loader-plugin.ts +++ b/packages/builder-vite/source-loader-plugin.ts @@ -3,7 +3,7 @@ import sourceLoaderTransform from '@storybook/source-loader'; import type { ExtendedOptions } from './types'; import MagicString from 'magic-string'; -const storyPattern = /\.stories\.(([jt]sx?)|(vue))$/; +const storyPattern = /\.stories\.(?:[jt]sx?|vue)$/; const storySourcePattern = /var __STORY__ = "(.*)"/; const storySourceReplacement = '--STORY_SOURCE_REPLACEMENT--'; From 4cb2ca8aa236985e7374aac13afe01689d6855dd Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Sun, 8 Jan 2023 19:20:46 +0800 Subject: [PATCH 10/10] Update packages/builder-vite/plugins/vue-docgen.ts Co-authored-by: Ian VanSchooten --- packages/builder-vite/plugins/vue-docgen.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder-vite/plugins/vue-docgen.ts b/packages/builder-vite/plugins/vue-docgen.ts index 58911298..90d34845 100644 --- a/packages/builder-vite/plugins/vue-docgen.ts +++ b/packages/builder-vite/plugins/vue-docgen.ts @@ -7,7 +7,7 @@ export function vueDocgen(vueVersion: 2 | 3): Plugin { name: 'vue-docgen', async transform(src: string, id: string) { - if (/\.(vue)$/.test(id) && !/\.(stories)\.(vue)$/.test(id)) { + if (/\.vue$/.test(id) && !/\.stories\.vue$/.test(id)) { const metaData = await parse(id); const metaSource = JSON.stringify(metaData); const s = new MagicString(src);