poc: storybook build

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

Hide file tree

Showing 4 changed files with 22 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -46,8 +46,6 @@
     "eslint": "eslint \"src/engine/**/*.ts\"",
     "eslint:sandbox": "eslint \"sandbox/**/*.ts\"",
     "eslint:spec": "eslint \"src/spec/**/*.ts\"",
-    "visual": "storybook dev",
-    "build-storybook": "storybook build -o build-storybook",
     "sandbox:copy": "copyfiles -u 2 \"./build/dist/**/*.*\" \"./build/dist/*.*\" ./sandbox/lib/",
     "sandbox:build": "tsc --project ./sandbox",
     "sandbox": "serve ./sandbox -l 3001 -n",

diff --git a/site/.gitignore b/site/.gitignore
@@ -17,6 +17,4 @@
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
-
-/build-storybook
+yarn-error.log*
diff --git a/site/docusaurus.config.ts b/site/docusaurus.config.ts
@@ -1,3 +1,4 @@
+import logger from '@docusaurus/logger';
 import { Config, Plugin } from '@docusaurus/types';
 import { Options as ClassicPresetOptions, ThemeConfig as ClassicPresetThemeConfig } from '@docusaurus/preset-classic';
 import { ReflectionKind } from 'typedoc';
@@ -40,8 +41,6 @@ const config: Config = {
     locales: ['en']
   },
 
-  staticDirectories: ['static', 'build-storybook'],
-
   presets: [
     [
       'classic',
@@ -81,49 +80,55 @@ const config: Config = {
 
   plugins: [
     [
-      async function storybookPlugin(context, options: { staticDir: string; storybookOptions?: any }) {
+      async function storybookPlugin(context, options: { basePath: string; storybookOptions?: any }) {
         const isProd = process.env.NODE_ENV === 'production';
+        const isBuilding = process.argv[2] === 'build';
         let storybookDevServer: any = null;
 
         return {
           name: 'storybook-plugin',
           async postBuild() {
+            logger.info('Building storybook...');
+
             await build({
               mode: 'static',
               configDir: path.join(__dirname, '..', '.storybook'),
-              outputDir: path.join(__dirname, context.outDir, 'examples'),
+              outputDir: path.join(context.outDir, options.basePath),
               ignorePreview: false,
               cache,
               ...(options?.storybookOptions ?? {})
             });
           },
           async loadContent() {
-            if (isProd) {
+            if (isProd || isBuilding) {
               return null;
             }
 
+            logger.info('Starting storybook dev server...');
+
             if (!storybookDevServer) {
               storybookDevServer = await build({
                 mode: 'dev',
                 ci: true,
                 configDir: path.join(__dirname, '..', '.storybook'),
-                outputDir: path.join(__dirname, options.staticDir, 'examples'),
+                outputDir: path.join(context.generatedFilesDir, '.storybook'),
                 ignorePreview: false,
                 cache,
                 ...(options?.storybookOptions ?? {})
               });
             }
 
-            return { address: storybookDevServer.address }
+            return { address: storybookDevServer.address };
           },
           async contentLoaded({ content, actions }) {
             actions.setGlobalData({
-              address: content?.address
+              devServerAddress: content?.address,
+              basePath: options.basePath
             });
           }
-        } as Plugin<{ address?: string}>;
+        } as Plugin<{ address?: string }>;
       },
-      { staticDir: 'build-storybook' }
+      { basePath: 'examples' }
     ],
     async function excaliburPlugin(context, options) {
       return {
@@ -200,7 +205,7 @@ const config: Config = {
           label: 'Learn'
         },
         { to: '/api', label: 'API', position: 'left' },
-        { href: '/examples', label: 'Examples', position: 'left', prependBaseUrlToHref: true },
+        { 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
@@ -12,15 +12,15 @@ const FRAME_STYLE = {
  * @prop story The story ID in the URL to navigate to
  */
 export default function Example({ 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}`;
-
+  const { devServerAddress, basePath } = usePluginData('storybook-plugin') as { devServerAddress?: string; basePath: string; };
+  const buildUrl = useBaseUrl(`/${basePath}/?nav=0&path=/docs/${story}`);
+  const devUrl = `${devServerAddress}?nav=0&path=/docs/${story}`;
+  http://localhost:3000/examples/iframe.html?args=&id=audio--playing-a-sound
   return (
     <iframe
       title="Excalibur Storybook Example"
       allowFullScreen
-      src={address ? devUrl : buildUrl}
+      src={devServerAddress ? devUrl : buildUrl}
       frameBorder={0}
       width="100%"
       height="600"