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.

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"

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"

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"

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"

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"

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"

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"

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"

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"

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 resolve = name.startsWith('/') ? safeResolve : safeResolveFrom.bind(null, configDir);
-  const resolved = r(name);
+  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!
+  // We don't want to resolve an import path (e.g. '@addons/foo/preview') to the file on disk,
-  const managerFile = r(`${path}/manager`);
+  // because you are not allowed to import arbitrary files in packages in Vite.
-  const registerFile = r(`${path}/register`) || r(`${path}/register-panel`);
+  // Instead we check if the export exists and "absolutize" it.
-  const previewFile = r(`${path}/preview`);
+  const managerFile = absolutizeExport(`/manager`);
-  const presetFile = r(`${path}/preset`);
+  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 {

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"

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"

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",

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"

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",

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"

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",

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"