zuby 1.0.34 → 1.0.35

package/commands/build.js

@@ -16,7 +16,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 export default async function build(options) {
     const zubyInternalConfig = await getZubyInternalConfig(options.configFile);
-    const { vite: viteConfig, customLogger: logger, outDir, srcDir, publicDir, configFilePath, } = zubyInternalConfig;
+    const { vite: viteConfig, customLogger: logger, outDir, srcDir, cacheDir, publicDir, configFilePath, } = zubyInternalConfig;
     process.env.NODE_ENV = MODES.production;
     logger?.info(getTitle(chalk.gray(`building for production...`)));
     // Clean build directory
@@ -36,6 +36,7 @@ export default async function build(options) {
         build: {
             ...viteConfig?.build,
             outDir: normalizePath(join(outDir, 'client')),
+            ssrManifest: 'chunks-manifest.json',
             rollupOptions: {
                 ...viteConfig?.build?.rollupOptions,
                 input: {
@@ -43,7 +44,9 @@ export default async function build(options) {
                 },
             },
         },
+        cacheDir: normalizePath(join(cacheDir, 'client')),
         mode: MODES.production,
+        appType: 'custom',
     });
     // Server build
     logger?.info(`${chalk.bgYellow.bold.whiteBright(` Step 2/4 `)} ${chalk.gray(`building server...`)}`);
@@ -55,7 +58,7 @@ export default async function build(options) {
             ...viteConfig?.build,
             outDir: normalizePath(join(outDir, 'server')),
             ssr: normalizePath(entryFile),
-            ssrManifest: 'ssr-manifest.json',
+            ssrManifest: 'chunks-manifest.json',
             target: 'node18',
         },
         optimizeDeps: {
@@ -65,7 +68,9 @@ export default async function build(options) {
             force: true,
             disabled: false,
         },
+        cacheDir: normalizePath(join(cacheDir, 'server')),
         mode: MODES.production,
+        appType: 'custom',
     });
     // Add serialized zuby config to build directory
     writeFileSync(normalizePath(join(outDir, 'zuby.config.json')), JSON.stringify(zubyInternalConfig, null, 2));

package/commands/dev.js

@@ -1,39 +1,18 @@
-import { MODES } from '../types.js';
 import { getZubyInternalConfig } from '../config.js';
-import { createServer } from 'vite';
-import { normalizePath } from '../utils/pathUtils.js';
-import { join } from 'path';
 import { performance } from 'node:perf_hooks';
 import { getTitle } from '../branding.js';
 import chalk from 'chalk';
+import ZubyDevServer from '../server/zubyDevServer.js';
 export default async function dev(options) {
-    const { vite: viteConfig, customLogger: logger, outDir = '', } = await getZubyInternalConfig(options.configFile);
-    const port = options.port ? Number(options.port) : viteConfig?.server?.port;
-    const host = options.host || viteConfig?.server?.host;
-    const mode = MODES.development;
-    const serverConfig = {
-        ...viteConfig,
-        server: {
-            ...viteConfig?.server,
-            port,
-            host,
-        },
-        build: {
-            outDir: normalizePath(join(outDir, 'client')),
-        },
-        mode,
-    };
+    const zubyConfig = await getZubyInternalConfig(options.configFile);
+    const { customLogger: logger } = zubyConfig;
     const startTime = performance.now();
-    const server = await createServer(serverConfig);
-    await server.listen();
+    const { host = '127.0.0.1', port = 3000 } = zubyConfig.server;
+    const zubyDevServer = new ZubyDevServer(zubyConfig);
+    await zubyDevServer.listen();
     const readyTime = performance.now();
-    if (!server.httpServer) {
-        throw new Error('HTTP server not available');
-    }
-    const bindAddress = server.httpServer.address();
-    const bindPort = typeof bindAddress === 'string' ? undefined : bindAddress?.port;
     logger?.info(`  ${getTitle(chalk.gray(`started in ${Math.round(readyTime - startTime)}ms`))}\r\n`);
-    logger?.info(`  ┃ Mode     ${mode}`);
-    logger?.info(`  ┃ Local    http://${host}:${bindPort || port}/`);
+    logger?.info(`  ┃ Mode     development`);
+    logger?.info(`  ┃ Local    http://${host}:${port}/`);
     logger?.info(`  ┃ Network  ${chalk.gray('use --host and --port to expose')}\r\n`);
 }

package/config.js

