@zubyjs/react 1.0.74 → 1.0.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zubyjs/react",
-  "version": "1.0.74",
+  "version": "1.0.75",
   "description": "Zuby.js JsxProvider for react",
   "type": "module",
   "main": "index.js",

package/render.d.ts

@@ -1,14 +1,10 @@
 import { RenderToString, RenderToStream } from 'zuby/types.js';
-/**
- * Converts a ReadableStream to a string.
- * @param {NodeJS.ReadableStream} stream
- */
-export declare const streamToString: (stream: NodeJS.ReadableStream) => Promise<string>;
 /**
  * @param {ReactElement} vnode The root JSX element to render (eg: `<App />`)
  */
 export declare const renderToStream: RenderToStream;
 /**
+ * Renders a React element to a string using renderToPipeableStream.
  * @param {ReactElement} vnode The root JSX element to render (eg: `<App />`)
  */
 export declare const renderToString: RenderToString;

package/render.js

@@ -1,26 +1,60 @@
-import { renderToStaticNodeStream } from 'react-dom/server';
-/**
- * Converts a ReadableStream to a string.
- * @param {NodeJS.ReadableStream} stream
- */
-export const streamToString = (stream) => {
-    const chunks = [];
-    return new Promise((resolve, reject) => {
-        stream.on('data', (chunk) => chunks.push(Buffer.from(chunk)));
-        stream.on('error', (e) => reject(e));
-        stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf8')));
-    });
-};
+import { renderToPipeableStream } from 'react-dom/server';
+import { Readable, Writable } from 'stream';
 /**
  * @param {ReactElement} vnode The root JSX element to render (eg: `<App />`)
  */
 export const renderToStream = async (vnode) => {
-    return renderToStaticNodeStream(vnode);
+    return new Promise((resolve, reject) => {
+        const { pipe } = renderToPipeableStream(vnode, {
+            onAllReady() {
+                const chunks = [];
+                const writableStream = new Writable({
+                    write(chunk, encoding, callback) {
+                        chunks.push(Buffer.from(chunk, encoding));
+                        callback();
+                    },
+                    final(callback) {
+                        const readableStream = new Readable({
+                            read() {
+                                this.push(Buffer.concat(chunks));
+                                this.push(null);
+                            },
+                        });
+                        resolve(readableStream);
+                        callback();
+                    },
+                });
+                pipe(writableStream);
+            },
+            onError(error) {
+                reject(error);
+            },
+        });
+    });
 };
 /**
+ * Renders a React element to a string using renderToPipeableStream.
  * @param {ReactElement} vnode The root JSX element to render (eg: `<App />`)
  */
 export const renderToString = async (vnode) => {
-    const stream = renderToStaticNodeStream(vnode);
-    return await streamToString(stream);
+    return new Promise((resolve, reject) => {
+        const { pipe } = renderToPipeableStream(vnode, {
+            onAllReady() {
+                const writableStream = new Writable({
+                    write(chunk, encoding, callback) {
+                        chunks.push(Buffer.from(chunk, encoding));
+                        callback();
+                    },
+                });
+                const chunks = [];
+                writableStream.on('finish', () => {
+                    resolve(Buffer.concat(chunks).toString('utf8'));
+                });
+                pipe(writableStream);
+            },
+            onError(error) {
+                reject(error);
+            },
+        });
+    });
 };

package/router.js

@@ -78,6 +78,8 @@ function matchTemplate(template, path) {
     });
 }
 export function Link(props) {
+    // Shallow copy props to avoid mutation
+    props = { ...props };
     const [isActive] = useRoute(props.href);
     const { localizePath } = usePageContext();
     let href = props.href || props.to || '#';