@emulsify/core 4.2.1 → 4.3.1

package/.storybook/main-vite.js

@@ -1,16 +1,18 @@
 import path from 'path';
 import viteConfig from '../config/vite/vite.config.js';
-import { twigExtensionModuleSpecifiers } from '../config/vite/twig-extensions.js';
+import { twigExtensionModuleSpecifiers } from '../config/vite/plugins/twig/extensions.js';
 import {
   mergeReactSingletonOptimizeDeps,
   mergeReactSingletonResolve,
 } from '../config/vite/utils/react-singleton.js';
+import { createDevServerLogger } from '../config/vite/plugins/reporter/vite-logger.js';
 import { makeGeneratedDistFilesPlugin } from './main-static-assets.js';
 
-// Twig glob maps are provided by config/vite/plugins/virtual-twig-globs.js.
+// Twig glob maps are provided by config/vite/plugins/twig/virtual-twig-globs.js.
 const twigVirtualModuleIds = [
   'virtual:emulsify-twig-globs',
   'virtual:emulsify-twig-asset-sources',
+  'virtual:emulsify-twig-asset-source-runtime',
   'virtual:emulsify-twig-extension-installers',
 ];
 
@@ -52,22 +54,64 @@ function mergeTwigRuntimeOptimizeDepsExcludes(...excludeLists) {
   );
 }
 
