hadars 0.1.25 → 0.1.27

package/dist/cli.js

@@ -1121,12 +1121,11 @@ var buildCompilerConfig = (entry, opts, includeHotPlugin) => {
     // Route all React imports to slim-react for SSR.
     react: slimReactIndex,
     "react/jsx-runtime": slimReactJsx,
-    "react/jsx-dev-runtime": slimReactJsx,
-    // Keep emotion on the project's node_modules (server-safe entry).
-    "@emotion/react": path.resolve(process.cwd(), "node_modules", "@emotion", "react"),
-    "@emotion/server": path.resolve(process.cwd(), "node_modules", "@emotion", "server"),
-    "@emotion/cache": path.resolve(process.cwd(), "node_modules", "@emotion", "cache"),
-    "@emotion/styled": path.resolve(process.cwd(), "node_modules", "@emotion", "styled")
+    "react/jsx-dev-runtime": slimReactJsx
+    // @emotion/* is bundled (not external) so that its `react` imports are
+    // resolved through the alias above to slim-react. If left external,
+    // emotion loads real React from node_modules and calls
+    // ReactSharedInternals.H.useContext which requires React's dispatcher.
   } : void 0;
   const externals = isServerBuild ? [
     // Node.js built-ins — must not be bundled; resolved by the runtime.
@@ -1135,27 +1134,47 @@ var buildCompilerConfig = (entry, opts, includeHotPlugin) => {
     "node:os",
     "node:stream",
     "node:util",
-    // react / react-dom are replaced by slim-react via alias above — not external.
-    // emotion should be external on server builds to avoid client/browser code
-    "@emotion/react",
-    "@emotion/server",
-    "@emotion/cache",
-    "@emotion/styled"
+    // @emotion/server is only used outside component rendering (CSS extraction)
+    // and does not call React hooks, so it is safe to leave as external.
+    "@emotion/server"
   ] : void 0;
+  const effectiveReactDev = isServerBuild ? false : opts.reactMode === "development" ? true : opts.reactMode === "production" ? false : isDev;
+  if (!isServerBuild && opts.reactMode !== void 0) {
+    const rules = localConfig.module?.rules ?? [];
+    for (const rule of rules) {
+      if (!rule?.use || !Array.isArray(rule.use))
+        continue;
+      for (const entry2 of rule.use) {
+        if (entry2?.loader?.includes("swc-loader")) {
+          entry2.options = entry2.options ?? {};
+          entry2.options.jsc = entry2.options.jsc ?? {};
+          entry2.options.jsc.transform = entry2.options.jsc.transform ?? {};
+          entry2.options.jsc.transform.react = entry2.options.jsc.transform.react ?? {};
+          entry2.options.jsc.transform.react.development = effectiveReactDev;
+          entry2.options.jsc.transform.react.refresh = effectiveReactDev && isDev;
+        }
+      }
+    }
+  }
   const extraPlugins = [];
-  if (opts.define && typeof opts.define === "object") {
+  const defineValues = { ...opts.define ?? {} };
+  if (!isServerBuild && opts.reactMode !== void 0) {
+    defineValues["process.env.NODE_ENV"] = JSON.stringify(opts.reactMode);
+  }
+  if (Object.keys(defineValues).length > 0) {
     const DefinePlugin = rspack.DefinePlugin || rspack.plugins?.DefinePlugin;
     if (DefinePlugin) {
-      extraPlugins.push(new DefinePlugin(opts.define));
-    } else {
-      extraPlugins.push({ name: "DefinePlugin", value: opts.define });
+      extraPlugins.push(new DefinePlugin(defineValues));
     }
   }
   const resolveConfig = {
     extensions: [".tsx", ".ts", ".js", ".jsx"],
     alias: resolveAliases,
     // for server builds prefer the package "main"/"module" fields and avoid "browser" so we don't pick browser-specific entrypoints
-    mainFields: isServerBuild ? ["main", "module"] : ["browser", "module", "main"]
+    mainFields: isServerBuild ? ["main", "module"] : ["browser", "module", "main"],
+    // for server builds exclude the "browser" condition so packages with package.json
+    // "exports" conditions (e.g. @emotion/*) resolve their Node/CJS entry, not the browser build
+    ...isServerBuild ? { conditionNames: ["node", "require", "default"] } : {}
   };
   const optimization = !isServerBuild && !isDev ? {
     moduleIds: "deterministic",
@@ -1876,6 +1895,7 @@ var dev = async (options) => {
     swcPlugins: options.swcPlugins,
     define: options.define,
     moduleRules: options.moduleRules,
+    reactMode: options.reactMode,
     htmlTemplate: resolvedHtmlTemplate
   });
   const devServer = new RspackDevServer({
@@ -1913,7 +1933,7 @@ var dev = async (options) => {
     `--base=${baseURL}`,
     ...options.swcPlugins ? [`--swcPlugins=${JSON.stringify(options.swcPlugins)}`] : [],
     ...options.define ? [`--define=${JSON.stringify(options.define)}`] : [],
-    ...options.moduleRules ? [`--moduleRules=${JSON.stringify(options.moduleRules)}`] : []
+    ...options.moduleRules ? [`--moduleRules=${JSON.stringify(options.moduleRules, (_k, v) => v instanceof RegExp ? { __re: v.source, __flags: v.flags } : v)}`] : []
   ], { stdio: "pipe" });
   child.stdin?.end();
   const cleanupChild = () => {
@@ -2095,6 +2115,7 @@ var build = async (options) => {
       define: options.define,
       moduleRules: options.moduleRules,
       optimization: options.optimization,
+      reactMode: options.reactMode,
       htmlTemplate: resolvedHtmlTemplate
     }),
     compileEntry(pathMod2.resolve(__dirname2, options.entry), {

package/dist/index.d.ts

@@ -111,6 +111,24 @@ interface HadarsOptions {
      * Note: inline styles are processed once at startup and are not live-reloaded.
      */
     htmlTemplate?: string;
+    /**
+     * Force the React runtime mode independently of the build mode.
+     * Useful when you need production build optimizations (minification, tree-shaking)
+     * but want React's development build for debugging hydration mismatches or
+     * component stack traces.
+     *
+     * - `'development'` — forces `process.env.NODE_ENV = "development"` and enables
+     *   JSX source info even in `hadars build`. React prints detailed hydration error
+     *   messages and component stacks.
+     * - `'production'` — the default; React uses the optimised production bundle.
+     *
+     * Only affects the **client** bundle. The SSR bundle always uses slim-react.
+     *
+     * @example
+     * // hadars.config.ts — debug hydration errors in a production build
+     * reactMode: 'development'
+     */
+    reactMode?: 'development' | 'production';
     /**
      * Additional rspack module rules appended to the built-in rule set.
      * Applied to both the client and the SSR bundle.

package/dist/ssr-watch.js

@@ -171,12 +171,11 @@ var buildCompilerConfig = (entry2, opts, includeHotPlugin) => {
     // Route all React imports to slim-react for SSR.
     react: slimReactIndex,
     "react/jsx-runtime": slimReactJsx,
-    "react/jsx-dev-runtime": slimReactJsx,
-    // Keep emotion on the project's node_modules (server-safe entry).
-    "@emotion/react": path.resolve(process.cwd(), "node_modules", "@emotion", "react"),
-    "@emotion/server": path.resolve(process.cwd(), "node_modules", "@emotion", "server"),
-    "@emotion/cache": path.resolve(process.cwd(), "node_modules", "@emotion", "cache"),
-    "@emotion/styled": path.resolve(process.cwd(), "node_modules", "@emotion", "styled")
+    "react/jsx-dev-runtime": slimReactJsx
+    // @emotion/* is bundled (not external) so that its `react` imports are
+    // resolved through the alias above to slim-react. If left external,
+    // emotion loads real React from node_modules and calls
+    // ReactSharedInternals.H.useContext which requires React's dispatcher.
   } : void 0;
   const externals = isServerBuild ? [
     // Node.js built-ins — must not be bundled; resolved by the runtime.
@@ -185,27 +184,47 @@ var buildCompilerConfig = (entry2, opts, includeHotPlugin) => {
     "node:os",
     "node:stream",
     "node:util",
-    // react / react-dom are replaced by slim-react via alias above — not external.
-    // emotion should be external on server builds to avoid client/browser code
-    "@emotion/react",
-    "@emotion/server",
-    "@emotion/cache",
-    "@emotion/styled"
+    // @emotion/server is only used outside component rendering (CSS extraction)
+    // and does not call React hooks, so it is safe to leave as external.
+    "@emotion/server"
   ] : void 0;
+  const effectiveReactDev = isServerBuild ? false : opts.reactMode === "development" ? true : opts.reactMode === "production" ? false : isDev;
+  if (!isServerBuild && opts.reactMode !== void 0) {
+    const rules = localConfig.module?.rules ?? [];
+    for (const rule of rules) {
+      if (!rule?.use || !Array.isArray(rule.use))
+        continue;
+      for (const entry3 of rule.use) {
+        if (entry3?.loader?.includes("swc-loader")) {
+          entry3.options = entry3.options ?? {};
+          entry3.options.jsc = entry3.options.jsc ?? {};
+          entry3.options.jsc.transform = entry3.options.jsc.transform ?? {};
+          entry3.options.jsc.transform.react = entry3.options.jsc.transform.react ?? {};
+          entry3.options.jsc.transform.react.development = effectiveReactDev;
+          entry3.options.jsc.transform.react.refresh = effectiveReactDev && isDev;
+        }
+      }
+    }
+  }
   const extraPlugins = [];
-  if (opts.define && typeof opts.define === "object") {
+  const defineValues = { ...opts.define ?? {} };
+  if (!isServerBuild && opts.reactMode !== void 0) {
+    defineValues["process.env.NODE_ENV"] = JSON.stringify(opts.reactMode);
+  }
+  if (Object.keys(defineValues).length > 0) {
     const DefinePlugin = rspack.DefinePlugin || rspack.plugins?.DefinePlugin;
     if (DefinePlugin) {
-      extraPlugins.push(new DefinePlugin(opts.define));
-    } else {
-      extraPlugins.push({ name: "DefinePlugin", value: opts.define });
+      extraPlugins.push(new DefinePlugin(defineValues));
     }
   }
   const resolveConfig = {
     extensions: [".tsx", ".ts", ".js", ".jsx"],
     alias: resolveAliases,
     // for server builds prefer the package "main"/"module" fields and avoid "browser" so we don't pick browser-specific entrypoints
-    mainFields: isServerBuild ? ["main", "module"] : ["browser", "module", "main"]
+    mainFields: isServerBuild ? ["main", "module"] : ["browser", "module", "main"],
+    // for server builds exclude the "browser" condition so packages with package.json
+    // "exports" conditions (e.g. @emotion/*) resolve their Node/CJS entry, not the browser build
+    ...isServerBuild ? { conditionNames: ["node", "require", "default"] } : {}
   };
   const optimization = !isServerBuild && !isDev ? {
     moduleIds: "deterministic",
@@ -355,7 +374,7 @@ var outFile = argv["outFile"] || "index.ssr.js";
 var base = argv["base"] || "";
 var swcPlugins = argv["swcPlugins"] ? JSON.parse(argv["swcPlugins"]) : void 0;
 var define = argv["define"] ? JSON.parse(argv["define"]) : void 0;
-var moduleRules = argv["moduleRules"] ? JSON.parse(argv["moduleRules"]) : void 0;
+var moduleRules = argv["moduleRules"] ? JSON.parse(argv["moduleRules"], (_k, v) => v && typeof v === "object" && "__re" in v ? new RegExp(v.__re, v.__flags) : v) : void 0;
 if (!entry) {
   console.error("ssr-watch: missing --entry argument");
   process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hadars",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "Minimal SSR framework for React — rspack, HMR, TypeScript, Bun/Node/Deno",
   "module": "./dist/index.js",
   "type": "module",

package/src/build.ts

@@ -508,6 +508,7 @@ export const dev = async (options: HadarsRuntimeOptions) => {
         swcPlugins: options.swcPlugins,
         define: options.define,
         moduleRules: options.moduleRules,
+        reactMode: options.reactMode,
         htmlTemplate: resolvedHtmlTemplate,
     });
 
@@ -555,7 +556,7 @@ export const dev = async (options: HadarsRuntimeOptions) => {
         `--base=${baseURL}`,
         ...(options.swcPlugins ? [`--swcPlugins=${JSON.stringify(options.swcPlugins)}`] : []),
         ...(options.define ? [`--define=${JSON.stringify(options.define)}`] : []),
-        ...(options.moduleRules ? [`--moduleRules=${JSON.stringify(options.moduleRules)}`] : []),
+        ...(options.moduleRules ? [`--moduleRules=${JSON.stringify(options.moduleRules, (_k, v) => v instanceof RegExp ? { __re: v.source, __flags: v.flags } : v)}`] : []),
     ], { stdio: 'pipe' });
     child.stdin?.end();
 
@@ -751,6 +752,7 @@ export const build = async (options: HadarsRuntimeOptions) => {
             define: options.define,
             moduleRules: options.moduleRules,
             optimization: options.optimization,
+            reactMode: options.reactMode,
             htmlTemplate: resolvedHtmlTemplate,
         }),
         compileEntry(pathMod.resolve(__dirname, options.entry), {

package/src/ssr-watch.ts

@@ -21,7 +21,7 @@ const outFile = argv['outFile'] || 'index.ssr.js';
 const base = argv['base'] || '';
 const swcPlugins = argv['swcPlugins'] ? JSON.parse(argv['swcPlugins']) : undefined;
 const define = argv['define'] ? JSON.parse(argv['define']) : undefined;
-const moduleRules = argv['moduleRules'] ? JSON.parse(argv['moduleRules']) : undefined;
+const moduleRules = argv['moduleRules'] ? JSON.parse(argv['moduleRules'], (_k, v) => (v && typeof v === 'object' && '__re' in v) ? new RegExp(v.__re, v.__flags) : v) : undefined;
 
 if (!entry) {
   console.error('ssr-watch: missing --entry argument');

package/src/types/hadars.ts

@@ -111,6 +111,24 @@ export interface HadarsOptions {
      * Note: inline styles are processed once at startup and are not live-reloaded.
      */
     htmlTemplate?: string;
+    /**
+     * Force the React runtime mode independently of the build mode.
+     * Useful when you need production build optimizations (minification, tree-shaking)
+     * but want React's development build for debugging hydration mismatches or
+     * component stack traces.
+     *
+     * - `'development'` — forces `process.env.NODE_ENV = "development"` and enables
+     *   JSX source info even in `hadars build`. React prints detailed hydration error
+     *   messages and component stacks.
+     * - `'production'` — the default; React uses the optimised production bundle.
+     *
+     * Only affects the **client** bundle. The SSR bundle always uses slim-react.
+     *
+     * @example
+     * // hadars.config.ts — debug hydration errors in a production build
+     * reactMode: 'development'
+     */
+    reactMode?: 'development' | 'production';
     /**
      * Additional rspack module rules appended to the built-in rule set.
      * Applied to both the client and the SSR bundle.

package/src/utils/rspack.ts

@@ -134,6 +134,8 @@ interface EntryOptions {
     optimization?: Record<string, unknown>;
     // additional module rules appended after the built-in rules
     moduleRules?: Record<string, any>[];
+    // force React runtime mode independently of build mode (client only)
+    reactMode?: 'development' | 'production';
 }
 
 const buildCompilerConfig = (
@@ -218,33 +220,58 @@ const buildCompilerConfig = (
         react:                slimReactIndex,
         'react/jsx-runtime':  slimReactJsx,
         'react/jsx-dev-runtime': slimReactJsx,
-        // Keep emotion on the project's node_modules (server-safe entry).
-        '@emotion/react':  path.resolve(process.cwd(), 'node_modules', '@emotion', 'react'),
-        '@emotion/server': path.resolve(process.cwd(), 'node_modules', '@emotion', 'server'),
-        '@emotion/cache':  path.resolve(process.cwd(), 'node_modules', '@emotion', 'cache'),
-        '@emotion/styled': path.resolve(process.cwd(), 'node_modules', '@emotion', 'styled'),
+        // @emotion/* is bundled (not external) so that its `react` imports are
+        // resolved through the alias above to slim-react. If left external,
+        // emotion loads real React from node_modules and calls
+        // ReactSharedInternals.H.useContext which requires React's dispatcher.
     } : undefined;
 
     const externals = isServerBuild ? [
         // Node.js built-ins — must not be bundled; resolved by the runtime.
         'node:fs', 'node:path', 'node:os', 'node:stream', 'node:util',
-        // react / react-dom are replaced by slim-react via alias above — not external.
-        // emotion should be external on server builds to avoid client/browser code
-        '@emotion/react',
+        // @emotion/server is only used outside component rendering (CSS extraction)
+        // and does not call React hooks, so it is safe to leave as external.
         '@emotion/server',
-        '@emotion/cache',
-        '@emotion/styled',
     ] : undefined;
 
+    // reactMode lets the caller force React's dev/prod runtime independently of
+    // the webpack build mode. Only applies to the client bundle (SSR uses slim-react).
+    // 'development' → process.env.NODE_ENV = "development" + JSX dev transform.
+    const effectiveReactDev = isServerBuild
+        ? false  // slim-react doesn't use NODE_ENV
+        : opts.reactMode === 'development' ? true
+        : opts.reactMode === 'production'  ? false
+        : isDev;                           // default: follow build mode
+
+    if (!isServerBuild && opts.reactMode !== undefined) {
+        // Override the SWC JSX development flag for all js/ts rules already built
+        const rules = localConfig.module?.rules ?? [];
+        for (const rule of rules) {
+            if (!rule?.use || !Array.isArray(rule.use)) continue;
+            for (const entry of rule.use) {
+                if (entry?.loader?.includes('swc-loader')) {
+                    entry.options = entry.options ?? {};
+                    entry.options.jsc = entry.options.jsc ?? {};
+                    entry.options.jsc.transform = entry.options.jsc.transform ?? {};
+                    entry.options.jsc.transform.react = entry.options.jsc.transform.react ?? {};
+                    entry.options.jsc.transform.react.development = effectiveReactDev;
+                    entry.options.jsc.transform.react.refresh = effectiveReactDev && isDev;
+                }
+            }
+        }
+    }
+
     const extraPlugins: any[] = [];
-    if (opts.define && typeof opts.define === 'object') {
-        // rspack's DefinePlugin shape mirrors webpack's DefinePlugin
+    const defineValues: Record<string, string> = { ...(opts.define ?? {}) };
+    // When reactMode overrides the React runtime we must also set process.env.NODE_ENV
+    // so React picks its dev/prod bundle, independently of the rspack build mode.
+    if (!isServerBuild && opts.reactMode !== undefined) {
+        defineValues['process.env.NODE_ENV'] = JSON.stringify(opts.reactMode);
+    }
+    if (Object.keys(defineValues).length > 0) {
         const DefinePlugin = (rspack as any).DefinePlugin || (rspack as any).plugins?.DefinePlugin;
         if (DefinePlugin) {
-            extraPlugins.push(new DefinePlugin(opts.define));
-        } else {
-            // fallback: try to inject via plugin API name
-            extraPlugins.push({ name: 'DefinePlugin', value: opts.define });
+            extraPlugins.push(new DefinePlugin(defineValues));
         }
     }
 
@@ -253,6 +280,9 @@ const buildCompilerConfig = (
         alias: resolveAliases,
         // for server builds prefer the package "main"/"module" fields and avoid "browser" so we don't pick browser-specific entrypoints
         mainFields: isServerBuild ? ['main', 'module'] : ['browser', 'module', 'main'],
+        // for server builds exclude the "browser" condition so packages with package.json
+        // "exports" conditions (e.g. @emotion/*) resolve their Node/CJS entry, not the browser build
+        ...(isServerBuild ? { conditionNames: ['node', 'require', 'default'] } : {}),
     };
 
     // Production client builds get vendor splitting and deterministic module IDs.