fix esm for storybook-builder

Author: bashmish

package-lock.json

@@ -64,6 +64,7 @@
     "dev-to-git": "^1.4.1",
     "eslint": "^8.1.0",
     "eslint-config-prettier": "^8.3.0",
+    "fs-extra": "^7.0.1",
     "hanbi": "^1.0.1",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",

package.json

@@ -62,7 +62,6 @@
     "es-module-lexer": "^1.2.1",
     "esbuild": "^0.19.5",
     "express": "^4.18.2",
-    "fs-extra": "^11.1.1",
     "glob-promise": "^6.0.3",
     "lodash-es": "^4.17.21",
     "path-browserify": "^1.0.1",
@@ -72,7 +71,6 @@
   },
   "devDependencies": {
     "@storybook/types": "^7.0.0",
-    "@types/fs-extra": "^11.0.1",
     "@typescript-eslint/eslint-plugin": "^5.3.0",
     "@typescript-eslint/parser": "^5.3.0",
     "conventional-changelog-cli": "^3.0.0",

packages/storybook-builder/package.json

@@ -1,8 +1,11 @@
+import { readFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
 import { normalizeStories } from '@storybook/core-common';
 import type { CoreConfig, Options } from '@storybook/types';
-import { readFile } from 'fs-extra';
 import { virtualAppFilename } from './virtual-file-names.js';
 
+const require = createRequire(import.meta.url);
+
 export type PreviewHtml = string | undefined;
 
 export async function generateIframeHtml(options: Options): Promise<string> {

packages/storybook-builder/src/generate-iframe-html.ts

@@ -1,9 +1,9 @@
 // based on https://github.com/storybookjs/storybook/blob/v7.0.9/code/lib/builder-vite/src/codegen-importfn-script.ts
 
+import * as path from 'node:path';
 import { normalizePath } from '@rollup/pluginutils';
 import { logger } from '@storybook/node-logger';
 import type { Options } from '@storybook/types';
-import * as path from 'path';
 import { listStories } from './list-stories.js';
 
 /**

packages/storybook-builder/src/generate-stories-script.ts

@@ -1,4 +1,7 @@
-import { dirname } from 'path';
+import { createRequire } from 'node:module';
+import { dirname } from 'node:path';
+
+const require = createRequire(import.meta.url);
 
 export function getNodeModuleDir(moduleName: string): string {
   return dirname(require.resolve(`${moduleName}/package.json`));

packages/storybook-builder/src/get-node-module-dir.ts

@@ -1,15 +1,15 @@
+import { cp } from 'node:fs/promises';
+import { join, parse, resolve } from 'node:path';
 import rollupPluginNodeResolve from '@rollup/plugin-node-resolve';
 import { getBuilderOptions } from '@storybook/core-common';
 import { logger } from '@storybook/node-logger';
-import { globals } from '@storybook/preview/globals';
+import { globalsNameReferenceMap } from '@storybook/preview/globals';
 import type { Builder, Options, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import { DevServerConfig, mergeConfigs, startDevServer } from '@web/dev-server';
 import type { DevServer } from '@web/dev-server-core';
 import { fromRollup } from '@web/dev-server-rollup';
 import { rollupPluginHTML } from '@web/rollup-plugin-html';
 import express from 'express';
-import * as fs from 'fs-extra';
-import { join, parse, resolve } from 'path';
 import { OutputOptions, RollupBuild, RollupOptions, rollup } from 'rollup';
 import rollupPluginExternalGlobals from 'rollup-plugin-external-globals';
 import { generateIframeHtml } from './generate-iframe-html.js';
@@ -74,7 +74,7 @@ export const start: WdsBuilder['start'] = async ({ startTime, options, router, s
       },
       wdsPluginPrebundleModules(env),
       wdsPluginStorybookBuilder(options),
-      wdsPluginExternalGlobals(globals),
+      wdsPluginExternalGlobals(globalsNameReferenceMap),
     ],
   };
 
@@ -146,7 +146,7 @@ export const build: WdsBuilder['build'] = async ({ startTime, options }) => {
       rollupPluginNodeResolve(),
       rollupPluginPrebundleModules(env),
       rollupPluginStorybookBuilder(options),
-      rollupPluginExternalGlobals(globals),
+      rollupPluginExternalGlobals(globalsNameReferenceMap),
     ],
   };
 
@@ -179,7 +179,8 @@ export const build: WdsBuilder['build'] = async ({ startTime, options }) => {
 
   const previewDirOrigin = join(getNodeModuleDir('@storybook/preview'), 'dist');
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
-  const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
+  const previewFiles = cp(previewDirOrigin, previewDirTarget, {
+    recursive: true,
     filter: src => {
       const { ext } = parse(src);
       if (ext) {

packages/storybook-builder/src/index.ts

@@ -1,9 +1,9 @@
 // based on https://github.com/storybookjs/storybook/blob/v7.0.9/code/lib/builder-vite/src/list-stories.ts
 
+import * as path from 'node:path';
 import { normalizeStories } from '@storybook/core-common';
 import type { Options } from '@storybook/types';
 import { promise as glob } from 'glob-promise';
-import * as path from 'path';
 
 export async function listStories(options: Options) {
   const slash = (await import('slash')).default; // for CJS compatibility

packages/storybook-builder/src/list-stories.ts

@@ -1,9 +1,12 @@
+import { createRequire } from 'node:module';
+import { join } from 'node:path';
 import { stringifyProcessEnvs } from '@storybook/core-common';
 import { build } from 'esbuild';
-import { join } from 'path';
 import type { Plugin } from 'rollup';
 import { getNodeModuleDir } from './get-node-module-dir.js';
 
+const require = createRequire(import.meta.url);
+
 export const PREBUNDLED_MODULES_DIR = 'node_modules/.prebundled_modules';
 
 export function rollupPluginPrebundleModules(env: Record<string, string>): Plugin {

packages/storybook-builder/src/rollup-plugin-prebundle-modules.ts

@@ -1 +1 @@
-export * from './dist/index.js';
+export * from './src/index.js';