Build: Use TSUP to compile the renderers

.circleci/config.yml

@@ -269,7 +269,7 @@ jobs:
           name: Run @storybook/bench on repro
           command: |
             cd ../cra-bench
-            npx @storybook/bench@0.8.0--canary.11.edeef38.0 'echo noop' --label cra
+            npx @storybook/bench@1.0.0--canary.12.22336b6.0 'echo noop' --label cra
   e2e-tests-pnp:
     executor:
       class: medium

lib/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -240,6 +240,16 @@ export default async (
     ].filter(Boolean),
     module: {
       rules: [
+        {
+          test: /\.m?js$/,
+          type: 'javascript/auto',
+        },
+        {
+          test: /\.m?js$/,
+          resolve: {
+            fullySpecified: false,
+          },
+        },
         createBabelLoader(babelOptions, typescriptOptions),
         {
           test: /\.md$/,

lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix

@@ -478,6 +478,16 @@ Object {
         },
         "test": "/\\\\.(stories|story)\\\\.[tj]sx?$/",
       },
+      Object {
+        "test": "/\\\\.m?js$/",
+        "type": "javascript/auto",
+      },
+      Object {
+        "resolve": Object {
+          "fullySpecified": false,
+        },
+        "test": "/\\\\.m?js$/",
+      },
     ],
   },
   "plugins": Array [

lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix

@@ -495,6 +495,16 @@ Object {
         },
         "test": "/\\\\.(stories|story)\\\\.[tj]sx?$/",
       },
+      Object {
+        "test": "/\\\\.m?js$/",
+        "type": "javascript/auto",
+      },
+      Object {
+        "resolve": Object {
+          "fullySpecified": false,
+        },
+        "test": "/\\\\.m?js$/",
+      },
     ],
   },
   "plugins": Array [

lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix

@@ -26,6 +26,16 @@ Object {
   ],
   "module": Object {
     "rules": Array [
+      Object {
+        "test": "/\\\\.m?js$/",
+        "type": "javascript/auto",
+      },
+      Object {
+        "resolve": Object {
+          "fullySpecified": false,
+        },
+        "test": "/\\\\.m?js$/",
+      },
       Object {
         "exclude": "NODE_MODULES/",
         "include": Array [

lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix

@@ -25,6 +25,16 @@ Object {
   ],
   "module": Object {
     "rules": Array [
+      Object {
+        "test": "/\\\\.m?js$/",
+        "type": "javascript/auto",
+      },
+      Object {
+        "resolve": Object {
+          "fullySpecified": false,
+        },
+        "test": "/\\\\.m?js$/",
+      },
       Object {
         "exclude": "NODE_MODULES/",
         "include": Array [

lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix

@@ -26,6 +26,16 @@ Object {
   ],
   "module": Object {
     "rules": Array [
+      Object {
+        "test": "/\\\\.m?js$/",
+        "type": "javascript/auto",
+      },
+      Object {
+        "resolve": Object {
+          "fullySpecified": false,
+        },
+        "test": "/\\\\.m?js$/",
+      },
       Object {
         "exclude": "NODE_MODULES/",
         "include": Array [

lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix

@@ -25,6 +25,16 @@ Object {
   ],
   "module": Object {
     "rules": Array [
+      Object {
+        "test": "/\\\\.m?js$/",
+        "type": "javascript/auto",
+      },
+      Object {
+        "resolve": Object {
+          "fullySpecified": false,
+        },
+        "test": "/\\\\.m?js$/",
+      },
       Object {
         "exclude": "NODE_MODULES/",
         "include": Array [

lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix

@@ -26,6 +26,16 @@ Object {
   ],
   "module": Object {
     "rules": Array [
+      Object {
+        "test": "/\\\\.m?js$/",
+        "type": "javascript/auto",
+      },
+      Object {
+        "resolve": Object {
+          "fullySpecified": false,
+        },
+        "test": "/\\\\.m?js$/",
+      },
       Object {
         "exclude": "NODE_MODULES/",
         "include": Array [

lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix

@@ -25,6 +25,16 @@ Object {
   ],
   "module": Object {
     "rules": Array [
+      Object {
+        "test": "/\\\\.m?js$/",
+        "type": "javascript/auto",
+      },
+      Object {
+        "resolve": Object {
+          "fullySpecified": false,
+        },
+        "test": "/\\\\.m?js$/",
+      },
       Object {
         "exclude": "NODE_MODULES/",
         "include": Array [

presets/react-webpack/src/framework-preset-cra.ts

@@ -25,5 +25,19 @@ export const webpackFinal: StorybookConfig['webpack'] = (config, { presetsList }
       checkForNewPreset(presetsList);
     }
   }
+  config.module?.rules?.push(
+    ...[
+      {
+        test: /\.m?js$/,
+        type: 'javascript/auto',
+      },
+      {
+        test: /\.m?js$/,
+        resolve: {
+          fullySpecified: false,
+        },
+      },
+    ]
+  );
   return config;
 };

renderers/html/package.json

@@ -19,17 +19,34 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/config.js",
+      "import": "./dist/config.mjs",
+      "types": "./dist/config.d.ts"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "import": "./package.json",
+      "types": "./package.json"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "prepare": "esrun ../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
     "@storybook/addons": "7.0.0-alpha.6",
@@ -44,6 +61,9 @@
     "react-dom": "16.14.0",
     "ts-dedent": "^2.0.0"
   },
+  "devDependencies": {
+    "@digitak/esrun": "^3.2.2"
+  },
   "peerDependencies": {
     "@babel/core": "*"
   },
@@ -53,5 +73,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "bundlerEntrypoint": [
+    "./src/index.ts",
+    "./src/config.ts"
+  ],
   "gitHead": "a88dcca40ba169a373bad33dd76e9a4bd4f1f5ec"
 }

renderers/html/preview.js

@@ -1 +1 @@
-export * from './dist/esm/config';
+export * from './dist/config';

renderers/preact/package.json

@@ -19,17 +19,34 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/config.js",
+      "import": "./dist/config.mjs",
+      "types": "./dist/config.d.ts"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "import": "./package.json",
+      "types": "./package.json"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "prepare": "esrun ../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
     "@storybook/addons": "7.0.0-alpha.6",
@@ -43,6 +60,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@digitak/esrun": "^3.2.2",
     "preact": "^10.5.13"
   },
   "peerDependencies": {
@@ -54,5 +72,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "bundlerEntrypoint": [
+    "./src/index.ts",
+    "./src/config.ts"
+  ],
   "gitHead": "a88dcca40ba169a373bad33dd76e9a4bd4f1f5ec"
 }

renderers/preact/preview.js

@@ -1 +1 @@
-export * from './dist/esm/config';
+export * from './dist/config';

renderers/react/package.json

@@ -19,9 +19,26 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/config.js",
+      "import": "./dist/config.mjs",
+      "types": "./dist/config.d.ts"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "import": "./package.json",
+      "types": "./package.json"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "types/**/*",
@@ -30,7 +47,7 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "prepare": "esrun ../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
     "@storybook/addons": "7.0.0-alpha.6",
@@ -56,6 +73,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",
+    "@digitak/esrun": "^3.2.2",
     "@types/util-deprecate": "^1.0.0"
   },
   "peerDependencies": {
@@ -75,5 +93,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "bundlerEntrypoint": [
+    "./src/index.ts",
+    "./src/config.ts"
+  ],
   "gitHead": "a88dcca40ba169a373bad33dd76e9a4bd4f1f5ec"
 }

renderers/react/preview.js

@@ -1 +1 @@
-export * from './dist/esm/config';
+export * from './dist/config.mjs';