@zubyjs/react 1.0.39 → 1.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zubyjs/react",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "description": "Zuby.js JsxProvider for react",
   "type": "module",
   "main": "index.js",
@@ -16,8 +16,8 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@vitejs/plugin-react": "^4.2.0",
-    "wouter": "^2.12.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "wouter": "^2.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "@types/react": "^18.2.37",

package/router.d.ts

@@ -7,9 +7,10 @@ import { ZubyPageContext } from 'zuby/pageContext/index.js';
 export default function Router({ context }: {
     context: ZubyPageContext;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function Page({ page, context }: {
+export declare function Page({ page, context, initialPath, }: {
     page: LazyTemplate;
     context: ZubyPageContext;
+    initialPath?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function Error({ error, context }: {
     error: LazyTemplate;

package/router.js

@@ -2,7 +2,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 { useParams } from 'wouter';
-import { Suspense, lazy } from 'react';
+import { Suspense, lazy, useEffect, useState } from 'react';
 import { createElement } from 'react';
 import { useFetch } from './hooks/index.js';
 let pages;
@@ -13,6 +13,14 @@ let errors;
  */
 export default function Router({ context }) {
     const isProduction = import.meta?.env?.MODE === 'production';
+    const [initialPath, setInitialPath] = useState(true);
+    useEffect(() => {
+        const onPathChange = () => setInitialPath(false);
+        window.addEventListener('popstate', onPathChange);
+        return () => {
+            window.removeEventListener('popstate', onPathChange);
+        };
+    }, [initialPath, setInitialPath]);
     const loadTemplates = (templates) => templates?.map((pageTemplate) => ({
         ...pageTemplate,
         component: lazy(pageTemplate.component),
@@ -33,7 +41,7 @@ export default function Router({ context }) {
         return pathRegex.test(context.url.pathname ?? '');
     });
     const routes = [
-        ...pages.map((page) => (_jsx(WouterRoute, { path: page.path, children: _jsx(Page, { context: context, page: page }) }, page.path))),
+        ...pages.map((page) => (_jsx(WouterRoute, { path: page.path, children: _jsx(Page, { context: context, page: page, initialPath: initialPath }) }, page.path))),
         _jsx(WouterRoute, { children: error?.component && _jsx(Error, { context: context, error: error }) }, "error"),
     ];
     const page = _jsx(WouterSwitch, { children: routes });
@@ -41,13 +49,13 @@ export default function Router({ context }) {
                 children: page,
             }) }) }));
 }
-export function Page({ page, context }) {
+export function Page({ page, context, initialPath, }) {
     context.statusCode = 200;
     context.params = useParams();
-    if (typeof window !== 'undefined') {
+    if (typeof window !== 'undefined' && !initialPath) {
         context.props = useFetch(`/_props${context.url.pathname}`);
     }
-    return _jsx(page.component, { context: context });
+    return _jsx(page.component, { ...context.props, context: context });
 }
 export function Error({ error, context }) {
     context.statusCode = 404;

package/templates/entry.js

@@ -5,7 +5,9 @@ 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 pageContext = new ZubyPageContext({
+        props: global._props,
+    });
     const appElement = document.getElementById('app');
     if (appElement.hasChildNodes()) {
         hydrateRoot(appElement, _jsx(Router, { context: pageContext }));

package/templates/innerLayout.d.ts

@@ -1,3 +1,5 @@
-export default function InnerLayout({ innerHtml }: {
+import { ZubyPageContext } from 'zuby/pageContext/index.js';
+export default function InnerLayout({ innerHtml, context, }: {
     innerHtml: string;
+    context: ZubyPageContext;
 }): import("react/jsx-runtime").JSX.Element;

package/templates/innerLayout.js

@@ -1,4 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function InnerLayout({ innerHtml }) {
-    return _jsx("div", { id: "app", dangerouslySetInnerHTML: { __html: innerHtml } });
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function InnerLayout({ innerHtml, context, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { id: "app", dangerouslySetInnerHTML: { __html: innerHtml } }), _jsx("script", { type: "text/javascript", dangerouslySetInnerHTML: {
+                    __html: `global._props=${JSON.stringify(context.props)};`,
+                } })] }));
 }