zuby 1.0.64 → 1.0.65

package/config.js

@@ -5,6 +5,8 @@ import { randomBytes } from 'crypto';
 import { bundleRequire } from 'bundle-require';
 import { createLogger } from './logger/index.js';
 import { TEMPLATES } from './templates/types.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 // Plugins
 import contextPlugin from './plugins/contextPlugin/index.js';
 import chunkNamingPlugin from './plugins/chunkNamingPlugin/index.js';
@@ -13,6 +15,9 @@ import prerenderPlugin from './plugins/prerenderPlugin/index.js';
 import standaloneBuildPlugin from './plugins/dependenciesPlugin/index.js';
 import preloadPlugin from './plugins/preloadPlugin/index.js';
 import injectPlugin from './plugins/injectPlugin/index.js';
+import { normalizePath } from './utils/pathUtils.js';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
 let zubyInternalConfig;
 /**
  * Returns the path to the ZubyConfig file.
@@ -163,6 +168,13 @@ export const mergeDefaultConfig = async (config) => {
     config.minifyJS = config.minifyJS ?? true;
     config.compress = config.compress ?? true;
     config.poweredByHeader = config.poweredByHeader ?? true;
+    // Image config
+    config.image = config.image ?? {};
+    config.image.sizes = config.image.sizes ?? [160, 320, 640, 768, 1024, 1280, 1536, 1920, 2048];
+    config.image.loader =
+        config.image.loader ?? normalizePath(resolve(__dirname, 'image', 'imageLoader.js'));
+    config.image.defaultFormat = config.image.defaultFormat ?? 'webp';
+    config.image.defaultQuality = config.image.defaultQuality ?? 80;
     // Build ID generator
     config.generateBuildId = config.generateBuildId ?? generateDefaultBuildId;
     // Global props

package/contexts/globalContext.d.ts

@@ -1,5 +1,5 @@
 import { LazyTemplate } from '../templates/types.js';
-import { RenderToStream, RenderToString } from '../types.js';
+import { ImageFormat, ImageLoader, RenderToStream, RenderToString } from '../types.js';
 export interface GlobalContext {
     /**
      * The array with templates.
@@ -56,6 +56,37 @@ export interface GlobalContext {
      * on both client and server side.
      */
     props: Record<string, any>;
+    /**
+     * The image component options.
+     */
+    image?: {
+        /**
+         * The path to the image loader function.
+         * @default 'zuby/imageLoader.js'
+         */
+        loader?: ImageLoader;
+        /**
+         * The array of image sizes
+         * that will be used to generate image src.
+         * Zuby.js will try to use the closest size to the actual specified size.
+         */
+        sizes?: number[];
+        /**
+         * The default format of the image,
+         * that will be passed to the image loader function
+         * if the format is not specified.
+         * @default 'webp'
+         */
+        defaultFormat?: ImageFormat;
+        /**
+         * The default quality of the image,
+         * that will be passed to the image loader function
+         * if the quality is not specified.
+         * This should be a number between 0 and 100.
+         * @default 75
+         */
+        defaultQuality?: number;
+    };
     /**
      * The global server props for the site
      * that will be passed to all pages

package/image/getNearestSize.d.ts

@@ -0,0 +1,18 @@
+import { GlobalContext } from '../contexts/index.js';
+/**
+ * Adjust the image size
+ * to closest matching size from the image.sizes config.
+ * @param context - GlobalContext
+ * @param height - The height of the image
+ * @param width - The width of the image
+ */
+export default function getNearestSize(context: GlobalContext, width: number | undefined, height: number | undefined): {
+    width: number | undefined;
+    height: number | undefined;
+};
+/**
+ * Returns the nearest size from the array of sizes.
+ * @param size - The size to compare
+ * @param sizes - The array of sizes
+ */
+export declare function getNearestSizeFromArray(size: number, sizes: number[]): number;

package/image/getNearestSize.js

