@zubyjs/react 1.0.36 → 1.0.37

package/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useFetch } from './useFetch.js';

package/hooks/index.js

@@ -0,0 +1 @@
+export { useFetch } from './useFetch.js';

package/hooks/useFetch.d.ts

@@ -0,0 +1,28 @@
+type FetchResponse = Object | string;
+interface FetchResponseMetadata {
+    bodyUsed: boolean;
+    contentType: null | string;
+    headers: Headers;
+    ok: boolean;
+    redirected: boolean;
+    response: FetchResponse;
+    status: number;
+    statusText: string;
+    url: string;
+}
+interface Options {
+    lifespan?: number;
+    metadata?: boolean;
+}
+interface OptionsWithMetadata extends Options {
+    metadata: true;
+}
+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;
+}
+export declare const useFetch: UseFetch;
+export {};

package/hooks/useFetch.js

@@ -0,0 +1,101 @@
+const getDefaultFetchFunction = () => {
+    if (typeof window === 'undefined') {
+        return () => {
+            return Promise.reject(new Error('Cannot find `window`. Use `createUseFetch` to provide a custom `fetch` function.'));
+        };
+    }
+    if (typeof window.fetch === 'undefined') {
+        return () => {
+            return Promise.reject(new Error('Cannot find `window.fetch`. Use `createUseFetch` to provide a custom `fetch` function.'));
+        };
+    }
+    return window.fetch;
+};
+const createUseFetch = (fetch = getDefaultFetchFunction()) => {
+    // Create a set of caches for this hook.
+    const caches = [];
+    function useFetch(input, init, options = 0) {
+        if (typeof options === 'number') {
+            return useFetch(input, init, { lifespan: options });
+        }
+        const { metadata = false, lifespan = 0 } = options;
+        // Check each cache by this useFetch hook.
+        for (const cache of caches) {
+            // If this cache matches the request,
+            if (JSON.stringify(cache.init) === JSON.stringify(init) &&
+                JSON.stringify(cache.input) === JSON.stringify(input)) {
+                // If an error occurred, throw it so that componentDidCatch can handle
+                //   it.
+                if (Object.prototype.hasOwnProperty.call(cache, 'error')) {
+                    throw cache.error;
+                }
+                // If a response was successful, return it.
+                if (Object.prototype.hasOwnProperty.call(cache, 'response')) {
+                    if (metadata) {
+                        return {
+                            bodyUsed: cache.bodyUsed,
+                            contentType: cache.contentType,
+                            headers: cache.headers,
+                            ok: cache.ok,
+                            redirected: cache.redirected,
+                            response: cache.response,
+                            status: cache.status,
+                            statusText: cache.statusText,
+                            url: cache.url,
+                        };
+                    }
+                    return cache.response;
+                }
+                // If we are still waiting, throw the Promise so that Suspense can
+                //   fallback.
+                throw cache.fetch;
+            }
+        }
+        // If no request in the cache matched this one, create a new cache entry.
+        const cache = {
+            // Make the fetch request.
+            fetch: fetch(input, init)
+                // Parse the response.
+                .then((response) => {
+                cache.contentType = response.headers.get('Content-Type');
+                if (metadata) {
+                    cache.bodyUsed = response.bodyUsed;
+                    cache.headers = response.headers;
+                    cache.ok = response.ok;
+                    cache.redirected = response.redirected;
+                    cache.status = response.status;
+                    cache.statusText = response.statusText;
+                }
+                if (cache.contentType && cache.contentType.indexOf('application/json') !== -1) {
+                    return response.json();
+                }
+                return response.text();
+            })
+                // Cache the response.
+                .then((response) => {
+                cache.response = response;
+            })
+                // Handle an error.
+                .catch((e) => {
+                cache.error = e;
+            })
+                // Invalidate the cache.
+                .then(() => {
+                if (lifespan > 0) {
+                    setTimeout(() => {
+                        const index = caches.indexOf(cache);
+                        if (index !== -1) {
+                            caches.splice(index, 1);
+                        }
+                    }, lifespan);
+                }
+            }),
+            init,
+            input,
+        };
+        caches.push(cache);
+        throw cache.fetch;
+    }
+    return useFetch;
+};
+export const useFetch = createUseFetch();

package/package.json

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

package/router.d.ts

@@ -1,4 +1,5 @@
 export { useRoute, useRouter, useParams, useLocation, Link, LinkProps, Redirect, RedirectProps, } from 'wouter';
+import { LazyTemplate } from 'zuby/templates/types.js';
 import { ZubyPageContext } from 'zuby/pageContext/index.js';
 /**
  * Zuby's Router component provides support for file-system based routing.
@@ -6,3 +7,7 @@ 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 }: {
+    page: LazyTemplate;
+    context: ZubyPageContext;
+}): import("react/jsx-runtime").JSX.Element;

package/router.js

@@ -3,6 +3,7 @@ import { Router as WouterRouter, Route as WouterRoute, Switch as WouterSwitch }
 export { useRoute, useRouter, useParams, useLocation, Link, Redirect, } from 'wouter';
 import { Suspense, lazy } from 'react';
 import { createElement } from 'react';
+import { useFetch } from './hooks/index.js';
 let pages;
 let apps;
 let errors;
@@ -31,7 +32,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.component, { context: context }) }, page.path))),
+        ...pages.map((page) => (_jsx(WouterRoute, { path: page.path, children: _jsx(Page, { context: context, page: page }) }, page.path))),
         _jsx(WouterRoute, { children: error?.component && (_jsx(error.component, { context: context, statusCode: (context.statusCode = 404), message: 'Page was not found' })) }, "error"),
     ];
     const page = _jsx(WouterSwitch, { children: routes });
@@ -39,3 +40,9 @@ export default function Router({ context }) {
                 children: page,
             }) }) }));
 }
+export function Page({ page, context }) {
+    if (typeof window !== 'undefined') {
+        context.props = useFetch('/_props' + context.url.pathname);
+    }
+    return _jsx(page.component, { context: context });
+}