aaex-cli 1.0.0

package/create-aaex-app.js

@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+
+import fs from "fs-extra";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+// -------------------------
+// Helpers for ESM __dirname
+// -------------------------
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// -------------------------
+// Parse CLI arguments
+// -------------------------
+const args = process.argv.slice(2);
+if (!args[0]) {
+  console.error("Usage: create-aaex-app <project-name>");
+  process.exit(1);
+}
+const appName = args[0];
+const targetDir = path.resolve(process.cwd(), appName);
+
+// -------------------------
+// Paths inside the package
+// -------------------------
+const templateDir = path.resolve(__dirname, "template");
+
+// -------------------------
+// Copy template files
+// -------------------------
+async function copyTemplate() {
+  try {
+    console.log(`Creating new AAEx app in ${targetDir}...`);
+
+    await fs.copy(templateDir, targetDir, {
+      overwrite: true,
+      errorOnExist: false,
+    });
+
+    console.log("Template copied successfully.");
+  } catch (err) {
+    console.error("Error copying template:", err);
+    process.exit(1);
+  }
+}
+
+// -------------------------
+// Create package.json
+// -------------------------
+async function createPackageJson() {
+  const pkg = {
+    name: appName,
+    version: "0.0.0",
+    private: true,
+    type: "module",
+    scripts: {
+      dev: "node .aaex/server/server.js",
+      build:
+        "npm run build:client && npm run build:server && npm run build:api",
+      "build:client": "vite build --outDir dist/client",
+      "build:server":
+        "vite build --ssr .aaex/framework/server-entry.tsx --outDir dist/server",
+      "build:api": "tsc --project tsconfig.api.json",
+      preview: "cross-env NODE_ENV=production node .aaex/server/server.js",
+    },
+    dependencies: {
+      react: "^19.1.1",
+      "react-dom": "^19.1.1",
+      "react-router": "^7.10.0",
+      "react-router-dom": "^7.10.0",
+      express: "^5.1.0",
+      compression: "^1.8.1",
+      sirv: "^3.0.2",
+      "aaex-file-router": "^1.4.4",
+    },
+    devDependencies: {
+      typescript: "~5.9.2",
+      "@types/react": "^19.1.13",
+      "@types/react-dom": "^19.1.9",
+      "@types/express": "^5.0.3",
+      "@vitejs/plugin-react": "^5.0.2",
+      vite: "^7.1.5",
+      "cross-env": "^10.0.0",
+    },
+  };
+
+  try {
+    await fs.writeJson(path.join(targetDir, "package.json"), pkg, {
+      spaces: 2,
+    });
+    console.log("package.json created.");
+  } catch (err) {
+    console.error("Error creating package.json:", err);
+    process.exit(1);
+  }
+}
+
+// -------------------------
+// Run
+// -------------------------
+async function main() {
+  if (fs.existsSync(targetDir)) {
+    console.error(`Folder ${appName} already exists. Aborting.`);
+    process.exit(1);
+  }
+
+  await copyTemplate();
+  await createPackageJson();
+
+  console.log("\n AAEx app created successfully!");
+  console.log(`\nNext steps:\n  cd ${appName}\n  npm install\n  npm run dev`);
+}
+
+main();

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "aaex-cli",
+  "version": "1.0.0",
+  "description": "Command line interface for creating aaexjs app",
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "bin": {
+    "create-aaex-app": "./create-aaex-app.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^5.1.1",
+    "aaex-file-router": "^1.4.5",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-router": "^7.10.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6"
+  },
+  "dependencies": {
+    "fs-extra": "^11.3.2"
+  }
+}

package/template/.aaex/BuildApiRoutes.js

