hadars 0.1.26 → 0.1.28

package/dist/cli.js

@@ -190,7 +190,7 @@ function popContextValue(context, prev) {
   _g[MAP_KEY]?.set(context, prev);
 }
 var GLOBAL_KEY = "__slimReactRenderState";
-var EMPTY = { id: 0, overflow: "", bits: 0 };
+var EMPTY = { id: 1, overflow: "" };
 function s() {
   const g = globalThis;
   if (!g[GLOBAL_KEY]) {
@@ -206,20 +206,27 @@ function resetRenderState() {
 function pushTreeContext(totalChildren, index) {
   const st = s();
   const saved = { ...st.currentTreeContext };
-  const pendingBits = 32 - Math.clz32(totalChildren);
+  const baseIdWithLeadingBit = st.currentTreeContext.id;
+  const baseOverflow = st.currentTreeContext.overflow;
+  const baseLength = 31 - Math.clz32(baseIdWithLeadingBit);
+  let baseId = baseIdWithLeadingBit & ~(1 << baseLength);
   const slot = index + 1;
-  const totalBits = st.currentTreeContext.bits + pendingBits;
-  if (totalBits <= 30) {
+  const newBits = 32 - Math.clz32(totalChildren);
+  const length = newBits + baseLength;
+  if (30 < length) {
+    const numberOfOverflowBits = baseLength - baseLength % 5;
+    const overflowStr = (baseId & (1 << numberOfOverflowBits) - 1).toString(32);
+    baseId >>= numberOfOverflowBits;
+    const newBaseLength = baseLength - numberOfOverflowBits;
     st.currentTreeContext = {
-      id: st.currentTreeContext.id << pendingBits | slot,
-      overflow: st.currentTreeContext.overflow,
-      bits: totalBits
+      id: 1 << newBits + newBaseLength | slot << newBaseLength | baseId,
+      overflow: overflowStr + baseOverflow
     };
   } else {
-    let newOverflow = st.currentTreeContext.overflow;
-    if (st.currentTreeContext.bits > 0)
-      newOverflow += st.currentTreeContext.id.toString(32);
-    st.currentTreeContext = { id: 1 << pendingBits | slot, overflow: newOverflow, bits: pendingBits };
+    st.currentTreeContext = {
+      id: 1 << length | slot << baseLength | baseId,
+      overflow: baseOverflow
+    };
   }
   return saved;
 }
@@ -425,7 +432,11 @@ function renderAttributes(props, isSvg) {
       continue;
     }
     if (value === true) {
-      attrs += ` ${attrName}=""`;
+      if (attrName.startsWith("aria-") || attrName.startsWith("data-")) {
+        attrs += ` ${attrName}="true"`;
+      } else {
+        attrs += ` ${attrName}=""`;
+      }
       continue;
     }
     if (key === "style" && typeof value === "object") {
@@ -1138,13 +1149,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 +1906,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 +1944,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 +2126,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/slim-react/index.cjs

@@ -130,7 +130,7 @@ function popContextValue(context, prev) {
   _g[MAP_KEY]?.set(context, prev);
 }
 var GLOBAL_KEY = "__slimReactRenderState";
-var EMPTY = { id: 0, overflow: "", bits: 0 };
+var EMPTY = { id: 1, overflow: "" };
 function s() {
   const g = globalThis;
   if (!g[GLOBAL_KEY]) {
@@ -146,20 +146,27 @@ function resetRenderState() {
 function pushTreeContext(totalChildren, index) {
   const st = s();
   const saved = { ...st.currentTreeContext };
-  const pendingBits = 32 - Math.clz32(totalChildren);
+  const baseIdWithLeadingBit = st.currentTreeContext.id;
+  const baseOverflow = st.currentTreeContext.overflow;
+  const baseLength = 31 - Math.clz32(baseIdWithLeadingBit);
+  let baseId = baseIdWithLeadingBit & ~(1 << baseLength);
   const slot = index + 1;
-  const totalBits = st.currentTreeContext.bits + pendingBits;
-  if (totalBits <= 30) {
+  const newBits = 32 - Math.clz32(totalChildren);
+  const length = newBits + baseLength;
+  if (30 < length) {
+    const numberOfOverflowBits = baseLength - baseLength % 5;
+    const overflowStr = (baseId & (1 << numberOfOverflowBits) - 1).toString(32);
+    baseId >>= numberOfOverflowBits;
+    const newBaseLength = baseLength - numberOfOverflowBits;
     st.currentTreeContext = {
-      id: st.currentTreeContext.id << pendingBits | slot,
-      overflow: st.currentTreeContext.overflow,
-      bits: totalBits
+      id: 1 << newBits + newBaseLength | slot << newBaseLength | baseId,
+      overflow: overflowStr + baseOverflow
     };
   } else {
-    let newOverflow = st.currentTreeContext.overflow;
-    if (st.currentTreeContext.bits > 0)
-      newOverflow += st.currentTreeContext.id.toString(32);
-    st.currentTreeContext = { id: 1 << pendingBits | slot, overflow: newOverflow, bits: pendingBits };
+    st.currentTreeContext = {
+      id: 1 << length | slot << baseLength | baseId,
+      overflow: baseOverflow
+    };
   }
   return saved;
 }
@@ -185,20 +192,20 @@ function restoreContext(snap) {
   st.localIdCounter = snap.localId;
 }
 function getTreeId() {
-  const { id, overflow, bits } = s().currentTreeContext;
-  return bits > 0 ? overflow + id.toString(32) : overflow;
+  const { id, overflow } = s().currentTreeContext;
+  if (id === 1)
+    return overflow;
+  const stripped = (id & ~(1 << 31 - Math.clz32(id))).toString(32);
+  return stripped + overflow;
 }
 function makeId() {
   const st = s();
   const treeId = getTreeId();
   const n = st.localIdCounter++;
-  let id = ":" + st.idPrefix + "R";
-  if (treeId.length > 0)
-    id += treeId;
-  id += ":";
+  let id = "_" + st.idPrefix + "R_" + treeId;
   if (n > 0)
-    id += "H" + n.toString(32) + ":";
-  return id;
+    id += "H" + n.toString(32);
+  return id + "_";
 }
 
 // src/slim-react/hooks.ts
@@ -471,7 +478,11 @@ function renderAttributes(props, isSvg) {
       continue;
     }
     if (value === true) {
-      attrs += ` ${attrName}=""`;
+      if (attrName.startsWith("aria-") || attrName.startsWith("data-")) {
+        attrs += ` ${attrName}="true"`;
+      } else {
+        attrs += ` ${attrName}=""`;
+      }
       continue;
     }
     if (key === "style" && typeof value === "object") {

package/dist/slim-react/index.js

@@ -39,7 +39,7 @@ function popContextValue(context, prev) {
   _g[MAP_KEY]?.set(context, prev);
 }
 var GLOBAL_KEY = "__slimReactRenderState";
-var EMPTY = { id: 0, overflow: "", bits: 0 };
+var EMPTY = { id: 1, overflow: "" };
 function s() {
   const g = globalThis;
   if (!g[GLOBAL_KEY]) {
@@ -55,20 +55,27 @@ function resetRenderState() {
 function pushTreeContext(totalChildren, index) {
   const st = s();
   const saved = { ...st.currentTreeContext };
-  const pendingBits = 32 - Math.clz32(totalChildren);
+  const baseIdWithLeadingBit = st.currentTreeContext.id;
+  const baseOverflow = st.currentTreeContext.overflow;
+  const baseLength = 31 - Math.clz32(baseIdWithLeadingBit);
+  let baseId = baseIdWithLeadingBit & ~(1 << baseLength);
   const slot = index + 1;
-  const totalBits = st.currentTreeContext.bits + pendingBits;
-  if (totalBits <= 30) {
+  const newBits = 32 - Math.clz32(totalChildren);
+  const length = newBits + baseLength;
+  if (30 < length) {
+    const numberOfOverflowBits = baseLength - baseLength % 5;
+    const overflowStr = (baseId & (1 << numberOfOverflowBits) - 1).toString(32);
+    baseId >>= numberOfOverflowBits;
+    const newBaseLength = baseLength - numberOfOverflowBits;
     st.currentTreeContext = {
-      id: st.currentTreeContext.id << pendingBits | slot,
-      overflow: st.currentTreeContext.overflow,
-      bits: totalBits
+      id: 1 << newBits + newBaseLength | slot << newBaseLength | baseId,
+      overflow: overflowStr + baseOverflow
     };
   } else {
-    let newOverflow = st.currentTreeContext.overflow;
-    if (st.currentTreeContext.bits > 0)
-      newOverflow += st.currentTreeContext.id.toString(32);
-    st.currentTreeContext = { id: 1 << pendingBits | slot, overflow: newOverflow, bits: pendingBits };
+    st.currentTreeContext = {
+      id: 1 << length | slot << baseLength | baseId,
+      overflow: baseOverflow
+    };
   }
   return saved;
 }
@@ -94,20 +101,20 @@ function restoreContext(snap) {
   st.localIdCounter = snap.localId;
 }
 function getTreeId() {
-  const { id, overflow, bits } = s().currentTreeContext;
-  return bits > 0 ? overflow + id.toString(32) : overflow;
+  const { id, overflow } = s().currentTreeContext;
+  if (id === 1)
+    return overflow;
+  const stripped = (id & ~(1 << 31 - Math.clz32(id))).toString(32);
+  return stripped + overflow;
 }
 function makeId() {
   const st = s();
   const treeId = getTreeId();
   const n = st.localIdCounter++;
-  let id = ":" + st.idPrefix + "R";
-  if (treeId.length > 0)
-    id += treeId;
-  id += ":";
+  let id = "_" + st.idPrefix + "R_" + treeId;
   if (n > 0)
-    id += "H" + n.toString(32) + ":";
-  return id;
+    id += "H" + n.toString(32);
+  return id + "_";
 }
 
 // src/slim-react/hooks.ts
@@ -380,7 +387,11 @@ function renderAttributes(props, isSvg) {
       continue;
     }
     if (value === true) {
-      attrs += ` ${attrName}=""`;
+      if (attrName.startsWith("aria-") || attrName.startsWith("data-")) {
+        attrs += ` ${attrName}="true"`;
+      } else {
+        attrs += ` ${attrName}=""`;
+      }
       continue;
     }
     if (key === "style" && typeof value === "object") {

package/dist/ssr-render-worker.js

@@ -97,7 +97,7 @@ function popContextValue(context, prev) {
   _g[MAP_KEY]?.set(context, prev);
 }
 var GLOBAL_KEY = "__slimReactRenderState";
-var EMPTY = { id: 0, overflow: "", bits: 0 };
+var EMPTY = { id: 1, overflow: "" };
 function s() {
   const g = globalThis;
   if (!g[GLOBAL_KEY]) {
@@ -113,20 +113,27 @@ function resetRenderState() {
 function pushTreeContext(totalChildren, index) {
   const st = s();
   const saved = { ...st.currentTreeContext };
-  const pendingBits = 32 - Math.clz32(totalChildren);
+  const baseIdWithLeadingBit = st.currentTreeContext.id;
+  const baseOverflow = st.currentTreeContext.overflow;
+  const baseLength = 31 - Math.clz32(baseIdWithLeadingBit);
+  let baseId = baseIdWithLeadingBit & ~(1 << baseLength);
   const slot = index + 1;
-  const totalBits = st.currentTreeContext.bits + pendingBits;
-  if (totalBits <= 30) {
+  const newBits = 32 - Math.clz32(totalChildren);
+  const length = newBits + baseLength;
+  if (30 < length) {
+    const numberOfOverflowBits = baseLength - baseLength % 5;
+    const overflowStr = (baseId & (1 << numberOfOverflowBits) - 1).toString(32);
+    baseId >>= numberOfOverflowBits;
+    const newBaseLength = baseLength - numberOfOverflowBits;
     st.currentTreeContext = {
-      id: st.currentTreeContext.id << pendingBits | slot,
-      overflow: st.currentTreeContext.overflow,
-      bits: totalBits
+      id: 1 << newBits + newBaseLength | slot << newBaseLength | baseId,
+      overflow: overflowStr + baseOverflow
     };
   } else {
-    let newOverflow = st.currentTreeContext.overflow;
-    if (st.currentTreeContext.bits > 0)
-      newOverflow += st.currentTreeContext.id.toString(32);
-    st.currentTreeContext = { id: 1 << pendingBits | slot, overflow: newOverflow, bits: pendingBits };
+    st.currentTreeContext = {
+      id: 1 << length | slot << baseLength | baseId,
+      overflow: baseOverflow
+    };
   }
   return saved;
 }
@@ -332,7 +339,11 @@ function renderAttributes(props, isSvg) {
       continue;
     }
     if (value === true) {
-      attrs += ` ${attrName}=""`;
+      if (attrName.startsWith("aria-") || attrName.startsWith("data-")) {
+        attrs += ` ${attrName}="true"`;
+      } else {
+        attrs += ` ${attrName}=""`;
+      }
       continue;
     }
     if (key === "style" && typeof value === "object") {

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.28",
   "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/slim-react/render.ts

@@ -287,8 +287,13 @@ function renderAttributes(props: Record<string, any>, isSvg: boolean): string {
       continue;
     }
     if (value === true) {
-      // Emit as attr="" to match React's server output exactly.
-      attrs += ` ${attrName}=""`;
+      // aria-* and data-* are string attributes: true must serialize to "true".
+      // HTML boolean attributes (disabled, hidden, checked, …) use attr="" (present-without-value).
+      if (attrName.startsWith("aria-") || attrName.startsWith("data-")) {
+        attrs += ` ${attrName}="true"`;
+      } else {
+        attrs += ` ${attrName}=""`;
+      }
       continue;
     }
     if (key === "style" && typeof value === "object") {

package/src/slim-react/renderContext.ts

@@ -63,10 +63,15 @@ export function popContextValue(context: object, prev: unknown): void {
   (_g[MAP_KEY] as Map<object, unknown> | null)?.set(context, prev);
 }
 
+// TreeContext matches React 19's representation exactly:
+// `id` is a packed bitfield with a leading sentinel `1` bit followed by tree
+// path slots. The most-recently-pushed slot occupies the HIGHEST non-sentinel
+// bits, matching React 19's Fizz `pushTreeContext` bit-packing order.
+// `overflow` accumulates segments that no longer fit in the 30-bit budget,
+// prepended newest-first (same as React 19).
 export interface TreeContext {
-  id: number;
-  overflow: string;
-  bits: number;
+  id: number;       // bitfield with sentinel; 1 = empty (just sentinel, no data)
+  overflow: string; // base-32 partial path segments that overflowed
 }
 
 interface RenderState {
@@ -76,7 +81,8 @@ interface RenderState {
 }
 
 const GLOBAL_KEY = "__slimReactRenderState";
-const EMPTY: TreeContext = { id: 0, overflow: "", bits: 0 };
+// React 19's initial context is { id: 1, overflow: "" } — sentinel bit only.
+const EMPTY: TreeContext = { id: 1, overflow: "" };
 
 function s(): RenderState {
   const g = globalThis as any;
@@ -96,23 +102,45 @@ export function setIdPrefix(prefix: string) {
   s().idPrefix = prefix;
 }
 
+/**
+ * Push a new level onto the tree context — matches React 19's Fizz
+ * `pushTreeContext` exactly:
+ *   - new slot occupies the HIGHER bit positions (above the old base data)
+ *   - on overflow, the LOWEST bits of the old data move to the overflow string
+ *     (rounded to a multiple of 5 so base-32 digits align on byte boundaries)
+ */
 export function pushTreeContext(totalChildren: number, index: number): TreeContext {
   const st = s();
   const saved: TreeContext = { ...st.currentTreeContext };
-  const pendingBits = 32 - Math.clz32(totalChildren);
-  const slot = index + 1;
-  const totalBits = st.currentTreeContext.bits + pendingBits;
 
-  if (totalBits <= 30) {
+  const baseIdWithLeadingBit = st.currentTreeContext.id;
+  const baseOverflow = st.currentTreeContext.overflow;
+  // Number of data bits currently stored (excludes the sentinel bit).
+  const baseLength = 31 - Math.clz32(baseIdWithLeadingBit);
+  // Strip the sentinel to get the pure data portion.
+  let baseId = baseIdWithLeadingBit & ~(1 << baseLength);
+
+  const slot = index + 1; // 1-indexed
+  const newBits = 32 - Math.clz32(totalChildren); // bits required for the new slot
+  const length = newBits + baseLength;             // total data bits after push
+
+  if (30 < length) {
+    // Overflow: flush the lowest bits of the old data to the overflow string.
+    // Round down to a multiple of 5 so each base-32 character covers exactly
+    // 5 bits (no fractional digits that would corrupt adjacent chars).
+    const numberOfOverflowBits = baseLength - (baseLength % 5);
+    const overflowStr = (baseId & ((1 << numberOfOverflowBits) - 1)).toString(32);
+    baseId >>= numberOfOverflowBits;
+    const newBaseLength = baseLength - numberOfOverflowBits;
     st.currentTreeContext = {
-      id: (st.currentTreeContext.id << pendingBits) | slot,
-      overflow: st.currentTreeContext.overflow,
-      bits: totalBits,
+      id: (1 << (newBits + newBaseLength)) | (slot << newBaseLength) | baseId,
+      overflow: overflowStr + baseOverflow,
     };
   } else {
-    let newOverflow = st.currentTreeContext.overflow;
-    if (st.currentTreeContext.bits > 0) newOverflow += st.currentTreeContext.id.toString(32);
-    st.currentTreeContext = { id: (1 << pendingBits) | slot, overflow: newOverflow, bits: pendingBits };
+    st.currentTreeContext = {
+      id: (1 << length) | (slot << baseLength) | baseId,
+      overflow: baseOverflow,
+    };
   }
   return saved;
 }
@@ -143,18 +171,35 @@ export function restoreContext(snap: { tree: TreeContext; localId: number }) {
   st.localIdCounter = snap.localId;
 }
 
+/**
+ * Produce the base-32 tree path string from the current context.
+ * Strips the sentinel bit then concatenates stripped_id + overflow —
+ * the same formula React 19 uses in both its Fizz SSR renderer and
+ * the client-side `mountId`.
+ */
 function getTreeId(): string {
-  const { id, overflow, bits } = s().currentTreeContext;
-  return bits > 0 ? overflow + id.toString(32) : overflow;
+  const { id, overflow } = s().currentTreeContext;
+  if (id === 1) return overflow; // sentinel only → no local path segment
+  const stripped = (id & ~(1 << (31 - Math.clz32(id)))).toString(32);
+  return stripped + overflow;
 }
 
+/**
+ * Generate a `useId`-compatible ID for the current call site.
+ *
+ * Format: `_<idPrefix>R_<treeId>_`
+ *   with an optional `H<n>` suffix when the same component calls useId
+ *   more than once (matching React 19's `localIdCounter` behaviour).
+ *
+ * This matches React 19's `mountId` output on both the Fizz SSR renderer
+ * and the client hydration path, so the IDs produced here will agree with
+ * the real React runtime during `hydrateRoot`.
+ */
 export function makeId(): string {
   const st = s();
   const treeId = getTreeId();
   const n = st.localIdCounter++;
-  let id = ":" + st.idPrefix + "R";
-  if (treeId.length > 0) id += treeId;
-  id += ":";
-  if (n > 0) id += "H" + n.toString(32) + ":";
-  return id;
+  let id = "_" + st.idPrefix + "R_" + treeId;
+  if (n > 0) id += "H" + n.toString(32);
+  return id + "_";
 }

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));
         }
     }