Merge pull request #63 from storybookjs/improve-bundling

Update for SB8

.storybook/local-preset.js

@@ -2,11 +2,11 @@
  * to load the built addon in this test Storybook
  */
 function previewAnnotations(entry = []) {
-  return [...entry, require.resolve("../dist/preview.mjs")];
+  return [...entry, require.resolve("../dist/preview.js")];
 }
 
 function managerEntries(entry = []) {
-  return [...entry, require.resolve("../dist/manager.mjs")];
+  return [...entry, require.resolve("../dist/manager.js")];
 }
 
 module.exports = {

package.json

@@ -9,22 +9,24 @@
     "type": "git",
     "url": "https://github.com/storybookjs/storybook-addon-kit"
   },
+  "type": "module",
   "license": "MIT",
   "author": "package-author",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
     },
-    "./manager": "./dist/manager.mjs",
-    "./preview": "./dist/preview.mjs",
+    "./preview": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/preview.js",
+      "require": "./dist/preview.js"
+    },
+    "./preset": "./dist/preset.cjs",
+    "./manager": "./dist/manager.js",
     "./package.json": "./package.json"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -39,54 +41,63 @@
     "build:watch": "npm run build -- --watch",
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "run-p build:watch 'storybook --quiet'",
-    "prerelease": "zx scripts/prepublish-checks.mjs",
+    "prerelease": "zx scripts/prepublish-checks.js",
     "release": "npm run build && auto shipit",
-    "eject-ts": "zx scripts/eject-typescript.mjs",
+    "eject-ts": "zx scripts/eject-typescript.js",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.0.0",
-    "@storybook/addon-interactions": "7.0.0",
-    "@storybook/addon-links": "7.0.0",
-    "@storybook/blocks": "7.0.0",
-    "@storybook/components": "7.0.0",
-    "@storybook/core-events": "7.0.0",
-    "@storybook/manager": "^7.6.0",
-    "@storybook/manager-api": "7.0.0",
-    "@storybook/preview": "^7.6.0",
-    "@storybook/preview-api": "7.0.0",
-    "@storybook/react": "7.0.0",
-    "@storybook/react-vite": "7.0.0",
+    "@storybook/addon-essentials": "8.0.0-beta.2",
+    "@storybook/addon-interactions": "8.0.0-beta.2",
+    "@storybook/addon-links": "8.0.0-beta.2",
+    "@storybook/blocks": "8.0.0-beta.2",
+    "@storybook/components": "8.0.0-beta.2",
+    "@storybook/core-events": "8.0.0-beta.2",
+    "@storybook/manager": "8.0.0-beta.2",
+    "@storybook/manager-api": "8.0.0-beta.2",
+    "@storybook/preview": "8.0.0-beta.2",
+    "@storybook/preview-api": "8.0.0-beta.2",
+    "@storybook/react": "8.0.0-beta.2",
+    "@storybook/react-vite": "8.0.0-beta.2",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "7.0.0",
-    "@storybook/types": "7.0.0",
+    "@storybook/theming": "8.0.0-beta.2",
+    "@storybook/types": "8.0.0-beta.2",
     "@types/node": "^18.15.0",
-    "@types/react": "^16.14.51",
-    "@types/react-dom": "^16.9.22",
-    "@vitejs/plugin-react": "^4.1.1",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
     "auto": "^11.0.4",
     "boxen": "^7.1.1",
     "dedent": "^1.5.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.3",
+    "prettier": "^3.2.5",
     "prompts": "^2.4.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "storybook": "7.0.0",
