@kbach/react 0.5.21 → 0.5.23

package/dist/vite-plugin.js

@@ -3438,32 +3438,68 @@ function kbach(userConfig) {
         scanDir((0, import_path.join)(root, dir), (code) => extractFromCode(code));
       }
     },
-    // ── DEV: intercept every HTTP response and inject <style data-kbach> ──────
-    // React Router v8's SSR middleware generates HTML without going through
-    // transformIndexHtml, so we intercept at the Node.js response level.
+    // ── DEV: intercept every HTML response and inject <style data-kbach> ──────
+    // React Router v8 uses chunked streaming SSR — </head> comes in an early
+    // res.write() chunk, not res.end(). Buffer all writes, concatenate at end,
+    // inject CSS into the full HTML, then send in one go.
     configureServer(s) {
       server = s;
-      s.middlewares.use((_req, res, next) => {
+      s.middlewares.use((req, res, next) => {
+        const url = req.url ?? "";
+        if (/\.(js|ts|jsx|tsx|css|png|jpg|svg|ico|woff2?|ttf|json|map)(\?|$)/.test(url) || url.startsWith("/@") || url.startsWith("/__")) {
+          return next();
+        }
+        const origWrite = res.write.bind(res);
         const origEnd = res.end.bind(res);
-        res.end = function(chunk, encoding, cb) {
-          try {
-            if (chunk != null) {
-              const str = Buffer.isBuffer(chunk) ? chunk.toString("utf-8") : chunk;
-              if (typeof str === "string" && str.includes("</head>")) {
-                const injected = injectIntoHtml(str);
-                if (injected !== str) {
-                  chunk = Buffer.isBuffer(chunk) ? Buffer.from(injected, "utf-8") : injected;
-                  if (res.hasHeader("content-length")) {
-                    res.setHeader("content-length", Buffer.byteLength(
-                      Buffer.isBuffer(chunk) ? chunk : String(chunk)
-                    ));
-                  }
-                }
+        const chunks = [];
+        let done = false;
+        function toBuffer(chunk, enc) {
+          if (chunk == null) return Buffer.alloc(0);
+          if (typeof chunk === "string") {
+            return Buffer.from(chunk, typeof enc === "string" ? enc : "utf-8");
+          }
+          if (ArrayBuffer.isView(chunk)) {
+            return Buffer.from(chunk.buffer, chunk.byteOffset, chunk.byteLength);
+          }
+          if (chunk instanceof ArrayBuffer) return Buffer.from(chunk);
+          return Buffer.from(String(chunk));
+        }
+        res.write = function(chunk, enc, cb) {
+          if (done) return origWrite(chunk, enc, cb);
+          if (chunk != null) chunks.push(toBuffer(chunk, enc));
+          if (typeof enc === "function") enc();
+          else if (typeof cb === "function") cb();
+          return true;
+        };
+        res.end = function(chunk, enc, cb) {
+          done = true;
+          if (typeof chunk === "function") {
+            cb = chunk;
+            chunk = null;
+            enc = null;
+          } else if (typeof enc === "function") {
+            cb = enc;
+            enc = null;
+          }
+          if (chunk != null) chunks.push(toBuffer(chunk, enc));
+          if (chunks.length > 0) {
+            const html = Buffer.concat(chunks).toString("utf-8");
+            if (html.includes("</head>")) {
+              const injected = injectIntoHtml(html);
+              const buf = Buffer.from(injected, "utf-8");
+              try {
+                res.removeHeader("transfer-encoding");
+              } catch {
+              }
+              try {
+                res.setHeader("content-length", buf.length);
+              } catch {
               }
+              return origEnd(buf, cb);
             }
-          } catch {
+            return origEnd(Buffer.concat(chunks), enc, cb);
           }
-          return origEnd(chunk, encoding, cb);
+          return origEnd(void 0, enc, cb);
         };
         next();
       });

package/dist/vite-plugin.mjs

@@ -96,32 +96,68 @@ function kbach(userConfig) {
         scanDir(join(root, dir), (code) => extractFromCode(code));
       }
     },
-    // ── DEV: intercept every HTTP response and inject <style data-kbach> ──────
-    // React Router v8's SSR middleware generates HTML without going through
-    // transformIndexHtml, so we intercept at the Node.js response level.
+    // ── DEV: intercept every HTML response and inject <style data-kbach> ──────
+    // React Router v8 uses chunked streaming SSR — </head> comes in an early
+    // res.write() chunk, not res.end(). Buffer all writes, concatenate at end,
+    // inject CSS into the full HTML, then send in one go.
     configureServer(s) {
       server = s;
-      s.middlewares.use((_req, res, next) => {
+      s.middlewares.use((req, res, next) => {
+        const url = req.url ?? "";
+        if (/\.(js|ts|jsx|tsx|css|png|jpg|svg|ico|woff2?|ttf|json|map)(\?|$)/.test(url) || url.startsWith("/@") || url.startsWith("/__")) {
+          return next();
+        }
+        const origWrite = res.write.bind(res);
         const origEnd = res.end.bind(res);
-        res.end = function(chunk, encoding, cb) {
-          try {
-            if (chunk != null) {
-              const str = Buffer.isBuffer(chunk) ? chunk.toString("utf-8") : chunk;
-              if (typeof str === "string" && str.includes("</head>")) {
-                const injected = injectIntoHtml(str);
-                if (injected !== str) {
-                  chunk = Buffer.isBuffer(chunk) ? Buffer.from(injected, "utf-8") : injected;
-                  if (res.hasHeader("content-length")) {
-                    res.setHeader("content-length", Buffer.byteLength(
-                      Buffer.isBuffer(chunk) ? chunk : String(chunk)
-                    ));
-                  }
-                }
+        const chunks = [];
+        let done = false;
+        function toBuffer(chunk, enc) {
+          if (chunk == null) return Buffer.alloc(0);
+          if (typeof chunk === "string") {
+            return Buffer.from(chunk, typeof enc === "string" ? enc : "utf-8");
+          }
+          if (ArrayBuffer.isView(chunk)) {
+            return Buffer.from(chunk.buffer, chunk.byteOffset, chunk.byteLength);
+          }
+          if (chunk instanceof ArrayBuffer) return Buffer.from(chunk);
+          return Buffer.from(String(chunk));
+        }
+        res.write = function(chunk, enc, cb) {
+          if (done) return origWrite(chunk, enc, cb);
+          if (chunk != null) chunks.push(toBuffer(chunk, enc));
+          if (typeof enc === "function") enc();
+          else if (typeof cb === "function") cb();
+          return true;
+        };
+        res.end = function(chunk, enc, cb) {
+          done = true;
+          if (typeof chunk === "function") {
+            cb = chunk;
+            chunk = null;
+            enc = null;
+          } else if (typeof enc === "function") {
+            cb = enc;
+            enc = null;
+          }
+          if (chunk != null) chunks.push(toBuffer(chunk, enc));
+          if (chunks.length > 0) {
+            const html = Buffer.concat(chunks).toString("utf-8");
+            if (html.includes("</head>")) {
+              const injected = injectIntoHtml(html);
+              const buf = Buffer.from(injected, "utf-8");
+              try {
+                res.removeHeader("transfer-encoding");
+              } catch {
+              }
+              try {
+                res.setHeader("content-length", buf.length);
+              } catch {
               }
+              return origEnd(buf, cb);
             }
-          } catch {
+            return origEnd(Buffer.concat(chunks), enc, cb);
           }
-          return origEnd(chunk, encoding, cb);
+          return origEnd(void 0, enc, cb);
         };
         next();
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.5.21",
+  "version": "0.5.23",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",