Merge pull request #19045 from storybookjs/tom/sb-697-investigate-chromatic-issues-on-next

Core: Restore `/preview` etc package exports; return unresolved path from presets.
2025-04-04 14:11:26 +08:00 · 2022-08-31 10:19:21 +08:00 · 2022-08-31 10:19:21 +08:00 · 541f40db03
commit 541f40db03
parent b63d349aa8 2e50d6346a
18 changed files with 111 additions and 34 deletions
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@ -31,17 +31,17 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
-    "./manager.js": {
+    "./manager": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
    },
-    "./preview.js": {
+    "./preview": {
      "require": "./dist/preview.js",
      "import": "./dist/preview.mjs",
      "types": "./dist/preview.d.ts"
    },
-    "./register.js": {
+    "./register": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@ -31,17 +31,17 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
-    "./manager.js": {
+    "./manager": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
    },
-    "./preview.js": {
+    "./preview": {
      "require": "./dist/preview.js",
      "import": "./dist/preview.mjs",
      "types": "./dist/preview.d.ts"
    },
-    "./register.js": {
+    "./register": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@ -31,12 +31,12 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
-    "./manager.js": {
+    "./manager": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
    },
-    "./register.js": {
+    "./register": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@ -33,12 +33,12 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
-    "./manager.js": {
+    "./manager": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
    },
-    "./register.js": {
+    "./register": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@ -27,12 +27,12 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
-    "./manager.js": {
+    "./manager": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
    },
-    "./preview.js": {
+    "./preview": {
      "require": "./dist/preview.js",
      "import": "./dist/preview.mjs",
      "types": "./dist/preview.d.ts"
@ -42,7 +42,7 @@
      "import": "./dist/react/index.mjs",
      "types": "./dist/react.d.ts"
    },
-    "./register.js": {
+    "./register": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@ -30,17 +30,17 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
-    "./manager.js": {
+    "./manager": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
    },
-    "./preview.js": {
+    "./preview": {
      "require": "./dist/preview.js",
      "import": "./dist/preview.mjs",
      "types": "./dist/preview.d.ts"
    },
-    "./register.js": {
+    "./register": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@ -33,17 +33,17 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
-    "./manager.js": {
+    "./manager": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
    },
-    "./preview.js": {
+    "./preview": {
      "require": "./dist/preset/preview.js",
      "import": "./dist/preset/preview.mjs",
      "types": "./dist/preview.d.ts"
    },
-    "./register.js": {
+    "./register": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@ -31,12 +31,12 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
-    "./manager.js": {
+    "./manager": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
    },
-    "./register.js": {
+    "./register": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@ -38,7 +38,7 @@
      "import": "./dist/preview.mjs",
      "types": "./dist/preview.d.ts"
    },
-    "./register.js": {
+    "./register": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
      "types": "./dist/manager.d.ts"
--- a/code/lib/core-common/src/presets.ts
+++ b/code/lib/core-common/src/presets.ts
@ -1,5 +1,6 @@
 import { dedent } from 'ts-dedent';
 import { logger } from '@storybook/node-logger';
+import { dirname } from 'path';
 import {
  CLIOptions,
  LoadedPreset,
@ -71,8 +72,8 @@ export const resolveAddonName = (
  name: string,
  options: any
 ): ResolvedAddonPreset | ResolvedAddonVirtual | undefined => {
-  const r = name.startsWith('/') ? safeResolve : safeResolveFrom.bind(null, configDir);
-  const resolved = r(name);
+  const resolve = name.startsWith('/') ? safeResolve : safeResolveFrom.bind(null, configDir);
+  const resolved = resolve(name);

  if (resolved) {
    if (name.match(/\/(manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) {
@ -90,13 +91,35 @@ export const resolveAddonName = (
    }
  }

+  const absolutePackageJson = resolved && resolve(`${name}/package.json`);
+
+  // We want to absolutize the package name part to a path on disk
+  //   (i.e. '/Users/foo/.../node_modules/@addons/foo') as otherwise
+  // we may not be able to import the package in certain module systems (eg. pnpm, yarn pnp)
+  const absoluteDir = absolutePackageJson && dirname(absolutePackageJson);
+
+  // If the package has an export (e.g. `/preview`), absolutize it, eg. to
+  //    /Users/foo/.../node_modules/@addons/foo/preview
+  // NOTE: this looks like the path of an absolute file, but it DOES NOT exist.
+  //  - However it is importable by webpack.
+  //  - Vite needs to strip off the absolute part to import it though
+  //     (vite cannot import absolute files: https://github.com/vitejs/vite/issues/5494
+  //      this also means vite suffers issues with pnpm etc)
+  const absolutizeExport = (exportName: string) => {
+    if (resolve(`${name}${exportName}`)) return `${absoluteDir}${exportName}`;
+    return undefined;
+  };
+
  const path = name;

-  // when user provides full path, we don't need to do anything!
-  const managerFile = r(`${path}/manager`);
-  const registerFile = r(`${path}/register`) || r(`${path}/register-panel`);
-  const previewFile = r(`${path}/preview`);
-  const presetFile = r(`${path}/preset`);
+  // We don't want to resolve an import path (e.g. '@addons/foo/preview') to the file on disk,
+  // because you are not allowed to import arbitrary files in packages in Vite.
+  // Instead we check if the export exists and "absolutize" it.
+  const managerFile = absolutizeExport(`/manager`);
+  const registerFile = absolutizeExport(`/register`) || absolutizeExport(`/register-panel`);
+  const previewFile = absolutizeExport(`/preview`);
+  // Presets are imported by node, so therefore fine to be a path on disk (at this stage anyway)
+  const presetFile = resolve(`${path}/preset`);

  if (!(managerFile || previewFile) && presetFile) {
    return {
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@ -25,7 +25,7 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
-    "./preview.js": {
+    "./preview": {
      "require": "./dist/config.js",
      "import": "./dist/config.mjs",
      "types": "./dist/config.d.ts"
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@ -25,7 +25,7 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
-    "./preview.js": {
+    "./preview": {
      "require": "./dist/config.js",
      "import": "./dist/config.mjs",
      "types": "./dist/config.d.ts"
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@ -19,6 +19,23 @@
    "url": "https://opencollective.com/storybook"
  },
  "license": "MIT",
+  "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",
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@ -25,7 +25,7 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
-    "./preview.js": {
+    "./preview": {
      "require": "./dist/config.js",
      "import": "./dist/config.mjs",
      "types": "./dist/config.d.ts"
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@ -19,6 +19,26 @@
    "url": "https://opencollective.com/storybook"
  },
  "license": "MIT",
+  "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"
+    },
+    "./templates/HOC.svelte": "./templates/HOC.svelte",
+    "./templates/PreviewRender.svelte": "./templates/PreviewRender.svelte",
+    "./templates/SlotDecorator.svelte": "./templates/SlotDecorator.svelte"
+  },
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
--- a/code/renderers/vue/package.json
+++ b/code/renderers/vue/package.json
@ -25,7 +25,7 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
-    "./preview.js": {
+    "./preview": {
      "require": "./dist/config.js",
      "import": "./dist/config.mjs",
      "types": "./dist/config.d.ts"
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@ -19,6 +19,23 @@
    "url": "https://opencollective.com/storybook"
  },
  "license": "MIT",
+  "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",
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@ -27,7 +27,7 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
-    "./preview.js": {
+    "./preview": {
      "require": "./dist/config.js",
      "import": "./dist/config.mjs",
      "types": "./dist/config.d.ts"