@zubyjs/react 1.0.30 → 1.0.32

package/index.js

@@ -1,4 +1,3 @@
-import render from './render.js';
 import { fileURLToPath } from 'url';
 import { dirname, resolve } from 'path';
 import { normalizePath } from 'zuby/utils/pathUtils.js';
@@ -12,6 +11,6 @@ export default () => ({
     layoutTemplateFile: normalizePath(resolve(__dirname, 'templates', 'layout.js')),
     innerLayoutTemplateFile: normalizePath(resolve(__dirname, 'templates', 'innerLayout.js')),
     errorTemplateFile: normalizePath(resolve(__dirname, 'templates', 'error.js')),
-    render,
+    renderFile: normalizePath(resolve(__dirname, 'render.js')),
     getPlugins: () => react(),
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zubyjs/react",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "Zuby.js JsxProvider for react",
   "type": "module",
   "main": "index.js",
@@ -8,6 +8,7 @@
     "release": "cd ./dist && npm publish --access public && cd ..",
     "bump-version": "npm version patch",
     "build": "rm -rf dist/ stage/ && mkdir dist && tsc && cp -rf package.json README.md stage/react/src/* dist/ && rm -rf stage/",
+    "push-build": "npm run build && cd dist && yalc push --force && cd ..",
     "test": "exit 0"
   },
   "publishConfig": {

package/render.d.ts

@@ -1,5 +1,14 @@
-import { ReactElement } from 'react';
+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;
 /**
  * @param {ReactElement} vnode The root JSX element to render (eg: `<App />`)
  */
-export default function render(vnode: ReactElement): Promise<string>;
+export declare const renderToString: RenderToString;

package/render.js

@@ -1,16 +1,26 @@
 import { renderToStaticNodeStream } from 'react-dom/server';
 /**
- * @param {ReactElement} vnode The root JSX element to render (eg: `<App />`)
+ * Converts a ReadableStream to a string.
+ * @param {NodeJS.ReadableStream} stream
  */
-export default async function render(vnode) {
-    const stream = renderToStaticNodeStream(vnode);
-    return await streamToString(stream);
-}
-function streamToString(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')));
     });
-}
+};
+/**
+ * @param {ReactElement} vnode The root JSX element to render (eg: `<App />`)
+ */
+export const renderToStream = async (vnode) => {
+    return renderToStaticNodeStream(vnode);
+};
+/**
+ * @param {ReactElement} vnode The root JSX element to render (eg: `<App />`)
+ */
+export const renderToString = async (vnode) => {
+    const stream = renderToStaticNodeStream(vnode);
+    return await streamToString(stream);
+};

package/router.d.ts

@@ -1,4 +1,8 @@
+export { useRoute, useRouter, useParams, useLocation, Link, LinkProps, Redirect, RedirectProps, } from 'wouter';
+import { ZubyPageContext } from 'zuby/pageContext/index.js';
 /**
  * Zuby's Router component provides support for file-system based routing.
  */
-export default function Router(): import("react/jsx-runtime").JSX.Element;
+export default function Router({ context }: {
+    context: ZubyPageContext;
+}): import("react/jsx-runtime").JSX.Element;

package/router.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Router as WouterRouter, Route as WouterRoute, Switch as WouterSwitch } from 'wouter';
+export { useRoute, useRouter, useParams, useLocation, Link, Redirect, } from 'wouter';
 import { Suspense, lazy } from 'react';
-import { getContext } from 'zuby/context/index.js';
 import { createElement } from 'react';
 let pages;
 let apps;
@@ -9,29 +9,28 @@ let errors;
 /**
  * Zuby's Router component provides support for file-system based routing.
  */
