zuby 1.0.48 → 1.0.49

package/config.js

@@ -12,6 +12,7 @@ import manifestPlugin from './plugins/manifestPlugin/index.js';
 import prerenderPlugin from './plugins/prerenderPlugin/index.js';
 import standaloneBuildPlugin from './plugins/dependenciesPlugin/index.js';
 import preloadPlugin from './plugins/preloadPlugin/index.js';
+import { TEMPLATES } from './templates/types.js';
 let zubyInternalConfig;
 /**
  * Returns the path to the ZubyConfig file.
@@ -57,8 +58,57 @@ export const getZubyInternalConfig = async (configFilePath, cache = true) => {
         return zubyInternalConfig;
     const zubyConfig = await getZubyConfig(configFilePath);
     zubyConfig.configFilePath = configFilePath;
+    zubyConfig.templateFiles = zubyConfig.templateFiles || [];
+    zubyConfig.headElements = zubyConfig.headElements || [];
     // Run config setup hook
-    await executePlugins(zubyConfig, PLUGIN_HOOKS.ZubyConfigSetup);
+    await executePlugins(zubyConfig, PLUGIN_HOOKS.ZubyConfigSetup, {
+        addEntryTemplate: (filename) => zubyConfig.templateFiles?.push({
+            filename,
+            path: '/:path*',
+            templateType: TEMPLATES.entry,
+        }),
+        addAppTemplate: (filename, path = '/:path*') => zubyConfig.templateFiles?.push({
+            filename,
+            path,
+            templateType: TEMPLATES.app,
+        }),
+        addLayoutTemplate: (filename, path = '/:path*') => zubyConfig.templateFiles?.push({
+            filename,
+            path,
+            templateType: TEMPLATES.layout,
+        }),
+        addInnerLayoutTemplate: (filename, path = '/:path*') => zubyConfig.templateFiles?.push({
+            filename,
+            path,
+            templateType: TEMPLATES.innerLayout,
+        }),
+        addPageTemplate: (filename, path = '/:path*') => zubyConfig.templateFiles?.push({
+            filename,
+            path,
+            templateType: TEMPLATES.page,
+        }),
+        addErrorTemplate: (filename, path = '/:path*') => zubyConfig.templateFiles?.push({
+            filename,
+            path,
+            templateType: TEMPLATES.error,
+        }),
+        addLoaderTemplate: (filename, path = '/:path*') => zubyConfig.templateFiles?.push({
+            filename,
+            path,
+            templateType: TEMPLATES.loader,
+        }),
+        addPage: (filename, path = '/:path*') => zubyConfig.templateFiles?.push({
+            filename,
+            path,
+            templateType: TEMPLATES.page,
+        }),
+        addHandler: (filename, path = '/:path*') => zubyConfig.templateFiles?.push({
+            filename,
+            path,
+            templateType: TEMPLATES.handler,
+        }),
+        addToHead: (element) => zubyConfig.headElements?.push(element),
+    });
     validateConfig(zubyConfig);
     zubyInternalConfig = await mergeDefaultConfig(zubyConfig);
     // Run config done hook
@@ -106,6 +156,11 @@ export const mergeDefaultConfig = async (config) => {
     config.minifyJS = config.minifyJS ?? true;
     // Build ID generator
     config.generateBuildId = config.generateBuildId ?? generateDefaultBuildId;
+    // Global props
+    config.props = config.props ?? {};
+    config.serverProps = config.serverProps ?? {};
+    // Head elements
+    config.headElements = config.headElements ?? [];
     // Add logger
     config.customLogger =
         config.customLogger ??

package/context/index.d.ts

@@ -21,5 +21,8 @@ export declare class ZubyContext {
         defaultLocale: string;
     } | undefined;
     get buildId(): string | undefined;
+    get props(): Record<string, any> | undefined;
+    get serverProps(): Record<string, any> | undefined;
+    get headElements(): string[] | undefined;
 }
 export declare const getContext: () => ZubyContext;

package/context/index.js

@@ -26,6 +26,15 @@ export class ZubyContext {
     get buildId() {
         return this.rawContext.buildId;
     }
+    get props() {
+        return this.rawContext.props;
+    }
+    get serverProps() {
+        return this.rawContext.serverProps;
+    }
+    get headElements() {
+        return this.rawContext.headElements;
+    }
 }
 const getRawContext = () => {
     return globalThis.ZubyRawContext;

package/context/types.d.ts

@@ -50,4 +50,21 @@ export interface ZubyRawContext {
         locales: string[];
         defaultLocale: string;
     };
+    /**
+     * The global props for the site
+     * that will be passed to all pages
+     * on both client and server side.
+     */
+    props?: Record<string, any>;
+    /**
+     * The global server props for the site
+     * that will be passed to all pages
+     * only on server side.
+     */
+    serverProps?: Record<string, any>;
+    /**
+     * Additional elements that should be added
+     * to the head of the page.
+     */
+    headElements?: string[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zuby",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "description": "Zuby.js is framework for building SPA apps using Vite",
   "type": "module",
   "main": "index.js",

package/pageContext/index.d.ts

@@ -10,6 +10,8 @@ export declare class ZubyPageContext {
     protected _headers: Headers;
     protected _cache: number;
     protected _props: Record<string, any>;
+    protected _serverProps: Record<string, any>;
+    protected _headElements: (string | (() => any))[];
     protected _zubyContext: ZubyContext;
     constructor(options: {
         url?: URL;
@@ -94,6 +96,24 @@ export declare class ZubyPageContext {
      */
     get props(): Record<string, any>;
     set props(value: Record<string, any>);
+    /**
+     * The server props that are available only in server-side
+     * environment and are not shared with the client.
+     * You can use this property to pass data from handler to layout template.
+     * Hint: You should not read them in page because the hydration would fail,
+     * but you can write them on page and read them in layout.
+     * @example { my: 'secret-value' }
+     */
+    get serverProps(): Record<string, any>;
+    set serverProps(value: Record<string, any>);
+    /**
+     * The global props from the ZubyConfig
+     */
+    get globalProps(): Record<string, any> | undefined;
+    /**
+     * The global server props from the ZubyConfig
+     */
+    get globalServerProps(): Record<string, any> | undefined;
     /**
      * The current status code that will be returned to the client.
      * This property has only effect in server-side.
@@ -177,4 +197,16 @@ export declare class ZubyPageContext {
      * @example ecdf1a94cc9b4f4c
      */
     get buildId(): string | undefined;
+    /**
+     * Adds the given HTML string
+     * or Jsx Component to the head of the page
+     * when it's rendered on the server.
+     */
+    addToHead(element: string | (() => any)): void;
+    /**
+     * Returns array of all elements as string
+     * that should be added to the head of the page.
+     * @private
+     */
+    getHeadElements(): Promise<string[]>;
 }

package/pageContext/index.js

@@ -9,9 +9,11 @@ export class ZubyPageContext {
         this._clientAddress = options?.clientAddress;
         this._statusCode = options?.statusCode || 200;
         this._props = options?.props || {};
+        this._serverProps = {};
         this._cache = 0;
         this._headers = options?.headers || new Headers();
         this._zubyContext = options?.zubyContext || getContext();
+        this._headElements = [...(this._zubyContext.headElements || [])];
     }
     /**
      * The current URL of the page.
@@ -114,6 +116,35 @@ export class ZubyPageContext {
     set props(value) {
         this._props = value || {};
     }
+    /**
+     * The server props that are available only in server-side
+     * environment and are not shared with the client.
+     * You can use this property to pass data from handler to layout template.
+     * Hint: You should not read them in page because the hydration would fail,
+     * but you can write them on page and read them in layout.
+     * @example { my: 'secret-value' }
+     */
+    get serverProps() {
+        return {
+            ...(this._zubyContext.serverProps || {}),
+            ...(this._serverProps || {}),
+        };
+    }
+    set serverProps(value) {
+        this._serverProps = value || {};
+    }
+    /**
+     * The global props from the ZubyConfig
+     */
+    get globalProps() {
+        return this._zubyContext.props;
+    }
+    /**
+     * The global server props from the ZubyConfig
+     */
+    get globalServerProps() {
+        return this._zubyContext.serverProps;
+    }
     /**
      * The current status code that will be returned to the client.
      * This property has only effect in server-side.
@@ -232,4 +263,25 @@ export class ZubyPageContext {
     get buildId() {
         return this._zubyContext.buildId;
     }
+    /**
+     * Adds the given HTML string
+     * or Jsx Component to the head of the page
+     * when it's rendered on the server.
+     */
+    addToHead(element) {
+        this._headElements.push(element);
+    }
+    /**
+     * Returns array of all elements as string
+     * that should be added to the head of the page.
+     * @private
+     */
+    async getHeadElements() {
+        return Promise.all(this._headElements.map(element => {
+            if (typeof element === 'function') {
+                return this._zubyContext?.renderToString?.(element()) || '';
+            }
+            return element;
+        }));
+    }
 }

package/plugins/contextPlugin/index.js

@@ -25,7 +25,7 @@ export default function index() {
     };
 }
 export async function generateCompileTimeContextCode(ssr) {
-    const { site, i18n, buildId } = await getZubyInternalConfig();
+    const { site, i18n, buildId, props, serverProps, headElements } = await getZubyInternalConfig();
     const { version } = await getZubyPackageConfig();
     return `globalThis.ZubyRawContext = {
         ...(globalThis.ZubyRawContext || {}),
@@ -35,6 +35,9 @@ export async function generateCompileTimeContextCode(ssr) {
         generator: 'Zuby.js ${version}',
         version: '${version}',
         buildId: '${buildId}',
+        props: ${JSON.stringify(props)},
+        serverProps: ${JSON.stringify(ssr ? serverProps : {})},
+        headElements: ${JSON.stringify(ssr ? headElements : [])},
         i18n: ${JSON.stringify(i18n)},
     };`;
 }

package/server/index.js

@@ -2091,6 +2091,15 @@ var ZubyContext = class {
   get buildId() {
     return this.rawContext.buildId;
   }
+  get props() {
+    return this.rawContext.props;
+  }
+  get serverProps() {
+    return this.rawContext.serverProps;
+  }
+  get headElements() {
+    return this.rawContext.headElements;
+  }
 };
 var getRawContext = () => {
   return globalThis.ZubyRawContext;
@@ -2113,9 +2122,11 @@ var ZubyPageContext = class {
     this._clientAddress = options?.clientAddress;
     this._statusCode = options?.statusCode || 200;
     this._props = options?.props || {};
+    this._serverProps = {};
     this._cache = 0;
     this._headers = options?.headers || new Headers();
     this._zubyContext = options?.zubyContext || getContext();
+    this._headElements = [...this._zubyContext.headElements || []];
   }
   /**
    * The current URL of the page.
@@ -2218,6 +2229,35 @@ var ZubyPageContext = class {
   set props(value) {
     this._props = value || {};
   }
+  /**
+   * The server props that are available only in server-side
+   * environment and are not shared with the client.
+   * You can use this property to pass data from handler to layout template.
+   * Hint: You should not read them in page because the hydration would fail,
+   * but you can write them on page and read them in layout.
+   * @example { my: 'secret-value' }
+   */
+  get serverProps() {
+    return {
+      ...this._zubyContext.serverProps || {},
+      ...this._serverProps || {}
+    };
+  }
+  set serverProps(value) {
+    this._serverProps = value || {};
+  }
+  /**
+   * The global props from the ZubyConfig
+   */
+  get globalProps() {
+    return this._zubyContext.props;
+  }
+  /**
+   * The global server props from the ZubyConfig
+   */
+  get globalServerProps() {
+    return this._zubyContext.serverProps;
+  }
   /**
    * The current status code that will be returned to the client.
    * This property has only effect in server-side.
@@ -2336,6 +2376,29 @@ var ZubyPageContext = class {
   get buildId() {
     return this._zubyContext.buildId;
   }
+  /**
+   * Adds the given HTML string
+   * or Jsx Component to the head of the page
+   * when it's rendered on the server.
+   */
+  addToHead(element) {
+    this._headElements.push(element);
+  }
+  /**
+   * Returns array of all elements as string
+   * that should be added to the head of the page.
+   * @private
+   */
+  async getHeadElements() {
+    return Promise.all(
+      this._headElements.map((element) => {
+        if (typeof element === "function") {
+          return this._zubyContext?.renderToString?.(element()) || "";
+        }
+        return element;
+      })
+    );
+  }
 };
 
 // src/server/zubyRenderer.ts
@@ -8721,6 +8784,8 @@ var ZubyRenderer = class {
     jsImports.forEach((imp) => {
       html = html.replace(/(<\/head>)/, `<script type="module" src="${imp}" defer></script>$1`);
     });
+    const headElements = await pageContext.getHeadElements();
+    html = html.replace(/(<\/head>)/, headElements.join("") + "$1");
     return this.injectHeaders(
       new Response(html, {
         status: pageContext.statusCode || 200,

package/server/zubyRenderer.js

@@ -149,6 +149,8 @@ export default class ZubyRenderer {
         jsImports.forEach((imp) => {
             html = html.replace(/(<\/head>)/, `<script type="module" src="${imp}" defer></script>$1`);
         });
+        const headElements = await pageContext.getHeadElements();
+        html = html.replace(/(<\/head>)/, headElements.join('') + '$1');
         return this.injectHeaders(new Response(html, {
             status: pageContext.statusCode || 200,
             headers: {

package/templates/index.d.ts

@@ -1,4 +1,4 @@
-import { Template, TemplateType } from './types.js';
+import { Template, TemplateFile, TemplateType } from './types.js';
 /**
  * Returns the array of pages with static path.
  */
@@ -42,6 +42,11 @@ export declare function getDefaultTemplate(filename: string, templateType: Templ
  * If i18n config is defined, the pages will be localized and duplicated for each locale.
  */
 export declare function getTemplates(cache?: boolean): Promise<Template[]>;
+/**
+ * Collects all template files from the pages directory and the templateFiles config
+ * and returns them as an array of TemplateFile objects.
+ */
+export declare function getTemplateFiles(): Promise<TemplateFile[]>;
 /**
  * Calculates the weight of each template
  * and sorts them from the least dynamic path to the most dynamic.

package/templates/index.js

@@ -103,26 +103,12 @@ export function getDefaultTemplate(filename, templateType) {
 export async function getTemplates(cache = true) {
     if (cache && templatesCache)
         return templatesCache;
-    const { srcDir, i18n, templateExtensions } = await getZubyInternalConfig();
-    const pagesDir = normalizePath(join(srcDir, 'pages'));
-    const files = await glob(`${pagesDir}/**/*.{${templateExtensions.join(',')}}`);
+    const { i18n } = await getZubyInternalConfig();
     const locales = (i18n?.locales || []).filter(locale => locale !== i18n?.defaultLocale);
-    const templates = files
-        .map(filename => {
-        // Normalize the path and slashes to unix style (needed for windows)
-        filename = normalizePath(filename);
+    const templateFiles = await getTemplateFiles();
+    const templates = templateFiles
+        .map(({ path, filename, templateType }) => {
         const fileNameWithoutExtension = basename(filename).replace(/\.(.+)$/, '');
-        const templateType = getTemplateType(filename);
-        // Remove the pagesDir prefix from the filename
-        // and transform it to a valid wouter path
-        let path = toPath(filename.replace(pagesDir, ''));
-        // Create matching path for base templates
-        if (Object.values(BASE_TEMPLATES).includes(templateType)) {
-            path = `${path}/:path*`.replace(/\/+/g, '/');
-        }
-        // Calculate the relative path from
-        // the ZubyRouter component file to the page file
-        filename = normalizePath(resolve(filename));
         return {
             filename,
             path,
@@ -148,6 +134,40 @@ export async function getTemplates(cache = true) {
     }));
     return (templatesCache = sortTemplates(templates));
 }
+/**
+ * Collects all template files from the pages directory and the templateFiles config
+ * and returns them as an array of TemplateFile objects.
+ */
+export async function getTemplateFiles() {
+    const { srcDir, templateExtensions, templateFiles } = await getZubyInternalConfig();
+    const pagesDir = normalizePath(join(srcDir, 'pages'));
+    const files = await glob(`${pagesDir}/**/*.{${templateExtensions.join(',')}}`);
+    const configTemplateFiles = templateFiles.map(({ templateType, filename, path }) => {
+        return {
+            filename: normalizePath(resolve(filename)),
+            path: toPath(path),
+            templateType,
+        };
+    });
+    const folderTemplateFiles = files.map(filename => {
+        // Normalize the path and slashes to unix style (needed for windows)
+        filename = normalizePath(filename);
+        const templateType = getTemplateType(filename);
+        // Remove the pagesDir prefix from the filename
+        // and transform it to a valid wouter path
+        let path = toPath(filename.replace(pagesDir, ''));
+        // Create matching path for base templates
+        if (Object.values(BASE_TEMPLATES).includes(templateType)) {
+            path = `${path}/:path*`.replace(/\/+/g, '/');
+        }
+        return {
+            filename: normalizePath(resolve(filename)),
+            path,
+            templateType,
+        };
+    });
+    return [...configTemplateFiles, ...folderTemplateFiles];
+}
 /**
  * Calculates the weight of each template
  * and sorts them from the least dynamic path to the most dynamic.

package/templates/types.d.ts

@@ -47,3 +47,8 @@ export declare const SYNC_TEMPLATES: {
     loader: string;
 };
 export type TemplateType = (typeof TEMPLATES)[keyof typeof TEMPLATES];
+export interface TemplateFile {
+    path: string;
+    filename: string;
+    templateType: TemplateType;
+}

package/templates/types.js

@@ -1,4 +1,3 @@
-// Pages
 export const PATH_TYPES = {
     static: 'static',
     dynamic: 'dynamic',

package/types.d.ts

@@ -2,7 +2,7 @@
 import type { UserConfig as ViteUserConfig, InlineConfig as ViteInlineConfig, PluginOption as VitePluginOption, Plugin as VitePlugin } from 'vite';
 import { ZubyLogger } from './logger/types.js';
 import ReadableStream = NodeJS.ReadableStream;
-import { PathParamsType, Template } from './templates/types.js';
+import { PathParamsType, Template, TemplateFile } from './templates/types.js';
 import ZubyDevServer from './server/zubyDevServer.js';
 export interface ZubyConfig {
     /**
@@ -127,6 +127,34 @@ export interface ZubyConfig {
      * you can use this option to generate consistent build IDs.
      */
     generateBuildId?: () => string | Promise<string>;
+    /**
+     * Template files that are used to
+     * create the templates during the build process.
+     * @private
+     */
+    templateFiles?: TemplateFile[];
+    /**
+     * The global props for the site
+     * that will be passed to all pages, handlers etc...
+     * on both client and server side.
+     * They can be retrieved using PageContext.globalProps method.
+     * @default {}
+     */
+    props?: Record<string, any>;
+    /**
+     * The global server props for the site
+     * that will be passed to all pages, handlers etc...
+     * only on server side.
+     * They can be retrieved using PageContext.globalServerProps method.
+     * @default {}
+     */
+    serverProps?: Record<string, any>;
+    /**
+     * Additional HTML elements
+     * that will be injected into the head of the page.
+     * @default []
+     */
+    headElements?: string[];
 }
 export interface ZubyInternalConfig extends Required<ZubyConfig> {
     /**
@@ -321,6 +349,7 @@ export interface ZubyConfigSetupHookParams {
     addLoaderTemplate: (loaderFile: string, path?: string) => void;
     addPage: (pageFile: string, path?: string) => void;
     addHandler: (handlerFile: string, path?: string) => void;
+    addToHead: (element: string) => void;
 }
 export interface ZubyConfigDoneHookParams extends ZubyConfigSetupHookParams {
     config: ZubyInternalConfig;