+/**
+ * Drop Vite's legacy `rollupOptions` alias from an `optimizeDeps` object.
+ *
+ * Vite 8 installs a compat shim on resolved `optimizeDeps` that defines
+ * `rollupOptions` as an *enumerable accessor* forwarding to `rolldownOptions`.
+ * Spreading such an object — which is how Storybook's config is merged here —
+ * copies the alias out as an ordinary data property. Vite then sees an
+ * `optimizeDeps` carrying two distinct objects and logs:
+ *
+ *   `optimizeDeps.rollupOptions` / `ssr.optimizeDeps.rollupOptions` is
+ *   deprecated. Use `optimizeDeps.rolldownOptions` instead.
+ *
+ * `ssr.optimizeDeps` inherits from `optimizeDeps`, so clearing the alias here
+ * settles both. Anything the alias was carrying is folded into
+ * `rolldownOptions` rather than discarded, so behavior is unchanged.
+ *
+ * That deprecation is emitted with `console.warn` rather than through Vite's
+ * logger, so it cannot be intercepted downstream — it has to be prevented.
+ *
+ * @param {object} [optimizeDeps] - Resolved or partial optimizeDeps config.
+ * @returns {object} Copy with the alias resolved into `rolldownOptions`.
+ */
+export function stripRollupOptionsAlias(optimizeDeps) {
+  if (!optimizeDeps) return {};
+
+  const { rollupOptions, rolldownOptions, ...rest } = optimizeDeps;
+  const resolved = rolldownOptions || rollupOptions;
+
+  return resolved ? { ...rest, rolldownOptions: resolved } : rest;
+}
+
+/**
+ * Virtual module IDs that must stay external during dependency optimization.
+ *
+ * @type {RegExp}
+ */
+const TWIG_VIRTUAL_MODULE_PATTERN =
+  /^virtual:emulsify-twig-(?:globs|asset-sources|asset-source-runtime)$/;
+
 /**
  * Keep Emulsify Twig virtual imports out of Storybook dependency prebundles.
  *
- * @returns {import('esbuild').Plugin} Esbuild plugin for optimizeDeps.
+ * Vite 8 optimizes dependencies with Rolldown rather than esbuild, so this is a
+ * Rolldown plugin using the Rollup-compatible `resolveId` hook. It replaces the
+ * previous esbuild `onResolve` plugin, which reached Vite through the
+ * deprecated `optimizeDeps.esbuildOptions` escape hatch.
+ *
+ * @returns {import('rolldown').Plugin} Rolldown plugin for optimizeDeps.
  */
 function makeTwigVirtualModuleOptimizerPlugin() {
   return {
     name: 'emulsify-twig-virtual-modules',
-    setup(build) {
-      build.onResolve(
-        { filter: /^virtual:emulsify-twig-(?:globs|asset-sources)$/ },
-        (args) => ({
-          path: args.path,
-          external: true,
-        }),
-      );
+    resolveId(source) {
+      if (!TWIG_VIRTUAL_MODULE_PATTERN.test(source)) return null;
+
+      // Marking these external leaves them in the module graph for Emulsify's
+      // virtual plugins to resolve during the normal Vite pipeline.
+      return { id: source, external: true };
     },
   };
 }
@@ -80,7 +124,7 @@ function makeTwigVirtualModuleOptimizerPlugin() {
  */
 export function createViteFinal(resolvedStorybookEnv) {
   return async function viteFinal(config) {
-    const { mergeConfig } = await import('vite');
+    const { createLogger, mergeConfig } = await import('vite');
     const env = resolvedStorybookEnv;
     const storybookBuildConfig = config?.build || {};
 
@@ -125,9 +169,16 @@ export function createViteFinal(resolvedStorybookEnv) {
         '**/*.twig',
       ]),
     );
+    // Clear Vite's legacy `rollupOptions` alias before either object is
+    // spread, so the merged result never carries both it and `rolldownOptions`.
+    const baseOptimizeDeps = stripRollupOptionsAlias(
+      baseViteConfig?.optimizeDeps,
+    );
+    const storybookOptimizeDeps = stripRollupOptionsAlias(config?.optimizeDeps);
+
     const optimizeDepsInclude = mergeReactSingletonOptimizeDeps(
-      baseViteConfig?.optimizeDeps?.include,
-      config?.optimizeDeps?.include,
+      baseOptimizeDeps.include,
+      storybookOptimizeDeps.include,
       [
         'twig',
         '@emulsify/core/extensions/twig',
@@ -166,34 +217,48 @@ export function createViteFinal(resolvedStorybookEnv) {
         exclude: [],
       },
       optimizeDeps: {
-        ...(baseViteConfig?.optimizeDeps || {}),
-        ...(config?.optimizeDeps || {}),
+        ...baseOptimizeDeps,
+        ...storybookOptimizeDeps,
         include: optimizeDepsInclude,
         exclude: mergeTwigRuntimeOptimizeDepsExcludes(
-          baseViteConfig?.optimizeDeps?.exclude,
-          config?.optimizeDeps?.exclude,
+          baseOptimizeDeps.exclude,
+          storybookOptimizeDeps.exclude,
         ),
-        esbuildOptions: {
-          ...(baseViteConfig?.optimizeDeps?.esbuildOptions || {}),
-          ...(config?.optimizeDeps?.esbuildOptions || {}),
+        rolldownOptions: {
+          ...(baseOptimizeDeps.rolldownOptions || {}),
+          ...(storybookOptimizeDeps.rolldownOptions || {}),
           plugins: [
-            ...(baseViteConfig?.optimizeDeps?.esbuildOptions?.plugins || []),
-            ...(config?.optimizeDeps?.esbuildOptions?.plugins || []),
+            ...(baseOptimizeDeps.rolldownOptions?.plugins || []),
+            ...(storybookOptimizeDeps.rolldownOptions?.plugins || []),
             makeTwigVirtualModuleOptimizerPlugin(),
           ],
-          loader: {
-            ...(baseViteConfig?.optimizeDeps?.esbuildOptions?.loader || {}),
-            ...(config?.optimizeDeps?.esbuildOptions?.loader || {}),
-            // Pre-bundle `.js` dependencies with the JSX loader for packages
-            // that ship JSX without a `.jsx` extension.
+          moduleTypes: {
+            ...(baseOptimizeDeps.rolldownOptions?.moduleTypes || {}),
+            ...(storybookOptimizeDeps.rolldownOptions?.moduleTypes || {}),
+            // Pre-bundle `.js` dependencies as JSX for packages that ship JSX
+            // without a `.jsx` extension. Rolldown's `moduleTypes` is the
+            // successor to esbuild's `loader` map.
             '.js': 'jsx',
           },
         },
       },
     });
 
+    const mergedOptimizeDeps = stripRollupOptionsAlias(
+      mergedConfig.optimizeDeps,
+    );
+
     return {
       ...mergedConfig,
+
+      // Assigned after the merge rather than inside it, because `mergeConfig`
+      // deep-merges plain objects and a logger is an object of functions — merging
+      // Storybook's with ours would produce a hybrid belonging to neither. Spread
+      // last, it simply wins, and it delegates to whatever was already configured
+      // so Storybook keeps its prefixes for every message it is allowed to print.
+      customLogger: createDevServerLogger({
+        baseLogger: mergedConfig.customLogger || createLogger(),
+      }),
       build: {
         ...(mergedConfig.build || {}),
         ...(storybookBuildConfig.outDir
@@ -204,17 +269,17 @@ export function createViteFinal(resolvedStorybookEnv) {
       },
       resolve: mergeReactSingletonResolve(mergedConfig),
       optimizeDeps: {
-        ...(mergedConfig.optimizeDeps || {}),
-        include: mergeReactSingletonOptimizeDeps(
-          mergedConfig.optimizeDeps?.include,
-        ),
+        // `mergeConfig` walks enumerable keys, so the alias can reappear on the
+        // merged result even though both inputs were cleaned above.
+        ...mergedOptimizeDeps,
+        include: mergeReactSingletonOptimizeDeps(mergedOptimizeDeps.include),
         exclude: mergeTwigRuntimeOptimizeDepsExcludes(
-          mergedConfig.optimizeDeps?.exclude,
+          mergedOptimizeDeps.exclude,
         ),
-        esbuildOptions: {
-          ...(mergedConfig.optimizeDeps?.esbuildOptions || {}),
-          loader: {
-            ...(mergedConfig.optimizeDeps?.esbuildOptions?.loader || {}),
+        rolldownOptions: {
+          ...(mergedOptimizeDeps.rolldownOptions || {}),
+          moduleTypes: {
+            ...(mergedOptimizeDeps.rolldownOptions?.moduleTypes || {}),
             '.js': 'jsx',
           },
         },

package/.storybook/main.js

@@ -21,6 +21,10 @@ import {
 } from '../src/storybook/main-config.js';
 import { buildAssetStaticDirs } from './main-static-assets.js';
 import { createViteFinal } from './main-vite.js';
+import {
+  installReadyReporter,
+  requestedPortFromArgv,
+} from './ready-reporter.js';
 
 /**
  * Minimal subset of the resolved Emulsify environment used by this file.
@@ -143,6 +147,22 @@ const safeConfigOverrides = await loadConfigOverrides();
  */
 const resolvedStorybookEnv = resolveEnvironment();
 
+/**
+ * Render Storybook's startup announcement in the Emulsify reporter's voice.
+ *
+ * Installed here because this module is itself a Storybook preset: `loadAllPresets`
+ * imports it, so a top-level await runs well before the dev server announces
+ * itself. Only the ready box is affected, and only when the internal logger is
+ * reachable — see `.storybook/ready-reporter.js` for why this is interception
+ * rather than `--quiet`.
+ *
+ * Restricted to `storybook dev`. A static `storybook build` prints no ready box,
+ * and the develop reporter deliberately leaves one-shot builds alone.
+ */
+if (process.argv.includes('dev')) {
+  await installReadyReporter({ requestedPort: requestedPortFromArgv() });
+}
+
 /**
  * Primary Storybook configuration object.
  * @type {StorybookConfig}

package/.storybook/ready-reporter.js

@@ -0,0 +1,230 @@
+/**
+ * @file Route Storybook's startup announcement through the Emulsify reporter.
+ *
+ * `npm run develop` runs Vite and Storybook side by side under `concurrently`.
+ * Once the reporter quiets Vite and Rolldown, Storybook's rounded box is the
+ * only remaining block drawn in another tool's visual language, which makes one
+ * command look like two.
+ *
+ * ## Why interception rather than `--quiet`
+ *
+ * Storybook has a switch for this: `outputStartupInformation()` is called behind
+ * `options.quiet ||`, so `storybook dev --quiet` removes the box outright. It was
+ * not used, for two reasons.
+ *
+ * The first is distribution. The `storybook` script lives in each consuming
+ * project's `package.json`, so `--quiet` would make a cosmetic improvement
+ * depend on every consumer editing a script — and a project that did not would
+ * get no improvement at all. Interception ships with the package.
+ *
+ * The second is that the box carries information nothing else does. Consumers
+ * run `storybook dev --ci`, and `--ci` makes Storybook fall forward to the next
+ * free port without prompting. The resolved port only appears in the box. A
+ * developer whose previous session is still holding 6006 would otherwise open
+ * the requested port and see a stale instance, with nothing anywhere saying so.
+ * Parsing the box is what makes {@link renderReady}'s port drift warning
+ * possible.
+ *
+ * ## Failure behavior
+ *
+ * Everything here is best-effort. `storybook/internal/node-logger` is an
+ * internal subpath and the box payload is a formatted string, so both can change
+ * between Storybook releases. Every failure path leaves Storybook's own logger
+ * untouched, which means the worst outcome is the box that prints today.
+ */
+
+import {
+  createStyler,
+  supportsColor,
+  supportsUnicode,
+} from '../config/vite/plugins/reporter/format.js';
+import { renderReady } from '../config/vite/plugins/reporter/render.js';
+
+/**
+ * Matches the URL rows inside Storybook's startup box.
+ *
+ * The box lists `- Local:`, `- On your network:`, and optionally
+ * `- Other allowed hosts:`, each followed by whitespace and a URL. Matching the
+ * label rather than the position keeps the parse working if a row is added or
+ * reordered.
+ *
+ * @type {RegExp}
+ */
+const URL_ROW_PATTERN = /^\s*-\s*(Local|On your network):\s*(\S+)/gim;
+
+/**
+ * Identifies the startup box among every other boxed message Storybook draws.
+ *
+ * @type {RegExp}
+ */
+const READY_PATTERN = /Storybook\s+ready/i;
+
+/**
+ * Remove ANSI escape sequences so pattern matching sees plain text.
+ *
+ * @param {string} value - Possibly styled text.
+ * @returns {string} Plain text.
+ */
+const stripAnsi = (value) =>
+  // eslint-disable-next-line no-control-regex
+  String(value).replace(/\[[0-9;]*m/g, '');
+
+/**
+ * Extract the local and network URLs from a startup box payload.
+ *
+ * @param {string} message - Box contents.
+ * @returns {{local?: string, network?: string}} Parsed URLs.
+ */
+export function parseReadyUrls(message) {
+  const urls = {};
+  if (typeof message !== 'string') return urls;
+
+  const plain = stripAnsi(message);
+  URL_ROW_PATTERN.lastIndex = 0;
+
+  let match = URL_ROW_PATTERN.exec(plain);
+  while (match) {
+    const [, label, url] = match;
+    urls[label.toLowerCase() === 'local' ? 'local' : 'network'] = url;
+    match = URL_ROW_PATTERN.exec(plain);
+  }
+
+  return urls;
+}
+
+/**
+ * Read the port out of a URL.
+ *
+ * @param {string|undefined} url - URL to inspect.
+ * @returns {string|undefined} Port, when present.
+ */
+export function portFromUrl(url) {
+  if (!url) return undefined;
+
+  try {
+    const { port } = new URL(url);
+    return port || undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Determine whether a boxed message is Storybook's startup announcement.
+ *
+ * @param {string} message - Box contents.
+ * @returns {boolean} TRUE when the message is the ready box.
+ */
+export function isReadyBox(message) {
+  return typeof message === 'string' && READY_PATTERN.test(stripAnsi(message));
+}
+
+/**
+ * Replace Storybook's startup box with the Emulsify ready panel.
+ *
+ * Only the ready box is intercepted. Every other boxed message — and there are
+ * several, including migration notices and error summaries — passes through to
+ * Storybook untouched, because this exists to unify one visual element rather
+ * than to take over Storybook's output.
+ *
+ * @param {{
+ *   logger?: {logBox?: Function, log?: Function},
+ *   requestedPort?: string|number,
+ *   write?: (line: string) => void,
+ *   colorEnabled?: boolean,
+ *   unicodeEnabled?: boolean
+ * }} [options] - Interception options.
+ * @returns {boolean} TRUE when the logger was wrapped.
+ */
+export function interceptReadyBox({
+  logger,
+  requestedPort,
+  write = (line) => process.stdout.write(`${line}\n`),
+  colorEnabled,
+  unicodeEnabled,
+} = {}) {
+  if (typeof logger?.logBox !== 'function') return false;
+
+  const styler = createStyler(
+    colorEnabled === undefined ? supportsColor() : colorEnabled,
+  );
+  const unicode =
+    unicodeEnabled === undefined ? supportsUnicode() : unicodeEnabled;
+
+  const originalLogBox = logger.logBox.bind(logger);
+
+  logger.logBox = (message, boxOptions) => {
+    if (!isReadyBox(message)) return originalLogBox(message, boxOptions);
+
+    try {
+      const urls = parseReadyUrls(message);
+      const actual = portFromUrl(urls.local);
+
+      const lines = renderReady({
+        service: 'storybook',
+        urls,
+        portDrift:
+          requestedPort && actual
+            ? { requested: requestedPort, actual }
+            : undefined,
+        unicode,
+        styler,
+      });
+
+      lines.forEach((line) => write(line));
+      return undefined;
+    } catch {
+      // A parse failure must not cost the developer the URLs they need.
+      return originalLogBox(message, boxOptions);
+    }
+  };
+
+  return true;
+}
+
+/**
+ * Install the interception against Storybook's real node logger.
+ *
+ * Called for its side effect during preset evaluation, which happens well before
+ * the server announces itself.
+ *
+ * @param {{requestedPort?: string|number}} [options] - Interception options.
+ * @returns {Promise<boolean>} TRUE when interception was installed.
+ */
+export async function installReadyReporter({ requestedPort } = {}) {
+  try {
+    const { logger } = await import('storybook/internal/node-logger');
+    return interceptReadyBox({ logger, requestedPort });
+  } catch {
+    // Storybook changed the subpath or the export. Its own box still prints.
+    return false;
+  }
+}
+
+/**
+ * Read the port requested on the command line.
+ *
+ * Storybook resolves `-p` / `--port` itself, but by the time the box is drawn the
+ * value has been replaced by whatever port was actually free. The request has to
+ * be captured from argv to have anything to compare against.
+ *
+ * @param {string[]} [argv] - Process arguments.
+ * @returns {string|undefined} Requested port.
+ */
+export function requestedPortFromArgv(argv = process.argv) {
+  if (!Array.isArray(argv)) return undefined;
+
+  for (let index = 0; index < argv.length; index += 1) {
+    const arg = argv[index];
+
+    if (arg === '-p' || arg === '--port') {
+      const value = argv[index + 1];
+      return value && /^\d+$/.test(value) ? value : undefined;
+    }
+
+    const inline = /^--port=(\d+)$/.exec(arg);
+    if (inline) return inline[1];
+  }
+
+  return undefined;
+}