@zubyjs/react 1.0.66 → 1.0.68

package/components/Text.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+export interface TextProps extends PropsWithChildren {
+    key: string;
+    locale?: string;
+}
+/**
+ * The `Text` component is used to translate text in the application
+ * @param props.key - The key of the translation
+ * @param props.locale - The locale to use for the translation
+ * @param props.children - The backup text to use if the translation is not found
+ * @returns
+ */
+export declare function Text(props: TextProps): import("react/jsx-runtime").JSX.Element;

package/components/Text.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useLocalization } from '../hooks/index.js';
+/**
+ * The `Text` component is used to translate text in the application
+ * @param props.key - The key of the translation
+ * @param props.locale - The locale to use for the translation
+ * @param props.children - The backup text to use if the translation is not found
+ * @returns
+ */
+export function Text(props) {
+    const { key, children, locale } = props;
+    const localizedText = useLocalization(key, '', {
+        locale,
+    });
+    return _jsx(_Fragment, { children: localizedText.length > 0 ? localizedText : children });
+}

package/components/index.d.ts

@@ -0,0 +1 @@
+export * from './Text.js';

package/components/index.js

@@ -0,0 +1 @@
+export * from './Text.js';

package/contexts/pageContext.d.ts

@@ -0,0 +1,2 @@
+import { PageContext } from 'zuby/contexts/index.js';
+export declare const pageContext: import("react").Context<PageContext>;

package/contexts/pageContext.js

@@ -0,0 +1,3 @@
+import { PageContext } from 'zuby/contexts/index.js';
+import { createContext } from 'react';
+export const pageContext = createContext(new PageContext({}));

package/hooks/index.d.ts

@@ -1,2 +1,3 @@
-export { useFetch } from './useFetch.js';
+export { usePageContext } from './usePageContext.js';
+export { useLocalization } from './useLocalization.js';
 export * from 'zuby/hooks/index.js';

package/hooks/index.js

@@ -1,2 +1,3 @@
-export { useFetch } from './useFetch.js';
+export { usePageContext } from './usePageContext.js';
+export { useLocalization } from './useLocalization.js';
 export * from 'zuby/hooks/index.js';

package/hooks/useLocalization.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns the localized text for the given key.
+ * @param key The full key of the translation
+ * @param text The default text to use if the translation is not found
+ * @param options Additional options for the localization
+ */
+export declare function useLocalization(key: string, text: string, options?: {
+    locale?: string;
+}): string;

package/hooks/useLocalization.js

@@ -0,0 +1,12 @@
+import { useTranslations } from './useTranslations.js';
+/**
+ * Returns the localized text for the given key.
+ * @param key The full key of the translation
+ * @param text The default text to use if the translation is not found
+ * @param options Additional options for the localization
+ */
+export function useLocalization(key, text, options) {
+    const namespace = key.includes('.') ? key.replace(/\.(.+)$/, '.') : '';
+    const translations = useTranslations(namespace, options?.locale);
+    return translations?.[key] || text;
+}

package/hooks/usePageContext.d.ts

@@ -0,0 +1 @@
+export declare function usePageContext(): import("zuby/contexts/pageContext.js").PageContext;

package/hooks/usePageContext.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { pageContext } from '../contexts/pageContext.js';
+export function usePageContext() {
+    return useContext(pageContext);
+}

package/hooks/useTranslations.d.ts

@@ -0,0 +1,7 @@
+export type Translations = Record<string, string>;
+/**
+ * Returns the translations object for the given namespace and locale
+ * @param namespace
+ * @param locale
+ */
+export declare function useTranslations(namespace: string, locale?: string): Record<string, string>;

package/hooks/useTranslations.js

@@ -0,0 +1,19 @@
+import { usePageContext } from './usePageContext.js';
+let translationsCache = new Map();
+/**
+ * Returns the translations object for the given namespace and locale
+ * @param namespace
+ * @param locale
+ */
+export function useTranslations(namespace, locale) {
+    const { getTranslations, locale: currentLocale } = usePageContext();
+    locale = locale || currentLocale;
+    const namespaceWithLocale = `${namespace}.${locale}`;
+    const translations = translationsCache.get(namespaceWithLocale) || getTranslations(namespace, locale);
+    if (translations instanceof Promise) {
+        translationsCache.set(namespaceWithLocale, translations);
+        translations.then(result => translationsCache.set(namespaceWithLocale, result));
+        throw translations;
+    }
+    return translations;
+}

package/image.d.ts

@@ -6,5 +6,6 @@ export interface ImageProps {
     height?: number;
     format?: ImageFormat;
     quality?: number;
+    lazy?: boolean;
 }
