Merge pull request #22247 from storybookjs/norbert/bundle-manager-to-js

Core: Rename manager UI mjs to js
storybookjs · Apr 25, 2023 · 46e914d · 46e914d
2 parents 386c23b + 1bec507
commit 46e914d
Show file tree

Hide file tree

Showing 18 changed files with 307 additions and 252 deletions.
diff --git a/code/lib/builder-manager/src/index.ts b/code/lib/builder-manager/src/index.ts
@@ -50,7 +50,7 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
     write: false,
     ignoreAnnotations: true,
     resolveExtensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
-    outExtension: { '.js': '.mjs' },
+    outExtension: { '.js': '.js' },
     loader: {
       '.js': 'jsx',
       '.png': 'dataurl',
@@ -235,7 +235,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
     filter: (src) => {
       const { ext } = parse(src);
       if (ext) {
-        return ext === '.mjs';
+        return ext === '.js';
       }
       return true;
     },

diff --git a/code/lib/builder-manager/src/utils/files.test.ts b/code/lib/builder-manager/src/utils/files.test.ts
@@ -11,19 +11,19 @@ test('sanitizePath', () => {
   const text = 'demo text';
   const file = {
     path: isWindows
-      ? 'C:\\Users\\username\\Projects\\projectname\\storybook\\node_modules\\@storybook\\addon-x+y\\dist\\manager.mjs'
-      : '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs',
+      ? 'C:\\Users\\username\\Projects\\projectname\\storybook\\node_modules\\@storybook\\addon-x+y\\dist\\manager.js'
+      : '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.js',
     contents: Uint8Array.from(Array.from(text).map((letter) => letter.charCodeAt(0))),
     text,
   };
   const { location, url } = sanitizePath(file, addonsDir);
 
   expect(location).toEqual(
     isWindows
-      ? 'C:\\Users\\username\\Projects\\projectname\\storybook\\node_modules\\@storybook\\addon-x+y\\dist\\manager.mjs'
-      : '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs'
+      ? 'C:\\Users\\username\\Projects\\projectname\\storybook\\node_modules\\@storybook\\addon-x+y\\dist\\manager.js'
+      : '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.js'
   );
   expect(url).toMatchInlineSnapshot(
-    `"./sb-addons/node_modules/%40storybook/addon-x%2By/dist/manager.mjs"`
+    `"./sb-addons/node_modules/%40storybook/addon-x%2By/dist/manager.js"`
   );
 });
diff --git a/code/lib/builder-manager/src/utils/files.ts b/code/lib/builder-manager/src/utils/files.ts
@@ -19,7 +19,7 @@ export async function readOrderedFiles(
     }) || []
   );
 
-  const jsFiles = files.filter((file) => file.endsWith('.mjs'));
+  const jsFiles = files.filter((file) => file.endsWith('.js'));
   const cssFiles = files.filter((file) => file.endsWith('.css'));
   return { cssFiles, jsFiles };
 }