-    "tsup": "^7.2.0",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
+    "storybook": "8.0.0-beta.2",
+    "tsup": "^8.0.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.2",
     "zx": "^7.2.3"
   },
   "publishConfig": {
     "access": "public"
   },
   "bundler": {
-    "exportEntries": ["src/index.ts"],
-    "managerEntries": ["src/manager.ts"],
-    "previewEntries": ["src/preview.ts"]
+    "exportEntries": [
+      "src/index.ts"
+    ],
+    "managerEntries": [
+      "src/manager.ts"
+    ],
+    "previewEntries": [
+      "src/preview.ts"
+    ],
+    "nodeEntries": [
+      "src/preset.ts"
+    ]
   },
   "storybook": {
     "displayName": "Addon Kit",

scripts/prepublish-checks.mjs → scripts/prepublish-checks.js

@@ -72,7 +72,7 @@ peerDependencies.forEach((dependency) => {
           ${chalk.red(dedent`You have a peer dependency on ${chalk.bold(dependency)} which is most likely unnecessary
           as that is provided by Storybook directly.
           Check the "bundling" section in README.md for more information.
-          If you are absolutely sure you are doing it correct, you should remove this check from scripts/prepublish-checks.mjs.`)}
+          If you are absolutely sure you are doing it correct, you should remove this check from scripts/prepublish-checks.js.`)}
         `,
         { padding: 1, borderColor: "red" }
       )

scripts/welcome.js

@@ -1,10 +1,14 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable no-console */
-const prompts = require("prompts");
-const dedent = require("ts-dedent").default;
-const path = require("path");
-const fs = require("fs");
-const { execSync } = require("child_process");
+import prompts from 'prompts';
+import { dedent } from 'ts-dedent';
+import { dirname, resolve } from 'path';
+import { readFile, writeFile } from 'fs/promises';
+import { execSync } from 'child_process';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 // CLI questions
 const questions = [
@@ -128,10 +132,10 @@ const main = async () => {
 
   const authorField = authorName + (authorEmail ? ` <${authorEmail}>` : "");
 
-  const packageJson = path.resolve(__dirname, `../package.json`);
+  const packageJson = resolve(__dirname, `../package.json`);
 
   console.log(`\n👷 Updating package.json...`);
-  let packageJsonContents = fs.readFileSync(packageJson, "utf-8");
+  let packageJsonContents = await readFile(packageJson, "utf-8");
 
   packageJsonContents = packageJsonContents
     .replace(REPLACE_TEMPLATES.packageName, packageName)
@@ -143,11 +147,11 @@ const main = async () => {
     .replace(REPLACE_TEMPLATES.supportedFrameworks, supportedFrameworks)
     .replace(/\s*"postinstall".*node.*scripts\/welcome.js.*",/, '');
 
-  fs.writeFileSync(packageJson, packageJsonContents);
+  await writeFile(packageJson, packageJsonContents);
 
   console.log("📝 Updating the README...");
-  const readme = path.resolve(__dirname, `../README.md`);
-  let readmeContents = fs.readFileSync(readme, "utf-8");
+  const readme = resolve(__dirname, `../README.md`);
+  let readmeContents = await readFile(readme, "utf-8");
 
   const regex = /<\!-- README START -->([\s\S]*)<\!-- README END -->/g;
 
@@ -159,7 +163,7 @@ const main = async () => {
     `
   );
 
-  fs.writeFileSync(readme, readmeContents);
+  await writeFile(readme, readmeContents);
 
   console.log(`📦 Creating a commit...`);
   execSync('git add . && git commit -m "project setup" --no-verify');

src/manager.ts

@@ -31,10 +31,6 @@ addons.register(ADDON_ID, () => {
   addons.add(TAB_ID, {
     type: types.TAB,
     title: "My addon",
-    //👇 Checks the current route for the story
-    route: ({ storyId }) => `/myaddon/${storyId}`,
-    //👇 Shows the Tab UI element in myaddon view mode
-    match: ({ viewMode }) => viewMode === "myaddon",
     render: Tab,
   });
 });

src/preset.ts

@@ -0,0 +1,14 @@
+// You can use presets to augment the Storybook configuration
+// You rarely want to do this in addons,
+// so often you want to delete this file and remove the reference to it in package.json#exports and package.json#bunder.nodeEntries
+// Read more about presets at https://storybook.js.org/docs/addons/writing-presets
+
+export const viteFinal = async (config: any) => {
+  console.log("This addon is augmenting the Vite config");
+  return config;
+};
+
+export const webpack = async (config: any) => {
+  console.log("This addon is augmenting the Webpack config");
+  return config;
+};

tsup.config.ts

@@ -5,7 +5,7 @@ import { globalPackages as globalPreviewPackages } from "@storybook/preview/glob
 
 // The current browsers supported by Storybook v7
 const BROWSER_TARGET: Options['target'] = ["chrome100", "safari15", "firefox91"];
-const NODE_TARGET: Options['target'] = ["node16"];
+const NODE_TARGET: Options['target'] = ["node18"];
 
 type BundlerConfig = {
   bundler?: {
@@ -24,6 +24,7 @@ export default defineConfig(async (options) => {
   //     "exportEntries": ["./src/index.ts"],
   //     "managerEntries": ["./src/manager.ts"],
   //     "previewEntries": ["./src/preview.ts"]
+  //     "nodeEntries": ["./src/preset.ts"]
   //   }
   // }
   const packageJson = await readFile('./package.json', 'utf8').then(JSON.parse) as BundlerConfig;
@@ -32,6 +33,7 @@ export default defineConfig(async (options) => {
       exportEntries = [],
       managerEntries = [],
       previewEntries = [],
+      nodeEntries = [],
     } = {},
   } = packageJson;
 
@@ -55,7 +57,7 @@ export default defineConfig(async (options) => {
       dts: {
         resolve: true,
       },
-      format: ["esm", 'cjs'],
+      format: ["esm", "cjs"],
       target: [...BROWSER_TARGET, ...NODE_TARGET],
       platform: "neutral",
       external: [...globalManagerPackages, ...globalPreviewPackages],
@@ -78,17 +80,33 @@ export default defineConfig(async (options) => {
 
   // preview entries are entries meant to be loaded into the preview iframe
   // they'll have preview-specific packages externalized and they won't be usable in node
-  // they won't have types generated for them as they're usually loaded automatically by Storybook
+  // they'll have types generated for them so they can be imported when setting up Portable Stories
   if (previewEntries.length) {
     configs.push({
       ...commonConfig,
       entry: previewEntries,
+      dts: {
+        resolve: true,
+      },
       format: ["esm"],
       target: BROWSER_TARGET,
       platform: "browser",
       external: globalPreviewPackages,
     });
   }
 
+  // node entries are entries meant to be used in node-only
+  // this is useful for presets, which are loaded by Storybook when setting up configurations
+  // they won't have types generated for them as they're usually loaded automatically by Storybook
+  if (nodeEntries.length) {
+    configs.push({
+      ...commonConfig,
+      entry: nodeEntries,
+      format: ["cjs"],
+      target: NODE_TARGET,
+      platform: "node",
+    });
+  }
+
   return configs;
 });