@@ -77,7 +77,8 @@ export const mergeDefaultConfig = async (config) => {
     // Set default values
     config.srcDir = config.srcDir ?? './';
     config.publicDir = config.publicDir ?? 'public';
-    config.outDir = config.outDir ?? 'build';
+    config.outDir = config.outDir ?? '.zuby';
+    config.cacheDir = config.cacheDir ?? '.zuby-cache';
     config.output = config.output ?? 'static';
     config.prerenderPaths = config.prerenderPaths ?? [];
     // Default server config
@@ -104,6 +105,7 @@ export const mergeDefaultConfig = async (config) => {
     config.vite.root = config.vite.root ?? config.srcDir;
     config.vite.base = config.vite.base ?? '/';
     config.vite.build.outDir = config.vite.build.outDir ?? config.outDir;
+    config.vite.cacheDir = config.vite.cacheDir ?? config.cacheDir;
     config.vite.logLevel = config.vite.logLevel ?? config.logLevel;
     config.vite.customLogger = config.vite.customLogger ?? config.customLogger;
     config.vite.server = config.vite.server ?? config.server;

package/package.json

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

package/plugins/contextPlugin/index.d.ts

@@ -1,7 +1,7 @@
 import type { PluginOption } from 'vite';
 import { Template } from '../../templates/types.js';
 export default function index(): PluginOption;
-export declare function generateCompileTimeContextCode(): Promise<string>;
-export declare function generateTemplatesCode(): Promise<string>;
+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 generateRenderCode(): Promise<string>;
+export declare function generateRenderCode(ssr: boolean): Promise<string>;

package/plugins/contextPlugin/index.js

@@ -11,28 +11,29 @@ export default function index() {
         async configResolved(config) {
             viteConfig = config;
         },
-        async transform(code, id) {
+        async transform(code, id, options) {
+            const { ssr = false } = options || {};
             if (!id.includes('entry') || !/\.(js|ts|jsx|tsx|mjs|cjs)(\?.+)?$/.test(id)) {
                 return;
             }
-            const contextCode = await generateCompileTimeContextCode();
+            const contextCode = await generateCompileTimeContextCode(ssr);
             return contextCode + code;
         },
     };
 }
-export async function generateCompileTimeContextCode() {
+export async function generateCompileTimeContextCode(ssr) {
     const { site } = await getZubyInternalConfig();
     const { version } = await getZubyPackageConfig();
     return `globalThis.ZubyRawContext = {
         ...(globalThis.ZubyRawContext || {}),
-        templates: ${await generateTemplatesCode()},
-        render: ${await generateRenderCode()},
+        templates: ${await generateTemplatesCode(ssr)},
+        render: ${await generateRenderCode(ssr)},
         site: '${site || ''}',
         generator: 'Zuby.js ${version}',
         version: '${version}',
     };`;
 }
-export async function generateTemplatesCode() {
+export async function generateTemplatesCode(ssr) {
     const templates = await getTemplates();
     const pages = await getPages(templates);
     const apps = await getApps(templates);
@@ -43,15 +44,11 @@ export async function generateTemplatesCode() {
     const pagesCode = await Promise.all(pages.map(generateTemplateCode) || []);
     const appsCode = await Promise.all(apps.map(generateTemplateCode) || []);
     const errorsCode = await Promise.all(errors.map(generateTemplateCode) || []);
-    const layoutsCode = viteConfig?.build.ssr
-        ? await Promise.all(layouts.map(generateTemplateCode) || [])
-        : [];
-    const innerLayoutsCode = viteConfig?.build.ssr
+    const layoutsCode = ssr ? await Promise.all(layouts.map(generateTemplateCode) || []) : [];
+    const innerLayoutsCode = ssr
         ? await Promise.all(innerLayouts.map(generateTemplateCode) || [])
         : [];
-    const handlersCode = viteConfig?.build.ssr
-        ? await Promise.all(handlers.map(generateTemplateCode) || [])
-        : [];
+    const handlersCode = ssr ? await Promise.all(handlers.map(generateTemplateCode) || []) : [];
     return `{
         pages: [${pagesCode.join(',')}],
         apps: [${appsCode.join(',')}],
@@ -72,9 +69,9 @@ export async function generateTemplateCode(template) {
         component: () => import("${template.filename}"),
     }`;
 }
-export async function generateRenderCode() {
+export async function generateRenderCode(ssr) {
     const { jsx } = await getZubyInternalConfig();
-    if (!viteConfig?.build.ssr)
+    if (!ssr)
         return '{}';
     return `await import("${jsx.renderFile}")`;
 }

package/server/index.js

@@ -751,7 +751,7 @@ var getTitle = (title) => {
 
 // src/server/index.ts
 import { fileURLToPath as fileURLToPath4 } from "url";
-import { dirname as dirname2 } from "path";
+import { dirname as dirname2, resolve as resolve4 } from "path";
 
 // src/logger/index.ts
 import readline from "node:readline";
@@ -864,9 +864,7 @@ function createLogger(level = "info", options = {}) {
 
 // src/server/zubyServer.ts
 import { createServer as createHttpsServer } from "node:https";
-import {
-  createServer as createHttpServer
-} from "node:http";
+import { createServer as createHttpServer } from "node:http";
 import { readFileSync as readFileSync3 } from "node:fs";
 
 // src/utils/pathUtils.ts
@@ -877,7 +875,7 @@ function normalizePath(path2) {
 
 // src/server/zubyServer.ts
 import { resolve as resolve3 } from "path";
-import { createReadStream, existsSync, statSync } from "fs";
+import { createReadStream, existsSync as existsSync2, statSync } from "fs";
 
 // src/server/mimeTypes.ts
 var mimeTypes = Object.freeze({
@@ -2063,9 +2061,6 @@ var mimeTypes = Object.freeze({
   ".zmm": "application/vnd.handheld-entertainment+xml"
 });
 
-// src/server/zubyServer.ts
-import { performance as performance2 } from "node:perf_hooks";
-
 // src/context/index.ts
 var ZubyContext = class {
   constructor(rawContext) {
@@ -5472,10 +5467,10 @@ var Minipass = class extends EventEmitter {
    * Return a void Promise that resolves once the stream ends.
    */
   async promise() {
-    return new Promise((resolve4, reject) => {
+    return new Promise((resolve5, reject) => {
       this.on(DESTROYED, () => reject(new Error("stream destroyed")));
       this.on("error", (er) => reject(er));
-      this.on("end", () => resolve4());
+      this.on("end", () => resolve5());
     });
   }
   /**
@@ -5499,7 +5494,7 @@ var Minipass = class extends EventEmitter {
         return Promise.resolve({ done: false, value: res });
       if (this[EOF])
         return stop();
-      let resolve4;
+      let resolve5;
       let reject;
       const onerr = (er) => {
         this.off("data", ondata);
@@ -5513,19 +5508,19 @@ var Minipass = class extends EventEmitter {
         this.off("end", onend);
         this.off(DESTROYED, ondestroy);
         this.pause();
-        resolve4({ value, done: !!this[EOF] });
+        resolve5({ value, done: !!this[EOF] });
       };
       const onend = () => {
         this.off("error", onerr);
         this.off("data", ondata);
         this.off(DESTROYED, ondestroy);
         stop();
-        resolve4({ done: true, value: void 0 });
+        resolve5({ done: true, value: void 0 });
       };
       const ondestroy = () => onerr(new Error("stream destroyed"));
       return new Promise((res2, rej) => {
         reject = rej;
-        resolve4 = res2;
+        resolve5 = res2;
         this.once(DESTROYED, ondestroy);
         this.once("error", onerr);
         this.once("end", onend);
@@ -6476,9 +6471,9 @@ var PathBase = class {
     if (this.#asyncReaddirInFlight) {
       await this.#asyncReaddirInFlight;
     } else {
-      let resolve4 = () => {
+      let resolve5 = () => {
       };
-      this.#asyncReaddirInFlight = new Promise((res) => resolve4 = res);
+      this.#asyncReaddirInFlight = new Promise((res) => resolve5 = res);
       try {
         for (const e of await this.#fs.promises.readdir(fullpath, {
           withFileTypes: true
@@ -6491,7 +6486,7 @@ var PathBase = class {
         children.provisional = 0;
       }
       this.#asyncReaddirInFlight = void 0;
-      resolve4();
+      resolve5();
     }
     return children.slice(0, children.provisional);
   }
@@ -8352,7 +8347,7 @@ var glob = Object.assign(glob_, {
 glob.glob = glob;
 
 // src/server/zubyRenderer.ts
-import { readFileSync as readFileSync2 } from "fs";
+import { existsSync, readFileSync as readFileSync2 } from "fs";
 
 // src/templates/types.ts
 var BASE_TEMPLATES = {
@@ -8397,15 +8392,25 @@ var ZubyRenderer = class {
   constructor(outDir) {
     this.outDir = outDir;
   }
+  async reload() {
+    await this.init();
+  }
   async init() {
     const entryPath = normalizePath(resolve2(this.outDir, "server", "entry.js"));
     const entryModule = await import(`file:///${entryPath}`);
     this.entry = entryModule.default || entryModule;
     this.entryClientJs = (await glob(`${this.outDir}/client/chunks/entry-*.js`)).pop();
     this.entryClientCss = (await glob(`${this.outDir}/client/chunks/entry-*.css`)).pop();
-    this.ssrManifest = JSON.parse(
-      readFileSync2(resolve2(this.outDir, "server", "ssr-manifest.json"), "utf-8")
-    );
+    if (this.entryClientJs) {
+      this.entryClientJs = `/chunks/${basename(this.entryClientJs || "")}`;
+    }
+    if (this.entryClientCss) {
+      this.entryClientCss = `/chunks/${basename(this.entryClientCss || "")}`;
+    }
+    const manifestPath = resolve2(this.outDir, "client", "chunks-manifest.json");
+    if (existsSync(manifestPath)) {
+      this.chunksManifest = JSON.parse(readFileSync2(manifestPath, "utf-8"));
+    }
     this.zubyContext = getContext();
     this.renderToString = this.zubyContext.renderToString;
     this.renderToStream = this.zubyContext.renderToStream;
@@ -8463,16 +8468,16 @@ var ZubyRenderer = class {
     });
     let html = await this.renderToString?.(layoutChildren) || "";
     const staticImports = [
-      ...this.ssrManifest?.[app?.filename || ""] || [],
-      ...this.ssrManifest?.[page?.filename || ""] || []
+      ...this.chunksManifest?.[app?.filename || ""] || [],
+      ...this.chunksManifest?.[page?.filename || ""] || []
     ];
     const cssImports = staticImports.filter((imp) => imp.endsWith(".css"));
-    const jsImports = [];
+    const jsImports = staticImports.filter((imp) => imp.endsWith(".js"));
     if (this.entryClientCss) {
-      cssImports.unshift(`/chunks/${basename(this.entryClientCss)}`);
+      cssImports.unshift(this.entryClientCss);
     }
     if (this.entryClientJs) {
-      jsImports.unshift(`/chunks/${basename(this.entryClientJs)}`);
+      jsImports.unshift(this.entryClientJs);
     }
     html = "<!DOCTYPE html>" + html;
     cssImports.forEach((imp) => {
@@ -8514,7 +8519,13 @@ var ZubyServer = class {
     this.options = options;
     this.options.responseHeaders = this.options.responseHeaders || {};
     this.logger = options.logger || createLogger("info");
-    this.renderer = new ZubyRenderer(options.outDir);
+    this.renderer = options.renderer || new ZubyRenderer(options.outDir);
+    this.middlewares = [
+      this.defaultHeadersMiddleware.bind(this),
+      this.trailingSlashMiddleware.bind(this),
+      this.clientDirMiddleware.bind(this),
+      this.serverDirMiddleware.bind(this)
+    ];
     const { https, httpsKeyFile, httpsCertFile } = options;
     if (https && httpsKeyFile && httpsCertFile) {
       this.server = createHttpsServer(
@@ -8529,37 +8540,35 @@ var ZubyServer = class {
     }
   }
   async handle(nodeReq, nodeRes) {
-    const startTime = performance2.now();
-    await this.clientDirHandler(nodeReq, nodeRes) || await this.serverDirHandler(nodeReq, nodeRes);
-    const endTime = performance2.now();
-    this.logger.info(`Request: ${nodeReq.url} ${nodeRes.statusCode} ${endTime - startTime}ms`);
+    let index = 0;
+    const next = async () => {
+      if (index < this.middlewares.length) {
+        const middleware = this.middlewares[index];
+        index++;
+        await middleware(nodeReq, nodeRes, next);
+      }
+    };
+    await next();
   }
-  async clientDirHandler(req, res) {
+  async clientDirMiddleware(req, res, next) {
     const { outDir } = this.options;
     const parsedUrl = new URL(req.url || "", "http://localhost:3000");
     const normalizedPath = normalizePath(parsedUrl.pathname);
     let file = normalizePath(
       resolve3(outDir, "client", normalizedPath.substring(1))
     );
-    const exists = existsSync(file);
+    const exists = existsSync2(file);
     const isDirectory = exists && statSync(file).isDirectory();
-    if (isDirectory && normalizedPath.length > 0 && !normalizedPath.endsWith("/")) {
-      const location = `${parsedUrl.pathname}/${parsedUrl.search || ""}`;
-      res.statusCode = 302;
-      res.setHeader("Location", location);
-      res.end();
-      return true;
-    }
     if (!exists)
-      return false;
+      return next();
     if (isDirectory) {
       file = [
         normalizePath(resolve3(file, "index.html")),
         normalizePath(resolve3(file, "index.json"))
-      ].find(existsSync);
+      ].find(existsSync2);
     }
     if (!file)
-      return false;
+      return next();
     const fileStats = statSync(file);
     const extension = file.split(".").pop() || "";
     const contentType = mimeTypes[`.${extension}`] || "application/octet-stream";
@@ -8587,47 +8596,52 @@ var ZubyServer = class {
       headers["Content-Length"] = (end - start + 1).toString();
       headers["Accept-Ranges"] = "bytes";
     }
-    res.writeHead(statusCode, this.addDefaultHeaders(headers));
+    res.writeHead(statusCode, headers);
     createReadStream(file, streamOptions).pipe(res).on("finish", () => {
       res.end();
     });
-    return true;
   }
-  async serverDirHandler(nodeReq, nodeRes) {
+  async serverDirMiddleware(nodeReq, nodeRes) {
     const req = await this.toRequest(nodeReq);
     const res = await this.renderer.render(req);
     return this.toNodeResponse(res, nodeRes);
   }
-  async start() {
-    const serverPromise = new Promise((resolve4, reject) => {
+  async listen() {
+    const serverPromise = new Promise((resolve5, reject) => {
       this.server.listen(this.options.port, this.options.host, 511, () => {
         if (!this.server.listening)
           return reject(new Error(`Server could not start`));
-        resolve4(void 0);
+        resolve5(void 0);
       });
     });
     const rendererPromise = this.renderer.init();
     await Promise.all([serverPromise, rendererPromise]);
   }
-  async stop() {
+  async close() {
     this.server.closeAllConnections();
-    return new Promise((resolve4, reject) => {
+    return new Promise((resolve5, reject) => {
       this.server.close((error) => {
         if (error)
           return reject(error);
-        resolve4(void 0);
+        resolve5(void 0);
       });
     });
   }
-  addDefaultHeaders(headers) {
-    return {
-      "X-Powered-By": "Zuby.js",
-      ...this.options.responseHeaders,
-      ...headers
-    };
+  defaultHeadersMiddleware(_req, res, next) {
+    res.setHeader("X-Powered-By", "Zuby.js");
+    next();
+  }
+  trailingSlashMiddleware(req, res, next) {
+    const [path2, query] = req.url?.split("?") || [];
+    if (path2.endsWith("/") || path2.match(/[.](.+)$/)) {
+      return next();
+    }
+    res.statusCode = 302;
+    res.setHeader("Location", `${path2}/${query ? `?${query}` : ""}`);
+    res.end();
   }
   async toRequest(nodeReq) {
-    return new Promise((resolve4, reject) => {
+    return new Promise((resolve5, reject) => {
       try {
         let buffer = [];
         nodeReq.on("data", (chunk) => buffer.push(chunk)).on("end", () => {
@@ -8639,7 +8653,7 @@ var ZubyServer = class {
           for (const key in nodeReq.headers) {
             headers.append(key, nodeReq.headers[key]);
           }
-          resolve4(
+          resolve5(
             new Request(url, {
               method: nodeReq.method,
               body: nodeReq.method === "POST" ? body : null,
@@ -8655,27 +8669,38 @@ var ZubyServer = class {
   async toNodeResponse(res, nodeRes) {
     const headers = {};
     res.headers.forEach((value, key) => headers[key] = value);
-    nodeRes.writeHead(res.status, this.addDefaultHeaders(headers));
+    nodeRes.writeHead(res.status, headers);
     nodeRes.end(await res.text());
   }
+  use(middleware) {
+    this.middlewares.push(middleware);
+  }
+  useBefore(middleware) {
+    this.middlewares.unshift(middleware);
+  }
+  async reload() {
+    await this.renderer.reload();
+  }
 };
 
 // src/server/index.ts
+import { readFileSync as readFileSync4 } from "fs";
 var __filename = fileURLToPath4(import.meta.url);
 var __dirname = dirname2(__filename);
 var logger = createLogger("info");
+var config = JSON.parse(readFileSync4(resolve4(__dirname, "zuby.config.json"), "utf-8"));
 var mode = process.env["NODE_ENV"] || "production";
 var envPort = process.env["PORT"] ? Number(process.env["PORT"]) : void 0;
 var envHost = process.env["HOST"];
-var port = envPort || 3e3;
-var host = envHost || "127.0.0.1";
+var port = envPort || config?.server?.port || 3e3;
+var host = envHost || config?.server?.host || "127.0.0.1";
 var zubyServer = new ZubyServer({
   port,
   host,
   outDir: __dirname
 });
 if (mode === "production") {
-  await zubyServer.start();
+  await zubyServer.listen();
   logger?.info(`  ${getTitle("")}\r
 `);
   logger?.info(`  \u2503 Mode     ${"production"}`);

package/server/types.d.ts

@@ -1,4 +1,9 @@
+/// <reference types="node" resolution-mode="require"/>
 import { ZubyLogger } from '../logger/types.js';
+import { IncomingMessage, ServerResponse } from 'node:http';
+import ZubyRenderer from './zubyRenderer.js';
+export type NodeRequest = IncomingMessage;
+export type NodeResponse = ServerResponse;
 export type ZubyHeaders = Record<string, string | string[] | undefined>;
 export interface ZubyServerOptions {
     port: number;
@@ -9,4 +14,6 @@ export interface ZubyServerOptions {
     httpsKeyFile?: string;
     logger?: ZubyLogger;
     responseHeaders?: ZubyHeaders;
+    renderer?: ZubyRenderer;
 }
+export type ZubyMiddleware = (req: NodeRequest, res: NodeResponse, next: () => void | Promise<void>) => void | Promise<void>;

package/server/zubyDevRenderer.d.ts

@@ -0,0 +1,10 @@
+import ZubyRenderer from './zubyRenderer.js';
+import { ZubyInternalConfig } from '../types.js';
+import { ViteDevServer } from 'vite';
+export default class ZubyDevRenderer extends ZubyRenderer {
+    protected zubyInternalConfig: ZubyInternalConfig;
+    protected viteServerDevServer: ViteDevServer;
+    constructor(zubyConfig: ZubyInternalConfig, viteServerDevServer: ViteDevServer);
+    init(): Promise<void>;
+    render(req: Request): Promise<Response>;
+}

package/server/zubyDevRenderer.js

@@ -0,0 +1,37 @@
+import { normalizePath } from '../utils/pathUtils.js';
+import { relative } from 'path';
+import { getContext } from '../context/index.js';
+import ZubyRenderer from './zubyRenderer.js';
+import { getEntryFile } from '../commands/build.js';
+export default class ZubyDevRenderer extends ZubyRenderer {
+    constructor(zubyConfig, viteServerDevServer) {
+        super(zubyConfig.outDir);
+        this.zubyInternalConfig = zubyConfig;
+        this.viteServerDevServer = viteServerDevServer;
+    }
+    async init() {
+        const entryPath = this.zubyInternalConfig.jsx.entryTemplateFile;
+        const entryModule = await this.viteServerDevServer.ssrLoadModule(entryPath);
+        this.entry = entryModule.default || entryModule;
+        this.zubyContext = getContext();
+        this.renderToString = this.zubyContext.renderToString;
+        this.renderToStream = this.zubyContext.renderToStream;
+        // Load the entry file from the project directory
+        // or jsxProvider
+        const entryFile = await getEntryFile(this.zubyInternalConfig);
+        this.entryClientJs = '/' + normalizePath(relative(process.cwd(), entryFile));
+    }
+    async render(req) {
+        const originalRes = await super.render(req);
+        // Do not transform non-html responses
+        if (!originalRes.headers.get('content-type')?.includes('text/html'))
+            return originalRes;
+        const body = await originalRes.text();
+        const bodyTransformed = await this.viteServerDevServer.transformIndexHtml(req.url, body);
+        return new Response(bodyTransformed, {
+            headers: originalRes.headers,
+            status: originalRes.status,
+            statusText: originalRes.statusText,
+        });
+    }
+}

package/server/zubyDevServer.d.ts

@@ -0,0 +1,11 @@
+import ZubyServer from './zubyServer.js';
+import { ZubyInternalConfig } from '../types.js';
+import { ViteDevServer } from 'vite';
+export default class ZubyDevServer extends ZubyServer {
+    protected zubyInternalConfig: ZubyInternalConfig;
+    protected viteClientDevServer?: ViteDevServer;
+    protected viteServerDevServer?: ViteDevServer;
+    constructor(zubyConfig: ZubyInternalConfig);
+    listen(): Promise<void>;
+    reload(): Promise<void>;
+}

package/server/zubyDevServer.js

@@ -0,0 +1,117 @@
+import ZubyServer from './zubyServer.js';
+import { MODES } from '../types.js';
+import ZubyDevRenderer from './zubyDevRenderer.js';
+import { createServer } from 'vite';
+import { normalizePath } from '../utils/pathUtils.js';
+import { join } from 'path';
+import { getEntryFile } from '../commands/build.js';
+import { rmSync, watch } from 'fs';
+export default class ZubyDevServer extends ZubyServer {
+    constructor(zubyConfig) {
+        super({
+            port: zubyConfig.server.port || 3000,
+            host: zubyConfig.server.host || '127.0.0.1',
+            outDir: zubyConfig.outDir,
+        });
+        this.zubyInternalConfig = zubyConfig;
+        this.middlewares = [
+            this.defaultHeadersMiddleware.bind(this),
+            this.trailingSlashMiddleware.bind(this),
+            this.serverDirMiddleware.bind(this),
+        ];
+    }
+    async listen() {
+        // Clear cache directory
+        rmSync(this.zubyInternalConfig.cacheDir, {
+            recursive: true,
+            force: true,
+        });
+        // Load the entry file from the project directory
+        // or jsxProvider
+        const entryFile = await getEntryFile(this.zubyInternalConfig);
+        this.viteClientDevServer = await createServer({
+            configFile: false,
+            ...this.zubyInternalConfig.vite,
+            server: {
+                ...this.zubyInternalConfig.vite?.server,
+                middlewareMode: true,
+                port: this.options.port,
+                host: this.options.host,
+                hmr: {
+                    port: this.options.port + 1,
+                    host: this.options.host,
+                    protocol: 'ws',
+                },
+            },
+            build: {
+                ...this.zubyInternalConfig.vite?.build,
+                outDir: normalizePath(join(this.zubyInternalConfig.outDir, 'client')),
+                ssr: false,
+                ssrManifest: 'chunks-manifest.json',
+                rollupOptions: {
+                    ...this.zubyInternalConfig.vite?.build?.rollupOptions,
+                    input: {
+                        entry: normalizePath(entryFile),
+                    },
+                },
+                watch: {
+                    include: `${this.zubyInternalConfig.srcDir}/**/*`,
+                },
+            },
+            cacheDir: normalizePath(join(this.zubyInternalConfig.cacheDir, 'client')),
+            mode: MODES.development,
+            appType: 'custom',
+        });
+        this.viteServerDevServer = await createServer({
+            ...this.zubyInternalConfig.vite,
+            server: {
+                ...this.zubyInternalConfig.vite?.server,
+                middlewareMode: true,
+                port: this.options.port,
+                host: this.options.host,
+                hmr: {
+                    port: this.options.port + 2,
+                    host: this.options.host,
+                    protocol: 'ws',
+                },
+            },
+            configFile: false,
+            publicDir: false,
+            build: {
+                ...this.zubyInternalConfig.vite?.build,
+                outDir: normalizePath(join(this.zubyInternalConfig.outDir, 'server')),
+                ssr: normalizePath(entryFile),
+                ssrManifest: 'chunks-manifest.json',
+                ssrEmitAssets: true,
+                target: 'node18',
+                watch: {
+                    include: `${this.zubyInternalConfig.srcDir}/**/*`,
+                },
+            },
+            optimizeDeps: {
+                ...this.zubyInternalConfig.vite.optimizeDeps,
+                entries: ['**/*'],
+                include: ['**/*'],
+                force: true,
+                disabled: false,
+            },
+            cacheDir: normalizePath(join(this.zubyInternalConfig.cacheDir, 'server')),
+            mode: MODES.development,
+            appType: 'custom',
+        });
+        this.useBefore(this.viteClientDevServer.middlewares);
+        this.useBefore(this.viteServerDevServer.middlewares);
+        this.renderer = new ZubyDevRenderer(this.zubyInternalConfig, this.viteServerDevServer);
+        watch(join(this.zubyInternalConfig.srcDir, 'pages'), { recursive: true }, (eventType, fileName) => {
+            if (eventType === 'rename')
+                this.reload.bind(this)();
+        });
+        await this.renderer.init();
+        await super.listen();
+    }
+    async reload() {
+        this.viteClientDevServer?.moduleGraph.invalidateAll();
+        this.viteServerDevServer?.moduleGraph.invalidateAll();
+        await this.renderer.reload();
+    }
+}

package/server/zubyRenderer.d.ts

@@ -10,10 +10,11 @@ export default class ZubyRenderer {
     protected entry?: EntryType;
     protected entryClientJs?: string;
     protected entryClientCss?: string;
-    protected ssrManifest?: {
+    protected chunksManifest?: {
         [key: string]: string[];
     };
     constructor(outDir: string);
+    reload(): Promise<void>;
     init(): Promise<void>;
     executeHandler(pageContext: ZubyPageContext): Promise<undefined | Response>;
     executeProps(pageContext: ZubyPageContext): Promise<undefined | Response>;

package/server/zubyRenderer.js

@@ -3,19 +3,31 @@ import { ZubyPageContext } from '../pageContext/index.js';
 import { normalizePath } from '../utils/pathUtils.js';
 import { basename, resolve } from 'path';
 import { glob } from 'glob';
-import { readFileSync } from 'fs';
+import { existsSync, readFileSync } from 'fs';
 import { findMatchingTemplate } from '../templates/pathUtils.js';
 export default class ZubyRenderer {
     constructor(outDir) {
         this.outDir = outDir;
     }
+    async reload() {
+        await this.init();
+    }
     async init() {
         const entryPath = normalizePath(resolve(this.outDir, 'server', 'entry.js'));
         const entryModule = await import(`file:///${entryPath}`);
         this.entry = entryModule.default || entryModule;
         this.entryClientJs = (await glob(`${this.outDir}/client/chunks/entry-*.js`)).pop();
         this.entryClientCss = (await glob(`${this.outDir}/client/chunks/entry-*.css`)).pop();
-        this.ssrManifest = JSON.parse(readFileSync(resolve(this.outDir, 'server', 'ssr-manifest.json'), 'utf-8'));
+        if (this.entryClientJs) {
+            this.entryClientJs = `/chunks/${basename(this.entryClientJs || '')}`;
+        }
+        if (this.entryClientCss) {
+            this.entryClientCss = `/chunks/${basename(this.entryClientCss || '')}`;
+        }
+        const manifestPath = resolve(this.outDir, 'client', 'chunks-manifest.json');
+        if (existsSync(manifestPath)) {
+            this.chunksManifest = JSON.parse(readFileSync(manifestPath, 'utf-8'));
+        }
         this.zubyContext = getContext();
         this.renderToString = this.zubyContext.renderToString;
         this.renderToStream = this.zubyContext.renderToStream;
@@ -82,18 +94,18 @@ export default class ZubyRenderer {
         // Render the layout
         let html = (await this.renderToString?.(layoutChildren)) || '';
         const staticImports = [
-            ...(this.ssrManifest?.[app?.filename || ''] || []),
-            ...(this.ssrManifest?.[page?.filename || ''] || []),
+            ...(this.chunksManifest?.[app?.filename || ''] || []),
+            ...(this.chunksManifest?.[page?.filename || ''] || []),
         ];
         const cssImports = staticImports.filter((imp) => imp.endsWith('.css'));
-        const jsImports = [];
+        const jsImports = staticImports.filter((imp) => imp.endsWith('.js'));
         // Entry css
         if (this.entryClientCss) {
-            cssImports.unshift(`/chunks/${basename(this.entryClientCss)}`);
+            cssImports.unshift(this.entryClientCss);
         }
         // Entry js
         if (this.entryClientJs) {
-            jsImports.unshift(`/chunks/${basename(this.entryClientJs)}`);
+            jsImports.unshift(this.entryClientJs);
         }
         // Insert document type
         html = '<!DOCTYPE html>' + html;

package/server/zubyServer.d.ts

@@ -1,26 +1,27 @@
 /// <reference types="node" resolution-mode="require"/>
 /// <reference types="node" resolution-mode="require"/>
 import { Server as HttpsServer } from 'node:https';
-import { Server as HttpServer, IncomingMessage, ServerResponse } from 'node:http';
-import { ZubyHeaders, ZubyServerOptions } from './types.js';
+import { Server as HttpServer, ServerResponse } from 'node:http';
+import { ZubyServerOptions, NodeResponse, NodeRequest, ZubyMiddleware } from './types.js';
 import { ZubyLogger } from '../logger/types.js';
 import ZubyRenderer from './zubyRenderer.js';
-export type NodeRequest = IncomingMessage;
-export type NodeResponse = ServerResponse;
 export default class ZubyServer {
     protected options: ZubyServerOptions;
     protected server: HttpServer | HttpsServer;
     protected logger: ZubyLogger;
     protected renderer: ZubyRenderer;
+    protected middlewares: ZubyMiddleware[];
     constructor(options: ZubyServerOptions);
     handle(nodeReq: NodeRequest, nodeRes: NodeResponse): Promise<void>;
-    clientDirHandler(req: NodeRequest, res: NodeResponse): Promise<boolean | NodeResponse>;
-    serverDirHandler(nodeReq: NodeRequest, nodeRes: NodeResponse): Promise<void>;
-    start(): Promise<void>;
-    stop(): Promise<void>;
-    addDefaultHeaders(headers: ZubyHeaders): {
-        'X-Powered-By': string;
-    };
+    clientDirMiddleware(req: NodeRequest, res: NodeResponse, next: () => void): Promise<void | NodeResponse>;
+    serverDirMiddleware(nodeReq: NodeRequest, nodeRes: NodeResponse): Promise<void>;
+    listen(): Promise<void>;
+    close(): Promise<void>;
+    defaultHeadersMiddleware(_req: NodeRequest, res: NodeResponse, next: () => void): void;
+    trailingSlashMiddleware(req: NodeRequest, res: NodeResponse, next: () => void): void;
     toRequest(nodeReq: NodeRequest): Promise<Request>;
     toNodeResponse(res: Response, nodeRes: ServerResponse): Promise<void>;
+    use(middleware: ZubyMiddleware): void;
+    useBefore(middleware: ZubyMiddleware): void;
+    reload(): Promise<void>;
 }

package/server/zubyServer.js

@@ -1,19 +1,24 @@
 import { createServer as createHttpsServer } from 'node:https';
-import { createServer as createHttpServer, } from 'node:http';
+import { createServer as createHttpServer } from 'node:http';
 import { readFileSync } from 'node:fs';
 import { normalizePath } from '../utils/pathUtils.js';
 import { resolve } from 'path';
 import { createReadStream, existsSync, statSync } from 'fs';
 import { mimeTypes } from './mimeTypes.js';
 import { createLogger } from '../logger/index.js';
-import { performance } from 'node:perf_hooks';
 import ZubyRenderer from './zubyRenderer.js';
 export default class ZubyServer {
     constructor(options) {
         this.options = options;
         this.options.responseHeaders = this.options.responseHeaders || {};
         this.logger = options.logger || createLogger('info');
-        this.renderer = new ZubyRenderer(options.outDir);
+        this.renderer = options.renderer || new ZubyRenderer(options.outDir);
+        this.middlewares = [
+            this.defaultHeadersMiddleware.bind(this),
+            this.trailingSlashMiddleware.bind(this),
+            this.clientDirMiddleware.bind(this),
+            this.serverDirMiddleware.bind(this),
+        ];
         const { https, httpsKeyFile, httpsCertFile } = options;
         if (https && httpsKeyFile && httpsCertFile) {
             // Create the HTTPS server
@@ -28,41 +33,27 @@ export default class ZubyServer {
         }
     }
     async handle(nodeReq, nodeRes) {
-        const startTime = performance.now();
-        (await this.clientDirHandler(nodeReq, nodeRes)) ||
-            (await this.serverDirHandler(nodeReq, nodeRes));
-        const endTime = performance.now();
-        this.logger.info(`Request: ${nodeReq.url} ${nodeRes.statusCode} ${endTime - startTime}ms`);
-        // try {
-        //   const startTime = performance.now();
-        //   await this.clientDirHandler(nodeReq, nodeRes) || await this.serverDirHandler(nodeReq, nodeRes);
-        //   const endTime = performance.now();
-        //   this.logger.info(`Request: ${nodeReq.url} ${nodeRes.statusCode} ${endTime - startTime}ms`);
-        // } catch (error: any) {
-        //   this.logger.error(error?.message);
-        //   nodeRes.statusCode = 500;
-        //   nodeRes.end('Internal server error');
-        // }
+        let index = 0;
+        const next = async () => {
+            if (index < this.middlewares.length) {
+                const middleware = this.middlewares[index];
+                index++;
+                await middleware(nodeReq, nodeRes, next);
+            }
+        };
+        await next();
     }
-    async clientDirHandler(req, res) {
+    async clientDirMiddleware(req, res, next) {
         const { outDir } = this.options;
         const parsedUrl = new URL(req.url || '', 'http://localhost:3000');
         const normalizedPath = normalizePath(parsedUrl.pathname);
         let file = normalizePath(resolve(outDir, 'client', normalizedPath.substring(1)));
         const exists = existsSync(file);
         const isDirectory = exists && statSync(file).isDirectory();
-        if (isDirectory && normalizedPath.length > 0 && !normalizedPath.endsWith('/')) {
-            // Redirect to path with trailing slash for consistency
-            const location = `${parsedUrl.pathname}/${parsedUrl.search || ''}`;
-            res.statusCode = 302;
-            res.setHeader('Location', location);
-            res.end();
-            return true;
-        }
         // Do nothing if the file does not exist.
         // ssrHandler will handle the request.
         if (!exists)
-            return false;
+            return next();
         // If the requested file is a directory, try to load the index file
         if (isDirectory) {
             file = [
@@ -73,7 +64,7 @@ export default class ZubyServer {
         // Server will handle the request
         // if we could not find the file
         if (!file)
-            return false;
+            return next();
         const fileStats = statSync(file);
         const extension = file.split('.').pop() || '';
         const contentType = mimeTypes[`.${extension}`] || 'application/octet-stream';
@@ -103,22 +94,21 @@ export default class ZubyServer {
             headers['Content-Length'] = (end - start + 1).toString();
             headers['Accept-Ranges'] = 'bytes';
         }
-        // Set headers
-        res.writeHead(statusCode, this.addDefaultHeaders(headers));
+        // Write the headers
+        res.writeHead(statusCode, headers);
         // Stream the file
         createReadStream(file, streamOptions)
             .pipe(res)
             .on('finish', () => {
             res.end();
         });
-        return true;
     }
-    async serverDirHandler(nodeReq, nodeRes) {
+    async serverDirMiddleware(nodeReq, nodeRes) {
         const req = await this.toRequest(nodeReq);
         const res = await this.renderer.render(req);
         return this.toNodeResponse(res, nodeRes);
     }
-    async start() {
+    async listen() {
         const serverPromise = new Promise((resolve, reject) => {
             this.server.listen(this.options.port, this.options.host, 511, () => {
                 if (!this.server.listening)
@@ -129,7 +119,7 @@ export default class ZubyServer {
         const rendererPromise = this.renderer.init();
         await Promise.all([serverPromise, rendererPromise]);
     }
-    async stop() {
+    async close() {
         this.server.closeAllConnections();
         return new Promise((resolve, reject) => {
             this.server.close(error => {
@@ -139,12 +129,21 @@ export default class ZubyServer {
             });
         });
     }
-    addDefaultHeaders(headers) {
-        return {
-            'X-Powered-By': 'Zuby.js',
-            ...this.options.responseHeaders,
-            ...headers,
-        };
+    defaultHeadersMiddleware(_req, res, next) {
+        res.setHeader('X-Powered-By', 'Zuby.js');
+        next();
+    }
+    trailingSlashMiddleware(req, res, next) {
+        // Redirect to path with trailing slash for consistency
+        const [path, query] = req.url?.split('?') || [];
+        // Do nothing if the path already has a trailing slash
+        // or if the path has file extension
+        if (path.endsWith('/') || path.match(/[.](.+)$/)) {
+            return next();
+        }
+        res.statusCode = 302;
+        res.setHeader('Location', `${path}/${query ? `?${query}` : ''}`);
+        res.end();
     }
     async toRequest(nodeReq) {
         return new Promise((resolve, reject) => {
@@ -176,7 +175,16 @@ export default class ZubyServer {
     async toNodeResponse(res, nodeRes) {
         const headers = {};
         res.headers.forEach((value, key) => (headers[key] = value));
-        nodeRes.writeHead(res.status, this.addDefaultHeaders(headers));
+        nodeRes.writeHead(res.status, headers);
         nodeRes.end(await res.text());
     }
+    use(middleware) {
+        this.middlewares.push(middleware);
+    }
+    useBefore(middleware) {
+        this.middlewares.unshift(middleware);
+    }
+    async reload() {
+        await this.renderer.reload();
+    }
 }