hadars 0.1.26 → 0.1.27

package/dist/cli.js

@@ -1138,13 +1138,33 @@ var buildCompilerConfig = (entry, opts, includeHotPlugin) => {
     // 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 = {
@@ -1875,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({
@@ -1912,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 = () => {
@@ -2094,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

@@ -188,13 +188,33 @@ var buildCompilerConfig = (entry2, opts, includeHotPlugin) => {
     // 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 = {
@@ -354,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.26",
+  "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 = (
@@ -232,15 +234,44 @@ const buildCompilerConfig = (
         '@emotion/server',
     ] : 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));
         }
     }