@@ -0,0 +1,53 @@
+import { FileScanner } from "aaex-file-router/core";
+import { match } from "path-to-regexp";
+
+// --- Scan API folder ---
+const apiScanner = new FileScanner("./src/api");
+
+const files = await apiScanner.get_file_data();
+
+const routes = BuildApiRoutes(files);
+
+export default routes;
+
+// --- Build routes from file tree ---
+function BuildApiRoutes(files) {
+  const routes = [];
+
+  function walk(node, currentPath) {
+    if (node.isDirectory) {
+      node.children?.forEach((child) => {
+        walk(child, currentPath + "/" + node.name);
+      });
+      return;
+    }
+
+    const filePath = currentPath + "/" + node.name;
+
+    let route = filePath
+      .replace(/^.*src\/api/, "/api") // replace root
+      .replace(/\.ts$/, "")           // remove extension
+      .replace(/\[(.+?)\]/g, ":$1")   // dynamic params
+      .replace("/index", "");         // remove index from end
+
+    routes.push({
+      route,
+      filePath: node.relative_path,
+    });
+  }
+
+  files.forEach((f) => walk(f, ""));
+  return routes;
+}
+
+// --- Match path to route ---
+export function PathToRoute(path, routes) {
+  for (const r of routes) {
+    const matcher = match(r.route, { decode: decodeURIComponent });
+    const matched = matcher(path); // pass full path including /api
+    if (matched) {
+      return { route: r, params: matched.params }; // return params for dynamic segments
+    }
+  }
+  return null;
+}

package/template/.aaex/framework/entry-client.tsx

@@ -0,0 +1,16 @@
+import "../../src/index.css"
+import { StrictMode, Suspense } from "react";
+import { hydrateRoot } from "react-dom/client";
+import App from "../../src/App"
+import { BrowserRouter } from "react-router";
+
+hydrateRoot(
+  document.getElementById("root") as HTMLElement,
+  <StrictMode>
+    <BrowserRouter>
+      <Suspense>
+        <App />
+      </Suspense>
+    </BrowserRouter>
+  </StrictMode>
+);

package/template/.aaex/framework/entry-server.tsx

@@ -0,0 +1,21 @@
+import { StrictMode, Suspense } from "react";
+import { renderToString } from "react-dom/server";
+import { StaticRouter } from "react-router";
+import App from "../../src/App";
+
+export function render(_url: string) {
+  const url = `/${_url}`;
+
+  // call your SSR function or API here and pass the result as props
+
+  const html = renderToString(
+    <StrictMode>
+      <StaticRouter location={url}>
+        <Suspense>
+          <App />
+        </Suspense>
+      </StaticRouter>
+    </StrictMode>
+  );
+  return { html };
+}

package/template/.aaex/server/server.js