@@ -0,0 +1,32 @@
+/**
+ * Adjust the image size
+ * to closest matching size from the image.sizes config.
+ * @param context - GlobalContext
+ * @param height - The height of the image
+ * @param width - The width of the image
+ */
+export default function getNearestSize(context, width, height) {
+    const sizes = context.image?.sizes || [];
+    if (width && height) {
+        const heightRatio = height / width;
+        width = getNearestSizeFromArray(width, sizes);
+        height = width * heightRatio;
+    }
+    else if (width) {
+        width = getNearestSizeFromArray(width, sizes);
+    }
+    else if (height) {
+        height = getNearestSizeFromArray(height, sizes);
+    }
+    return { width, height };
+}
+/**
+ * Returns the nearest size from the array of sizes.
+ * @param size - The size to compare
+ * @param sizes - The array of sizes
+ */
+export function getNearestSizeFromArray(size, sizes) {
+    return sizes.reduce((prev, curr) => {
+        return Math.abs(curr - size) < Math.abs(prev - size) ? curr : prev;
+    });
+}

package/image/imageLoader.d.ts

@@ -0,0 +1,8 @@
+import { ImageLoaderOptions } from '../types.js';
+/**
+ * The default image loader for Zuby.js
+ * that is used to generate image URLs
+ * for your project when <Image> component is used.
+ * @param options - ImageLoaderOptions
+ */
+export default function imageLoader({ context, src }: ImageLoaderOptions): string;

package/image/imageLoader.js

