react-streaming - npm Package Compare versions

Comparing version 0.2.13 to 0.2.14

dist/cjs/renderToStream.js

@@ -112,3 +112,3 @@ "use strict";
     let promiseResolved = false;
-    const { pipeWrapper, injectToStream, streamEnd } = await (0, createPipeWrapper_1.createPipeWrapper)(pipeOriginal, {
+    const { pipeForUser, injectToStream, streamEnd } = await (0, createPipeWrapper_1.createPipeWrapper)(pipeOriginal, {
         onReactBug(err) {
@@ -134,3 +134,3 @@ debug('react bug');
     return {
-        pipe: pipeWrapper,
+        pipe: pipeForUser,
         readable: null,
@@ -181,6 +181,6 @@ streamEnd: wrapStreamEnd(streamEnd, didError),
         throw firstErr;
-    const { readableWrapper, streamEnd, injectToStream } = (0, createReadableWrapper_1.createReadableWrapper)(readableOriginal);
+    const { readableForUser, streamEnd, injectToStream } = (0, createReadableWrapper_1.createReadableWrapper)(readableOriginal);
     promiseResolved = true;
     return {
-        readable: readableWrapper,
+        readable: readableForUser,
         pipe: null,
@@ -187,0 +187,0 @@ streamEnd: wrapStreamEnd(streamEnd, didError),

dist/cjs/renderToStream/createPipeWrapper.d.ts

@@ -6,8 +6,8 @@ /// <reference types="node" />
 declare type Pipe = (writable: StreamNodeWritable) => void;
-declare function createPipeWrapper(pipeOriginal: Pipe, { onReactBug }: {
+declare function createPipeWrapper(pipeFromReact: Pipe, { onReactBug }: {
     onReactBug: (err: unknown) => void;
 }): Promise<{
-    pipeWrapper: Pipe;
+    pipeForUser: Pipe;
     streamEnd: Promise<void>;
     injectToStream: (chunk: string) => void;
 }>;

dist/cjs/renderToStream/createPipeWrapper.js

@@ -8,5 +8,5 @@ "use strict";
 const debug = (0, utils_1.createDebugger)('react-streaming:createPipeWrapper');
-async function createPipeWrapper(pipeOriginal, { onReactBug }) {
+async function createPipeWrapper(pipeFromReact, { onReactBug }) {
     const { Writable } = await (0, loadNodeStreamModule_1.loadNodeStreamModule)();
-    const { pipeWrapper, streamEnd } = createPipeWrapper();
+    const { pipeForUser, streamEnd } = createPipeForUser();
     const bufferParams = {
@@ -16,5 +16,5 @@ writeChunk: null
     const { injectToStream, onBeforeWrite, onBeforeEnd } = (0, createBuffer_1.createBuffer)(bufferParams);
-    return { pipeWrapper, streamEnd, injectToStream };
-    function createPipeWrapper() {
-        debug('createPipeWrapper()');
+    return { pipeForUser, streamEnd, injectToStream };
+    function createPipeForUser() {
+        debug('createPipeForUser()');
         let onEnded;
@@ -24,8 +24,8 @@ const streamEnd = new Promise((r) => {
         });
-        const pipeWrapper = (writableOriginal) => {
-            const writableProxy = new Writable({
+        const pipeForUser = (writableFromUser) => {
+            const writableForReact = new Writable({
                 write(chunk, encoding, callback) {
                     debug('write');
                     onBeforeWrite(chunk);
-                    writableOriginal.write(chunk, encoding, callback);
+                    writableFromUser.write(chunk, encoding, callback);
                 },
@@ -35,3 +35,3 @@ final(callback) {
                     onBeforeEnd();
-                    writableOriginal.end();
+                    writableFromUser.end();
                     onEnded();
@@ -45,3 +45,3 @@ callback();
                         onReactBug(err);
-                    writableOriginal.destroy(err !== null && err !== void 0 ? err : undefined);
+                    writableFromUser.destroy(err !== null && err !== void 0 ? err : undefined);
                     onEnded();
@@ -51,15 +51,15 @@ }
             bufferParams.writeChunk = (chunk) => {
-                writableOriginal.write(chunk);
+                writableFromUser.write(chunk);
             };
-            writableProxy.flush = () => {
-                if (typeof writableOriginal.flush === 'function') {
+            writableForReact.flush = () => {
+                if (typeof writableFromUser.flush === 'function') {
                     ;
-                    writableOriginal.flush();
+                    writableFromUser.flush();
                 }
             };
-            pipeOriginal(writableProxy);
+            pipeFromReact(writableForReact);
         };
-        return { pipeWrapper, streamEnd };
+        return { pipeForUser, streamEnd };
     }
 }
 exports.createPipeWrapper = createPipeWrapper;

dist/cjs/renderToStream/createReadableWrapper.d.ts

 export { createReadableWrapper };
-declare function createReadableWrapper(readableOriginal: ReadableStream): {
-    readableWrapper: ReadableStream<any>;
+declare function createReadableWrapper(readableFromReact: ReadableStream): {
+    readableForUser: ReadableStream<any>;
     streamEnd: Promise<void>;
     injectToStream: (chunk: string) => void;
 };

dist/cjs/renderToStream/createReadableWrapper.js

@@ -5,7 +5,10 @@ "use strict";
 const createBuffer_1 = require("./createBuffer");
-function createReadableWrapper(readableOriginal) {
+// `readableFromReact` is the readable stream provided by React
+// `readableForUser` is the readable stream we give to the user (the wrapper)
+// Essentially: what React writes to `readableFromReact` is forwarded to `readableForUser`
+function createReadableWrapper(readableFromReact) {
     const bufferParams = {
         writeChunk: null
     };
-    let controllerWrapper;
+    let controllerOfUserStream;
     let onEnded;
@@ -15,5 +18,5 @@ const streamEnd = new Promise((r) => {
     });
-    const readableWrapper = new ReadableStream({
+    const readableForUser = new ReadableStream({
         start(controller) {
-            controllerWrapper = controller;
+            controllerOfUserStream = controller;
             onReady(onEnded);
@@ -23,8 +26,8 @@ }
     const { injectToStream, onBeforeWrite, onBeforeEnd } = (0, createBuffer_1.createBuffer)(bufferParams);
-    return { readableWrapper, streamEnd, injectToStream };
+    return { readableForUser, streamEnd, injectToStream };
     async function onReady(onEnded) {
         const writeChunk = (bufferParams.writeChunk = (chunk) => {
-            controllerWrapper.enqueue(encodeForWebStream(chunk));
+            controllerOfUserStream.enqueue(encodeForWebStream(chunk));
         });
-        const reader = readableOriginal.getReader();
+        const reader = readableFromReact.getReader();
         while (true) {
@@ -36,3 +39,3 @@ let result;
             catch (err) {
-                controllerWrapper.close();
+                controllerOfUserStream.close();
                 throw err;
@@ -50,3 +53,3 @@ }
             onBeforeEnd();
-            controllerWrapper.close();
+            controllerOfUserStream.close();
             onEnded();
@@ -53,0 +56,0 @@ }, 0);

dist/esm/renderToStream.js

@@ -83,3 +83,3 @@ export { renderToStream };
     let promiseResolved = false;
-    const { pipeWrapper, injectToStream, streamEnd } = await createPipeWrapper(pipeOriginal, {
+    const { pipeForUser, injectToStream, streamEnd } = await createPipeWrapper(pipeOriginal, {
         onReactBug(err) {
@@ -105,3 +105,3 @@ debug('react bug');
     return {
-        pipe: pipeWrapper,
+        pipe: pipeForUser,
         readable: null,
@@ -152,6 +152,6 @@ streamEnd: wrapStreamEnd(streamEnd, didError),
         throw firstErr;
-    const { readableWrapper, streamEnd, injectToStream } = createReadableWrapper(readableOriginal);
+    const { readableForUser, streamEnd, injectToStream } = createReadableWrapper(readableOriginal);
     promiseResolved = true;
     return {
-        readable: readableWrapper,
+        readable: readableForUser,
         pipe: null,
@@ -158,0 +158,0 @@ streamEnd: wrapStreamEnd(streamEnd, didError),

dist/esm/renderToStream/createPipeWrapper.d.ts

@@ -6,8 +6,8 @@ /// <reference types="node" />
 declare type Pipe = (writable: StreamNodeWritable) => void;
-declare function createPipeWrapper(pipeOriginal: Pipe, { onReactBug }: {
+declare function createPipeWrapper(pipeFromReact: Pipe, { onReactBug }: {
     onReactBug: (err: unknown) => void;
 }): Promise<{
-    pipeWrapper: Pipe;
+    pipeForUser: Pipe;
     streamEnd: Promise<void>;
     injectToStream: (chunk: string) => void;
 }>;

dist/esm/renderToStream/createPipeWrapper.js

@@ -6,5 +6,5 @@ export { createPipeWrapper };
 const debug = createDebugger('react-streaming:createPipeWrapper');
-async function createPipeWrapper(pipeOriginal, { onReactBug }) {
+async function createPipeWrapper(pipeFromReact, { onReactBug }) {
     const { Writable } = await loadNodeStreamModule();
-    const { pipeWrapper, streamEnd } = createPipeWrapper();
+    const { pipeForUser, streamEnd } = createPipeForUser();
     const bufferParams = {
@@ -14,5 +14,5 @@ writeChunk: null
     const { injectToStream, onBeforeWrite, onBeforeEnd } = createBuffer(bufferParams);
-    return { pipeWrapper, streamEnd, injectToStream };
-    function createPipeWrapper() {
-        debug('createPipeWrapper()');
+    return { pipeForUser, streamEnd, injectToStream };
+    function createPipeForUser() {
+        debug('createPipeForUser()');
         let onEnded;
@@ -22,8 +22,8 @@ const streamEnd = new Promise((r) => {
         });
-        const pipeWrapper = (writableOriginal) => {
-            const writableProxy = new Writable({
+        const pipeForUser = (writableFromUser) => {
+            const writableForReact = new Writable({
                 write(chunk, encoding, callback) {
                     debug('write');
                     onBeforeWrite(chunk);
-                    writableOriginal.write(chunk, encoding, callback);
+                    writableFromUser.write(chunk, encoding, callback);
                 },
@@ -33,3 +33,3 @@ final(callback) {
                     onBeforeEnd();
-                    writableOriginal.end();
+                    writableFromUser.end();
                     onEnded();
@@ -43,3 +43,3 @@ callback();
                         onReactBug(err);
-                    writableOriginal.destroy(err !== null && err !== void 0 ? err : undefined);
+                    writableFromUser.destroy(err !== null && err !== void 0 ? err : undefined);
                     onEnded();
@@ -49,14 +49,14 @@ }
             bufferParams.writeChunk = (chunk) => {
-                writableOriginal.write(chunk);
+                writableFromUser.write(chunk);
             };
-            writableProxy.flush = () => {
-                if (typeof writableOriginal.flush === 'function') {
+            writableForReact.flush = () => {
+                if (typeof writableFromUser.flush === 'function') {
                     ;
-                    writableOriginal.flush();
+                    writableFromUser.flush();
                 }
             };
-            pipeOriginal(writableProxy);
+            pipeFromReact(writableForReact);
         };
-        return { pipeWrapper, streamEnd };
+        return { pipeForUser, streamEnd };
     }
 }

dist/esm/renderToStream/createReadableWrapper.d.ts

 export { createReadableWrapper };
-declare function createReadableWrapper(readableOriginal: ReadableStream): {
-    readableWrapper: ReadableStream<any>;
+declare function createReadableWrapper(readableFromReact: ReadableStream): {
+    readableForUser: ReadableStream<any>;
     streamEnd: Promise<void>;
     injectToStream: (chunk: string) => void;
 };

dist/esm/renderToStream/createReadableWrapper.js

 export { createReadableWrapper };
 import { createBuffer } from './createBuffer';
-function createReadableWrapper(readableOriginal) {
+// `readableFromReact` is the readable stream provided by React
+// `readableForUser` is the readable stream we give to the user (the wrapper)
+// Essentially: what React writes to `readableFromReact` is forwarded to `readableForUser`
+function createReadableWrapper(readableFromReact) {
     const bufferParams = {
         writeChunk: null
     };
-    let controllerWrapper;
+    let controllerOfUserStream;
     let onEnded;
@@ -12,5 +15,5 @@ const streamEnd = new Promise((r) => {
     });
-    const readableWrapper = new ReadableStream({
+    const readableForUser = new ReadableStream({
         start(controller) {
-            controllerWrapper = controller;
+            controllerOfUserStream = controller;
             onReady(onEnded);
@@ -20,8 +23,8 @@ }
     const { injectToStream, onBeforeWrite, onBeforeEnd } = createBuffer(bufferParams);
-    return { readableWrapper, streamEnd, injectToStream };
+    return { readableForUser, streamEnd, injectToStream };
     async function onReady(onEnded) {
         const writeChunk = (bufferParams.writeChunk = (chunk) => {
-            controllerWrapper.enqueue(encodeForWebStream(chunk));
+            controllerOfUserStream.enqueue(encodeForWebStream(chunk));
         });
-        const reader = readableOriginal.getReader();
+        const reader = readableFromReact.getReader();
         while (true) {
@@ -33,3 +36,3 @@ let result;
             catch (err) {
-                controllerWrapper.close();
+                controllerOfUserStream.close();
                 throw err;
@@ -47,3 +50,3 @@ }
             onBeforeEnd();
-            controllerWrapper.close();
+            controllerOfUserStream.close();
             onEnded();
@@ -50,0 +53,0 @@ }, 0);

package.json

 {
   "name": "react-streaming",
   "description": "React 18 Streaming. Full-fledged & Easy.",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "main": "./dist/cjs/index.js",
@@ -6,0 +6,0 @@ "peerDependencies": {

README.md

@@ -11,2 +11,4 @@ <p align="center">
 
+> Unfamiliar with React Streaming? Check out [Dan's article about SSR and Streaming](https://github.com/reactwg/react-18/discussions/37).
+
 Follow: [Twitter > @brillout](https://twitter.com/brillout)
@@ -55,2 +57,7 @@ <br/>
 
+> ⚠️
+> While `react-streaming` is stable in itself (it's used in production and has good CI test coverage), note that React's SSR streaming support is still early and that the React team is working on high-level APIs that may make parts of `react-streaming` obsolete, see [React RFC injectToStream - @sebmarkbage comment](https://github.com/reactjs/rfcs/pull/219#issuecomment-1115398084).
+
+<br/>
+
 ## Why Streaming
@@ -211,2 +218,5 @@
 
+> ⚠️
+> `useAsync()` currently doesn't work because of a React bug: [#24669 - Bug: `useId()` not working inside `<Suspense>`](https://github.com/facebook/react/issues/24669).
+
 <br/>
@@ -213,0 +223,0 @@

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

72114

increased by1.79%

Lines of code

1495

increased by0.4%

Number of lines in readme file

316

increased by3.27%

No dependency changes