-export default function Router() {
-    const zubyContext = getContext();
+export default function Router({ context }) {
     const loadTemplates = (templates) => templates?.map((pageTemplate) => ({
         ...pageTemplate,
         component: lazy(pageTemplate.component),
     })) || [];
     if (!pages) {
-        pages = loadTemplates(zubyContext.templates?.pages);
+        pages = loadTemplates(context.templates?.pages);
     }
     if (!apps) {
-        apps = loadTemplates(zubyContext.templates?.apps);
+        apps = loadTemplates(context.templates?.apps);
     }
     if (!errors) {
-        errors = loadTemplates(zubyContext.templates?.errors);
+        errors = loadTemplates(context.templates?.errors);
     }
     const app = apps.find(({ pathRegex }) => {
-        return pathRegex.test(zubyContext.currentPath ?? '');
+        return pathRegex.test(context.url.pathname ?? '');
     });
     const error = errors.find(({ pathRegex }) => {
-        return pathRegex.test(zubyContext.currentPath ?? '');
+        return pathRegex.test(context.url.pathname ?? '');
     });
-    const page = (_jsx(WouterSwitch, { children: pages.map((page) => (_jsx(WouterRoute, { path: page.path, component: page.component }))) }));
-    return (_jsx(WouterRouter, { ssrPath: zubyContext.currentPath, children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: createElement(app?.component, {
+    const page = (_jsx(WouterSwitch, { children: pages.map((page) => (_jsx(WouterRoute, { path: page.path, children: _jsx(page.component, { context: context }) }))) }));
+    return (_jsx(WouterRouter, { ssrPath: context.url.pathname, children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: createElement(app?.component, {
                 children: page,
             }) }) }));
 }

package/templates/entry.js

@@ -3,13 +3,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-nocheck
 import { hydrateRoot, createRoot } from 'react-dom/client';
 import Router from '@zubyjs/react/router.js';
+import { ZubyPageContext } from 'zuby/pageContext/index.js';
 if (typeof window !== 'undefined') {
+    const pageContext = new ZubyPageContext();
     const appElement = document.getElementById('app');
     if (appElement.hasChildNodes()) {
-        hydrateRoot(appElement, _jsx(Router, {}));
+        hydrateRoot(appElement, _jsx(Router, { context: pageContext }));
     }
     else {
-        createRoot(appElement).render(_jsx(Router, {}));
+        createRoot(appElement).render(_jsx(Router, { context: pageContext }));
     }
 }
 export default Router;

package/templates/error.d.ts

@@ -1,2 +1,2 @@
 import { PropsWithChildren } from 'react';
-export default function App({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export default function Error({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/templates/error.js

@@ -1,4 +1,4 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-export default function App({ children }) {
+export default function Error({ children }) {
     return _jsx(_Fragment, { children: children });
 }

package/templates/innerLayout.d.ts

@@ -1,2 +1,3 @@
-import { PropsWithChildren } from 'react';
-export default function InnerLayout({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export default function InnerLayout({ innerHtml }: {
+    innerHtml: string;
+}): import("react/jsx-runtime").JSX.Element;

package/templates/innerLayout.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function InnerLayout({ children }) {
-    return _jsx("div", { id: "app", children: children });
+export default function InnerLayout({ innerHtml }) {
+    return _jsx("div", { id: "app", dangerouslySetInnerHTML: { __html: innerHtml } });
 }

package/templates/layout.d.ts

@@ -1,2 +1,5 @@
 import { PropsWithChildren } from 'react';
-export default function Layout({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+import { ZubyPageContext } from 'zuby/pageContext/index.js';
+export default function Layout({ children, context, }: PropsWithChildren<{
+    context: ZubyPageContext;
+}>): import("react/jsx-runtime").JSX.Element;

package/templates/layout.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function Layout({ children }) {
-    return (_jsxs("html", { children: [_jsxs("head", { children: [_jsx("meta", { charSet: "UTF-8" }), _jsx("title", { children: "Something" })] }), _jsx("body", { children: children })] }));
+export default function Layout({ children, context, }) {
+    return (_jsxs("html", { children: [_jsxs("head", { children: [_jsx("meta", { charSet: "UTF-8" }), _jsx("title", { children: context.title })] }), _jsx("body", { children: children })] }));
 }