Add csf-plugin to vite

storybookjs · Dec 8, 2022 · 02d988c · 02d988c
1 parent 098664d
commit 02d988c
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 110 deletions.
diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json
@@ -44,11 +44,11 @@
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.0.5",
     "@storybook/client-logger": "7.0.0-alpha.58",
     "@storybook/core-common": "7.0.0-alpha.58",
+    "@storybook/csf-plugin": "7.0.0-alpha.58",
     "@storybook/mdx2-csf": "next",
     "@storybook/node-logger": "7.0.0-alpha.58",
     "@storybook/preview": "7.0.0-alpha.58",
     "@storybook/preview-api": "7.0.0-alpha.58",
-    "@storybook/source-loader": "7.0.0-alpha.58",
     "@storybook/types": "7.0.0-alpha.58",
     "@vitejs/plugin-react": "^2.0.0",
     "browser-assert": "^1.2.1",

diff --git a/code/lib/builder-vite/src/plugins/csf-plugin.ts b/code/lib/builder-vite/src/plugins/csf-plugin.ts
@@ -0,0 +1,15 @@
+import type { Plugin } from 'vite';
+import { vite } from '@storybook/csf-plugin';
+import type { StorybookConfig } from '@storybook/types';
+import type { ExtendedOptions } from '../types';
+
+export async function csfPlugin(config: ExtendedOptions): Promise<Plugin> {
+  const { presets } = config;
+
+  const addons = await presets.apply<StorybookConfig['addons']>('addons', []);
+  const docsOptions =
+    // @ts-expect-error - not sure what type to use here
+    addons.find((a) => [a, a.name].includes('@storybook/addon-docs'))?.options ?? {};
+
+  return vite(docsOptions?.csfPluginOptions);
+}
diff --git a/code/lib/builder-vite/src/plugins/index.ts b/code/lib/builder-vite/src/plugins/index.ts
@@ -2,4 +2,4 @@ export * from './inject-export-order-plugin';
 export * from './mdx-plugin';
 export * from './strip-story-hmr-boundaries';
 export * from './code-generator-plugin';
-export * from './source-loader-plugin';
+export * from './csf-plugin';
diff --git a/code/lib/builder-vite/src/plugins/source-loader-plugin.ts b/code/lib/builder-vite/src/plugins/source-loader-plugin.ts
diff --git a/code/lib/builder-vite/src/vite-config.ts b/code/lib/builder-vite/src/vite-config.ts
@@ -13,6 +13,7 @@ import { isPreservingSymlinks, getFrameworkName } from '@storybook/core-common';
 import { globals } from '@storybook/preview/globals';
 import {
   codeGeneratorPlugin,
+  csfPlugin,
   injectExportOrderPlugin,
   mdxPlugin,
   stripStoryHMRBoundary,
@@ -74,7 +75,7 @@ export async function pluginConfig(options: ExtendedOptions) {
 
   const plugins = [
     codeGeneratorPlugin(options),
-    // sourceLoaderPlugin(options),
+    await csfPlugin(options),
     mdxPlugin(),
     injectExportOrderPlugin,
     stripStoryHMRBoundary(),

diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts
@@ -1,4 +1,3 @@
-import { vite as csfPlugin } from '@storybook/csf-plugin';
 import pluginTurbosnap from 'vite-plugin-turbosnap';
 import type { StorybookConfig } from '../../frameworks/react-vite/dist';
 
@@ -65,7 +64,6 @@ const config: StorybookConfig = {
     ...viteConfig,
     plugins: [
       ...(viteConfig.plugins || []),
-      csfPlugin({}),
       configType === 'PRODUCTION' ? pluginTurbosnap({ rootDir: viteConfig.root || '' }) : [],
     ],
     optimizeDeps: { ...viteConfig.optimizeDeps, force: true },

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -5876,11 +5876,11 @@ __metadata:
     "@joshwooding/vite-plugin-react-docgen-typescript": 0.0.5
     "@storybook/client-logger": 7.0.0-alpha.58
     "@storybook/core-common": 7.0.0-alpha.58
+    "@storybook/csf-plugin": 7.0.0-alpha.58
     "@storybook/mdx2-csf": next
     "@storybook/node-logger": 7.0.0-alpha.58
     "@storybook/preview": 7.0.0-alpha.58
     "@storybook/preview-api": 7.0.0-alpha.58
-    "@storybook/source-loader": 7.0.0-alpha.58
     "@storybook/types": 7.0.0-alpha.58
     "@types/express": ^4.17.13
     "@types/node": ^16.0.0