@emulsify/core 4.3.0 → 4.3.1

package/config/vite/plugins/reporter/vite-logger.js

@@ -18,6 +18,12 @@
  * message passes straight through to Vite's own logger untouched.
  */
 
+import { isQuiet, isVerbose } from './verbosity.js';
+
+// Re-exported because the Vite config and the reporter both branch on it, and
+// this module was where it lived before verbosity grew a third level.
+export { isVerbose };
+
 /**
  * Matches Vite's unresolved CSS asset notice.
  *
@@ -77,13 +83,68 @@ function isBareStackTrace(message) {
 }
 
 /**
- * Determine whether the reporter should stand aside and let Vite speak.
+ * Matches Vite's HMR notice.
+ *
+ * Emitted by the dev server as `hmr update <files>` through `logger.info`.
  *
- * @param {object} [env] - Environment variables.
- * @returns {boolean} TRUE when raw output should pass through.
+ * @type {RegExp}
+ */
+const HMR_UPDATE_PATTERN = /(^|\s)hmr update\s/;
+
+/**
+ * Wrap the Storybook dev server's logger to drop HMR notices.
+ *
+ * These come from Storybook's Vite dev server, not from the watch build, and
+ * there are a lot of them. The watch build rewrites every file in `dist/` on
+ * every cycle — Rollup regenerates the whole bundle — and Storybook imports its
+ * compiled CSS from `dist/`, so one saved stylesheet lands as several HMR events.
+ * Most name Storybook's own virtual modules:
+ *
+ *   │  Vite hmr update
+ *   │  /@id/__x00__virtual:/@storybook/builder-vite/project-annotations.js,
+ *   │  /@id/__x00__virtual:/@storybook/builder-vite/vite-app.js
+ *
+ * Nothing there is actionable, and the reporter has already printed the rebuild
+ * line that says the same thing more precisely. Under `concurrently` both
+ * processes share one pipe, so these interleave with the build's output and are
+ * the last thing making one command look like two.
+ *
+ * The wrapper delegates to whatever logger is already configured rather than
+ * replacing it, so Storybook keeps its own prefixes and styling for every other
+ * message. Verbose modes pass everything through, because someone who asked for
+ * more output should not have this filtered away.
+ *
+ * @param {{
+ *   baseLogger: import('vite').Logger,
+ *   verbose?: boolean
+ * }} options - Logger options.
+ * @returns {import('vite').Logger} Wrapped logger.
  */
