xanix 1.0.9 → 1.0.11

package/dist/bin/bundler/buildClient.js

@@ -1,8 +1,9 @@
 import { rollup } from "rollup";
 import fs from "node:fs";
-import bundlerOutput, { outDir } from "./config/output.js";
+import bundlerOutput from "./config/output.js";
 import { getClientRuntimeFile, getClientRuntimeFileName, } from "../include/utils.js";
 import { xanixDefaultPlugins } from "./plugins/plugins.js";
+import outdirs from "../../outdirs.js";
 const buildClient = async (entries) => {
     const input = {};
     for (const entry of entries) {
@@ -10,11 +11,11 @@ const buildClient = async (entries) => {
     }
     const runtimeFileName = getClientRuntimeFileName("production");
     input[runtimeFileName] = getClientRuntimeFile();
-    fs.rmSync(outDir.client, {
+    fs.rmSync(outdirs.client, {
         recursive: true,
         force: true,
     });
-    fs.mkdirSync(outDir.client, {
+    fs.mkdirSync(outdirs.client, {
         recursive: true,
     });
     const build = await rollup({

package/dist/bin/bundler/buildServer.js

@@ -1,17 +1,18 @@
 import { rollup } from "rollup";
 import path from "node:path";
-import bundlerOutput, { outDir } from "./config/output.js";
+import bundlerOutput from "./config/output.js";
 import fs from "node:fs";
 import { createManifest } from "../include/manifest.js";
 import generateClientEntries from "./generateClientEntries.js";
 import { xanixDefaultPlugins } from "./plugins/plugins.js";
+import outdirs from "../../outdirs.js";
 const root = process.cwd();
 const BuildServer = async ({ rootEntry, onBuildEnd }) => {
-    fs.rmSync(outDir.server, {
+    fs.rmSync(outdirs.server, {
         recursive: true,
         force: true,
     });
-    fs.mkdirSync(outDir.server, {
+    fs.mkdirSync(outdirs.server, {
         recursive: true,
     });
     const entries = await generateClientEntries();

package/dist/bin/bundler/cacheNpmModules.js

@@ -7,6 +7,7 @@ import { getClientRuntimeFile } from "../include/utils.js";
 import esbuild from "rollup-plugin-esbuild";
 import url from "@rollup/plugin-url";
 import XanixDocument from "./plugins/XanixDocument/index.js";
+import outdirs from "../../outdirs.js";
 const require = createRequire(import.meta.url);
 const GenerateGraph = async (entries) => {
     const collector = new Map();
@@ -154,7 +155,7 @@ const BuildCache = async (entries) => {
             file: `${entryName}.js`,
         });
     }
-    const cacheDir = path.resolve(process.cwd(), ".xanix/cache");
+    const cacheDir = path.resolve(outdirs.server, "cache");
     await bundleDeps(input, cacheDir);
     return metadata;
 };

package/dist/bin/bundler/config/output.d.ts

@@ -1,9 +1,5 @@
 import { OutputOptions } from "rollup";
 import { XanixClientEntry } from "../../types";
-export declare const outDir: {
-    server: string;
-    client: string;
-};
 type Options = {
     isDev?: boolean;
 };

package/dist/bin/bundler/config/output.js

@@ -1,16 +1,12 @@
-import path from "node:path";
+import outdirs from "../../../outdirs.js";
 const root = process.cwd();
-export const outDir = {
-    server: path.resolve(root, ".xanix"),
-    client: path.resolve(root, ".xanix/client"),
-};
 const client = (entries, { isDev }) => {
     const _entries = {};
     for (const entry of entries) {
         _entries[entry.name] = entry;
     }
     const opt = {
-        dir: outDir.client,
+        dir: outdirs.client,
         format: "esm",
         entryFileNames: (id) => {
             const entry = _entries[id.name];
@@ -33,7 +29,7 @@ const client = (entries, { isDev }) => {
 };
 const server = (opt) => {
     return {
-        dir: outDir.server,
+        dir: outdirs.server,
         format: "esm",
         sourcemap: opt.isDev ?? true,
         entryFileNames: "[name].js",

package/dist/bin/bundler/plugins/XanixEntryFinder/finder.js

@@ -4,6 +4,7 @@ import crypto from "node:crypto";
 import { parse } from "@babel/parser";
 import traverse from "@babel/traverse";
 import * as t from "@babel/types";
+import outdirs from "../../../../outdirs.js";
 const SOURCE_EXTENSIONS = [".tsx", ".ts", ".jsx", ".js", ".mjs", ".cjs"];
 function normalizeFilePath(file) {
     return path.resolve(file).split(path.sep).join("/");
@@ -140,7 +141,7 @@ export function entryFinder(code, id) {
             const root = process.cwd();
             const relativeSource = path.relative(root, componentFile);
             const parsed = path.parse(relativeSource);
-            const buildPath = normalizeFilePath(path.resolve(root, ".xanix", parsed.dir, `${parsed.name}.js`));
+            const buildPath = normalizeFilePath(path.resolve(root, outdirs.root, parsed.dir, `${parsed.name}.js`));
             const entry = {
                 id: clientId,
                 name: componentName,

package/dist/bin/bundler/plugins/XanixPageTransform/index.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from "rollup";
+export default function XanixPageTransform(): Plugin;

package/dist/bin/bundler/plugins/XanixPageTransform/index.js

@@ -0,0 +1,19 @@
+import { transformer } from "./transformer.js";
+export default function XanixPageTransform() {
+    return {
+        name: "xanix-page-transform",
+        async transform(code, id) {
+            if (id.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(id)) {
+                return null;
+            }
+            const result = transformer(code, id);
+            if (!result) {
+                return null;
+            }
+            return {
+                code: result.code,
+                map: result.map,
+            };
+        },
+    };
+}

package/dist/bin/bundler/plugins/XanixPageTransform/transformer.d.ts

@@ -0,0 +1,16 @@
+import * as t from "@babel/types";
+export interface XanixTransformResult {
+    code: string;
+    map: any;
+}
+export declare function resolveFile(file: string): string;
+export declare function resolveComponentFile(importer: string, importPath: string): string;
+export declare function createPageId(file: string): string;
+export declare function getJSXComponentName(node: t.JSXElement): string | null;
+export declare function findComponentImport(ast: t.File, componentName: string): {
+    file: string;
+    export: string;
+    declaration: t.ImportDeclaration;
+    specifier: t.ImportSpecifier | t.ImportDefaultSpecifier;
+} | null;
+export declare function transformer(code: string, id: string): XanixTransformResult | null;

package/dist/bin/bundler/plugins/XanixPageTransform/transformer.js

@@ -0,0 +1,501 @@
+import path from "node:path";
+import fs from "node:fs";
+import crypto from "node:crypto";
+import { parse } from "@babel/parser";
+import traverse from "@babel/traverse";
+import generate from "@babel/generator";
+import * as t from "@babel/types";
+const RUNTIME_IMPORT = "xanix/runtime";
+const SOURCE_EXTENSIONS = [".tsx", ".ts", ".jsx", ".js", ".mjs", ".cjs"];
+function normalizeFilePath(file) {
+    return path.resolve(file).split(path.sep).join("/");
+}
+export function resolveFile(file) {
+    const absolute = path.resolve(file);
+    if (fs.existsSync(absolute)) {
+        const stat = fs.statSync(absolute);
+        if (stat.isFile()) {
+            return absolute;
+        }
+    }
+    for (const ext of SOURCE_EXTENSIONS) {
+        const candidate = `${absolute}${ext}`;
+        if (fs.existsSync(candidate) && fs.statSync(candidate).isFile()) {
+            return path.resolve(candidate);
+        }
+    }
+    if (fs.existsSync(absolute) && fs.statSync(absolute).isDirectory()) {
+        for (const ext of SOURCE_EXTENSIONS) {
+            const candidate = path.join(absolute, `index${ext}`);
+            if (fs.existsSync(candidate) && fs.statSync(candidate).isFile()) {
+                return path.resolve(candidate);
+            }
+        }
+    }
+    return absolute;
+}
+export function resolveComponentFile(importer, importPath) {
+    if (!importPath.startsWith(".")) {
+        return importPath;
+    }
+    const base = path.resolve(path.dirname(importer), importPath);
+    return resolveFile(base);
+}
+export function createPageId(file) {
+    return `c_${crypto
+        .createHash("sha256")
+        .update(path.normalize(file))
+        .digest("hex")
+        .slice(0, 12)}`;
+}
+export function getJSXComponentName(node) {
+    const name = node.openingElement.name;
+    if (t.isJSXIdentifier(name)) {
+        return name.name;
+    }
+    if (t.isJSXMemberExpression(name)) {
+        if (t.isJSXIdentifier(name.object) && t.isJSXIdentifier(name.property)) {
+            return `${name.object.name}.${name.property.name}`;
+        }
+    }
+    return null;
+}
+export function findComponentImport(ast, componentName) {
+    for (const node of ast.program.body) {
+        if (!t.isImportDeclaration(node)) {
+            continue;
+        }
+        for (const specifier of node.specifiers) {
+            if (t.isImportDefaultSpecifier(specifier) &&
+                specifier.local.name === componentName) {
+                return {
+                    file: node.source.value,
+                    export: "default",
+                    declaration: node,
+                    specifier,
+                };
+            }
+            if (t.isImportSpecifier(specifier) &&
+                specifier.local.name === componentName) {
+                const imported = specifier.imported;
+                return {
+                    file: node.source.value,
+                    export: t.isIdentifier(imported) ? imported.name : imported.value,
+                    declaration: node,
+                    specifier,
+                };
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Remove a specific component from:
+ *
+ * import Home from "./Home";
+ *
+ * or:
+ *
+ * import Home, { foo } from "./Home";
+ *
+ * or:
+ *
+ * import { Home, foo } from "./Home";
+ */
+function removeComponentImport(componentImport) {
+    const { declaration, specifier } = componentImport;
+    const index = declaration.specifiers.indexOf(specifier);
+    if (index !== -1) {
+        declaration.specifiers.splice(index, 1);
+    }
+}
+function removeEmptyImportDeclarations(ast) {
+    ast.program.body = ast.program.body.filter((statement) => {
+        if (!t.isImportDeclaration(statement)) {
+            return true;
+        }
+        return statement.specifiers.length > 0;
+    });
+}
+/**
+ * Create:
+ *
+ * const Home =
+ *   (await import("./Home")).default;
+ *
+ * or:
+ *
+ * const Home =
+ *   (await import("./Home")).Home;
+ */
+function createDynamicComponentImport(componentName, importPath, exportName) {
+    const importCall = t.callExpression(t.import(), [
+        t.stringLiteral(importPath),
+    ]);
+    const awaitedImport = t.awaitExpression(importCall);
+    const property = exportName === "default"
+        ? t.identifier("default")
+        : t.identifier(exportName);
+    const value = t.memberExpression(awaitedImport, property);
+    return t.variableDeclaration("const", [
+        t.variableDeclarator(t.identifier(componentName), value),
+    ]);
+}
+/**
+ * Convert a JSX name into an expression.
+ *
+ * Example:
+ *
+ * <Home />
+ *
+ * becomes:
+ *
+ * Home
+ */
+function jsxNameToExpression(name) {
+    if (t.isJSXIdentifier(name)) {
+        return t.identifier(name.name);
+    }
+    if (t.isJSXMemberExpression(name)) {
+        const object = jsxNameToExpressionFromJSXName(name.object);
+        const property = jsxNameToExpressionFromJSXName(name.property);
+        if (!object || !property) {
+            return null;
+        }
+        return t.memberExpression(object, property);
+    }
+    return null;
+}
+function jsxNameToExpressionFromJSXName(name) {
+    if (t.isJSXIdentifier(name)) {
+        return t.identifier(name.name);
+    }
+    if (t.isJSXMemberExpression(name)) {
+        const object = jsxNameToExpressionFromJSXName(name.object);
+        const property = jsxNameToExpressionFromJSXName(name.property);
+        if (!object || !property) {
+            return null;
+        }
+        return t.memberExpression(object, property);
+    }
+    return null;
+}
+/**
+ * Convert JSX attributes into an object expression.
+ *
+ * Example:
+ *
+ * <Home
+ *   name="Naxrul"
+ *   age={30}
+ *   active
+ *   {...user}
+ * />
+ *
+ * becomes:
+ *
+ * {
+ *   name: "Naxrul",
+ *   age: 30,
+ *   active: true,
+ *   ...user
+ * }
+ */
+function jsxAttributesToProps(jsx) {
+    const properties = [];
+    for (const attribute of jsx.openingElement.attributes) {
+        /**
+         * Handle:
+         *
+         * {...props}
+         */
+        if (t.isJSXSpreadAttribute(attribute)) {
+            properties.push(t.spreadElement(attribute.argument));
+            continue;
+        }
+        /**
+         * Normal JSX attribute:
+         *
+         * name="value"
+         * name={value}
+         * active
+         */
+        if (!t.isJSXAttribute(attribute)) {
+            continue;
+        }
+        function jsxAttributeNameToExpression(name) {
+            if (t.isJSXIdentifier(name)) {
+                return t.identifier(name.name);
+            }
+            return t.stringLiteral(`${name.namespace.name}:${name.name.name}`);
+        }
+        const key = jsxAttributeNameToExpression(attribute.name);
+        /**
+         * Boolean JSX prop:
+         *
+         * <Home active />
+         *
+         * becomes:
+         *
+         * active: true
+         */
+        if (!attribute.value) {
+            properties.push(t.objectProperty(key, t.booleanLiteral(true)));
+            continue;
+        }
+        /**
+         * String prop:
+         *
+         * name="Naxrul"
+         *
+         * becomes:
+         *
+         * name: "Naxrul"
+         */
+        if (t.isStringLiteral(attribute.value)) {
+            properties.push(t.objectProperty(key, t.stringLiteral(attribute.value.value)));
+            continue;
+        }
+        /**
+         * Expression prop:
+         *
+         * age={30}
+         * user={user}
+         * items={items.map(...)}
+         */
+        if (t.isJSXExpressionContainer(attribute.value)) {
+            const expression = attribute.value.expression;
+            if (t.isJSXEmptyExpression(expression)) {
+                continue;
+            }
+            properties.push(t.objectProperty(key, expression));
+            continue;
+        }
+        /**
+         * JSX element as a prop:
+         *
+         * content={<div>Hello</div>}
+         */
+        if (t.isJSXElement(attribute.value)) {
+            properties.push(t.objectProperty(key, attribute.value));
+            continue;
+        }
+    }
+    return t.objectExpression(properties);
+}
+/**
+ * Convert:
+ *
+ * <Home name="Naxrul" age={30} />
+ *
+ * into:
+ *
+ * {
+ *   component: Home,
+ *   props: {
+ *     name: "Naxrul",
+ *     age: 30
+ *   }
+ * }
+ */
+function jsxToComponentAndProps(jsx) {
+    const component = jsxNameToExpression(jsx.openingElement.name);
+    if (!component) {
+        return null;
+    }
+    const props = jsxAttributesToProps(jsx);
+    return {
+        component,
+        props,
+    };
+}
+function hasRuntimeImport(ast, name) {
+    for (const statement of ast.program.body) {
+        if (!t.isImportDeclaration(statement)) {
+            continue;
+        }
+        if (statement.source.value !== RUNTIME_IMPORT) {
+            continue;
+        }
+        for (const specifier of statement.specifiers) {
+            if (t.isImportSpecifier(specifier) &&
+                t.isIdentifier(specifier.imported) &&
+                specifier.imported.name === name) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+function injectRuntimeImport(ast, name) {
+    if (hasRuntimeImport(ast, name)) {
+        return;
+    }
+    // Find existing:
+    // import { ... } from "xanix/runtime";
+    for (const statement of ast.program.body) {
+        if (!t.isImportDeclaration(statement)) {
+            continue;
+        }
+        if (statement.source.value !== RUNTIME_IMPORT) {
+            continue;
+        }
+        statement.specifiers.push(t.importSpecifier(t.identifier(name), t.identifier(name)));
+        return;
+    }
+    // No runtime import exists yet
+    ast.program.body.unshift(t.importDeclaration([t.importSpecifier(t.identifier(name), t.identifier(name))], t.stringLiteral(RUNTIME_IMPORT)));
+}
+export function transformer(code, id) {
+    const ast = parse(code, {
+        sourceType: "module",
+        plugins: ["typescript", "jsx"],
+    });
+    let changed = false;
+    traverse(ast, {
+        CallExpression(callPath) {
+            const call = callPath.node;
+            /**
+             * Find:
+             *
+             * res.send(<Home />);
+             */
+            if (!t.isMemberExpression(call.callee)) {
+                return;
+            }
+            if (!t.isIdentifier(call.callee.property, {
+                name: "send",
+            })) {
+                return;
+            }
+            const argument = call.arguments[0];
+            if (!argument || !t.isJSXElement(argument)) {
+                return;
+            }
+            const functionPath = callPath.getFunctionParent();
+            if (!functionPath) {
+                return;
+            }
+            const params = functionPath.node.params;
+            if (params.length < 2) {
+                return;
+            }
+            const requestParam = params[0];
+            const responseParam = params[1];
+            if (!t.isIdentifier(requestParam) || !t.isIdentifier(responseParam)) {
+                return;
+            }
+            const componentName = getJSXComponentName(argument);
+            if (!componentName) {
+                return;
+            }
+            const componentImport = findComponentImport(ast, componentName);
+            if (!componentImport) {
+                return;
+            }
+            const componentImportPath = componentImport.file;
+            const componentFile = resolveComponentFile(id, componentImportPath);
+            if (!path.isAbsolute(componentFile)) {
+                return;
+            }
+            const normalizedFile = normalizeFilePath(componentFile);
+            const pageId = createPageId(normalizedFile);
+            /**
+             * Convert:
+             *
+             * <Home name="Naxrul" age={30} />
+             *
+             * into:
+             *
+             * component: Home
+             *
+             * props: {
+             *   name: "Naxrul",
+             *   age: 30
+             * }
+             */
+            const componentAndProps = jsxToComponentAndProps(argument);
+            if (!componentAndProps) {
+                return;
+            }
+            /**
+             * Remove:
+             *
+             * import Home from "./Home";
+             */
+            removeComponentImport(componentImport);
+            /**
+             * Add:
+             *
+             * const Home =
+             *   (await import("./Home")).default;
+             */
+            const dynamicImport = createDynamicComponentImport(componentName, componentImportPath, componentImport.export);
+            /**
+             * Insert immediately before:
+             *
+             * res.send(<Home />);
+             */
+            const statementPath = callPath.getStatementParent();
+            if (statementPath) {
+                statementPath.insertBefore(dynamicImport);
+            }
+            /**
+             * Route becomes:
+             *
+             * async (req, res) => {}
+             */
+            if (t.isFunction(functionPath.node)) {
+                functionPath.node.async = true;
+            }
+            /**
+             * Replace:
+             *
+             * res.send(<Home />);
+             *
+             * with:
+             *
+             * res.send(
+             *   await xanixPage({
+             *     clientId,
+             *     req,
+             *     res,
+             *     component: Home,
+             *     props: {
+             *       ...
+             *     }
+             *   })
+             * );
+             */
+            const pageCall = t.awaitExpression(t.callExpression(t.identifier("xanixPage"), [
+                t.objectExpression([
+                    t.objectProperty(t.identifier("pageId"), t.stringLiteral(pageId)),
+                    t.objectProperty(t.identifier("req"), t.identifier(requestParam.name)),
+                    t.objectProperty(t.identifier("res"), t.identifier(responseParam.name)),
+                    t.objectProperty(t.identifier("Component"), componentAndProps.component),
+                    t.objectProperty(t.identifier("props"), componentAndProps.props),
+                ]),
+            ]));
+            call.arguments[0] = pageCall;
+            changed = true;
+        },
+    });
+    if (!changed) {
+        return null;
+    }
+    /**
+     * Add:
+     *
+     * import xanixPage from "xanix/page";
+     */
+    injectRuntimeImport(ast, "xanixPage");
+    /**
+     * Remove empty imports.
+     */
+    removeEmptyImportDeclarations(ast);
+    const output = generate(ast, {}, code);
+    return {
+        code: output.code,
+        map: output.map,
+    };
+}

package/dist/bin/bundler/plugins/XanixPageTransform.js

@@ -0,0 +1 @@
+"use strict";

package/dist/bin/bundler/plugins/XanixResolveCacheDeps/index.js

@@ -1,5 +1,6 @@
 import path from "node:path";
 import BuildCache from "../../cacheNpmModules.js";
+import outdirs from "../../../../outdirs.js";
 function XanixResolveCacheDeps(metadata, entries) {
     if (!entries.length) {
         return {
@@ -14,12 +15,15 @@ function XanixResolveCacheDeps(metadata, entries) {
             }
             const dependency = metadata.get(source);
             if (dependency) {
-                return { id: `/.xanix/cache/${dependency.file}`, external: true };
+                return { id: `/${outdirs.cache}/${dependency.file}`, external: true };
             }
             const buildCache = await BuildCache(entries);
             const newDependency = buildCache.get(source);
             if (newDependency) {
-                return { id: `/.xanix/cache/${newDependency.file}`, external: true };
+                return {
+                    id: `/${outdirs.cache}/${newDependency.file}`,
+                    external: true,
+                };
             }
         },
     };