@@ -0,0 +1,13 @@
+/**
+ * The default image loader for Zuby.js
+ * that is used to generate image URLs
+ * for your project when <Image> component is used.
+ * @param options - ImageLoaderOptions
+ */
+export default function imageLoader({ context, src }) {
+    const { buildId } = context;
+    // Add buildId to the image URL
+    if (src.includes('?'))
+        return `${src}&${buildId}`;
+    return `${src}?${buildId}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zuby",
-  "version": "1.0.64",
+  "version": "1.0.65",
   "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

@@ -6,4 +6,6 @@ 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 generateImageCode(): Promise<string>;
 export declare function getStaticImportsCode(): string;
+export declare function getStaticImportkey(): string;

package/plugins/contextPlugin/index.js

@@ -36,6 +36,7 @@ export async function generateCompileTimeContextCode(ssr) {
         version: '${version}',
         buildId: '${buildId}',
         props: ${JSON.stringify(props)},
+        image: ${await generateImageCode()},
         serverProps: ${JSON.stringify(ssr ? serverProps : {})},
         headElements: ${JSON.stringify(ssr ? headElements : [])},
         bodyElements: ${JSON.stringify(ssr ? bodyElements : [])},
@@ -84,7 +85,7 @@ export async function generateTemplateCode(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}`;
+        const key = getStaticImportkey();
         staticImports.push({
             key,
             path: template.filename,
@@ -100,6 +101,26 @@ export async function generateRenderCode(ssr) {
         return '{}';
     return `await import("${jsx.renderFile}")`;
 }
+export async function generateImageCode() {
+    const { image } = await getZubyInternalConfig();
+    let loaderImport = undefined;
+    if (image?.loader) {
+        loaderImport = getStaticImportkey();
+        staticImports.push({
+            key: loaderImport,
+            path: image.loader,
+        });
+    }
+    return `{
+    ${image?.sizes ? `sizes: ${JSON.stringify(image.sizes)},` : ''}
+    ${image?.loader ? `loader: ${loaderImport},` : ''}
+    ${image?.defaultFormat ? `defaultFormat: "${image.defaultFormat}",` : ''}
+    ${image?.defaultQuality ? `defaultQuality: "${image.defaultQuality}",` : ''}
+  }`;
+}
 export function getStaticImportsCode() {
     return staticImports.map(({ key, path }) => `import ${key} from "${path}";`).join('\n');
 }
+export function getStaticImportkey() {
+    return `__zuby_static_import_${staticImports.length}`;
+}

package/plugins/prerenderPlugin/index.js

@@ -5,11 +5,12 @@ import { performance } from 'node:perf_hooks';
 import ZubyRenderer from '../../server/zubyRenderer.js';
 import { writeFile } from 'fs/promises';
 import { getPages } from '../../templates/index.js';
-import { OUTPUTS } from '../../types.js';
+import { OUTPUTS, PLUGIN_HOOKS } 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, ZUBY_USER_AGENTS } from '../../constants.js';
+import { executePlugins } from '../../config.js';
 /**
  * This is internal plugin
  * that pre-renders the pages during the build.
@@ -83,6 +84,10 @@ export default function prerenderPlugin() {
                 // Assign all discovered prerender paths to the config for other plugins.
                 config.prerenderPaths = prerenderPaths;
                 for (const path of prerenderPaths) {
+                    // Run pre-render start hook
+                    await executePlugins(config, PLUGIN_HOOKS.ZubyPrerenderStart, {
+                        path,
+                    });
                     const pageReq = new Request(new URL(path, reqBaseUrl), reqOptions);
                     const propsReq = new Request(new URL(`/_props${path}`, reqBaseUrl), reqOptions);
                     const [pageRes, propsRes] = await Promise.all([
@@ -104,6 +109,11 @@ export default function prerenderPlugin() {
                         });
                     });
                     await Promise.all([writeFile(pageTarget, page), writeFile(propsTarget, props)]);
+                    // Run pre-render done hook
+                    await executePlugins(config, PLUGIN_HOOKS.ZubyPrerenderDone, {
+                        path,
+                        body: page,
+                    });
                     logger.info('[prerender] Pre-rendered path: ' + path);
                 }
                 const finishTime = performance.now();

package/server/index.js

@@ -2563,7 +2563,7 @@ var ZubyServer = class {
       headers[HTTP_HEADERS.ContentLength] = (end - start + 1).toString();
       headers[HTTP_HEADERS.AcceptRanges] = "bytes";
     }
-    const encoding = this.getEncoding(req);
+    const encoding = this.shouldCompress(headers) ? this.getEncoding(req) : ENCODINGS.none;
     const compressionStream = this.getCompressionStream(encoding);
     if (encoding !== ENCODINGS.none) {
       headers[HTTP_HEADERS.ContentEncoding] = encoding;
@@ -2576,9 +2576,9 @@ var ZubyServer = class {
   }
   async serverDirMiddleware(nodeReq, nodeRes, _next) {
     const req = await this.toRequest(nodeReq);
-    const encoding = this.getEncoding(nodeReq);
     const cacheKey = new URL(req.url, "http://localhost").pathname;
     const res = this.cacheRead(cacheKey) || this.cacheWrite(cacheKey, await this.renderer.render(req));
+    const encoding = this.getEncoding(nodeReq);
     return this.toNodeResponse(res, nodeRes, encoding);
   }
   cacheRead(key) {
@@ -2666,6 +2666,7 @@ var ZubyServer = class {
   async toNodeResponse(res, nodeRes, encoding = ENCODINGS.none) {
     const headers = {};
     res.headers.forEach((value, key) => headers[key] = value);
+    encoding = this.shouldCompress(headers) ? encoding : ENCODINGS.none;
     const bodyBuffer = Buffer.from(await res.arrayBuffer());
     const bodyStream = Readable.from(bodyBuffer);
     const compressionStream = this.getCompressionStream(encoding);
@@ -2702,6 +2703,10 @@ var ZubyServer = class {
     };
     return compressionMap[encoding];
   }
+  shouldCompress(resHeaders) {
+    const contentType = (resHeaders[HTTP_HEADERS.ContentType] || resHeaders[HTTP_HEADERS.ContentType.toLowerCase()] || "").toString();
+    return contentType.startsWith("text/") || contentType.startsWith("application/json");
+  }
 };
 
 // src/server/index.ts

package/server/zubyServer.d.ts

@@ -3,7 +3,7 @@
 /// <reference types="node" resolution-mode="require"/>
 import { Server as HttpsServer } from 'node:https';
 import { Server as HttpServer, ServerResponse } from 'node:http';
-import { ZubyServerOptions, NodeResponse, NodeRequest, ZubyMiddleware, Encoding } from './types.js';
+import { ZubyHeaders, ZubyServerOptions, NodeResponse, NodeRequest, ZubyMiddleware, Encoding } from './types.js';
 import { ZubyLogger } from '../logger/types.js';
 import ZubyRenderer from './zubyRenderer.js';
 import { PassThrough } from 'stream';
@@ -30,4 +30,5 @@ export default class ZubyServer {
     reload(): Promise<void>;
     getEncoding(nodeReq: NodeRequest): string;
     getCompressionStream(encoding: Encoding): PassThrough;
+    shouldCompress(resHeaders: ZubyHeaders): boolean;
 }

package/server/zubyServer.js

@@ -106,7 +106,8 @@ export default class ZubyServer {
             headers[HTTP_HEADERS.ContentLength] = (end - start + 1).toString();
             headers[HTTP_HEADERS.AcceptRanges] = 'bytes';
         }
-        const encoding = this.getEncoding(req);
+        // We will compress only txt/json responses for performance reasons
+        const encoding = this.shouldCompress(headers) ? this.getEncoding(req) : ENCODINGS.none;
         const compressionStream = this.getCompressionStream(encoding);
         if (encoding !== ENCODINGS.none) {
             headers[HTTP_HEADERS.ContentEncoding] = encoding;
@@ -124,9 +125,9 @@ export default class ZubyServer {
     }
     async serverDirMiddleware(nodeReq, nodeRes, _next) {
         const req = await this.toRequest(nodeReq);
-        const encoding = this.getEncoding(nodeReq);
         const cacheKey = new URL(req.url, 'http://localhost').pathname;
         const res = this.cacheRead(cacheKey) || this.cacheWrite(cacheKey, await this.renderer.render(req));
+        const encoding = this.getEncoding(nodeReq);
         return this.toNodeResponse(res, nodeRes, encoding);
     }
     cacheRead(key) {
@@ -220,6 +221,8 @@ export default class ZubyServer {
     async toNodeResponse(res, nodeRes, encoding = ENCODINGS.none) {
         const headers = {};
         res.headers.forEach((value, key) => (headers[key] = value));
+        // We will compress only txt/json responses for performance reasons
+        encoding = this.shouldCompress(headers) ? encoding : ENCODINGS.none;
         const bodyBuffer = Buffer.from(await res.arrayBuffer());
         const bodyStream = Readable.from(bodyBuffer);
         const compressionStream = this.getCompressionStream(encoding);
@@ -265,4 +268,10 @@ export default class ZubyServer {
         };
         return compressionMap[encoding];
     }
+    shouldCompress(resHeaders) {
+        const contentType = (resHeaders[HTTP_HEADERS.ContentType] ||
+            resHeaders[HTTP_HEADERS.ContentType.toLowerCase()] ||
+            '').toString();
+        return contentType.startsWith('text/') || contentType.startsWith('application/json');
+    }
 }

package/types.d.ts

@@ -4,6 +4,7 @@ import { ZubyLogger } from './logger/types.js';
 import ReadableStream = NodeJS.ReadableStream;
 import { PathParamsType, Template, TemplateFile } from './templates/types.js';
 import ZubyDevServer from './server/zubyDevServer.js';
+import { GlobalContext } from './contexts/index.js';
 export interface ZubyConfig {
     /**
      * The JSX provider which will be used to render the pages.
@@ -192,6 +193,37 @@ export interface ZubyConfig {
      * @private
      */
     entryScriptsBottom?: string[];
+    /**
+     * The image component options.
+     */
+    image?: {
+        /**
+         * The path to the image loader function.
+         * @default 'zuby/imageLoader.js'
+         */
+        loader?: string;
+        /**
+         * The array of image sizes
+         * that will be used to generate image src.
+         * Zuby.js will try to use the closest size to the actual specified size.
+         */
+        sizes?: number[];
+        /**
+         * The default format of the image,
+         * that will be passed to the image loader function
+         * if the format is not specified.
+         * @default 'webp'
+         */
+        defaultFormat?: ImageFormat;
+        /**
+         * The default quality of the image,
+         * that will be passed to the image loader function
+         * if the quality is not specified.
+         * This should be a number between 0 and 100.
+         * @default 75
+         */
+        defaultQuality?: number;
+    };
 }
 export interface ZubyInternalConfig extends Required<ZubyConfig> {
     /**
@@ -377,6 +409,16 @@ export interface ZubyPlugin extends VitePlugin {
          * This hook is called after the server build is done
          */
         'zuby:build:server:done'?: (params: ZubyBuildHookParams) => void | Promise<void>;
+        /**
+         * This hook is called for each path
+         * before the pre-rendering process starts
+         */
+        'zuby:prerender:start'?: (params: ZubyPrerenderStartParams) => void | Promise<void>;
+        /**
+         * This hook is called for each path
+         * after the pre-rendering process ends
+         */
+        'zuby:prerender:done'?: (params: ZubyPrerenderDoneParams) => void | Promise<void>;
         /**
          * This hook is called after the whole build process is done
          */
@@ -410,6 +452,14 @@ export interface ZubyPreviewHookParams {
     config: ZubyInternalConfig;
     logger: ZubyLogger;
 }
+export interface ZubyPrerenderStartParams {
+    config: ZubyInternalConfig;
+    logger: ZubyLogger;
+    path: string;
+}
+export interface ZubyPrerenderDoneParams extends ZubyPrerenderStartParams {
+    body: string;
+}
 export interface ZubyBuildHookParams {
     config: ZubyInternalConfig;
     logger: ZubyLogger;
@@ -430,6 +480,8 @@ export declare const PLUGIN_HOOKS: {
     ZubyDevSetup: string;
     ZubyDevStart: string;
     ZubyPreviewStart: string;
+    ZubyPrerenderStart: string;
+    ZubyPrerenderDone: string;
     ZubyBuildSetup: string;
     ZubyBuildStart: string;
     ZubyBuildClientDone: string;
@@ -437,3 +489,53 @@ export declare const PLUGIN_HOOKS: {
     ZubyBuildDone: string;
 };
 export type PluginHook = (typeof PLUGIN_HOOKS)[keyof typeof PLUGIN_HOOKS];
+/**
+ * The options for the ImageLoader.
+ */
+export interface ImageLoaderOptions {
+    /**
+     * The GlobalContext
+     */
+    context: GlobalContext;
+    /**
+     * The path to the image file.
+     */
+    src: string;
+    /**
+     * True if the provided src is an absolute path.
+     */
+    isAbsolute?: boolean;
+    /**
+     * The width of the image.
+     */
+    width?: number;
+    /**
+     * The height of the image.
+     */
+    height?: number;
+    /**
+     * The quality of the image.
+     */
+    quality?: number;
+    /**
+     * The format of the image.
+     */
+    format?: ImageFormat;
+}
+export declare const IMAGE_FORMATS: {
+    readonly WEBP: "webp";
+    readonly JPG: "jpg";
+    readonly JPEG: "jpeg";
+    readonly PNG: "png";
+    readonly AVIF: "avif";
+    readonly GIF: "gif";
+};
+export declare const IMAGE_FORMATS_ARRAY: string[];
+export type ImageFormat = (typeof IMAGE_FORMATS)[keyof typeof IMAGE_FORMATS];
+/**
+ * The ImageLoader function that is used to
+ * generate src attribute for the image component
+ * based on the given options.
+ * @param options The options for the image loader.
+ */
+export type ImageLoader = (options: ImageLoaderOptions) => string;

package/types.js

@@ -16,6 +16,10 @@ export const PLUGIN_HOOKS = {
     ZubyDevStart: 'zuby:dev:start',
     // Preview cmd
     ZubyPreviewStart: 'zuby:preview:start',
+    // Pre-rendering hooks
+    // called for each path
+    ZubyPrerenderStart: 'zuby:prerender:start',
+    ZubyPrerenderDone: 'zuby:prerender:done',
     // Build cmd
     ZubyBuildSetup: 'zuby:build:setup',
     ZubyBuildStart: 'zuby:build:start',
@@ -23,3 +27,12 @@ export const PLUGIN_HOOKS = {
     ZubyBuildServerDone: 'zuby:build:server:done',
     ZubyBuildDone: 'zuby:build:done',
 };
+export const IMAGE_FORMATS = {
+    WEBP: 'webp',
+    JPG: 'jpg',
+    JPEG: 'jpeg',
+    PNG: 'png',
+    AVIF: 'avif',
+    GIF: 'gif',
+};
+export const IMAGE_FORMATS_ARRAY = Object.values(IMAGE_FORMATS);