@@ -0,0 +1,134 @@
+import fs from "node:fs/promises";
+import express from "express";
+import { pathToFileURL } from "node:url";
+import path from "node:path";
+
+// server.js is now in .aaex/server/
+const frameworkRoot = path.resolve(".aaex"); // absolute path to .aaex
+const projectRoot = path.resolve("."); // root of the project
+
+// Import BuildApiRoutes
+const { default: apiRoutes, PathToRoute } = await import(
+  pathToFileURL(`${frameworkRoot}/BuildApiRoutes.js`).href
+);
+
+// Constants
+const isProduction = process.env.NODE_ENV === "production";
+const port = process.env.PORT || 5173;
+const base = process.env.BASE || "/";
+
+// Cached production HTML
+const templateHtml = isProduction
+  ? await fs.readFile(path.join(projectRoot, "dist/client/index.html"), "utf-8")
+  : "";
+
+// Create HTTP server
+const app = express();
+
+/** @type {import('vite').ViteDevServer | undefined} */
+let vite;
+if (!isProduction) {
+  const { createServer } = await import("vite");
+  vite = await createServer({
+    server: { middlewareMode: true },
+    appType: "custom",
+    root: projectRoot,
+    base,
+  });
+  app.use(vite.middlewares);
+} else {
+  const compression = (await import("compression")).default;
+  const sirv = (await import("sirv")).default;
+  app.use(compression());
+  app.use(
+    base,
+    sirv(path.join(projectRoot, "dist/client"), { extensions: [] })
+  );
+}
+
+// API routing
+app.use("/api", async (req, res) => {
+  console.log(req.path);
+
+  const routeMatch = PathToRoute(req.path, apiRoutes);
+
+  console.log(routeMatch);
+
+  if (!routeMatch)
+    return res.status(404).json({ error: "API route not found" });
+
+  const { route, params } = routeMatch;
+  let modulePath;
+
+  if (!isProduction) {
+    // DEV: Vite handles TS/JS loading
+    modulePath = `/src/api${route.filePath.replace(/^src\/api/, "")}`;
+  } else {
+    // PROD: bundled JS
+    modulePath = pathToFileURL(
+      `./dist/server/api${route.filePath
+        .replace(/^src\/api/, "")
+        .replace(/\.ts$/, ".js")}`
+    ).href;
+  }
+
+  try {
+    const mod = !isProduction
+      ? await vite.ssrLoadModule(modulePath)
+      : await import(modulePath);
+
+    const handler = mod[req.method]; // GET, POST, etc.
+
+    if (typeof handler !== "function") {
+      return res.status(405).json({ error: "Method not allowed" });
+    }
+
+    const result = await handler(req, res, params);
+
+    if (!res.headersSent) res.json(result);
+  } catch (err) {
+    console.error("API load error:", err);
+    res.status(500).json({ error: "Internal Server Error" });
+  }
+});
+
+// SSR HTML
+app.use("*all", async (req, res) => {
+  try {
+    const url = req.originalUrl.replace(base, "");
+
+    let template;
+    let render;
+    if (!isProduction) {
+      template = await fs.readFile(
+        path.join(projectRoot, "index.html"),
+        "utf-8"
+      );
+      template = await vite.transformIndexHtml(url, template);
+      render = (await vite.ssrLoadModule("/.aaex/framework/entry-server.tsx"))
+        .render;
+    } else {
+      template = templateHtml;
+      render = (
+        await import(path.join(projectRoot, "dist/server/entry-server.js"))
+      ).render;
+    }
+
+    const rendered = await render(url);
+
+    const html = template
+      .replace("<!--app-head-->", rendered.head ?? "")
+      .replace("<!--app-html-->", rendered.html ?? "");
+
+    res.status(200).set({ "Content-Type": "text/html" }).send(html);
+  } catch (e) {
+    vite?.ssrFixStacktrace?.(e);
+    console.error(e);
+    res.status(500).send(e.stack);
+  }
+});
+
+// Start server
+app.listen(port, () => {
+  console.log(`Server started at http://localhost:${port}`);
+});

package/template/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AaExJS</title>
+    <!--app-head-->
+  </head>
+  <body>
+    <div id="root"><!--app-html--></div>
+    <script type="module" src="/.aaex/framework/entry-client.tsx"></script>
+  </body>
+</html>

package/template/src/App.css

@@ -0,0 +1,41 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/template/src/App.tsx

@@ -0,0 +1,23 @@
+import "./App.css";
+import { Route, RouteObject, Routes } from "react-router";
+import routes from "./routes";
+
+function renderRoutes(routesArray: RouteObject[]) {
+  return routesArray.map((route) => {
+    if (route.children && route.children.length > 0) {
+      return (
+        <Route  path={route.path} element={route.element}>
+          {renderRoutes(route.children)}
+        </Route>
+      );
+    } else {
+      return <Route  path={route.path} element={route.element} />;
+    }
+  });
+}
+
+function App() {
+  return <Routes>{renderRoutes(routes)}</Routes>;
+}
+
+export default App;

package/template/src/api/helloworld.ts

@@ -0,0 +1,3 @@
+export const GET = async () => {
+  return { hello: "world" };
+};

package/template/src/index.css

@@ -0,0 +1,69 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/template/src/pages/index.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <>Hello AaEx</>;
+}

package/template/src/routes.ts

@@ -0,0 +1,13 @@
+//* AUTO GENERATED: DO NOT EDIT
+import React from 'react';
+import Index from './pages/index.tsx';
+import type { RouteObject } from 'react-router-dom';
+
+const routes: RouteObject[] = [
+  {
+    "path": "",
+    "element": React.createElement(Index)
+  }
+];
+
+export default routes;

package/template/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { aaexFileRouter } from 'aaex-file-router/plugin'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(),aaexFileRouter()],
+})