xanix 0.0.0 → 1.0.0

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

@@ -0,0 +1,350 @@
+import { parse } from "@babel/parser";
+import traverse from "@babel/traverse";
+import generate from "@babel/generator";
+import * as t from "@babel/types";
+const DEFAULT_BROWSER_GLOBALS = [
+    "window",
+    "document",
+    "localStorage",
+    "sessionStorage",
+    "navigator",
+    "location",
+    "history",
+    "screen",
+    "indexedDB",
+    "caches",
+    "WebSocket",
+    "File",
+    "FileReader",
+    "Blob",
+    "FormData",
+    "EventSource",
+    "Worker",
+    "SharedWorker",
+    "IntersectionObserver",
+    "ResizeObserver",
+    "MutationObserver",
+    "PerformanceObserver",
+    "Notification",
+    "BroadcastChannel",
+    "MessageChannel",
+    "MessageEvent",
+    "URL",
+    "URLSearchParams",
+    "MediaSource",
+    "MediaRecorder",
+    "Audio",
+    "Image",
+    "HTMLImageElement",
+];
+export default function xanixBrowserCodeRemover(options = {}) {
+    const { target = "server", globals = DEFAULT_BROWSER_GLOBALS } = options;
+    const browserGlobals = new Set(globals);
+    return {
+        name: "xanix-browser-code-remover",
+        transform(code, id) {
+            if (target !== "server") {
+                return null;
+            }
+            if (id.includes("/node_modules/") || id.includes("\\node_modules\\")) {
+                return null;
+            }
+            if (!/\.(?:[cm]?[jt]sx?)$/.test(id)) {
+                return null;
+            }
+            const ast = parse(code, {
+                sourceType: "module",
+                plugins: [
+                    "jsx",
+                    "typescript",
+                    // "decorators-legacy",
+                    // "classProperties",
+                    // "classPrivateProperties",
+                    // "classPrivateMethods",
+                    // "optionalChaining",
+                    // "nullishCoalescingOperator",
+                    // "dynamicImport",
+                    // "topLevelAwait",
+                ],
+            });
+            const removePaths = new Set();
+            const replacePaths = new Set();
+            function isBrowserGlobal(path) {
+                const name = path.node.name;
+                if (!browserGlobals.has(name)) {
+                    return false;
+                }
+                if (!path.isReferencedIdentifier()) {
+                    return false;
+                }
+                // Don't transform locally declared variables.
+                if (path.scope.getBinding(name)) {
+                    return false;
+                }
+                return true;
+            }
+            function containsBrowserGlobal(path) {
+                let found = false;
+                path.traverse({
+                    Identifier(innerPath) {
+                        if (found) {
+                            return;
+                        }
+                        if (isBrowserGlobal(innerPath)) {
+                            found = true;
+                        }
+                    },
+                });
+                return found;
+            }
+            function getBrowserExpression(path) {
+                let current = path;
+                while (current.parentPath) {
+                    const parent = current.parentPath;
+                    /*
+                     * window.foo
+                     * window.foo.bar
+                     * window["foo"]
+                     */
+                    if (parent.isMemberExpression() ||
+                        parent.isOptionalMemberExpression()) {
+                        current = parent;
+                        continue;
+                    }
+                    /*
+                     * window.foo()
+                     * window.foo.bar()
+                     */
+                    if (parent.isCallExpression() || parent.isOptionalCallExpression()) {
+                        const callee = parent.get("callee");
+                        if (!Array.isArray(callee) && callee.node === current.node) {
+                            current = parent;
+                            continue;
+                        }
+                        break;
+                    }
+                    /*
+                     * window.foo!
+                     */
+                    if (parent.isTSNonNullExpression()) {
+                        current = parent;
+                        continue;
+                    }
+                    /*
+                     * window.foo as Something
+                     */
+                    if (parent.isTSAsExpression()) {
+                        current = parent;
+                        continue;
+                    }
+                    break;
+                }
+                return current;
+            }
+            function findContainingStatement(path) {
+                let current = path;
+                while (current.parentPath) {
+                    const parent = current.parentPath;
+                    if (parent.isExpressionStatement()) {
+                        return parent;
+                    }
+                    if (parent.isFunctionDeclaration() ||
+                        parent.isFunctionExpression() ||
+                        parent.isArrowFunctionExpression()) {
+                        return null;
+                    }
+                    current = parent;
+                }
+                return null;
+            }
+            function markRemove(path) {
+                if (!path.removed) {
+                    removePaths.add(path);
+                }
+            }
+            function markReplace(path) {
+                if (!path.removed) {
+                    replacePaths.add(path);
+                }
+            }
+            traverse(ast, {
+                /*
+                 * ---------------------------------------------------------
+                 * JSX
+                 *
+                 * <div>{window.innerWidth}</div>
+                 *
+                 * ->
+                 *
+                 * <div>{undefined}</div>
+                 * ---------------------------------------------------------
+                 */
+                JSXExpressionContainer(path) {
+                    const expression = path.get("expression");
+                    if (!expression || Array.isArray(expression)) {
+                        return;
+                    }
+                    if (expression.isJSXEmptyExpression()) {
+                        return;
+                    }
+                    if (!expression.isExpression()) {
+                        return;
+                    }
+                    if (!containsBrowserGlobal(expression)) {
+                        return;
+                    }
+                    markReplace(expression);
+                },
+                /*
+                 * ---------------------------------------------------------
+                 * Standalone browser statements
+                 *
+                 * window.addEventListener(...)
+                 * document.title = "Xanix"
+                 * localStorage.setItem(...)
+                 *
+                 * ->
+                 *
+                 * removed
+                 * ---------------------------------------------------------
+                 */
+                ExpressionStatement(path) {
+                    if (!containsBrowserGlobal(path)) {
+                        return;
+                    }
+                    markRemove(path);
+                },
+                /*
+                 * ---------------------------------------------------------
+                 * Variable declarations
+                 *
+                 * const width = window.innerWidth;
+                 *
+                 * ->
+                 *
+                 * const width = undefined;
+                 * ---------------------------------------------------------
+                 */
+                VariableDeclarator(path) {
+                    const init = path.get("init");
+                    if (!init || Array.isArray(init)) {
+                        return;
+                    }
+                    if (!init.isExpression()) {
+                        return;
+                    }
+                    if (!containsBrowserGlobal(init)) {
+                        return;
+                    }
+                    markReplace(init);
+                },
+                /*
+                 * ---------------------------------------------------------
+                 * Return
+                 *
+                 * return window.innerWidth;
+                 *
+                 * ->
+                 *
+                 * return undefined;
+                 * ---------------------------------------------------------
+                 */
+                ReturnStatement(path) {
+                    const argument = path.get("argument");
+                    if (!argument || Array.isArray(argument)) {
+                        return;
+                    }
+                    if (!argument.isExpression()) {
+                        return;
+                    }
+                    if (!containsBrowserGlobal(argument)) {
+                        return;
+                    }
+                    markReplace(argument);
+                },
+                /*
+                 * ---------------------------------------------------------
+                 * Identifier
+                 * ---------------------------------------------------------
+                 */
+                Identifier(path) {
+                    if (!isBrowserGlobal(path)) {
+                        return;
+                    }
+                    const browserExpression = getBrowserExpression(path);
+                    /*
+                     * JSXExpressionContainer is handled above.
+                     */
+                    if (browserExpression.parentPath?.isJSXExpressionContainer()) {
+                        return;
+                    }
+                    /*
+                     * Example:
+                     *
+                     * window.addEventListener(...)
+                     *
+                     * Remove the complete statement.
+                     */
+                    const statement = findContainingStatement(browserExpression);
+                    if (statement) {
+                        markRemove(statement);
+                        return;
+                    }
+                    const parent = browserExpression.parentPath;
+                    /*
+                     * Variable initializer:
+                     *
+                     * const x = window.foo;
+                     */
+                    if (parent?.isVariableDeclarator()) {
+                        markReplace(browserExpression);
+                        return;
+                    }
+                    /*
+                     * Return:
+                     *
+                     * return window.foo;
+                     */
+                    if (parent?.isReturnStatement()) {
+                        markReplace(browserExpression);
+                        return;
+                    }
+                    /*
+                     * General expression:
+                     *
+                     * console.log(window.innerWidth)
+                     *
+                     * ->
+                     *
+                     * console.log(undefined)
+                     */
+                    markReplace(browserExpression);
+                },
+            });
+            /*
+             * Remove first.
+             */
+            for (const path of removePaths) {
+                if (!path.removed) {
+                    path.remove();
+                }
+            }
+            /*
+             * Replace second.
+             */
+            for (const path of replacePaths) {
+                if (!path.removed) {
+                    path.replaceWith(t.identifier("undefined"));
+                }
+            }
+            const output = generate(ast, {
+                sourceMaps: true,
+                sourceFileName: id,
+            }, code);
+            return {
+                code: output.code,
+                map: output.map,
+            };
+        },
+    };
+}

