react-streaming - npm Package Compare versions

Comparing version 0.3.33-commit-2cf1712 to 0.3.33-commit-485ed46

dist/cjs/server/renderToStream/createBuffer.d.ts

 export { createBuffer };
 export type { InjectToStream };
 export type { StreamOperations };
+export type { Chunk };
 declare type InjectToStreamOptions = {
@@ -17,5 +18,6 @@ flush?: boolean;
     injectToStream: InjectToStream;
-    onBeforeWrite: (chunk: unknown) => void;
+    onReactWriteBefore: (chunk: unknown) => void;
+    onReactWriteAfter: () => void;
     onBeforeEnd: () => void;
     hasStreamEnded: () => boolean;
 };

dist/cjs/server/renderToStream/createBuffer.js

@@ -9,3 +9,8 @@ "use strict";
     let state = 'UNSTARTED';
-    return { injectToStream, onBeforeWrite, onBeforeEnd, hasStreamEnded };
+    // Needed to avoid React hydration mismatch.
+    //  - There seem to always(?) be a hydration mismatch whenever something is injected before the first react write.
+    //  - Reproduction: https://github.com/vikejs/vike/commit/45e4ffea06335ddbcf2826b0113be7f925617daa
+    //  - Thus, we delay any write to the stream until react wrote its first chunk.
+    let writePermission = false;
+    return { injectToStream, onReactWriteBefore, onReactWriteAfter, onBeforeEnd, hasStreamEnded };
     function injectToStream(chunk, options) {
@@ -22,2 +27,5 @@ if (debug.isEnabled) {
     function flushBuffer() {
+        if (!writePermission) {
+            return;
+        }
         if (buffer.length === 0) {
@@ -46,6 +54,12 @@ return;
     }
-    function onBeforeWrite(chunk) {
+    function onReactWriteAfter() {
+        const writeWasBlocked = !writePermission;
+        writePermission = true;
+        if (writeWasBlocked)
+            flushBuffer();
+    }
+    function onReactWriteBefore(chunk) {
         state === 'UNSTARTED' && debug('>>> START');
         if (debug.isEnabled) {
-            debug(`react write`, getChunkAsString(chunk));
+            debug('react write', getChunkAsString(chunk));
         }
@@ -56,2 +70,3 @@ state = 'STREAMING';
     function onBeforeEnd() {
+        writePermission = true; // in case React didn't write anything
         flushBuffer();
@@ -58,0 +73,0 @@ (0, utils_1.assert)(buffer.length === 0);

dist/cjs/server/renderToStream/createPipeWrapper.js

@@ -13,3 +13,3 @@ "use strict";
     };
-    const { injectToStream, onBeforeWrite, onBeforeEnd, hasStreamEnded } = (0, createBuffer_1.createBuffer)(streamOperations);
+    const { injectToStream, onReactWriteBefore, onReactWriteAfter, onBeforeEnd, hasStreamEnded } = (0, createBuffer_1.createBuffer)(streamOperations);
     return { pipeForUser, streamEnd, injectToStream, hasStreamEnded };
@@ -26,5 +26,6 @@ function createPipeForUser() {
                     debug('write');
-                    onBeforeWrite(chunk);
+                    onReactWriteBefore(chunk);
                     if (!writableFromUser.destroyed) {
                         writableFromUser.write(chunk, encoding, callback);
+                        onReactWriteAfter();
                     }
@@ -31,0 +32,0 @@ else {

dist/cjs/server/renderToStream/createReadableWrapper.js

@@ -23,3 +23,3 @@ "use strict";
     });
-    const { injectToStream, onBeforeWrite, onBeforeEnd, hasStreamEnded } = (0, createBuffer_1.createBuffer)(streamOperations);
+    const { injectToStream, onReactWriteBefore, onReactWriteAfter, onBeforeEnd, hasStreamEnded } = (0, createBuffer_1.createBuffer)(streamOperations);
     return { readableForUser, streamEnd, injectToStream, hasStreamEnded };
@@ -47,4 +47,5 @@ async function onReady(onEnded) {
             }
-            onBeforeWrite(value);
+            onReactWriteBefore(value);
             streamOperations.operations.writeChunk(value);
+            onReactWriteAfter();
         }
@@ -51,0 +52,0 @@ stopTimeout === null || stopTimeout === void 0 ? void 0 : stopTimeout();

dist/cjs/utils/projectInfo.js

@@ -5,3 +5,3 @@ "use strict";
 const getGlobalObject_1 = require("./getGlobalObject");
-const PROJECT_VERSION = '0.3.33-commit-2cf1712';
+const PROJECT_VERSION = '0.3.33-commit-485ed46';
 const projectInfo = {
@@ -8,0 +8,0 @@ projectName: 'react-streaming',

dist/esm/server/renderToStream/createBuffer.d.ts

 export { createBuffer };
 export type { InjectToStream };
 export type { StreamOperations };
+export type { Chunk };
 declare type InjectToStreamOptions = {
@@ -17,5 +18,6 @@ flush?: boolean;
     injectToStream: InjectToStream;
-    onBeforeWrite: (chunk: unknown) => void;
+    onReactWriteBefore: (chunk: unknown) => void;
+    onReactWriteAfter: () => void;
     onBeforeEnd: () => void;
     hasStreamEnded: () => boolean;
 };

dist/esm/server/renderToStream/createBuffer.js

@@ -7,3 +7,8 @@ export { createBuffer };
     let state = 'UNSTARTED';
-    return { injectToStream, onBeforeWrite, onBeforeEnd, hasStreamEnded };
+    // Needed to avoid React hydration mismatch.
+    //  - There seem to always(?) be a hydration mismatch whenever something is injected before the first react write.
+    //  - Reproduction: https://github.com/vikejs/vike/commit/45e4ffea06335ddbcf2826b0113be7f925617daa
+    //  - Thus, we delay any write to the stream until react wrote its first chunk.
+    let writePermission = false;
+    return { injectToStream, onReactWriteBefore, onReactWriteAfter, onBeforeEnd, hasStreamEnded };
     function injectToStream(chunk, options) {
@@ -20,2 +25,5 @@ if (debug.isEnabled) {
     function flushBuffer() {
+        if (!writePermission) {
+            return;
+        }
         if (buffer.length === 0) {
@@ -44,6 +52,12 @@ return;
     }
-    function onBeforeWrite(chunk) {
+    function onReactWriteAfter() {
+        const writeWasBlocked = !writePermission;
+        writePermission = true;
+        if (writeWasBlocked)
+            flushBuffer();
+    }
+    function onReactWriteBefore(chunk) {
         state === 'UNSTARTED' && debug('>>> START');
         if (debug.isEnabled) {
-            debug(`react write`, getChunkAsString(chunk));
+            debug('react write', getChunkAsString(chunk));
         }
@@ -54,2 +68,3 @@ state = 'STREAMING';
     function onBeforeEnd() {
+        writePermission = true; // in case React didn't write anything
         flushBuffer();
@@ -56,0 +71,0 @@ assert(buffer.length === 0);

dist/esm/server/renderToStream/createPipeWrapper.js

@@ -11,3 +11,3 @@ export { createPipeWrapper };
     };
-    const { injectToStream, onBeforeWrite, onBeforeEnd, hasStreamEnded } = createBuffer(streamOperations);
+    const { injectToStream, onReactWriteBefore, onReactWriteAfter, onBeforeEnd, hasStreamEnded } = createBuffer(streamOperations);
     return { pipeForUser, streamEnd, injectToStream, hasStreamEnded };
@@ -24,5 +24,6 @@ function createPipeForUser() {
                     debug('write');
-                    onBeforeWrite(chunk);
+                    onReactWriteBefore(chunk);
                     if (!writableFromUser.destroyed) {
                         writableFromUser.write(chunk, encoding, callback);
+                        onReactWriteAfter();
                     }
@@ -29,0 +30,0 @@ else {

dist/esm/server/renderToStream/createReadableWrapper.js

@@ -21,3 +21,3 @@ export { createReadableWrapper };
     });
-    const { injectToStream, onBeforeWrite, onBeforeEnd, hasStreamEnded } = createBuffer(streamOperations);
+    const { injectToStream, onReactWriteBefore, onReactWriteAfter, onBeforeEnd, hasStreamEnded } = createBuffer(streamOperations);
     return { readableForUser, streamEnd, injectToStream, hasStreamEnded };
@@ -45,4 +45,5 @@ async function onReady(onEnded) {
             }
-            onBeforeWrite(value);
+            onReactWriteBefore(value);
             streamOperations.operations.writeChunk(value);
+            onReactWriteAfter();
         }
@@ -49,0 +50,0 @@ stopTimeout === null || stopTimeout === void 0 ? void 0 : stopTimeout();

dist/esm/utils/projectInfo.js

 export { projectInfo };
 import { getGlobalObject } from './getGlobalObject';
-const PROJECT_VERSION = '0.3.33-commit-2cf1712';
+const PROJECT_VERSION = '0.3.33-commit-485ed46';
 const projectInfo = {
@@ -5,0 +5,0 @@ projectName: 'react-streaming',

package.json

 {
   "name": "react-streaming",
   "description": "React 18 Streaming. Full-fledged & Easy.",
-  "version": "0.3.33-commit-2cf1712",
+  "version": "0.3.33-commit-485ed46",
   "peerDependencies": {
@@ -6,0 +6,0 @@ "react": ">=18",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

145005

increased by1.3%

Lines of code

3071

increased by1.25%

No dependency changes