-export function isVerbose(env = process.env) {
-  return Boolean(env.EMULSIFY_VERBOSE) && env.EMULSIFY_VERBOSE !== '0';
+export function createDevServerLogger({ baseLogger, verbose } = {}) {
+  const passThrough = verbose === undefined ? !isQuiet() : verbose;
+
+  return {
+    get hasWarned() {
+      return baseLogger.hasWarned;
+    },
+
+    set hasWarned(value) {
+      baseLogger.hasWarned = value;
+    },
+
+    info(message, options) {
+      if (!passThrough && HMR_UPDATE_PATTERN.test(stripAnsi(String(message)))) {
+        return;
+      }
+      baseLogger.info(message, options);
+    },
+
+    warn: (message, options) => baseLogger.warn(message, options),
+    warnOnce: (message, options) => baseLogger.warnOnce(message, options),
+    error: (message, options) => baseLogger.error(message, options),
+    clearScreen: (type) => baseLogger.clearScreen(type),
+    hasErrorLogged: (error) => baseLogger.hasErrorLogged(error),
+  };
 }
 
 /**

package/config/vite/vite.config.js

@@ -37,7 +37,10 @@ import { buildInputs } from './entries.js';
 import { createSourceFileIndex } from './plugins/assets/source-file-index.js';
 import { createDiagnosticsCollector } from './plugins/reporter/diagnostics.js';
 import { createSassOptions } from './plugins/reporter/sass-logger.js';
-import { createReporterLogger } from './plugins/reporter/vite-logger.js';
+import {
+  createReporterLogger,
+  isVerbose,
+} from './plugins/reporter/vite-logger.js';
 import { isWatchInvocation } from './plugins/reporter/watch-mode.js';
 import { loadProjectExtensions } from './project-extensions.js';
 import { mergeReactSingletonResolve } from './utils/react-singleton.js';
@@ -101,10 +104,47 @@ export default defineConfig(async () => {
     // Core plugin set + project-provided plugins (if any).
     plugins: [...makePlugins(envWithSourceFileIndex), ...projectPlugins],
 
-    // Route Vite's own diagnostics through the reporter during a watch build so
-    // unresolved CSS asset URLs are summarized rather than printed mid-build.
+    // Quieting `develop` takes two independent switches, because the output has
+    // two independent sources.
+    //
+    // 1. `logLevel` gates Vite's build reporter, which is a native Rolldown
+    //    plugin. Vite reads `config.logLevel` directly when constructing it and
+    //    passes a `logInfo` callback only when the level admits info. Rolldown's
+    //    Rust side registers its Transform, BuildStart, BuildEnd, RenderChunk,
+    //    WriteBundle, and GenerateBundle hooks only when that callback exists,
+    //    so raising the level does not merely hide the report — it stops
+    //    Rolldown instrumenting transforms and computing gzip sizes at all.
+    //    That removes the `transforming (N)` progress line, `N modules
+    //    transformed.`, `rendering chunks...`, `computing gzip size...`, and the
+    //    per-file asset table, and makes every rebuild cheaper.
+    //
+    //    The progress line is the one that matters most for legibility: Rolldown
+    //    writes it from Rust with a `\x1b[2K\r` prefix and no trailing newline,
+    //    which is what collides with Storybook's output when `concurrently`
+    //    merges both streams onto one pipe. Nothing on the JavaScript side can
+    //    intercept it, so `logLevel` is the only lever that removes it.
+    //
+    // 2. `customLogger` gates Vite's own JavaScript chatter — `building client
+    //    environment...`, `build started...`, `watching for file changes...`,
+    //    and `built in Nms.` — and routes unresolved CSS asset URLs into the
+    //    diagnostics collector so they are summarized rather than printed
+    //    mid-build. The reporter writes straight to stdout rather than through
+    //    this logger, so its own output survives the higher level, and warnings
+    //    and errors still come through.
+    //
+    // Neither switch substitutes for the other: `createLogger` returns a
+    // supplied `customLogger` verbatim and never consults the level, while the
+    // build reporter consults the level and never consults the logger.
+    // `build.reportCompressedSize` is deliberately left alone; it suppresses
+    // only the gzip column, and the table it belongs to is already gone.
     ...(diagnostics
-      ? { customLogger: createReporterLogger(diagnostics, createLogger()) }
+      ? {
+          logLevel: isVerbose() ? 'info' : 'warn',
+          customLogger: createReporterLogger(
+            diagnostics,
+            createLogger(isVerbose() ? 'info' : 'warn'),
+          ),
+        }
       : {}),
 
     // Keep React-based story helpers on the consumer project's React singleton.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@emulsify/core",
-  "version": "4.3.0",
-  "description": "Shared Vite build tooling and Storybook support for Twig, React, and custom elements",
+  "version": "4.3.1",
+  "description": "Bundled tooling for Storybook development + Vite Build",
   "keywords": [
     "component library",
     "craftcms",
@@ -47,6 +47,7 @@
     ".storybook/manager-head.css",
     ".storybook/manager.js",
     ".storybook/preview.js",
+    ".storybook/ready-reporter.js",
     ".storybook/utils.js",
     "assets/**/*",
     "config/.prettierrc.json",
@@ -72,6 +73,8 @@
     "config/vite/plugins/reporter/index.js",
     "config/vite/plugins/reporter/render.js",
     "config/vite/plugins/reporter/sass-logger.js",
+    "config/vite/plugins/reporter/source-roots.js",
+    "config/vite/plugins/reporter/verbosity.js",
     "config/vite/plugins/reporter/vite-logger.js",
     "config/vite/plugins/reporter/watch-mode.js",
     "config/vite/plugins/require-context.js",