package/dist/bin/bundler/plugins/XanixEntryFinder/finder.d.ts

@@ -0,0 +1,11 @@
+import * as t from "@babel/types";
+import { XanixClientEntry } from "../../../types";
+export declare function resolveFile(file: string): string;
+export declare function resolveComponentFile(importer: string, importPath: string): string;
+export declare function createClientId(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;
+} | null;
+export declare function entryFinder(code: string, id: string): XanixClientEntry[];

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

@@ -0,0 +1,156 @@
+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 * as t from "@babel/types";
+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 createClientId(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",
+                };
+            }
+            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,
+                };
+            }
+        }
+    }
+    return null;
+}
+export function entryFinder(code, id) {
+    const ast = parse(code, {
+        sourceType: "module",
+        plugins: ["typescript", "jsx"],
+    });
+    const entries = new Map();
+    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 clientId = createClientId(normalizedFile);
+            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 entry = {
+                id: clientId,
+                name: componentName,
+                file: normalizedFile,
+                path: componentImportPath,
+                build: buildPath,
+                export: componentImport.export,
+            };
+            entries.set(clientId, entry);
+        },
+    });
+    return Array.from(entries.values());
+}

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

@@ -0,0 +1,6 @@
+import type { Plugin } from "rollup";
+import { XanixClientEntry } from "../../../types.js";
+export type XanixPluginOptions = {
+    entries: Map<string, XanixClientEntry>;
+};
+export declare function XanixEntryFinder({ entries }: XanixPluginOptions): Plugin;

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

