poc: storybook devServer + build

excaliburjs · Nov 9, 2023 · acdfd59 · acdfd59
1 parent f4d7291
commit acdfd59
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 22 deletions.
diff --git a/site/.gitignore b/site/.gitignore
@@ -19,4 +19,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-/static/examples
+/build-storybook
diff --git a/site/docusaurus.config.ts b/site/docusaurus.config.ts
@@ -1,8 +1,7 @@
-import { Config } from '@docusaurus/types';
+import { Config, Plugin } from '@docusaurus/types';
 import { Options as ClassicPresetOptions, ThemeConfig as ClassicPresetThemeConfig } from '@docusaurus/preset-classic';
 import { ReflectionKind } from 'typedoc';
-import { sync as readUpSync } from 'read-pkg-up';
-import { buildStaticStandalone } from '@storybook/core-server';
+import { build } from '@storybook/core-server';
 import { cache } from '@storybook/core-common';
 import path from 'path';
 import webpack from 'webpack';
@@ -41,6 +40,8 @@ const config: Config = {
     locales: ['en']
   },
 
+  staticDirectories: ['static', 'build-storybook'],
+
   presets: [
     [
       'classic',
@@ -79,21 +80,51 @@ const config: Config = {
   themes: ['@docusaurus/theme-live-codeblock'],
 
   plugins: [
-    async function storybookPlugin(context, options) {
-      return {
-        name: 'storybook-plugin',
-        async loadContent() {
-          await buildStaticStandalone({
-            configDir: path.join(__dirname, '..', '.storybook'),
-            outputDir: path.join(__dirname, 'static', 'examples'),
-            ignorePreview: false,
-            configType: 'PRODUCTION',
-            cache,
-            packageJson: readUpSync({ cwd: __dirname }).packageJson
-          });
-        }
-      };
-    },
+    [
+      async function storybookPlugin(context, options: { staticDir: string; storybookOptions?: any }) {
+        const isProd = process.env.NODE_ENV === 'production';
+        let storybookDevServer: any = null;
+
+        return {
+          name: 'storybook-plugin',
+          async postBuild() {
+            await build({
+              mode: 'static',
+              configDir: path.join(__dirname, '..', '.storybook'),
+              outputDir: path.join(__dirname, context.outDir, 'examples'),
+              ignorePreview: false,
+              cache,
+              ...(options?.storybookOptions ?? {})
+            });
+          },
+          async loadContent() {
+            if (isProd) {
+              return null;
+            }
+
+            if (!storybookDevServer) {
+              storybookDevServer = await build({
+                mode: 'dev',
+                ci: true,
+                configDir: path.join(__dirname, '..', '.storybook'),
+                outputDir: path.join(__dirname, options.staticDir, 'examples'),
+                ignorePreview: false,
+                cache,
+                ...(options?.storybookOptions ?? {})
+              });
+            }
+
+            return { address: storybookDevServer.address }
+          },
+          async contentLoaded({ content, actions }) {
+            actions.setGlobalData({
+              address: content?.address
+            });
+          }
+        } as Plugin<{ address?: string}>;
+      },
+      { staticDir: 'build-storybook' }
+    ],
     async function excaliburPlugin(context, options) {
       return {
         name: 'excalibur-plugin',
@@ -169,7 +200,7 @@ const config: Config = {
           label: 'Learn'
         },
         { to: '/api', label: 'API', position: 'left' },
-        { href: '/examples', label: 'Examples', position: 'left' },
+        { href: '/examples', label: 'Examples', position: 'left', prependBaseUrlToHref: true },
         { to: '/blog', label: 'Blog', position: 'left' },
         {
           href: 'https://github.com/excaliburjs/Excalibur',

diff --git a/site/src/components/docs/Example.tsx b/site/src/components/docs/Example.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import useBaseUrl from '@docusaurus/useBaseUrl'
+import { usePluginData } from '@docusaurus/useGlobalData';
 
 const FRAME_STYLE = {
   border: '1px solid #aaa',
@@ -11,13 +12,15 @@ const FRAME_STYLE = {
  * @prop story The story ID in the URL to navigate to
  */
 export default function Example({ story = '' }) {
-  const storyUrl = useBaseUrl(`/examples/?nav=0&path=/docs/${story}`);
+  const { address } = usePluginData('storybook-plugin') as { address?: string };
+  const buildUrl = useBaseUrl(`/examples/?nav=0&path=/docs/${story}`);
+  const devUrl = `${address}?nav=0&path=/docs/${story}`;
 
   return (
     <iframe
       title="Excalibur Storybook Example"
       allowFullScreen
-      src={storyUrl}
+      src={address ? devUrl : buildUrl}
       frameBorder={0}
       width="100%"
       height="600"