diff --git a/code/lib/builder-manager/src/utils/managerEntries.ts b/code/lib/builder-manager/src/utils/managerEntries.ts
@@ -42,7 +42,7 @@ export async function wrapManagerEntries(entrypoints: string[]) {
       const base = relative(process.cwd(), dir);
       const location = join(
         cacheLocation,
-        sanitizeFinal(join(`${sanitizeBase(base)}-${i}`, `${sanitizeBase(name)}-bundle.mjs`))
+        sanitizeFinal(join(`${sanitizeBase(base)}-${i}`, `${sanitizeBase(name)}-bundle.js`))
       );
 
       await fs.ensureFile(location);

diff --git a/code/lib/builder-manager/templates/template.ejs b/code/lib/builder-manager/templates/template.ejs
@@ -27,7 +27,7 @@
     />
     <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
 
-    <link href="./sb-manager/runtime.mjs" rel="modulepreload" />
+    <link href="./sb-manager/runtime.js" rel="modulepreload" />
 
     <% files.js.forEach(file => { %>
     <link href="<%= file %>" rel="modulepreload" />
@@ -57,13 +57,13 @@
     <% } %>
 
     <script type="module">
-      import './sb-manager/runtime.mjs';
+      import './sb-manager/runtime.js';
 
       <% files.js.forEach(file => { %>
       import '<%= file %>';
       <% }); %>
     </script>
 
-    <link href="./sb-preview/runtime.mjs" rel="prefetch" as="script" />
+    <link href="./sb-preview/runtime.js" rel="prefetch" as="script" />
   </body>
 </html>
diff --git a/code/lib/builder-vite/input/iframe.html b/code/lib/builder-vite/input/iframe.html
@@ -34,7 +34,7 @@
   <!-- [BODY HTML SNIPPET HERE] -->
   <div id="storybook-root"></div>
   <div id="storybook-docs"></div>
-  <script type="module" src="./sb-preview/runtime.mjs"></script>
+  <script type="module" src="./sb-preview/runtime.js"></script>
   <script type="module" src="/virtual:/@storybook/builder-vite/vite-app.js"></script>
 </body>
 

diff --git a/code/lib/builder-vite/src/build.ts b/code/lib/builder-vite/src/build.ts
@@ -15,7 +15,7 @@ export async function build(options: Options) {
       sourcemap: true,
       rollupOptions: {
         // Do not try to bundle the storybook runtime, it is copied into the output dir after the build.
-        external: ['./sb-preview/runtime.mjs'],
+        external: ['./sb-preview/runtime.js'],
       },
     },
   }).build;

