add header to ESM outputs for faux-ESM support

storybookjs · Oct 10, 2024 · 870b1b8 · 870b1b8
1 parent d6bd4a5
commit 870b1b8
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 12 deletions.
diff --git a/code/core/scripts/prep.ts b/code/core/scripts/prep.ts
@@ -163,13 +163,13 @@ async function run() {
  merge<EsbuildContextOptions>(nodeEsbuildOptions, {
  banner: {
  js: dedent`
- import ESM_COMPAT_Module from "node:module";
- import { fileURLToPath as ESM_COMPAT_fileURLToPath } from 'node:url';
- import { dirname as ESM_COMPAT_dirname } from 'node:path';
- const __filename = ESM_COMPAT_fileURLToPath(import.meta.url);
- const __dirname = ESM_COMPAT_dirname(__filename);
- const require = ESM_COMPAT_Module.createRequire(import.meta.url);
- `,
+  import ESM_COMPAT_Module from "node:module";
+  import { fileURLToPath as ESM_COMPAT_fileURLToPath } from 'node:url';
+  import { dirname as ESM_COMPAT_dirname } from 'node:path';
+  const __filename = ESM_COMPAT_fileURLToPath(import.meta.url);
+  const __dirname = ESM_COMPAT_dirname(__filename);
+  const require = ESM_COMPAT_Module.createRequire(import.meta.url);
+  `,
  },
  entryPoints: entries
  .filter(isNode)

diff --git a/code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.ts b/code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.ts
@@ -5,7 +5,7 @@ import { runCodemod } from '@storybook/codemod';
 // eslint-disable-next-line depend/ban-dependencies
 import { glob } from 'glob';
 import picocolors from 'picocolors';
-import { prompt } from 'prompts';
+import prompts from 'prompts';
 import { dedent } from 'ts-dedent';
 
 import { updateMainConfig } from '../helpers/mainConfigFile';
@@ -121,7 +121,7 @@ export const mdxToCSF: Fix<BareMdxStoriesGlobRunOptions> = {
  ${JSON.stringify(nextStoriesEntries, null, 2)}`);
 
  if (!dryRun) {
- const { glob: globString } = await prompt({
+ const { glob: globString } = await prompts.prompt({
  type: 'text',
  name: 'glob',
  message: 'Please enter the glob for your MDX stories',

diff --git a/code/lib/cli-storybook/test/default/cli.test.cjs b/code/lib/cli-storybook/test/default/cli.test.cjs
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 const run = require('../helpers.cjs');
 

diff --git a/code/lib/cli/src/core-path.ts b/code/lib/cli/src/core-path.ts
@@ -1,7 +1,7 @@
-import ESM_COMPAT_Module from 'node:module';
+import ESM_COMPAT_ModuleA from 'node:module';
 import { dirname } from 'node:path';
 
 // @ts-expect-error (esm compat not 100% yet)
-const require = ESM_COMPAT_Module.createRequire(import.meta.url);
+const require = ESM_COMPAT_ModuleA.createRequire(import.meta.url);
 
 export const corePath = dirname(require.resolve('@storybook/core/package.json'));
diff --git a/scripts/prepare/bundle.ts b/scripts/prepare/bundle.ts
@@ -128,6 +128,20 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
  ],
  external: externals,
 
+ banner:
+ platform === 'node'
+ ? {
+ js: dedent`
+ import ESM_COMPAT_Module from "node:module";
+ import { fileURLToPath as ESM_COMPAT_fileURLToPath } from 'node:url';
+ import { dirname as ESM_COMPAT_dirname } from 'node:path';
+ const __filename = ESM_COMPAT_fileURLToPath(import.meta.url);
+ const __dirname = ESM_COMPAT_dirname(__filename);
+ const require = ESM_COMPAT_Module.createRequire(import.meta.url);
+ `,
+ }
+ : {},
+
  esbuildOptions: (c) => {
  c.conditions = ['module'];
  c.platform = platform || 'browser';