@zubyjs/preact 1.0.47 → 1.0.48

package/components/lazyWithPreload.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from 'preact';
+export type PreloadableComponent<T extends ComponentType<any>> = T & {
+    preload: () => Promise<T>;
+};
+export declare function lazyWithPreload<T extends ComponentType<any>>(factory: () => Promise<{
+    default: T;
+}>): PreloadableComponent<T>;
+export default lazyWithPreload;

package/components/lazyWithPreload.js

@@ -0,0 +1,29 @@
+// Original code from:
+// https://github.com/ianschmitz/react-lazy-with-preload/blob/master/src/index.ts
+import { createElement } from 'preact';
+import { forwardRef, lazy } from 'preact/compat';
+import { useRef } from 'preact/hooks';
+export function lazyWithPreload(factory) {
+    const ReactLazyComponent = lazy(factory);
+    let PreloadedComponent;
+    let factoryPromise;
+    const Component = forwardRef(function LazyWithPreload(props, ref) {
+        // Once one of these is chosen, we must ensure that it continues to be
+        // used for all subsequent renders, otherwise it can cause the
+        // underlying component to be unmounted and remounted.
+        const ComponentToRender = useRef(PreloadedComponent ?? ReactLazyComponent);
+        return createElement(ComponentToRender.current, Object.assign(ref ? { ref } : {}, props));
+    });
+    const LazyWithPreload = Component;
+    LazyWithPreload.preload = () => {
+        if (!factoryPromise) {
+            factoryPromise = factory().then(module => {
+                PreloadedComponent = module.default;
+                return PreloadedComponent;
+            });
+        }
+        return factoryPromise;
+    };
+    return LazyWithPreload;
+}
+export default lazyWithPreload;

package/hooks/useProps.js

@@ -1,6 +1,8 @@
 import { useFetch } from './useFetch.js';
+import { getContext } from 'zuby/context/index.js';
 export default function useProps(path, priority = 'auto') {
-    path = `/_props${path}/`;
+    const { buildId } = getContext();
+    path = `/_props${path}/?${buildId}`;
     path = path.replace(/\/+/g, '/');
     return useFetch(path);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zubyjs/preact",
-  "version": "1.0.47",
+  "version": "1.0.48",
   "description": "Zuby.js JsxProvider for Preact",
   "type": "module",
   "main": "index.js",

package/router.js

@@ -2,10 +2,11 @@ import { jsx as _jsx } from "preact/jsx-runtime";
 import { Router as WouterRouter, Route as WouterRoute, Switch as WouterSwitch, Link as WouterLink, useRoute, } from 'wouter-preact';
 export { useRoute, useRouter, useParams, useLocation, Redirect, } from 'wouter-preact';
 import { useParams } from 'wouter-preact';
-import { Suspense, lazy } from 'preact/compat';
+import { Suspense } from 'preact/compat';
 import { createElement } from 'preact';
 import { preloadPage } from 'zuby/preload/index.js';
-import useProps from '@zubyjs/react/src/hooks/useProps.js';
+import lazyWithPreload from './components/lazyWithPreload.js';
+import useProps from './hooks/useProps.js';
 let pages;
 let apps;
 let errors;
@@ -56,7 +57,7 @@ export function Error({ error, context }) {
 function loadAsyncTemplates(templates) {
     return (templates?.map((pageTemplate) => ({
         ...pageTemplate,
-        component: lazy(pageTemplate.component),
+        component: lazyWithPreload(pageTemplate.component),
     })) || []);
 }
 function loadSyncTemplates(templates) {