xanix 1.0.14 → 1.0.16

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

@@ -60,7 +60,7 @@ export function getJSXComponentName(node) {
     }
     return null;
 }
-export function findComponentImport(ast, componentName) {
+function findComponentImport(ast, componentName) {
     for (const node of ast.program.body) {
         if (!t.isImportDeclaration(node)) {
             continue;
@@ -89,69 +89,19 @@ export function findComponentImport(ast, componentName) {
     }
     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) {
+function removeComponentImport(ast, 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;
+    if (declaration.specifiers.length === 0) {
+        const bodyIndex = ast.program.body.indexOf(declaration);
+        if (bodyIndex !== -1) {
+            ast.program.body.splice(bodyIndex, 1);
         }
-        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);
@@ -180,46 +130,13 @@ function jsxNameToExpressionFromJSXName(name) {
     }
     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;
         }
@@ -230,39 +147,14 @@ function jsxAttributesToProps(jsx) {
             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)) {
@@ -271,33 +163,12 @@ function jsxAttributesToProps(jsx) {
             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) {
@@ -309,6 +180,15 @@ function jsxToComponentAndProps(jsx) {
         props,
     };
 }
+function createDynamicComponentProperty(importPath) {
+    const importCall = t.callExpression(t.import(), [
+        t.stringLiteral(importPath),
+    ]);
+    const awaitedImport = t.awaitExpression(importCall);
+    const arrowFunction = t.arrowFunctionExpression([], awaitedImport);
+    arrowFunction.async = true;
+    return t.objectProperty(t.identifier("component"), arrowFunction);
+}
 function hasRuntimeImport(ast, name) {
     for (const statement of ast.program.body) {
         if (!t.isImportDeclaration(statement)) {
@@ -331,8 +211,6 @@ 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;
@@ -343,7 +221,6 @@ function injectRuntimeImport(ast, name) {
         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) {
@@ -352,13 +229,14 @@ export function transformer(code, id) {
         plugins: ["typescript", "jsx"],
     });
     let changed = false;
+    const entries = [];
     traverse(ast, {
         CallExpression(callPath) {
             const call = callPath.node;
-            /**
+            /*
              * Find:
              *
-             * res.send(<Home />);
+             * res.send(...)
              */
             if (!t.isMemberExpression(call.callee)) {
                 return;
@@ -369,9 +247,19 @@ export function transformer(code, id) {
                 return;
             }
             const argument = call.arguments[0];
+            /*
+             * Only transform:
+             *
+             * res.send(<HomePage />)
+             */
             if (!argument || !t.isJSXElement(argument)) {
                 return;
             }
+            /*
+             * Find:
+             *
+             * (req, res) => {}
+             */
             const functionPath = callPath.getFunctionParent();
             if (!functionPath) {
                 return;
@@ -385,97 +273,119 @@ export function transformer(code, id) {
             if (!t.isIdentifier(requestParam) || !t.isIdentifier(responseParam)) {
                 return;
             }
+            /*
+             * Find component name:
+             *
+             * <HomePage />
+             */
             const componentName = getJSXComponentName(argument);
             if (!componentName) {
                 return;
             }
+            /*
+             * Find:
+             *
+             * import HomePage from "../pages/Home";
+             */
             const componentImport = findComponentImport(ast, componentName);
             if (!componentImport) {
                 return;
             }
             const componentImportPath = componentImport.file;
+            /*
+             * Resolve:
+             *
+             * ../pages/Home
+             *
+             * ->
+             *
+             * C:/xampp/htdocs/xanix/app/pages/Home/index.tsx
+             */
             const componentFile = resolveComponentFile(id, componentImportPath);
             if (!path.isAbsolute(componentFile)) {
                 return;
             }
+            /*
+             * Normalize absolute file path.
+             */
             const normalizedFile = normalizeFilePath(componentFile);
+            /*
+             * Stable page ID.
+             */
             const pageId = createPageId(normalizedFile);
-            /**
-             * Convert:
-             *
-             * <Home name="Naxrul" age={30} />
+            /*
+             * JSX:
              *
-             * into:
+             * <HomePage title="Hello" />
              *
-             * component: Home
+             * ->
              *
-             * props: {
-             *   name: "Naxrul",
-             *   age: 30
+             * {
+             *   title: "Hello"
              * }
              */
             const componentAndProps = jsxToComponentAndProps(argument);
             if (!componentAndProps) {
                 return;
             }
-            /**
-             * Remove:
-             *
-             * import Home from "./Home";
+            /*
+             * Create manifest entry.
              */
-            removeComponentImport(componentImport);
-            /**
-             * Add:
-             *
-             * const Home =
-             *   (await import("./Home")).default;
+            entries.push({
+                id: pageId,
+                name: componentName,
+                file: normalizedFile,
+                path: componentImportPath,
+                export: componentImport.export,
+            });
+            /*
+             * Remove static component import.
              */
-            const dynamicImport = createDynamicComponentImport(componentName, componentImportPath, componentImport.export);
-            /**
-             * Insert immediately before:
+            removeComponentImport(ast, componentImport);
+            /*
+             * Create:
              *
-             * res.send(<Home />);
+             * component: async () =>
+             *   await import("../pages/Home")
              */
-            const statementPath = callPath.getStatementParent();
-            if (statementPath) {
-                statementPath.insertBefore(dynamicImport);
-            }
-            /**
-             * Route becomes:
-             *
-             * async (req, res) => {}
+            const componentProperty = createDynamicComponentProperty(componentImportPath);
+            /*
+             * Make route handler async.
              */
             if (t.isFunction(functionPath.node)) {
                 functionPath.node.async = true;
             }
-            /**
+            /*
+             * Create:
+             *
+             * await xanixPage({
+             *   component: async () =>
+             *     await import("../pages/Home"),
+             *   pageId: "...",
+             *   req,
+             *   res,
+             *   props: {}
+             * })
+             */
+            const pageOptions = t.objectExpression([
+                componentProperty,
+                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("props"), componentAndProps.props),
+            ]);
+            const pageCall = t.awaitExpression(t.callExpression(t.identifier("xanixPage"), [pageOptions]));
+            /*
              * Replace:
              *
-             * res.send(<Home />);
+             * res.send(<HomePage />);
              *
              * with:
              *
              * res.send(
-             *   await xanixPage({
-             *     clientId,
-             *     req,
-             *     res,
-             *     component: Home,
-             *     props: {
-             *       ...
-             *     }
-             *   })
+             *   await xanixPage({...})
              * );
              */
-            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;
         },
@@ -483,19 +393,22 @@ export function transformer(code, id) {
     if (!changed) {
         return null;
     }
-    /**
+    /*
      * Add:
      *
-     * import xanixPage from "xanix/page";
+     * import { xanixPage } from "xanix/runtime";
      */
     injectRuntimeImport(ast, "xanixPage");
-    /**
-     * Remove empty imports.
+    /*
+     * Generate final code + source map.
      */
-    removeEmptyImportDeclarations(ast);
-    const output = generate(ast, {}, code);
+    const output = generate(ast, {
+        sourceMaps: true,
+        sourceFileName: id,
+    }, code);
     return {
         code: output.code,
         map: output.map,
+        entries,
     };
 }

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

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

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

@@ -6,7 +6,7 @@ import generate from "@babel/generator";
 import * as t from "@babel/types";
 import { getClientRuntimeFile } from "../../include/utils.js";
 const root = process.cwd();
-export default function xanixReactRefresh() {
+export default function xanixReactRefresh(WebSocketPort) {
     return {
         name: "xanix-react-refresh",
         load(id) {
@@ -14,36 +14,36 @@ export default function xanixReactRefresh() {
                 return null;
             }
             const code = fs.readFileSync(id, "utf8");
-            const refreshCode = `
-import * as RefreshRuntime from "react-refresh/runtime";
-
-${code}
-
-  RefreshRuntime.injectIntoGlobalHook(window);
-  window.$RefreshReg$ = RefreshRuntime.register;
-  window.$RefreshSig$ = () => (type) => type;
-  const ws = new WebSocket("ws://localhost:8080");
-
-  
-  ws.onmessage = async (event) => {
-    const files = JSON.parse(event.data);
-
-    for (const file of files) {
-      if (!file.endsWith(".js")) {
-        continue;
-      }
-
-      const url =
-        getImportUrl(file.replace(/\\.js$/, "")) +
-        "?t=" +
-        Date.now();
-
-      await import(url);
-    }
-
-    RefreshRuntime.performReactRefresh();
-    ws.send("reload")
-  };
+            const refreshCode = `
+import * as RefreshRuntime from "react-refresh/runtime";
+
+${code}
+
+  RefreshRuntime.injectIntoGlobalHook(window);
+  window.$RefreshReg$ = RefreshRuntime.register;
+  window.$RefreshSig$ = () => (type) => type;
+  const ws = new WebSocket("ws://localhost:" + ${WebSocketPort});
+
+  
+  ws.onmessage = async (event) => {
+    const files = JSON.parse(event.data);
+
+    for (const file of files) {
+      if (!file.endsWith(".js")) {
+        continue;
+      }
+
+      const url =
+        getImportUrl(file.replace(/\\.js$/, "")) +
+        "?t=" +
+        Date.now();
+
+      await import(url);
+    }
+
+    RefreshRuntime.performReactRefresh();
+    ws.send("reload")
+  };
 `;
             return {
                 code: refreshCode,

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

@@ -1,2 +1,19 @@
 import type { Plugin } from "rollup";
+/**
+ * Check whether an import matches a tsconfig path alias.
+ *
+ * Examples:
+ *
+ * @db
+ * @db/index
+ * @db/user
+ *
+ * with:
+ *
+ * "@db/*": ["./src/db/*"]
+ */
+export declare function tsconfigPathsMatcher(id: string): boolean;
+/**
+ * Rollup plugin.
+ */
 export default function xanixTsconfigAlias(): Plugin;