zuby 1.0.45 → 1.0.47

package/commands/index.js

@@ -5,6 +5,8 @@ import dev from './dev.js';
 import build from './build.js';
 import preview from './preview.js';
 import init from './init.js';
+import info from './info.js';
+import upgrade from './upgrade.js';
 const { name, description, version } = getZubyPackageConfig();
 const program = new Command().name(name).description(description).version(version);
 program
@@ -30,5 +32,18 @@ program
 program
     .command('init')
     .description('Initializes a new Zuby project')
+    .option('-p, --project-path <path>', 'The relative path to the project directory')
+    .option('-j, --jsx-provider-name <name>', 'The name of the JSX provider to use (react, preact)')
+    .option('-e, --example-name <name>', 'The name of the example project to use (basic)')
+    .option('-t, --use-typescript', 'Add this flag to use TypeScript instead of JavaScript')
     .action(async (options) => init(options));
+program
+    .command('info')
+    .description('Prints useful information about your setup')
+    .action(async (options) => info(options));
+program
+    .command('upgrade')
+    .description('Upgrades Zuby to the latest compatible version')
+    .option('-t, --tag <tag>', 'The tag to upgrade to (e.g. v1, v2, latest)')
+    .action(async (options) => upgrade(options));
 program.parse(process.argv);

package/commands/info.d.ts

@@ -0,0 +1,2 @@
+import { BaseCommandOptions } from '../types.js';
+export default function info({ configFile }: BaseCommandOptions): Promise<void>;

package/commands/info.js

@@ -0,0 +1,14 @@
+import { getZubyInternalConfig } from '../config.js';
+import { getZubyPackageConfig } from '../packageConfig.js';
+import os from 'os';
+export default async function info({ configFile }) {
+    const { outDir, output, plugins, customLogger: logger } = await getZubyInternalConfig(configFile);
+    const { version } = getZubyPackageConfig();
+    logger.info(`Zuby: ${version}`);
+    logger.info(`Node: ${process.version}`);
+    logger.info(`OS: ${os.type()} ${os.release()}`);
+    logger.info(`Output: ${output}`);
+    logger.info(`Output dir: ${outDir}`);
+    const pluginNames = plugins.map(plugin => plugin.name).join(', ');
+    logger.info(`Plugins: ${plugins.length ? pluginNames : 'none'}`);
+}

package/commands/init.d.ts

@@ -1,5 +1,5 @@
 import { InitCommandOptions } from '../types.js';
