@zubyjs/react 1.0.46 → 1.0.48

package/components/lazyWithPreload.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+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,27 @@
+// Original code from:
+// https://github.com/ianschmitz/react-lazy-with-preload/blob/master/src/index.ts
+import { createElement, forwardRef, lazy, useRef } from 'react';
+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/useFetch.d.ts

@@ -21,8 +21,11 @@ interface OptionsWithoutMetadata extends Options {
     metadata?: false;
 }
 interface UseFetch {
-    (input: RequestInfo, init?: RequestInit | undefined, options?: number | OptionsWithoutMetadata): FetchResponse;
-    (input: RequestInfo, init: RequestInit | undefined, options: OptionsWithMetadata): FetchResponseMetadata;
+    (input: RequestInfo, init?: UseRequestInit | undefined, options?: number | OptionsWithoutMetadata): FetchResponse;
+    (input: RequestInfo, init: UseRequestInit | undefined, options: OptionsWithMetadata): FetchResponseMetadata;
+}
+export interface UseRequestInit extends RequestInit {
+    priority?: 'low' | 'high' | 'auto';
 }
 export declare const useFetch: UseFetch;
 export {};

package/hooks/useProps.d.ts

@@ -0,0 +1 @@
+export default function useProps(path: string, priority?: 'low' | 'high' | 'auto'): string | Object;

package/hooks/useProps.js

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

package/index.js

@@ -11,6 +11,7 @@ export default () => ({
     layoutTemplateFile: normalizePath(resolve(__dirname, 'templates', 'layout.js')),
     innerLayoutTemplateFile: normalizePath(resolve(__dirname, 'templates', 'innerLayout.js')),
     errorTemplateFile: normalizePath(resolve(__dirname, 'templates', 'error.js')),
+    loaderTemplateFile: normalizePath(resolve(__dirname, 'templates', 'loader.js')),
     renderFile: normalizePath(resolve(__dirname, 'render.js')),
     getPlugins: () => react(),
 });

package/package.json

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

package/router.d.ts

@@ -1,4 +1,4 @@
-export { useRoute, useRouter, useParams, useLocation, Link, LinkProps, Redirect, RedirectProps, } from 'wouter';
+export { useRoute, useRouter, useParams, useLocation, Redirect, RedirectProps } from 'wouter';
 import { LazyTemplate } from 'zuby/templates/types.js';
 import { ZubyPageContext } from 'zuby/pageContext/index.js';
 /**
@@ -15,3 +15,14 @@ export declare function Error({ error, context }: {
     error: LazyTemplate;
     context: ZubyPageContext;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function loadAsyncTemplates(templates?: LazyTemplate[]): any[];
+export declare function loadSyncTemplates(templates?: LazyTemplate[]): any[];
+export interface LinkProps {
+    href?: string;
+    to?: string;
+    activeClassName?: string;
+    className?: string;
+    onClick?: (event: MouseEvent) => void;
+    children?: any;
+}
+export declare function Link(props: LinkProps): import("react/jsx-runtime").JSX.Element;

package/router.js

@@ -1,42 +1,41 @@
 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 { Router as WouterRouter, Route as WouterRoute, Switch as WouterSwitch, Link as WouterLink, useRoute, } from 'wouter';
+export { useRoute, useRouter, useParams, useLocation, Redirect } from 'wouter';
 import { useParams } from 'wouter';
-import { createElement, Suspense, lazy } from 'react';
-import { useFetch } from './hooks/index.js';
+import { createElement, Suspense } from 'react';
+import { preloadPage } from 'zuby/preload/index.js';
+import lazyWithPreload from './components/lazyWithPreload.js';
+import useProps from './hooks/useProps.js';
 let pages;
 let apps;
 let errors;
+let loaders;
 /**
  * Zuby's Router component provides support for file-system based routing.
  */
 export default function Router({ context }) {
     const isProduction = import.meta?.env?.MODE === 'production';
-    const loadTemplates = (templates) => templates?.map((pageTemplate) => ({
-        ...pageTemplate,
-        component: lazy(pageTemplate.component),
-    })) || [];
     if (!pages || !isProduction) {
-        pages = loadTemplates(context.templates?.pages);
+        pages = loadAsyncTemplates(context.templates?.pages);
     }
     if (!apps || !isProduction) {
-        apps = loadTemplates(context.templates?.apps);
+        apps = loadAsyncTemplates(context.templates?.apps);
     }
     if (!errors || !isProduction) {
-        errors = loadTemplates(context.templates?.errors);
+        errors = loadAsyncTemplates(context.templates?.errors);
     }
-    const app = apps.find(({ pathRegex }) => {
-        return pathRegex.test(context.url.pathname ?? '');
-    });
-    const error = errors.find(({ pathRegex }) => {
-        return pathRegex.test(context.url.pathname ?? '');
-    });
+    if (!loaders || !isProduction) {
+        loaders = loadSyncTemplates(context.templates?.loaders);
+    }
+    const app = matchTemplate(apps, context.url.pathname);
+    const error = matchTemplate(errors, context.url.pathname);
+    const loader = matchTemplate(loaders, context.url.pathname);
     const routes = [
         ...pages.map((page) => (_jsx(WouterRoute, { path: page.path, children: _jsx(Page, { context: context, page: page }) }, page.path))),
         _jsx(WouterRoute, { children: error?.component && _jsx(Error, { context: context, error: error }) }, "error"),
     ];
     const page = _jsx(WouterSwitch, { children: routes });
-    return (_jsx(WouterRouter, { ssrPath: context.url.pathname, children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: createElement(app?.component, {
+    return (_jsx(WouterRouter, { ssrPath: context.url.pathname, children: _jsx(Suspense, { fallback: loader?.component && _jsx(loader.component, {}), children: createElement(app?.component, {
                 children: page,
             }) }) }));
 }
@@ -44,7 +43,7 @@ export function Page({ page, context }) {
     context.statusCode = 200;
     context.params = useParams();
     if (typeof window !== 'undefined' && !context.isInitialPath) {
-        context.props = useFetch(`/_props${context.url.pathname}`);
+        context.props = useProps(context.url.pathname);
     }
     return _jsx(page.component, { ...context.props, context: context });
 }
@@ -54,3 +53,36 @@ export function Error({ error, context }) {
     context.props = {};
     return _jsx(error.component, { context: context, message: 'Page was not found' });
 }
+export function loadAsyncTemplates(templates) {
+    return (templates?.map((pageTemplate) => ({
+        ...pageTemplate,
+        component: lazyWithPreload(pageTemplate.component),
+    })) || []);
+}
+export function loadSyncTemplates(templates) {
+    return (templates?.map((pageTemplate) => ({
+        ...pageTemplate,
+        component: pageTemplate.component(),
+    })) || []);
+}
+function matchTemplate(template, path) {
+    return template.find(({ pathRegex }) => {
+        return pathRegex.test(path ?? '');
+    });
+}
+export function Link(props) {
+    const [isActive] = useRoute(props.href);
+    const href = props.href || props.to;
+    const className = `${props?.className} ${isActive ? props.activeClassName : ''}`;
+    // Preload the page
+    if (href) {
+        preloadPage(href, () => {
+            try {
+                matchTemplate(pages || [], href)?.component?.preload();
+                useProps(href, 'low');
+            }
+            catch (_e) { }
+        });
+    }
+    return (_jsx(WouterLink, { ...props, className: className, children: props.children }));
+}

package/templates/loader.d.ts

@@ -0,0 +1 @@
+export default function Loader(): import("react/jsx-runtime").JSX.Element;

package/templates/loader.js

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