xanix 1.0.4 → 1.0.7

package/dist/bin/bundler/plugins/XanixTransform/transformer copy.js

@@ -0,0 +1,631 @@
+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,
+    };
+}
+/**
+ * Find:
+ *
+ * const app = express();
+ * const exp = express();
+ * const server = express();
+ *
+ * Returns the variable name.
+ */
+function findExpressAppVariable(ast) {
+    for (const statement of ast.program.body) {
+        if (!t.isVariableDeclaration(statement)) {
+            continue;
+        }
+        for (const declaration of statement.declarations) {
+            if (!t.isIdentifier(declaration.id)) {
+                continue;
+            }
+            if (!t.isCallExpression(declaration.init)) {
+                continue;
+            }
+            if (!t.isIdentifier(declaration.init.callee, {
+                name: "express",
+            })) {
+                continue;
+            }
+            return declaration.id.name;
+        }
+    }
+    return null;
+}
+/**
+ * Replace:
+ *
+ * const app = express();
+ *
+ * with:
+ *
+ * const app = createXanixServer({
+ *   mode: "watch"
+ * });
+ */
+function transformExpressAppTocreateXanixServer(ast, args) {
+    const expressVariable = findExpressAppVariable(ast);
+    if (!expressVariable) {
+        return false;
+    }
+    for (const statement of ast.program.body) {
+        if (!t.isVariableDeclaration(statement)) {
+            continue;
+        }
+        for (const declaration of statement.declarations) {
+            if (!t.isIdentifier(declaration.id)) {
+                continue;
+            }
+            if (declaration.id.name !== expressVariable) {
+                continue;
+            }
+            if (!t.isCallExpression(declaration.init)) {
+                continue;
+            }
+            if (!t.isIdentifier(declaration.init.callee, {
+                name: "express",
+            })) {
+                continue;
+            }
+            declaration.init = t.callExpression(t.identifier("createXanixServer"), [
+                t.objectExpression([
+                    t.objectProperty(t.identifier("mode"), t.stringLiteral(args.mode)),
+                ]),
+            ]);
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Remove:
+ *
+ * import express from "express";
+ *
+ * once express() has been replaced by
+ * createXanixServer().
+ *
+ * Also handles:
+ *
+ * import express, { Router } from "express";
+ */
+function removeExpressImport(ast) {
+    for (const statement of ast.program.body) {
+        if (!t.isImportDeclaration(statement)) {
+            continue;
+        }
+        if (statement.source.value !== "express") {
+            continue;
+        }
+        statement.specifiers = statement.specifiers.filter((specifier) => {
+            return !(t.isImportDefaultSpecifier(specifier) &&
+                specifier.local.name === "express");
+        });
+    }
+    removeEmptyImportDeclarations(ast);
+}
+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, mode) {
+    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;
+    }
+    /**
+     * Change:
+     *
+     * const app = express();
+     *
+     * into:
+     *
+     * const app = createXanixServer();
+     */
+    const serverTransformed = transformExpressAppTocreateXanixServer(ast, {
+        mode,
+    });
+    if (serverTransformed) {
+        /**
+         * Remove:
+         *
+         * import express from "express";
+         */
+        removeExpressImport(ast);
+        /**
+         * Add:
+         *
+         * import { createXanixServer }
+         *   from "xanix/runtime";
+         */
+        injectRuntimeImport(ast, "createXanixServer");
+    }
+    /**
+     * 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/plugins.js

@@ -1,4 +1,5 @@
 import XanixTsconfigAlias from "./XanixTsconfigAlias.js";
+import XanixDocument from "./XanixDocument/index.js";
 import { nodeResolve } from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import json from "@rollup/plugin-json";
@@ -17,7 +18,7 @@ export function xanixDefaultPlugins(options = {}) {
     let _plugins = [];
     if (isServer) {
         _plugins.push(XanixTransform({ mode: development ? "watch" : "start" }));
-        // _plugins.push(xanixServerData());
+        // _plugins.push(XanixDocument());
     }
     else {
         if (development) {
@@ -64,6 +65,7 @@ export function xanixDefaultPlugins(options = {}) {
         commonjs(),
         json(),
         xanixUseDataId(),
+        XanixDocument(),
         ..._plugins,
         esbuild({
             target: isClient ? "es2022" : "node20",

package/dist/bin/bundler/watchClient.js

@@ -3,15 +3,15 @@ import bundlerOutput, { outDir } from "./config/output.js";
 import fs from "node:fs";
 import BuildCache from "./cacheNpmModules.js";
 import XanixResolveCacheDeps from "./plugins/XanixResolveCacheDeps/index.js";
-import { getDocumentFile, getClientRuntimeFile } from "../include/utils.js";
+import { getClientRuntimeFile, getClientRuntimeFileName, } from "../include/utils.js";
 import { xanixDefaultPlugins } from "./plugins/plugins.js";
 const WatchClient = async (entries, options) => {
     const input = {};
     for (const entry of entries) {
         input[entry.name] = entry.file;
     }
-    input["xanix-runtime"] = getClientRuntimeFile();
-    input["xanix-document"] = await getDocumentFile();
+    const runtimeFileName = getClientRuntimeFileName("development");
+    input[runtimeFileName] = getClientRuntimeFile();
     fs.rmSync(outDir.client, {
         recursive: true,
         force: true,

package/dist/bin/bundler/watchServer.js

@@ -4,7 +4,6 @@ import fs from "node:fs";
 import { createManifest, readManifest } from "../include/manifest.js";
 import generateClientEntries from "./generateClientEntries.js";
 import bundlerOutput, { outDir } from "./config/output.js";
-import { getDocumentFile } from "../include/utils.js";
 import { entriesEqual } from "../include/entry.js";
 import { xanixDefaultPlugins } from "./plugins/plugins.js";
 const root = process.cwd();
@@ -20,7 +19,6 @@ const watchServer = async ({ rootEntry, onChange, onBuildEnd, onServerChange, on
     await createManifest(entries);
     const input = {
         index: path.resolve(root, rootEntry),
-        "xanix-document": await getDocumentFile(),
     };
     const changedFiles = new Set();
     const watcher = watch({
@@ -31,19 +29,24 @@ const watchServer = async ({ rootEntry, onChange, onBuildEnd, onServerChange, on
                 target: "server",
                 development: true,
                 assetExternal: false,
-                onChange: onChange,
+                onChange: (entry) => {
+                    changedFiles.add(entry);
+                    return onChange?.(entry);
+                },
             }),
         ],
         external(id) {
             if (id.startsWith(".") ||
                 path.isAbsolute(id) ||
                 id === "@" ||
-                id.startsWith("@/")) {
+                id.startsWith("@/") ||
+                id.startsWith("xanix") ||
+                id === "virtual:xanix-document") {
                 return false;
             }
             return true;
         },
-        output: bundlerOutput.server(),
+        output: bundlerOutput.server({ isDev: true }),
         watch: {
             clearScreen: false,
         },