zuby 1.0.32 → 1.0.34

package/commands/build.js

@@ -80,7 +80,8 @@ export default async function build(options) {
     }));
     logger?.info(`${chalk.bgYellow.bold.whiteBright(` Step 4/4 `)} ${chalk.gray(`tracing dependencies...`)}`);
     logger?.info(`Tracing production dependencies...`);
-    const { fileList } = await nodeFileTrace([normalizePath(join(outDir, 'server', 'entry.js'))], {
+    const serverFiles = await glob(`${normalizePath(outDir)}/server/**/*.js`);
+    const { fileList } = await nodeFileTrace(serverFiles, {
         processCwd: process.cwd(),
         ignore: (path) => {
             return path.startsWith(outDir);

package/context/index.d.ts

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

package/context/types.d.ts

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

package/examples/basic/ts/tsconfig.json

@@ -1,29 +1,8 @@
 {
+  "extends": "zuby/tsconfigs/default",
   "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    "types": ["vite/client", "<jsxProviderName>"],
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "<jsxProviderName>",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-
-    "composite": true,
-    "allowSyntheticDefaultImports": true
+    "jsxImportSource": "<jsxProviderName>"
   },
   "include": ["./**/*", "zuby.config.ts"]
 }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "zuby",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "description": "Zuby.js is framework for building SPA apps using Vite",
   "type": "module",
   "main": "index.js",
   "scripts": {
     "release": "cd ./dist && npm publish --access public && cd ..",
     "build": "rm -rf dist/ && tsc && cp -rf package.json README.md src/examples dist/ && npm run bundle-server",
-    "bundle-server": "esbuild src/server/index.ts --bundle --platform=node --format=esm  --outfile=dist/server/index.js",
+    "bundle-server": "esbuild src/server/index.ts --bundle --minify=false --platform=node --format=esm --outfile=dist/server/index.js",
     "watch-build": "npm run build && tsc --watch",
     "push-build": "npm run build && cd dist && yalc push --force && cd ..",
     "test": "exit 0"

package/pageContext/index.d.ts

@@ -5,13 +5,17 @@ export declare class ZubyPageContext {
     protected _request?: Request;
     protected _params: Record<string, string>;
     protected _clientAddress?: string;
+    protected _statusCode: number;
+    protected _props: Record<string, any>;
     protected _zubyContext: ZubyContext;
     constructor(options: {
         url?: URL;
         title?: string;
         request?: Request;
-        response?: Response;
         clientAddress?: string;
+        statusCode?: number;
+        props?: Record<string, any>;
+        zubyContext?: ZubyContext;
     });
     get url(): URL;
     get title(): string;
@@ -30,6 +34,10 @@ export declare class ZubyPageContext {
         errors?: import("../templates/types.js").LazyTemplate[] | undefined;
         layouts?: import("../templates/types.js").LazyTemplate[] | undefined;
         innerLayouts?: import("../templates/types.js").LazyTemplate[] | undefined;
-        apis?: import("../templates/types.js").LazyTemplate[] | undefined;
+        handlers?: import("../templates/types.js").LazyTemplate[] | undefined;
     } | undefined;
+    get props(): Record<string, any>;
+    set props(value: Record<string, any>);
+    get statusCode(): number | undefined;
+    set statusCode(value: number | undefined);
 }

package/pageContext/index.js

@@ -6,7 +6,9 @@ export class ZubyPageContext {
         this._request = options?.request;
         this._params = {};
         this._clientAddress = options?.clientAddress;
-        this._zubyContext = getContext();
+        this._statusCode = options?.statusCode || 200;
+        this._props = options?.props || {};
+        this._zubyContext = options?.zubyContext || getContext();
     }
     get url() {
         if (this.isBrowserEnv) {
@@ -53,4 +55,19 @@ export class ZubyPageContext {
     get templates() {
         return this._zubyContext.templates;
     }
+    get props() {
+        return this._props;
+    }
+    set props(value) {
+        this._props = value || {};
+    }
+    get statusCode() {
+        return this._statusCode;
+    }
+    set statusCode(value) {
+        if (!value || !Number.isInteger(value) || value < 100 || value > 599) {
+            throw new Error(`Invalid status code: ${value}`);
+        }
+        this._statusCode = value;
+    }
 }

package/plugins/contextPlugin/index.js

@@ -2,7 +2,7 @@ import { getZubyInternalConfig } from '../../config.js';
 import { relative } from 'path';
 import { normalizePath } from '../../utils/pathUtils.js';
 import { getZubyPackageConfig } from '../../packageConfig.js';
-import { getApis, getApps, getErrors, getInnerLayouts, getLayouts, getPages, getTemplates, } from '../../templates/index.js';
+import { getApps, getErrors, getHandlers, getInnerLayouts, getLayouts, getPages, getTemplates, } from '../../templates/index.js';
 let viteConfig;
 export default function index() {
     return {
@@ -39,7 +39,7 @@ export async function generateTemplatesCode() {
     const layouts = await getLayouts(templates);
     const innerLayouts = await getInnerLayouts(templates);
     const errors = await getErrors(templates);
-    const apis = await getApis(templates);
+    const handlers = await getHandlers(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) || []);
@@ -49,8 +49,8 @@ export async function generateTemplatesCode() {
     const innerLayoutsCode = viteConfig?.build.ssr
         ? await Promise.all(innerLayouts.map(generateTemplateCode) || [])
         : [];
-    const apisCode = viteConfig?.build.ssr
-        ? await Promise.all(apis.map(generateTemplateCode) || [])
+    const handlersCode = viteConfig?.build.ssr
+        ? await Promise.all(handlers.map(generateTemplateCode) || [])
         : [];
     return `{
         pages: [${pagesCode.join(',')}],
@@ -58,7 +58,7 @@ export async function generateTemplatesCode() {
         errors: [${errorsCode.join(',')}],
         layouts: [${layoutsCode.join(',')}],
         innerLayouts: [${innerLayoutsCode.join(',')}],
-        apis: [${apisCode.join(',')}],
+        handlers: [${handlersCode.join(',')}],
     }`;
 }
 export async function generateTemplateCode(template) {

package/plugins/prerenderPlugin/index.js

@@ -1,14 +1,10 @@
-import { findMatchingTemplate } from '../../templates/index.js';
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
-import { basename, dirname, join, resolve } from 'path';
+import { existsSync, mkdirSync } from 'fs';
+import { dirname, join } from 'path';
 import { getZubyInternalConfig } from '../../config.js';
-import { getContext } from '../../context/index.js';
 import chalk from 'chalk';
-import { normalizePath } from '../../utils/pathUtils.js';
-import { glob } from 'glob';
-import { ZubyPageContext } from '../../pageContext/index.js';
-import { PATH_TYPES } from '../../templates/types.js';
 import { performance } from 'node:perf_hooks';
+import ZubyRenderer from '../../server/zubyRenderer.js';
+import { writeFile } from 'fs/promises';
 /**
  * This is internal plugin
  * that pre-renders the pages during the build.
@@ -28,102 +24,37 @@ export default function prerenderPlugin() {
                 return;
             }
             const startTime = performance.now();
-            const { outDir, customLogger, prerenderPaths, jsx } = await getZubyInternalConfig();
+            const { outDir, customLogger, prerenderPaths, site } = await getZubyInternalConfig();
             customLogger?.info(`${chalk.bgYellow.bold.whiteBright(` Step 3/4 `)} ${chalk.gray(`pre-rendering pages...`)}`);
-            const entryPath = normalizePath(resolve(outDir, 'server', 'entry.js'));
-            const entryModule = await import(`file:///${entryPath}`);
-            const entry = entryModule.default || entryModule;
-            const entryClientJs = (await glob(`${outDir}/client/chunks/entry-*.js`)).pop();
-            const entryClientCss = (await glob(`${outDir}/client/chunks/entry-*.css`)).pop();
-            const ssrManifest = JSON.parse(readFileSync(resolve(outDir, 'server', 'ssr-manifest.json'), 'utf-8'));
-            const zubyContext = getContext();
-            const paths = [
-                ...(prerenderPaths || []),
-                ...(zubyContext.templates?.pages
-                    ?.filter(({ pathType }) => pathType === PATH_TYPES.static)
-                    .map(page => page.path) || []),
-            ];
-            for (const path of paths) {
-                const zubyPageContext = new ZubyPageContext({
-                    url: new URL(path, zubyContext.site || 'http://localhost'),
-                });
-                if (!zubyContext.renderToString) {
-                    throw new Error(`zubyContext.renderToString is undefined`);
-                }
-                if (!zubyContext.renderToStream) {
-                    throw new Error(`zubyContext.renderToStream is undefined`);
-                }
-                // Page
-                const { pages = [] } = zubyContext.templates || {};
-                const { template: page } = findMatchingTemplate(pages, path);
-                // App
-                const { apps = [] } = zubyContext.templates || {};
-                const { template: app } = findMatchingTemplate(apps, path);
-                // Nothing to pre-render
-                if (!page || !app)
-                    continue;
-                // Load layout template component
-                const { layouts = [] } = zubyContext.templates || {};
-                const { template: layout } = findMatchingTemplate(layouts, path);
-                if (!layout) {
-                    throw new Error(`No layout found for path: ${path}`);
-                }
-                const layoutModule = await layout?.component();
-                const layoutComponent = layoutModule.default || layoutModule;
-                // Load innerLayout template component
-                const { innerLayouts = [] } = zubyContext.templates || {};
-                const { template: innerLayout } = findMatchingTemplate(innerLayouts, path);
-                if (!layout) {
-                    throw new Error(`No innerLayout found for path: ${path}`);
-                }
-                const innerLayoutModule = await innerLayout?.component();
-                const innerLayoutComponent = innerLayoutModule.default || innerLayoutModule;
-                // Render the app first
-                let entryHtml = (await zubyContext.renderToString(entry({
-                    context: zubyPageContext,
-                }))) || '';
-                // Composition of the page and the layout
-                const layoutChildren = layoutComponent({
-                    children: innerLayoutComponent({
-                        innerHtml: entryHtml,
-                    }),
-                    context: zubyPageContext,
-                });
-                // Render the layout
-                let html = (await zubyContext.renderToString(layoutChildren)) || '';
-                const staticImports = [
-                    ...(ssrManifest[app.filename] || []),
-                    ...(ssrManifest[page.filename] || []),
-                ];
-                const cssImports = staticImports.filter((imp) => imp.endsWith('.css'));
-                const jsImports = [];
-                // Entry css
-                if (entryClientCss) {
-                    cssImports.unshift(`/chunks/${basename(entryClientCss)}`);
-                }
-                // Entry js
-                if (entryClientJs) {
-                    jsImports.unshift(`/chunks/${basename(entryClientJs)}`);
-                }
-                // Insert document type
-                html = '<!DOCTYPE html>' + html;
-                // Insert client CSS imports
-                cssImports.forEach((imp) => {
-                    html = html.replace(/(<\/head>)/, `<link rel='stylesheet' href="${imp}"/>$1`);
-                });
-                // Insert client JS imports
-                jsImports.forEach((imp) => {
-                    html = html.replace(/(<\/head>)/, `<script type="module" src="${imp}" defer></script>$1`);
-                });
-                const target = join(outDir, 'client', path, 'index.html');
-                const directory = dirname(target);
-                if (!existsSync(directory)) {
-                    mkdirSync(directory, {
+            const zubyRenderer = new ZubyRenderer(outDir);
+            await zubyRenderer.init();
+            const reqBaseUrl = `http://${site || 'localhost'}`;
+            const reqOptions = {
+                headers: {
+                    'user-agent': 'zuby-prerender',
+                },
+            };
+            for (const path of prerenderPaths) {
+                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([
+                    zubyRenderer.render(pageReq),
+                    zubyRenderer.render(propsReq),
+                ]);
+                const [page, props] = await Promise.all([pageRes.text(), propsRes.text()]);
+                const pageTarget = join(outDir, 'client', path, 'index.html');
+                const propsTarget = join(outDir, 'client', '_props', path, 'index.json');
+                const pageDir = dirname(pageTarget);
+                const propsDir = dirname(propsTarget);
+                [pageDir, propsDir].forEach(dir => {
+                    if (existsSync(dir))
+                        return;
+                    mkdirSync(dir, {
                         recursive: true,
                     });
-                }
-                writeFileSync(target, html);
-                console.log('[prerender] Pre-rendered page: ' + path);
+                });
+                await Promise.all([writeFile(pageTarget, page), writeFile(propsTarget, props)]);
+                console.log('[prerender] Prerendered page: ' + path);
             }
             const finishTime = performance.now();
             customLogger?.info(chalk.green(`✓ pre-rendered in ${Math.ceil(finishTime - startTime)}ms`));