From f0d9d7efbe2a8d3f649cc6a31de8e5d50e55b54d Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Mon, 9 Jan 2023 10:00:10 +0800 Subject: [PATCH] feat: allow definition of stories in vue files (#505) * feat: allow definition of stories in vue files * Update vite-config.ts * Update inject-export-order-plugin.ts * Update codegen-importfn-script.ts * Update code-generator-plugin.ts * Update packages/builder-vite/vite-config.ts Co-authored-by: Ian VanSchooten * Update packages/builder-vite/code-generator-plugin.ts Co-authored-by: Ian VanSchooten * Update packages/builder-vite/inject-export-order-plugin.ts Co-authored-by: Ian VanSchooten * Update packages/builder-vite/source-loader-plugin.ts Co-authored-by: Ian VanSchooten * Update packages/builder-vite/plugins/vue-docgen.ts Co-authored-by: Ian VanSchooten Co-authored-by: Ian VanSchooten --- packages/builder-vite/code-generator-plugin.ts | 2 +- packages/builder-vite/codegen-importfn-script.ts | 2 +- packages/builder-vite/inject-export-order-plugin.ts | 2 +- packages/builder-vite/plugins/vue-docgen.ts | 2 +- packages/builder-vite/source-loader-plugin.ts | 2 +- packages/builder-vite/vite-config.ts | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/builder-vite/code-generator-plugin.ts b/packages/builder-vite/code-generator-plugin.ts index 753cce7a..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?$/.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); } 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}`); } diff --git a/packages/builder-vite/inject-export-order-plugin.ts b/packages/builder-vite/inject-export-order-plugin.ts index 09e00992..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\.([tj])sx?$/.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, diff --git a/packages/builder-vite/plugins/vue-docgen.ts b/packages/builder-vite/plugins/vue-docgen.ts index ab5a1ec7..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)) { + 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..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?$/; +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 0a23612d..2a5beed5 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\.(?:[tj]sx?|vue)$/, /node_modules/].concat(framework === 'react' ? [] : [/\.([tj])sx?$/]), }), { name: 'vite-plugin-storybook-allow',