-export default function init(options: InitCommandOptions): Promise<void>;
+export default function init({ projectPath, jsxProviderName, exampleName, useTypescript, }: InitCommandOptions): Promise<void>;
 export declare function initExample(example: Example, options: InitOptions): Promise<void>;
 export declare function getExamples(): Example[];
 export interface Example {

package/commands/init.js

@@ -11,7 +11,7 @@ import { getZubyPackageConfig } from '../packageConfig.js';
 import { globSync } from 'glob';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
-export default async function init(options) {
+export default async function init({ projectPath, jsxProviderName, exampleName, useTypescript, }) {
     const logger = createLogger();
     logger.clearScreen('info');
     logger?.info(`${getTitle(`Let's get started with Zuby`)}\r\n`);
@@ -19,44 +19,79 @@ export default async function init(options) {
     const examples = getExamples();
     const defaultProjectName = 'my-zuby-app';
     const defaultExample = examples.find(example => example.name === 'basic');
-    const { projectPath, jsxProviderName, exampleName } = await inquirer.prompt([
-        {
-            type: 'input',
-            name: 'projectPath',
-            message: 'Where would you like to create your new project?',
-            default: `./${defaultProjectName}`,
-            prefix: `${chalk.yellowBright.bgWhite(' name    ')} ❯ `,
-            validate(projectPath) {
-                if (existsSync(projectPath)) {
-                    return 'Project with this name already exists. Please choose a different one.';
-                }
-                return true;
+    const jsxProviderNames = ['preact', 'react'];
+    const exampleNames = examples.map(example => example.name);
+    const validateProjectPath = (projectPath) => {
+        if (existsSync(projectPath)) {
+            return 'Project with this name already exists. Please choose a different one.';
+        }
+        return true;
+    };
+    const validateJsxProviderName = (name) => {
+        if (!jsxProviderNames.includes(name)) {
+            return `Invalid JSX provider name. Please choose one of the following: ${jsxProviderNames.join(',')}.`;
+        }
+        return true;
+    };
+    const validateExampleName = (name) => {
+        if (!exampleNames.includes(name)) {
+            return `Invalid example project name. Please choose one of the following: ${exampleNames.join(',')}.`;
+        }
+        return true;
+    };
+    if (!projectPath || validateProjectPath(projectPath) !== true) {
+        ({ projectPath } = await inquirer.prompt([
+            {
+                type: 'input',
+                name: 'projectPath',
+                message: 'Where would you like to create your new project?',
+                default: `./${defaultProjectName}`,
+                prefix: `${chalk.yellowBright.bgWhite(' name    ')} ❯ `,
+                validate: validateProjectPath,
+            },
+        ]));
+    }
+    else {
+        logger.info(`Project path: ${projectPath}`);
+    }
+    if (!jsxProviderName || validateJsxProviderName(jsxProviderName) !== true) {
+        ({ jsxProviderName } = await inquirer.prompt([
+            {
+                type: 'list',
+                name: 'jsxProviderName',
+                message: 'In which JSX framework would you like to write your components?',
+                choices: jsxProviderNames,
+                default: jsxProviderNames?.[0],
+                prefix: `${chalk.yellowBright.bgWhite(' jsx     ')} ❯ `,
+                validate: validateJsxProviderName,
+            },
+        ]));
+    }
+    else {
+        logger.info(`Jsx Provider: ${jsxProviderName}`);
+    }
+    if (!exampleName || validateExampleName(exampleName) !== true) {
+        ({ exampleName } = await inquirer.prompt([
+            {
+                type: 'list',
+                name: 'exampleName',
+                message: 'Which Zuby example project would you like to use?',
+                choices: exampleNames,
+                default: defaultExample?.name,
+                prefix: `${chalk.yellowBright.bgWhite(' example ')} ❯ `,
+                validate: validateExampleName,
             },
-        },
-        {
-            type: 'list',
-            name: 'jsxProviderName',
-            message: 'In which JSX framework would you like to write your components?',
-            choices: ['preact', 'react'],
-            default: 'preact',
-            prefix: `${chalk.yellowBright.bgWhite(' jsx     ')} ❯ `,
-        },
-        {
-            type: 'list',
-            name: 'exampleName',
-            message: 'Which Zuby example project would you like to use?',
-            choices: examples.map(example => example.name),
-            default: defaultExample?.name,
-            prefix: `${chalk.yellowBright.bgWhite(' example ')} ❯ `,
-        },
-    ]);
-    let useTypescript = false;
+        ]));
+    }
+    else {
+        logger.info(`Example project: ${exampleName}`);
+    }
     const selectedExample = examples.find(example => example.name === exampleName);
     if (!selectedExample) {
         logger.error(`Example ${exampleName} was not found`);
         process.exit(1);
     }
-    if (selectedExample?.isTs) {
+    if (useTypescript === undefined && selectedExample?.isTs) {
         ({ useTypescript } = await inquirer.prompt([
             {
                 type: 'confirm',
@@ -67,7 +102,7 @@ export default async function init(options) {
             },
         ]));
     }
-    const projectName = projectPath.split('/').pop() || defaultProjectName;
+    const projectName = projectPath?.split('/').pop() || defaultProjectName;
     const zubyVersion = getZubyPackageConfig().version;
     await initExample(selectedExample, {
         projectName,

package/commands/upgrade.d.ts

@@ -0,0 +1,3 @@
+import { UpgradeCommandOptions } from '../types.js';
+export default function upgrade({ configFile, tag }: UpgradeCommandOptions): Promise<void>;
+export declare function installDependencies(): boolean;

package/commands/upgrade.js

@@ -0,0 +1,80 @@
+import { getZubyInternalConfig } from '../config.js';
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { resolve } from 'path';
+import { execSync } from 'child_process';
+import { getZubyPackageConfig } from '../packageConfig.js';
+import { getTitle } from '../branding.js';
+import chalk from 'chalk';
+export default async function upgrade({ configFile, tag }) {
+    const { customLogger: logger } = await getZubyInternalConfig(configFile);
+    const packageJsonPath = resolve('package.json');
+    const { version: currentVersion } = getZubyPackageConfig();
+    const [currentMajor, _currentMinor, _currentPatch] = currentVersion.split('.');
+    if (!existsSync(packageJsonPath)) {
+        logger.error(`ERROR: Could not find package.json`);
+        process.exit(1);
+    }
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+    const res = await fetch('https://registry.npmjs.org/-/package/zuby/dist-tags');
+    if (!res.ok) {
+        logger.error(`ERROR: Failed to fetch latest version from NPM.`);
+        process.exit(1);
+    }
+    const tags = (await res.json());
+    const latestVersion = tags.latest;
+    const selectedVersion = tags[tag || `v${currentMajor}`] || latestVersion;
+    logger.info(getTitle(`Checking...`));
+    if (currentVersion === latestVersion) {
+        logger.info(`You are on the latest version of Zuby.js ${currentVersion}`);
+        logger.info(`Well done! 🎉`);
+        process.exit(0);
+    }
+    if (selectedVersion !== latestVersion) {
+        logger.info(chalk.bold(`New major version of Zuby.js is available: ${latestVersion}`));
+        logger.info(`Run 'npx zuby upgrade --tag latest' if you're prepared to upgrade to it.`);
+        logger.info(`\r\n`);
+    }
+    if (currentVersion === selectedVersion) {
+        logger.info(`You are on the latest compatible version of Zuby.js ${currentVersion}`);
+        process.exit(0);
+    }
+    logger.info(`Upgrading Zuby.js to ${selectedVersion}`);
+    Object.keys({
+        ...(packageJson.dependencies || {}),
+        ...(packageJson.devDependencies || {}),
+    }).forEach(name => {
+        if (!name.match(/^zuby|@zubyjs\/(.+)$/i))
+            return;
+        if (packageJson.dependencies?.[name]) {
+            packageJson.dependencies[name] = selectedVersion;
+        }
+        if (packageJson.devDependencies?.[name]) {
+            packageJson.devDependencies[name] = selectedVersion;
+        }
+    });
+    logger.info(`Writing package.json`);
+    writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+    if (installDependencies()) {
+        logger.info(`Zuby.js upgraded to ${selectedVersion}!`);
+        logger.info(`Well done! 🎉`);
+    }
+    else {
+        logger.info(`We're done! 🎉 Now it's your turn.`);
+        logger.info(`Please run 'npm install', 'yarn install' etc.. with your favorite package manager to finish the upgrade.`);
+    }
+}
+export function installDependencies() {
+    if (existsSync('package-lock.json')) {
+        execSync('npm install', { stdio: 'inherit' });
+        return true;
+    }
+    if (existsSync('yarn.lock')) {
+        execSync('yarn install', { stdio: 'inherit' });
+        return true;
+    }
+    if (existsSync('pnpm-lock.yaml')) {
+        execSync('pnpm install', { stdio: 'inherit' });
+        return true;
+    }
+    return false;
+}

package/config.js

@@ -10,6 +10,7 @@ import chunkNamingPlugin from './plugins/chunkNamingPlugin/index.js';
 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';
 let zubyInternalConfig;
 /**
  * Returns the path to the ZubyConfig file.
@@ -148,6 +149,7 @@ export const getBuiltInPlugins = () => {
         manifestPlugin(),
         prerenderPlugin(),
         standaloneBuildPlugin(),
+        preloadPlugin(),
     ];
 };
 /**

package/constants.d.ts

@@ -2,6 +2,7 @@ export declare const ZUBY_CONFIG_FILE = "zuby.config.mjs";
 export declare const BUILD_CHUNKS_MANIFEST = "chunks-manifest.json";
 export declare const CLIENT_CHUNKS_MANIFEST = "client-chunks-manifest.json";
 export declare const SERVER_CHUNKS_MANIFEST = "server-chunks-manifest.json";
+export declare const PREALOD_MANIFEST = "preload-manifest.json";
 export declare const PAGES_MANIFEST = "pages-manifest.json";
 export declare const HTTP_HEADERS: {
     Age: string;
@@ -24,3 +25,6 @@ export declare const HTTP_HEADERS: {
     XZubyCacheTTL: string;
     XZubyCache: string;
 };
+export declare const ZUBY_USER_AGENTS: {
+    Prerenderer: string;
+};

package/constants.js

@@ -2,6 +2,7 @@ export const ZUBY_CONFIG_FILE = 'zuby.config.mjs';
 export const BUILD_CHUNKS_MANIFEST = 'chunks-manifest.json';
 export const CLIENT_CHUNKS_MANIFEST = 'client-chunks-manifest.json';
 export const SERVER_CHUNKS_MANIFEST = 'server-chunks-manifest.json';
+export const PREALOD_MANIFEST = 'preload-manifest.json';
 export const PAGES_MANIFEST = 'pages-manifest.json';
 export const HTTP_HEADERS = {
     // Standard HTTP headers
@@ -27,3 +28,7 @@ export const HTTP_HEADERS = {
     XZubyCacheTTL: 'X-Zuby-Cache-TTL',
     XZubyCache: 'X-Zuby-Cache',
 };
+export const ZUBY_USER_AGENTS = {
+    // Zuby user agents
+    Prerenderer: 'zuby-prerender',
+};

package/context/index.d.ts

@@ -9,6 +9,7 @@ export declare class ZubyContext {
         layouts?: import("../templates/types.js").LazyTemplate[] | undefined;
         innerLayouts?: import("../templates/types.js").LazyTemplate[] | undefined;
         handlers?: import("../templates/types.js").LazyTemplate[] | undefined;
+        loaders?: import("../templates/types.js").LazyTemplate[] | undefined;
     } | undefined;
     get site(): string | undefined;
     get generator(): string | undefined;

package/context/types.d.ts

@@ -11,6 +11,7 @@ export interface ZubyRawContext {
         layouts?: LazyTemplate[];
         innerLayouts?: LazyTemplate[];
         handlers?: LazyTemplate[];
+        loaders?: LazyTemplate[];
     };
     /**
      * The render module from JsxProvider.

package/package.json

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

package/pageContext/index.d.ts

@@ -82,6 +82,7 @@ export declare class ZubyPageContext {
         layouts?: import("../templates/types.js").LazyTemplate[] | undefined;
         innerLayouts?: import("../templates/types.js").LazyTemplate[] | undefined;
         handlers?: import("../templates/types.js").LazyTemplate[] | undefined;
+        loaders?: import("../templates/types.js").LazyTemplate[] | undefined;
     } | undefined;
     /**
      * The object with props that should be passed to the page component.
@@ -166,4 +167,9 @@ export declare class ZubyPageContext {
      * @example localizePath('/products/1', 'en') => /products/1
      */
     localizePath(path: string, locale?: string | undefined): string;
+    /**
+     * Returns true if the current request
+     * was made by the Zuby.js pre-render build step.
+     */
+    get isPrerendering(): boolean;
 }

package/pageContext/index.js

@@ -218,4 +218,11 @@ export class ZubyPageContext {
             return path;
         return `/${locale}/${path}`.replace(/\/+/g, '/');
     }
+    /**
+     * Returns true if the current request
+     * was made by the Zuby.js pre-render build step.
+     */
+    get isPrerendering() {
+        return this._request?.headers?.get('user-agent') === 'zuby-prerender';
+    }
 }

package/plugins/contextPlugin/index.d.ts

@@ -4,4 +4,6 @@ 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 generateImportCode(template: Template): string;
 export declare function generateRenderCode(ssr: boolean): Promise<string>;
+export declare function getStaticImportsCode(): string;

package/plugins/contextPlugin/index.js

@@ -1,9 +1,11 @@
 import { getZubyInternalConfig } from '../../config.js';
+import { SYNC_TEMPLATES } from '../../templates/types.js';
 import { relative } from 'path';
 import { normalizePath } from '../../utils/pathUtils.js';
 import { getZubyPackageConfig } from '../../packageConfig.js';
-import { getApps, getErrors, getHandlers, getInnerLayouts, getLayouts, getPages, getTemplates, } from '../../templates/index.js';
+import { getApps, getErrors, getHandlers, getInnerLayouts, getLayouts, getLoaders, getPages, getTemplates, } from '../../templates/index.js';
 let viteConfig;
+let staticImports = [];
 export default function index() {
     return {
         name: 'zuby-context-plugin',
@@ -17,7 +19,8 @@ export default function index() {
                 return;
             }
             const contextCode = await generateCompileTimeContextCode(ssr);
-            return contextCode + code;
+            const staticImportsCode = getStaticImportsCode();
+            return staticImportsCode + contextCode + code;
         },
     };
 }
@@ -42,6 +45,7 @@ export async function generateTemplatesCode(ssr) {
     const innerLayouts = await getInnerLayouts(templates);
     const errors = await getErrors(templates);
     const handlers = await getHandlers(templates);
+    const loaders = await getLoaders(templates);
     const pagesCode = await Promise.all(pages.map(generateTemplateCode) || []);
     const appsCode = await Promise.all(apps.map(generateTemplateCode) || []);
     const errorsCode = await Promise.all(errors.map(generateTemplateCode) || []);
@@ -50,6 +54,7 @@ export async function generateTemplatesCode(ssr) {
         ? await Promise.all(innerLayouts.map(generateTemplateCode) || [])
         : [];
     const handlersCode = ssr ? await Promise.all(handlers.map(generateTemplateCode) || []) : [];
+    const loadersCode = await Promise.all(loaders.map(generateTemplateCode) || []);
     return `{
         pages: [${pagesCode.join(',')}],
         apps: [${appsCode.join(',')}],
@@ -57,6 +62,7 @@ export async function generateTemplatesCode(ssr) {
         layouts: [${layoutsCode.join(',')}],
         innerLayouts: [${innerLayoutsCode.join(',')}],
         handlers: [${handlersCode.join(',')}],
+        loaders: [${loadersCode.join(',')}],
     }`;
 }
 export async function generateTemplateCode(template) {
@@ -67,12 +73,28 @@ export async function generateTemplateCode(template) {
         pathParams: ${JSON.stringify(template.pathParams)},
         pathType: "${template.pathType}",
         templateType: "${template.templateType}",
-        component: () => import("${template.filename}"),
+        component: () => ${generateImportCode(template)},
     }`;
 }
+export function generateImportCode(template) {
+    // Sync templates are imported statically
+    if (Object.values(SYNC_TEMPLATES).includes(template.templateType)) {
+        const key = `__zuby_static_import_${staticImports.length}`;
+        staticImports.push({
+            key,
+            path: template.filename,
+        });
+        return key;
+    }
+    // Async templates are imported dynamically
+    return `import("${template.filename}")`;
+}
 export async function generateRenderCode(ssr) {
     const { jsx } = await getZubyInternalConfig();
     if (!ssr)
         return '{}';
     return `await import("${jsx.renderFile}")`;
 }
+export function getStaticImportsCode() {
+    return staticImports.map(({ key, path }) => `import ${key} from "${path}";`).join('\n');
+}

package/plugins/preloadPlugin/index.d.ts

@@ -0,0 +1,7 @@
+import { ZubyPlugin } from '../../types.js';
+/**
+ * This is internal plugin
+ * that generates preload manifest file
+ * that is used for preloading assets.
+ */
+export default function preloadPlugin(): ZubyPlugin;

package/plugins/preloadPlugin/index.js

@@ -0,0 +1,27 @@
+import { writeFileSync } from 'fs';
+import { join, relative } from 'path';
+import { normalizePath } from '../../utils/pathUtils.js';
+import { getPages } from '../../templates/index.js';
+import { PREALOD_MANIFEST } from '../../constants.js';
+/**
+ * This is internal plugin
+ * that generates preload manifest file
+ * that is used for preloading assets.
+ */
+export default function preloadPlugin() {
+    return {
+        name: 'zuby-preload-plugin',
+        hooks: {
+            'zuby:build:done': async ({ config, clientChunksManifest, templates }) => {
+                const { srcDir, outDir } = config;
+                const preloadManifest = {};
+                const pages = await getPages(templates);
+                pages.forEach(page => {
+                    const filename = normalizePath(relative(srcDir, page.filename));
+                    preloadManifest[filename] = clientChunksManifest[filename] || [];
+                });
+                writeFileSync(normalizePath(join(outDir, 'client', PREALOD_MANIFEST)), JSON.stringify(preloadManifest, null, 2));
+            },
+        },
+    };
+}

package/plugins/prerenderPlugin/index.js

@@ -9,7 +9,7 @@ import { OUTPUTS } from '../../types.js';
 import { PATH_TYPES } from '../../templates/types.js';
 import { substitutePathParams } from '../../templates/pathUtils.js';
 import { normalizePath } from '../../utils/pathUtils.js';
-import { HTTP_HEADERS } from '../../constants.js';
+import { HTTP_HEADERS, ZUBY_USER_AGENTS } from '../../constants.js';
 /**
  * This is internal plugin
  * that pre-renders the pages during the build.
@@ -77,7 +77,7 @@ export default function prerenderPlugin() {
                 const reqBaseUrl = `http://${site || 'localhost'}`;
                 const reqOptions = {
                     headers: {
-                        [HTTP_HEADERS.UserAgent]: 'zuby-prerender',
+                        [HTTP_HEADERS.UserAgent]: ZUBY_USER_AGENTS.Prerenderer,
                     },
                 };
                 // Assign all discovered prerender paths to the config for other plugins.

package/preload/index.d.ts

@@ -0,0 +1,16 @@
+export interface PreloadEntry {
+    href: string;
+    as: string;
+}
+/**
+ * Preloads given link with the lowest priority
+ * in the future when network is idle and DOM loaded.
+ * @example preload("/api/products/1", "json")
+ */
+export declare function preload(href: string, as?: string): void;
+/**
+ * Preloads all required assets for matching page.
+ * Such as scripts, styles, props, etc.
+ * @example preloadPage("/products/1")
+ */
+export declare function preloadPage(href: string, onHandle?: () => void | Promise<void>): void;

package/preload/index.js

@@ -0,0 +1,87 @@
+import { getContext } from '../context/index.js';
+/**
+ * The set of links that were already preloaded.
+ */
+const preloadLinks = new Set();
+/**
+ * Preload manifest that lists all assets
+ * that should be preloaded for each page.
+ * It is generated by preloadPlugin.
+ * @example {
+ *    "pages/index.tsx": [
+ *      "/chunks/chunk-NGLgOfVh.js",
+ *      "/chunks/chunk-8kxF91T_.css"
+ *    ],
+ * }
+ */
+let preloadManifest;
+/**
+ * Preloads given link with the lowest priority
+ * in the future when network is idle and DOM loaded.
+ * @example preload("/api/products/1", "json")
+ */
+export function preload(href, as = 'fetch') {
+    // Do nothing on server
+    if (typeof window === 'undefined')
+        return;
+    // Preload link only once
+    if (preloadLinks.has(href))
+        return;
+    preloadLinks.add(href);
+    // Detect asset type by extension
+    as = href.match(/\.css(\?.*)?$/) ? 'style' : as;
+    as = href.match(/\.js(\?.*)?$/) ? 'script' : as;
+    // Preload link in the future when network is idle
+    // and DOM content was loaded.
+    window.requestIdleCallback(() => addPreloadEntry({
+        href,
+        as,
+    }));
+}
+/**
+ * Preloads all required assets for matching page.
+ * Such as scripts, styles, props, etc.
+ * @example preloadPage("/products/1")
+ */
+export function preloadPage(href, onHandle = () => { }) {
+    // Do nothing on server
+    if (typeof window === 'undefined')
+        return;
+    const context = getContext();
+    const pages = context.templates?.pages || [];
+    const page = pages.find(({ pathRegex }) => {
+        return pathRegex.test(href);
+    });
+    // Preload link itself
+    // if matching page was not found
+    if (!page) {
+        preload(href);
+        return;
+    }
+    window.requestIdleCallback(async () => {
+        await loadPreloadManifest();
+        // Preload assets such as scripts and styles
+        const preloadAssets = preloadManifest?.[page.filename] || [];
+        preloadAssets.forEach(href => preload(href));
+        onHandle();
+    });
+}
+/**
+ * Appends preload link into head element of page.
+ * For example:
+ * <link rel="preload" href="/api/products/1" as="json"/>
+ */
+function addPreloadEntry({ href, as }) {
+    const preloadLink = document.createElement('link');
+    preloadLink.href = href;
+    preloadLink.as = as;
+    preloadLink.rel = 'preload';
+    document.head.appendChild(preloadLink);
+}
+async function loadPreloadManifest() {
+    if (preloadManifest)
+        return;
+    preloadManifest = {};
+    const res = await fetch('/preload-manifest.json');
+    preloadManifest = await res.json();
+}

package/server/index.js

@@ -875,7 +875,7 @@ function normalizePath(path2) {
 }
 
 // src/server/zubyServer.ts
-import { resolve as resolve3 } from "path";
+import { resolve as resolve3, basename as basename2 } from "path";
 import { createReadStream, existsSync as existsSync2, statSync } from "fs";
 
 // src/server/mimeTypes.ts
@@ -2319,6 +2319,13 @@ var ZubyPageContext = class {
       return path2;
     return `/${locale}/${path2}`.replace(/\/+/g, "/");
   }
+  /**
+   * Returns true if the current request
+   * was made by the Zuby.js pre-render build step.
+   */
+  get isPrerendering() {
+    return this._request?.headers?.get("user-agent") === "zuby-prerender";
+  }
 };
 
 // src/server/zubyRenderer.ts
@@ -8507,7 +8514,8 @@ var BASE_TEMPLATES = {
   innerLayout: "innerLayout",
   app: "app",
   error: "error",
-  entry: "entry"
+  entry: "entry",
+  loader: "loader"
 };
 var TEMPLATES = {
   ...BASE_TEMPLATES,
@@ -8812,6 +8820,9 @@ var ZubyServer = class {
       "Content-Length": fileStats.size.toString(),
       "Last-Modified": fileStats.mtime.toUTCString()
     };
+    if (basename2(file).match(/^(chunk|entry)-/)) {
+      headers["Cache-Control"] = "public, max-age=31536000, immutable";
+    }
     let streamOptions = {
       start: 0,
       end: fileStats.size - 1

package/server/zubyServer.js

@@ -2,7 +2,7 @@ import { createServer as createHttpsServer } from 'node:https';
 import { createServer as createHttpServer } from 'node:http';
 import { readFileSync } from 'node:fs';
 import { normalizePath } from '../utils/pathUtils.js';
-import { resolve } from 'path';
+import { resolve, basename } from 'path';
 import { createReadStream, existsSync, statSync } from 'fs';
 import { mimeTypes } from './mimeTypes.js';
 import { createLogger } from '../logger/index.js';
@@ -76,6 +76,11 @@ export default class ZubyServer {
             'Content-Length': fileStats.size.toString(),
             'Last-Modified': fileStats.mtime.toUTCString(),
         };
+        // Chunks and entry can be cached forever,
+        // because they have a hash in their filename
+        if (basename(file).match(/^(chunk|entry)-/)) {
+            headers['Cache-Control'] = 'public, max-age=31536000, immutable';
+        }
         let streamOptions = {
             start: 0,
             end: fileStats.size - 1,

package/templates/index.d.ts

@@ -23,6 +23,10 @@ export declare function getInnerLayouts(templates?: Template[]): Promise<Templat
  * Returns the array of app templates.
  */
 export declare function getApps(templates?: Template[]): Promise<Template[]>;
+/**
+ * Returns the array of Loader templates.
+ */
+export declare function getLoaders(templates?: Template[]): Promise<Template[]>;
 /**
  * Returns the array of page templates.
  */

package/templates/index.js

@@ -55,6 +55,14 @@ export async function getApps(templates) {
     const apps = await getTemplatesOfType(TEMPLATES.app, templates);
     return [...apps, getDefaultTemplate(jsx.appTemplateFile, TEMPLATES.app)];
 }
+/**
+ * Returns the array of Loader templates.
+ */
+export async function getLoaders(templates) {
+    const { jsx } = await getZubyInternalConfig();
+    const loaders = await getTemplatesOfType(TEMPLATES.loader, templates);
+    return [...loaders, getDefaultTemplate(jsx.loaderTemplateFile, TEMPLATES.loader)];
+}
 /**
  * Returns the array of page templates.
  */

package/templates/types.d.ts

@@ -30,6 +30,7 @@ export declare const BASE_TEMPLATES: {
     app: string;
     error: string;
     entry: string;
+    loader: string;
 };
 export declare const TEMPLATES: {
     page: string;
@@ -40,5 +41,9 @@ export declare const TEMPLATES: {
     app: string;
     error: string;
     entry: string;
+    loader: string;
+};
+export declare const SYNC_TEMPLATES: {
+    loader: string;
 };
 export type TemplateType = (typeof TEMPLATES)[keyof typeof TEMPLATES];

package/templates/types.js

@@ -9,6 +9,7 @@ export const BASE_TEMPLATES = {
     app: 'app',
     error: 'error',
     entry: 'entry',
+    loader: 'loader',
 };
 export const TEMPLATES = {
     ...BASE_TEMPLATES,
@@ -16,3 +17,6 @@ export const TEMPLATES = {
     handler: 'handler',
     markdown: 'markdown',
 };
+export const SYNC_TEMPLATES = {
+    loader: 'loader',
+};

package/types.d.ts

@@ -164,10 +164,34 @@ export interface BuildCommandOptions extends BaseCommandOptions {
 }
 export interface InitCommandOptions {
     /**
-     * The name of the new project.
-     * @default my-zuby-app
+     * The relative path to the project directory.
+     * @example './my-zuby-app'
      */
-    projectName?: string;
+    projectPath?: string;
+    /**
+     * The name of the JSX provider,
+     * a.k.a. the framework you want to use to write your components.
+     * @example 'preact'
+     */
+    jsxProviderName?: string;
+    /**
+     * The name of the example project to use.
+     * @example 'basic'
+     */
+    exampleName?: string;
+    /**
+     * Set this option to true to use TypeScript
+     * for your new project.
+     * @example true
+     */
+    useTypescript?: boolean;
+}
+export interface UpgradeCommandOptions extends BaseCommandOptions {
+    /**
+     * The version tag to upgrade to.
+     * Defaults to the latest compatible version.
+     */
+    tag?: string;
 }
 export declare const MODES: {
     development: string;
@@ -188,6 +212,7 @@ export interface JsxProvider {
     layoutTemplateFile: string;
     innerLayoutTemplateFile: string;
     errorTemplateFile: string;
+    loaderTemplateFile: string;
 }
 export type RenderToString = (vnode: any) => Promise<string> | string;
 export type RenderToStream = (vnode: any) => Promise<ReadableStream> | ReadableStream;