zuby 1.0.67 → 1.0.69

package/commands/build.js

@@ -12,6 +12,7 @@ import { fileURLToPath } from 'url';
 import { getZubyPackageConfig } from '../packageConfig.js';
 import { getTemplates } from '../templates/index.js';
 import { CLIENT_CHUNKS_MANIFEST, SERVER_CHUNKS_MANIFEST } from '../constants.js';
+import { getTranslationFiles } from '../i18n/index.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 export default async function build(options) {
@@ -26,6 +27,8 @@ export default async function build(options) {
     logger?.info(getTitle(chalk.gray(`building for production...`)));
     // Load templates from the project directory
     const templates = await getTemplates();
+    // Load translation files from the project directory
+    const translationFiles = await getTranslationFiles();
     // Load the entry file from the project directory
     // or jsxProvider
     const entryFile = await getEntryFile(zubyInternalConfig);
@@ -63,10 +66,12 @@ export default async function build(options) {
         clientViteBuildConfig,
         serverViteBuildConfig,
         templates,
+        translationFiles,
     });
     // Run build start hook
     await executePlugins(zubyInternalConfig, PLUGIN_HOOKS.ZubyBuildStart, {
         templates,
+        translationFiles,
     });
     // Clean build directory
     if (existsSync(outDir || '')) {
@@ -80,6 +85,7 @@ export default async function build(options) {
     // Run build client done hook
     await executePlugins(zubyInternalConfig, PLUGIN_HOOKS.ZubyBuildClientDone, {
         templates,
+        translationFiles,
     });
     // Server build
     nextBuildStep('building server...');
@@ -87,6 +93,7 @@ export default async function build(options) {
     // Run build server done hook
     await executePlugins(zubyInternalConfig, PLUGIN_HOOKS.ZubyBuildServerDone, {
         templates,
+        translationFiles,
     });
     // Add serialized zuby config to build directory
     writeFileSync(normalizePath(join(outDir, 'zuby.config.json')), JSON.stringify(zubyInternalConfig, null, 2));
@@ -112,6 +119,7 @@ export default async function build(options) {
     // to execute plugins that are part of the build process
     await executePlugins(zubyInternalConfig, PLUGIN_HOOKS.ZubyBuildDone, {
         templates,
+        translationFiles,
         clientChunksManifest,
         serverChunksManifest,
     }, zubyPlugin => {

package/config.js

@@ -189,6 +189,12 @@ export const mergeDefaultConfig = async (config) => {
     // Global props
     config.props = config.props ?? {};
     config.serverProps = config.serverProps ?? {};
+    // i18n
+    if (config.i18n?.locales && config.i18n.locales.length > 0) {
+        config.i18n.defaultLocale = config.i18n.defaultLocale ?? config.i18n.locales[0];
+        config.i18n.translationsPath = config.i18n.translationsPath ?? 'i18n';
+        config.i18n.translationsExtension = config.i18n.translationsExtension ?? 'json';
+    }
     // Head elements
     config.headElements = config.headElements ?? [];
     // Inject scripts

package/contexts/globalContext.d.ts

@@ -49,6 +49,8 @@ export interface GlobalContext {
     i18n?: {
         locales: string[];
         defaultLocale: string;
+        translations: Record<string, () => Promise<Record<string, string>>>;
+        translationsExtension: string;
     };
     /**
      * The global props for the site

package/contexts/pageContext.d.ts

@@ -188,6 +188,34 @@ export declare class PageContext {
      * @example localizePath('/products/1', 'en') => /products/1
      */
     localizePath(path: string, locale?: string | undefined): string;
+    /**
+     * Returns the detected locale for the given path.
+     * @param path The path to detect the locale
+     * @example getPathLocale('/products/1') => 'en'
+     * @example getPathLocale('/de/products/1') => 'de'
+     */
+    getPathLocale(path: string): string | undefined;
+    /**
+     * Localizes the given text for the current locale
+     * using the translations from the i18n config.
+     * If no translation is found, the backup text is returned.
+     * @param key The translation key
+     * @param backupText The backup text
+     * @param options The additional options
+     * @example localize('products.title', 'Products')
+     * @example localize('products.title', 'Produkte', { locale: 'de' })
+     */
+    localize(key: string, backupText: string, options?: {
+        locale?: string;
+    }): Promise<string>;
+    /**
+     * Returns the translations for the given namespace.
+     * @param namespace The namespace
+     * @param locale The locale to use. If not specified, the current locale is used.
+     * @example getTranslations('products') => { title: 'Products' }
+     * @example getTranslations('products', 'de') => { title: 'Produkte' }
+     */
+    getTranslations(namespace: string, locale?: string | undefined): Promise<Record<string, string>>;
     /**
      * Returns true if the current request
      * was made by the Zuby.js pre-render build step.

package/contexts/pageContext.js

@@ -15,6 +15,17 @@ export class PageContext {
         this._globalContext = options?.globalContext || getGlobalContext();
         this._headElements = [...(this._globalContext?.headElements || [])];
         this._bodyElements = [...(this._globalContext?.bodyElements || [])];
+        // Bind the methods to the current instance,
+        // to allow object destructuring of the methods.
+        this.getElement = this.getElement.bind(this);
+        this.getHeadElements = this.getHeadElements.bind(this);
+        this.getBodyElements = this.getBodyElements.bind(this);
+        this.addToHead = this.addToHead.bind(this);
+        this.addToBody = this.addToBody.bind(this);
+        this.localize = this.localize.bind(this);
+        this.localizePath = this.localizePath.bind(this);
+        this.getPathLocale = this.getPathLocale.bind(this);
+        this.getTranslations = this.getTranslations.bind(this);
     }
     /**
      * The current URL of the page.
@@ -250,6 +261,45 @@ export class PageContext {
             return path;
         return `/${locale}/${path}`.replace(/\/+/g, '/');
     }
+    /**
+     * Returns the detected locale for the given path.
+     * @param path The path to detect the locale
+     * @example getPathLocale('/products/1') => 'en'
+     * @example getPathLocale('/de/products/1') => 'de'
+     */
+    getPathLocale(path) {
+        return this.locales.find(locale => path.startsWith(`/${locale}`)) || this.defaultLocale;
+    }
+    /**
+     * Localizes the given text for the current locale
+     * using the translations from the i18n config.
+     * If no translation is found, the backup text is returned.
+     * @param key The translation key
+     * @param backupText The backup text
+     * @param options The additional options
+     * @example localize('products.title', 'Products')
+     * @example localize('products.title', 'Produkte', { locale: 'de' })
+     */
+    async localize(key, backupText, options) {
+        const locale = options?.locale || this.locale;
+        const namespace = key.includes('.') ? key.replace(/\.(.+)$/, '.') : '';
+        const translations = await this.getTranslations(namespace, locale);
+        return translations?.[key] || backupText;
+    }
+    /**
+     * Returns the translations for the given namespace.
+     * @param namespace The namespace
+     * @param locale The locale to use. If not specified, the current locale is used.
+     * @example getTranslations('products') => { title: 'Products' }
+     * @example getTranslations('products', 'de') => { title: 'Produkte' }
+     */
+    async getTranslations(namespace, locale = this.locale) {
+        const namespaceWithLocale = `${namespace}${locale}`;
+        const translationsImport = this._globalContext.i18n?.translations?.[namespaceWithLocale];
+        if (!translationsImport)
+            return {};
+        return translationsImport();
+    }
     /**
      * Returns true if the current request
      * was made by the Zuby.js pre-render build step.

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/hooks/useProps.d.ts

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

package/hooks/useProps.js

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

package/i18n/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Collects all translation files from the project
+ * and returns them as an object with the namespace
+ * as a key and the path to the file as a value.
+ * @example {
+ *   'en': '/project/i18n/en.json',
+ *   'cs': '/project/i18n/cs.json',
+ *   'products.en': '/project/i18n/products/en.json',
+ *   'products.cs': '/project/i18n/products/cs.json',
+ * }
+ */
+export declare function getTranslationFiles(cache?: boolean): Promise<{
+    [key: string]: string;
+}>;

package/i18n/index.js

@@ -0,0 +1,35 @@
+import { getZubyInternalConfig } from '../config.js';
+import { normalizePath } from '../utils/pathUtils.js';
+import { join, relative, resolve } from 'path';
+import { glob } from 'glob';
+let translationFilesCache;
+/**
+ * Collects all translation files from the project
+ * and returns them as an object with the namespace
+ * as a key and the path to the file as a value.
+ * @example {
+ *   'en': '/project/i18n/en.json',
+ *   'cs': '/project/i18n/cs.json',
+ *   'products.en': '/project/i18n/products/en.json',
+ *   'products.cs': '/project/i18n/products/cs.json',
+ * }
+ */
+export async function getTranslationFiles(cache = true) {
+    if (cache && translationFilesCache)
+        return translationFilesCache;
+    const { i18n, srcDir } = await getZubyInternalConfig();
+    if (!i18n)
+        return {};
+    const { translationsPath = 'i18n', translationsExtension = 'json' } = i18n;
+    const translationsDir = normalizePath(join(srcDir, translationsPath));
+    const files = await glob(`${translationsDir}/**/*.${translationsExtension}`);
+    const entries = files.map(filename => {
+        filename = normalizePath(resolve(filename));
+        const namespace = normalizePath(relative(translationsDir, filename))
+            .replace(`.${translationsExtension}`, '')
+            .replace(/[\\\/]/g, '.');
+        return [namespace, filename];
+    });
+    translationFilesCache = Object.fromEntries(entries);
+    return translationFilesCache || {};
+}

package/i18n/types.d.ts

@@ -0,0 +1 @@
+export {};

package/i18n/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zuby",
-  "version": "1.0.67",
+  "version": "1.0.69",
   "description": "Zuby.js is a framework for building modern apps using Preact or React.",
   "type": "module",
   "main": "index.js",

package/plugins/contextPlugin/index.d.ts

@@ -4,6 +4,10 @@ export default function index(): VitePlugin;
 export declare function generateCompileTimeContextCode(ssr: boolean): Promise<string>;
 export declare function generateTemplatesCode(ssr: boolean): Promise<string>;
 export declare function generateTemplateCode(template: Template): Promise<string>;
+export declare function generateI18nCode(): Promise<string>;
+export declare function generateTranslationsCode(translationFiles?: {
+    [key: string]: string;
+}): Promise<string>;
 export declare function generateImportCode(template: Template): string;
 export declare function generateRenderCode(ssr: boolean): Promise<string>;
 export declare function generateImageCode(): Promise<string>;

package/plugins/contextPlugin/index.js

@@ -4,6 +4,7 @@ import { relative } from 'path';
 import { normalizePath } from '../../utils/pathUtils.js';
 import { getZubyPackageConfig } from '../../packageConfig.js';
 import { getApps, getErrors, getHandlers, getInnerLayouts, getLayouts, getLoaders, getPages, getTemplates, } from '../../templates/index.js';
+import { getTranslationFiles } from '../../i18n/index.js';
 let viteConfig;
 let staticImports = [];
 export default function index() {
@@ -40,7 +41,7 @@ export async function generateCompileTimeContextCode(ssr) {
         serverProps: ${JSON.stringify(ssr ? serverProps : {})},
         headElements: ${JSON.stringify(ssr ? headElements : [])},
         bodyElements: ${JSON.stringify(ssr ? bodyElements : [])},
-        i18n: ${JSON.stringify(i18n)},
+        i18n: ${await generateI18nCode()},
     };`;
 }
 export async function generateTemplatesCode(ssr) {
@@ -82,6 +83,27 @@ export async function generateTemplateCode(template) {
         component: () => ${generateImportCode(template)},
     }`;
 }
+export async function generateI18nCode() {
+    const { i18n } = await getZubyInternalConfig();
+    if (!i18n)
+        return 'undefined';
+    const translationFiles = await getTranslationFiles();
+    return `{
+      defaultLocale: '${i18n.defaultLocale}',
+      locales: ${JSON.stringify(i18n.locales)},
+      translations: ${await generateTranslationsCode(translationFiles)},
+      translationsExtension: '${i18n.translationsExtension}',
+    }`;
+}
+export async function generateTranslationsCode(translationFiles = {}) {
+    return `{
+    ${Object.entries(translationFiles)
+        .map(([key, value]) => {
+        return `'${key}': () => import("${value}")`;
+    })
+        .join(',')}
+  }`;
+}
 export function generateImportCode(template) {
     // Sync templates are imported statically
     if (Object.values(SYNC_TEMPLATES).includes(template.templateType)) {

package/plugins/preloadPlugin/index.js

@@ -12,7 +12,7 @@ export default function preloadPlugin() {
     return {
         name: 'zuby-preload-plugin',
         hooks: {
-            'zuby:build:done': async ({ config, clientChunksManifest, templates }) => {
+            'zuby:build:done': async ({ config, clientChunksManifest, templates, translationFiles }) => {
                 const { srcDir, outDir } = config;
                 const preloadManifest = {};
                 const pages = await getPages(templates);
@@ -20,6 +20,10 @@ export default function preloadPlugin() {
                     const filename = normalizePath(relative(srcDir, page.filename));
                     preloadManifest[filename] = clientChunksManifest[filename] || [];
                 });
+                Object.values(translationFiles).forEach(file => {
+                    const filename = normalizePath(relative(srcDir, file));
+                    preloadManifest[filename] = clientChunksManifest[filename] || [];
+                });
                 writeFileSync(normalizePath(join(outDir, 'client', PREALOD_MANIFEST)), JSON.stringify(preloadManifest, null, 2));
             },
         },

package/preload/index.d.ts

@@ -14,3 +14,7 @@ export declare function preload(href: string, as?: string): void;
  * @example preloadPage("/products/1")
  */
 export declare function preloadPage(href: string, onHandle?: () => void | Promise<void>): void;
+/**
+ * Preloads all required assets for given locale.
+ */
+export declare function preloadLocale(locale: string, onHandle?: () => void | Promise<void>): void;

package/preload/index.js

@@ -67,6 +67,28 @@ export function preloadPage(href, onHandle = () => { }) {
         onHandle();
     });
 }
+/**
+ * Preloads all required assets for given locale.
+ */
+export function preloadLocale(locale, onHandle = () => { }) {
+    // Do nothing on server
+    if (typeof window === 'undefined')
+        return;
+    const { i18n } = getGlobalContext();
+    const { translationsExtension = 'json' } = i18n || {};
+    window.requestIdleCallback(async () => {
+        const preloadManifest = await getPreloadManifest();
+        // Preload assets such as scripts and styles
+        const preloadAssets = [];
+        Object.entries(preloadManifest).forEach(([filename, assets]) => {
+            if (filename.endsWith(`${locale}.${translationsExtension}`)) {
+                preloadAssets.push(...assets);
+            }
+        });
+        preloadAssets.forEach(href => preload(href));
+        onHandle();
+    });
+}
 /**
  * Appends preload link into head element of page.
  * For example:

package/server/index.js

@@ -1859,6 +1859,15 @@ var PageContext = class {
     this._globalContext = options?.globalContext || getGlobalContext();
     this._headElements = [...this._globalContext?.headElements || []];
     this._bodyElements = [...this._globalContext?.bodyElements || []];
+    this.getElement = this.getElement.bind(this);
+    this.getHeadElements = this.getHeadElements.bind(this);
+    this.getBodyElements = this.getBodyElements.bind(this);
+    this.addToHead = this.addToHead.bind(this);
+    this.addToBody = this.addToBody.bind(this);
+    this.localize = this.localize.bind(this);
+    this.localizePath = this.localizePath.bind(this);
+    this.getPathLocale = this.getPathLocale.bind(this);
+    this.getTranslations = this.getTranslations.bind(this);
   }
   /**
    * The current URL of the page.
@@ -2094,6 +2103,45 @@ var PageContext = class {
       return path;
     return `/${locale}/${path}`.replace(/\/+/g, "/");
   }
+  /**
+   * Returns the detected locale for the given path.
+   * @param path The path to detect the locale
+   * @example getPathLocale('/products/1') => 'en'
+   * @example getPathLocale('/de/products/1') => 'de'
+   */
+  getPathLocale(path) {
+    return this.locales.find((locale) => path.startsWith(`/${locale}`)) || this.defaultLocale;
+  }
+  /**
+   * Localizes the given text for the current locale
+   * using the translations from the i18n config.
+   * If no translation is found, the backup text is returned.
+   * @param key The translation key
+   * @param backupText The backup text
+   * @param options The additional options
+   * @example localize('products.title', 'Products')
+   * @example localize('products.title', 'Produkte', { locale: 'de' })
+   */
+  async localize(key, backupText, options) {
+    const locale = options?.locale || this.locale;
+    const namespace = key.includes(".") ? key.replace(/\.(.+)$/, ".") : "";
+    const translations = await this.getTranslations(namespace, locale);
+    return translations?.[key] || backupText;
+  }
+  /**
+   * Returns the translations for the given namespace.
+   * @param namespace The namespace
+   * @param locale The locale to use. If not specified, the current locale is used.
+   * @example getTranslations('products') => { title: 'Products' }
+   * @example getTranslations('products', 'de') => { title: 'Produkte' }
+   */
+  async getTranslations(namespace, locale = this.locale) {
+    const namespaceWithLocale = `${namespace}${locale}`;
+    const translationsImport = this._globalContext.i18n?.translations?.[namespaceWithLocale];
+    if (!translationsImport)
+      return {};
+    return translationsImport();
+  }
   /**
    * Returns true if the current request
    * was made by the Zuby.js pre-render build step.

package/types.d.ts

@@ -44,6 +44,15 @@ export interface ZubyConfig {
     output?: Output;
     /**
      * The internalization config. If this is set, the site will be generated in multiple locales.
+     * The defaultLocale is optional and defaults to the first locale in the locales array.
+     *
+     * The translationsPath is optional and defaults to './i18n' folder with your translations.
+     * For example: ./i18n/en.json, ./i18n/de.json, ./i18n/cs.json, ./i18n/pl.json.
+     * It also supports splitting into namespaces.
+     * For example: ./i18n/products/pl.json., ./i18n/products/en.json.
+     *
+     * The translationsExtension is optional and defaults to 'json' file extension.
+     *
      * @default undefined
      * @example {
      *     locales: ['en', 'de', 'cs', 'pl'],
@@ -52,7 +61,9 @@ export interface ZubyConfig {
      */
     i18n?: {
         locales: string[];
-        defaultLocale: string;
+        defaultLocale?: string;
+        translationsPath?: string;
+        translationsExtension?: string;
     };
     /**
      * The URL of the site
@@ -466,6 +477,9 @@ export interface ZubyBuildHookParams {
     config: ZubyInternalConfig;
     logger: ZubyLogger;
     templates: Template[];
+    translationFiles: {
+        [key: string]: string;
+    };
 }
 export interface ZubyBuildSetupHookParams extends ZubyBuildHookParams {
     clientViteBuildConfig: ViteInlineConfig;