@zubyjs/preact 1.0.45 → 1.0.47

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,6 @@
+import { useFetch } from './useFetch.js';
+export default function useProps(path, priority = 'auto') {
+    path = `/_props${path}/`;
+    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: () => preact({
         prefreshEnabled: false,

package/package.json

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

package/router.d.ts

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

package/router.js

@@ -1,43 +1,41 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
-import { Router as WouterRouter, Route as WouterRoute, Switch as WouterSwitch, } from 'wouter-preact';
-export { useRoute, useRouter, useParams, useLocation, Link, Redirect, } from 'wouter-preact';
+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 { createElement } from 'preact';
-import { useFetch } from './hooks/index.js';
+import { preloadPage } from 'zuby/preload/index.js';
+import useProps from '@zubyjs/react/src/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,
             }) }) }));
 }
@@ -45,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 });
 }
@@ -55,3 +53,39 @@ export function Error({ error, context }) {
     context.props = {};
     return _jsx(error.component, { context: context, message: 'Page was not found' });
 }
+function loadAsyncTemplates(templates) {
+    return (templates?.map((pageTemplate) => ({
+        ...pageTemplate,
+        component: lazy(pageTemplate.component),
+    })) || []);
+}
+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;
+    // Alias for Preact class names
+    props.activeClassName = props.activeClassName || props.activeClass;
+    props.className = props.className || props.class;
+    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("preact").JSX.Element;

package/templates/loader.js

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