Use bundling strategy suitable for Storybook 8

.babelrc.js

@@ -1,4 +1,6 @@
+// this configuration is used by jest, not for actual building the addon
+
 module.exports = {
-  targets: "defaults",
-  presets: ["@babel/preset-env", "@babel/preset-typescript"],
+    targets: "defaults",
+    presets: ["@babel/preset-env", "@babel/preset-typescript"],
 }

.storybook/preview.js

@@ -1,5 +1,4 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,

package.json

@@ -24,14 +24,14 @@
       "types": "./dist/index.d.ts"
     },
     "./manager": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./preview": {
+      "types": "./dist/preview.d.ts",
       "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "import": "./dist/preview.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -58,9 +58,12 @@
     "@storybook/addon-interactions": "^8.0.0-rc.1",
     "@storybook/addon-links": "^8.0.0-rc.1",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.0",
-    "@storybook/react": "^8.0.0-rc.1",
+    "@storybook/components": "^8.0.0-rc.1",
+    "@storybook/core-events": "^8.0.0-rc.1",
+    "@storybook/manager-api": "^8.0.0-rc.1",
+    "@storybook/preview-api": "^8.0.0-rc.1",
+    "@storybook/theming": "^8.0.0-rc.1",
     "@storybook/react-webpack5": "^8.0.0-rc.1",
-    "@storybook/test": "^8.0.0-rc.1",
     "@storybook/types": "^8.0.0-rc.1",
     "@types/jest": "^29.2.4",
     "@types/node": "^18.19.0",
@@ -74,22 +77,16 @@
     "tsup": "^8.0.1",
     "typescript": "^4.9.4"
   },
-  "peerDependencies": {
-    "@storybook/components": "^8.0.0-rc.1",
-    "@storybook/core-events": "^8.0.0-rc.1",
-    "@storybook/manager-api": "^8.0.0-rc.1",
-    "@storybook/preview-api": "^8.0.0-rc.1",
-    "@storybook/theming": "^8.0.0-rc.1",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    }
+  "bundler": {
+    "exportEntries": [
+      "src/index.ts"
+    ],
+    "managerEntries": [
+      "src/manager.ts"
+    ],
+    "previewEntries": [
+      "src/preview.ts"
+    ]
   },
   "storybook": {
     "displayName": "Pseudo States",

tsup.config.ts

@@ -1,18 +1,112 @@
-import { defineConfig } from "tsup"
+import { defineConfig, type Options } from "tsup";
+import { readFile } from "fs/promises";
+import { globalPackages as globalManagerPackages } from "@storybook/manager/globals";
+import { globalPackages as globalPreviewPackages } from "@storybook/preview/globals";
 
-export default defineConfig((options) => {
-  return {
-    dts: { entry: ["src/index.ts", "src/manager.ts", "src/preview.ts"] },
-    entry: ["src/index.ts", "src/manager.ts", "src/preview.ts"],
-    format: ["esm", "cjs"],
+// The current browsers supported by Storybook v7
+const BROWSER_TARGET: Options['target'] = ["chrome100", "safari15", "firefox91"];
+const NODE_TARGET: Options['target'] = ["node18"];
+
+type BundlerConfig = {
+  bundler?: {
+    exportEntries?: string[];
+    nodeEntries?: string[];
+    managerEntries?: string[];
+    previewEntries?: string[];
+  };
+};
+
+export default defineConfig(async (options) => {
+  // reading the three types of entries from package.json, which has the following structure:
+  // {
+  //  ...
+  //   "bundler": {
+  //     "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;
+  const {
+    bundler: {
+      exportEntries = [],
+      managerEntries = [],
+      previewEntries = [],
+      nodeEntries = [],
+    } = {},
+  } = packageJson;
+
+  const commonConfig: Options = {
     splitting: false,
     minify: !options.watch,
     treeshake: true,
     sourcemap: true,
     clean: true,
-    platform: "browser",
-    esbuildOptions(options) {
-      options.conditions = ["module"];
-    },
+  };
+
+  const configs: Options[] = [];
+
+  // export entries are entries meant to be manually imported by the user
+  // they are not meant to be loaded by the manager or preview
+  // they'll be usable in both node and browser environments, depending on which features and modules they depend on
+  if (exportEntries.length) {
+    configs.push({
+      ...commonConfig,
+      entry: exportEntries,
+      dts: {
+        resolve: true,
+      },
+      format: ["esm", "cjs"],
+      target: [...BROWSER_TARGET, ...NODE_TARGET],
+      platform: "neutral",
+      external: [...globalManagerPackages, ...globalPreviewPackages],
+    });
+  }
+
+  // manager entries are entries meant to be loaded into the manager UI
+  // they'll have manager-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
+  if (managerEntries.length) {
+    configs.push({
+      ...commonConfig,
+      entry: managerEntries,
+      format: ["esm"],
+      target: BROWSER_TARGET,
+      platform: "browser",
+      external: globalManagerPackages,
+    });
+  }
+
+  // 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'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", "cjs"],
+      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;
+});