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 <ian.vanschooten@gmail.com>

* Update packages/builder-vite/code-generator-plugin.ts

Co-authored-by: Ian VanSchooten <ian.vanschooten@gmail.com>

* Update packages/builder-vite/inject-export-order-plugin.ts

Co-authored-by: Ian VanSchooten <ian.vanschooten@gmail.com>

* Update packages/builder-vite/source-loader-plugin.ts

Co-authored-by: Ian VanSchooten <ian.vanschooten@gmail.com>

* Update packages/builder-vite/plugins/vue-docgen.ts

Co-authored-by: Ian VanSchooten <ian.vanschooten@gmail.com>

Co-authored-by: Ian VanSchooten <ian.vanschooten@gmail.com>

Author: tobiasdiez

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);
         }

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}`);
     }
 

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,

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);

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--';
 

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',