@makcbrain/storybook-builder-esbuild 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Maksim Kadochnikov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,32 @@
+# @makcbrain/storybook-builder-esbuild
+
+Storybook builder implementation using esbuild.
+
+## Description
+
+This package provides an esbuild-based builder for Storybook. It's used as the underlying build system in `@makcbrain/storybook-framework-react-esbuild`.
+
+## Features
+
+- ESM and TypeScript support
+- React JSX transform
+- MDX support
+- Story reload on file changes
+- Configurable source maps
+- Custom esbuild configuration
+
+## Installation
+
+```bash
+npm install --save-dev @makcbrain/storybook-builder-esbuild
+```
+
+## Usage
+
+This builder is automatically configured when using `@makcbrain/storybook-framework-react-esbuild`.
+
+For detailed configuration options and examples, see the [@makcbrain/storybook-framework-react-esbuild](https://www.npmjs.com/package/@makcbrain/storybook-framework-react-esbuild) documentation.
+
+## License
+
+MIT

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const DIST_DIR_NAME = "esbuild-out";

package/dist/constants.js

@@ -0,0 +1 @@
+export const DIST_DIR_NAME = 'esbuild-out';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import type { EsbuildBuilder } from './types.ts';
+export type * from './types.ts';
+export declare const bail: () => Promise<void>;
+export declare const start: EsbuildBuilder['start'];
+export declare const build: EsbuildBuilder['build'];

package/dist/index.js

@@ -0,0 +1,47 @@
+import { clearDistDirectory } from './utils/clearDistDirectory.js';
+import { createEsbuildContext } from './utils/createEsbuildContext.js';
+import { generateIframeHtml } from './utils/generateIframeHtml.js';
+import { getAbsolutePathToDistDir } from './utils/getAbsolutePathToDistDir.js';
+import { listStories } from './utils/listStories.js';
+let ctx;
+export const bail = async () => {
+    return ctx?.dispose();
+};
+export const start = async (params) => {
+    const { startTime, options, router } = params;
+    await clearDistDirectory(options);
+    const stories = await listStories(options);
+    ctx = await createEsbuildContext(stories, options);
+    await ctx.watch();
+    const serveResult = await ctx.serve({
+        servedir: getAbsolutePathToDistDir(options),
+        port: 0, // Auto-select port
+        cors: {
+            origin: '*',
+        },
+    });
+    const esbuildServerUrl = `http://localhost:${serveResult.port}`;
+    console.log(`[ESBuild Builder] Dev server started at ${esbuildServerUrl}`);
+    router.get('/iframe.html', async (_req, res) => {
+        const html = await generateIframeHtml(options, esbuildServerUrl);
+        res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.statusCode = 200;
+        res.write(html);
+        res.end();
+    });
+    return {
+        bail,
+        stats: {
+            toJson: () => {
+                return {
+                    message: 'ESBuild stats',
+                };
+            },
+        },
+        totalTime: process.hrtime(startTime),
+    };
+};
+export const build = async () => {
+    // TODO: Implement production build
+    console.log('[ESBuild Builder] Production build not yet implemented');
+};

package/dist/plugins/reactDocGenPlugin.d.ts

@@ -0,0 +1,6 @@
+import type { Plugin } from 'esbuild';
+/**
+ * Plugin for generating React component documentation for @storybook/addon-docs
+ * Uses react-docgen which supports both JavaScript and TypeScript
+ */
+export declare const reactDocGenPlugin: () => Plugin;

package/dist/plugins/reactDocGenPlugin.js

@@ -0,0 +1,65 @@
+import { readFile } from 'node:fs/promises';
+import { builtinHandlers as docGenHandlers, builtinResolvers as docGenResolver, ERROR_CODES, parse, } from 'react-docgen';
+import { actualNameHandler } from '../utils/actualNameHandler.js';
+import { getLoaderByFilePath } from '../utils/getLoaderByFilePath.js';
+const defaultHandlers = Object.values(docGenHandlers).map((handler) => handler);
+const defaultResolver = new docGenResolver.FindExportedDefinitionsResolver();
+const handlers = [...defaultHandlers, actualNameHandler];
+/**
+ * Plugin for generating React component documentation for @storybook/addon-docs
+ * Uses react-docgen which supports both JavaScript and TypeScript
+ */
+export const reactDocGenPlugin = () => {
+    return {
+        name: 'react-doc-gen',
+        setup(build) {
+            build.onLoad({ filter: /\.(mjs|jsx?|tsx?)$/, namespace: '' }, async (args) => {
+                if (args.path.includes('node_modules') || args.path.includes('.stories.')) {
+                    return null;
+                }
+                try {
+                    let fileContent = await readFile(args.path, 'utf-8');
+                    const docGenResults = parse(fileContent, {
+                        resolver: defaultResolver,
+                        handlers,
+                        filename: args.path,
+                    });
+                    if (docGenResults.length === 0) {
+                        return null;
+                    }
+                    // Inject __docgenInfo for each component
+                    for (const info of docGenResults) {
+                        const { actualName, definedInFile, ...docGenInfo } = info;
+                        // Only inject if component is defined in this file and has a name
+                        if (actualName && definedInFile === args.path) {
+                            const docGenJson = JSON.stringify(docGenInfo);
+                            fileContent = addDocGenInfo(fileContent, actualName, docGenJson);
+                        }
+                    }
+                    return {
+                        contents: fileContent,
+                        loader: getLoaderByFilePath(args.path),
+                    };
+                }
+                catch (error) {
+                    if (typeof error === 'object' &&
+                        error !== null &&
+                        'code' in error &&
+                        error.code !== ERROR_CODES.MISSING_DEFINITION) {
+                        console.warn('Error parsing documentation:', error);
+                    }
+                    return null;
+                }
+            });
+        },
+    };
+};
+function addDocGenInfo(fileContent, actualName, docGenJson) {
+    fileContent += `
+try {
+    ${actualName}.__docgenInfo=${docGenJson}
+} catch (error) {
+    console.warn('Error setting __docgenInfo:', error)
+};`;
+    return fileContent;
+}

package/dist/plugins/virtualModulesPlugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'esbuild';
+import type { Options } from 'storybook/internal/types';
+export declare const virtualModulesPlugin: (options: Options) => Plugin;

package/dist/plugins/virtualModulesPlugin.js

@@ -0,0 +1,36 @@
+import { generateAppEntryCode } from '../utils/generateAppEntryCode.js';
+import { generateSetupCode } from '../utils/generateSetupCode.js';
+export const virtualModulesPlugin = (options) => {
+    return {
+        name: 'virtual-modules',
+        setup(build) {
+            build.onResolve({ filter: /^virtualSetup\.js$/ }, () => ({
+                path: 'virtualSetup.js',
+                namespace: 'virtual',
+            }));
+            build.onResolve({ filter: /^virtualApp\.js$/ }, () => ({
+                path: 'virtualApp.js',
+                namespace: 'virtual',
+            }));
+            build.onLoad({ filter: /.*/, namespace: 'virtual' }, async (args) => {
+                if (args.path === 'virtualSetup.js') {
+                    const code = generateSetupCode();
+                    return {
+                        contents: code,
+                        loader: 'js',
+                        resolveDir: options.configDir,
+                    };
+                }
+                if (args.path === 'virtualApp.js') {
+                    const code = await generateAppEntryCode(options);
+                    return {
+                        contents: code,
+                        loader: 'js',
+                        resolveDir: options.configDir,
+                    };
+                }
+                return null;
+            });
+        },
+    };
+};

package/dist/types.d.ts

@@ -0,0 +1,21 @@
+import type { BuildOptions } from 'esbuild';
+import type { Builder, Options, Stats } from 'storybook/internal/types';
+type EsbuildStats = Stats;
+export type EsbuildBuilder = Builder<BuildOptions, EsbuildStats>;
+export type EsbuildFinal = (config: BuildOptions, options: Options) => BuildOptions | Promise<BuildOptions>;
+export type StorybookConfigEsbuild = {
+    esbuildFinal?: EsbuildFinal;
+};
+export type GetEsbuildConfigProps = {
+    isProduction: boolean;
+};
+export type BuilderOptions = {
+    /**
+     * The easiest and recommended way to provide the esbuild config for your project.
+     * The builder will add a few configuration options over your configuration,
+     * and it should work out of the box.
+     * For some special cases you can use the esbuildFinal property at the top-level of configuration.
+     */
+    esbuildConfig?: BuildOptions | ((props: GetEsbuildConfigProps) => BuildOptions | Promise<BuildOptions>);
+};
+export {};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/actualNameHandler.d.ts

@@ -0,0 +1,13 @@
+/**
+ * This is heavily based on the react-docgen `displayNameHandler`
+ * (https://github.com/reactjs/react-docgen/blob/26c90c0dd105bf83499a83826f2a6ff7a724620d/src/handlers/displayNameHandler.ts)
+ * but instead defines an `actualName` property on the generated docs that is taken first from the
+ * component's actual name. This addresses an issue where the name that the generated docs are
+ * stored under is incorrectly named with the `displayName` and not the component's actual name.
+ *
+ * This is inspired by `actualNameHandler` from
+ * https://github.com/storybookjs/babel-plugin-react-docgen, but is modified directly from
+ * displayNameHandler, using the same approach as babel-plugin-react-docgen.
+ */
+import type { Handler } from 'react-docgen';
+export declare const actualNameHandler: Handler;

package/dist/utils/actualNameHandler.js

@@ -0,0 +1,30 @@
+import { utils } from 'react-docgen';
+const { getNameOrValue, isReactForwardRefCall } = utils;
+export const actualNameHandler = function actualNameHandler(documentation, componentDefinition) {
+    documentation.set('definedInFile', componentDefinition.hub.file.opts.filename);
+    if ((componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) &&
+        componentDefinition.has('id')) {
+        documentation.set('actualName', getNameOrValue(componentDefinition.get('id')));
+    }
+    else if (componentDefinition.isArrowFunctionExpression() ||
+        componentDefinition.isFunctionExpression() ||
+        isReactForwardRefCall(componentDefinition)) {
+        let currentPath = componentDefinition;
+        while (currentPath.parentPath) {
+            if (currentPath.parentPath.isVariableDeclarator()) {
+                documentation.set('actualName', getNameOrValue(currentPath.parentPath.get('id')));
+                return;
+            }
+            if (currentPath.parentPath.isAssignmentExpression()) {
+                const leftPath = currentPath.parentPath.get('left');
+                if (leftPath.isIdentifier() || leftPath.isLiteral()) {
+                    documentation.set('actualName', getNameOrValue(leftPath));
+                    return;
+                }
+            }
+            currentPath = currentPath.parentPath;
+        }
+        // Could not find an actual name
+        documentation.set('actualName', '');
+    }
+};

package/dist/utils/clearDistDirectory.d.ts

@@ -0,0 +1,2 @@
+import type { Options } from 'storybook/internal/types';
+export declare const clearDistDirectory: (options: Options) => Promise<void>;

package/dist/utils/clearDistDirectory.js

@@ -0,0 +1,6 @@
+import { rm } from 'node:fs/promises';
+import { getAbsolutePathToDistDir } from './getAbsolutePathToDistDir.js';
+export const clearDistDirectory = async (options) => {
+    const dirPath = getAbsolutePathToDistDir(options);
+    await rm(dirPath, { recursive: true, force: true });
+};

package/dist/utils/createEsbuildContext.d.ts

@@ -0,0 +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>;

package/dist/utils/createEsbuildContext.js

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

package/dist/utils/generateAppEntryCode.d.ts

@@ -0,0 +1,5 @@
+import type { Options } from 'storybook/internal/types';
+/**
+ * Generate main entry point
+ */
+export declare const generateAppEntryCode: (options: Options) => Promise<string>;

package/dist/utils/generateAppEntryCode.js

@@ -0,0 +1,94 @@
+import path from 'node:path';
+import dedent from 'dedent';
+import { loadPreviewOrConfigFile } from 'storybook/internal/common';
+import { listStories } from './listStories.js';
+const isAnnotationObject = (value) => {
+    return typeof value === 'object' && value !== null && 'absolute' in value;
+};
+/**
+ * Generate main entry point
+ */
+export const generateAppEntryCode = async (options) => {
+    const { presets, configDir } = options;
+    const stories = await listStories(options);
+    // Get preview annotations (.storybook/preview.ts + addons)
+    const previewAnnotations = await presets.apply('previewAnnotations', [], options);
+    const previewFile = loadPreviewOrConfigFile({ configDir });
+    if (previewFile) {
+        previewAnnotations.push(previewFile);
+    }
+    const annotationImports = previewAnnotations
+        .map((annotation, index) => {
+        const path = isAnnotationObject(annotation) ? annotation.absolute : annotation;
+        return `import * as previewAnnotation${index} from '${path}';`;
+    })
+        .join('\n');
+    const configs = previewAnnotations.map((_, index) => `previewAnnotation${index}`).join(', ');
+    const storiesImports = stories
+        .map((story) => {
+        const relative = path.relative(process.cwd(), story);
+        const key = story.startsWith('./') ? relative : `./${relative}`;
+        // Get CSS file path by replacing story extension with .css
+        const cssPath = key.replace(/\.([jt]sx?|mdx)$/, '.css');
+        return `'${key}': () => {
+				const cssUrl = new URL('${cssPath}', import.meta.url);
+
+				if (!document.querySelector('link[data-path="${cssPath}"]')) {
+					const link = document.createElement('link');
+					link.rel = 'stylesheet';
+					link.href = cssUrl.href;
+					link.setAttribute('data-path', '${cssPath}');
+					document.head.appendChild(link);
+				}
+
+				return import('${story}');
+			}`;
+    })
+        .join(',\n    ');
+    return dedent `
+        import { createBrowserChannel } from 'storybook/internal/channels';
+        import { addons } from 'storybook/preview-api';
+
+		const channel = createBrowserChannel({ page: 'preview' });
+		addons.setChannel(channel);
+		window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
+
+		if (window.CONFIG_TYPE === 'DEVELOPMENT') {
+		  window.__STORYBOOK_SERVER_CHANNEL__ = channel;
+		}
+
+		import { composeConfigs, PreviewWeb } from 'storybook/preview-api';
+
+		// Import preview annotations
+		${annotationImports}
+
+		// Compose configs
+		const getProjectAnnotations = () => {
+		  return composeConfigs([${configs}]);
+		};
+
+		window.__STORYBOOK_IMPORT_FN__ = (function() {
+		  const importers = {
+		    ${storiesImports}
+		  };
+
+		  return async function importFn(path) {
+		    const importer = importers[path];
+
+		    if (!importer) {
+		      throw new Error('Story not found: ' + path + '. Available stories: ' + Object.keys(importers).join(', '));
+		    }
+
+		    return await importer();
+		  };
+		})();
+
+		// Initialize PreviewWeb
+		window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(
+		  window.__STORYBOOK_IMPORT_FN__,
+		  getProjectAnnotations
+		);
+
+		window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore;
+	`;
+};

package/dist/utils/generateIframeHtml.d.ts

@@ -0,0 +1,2 @@
+import type { Options } from 'storybook/internal/types';
+export declare const generateIframeHtml: (options: Options, esbuildServerUrl: string) => Promise<string>;

package/dist/utils/generateIframeHtml.js

@@ -0,0 +1,47 @@
+import dedent from 'dedent';
+export const generateIframeHtml = async (options, esbuildServerUrl) => {
+    const { configType, presets } = options;
+    const [headHtmlSnippet, bodyHtmlSnippet] = await Promise.all([
+        presets.apply('previewHead'),
+        presets.apply('previewBody'),
+    ]);
+    return dedent `
+		<!DOCTYPE html>
+		<html lang="en">
+		<head>
+		  <meta charset="utf-8" />
+		  <title>Storybook</title>
+		  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+		  <script>
+		    // Compatibility
+		    window.module = undefined;
+		    window.global = window;
+		  </script>
+		  ${headHtmlSnippet || ''}
+		</head>
+		<body>
+		  ${bodyHtmlSnippet || ''}
+		  <div id="storybook-root"></div>
+		  <div id="storybook-docs"></div>
+
+		  <!-- Setup Module - must be loaded first -->
+		  <script type="module" src="${esbuildServerUrl}/virtualSetup.js"></script>
+		  <!-- Main Entry Point -->
+		  <script type="module" src="${esbuildServerUrl}/virtualApp.js"></script>
+		  <!-- Live Reload (Development Only) -->
+		  <script>
+		    if (${configType === 'DEVELOPMENT'}) {
+              setTimeout(() => {
+                // Timeout to skip first event to prevent reloading at the beginning
+                new EventSource('${esbuildServerUrl}/esbuild').addEventListener('change', () => {
+                  console.log('[ESBuild Builder] File changed, reloading...');
+                  location.reload();
+                });
+              }, 1000);
+		    }
+		  </script>
+		</body>
+		</html>
+	`;
+};

package/dist/utils/generateSetupCode.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generates setup module - must be loaded first to set up Storybook globals
+ */
+export declare const generateSetupCode: () => string;

package/dist/utils/generateSetupCode.js

@@ -0,0 +1,11 @@
+import dedent from 'dedent';
+/**
+ * Generates setup module - must be loaded first to set up Storybook globals
+ */
+export const generateSetupCode = () => {
+    return dedent `
+		import { setup } from 'storybook/internal/preview/runtime';
+
+		setup();
+	`;
+};

package/dist/utils/getAbsolutePathToDistDir.d.ts

@@ -0,0 +1,2 @@
+import type { Options } from 'storybook/internal/types';
+export declare const getAbsolutePathToDistDir: (options: Options) => string;

package/dist/utils/getAbsolutePathToDistDir.js

@@ -0,0 +1,5 @@
+import { join } from 'node:path';
+import { DIST_DIR_NAME } from '../constants.js';
+export const getAbsolutePathToDistDir = (options) => {
+    return join(options.configDir, DIST_DIR_NAME);
+};

package/dist/utils/getEsbuildConfig.d.ts

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

package/dist/utils/getEsbuildConfig.js

@@ -0,0 +1,66 @@
+import { globalExternals } from '@fal-works/esbuild-plugin-global-externals';
+import getMdxPlugin from '@mdx-js/esbuild';
+import { globalsNameReferenceMap } from 'storybook/internal/preview/globals';
+import { reactDocGenPlugin } from '../plugins/reactDocGenPlugin.js';
+import { virtualModulesPlugin } from '../plugins/virtualModulesPlugin.js';
+import { getAbsolutePathToDistDir } from './getAbsolutePathToDistDir.js';
+import { getGlobalExternalsMapping } from './getGlobalExternalsMapping.js';
+const stringifyEnvs = (envs) => {
+    return Object.entries(envs).reduce((acc, [key, value]) => {
+        acc[`process.env.${key}`] = JSON.stringify(value);
+        return acc;
+    }, {});
+};
+export const getEsbuildConfig = async (stories, options) => {
+    const { presets } = options;
+    const envs = await presets.apply('env');
+    const frameworkOptions = await presets.apply('framework');
+    const builderOptions = frameworkOptions?.builder;
+    let userEsbuildConfig = {};
+    if (typeof builderOptions?.esbuildConfig === 'object') {
+        userEsbuildConfig = builderOptions?.esbuildConfig;
+    }
+    else if (typeof builderOptions?.esbuildConfig === 'function') {
+        userEsbuildConfig = await builderOptions.esbuildConfig({
+            isProduction: options.configType === 'PRODUCTION',
+        });
+    }
+    const config = {
+        loader: {
+            '.png': 'file',
+            '.jpg': 'file',
+            '.svg': 'file',
+            '.woff': 'file',
+            '.woff2': 'file',
+        },
+        resolveExtensions: ['.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'],
+        sourcemap: true,
+        target: ['esnext'],
+        ...userEsbuildConfig,
+        entryPoints: [
+            'virtualSetup.js', // Setup module - must be loaded first
+            'virtualApp.js', // Main entry point
+            ...stories, // All .stories files
+        ],
+        outdir: getAbsolutePathToDistDir(options),
+        outbase: process.cwd(),
+        bundle: true,
+        splitting: true,
+        format: 'esm',
+        define: {
+            'process.env.NODE_ENV': JSON.stringify(options.configType === 'PRODUCTION' ? 'production' : 'development'),
+            ...stringifyEnvs(envs),
+            ...userEsbuildConfig.define,
+        },
+        plugins: [
+            // Replace Storybook runtime imports with global variables
+            // This maps imports like 'storybook/preview-api' to window.__STORYBOOK_MODULE_PREVIEW_API__
+            globalExternals(getGlobalExternalsMapping(globalsNameReferenceMap)),
+            virtualModulesPlugin(options),
+            reactDocGenPlugin(),
+            getMdxPlugin({ jsx: true }),
+            ...(userEsbuildConfig.plugins || []),
+        ],
+    };
+    return presets.apply('esbuildFinal', config, options);
+};

package/dist/utils/getGlobalExternalsMapping.d.ts

@@ -0,0 +1,4 @@
+export declare const getGlobalExternalsMapping: (globalsMap: Record<string, string>) => Record<string, {
+    varName: string;
+    type: "cjs";
+}>;

package/dist/utils/getGlobalExternalsMapping.js

@@ -0,0 +1,9 @@
+export const getGlobalExternalsMapping = (globalsMap) => {
+    return Object.entries(globalsMap).reduce((acc, [moduleName, globalName]) => {
+        acc[moduleName] = {
+            varName: globalName,
+            type: 'cjs',
+        };
+        return acc;
+    }, {});
+};

package/dist/utils/getLoaderByFilePath.d.ts

@@ -0,0 +1,2 @@
+import type { Loader } from 'esbuild';
+export declare const getLoaderByFilePath: (path: string) => Loader | undefined;

package/dist/utils/getLoaderByFilePath.js

@@ -0,0 +1,15 @@
+export const getLoaderByFilePath = (path) => {
+    switch (true) {
+        case path.endsWith('.jsx'):
+            return 'jsx';
+        case path.endsWith('.js'):
+        case path.endsWith('.mjs'):
+            return 'js';
+        case path.endsWith('.tsx'):
+            return 'tsx';
+        case path.endsWith('.ts'):
+            return 'ts';
+        default:
+            return undefined;
+    }
+};

package/dist/utils/listStories.d.ts

@@ -0,0 +1,5 @@
+import type { Options } from 'storybook/internal/types';
+/**
+ * Returns absolute paths to stories
+ */
+export declare const listStories: (options: Options) => Promise<string[]>;

package/dist/utils/listStories.js

@@ -0,0 +1,26 @@
+import { isAbsolute, join, resolve } from 'node:path';
+import { glob } from 'glob';
+import slash from 'slash';
+import { commonGlobOptions, normalizeStories } from 'storybook/internal/common';
+/**
+ * Returns absolute paths to stories
+ */
+export const listStories = async (options) => {
+    const storiesGlobs = await options.presets.apply('stories', [], options);
+    const normalizedStories = normalizeStories(storiesGlobs, {
+        configDir: options.configDir,
+        workingDir: process.cwd(),
+    });
+    return (await Promise.all(normalizedStories.map(async ({ directory, files }) => {
+        const absoluteDirectory = isAbsolute(directory)
+            ? directory
+            : resolve(process.cwd(), directory);
+        const absolutePattern = join(absoluteDirectory, files);
+        return glob(slash(absolutePattern), {
+            ...commonGlobOptions(absolutePattern),
+            follow: true,
+        });
+    })))
+        .flat()
+        .sort();
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+	"name": "@makcbrain/storybook-builder-esbuild",
+	"version": "1.0.0",
+	"author": "Maksim Kadochnikov <makс.brain@gmail.com>",
+	"description": "Builder for Storybook with supporting esbuild",
+	"license": "MIT",
+	"type": "module",
+	"keywords": [
+		"storybook",
+		"esbuild",
+		"builder",
+		"react"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/makcbrain/storybook-esbuild.git",
+		"directory": "packages/builder-esbuild"
+	},
+	"bugs": {
+		"url": "https://github.com/makcbrain/storybook-esbuild/issues"
+	},
+	"homepage": "https://github.com/makcbrain/storybook-esbuild#readme",
+	"publishConfig": {
+		"access": "public"
+	},
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"files": [
+		"dist",
+		"assets",
+		"LICENSE",
+		"package.json"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"scripts": {
+		"build": "rm -rf dist && bunx tsc",
+		"prepublishOnly": "(cd ../../ && bun run precommit) && bun run build"
+	},
+	"dependencies": {
+		"@fal-works/esbuild-plugin-global-externals": "2.1.2",
+		"@mdx-js/esbuild": "3.1.1",
+		"dedent": "1.7.0",
+		"glob": "11.0.3",
+		"react-docgen": "8.0.2",
+		"slash": "5.1.0"
+	}
+}