diff --git a/code/lib/builder-vite/src/index.ts b/code/lib/builder-vite/src/index.ts
@@ -92,7 +92,7 @@ export const build: ViteBuilder['build'] = async ({ options }) => {
     filter: (src) => {
       const { ext } = parse(src);
       if (ext) {
-        return ext === '.mjs';
+        return ext === '.js';
       }
       return true;
     },

diff --git a/code/lib/builder-vite/src/plugins/external-globals-plugin.ts b/code/lib/builder-vite/src/plugins/external-globals-plugin.ts
@@ -17,8 +17,8 @@ const replacementMap = new Map([
 ]);
 
 /**
- * This plugin swaps out imports of pre-bundled storybook preview modules for destructures from global
- * variables that are added in runtime.mjs.
+ * This plugin swaps out imports of pre-bundled storybook preview modules for destructured from global
+ * variables that are added in runtime.js.
  *
  * For instance:
  *

diff --git a/code/lib/builder-webpack5/src/index.ts b/code/lib/builder-webpack5/src/index.ts
@@ -296,7 +296,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
     filter: (src) => {
       const { ext } = parse(src);
       if (ext) {
-        return ext === '.mjs';
+        return ext === '.js';
       }
       return true;
     },

diff --git a/code/lib/builder-webpack5/templates/preview.ejs b/code/lib/builder-webpack5/templates/preview.ejs
@@ -44,7 +44,7 @@
     </script>
     <% } %>
     <script type="module">
-      import './sb-preview/runtime.mjs';
+      import './sb-preview/runtime.js';
 
       <% htmlWebpackPlugin.files.js.forEach(file => { %>
       import './<%= file %>';

diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json
@@ -22,19 +22,17 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "import": "./dist/runtime.mjs",
-      "require": "./dist/runtime.js",
+      "import": "./dist/runtime.js",
       "types": "./dist/runtime.d.ts"
     },
     "./globals": {
-      "import": "./dist/globals.mjs",
       "require": "./dist/globals.js",
       "types": "./dist/globals.d.ts"
     },
     "./package.json": "./package.json"
   },
   "main": "dist/runtime.js",
-  "module": "dist/runtime.mjs",
+  "module": "dist/runtime.js",
   "types": "dist/runtime.d.ts",
   "typesVersions": {
     "*": {
@@ -54,7 +52,7 @@
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "../../../scripts/prepare/bundle.ts"
+    "prep": "../../../scripts/prepare/esm-bundle.ts"
   },
   "devDependencies": {
     "@storybook/channel-postmessage": "7.1.0-alpha.8",
@@ -69,8 +67,10 @@
     "access": "public"
   },
   "bundler": {
-    "entries": [
-      "./src/runtime.ts",
+    "browserEntries": [
+      "./src/runtime.ts"
+    ],
+    "nodeEntries": [
       "./src/globals.ts"
     ]
   },

diff --git a/code/package.json b/code/package.json
@@ -259,8 +259,7 @@
     "util": "^0.12.4",
     "vite": "^4.0.0",
     "vite-plugin-turbosnap": "^1.0.1",
-    "wait-on": "^5.2.1",
-    "zx": "^7.0.3"
+    "wait-on": "^5.2.1"
   },
   "dependenciesMeta": {
     "ejs": {

diff --git a/code/ui/components/src/ErrorFormatter/ErrorFormatter.stories.tsx b/code/ui/components/src/ErrorFormatter/ErrorFormatter.stories.tsx
@@ -22,15 +22,15 @@ type Story = StoryObj<typeof meta>;
 const chromeError = new Error('Rendering Problem');
 chromeError.stack = `Error: Rendering problem
   at render (http://localhost:6006/blocks/src/examples/Button.stories.tsx?t=1677124831161:147:11)
-  at undecoratedStoryFn (http://localhost:6006/sb-preview/runtime.mjs:8255:38)
-  at http://localhost:6006/sb-preview/runtime.mjs:7286:21
-  at http://localhost:6006/sb-preview/runtime.mjs:8225:12
+  at undecoratedStoryFn (http://localhost:6006/sb-preview/runtime.js:8255:38)
+  at http://localhost:6006/sb-preview/runtime.js:7286:21
+  at http://localhost:6006/sb-preview/runtime.js:8225:12
   at jsxDecorator (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/@storybook_react_preview.js?v=0fc15c2d:1892:17)
-  at http://localhost:6006/sb-preview/runtime.mjs:7286:21
-  at http://localhost:6006/sb-preview/runtime.mjs:8200:23
-  at http://localhost:6006/sb-preview/runtime.mjs:8225:12
+  at http://localhost:6006/sb-preview/runtime.js:7286:21
+  at http://localhost:6006/sb-preview/runtime.js:8200:23
+  at http://localhost:6006/sb-preview/runtime.js:8225:12
   at wrapper (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/@storybook_addon-links_preview.js?v=0fc15c2d:66:12)
-  at http://localhost:6006/sb-preview/runtime.mjs:11942:12`;
+  at http://localhost:6006/sb-preview/runtime.js:11942:12`;
 export const Chrome: Story = {
   args: {
     error: chromeError,
@@ -39,14 +39,14 @@ export const Chrome: Story = {
 
 const safariError = new Error('Rendering Problem');
 safariError.stack = dedent`render@http://localhost:6006/blocks/src/examples/Button.stories.tsx?t=1677211545729:147:26
-  @http://localhost:6006/sb-preview/runtime.mjs:7:17017
+  @http://localhost:6006/sb-preview/runtime.js:7:17017
   jsxDecorator@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/@storybook_react_preview.js?v=0fc15c2d:1469:22
-  @http://localhost:6006/sb-preview/runtime.mjs:7:17017
-  @http://localhost:6006/sb-preview/runtime.mjs:7:17017
-  @http://localhost:6006/sb-preview/runtime.mjs:7:17017
-  @http://localhost:6006/sb-preview/runtime.mjs:7:17017
-  @http://localhost:6006/sb-preview/runtime.mjs:7:17017
-  @http://localhost:6006/sb-preview/runtime.mjs:7:17017
+  @http://localhost:6006/sb-preview/runtime.js:7:17017
+  @http://localhost:6006/sb-preview/runtime.js:7:17017
+  @http://localhost:6006/sb-preview/runtime.js:7:17017
+  @http://localhost:6006/sb-preview/runtime.js:7:17017
+  @http://localhost:6006/sb-preview/runtime.js:7:17017
+  @http://localhost:6006/sb-preview/runtime.js:7:17017
   renderWithHooks@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-DEJXHLHT.js?v=0fc15c2d:11346:35
   mountIndeterminateComponent@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-DEJXHLHT.js?v=0fc15c2d:13419:36
   callCallback2@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-DEJXHLHT.js?v=0fc15c2d:1079:27
@@ -77,35 +77,35 @@ export const Safari: Story = {
 
 const firefoxError = new Error('Rendering Problem');
 firefoxError.stack = dedent`render@http://localhost:6006/blocks/src/examples/Button.stories.tsx?t=1677211545729:147:17
-  undecoratedStoryFn@http://localhost:6006/sb-preview/runtime.mjs:34:2794
-  hookify/<@http://localhost:6006/sb-preview/runtime.mjs:7:17017
-  defaultDecorateStory/bindWithContext/<@http://localhost:6006/sb-preview/runtime.mjs:34:1915
+  undecoratedStoryFn@http://localhost:6006/sb-preview/runtime.js:34:2794
+  hookify/<@http://localhost:6006/sb-preview/runtime.js:7:17017
+  defaultDecorateStory/bindWithContext/<@http://localhost:6006/sb-preview/runtime.js:34:1915
   jsxDecorator@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/@storybook_react_preview.js?v=0fc15c2d:1469:15
-  hookify/<@http://localhost:6006/sb-preview/runtime.mjs:7:17017
-  decorateStory/<@http://localhost:6006/sb-preview/runtime.mjs:34:1463
-  defaultDecorateStory/bindWithContext/<@http://localhost:6006/sb-preview/runtime.mjs:34:1915
+  hookify/<@http://localhost:6006/sb-preview/runtime.js:7:17017
+  decorateStory/<@http://localhost:6006/sb-preview/runtime.js:34:1463
+  defaultDecorateStory/bindWithContext/<@http://localhost:6006/sb-preview/runtime.js:34:1915
   wrapper@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/@storybook_addon-links_preview.js?v=0fc15c2d:43:225
-  makeDecorator/decorator/<@http://localhost:6006/sb-preview/runtime.mjs:93:3440
-  makeDecorator/<@http://localhost:6006/sb-preview/runtime.mjs:93:3553
-  hookify/<@http://localhost:6006/sb-preview/runtime.mjs:7:17017
-  decorateStory/<@http://localhost:6006/sb-preview/runtime.mjs:34:1463
-  defaultDecorateStory/bindWithContext/<@http://localhost:6006/sb-preview/runtime.mjs:34:1915
+  makeDecorator/decorator/<@http://localhost:6006/sb-preview/runtime.js:93:3440
+  makeDecorator/<@http://localhost:6006/sb-preview/runtime.js:93:3553
+  hookify/<@http://localhost:6006/sb-preview/runtime.js:7:17017
+  decorateStory/<@http://localhost:6006/sb-preview/runtime.js:34:1463
+  defaultDecorateStory/bindWithContext/<@http://localhost:6006/sb-preview/runtime.js:34:1915
   withGrid@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/@storybook_addon-essentials_backgrounds_preview.js?v=0fc15c2d:116:40
-  hookify/<@http://localhost:6006/sb-preview/runtime.mjs:7:17017
-  decorateStory/<@http://localhost:6006/sb-preview/runtime.mjs:34:1463
-  defaultDecorateStory/bindWithContext/<@http://localhost:6006/sb-preview/runtime.mjs:34:1915
+  hookify/<@http://localhost:6006/sb-preview/runtime.js:7:17017
+  decorateStory/<@http://localhost:6006/sb-preview/runtime.js:34:1463
+  defaultDecorateStory/bindWithContext/<@http://localhost:6006/sb-preview/runtime.js:34:1915
   withBackground@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/@storybook_addon-essentials_backgrounds_preview.js?v=0fc15c2d:91:46
-  hookify/<@http://localhost:6006/sb-preview/runtime.mjs:7:17017
-  decorateStory/<@http://localhost:6006/sb-preview/runtime.mjs:34:1463
-  defaultDecorateStory/bindWithContext/<@http://localhost:6006/sb-preview/runtime.mjs:34:1915
+  hookify/<@http://localhost:6006/sb-preview/runtime.js:7:17017
+  decorateStory/<@http://localhost:6006/sb-preview/runtime.js:34:1463
+  defaultDecorateStory/bindWithContext/<@http://localhost:6006/sb-preview/runtime.js:34:1915
   withMeasure@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/@storybook_addon-essentials_measure_preview.js?v=0fc15c2d:201:25
-  hookify/<@http://localhost:6006/sb-preview/runtime.mjs:7:17017
-  decorateStory/<@http://localhost:6006/sb-preview/runtime.mjs:34:1463
-  defaultDecorateStory/bindWithContext/<@http://localhost:6006/sb-preview/runtime.mjs:34:1915
+  hookify/<@http://localhost:6006/sb-preview/runtime.js:7:17017
+  decorateStory/<@http://localhost:6006/sb-preview/runtime.js:34:1463
+  defaultDecorateStory/bindWithContext/<@http://localhost:6006/sb-preview/runtime.js:34:1915
   withOutline@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/@storybook_addon-essentials_outline_preview.js?v=0fc15c2d:443:43
-  hookify/<@http://localhost:6006/sb-preview/runtime.mjs:7:17017
-  decorateStory/<@http://localhost:6006/sb-preview/runtime.mjs:34:1463
-  defaultDecorateStory/bindWithContext/<@http://localhost:6006/sb-preview/runtime.mjs:34:1915
+  hookify/<@http://localhost:6006/sb-preview/runtime.js:7:17017
+  decorateStory/<@http://localhost:6006/sb-preview/runtime.js:34:1463
+  defaultDecorateStory/bindWithContext/<@http://localhost:6006/sb-preview/runtime.js:34:1915
   renderWithHooks@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-DEJXHLHT.js?v=0fc15c2d:11346:35
   mountIndeterminateComponent@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-DEJXHLHT.js?v=0fc15c2d:13419:21
   beginWork@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-DEJXHLHT.js?v=0fc15c2d:14153:22

diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
@@ -21,26 +21,22 @@
   "license": "MIT",
   "exports": {
     ".": {
-      "node": "./dist/index.js",
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
     "./dist/runtime": {
-      "require": "./dist/runtime.js",
-      "import": "./dist/runtime.mjs",
+      "import": "./dist/runtime.js",
       "types": "./dist/runtime.d.ts"
     },
     "./dist/globals": {
       "require": "./dist/globals.js",
-      "import": "./dist/globals.mjs",
       "types": "./dist/globals.d.ts"
     },
     "./paths": "./paths.js",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
@@ -51,7 +47,7 @@
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "../../../scripts/prepare/bundle.ts"
+    "prep": "../../../scripts/prepare/esm-bundle.ts"
   },
   "devDependencies": {
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
@@ -95,10 +91,12 @@
   },
   "bundler": {
     "pre": "./scripts/generate-exports-file.ts",
-    "entries": [
+    "browserEntries": [
       "./src/index.tsx",
-      "./src/globals.ts",
       "./src/runtime.ts"
+    ],
+    "nodeEntries": [
+      "./src/globals.ts"
     ]
   },
   "gitHead": "ae73d1c8065f7d614cfe6f3462ae7ca55a0c4e6b"