@@ -0,0 +1,36 @@
+import { entryFinder } from "./finder.js";
+export function XanixEntryFinder({ entries }) {
+    return {
+        name: "xanix-entry-finder",
+        async transform(code, id) {
+            if (id.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(id)) {
+                return null;
+            }
+            const clientEntries = entryFinder(code, id);
+            if (!clientEntries) {
+                return null;
+            }
+            for (const entry of clientEntries) {
+                const resolved = await this.resolve(entry.file, id, {
+                    skipSelf: true,
+                });
+                if (!resolved) {
+                    this.error(`Could not resolve client component "${entry.file}" imported by "${id}"`);
+                }
+                entries.set(entry.id, entry);
+            }
+            return null;
+        },
+        generateBundle() {
+            const manifest = {
+                version: 1,
+                entries: [...entries.values()],
+            };
+            this.emitFile({
+                type: "asset",
+                fileName: "client-manifest.json",
+                source: JSON.stringify(manifest, null, 2),
+            });
+        },
+    };
+}

package/dist/bin/bundler/plugins/XanixEnv.d.ts

@@ -0,0 +1,15 @@
+import type { Plugin } from "rollup";
+export interface XanixEnvPluginOptions {
+    /**
+     * Build environment.
+     *
+     * development → .env + .env.dev
+     * production  → .env + .env.prod
+     */
+    mode?: "development" | "production";
+    /**
+     * Whether this is a client build.
+     */
+    isClient?: boolean;
+}
+export default function XanixEnvPlugin(options?: XanixEnvPluginOptions): Plugin;

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

@@ -0,0 +1,46 @@
+import fs from "node:fs";
+import path from "node:path";
+import dotenv from "dotenv";
+import replace from "@rollup/plugin-replace";
+export default function XanixEnvPlugin(options = {}) {
+    const root = process.cwd();
+    const mode = options.mode ?? "development";
+    const isClient = options.isClient ?? false;
+    const publicPrefix = "PUBLIC_";
+    const envFiles = [
+        path.resolve(root, ".env"),
+        path.resolve(root, mode === "development" ? ".env.dev" : ".env.prod"),
+    ];
+    const env = {};
+    for (const file of envFiles) {
+        if (!fs.existsSync(file)) {
+            continue;
+        }
+        const result = dotenv.parse(fs.readFileSync(file));
+        Object.assign(env, result);
+    }
+    const clientEnv = {};
+    const serverEnv = {};
+    for (const [key, value] of Object.entries(env)) {
+        if (key.startsWith(publicPrefix)) {
+            clientEnv[`process.env.${key}`] = JSON.stringify(value);
+        }
+        else {
+            serverEnv[`process.env.${key}`] = JSON.stringify(value);
+        }
+    }
+    const envs = {
+        "process.env.NODE_ENV": JSON.stringify(mode),
+        // "typeof window": isClient ? '"object"' : '"undefined"',
+        // "typeof document": isClient ? '"object"' : '"undefined"',
+        __XANIX_CLIENT__: JSON.stringify(isClient),
+        __XANIX_SERVER__: JSON.stringify(!isClient),
+        __XANIX_DEV__: JSON.stringify(mode === "development"),
+        __XANIX_PROD__: JSON.stringify(mode === "production"),
+        ...(isClient ? clientEnv : serverEnv),
+    };
+    return replace({
+        preventAssignment: true,
+        values: envs,
+    });
+}

package/dist/bin/bundler/plugins/XanixHydrate.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from "rollup";
+import { XanixClientEntry } from "../../types.js";
+export default function xanixHydrate(entries: XanixClientEntry[]): Plugin;

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

@@ -0,0 +1,34 @@
+export default function xanixHydrate(entries) {
+    const entryNames = new Set(entries.map((entry) => entry.name));
+    return {
+        name: "xanix-hydrate",
+        renderChunk(code, chunk) {
+            // Only process the entries we explicitly provided.
+            if (!chunk.isEntry || !entryNames.has(chunk.name)) {
+                return null;
+            }
+            // Must have a default export.
+            if (!chunk.exports.includes("default")) {
+                return null;
+            }
+            // Find Rollup's generated default export variable.
+            const match = code.match(/export\s*\{\s*([^,\s]+)\s+as\s+default\s*\}/);
+            if (!match) {
+                return null;
+            }
+            const component = match[1];
+            const hydration = `\nwindow.xanix.hydrate(` +
+                `${component}, ` +
+                `window.PAGE_PROPS` +
+                `);\n`;
+            const exportIndex = code.lastIndexOf("export {");
+            if (exportIndex === -1) {
+                return null;
+            }
+            return {
+                code: code.slice(0, exportIndex) + hydration + code.slice(exportIndex),
+                map: null,
+            };
+        },
+    };
+}

package/dist/bin/bundler/plugins/XanixReactRefresh.d.ts

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