@makcbrain/storybook-builder-esbuild 1.2.2 → 1.3.0

package/dist/index.js

@@ -1,5 +1,6 @@
 import { clearDistDirectory } from './utils/clearDistDirectory.js';
 import { createEsbuildContext } from './utils/createEsbuildContext.js';
+import { createStaticServer } from './utils/createStaticServer.js';
 import { generateIframeHtml } from './utils/generateIframeHtml.js';
 import { getAbsolutePathToDistDir } from './utils/getAbsolutePathToDistDir.js';
 import { listStories } from './utils/listStories.js';
@@ -11,16 +12,11 @@ export const start = async (params) => {
     const { startTime, options, router } = params;
     await clearDistDirectory(options);
     const stories = await listStories(options);
-    ctx = await createEsbuildContext(stories, options);
+    const distDir = getAbsolutePathToDistDir(options);
+    const server = await createStaticServer(distDir);
+    ctx = await createEsbuildContext(stories, options, server.notifyReload);
     await ctx.watch();
-    const serveResult = await ctx.serve({
-        servedir: getAbsolutePathToDistDir(options),
-        port: 0, // Auto-select port
-        cors: {
-            origin: '*',
-        },
-    });
-    const esbuildServerUrl = `http://localhost:${serveResult.port}`;
+    const esbuildServerUrl = server.url;
     console.log(`[ESBuild Builder] Dev server started at ${esbuildServerUrl}`);
     router.get('/iframe.html', async (_req, res) => {
         const html = await generateIframeHtml(options, esbuildServerUrl);

package/dist/utils/createEsbuildContext.d.ts

@@ -1,3 +1,3 @@
 import * as esbuild from 'esbuild';
 import type { Options } from 'storybook/internal/types';
-export declare const createEsbuildContext: (stories: string[], options: Options) => Promise<esbuild.BuildContext>;
+export declare const createEsbuildContext: (stories: string[], options: Options, onRebuild?: () => void) => Promise<esbuild.BuildContext>;

package/dist/utils/createEsbuildContext.js

@@ -1,6 +1,6 @@
 import * as esbuild from 'esbuild';
 import { getEsbuildConfig } from './getEsbuildConfig.js';
-export const createEsbuildContext = async (stories, options) => {
-    const config = await getEsbuildConfig(stories, options);
+export const createEsbuildContext = async (stories, options, onRebuild) => {
+    const config = await getEsbuildConfig(stories, options, onRebuild);
     return esbuild.context(config);
 };

package/dist/utils/createStaticServer.d.ts

@@ -0,0 +1,7 @@
+interface StaticServer {
+    url: string;
+    notifyReload: () => void;
+    close: () => Promise<void>;
+}
+export declare const createStaticServer: (servedir: string) => Promise<StaticServer>;
+export {};

package/dist/utils/createStaticServer.js

@@ -0,0 +1,68 @@
+import { createReadStream, existsSync } from 'node:fs';
+import { createServer } from 'node:http';
+import { extname, join } from 'node:path';
+const CONTENT_TYPES = {
+    '.js': 'application/javascript',
+    '.mjs': 'application/javascript',
+    '.css': 'text/css',
+    '.json': 'application/json',
+    '.map': 'application/json',
+    '.html': 'text/html',
+    '.svg': 'image/svg+xml',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.woff': 'font/woff',
+    '.woff2': 'font/woff2',
+};
+export const createStaticServer = (servedir) => {
+    const sseClients = new Set();
+    const handleSSE = (_req, res) => {
+        res.writeHead(200, {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            Connection: 'keep-alive',
+            'Access-Control-Allow-Origin': '*',
+        });
+        sseClients.add(res);
+        res.on('close', () => sseClients.delete(res));
+    };
+    const handleFile = (req, res) => {
+        const url = new URL(req.url || '/', 'http://localhost');
+        const filePath = join(servedir, decodeURIComponent(url.pathname));
+        if (!existsSync(filePath)) {
+            res.writeHead(404, { 'Access-Control-Allow-Origin': '*' });
+            res.end('Not found');
+            return;
+        }
+        const ext = extname(filePath);
+        const contentType = CONTENT_TYPES[ext] || 'application/octet-stream';
+        res.writeHead(200, {
+            'Content-Type': contentType,
+            'Access-Control-Allow-Origin': '*',
+        });
+        createReadStream(filePath).pipe(res);
+    };
+    const server = createServer((req, res) => {
+        if (req.url === '/esbuild') {
+            handleSSE(req, res);
+        }
+        else {
+            handleFile(req, res);
+        }
+    });
+    return new Promise((resolve) => {
+        server.listen(0, () => {
+            const address = server.address();
+            const port = typeof address === 'object' && address ? address.port : 0;
+            resolve({
+                url: `http://localhost:${port}`,
+                notifyReload: () => {
+                    for (const client of sseClients) {
+                        client.write('event: change\ndata: {}\n\n');
+                    }
+                },
+                close: () => new Promise((res) => server.close(() => res())),
+            });
+        });
+    });
+};

package/dist/utils/getEsbuildConfig.d.ts

@@ -1,3 +1,3 @@
 import type { BuildOptions } from 'esbuild';
 import type { Options } from 'storybook/internal/types';
-export declare const getEsbuildConfig: (stories: string[], options: Options) => Promise<BuildOptions>;
+export declare const getEsbuildConfig: (stories: string[], options: Options, onRebuild?: () => void) => Promise<BuildOptions>;

package/dist/utils/getEsbuildConfig.js

@@ -11,7 +11,7 @@ const stringifyEnvs = (envs) => {
         return acc;
     }, {});
 };
-export const getEsbuildConfig = async (stories, options) => {
+export const getEsbuildConfig = async (stories, options, onRebuild) => {
     const { presets } = options;
     const envs = await presets.apply('env');
     const framework = await presets.apply('framework');
@@ -60,6 +60,14 @@ export const getEsbuildConfig = async (stories, options) => {
             reactDocGenPlugin(),
             getMdxPlugin({ jsx: true }),
             ...(userEsbuildConfig.plugins || []),
+            ...(onRebuild
+                ? [
+                    {
+                        name: 'rebuild-notify',
+                        setup: (build) => build.onEnd(onRebuild),
+                    },
+                ]
+                : []),
         ],
     };
     return presets.apply('esbuildFinal', config, options);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makcbrain/storybook-builder-esbuild",
-	"version": "1.2.2",
+	"version": "1.3.0",
 	"author": "Maksim Kadochnikov <makс.brain@gmail.com>",
 	"description": "Builder for Storybook with supporting esbuild",
 	"license": "MIT",