-export default function Image({ src: originalSrc, alt, width, height, format, quality, }: ImageProps): import("react/jsx-runtime").JSX.Element;
+export default function Image({ src: originalSrc, alt, width, height, format, quality, lazy, }: ImageProps): import("react/jsx-runtime").JSX.Element;

package/image.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useGlobalContext } from 'zuby/hooks/index.js';
 import getNearestSize from 'zuby/image/getNearestSize.js';
-export default function Image({ src: originalSrc, alt, width, height, format, quality, }) {
+export default function Image({ src: originalSrc, alt, width, height, format, quality, lazy, }) {
     const context = useGlobalContext();
     format = format || context?.image?.defaultFormat;
     quality = quality || context?.image?.defaultQuality;
@@ -17,5 +17,5 @@ export default function Image({ src: originalSrc, alt, width, height, format, qu
         isAbsolute,
         context,
     });
-    return _jsx("img", { src: src, alt: alt, width: width, height: height });
+    return (_jsx("img", { src: src, alt: alt, width: width, height: height, loading: lazy ? 'lazy' : 'eager' }));
 }

package/package.json

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

package/router.d.ts

@@ -24,5 +24,6 @@ export interface LinkProps {
     className?: string;
     onClick?: (event: MouseEvent) => void;
     children?: any;
+    locale?: string;
 }
 export declare function Link(props: LinkProps): import("react/jsx-runtime").JSX.Element;

package/router.js

@@ -5,7 +5,9 @@ import { useParams } from 'wouter';
 import { createElement, Suspense } from 'react';
 import { preloadPage } from 'zuby/preload/index.js';
 import lazyWithPreload from './components/lazyWithPreload.js';
-import useProps from './hooks/useProps.js';
+import { useProps } from 'zuby/hooks/useProps.js';
+import { pageContext } from './contexts/pageContext.js';
+import { usePageContext } from '@zubyjs/preact/src/hooks/index.js';
 let pages;
 let apps;
 let errors;
@@ -35,15 +37,20 @@ export default function Router({ context }) {
         _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: loader?.component && _jsx(loader.component, {}), children: createElement(app?.component, {
-                children: page,
-            }) }) }));
+    return (_jsx(pageContext.Provider, { value: context, children: _jsx(WouterRouter, { ssrPath: context.url.pathname, children: _jsx(Suspense, { fallback: loader?.component && _jsx(loader.component, {}), children: createElement(app?.component, {
+                    children: page,
+                }) }) }) }));
 }
 export function Page({ page, context }) {
     context.statusCode = 200;
     context.params = useParams();
-    if (typeof window !== 'undefined' && !context.isInitialPath) {
-        context.props = useProps(context.url.pathname);
+    if (typeof window !== 'undefined') {
+        if (context.isInitialPath) {
+            context.props = globalThis.initialPageContext || {};
+        }
+        else {
+            context.props = useProps(context.url.pathname);
+        }
     }
     return _jsx(page.component, { ...context.props, context: context });
 }
@@ -72,15 +79,22 @@ function matchTemplate(template, path) {
 }
 export function Link(props) {
     const [isActive] = useRoute(props.href);
-    const href = props.href || props.to;
+    const { localizePath } = usePageContext();
+    let href = props.href || props.to || '#';
+    href = props?.locale ? localizePath(href, props.locale) : href;
+    const isRelative = href?.startsWith('/');
+    // Alias for Preact class names
     props.activeClassName = props.activeClassName || 'active';
-    props.className = props?.className || '';
+    props.className = props.className || '';
     const className = `${props?.className} ${isActive ? props.activeClassName : ''}`;
     // Preload the page
-    if (href) {
+    if (href && isRelative) {
         preloadPage(href, () => {
             try {
                 matchTemplate(pages || [], href)?.component?.preload();
+            }
+            catch (_e) { }
+            try {
                 useProps(href, 'low');
             }
             catch (_e) { }

package/templates/entry.js

@@ -5,9 +5,7 @@ import { hydrateRoot, createRoot } from 'react-dom/client';
 import Router from '@zubyjs/react/router.js';
 import { PageContext } from 'zuby/contexts/index.js';
 if (typeof window !== 'undefined') {
-    const pageContext = new PageContext({
-        ...(globalThis?.initialPageContext || {}),
-    });
+    const pageContext = new PageContext();
     const appElement = document.getElementById('app');
     if (appElement.hasChildNodes()) {
         hydrateRoot(appElement, _jsx(Router, { context: pageContext }));

package/hooks/useFetch.d.ts

@@ -1,31 +0,0 @@
-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?: 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/useFetch.js

@@ -1,101 +0,0 @@
-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/hooks/useProps.d.ts

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

package/hooks/useProps.js

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