aaex-cli 1.2.0 → 1.4.0

package/.TODO

@@ -0,0 +1,4 @@
+1. Fix server not being able to use Suspense
+    - Option 1. Remake the router to always import pages directly
+    - Option 2. Make the server able to stream content  
+2. 

package/README.md

@@ -7,13 +7,14 @@ Light weight SSR framework for react with filebased page and api routing. Builds
 - File routing using aaex-file-router (can be used seperatly)
 - API routing using hybrid solution only available in the full framework
 - SSR rendering using vites native functions + additional functionality
--full typescript support (currently only typescript)
+- full typescript support (currently only typescript)
 - all vite plugins that work with ssr should work
 
+
 ## Usage
 ```sh
 npx create-aaex-app <project-name>
 ```  
 
-## V1.1
-Added user system
+## V1.4
+Added server side data loading

package/create-aaex-app.js

@@ -73,7 +73,7 @@ async function createPackageJson() {
       express: "^5.1.0",
       compression: "^1.8.1",
       sirv: "^3.0.2",
-      "aaex-file-router": "^1.4.4",
+      "aaex-file-router": "^1.5.0",
       jsonwebtoken: "^9.0.3",
       mongodb: "^7.0.0",
       bcrypt: "^6.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aaex-cli",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Command line interface for creating aaexjs app",
   "license": "ISC",
   "author": "",
@@ -16,6 +16,8 @@
     "@types/express": "^5.0.6",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "aaex-file-router": "^1.4.5",
     "bcrypt": "^6.0.0",

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

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

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

@@ -3,17 +3,14 @@ import { renderToString } from "react-dom/server";
 import { StaticRouter } from "react-router";
 import App from "../../src/App";
 
-export function render(_url: string) {
+export function render(_url: string, initialData= {}) {
   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>
+          <App initialData={initialData} />
       </StaticRouter>
     </StrictMode>
   );

package/template/.aaex/matchServerRoutes.js

@@ -0,0 +1,60 @@
+export default function routeMatcher(routes, url) {
+  const segments = url.split("/").filter(Boolean); // "test/hej" → ["test", "hej"]
+
+  return matchLevel(routes, segments);
+}
+
+function matchLevel(routes, segments) {
+  for (const route of routes) {
+    const result = matchRoute(route, segments);
+
+    if (result) return result;
+  }
+
+  return null;
+}
+
+function matchRoute(route, segments) {
+  const isParam = /^:[a-zA-Z0-9_]+$/;
+
+  const [current, ...rest] = segments;
+
+  // Root index route
+  if (route.path === "" && segments.length === 0) {
+    return { route, params: {} };
+  }
+
+  // Static match
+  if (route.path === current) {
+    if (rest.length === 0) {
+      return { route, params: {} };
+    }
+
+    // Has children → go deeper
+    if (route.children) {
+      return matchLevel(route.children, rest);
+    }
+  }
+
+  // Dynamic match → :slug , :id osv
+  if (isParam.test(route.path)) {
+    const paramName = route.path.slice(1);
+
+    if (rest.length === 0) {
+      return { route, params: { [paramName]: current } };
+    }
+
+    // Has children → go deeper
+    if (route.children) {
+      const matchedChild = matchLevel(route.children, rest);
+      if (matchedChild) {
+        return {
+          route: matchedChild.route,
+          params: { [paramName]: current, ...matchedChild.params },
+        };
+      }
+    }
+  }
+
+  return null;
+}

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

@@ -7,9 +7,10 @@ dotenv.config();
 
 // server.js is now in .aaex/server/
 const projectRoot = path.resolve("."); // root of the project
-
+let serverRoutes;
 // Import BuildApiRoutes
 import * as BuildApiRoutes from "../BuildApiRoutes.js";
+import routeMatcher from "../matchServerRoutes.js";
 
 const apiRoutes = BuildApiRoutes.default; // default export
 const PathToRoute = BuildApiRoutes.pathToRoute; // named export
@@ -37,6 +38,7 @@ if (!isProduction) {
     root: projectRoot,
     base,
   });
+  serverRoutes = (await vite.ssrLoadModule("/src/server-routes.ts")).default;
   app.use(vite.middlewares);
 } else {
   const compression = (await import("compression")).default;
@@ -46,6 +48,12 @@ if (!isProduction) {
     base,
     sirv(path.join(projectRoot, "dist/client"), { extensions: [] })
   );
+
+  const serverRoutesModule = await import(
+    pathToFileURL(path.join(projectRoot, "dist/src/server-routes.js")).href
+  );
+
+  serverRoutes = serverRoutesModule.default;
 }
 
 // parse JSON bodies
@@ -105,7 +113,20 @@ app.use(/.*/, async (req, res) => {
   try {
     let url = req.originalUrl;
 
-    console.log("url", url);
+    const routeMatch = routeMatcher(serverRoutes, url);
+
+    if (!routeMatch) {
+      return res.status(404).send("Not found");
+    }
+
+    // Dynamicly import the file
+    const mod = await vite.ssrLoadModule(routeMatch.route.modulePath);
+
+    // Call load if it exist
+    let initialData = {};
+    if (mod.load) {
+      initialData = await mod.load(routeMatch.params);
+    }
 
     let template;
     let render;
@@ -124,11 +145,25 @@ app.use(/.*/, async (req, res) => {
       ).render;
     }
 
-    const rendered = await render(url);
+    const rendered = await render(url, initialData);
+
+    function XSSPrevention(unsafeString) {
+      return unsafeString.replace(/</g, "//u003c");
+      // .replace(/>/g, "&gt")
+      // .replace(/'/g, "&#39")
+      // .replace(/"/g, "&#34");
+    }
+
+    const serializedData = JSON.stringify(initialData);
+    const safeData = XSSPrevention(serializedData);
 
     const html = template
       .replace("<!--app-head-->", rendered.head ?? "")
-      .replace("<!--app-html-->", rendered.html ?? "");
+      .replace("<!--app-html-->", rendered.html ?? "")
+      .replace(
+        "<!--initial-data-->",
+        `<script>window.__INITIAL_DATA__ = ${safeData}</script>`
+      );
 
     res.status(200).set({ "Content-Type": "text/html" }).send(html);
   } catch (e) {

package/template/.env

@@ -1,4 +1,5 @@
 # edit to fit your needs
 MONGO_URI="mongodb://localhost:27018/"
 DB_NAME="mydatabase"
-JWT_SECRET="your-jwt-secret"
+JWT_SECRET="your-jwt-secret"
+JWT_EXP="24h"

package/template/src/App.tsx

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

package/template/src/{routes.ts → client-routes.ts}

@@ -1,23 +1,33 @@
-//* AUTO GENERATED: DO NOT EDIT
-import React from 'react';
-import Index from './pages/index.tsx';
-import Login from './pages/login.tsx';
-import Register from './pages/register.tsx';
-import type { RouteObject } from 'react-router-dom';
-
-const routes: RouteObject[] = [
-  {
-    "path": "",
-    "element": React.createElement(Index)
-  },
-  {
-    "path": "login",
-    "element": React.createElement(Login)
-  },
-  {
-    "path": "register",
-    "element": React.createElement(Register)
-  }
-];
-
-export default routes;
+//* AUTO GENERATED: DO NOT EDIT
+import React from 'react';
+import Index from './pages/index.tsx';
+import Login from './pages/login.tsx';
+import Register from './pages/register.tsx';
+import Slug from './pages/test/[slug].tsx';
+import type { RouteObject } from 'react-router-dom';
+
+const routes: RouteObject[] = [
+  {
+    "path": "",
+    "element": React.createElement(Index)
+  },
+  {
+    "path": "login",
+    "element": React.createElement(Login)
+  },
+  {
+    "path": "register",
+    "element": React.createElement(Register)
+  },
+  {
+    "path": "test",
+    "children": [
+      {
+        "path": ":slug",
+        "element": React.createElement(Slug)
+      }
+    ]
+  }
+];
+
+export default routes;

package/template/src/pages/index.tsx

@@ -1,19 +1,50 @@
-import { useAuth } from "../hooks/useAuth";
+import { useAuth } from "../hooks/useAuth.js";
 import { FileLink } from "aaex-file-router";
-import { FileRoutes } from "../routeTypes";
+import { FileRoutes } from "../routeTypes.js";
 
-export default function Home() {
-  const { user, valid, loading } = useAuth();
+/** ------- Ideally same type as the API imported from /types or /interfaces ------- */
+type PageData = {
+  hello: string;
+};
+
+type PageError = {
+  error: string;
+};
+
+/** -------- */
+export async function load(): Promise<PageData | PageError> {
+  const res = await fetch("http://localhost:5173/api/helloworld");
+
+  if (!res.ok) {
+    return { error: "internal server error" };
+  }
+
+  const data = await res.json();
 
-  console.log(user, valid, loading);
+  if (data) {
+    return data;
+  }
+
+  return { error: "Unknown error" };
+}
+
+export default function Home({ hello }: PageData) {
+  const { user, valid, loading } = useAuth();
 
   if (loading) return <p>Checking authentication...</p>;
   if (!valid)
     return (
       <p>
-        You are not logged in! <br/> <FileLink<FileRoutes> to="/login">Login</FileLink>
+        You are not logged in! <br />
+        <FileLink<FileRoutes> to="/login">Login</FileLink>
       </p>
     );
 
-  return <p>Welcome, {user ? user.username : ""}</p>;
+  return (
+    <>
+      <p>Welcome, {user ? user.username : ""} </p>
+      <br />
+      <p>Server rendered content: {hello}</p>
+    </>
+  );
 }

package/template/src/pages/test/[slug].tsx

@@ -0,0 +1,7 @@
+import { useParams } from "react-router";
+
+export default function Test() {
+  const { slug } = useParams();
+
+  return <>{slug}</>;
+}

package/template/src/routeTypes.ts

@@ -1,5 +1,7 @@
-// AUTO-GENERATED: DO NOT EDIT
-export type FileRoutes =
-  | "/"
-  | "/login"
-  | "/register";
+// AUTO-GENERATED: DO NOT EDIT
+export type FileRoutes =
+  | "/"
+  | "/login"
+  | "/register"
+  | "/test"
+  | "/test/{string}";

package/template/src/server-routes.ts

@@ -0,0 +1,37 @@
+//* AUTO GENERATED: DO NOT EDIT
+import React from 'react';
+import Index from './pages/index.tsx';
+import Login from './pages/login.tsx';
+import Register from './pages/register.tsx';
+import Slug from './pages/test/[slug].tsx';
+
+
+const serverRoutes: any[] = [
+  {
+    "path": "",
+    "element": Index,
+    "modulePath": "C:/Users/tmraa/OneDrive/Dokument/AaExJS-documentation/test-app/src/pages/index.tsx"
+  },
+  {
+    "path": "login",
+    "element": Login,
+    "modulePath": "C:/Users/tmraa/OneDrive/Dokument/AaExJS-documentation/test-app/src/pages/login.tsx"
+  },
+  {
+    "path": "register",
+    "element": Register,
+    "modulePath": "C:/Users/tmraa/OneDrive/Dokument/AaExJS-documentation/test-app/src/pages/register.tsx"
+  },
+  {
+    "path": "test",
+    "children": [
+      {
+        "path": ":slug",
+        "element": Slug,
+        "modulePath": "C:/Users/tmraa/OneDrive/Dokument/AaExJS-documentation/test-app/src/pages/test/[slug].tsx"
+      }
+    ]
+  }
+];
+
+export default serverRoutes;

package/template/tsconfig.aaex.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es2024",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "outDir": "dist",
+    "strict": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true
+  },
+  "include": [
+    ".aaex/api",
+    "src/api",
+    ".aaex/utils",
+    "src/server-routes.ts",
+    "src/hooks"
+  ],
+  "exclude": ["node_modules", "dist"]
+}

package/template/vite.config.ts

@@ -1,9 +1,9 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import { aaexFileRouter } from "aaex-file-router/plugin";
+import { aaexServerRouter } from "aaex-file-router/plugin";
 import { pluginSsrDevFoucFix } from "./.aaex/utils/ServerLoadCssImports";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), aaexFileRouter(), pluginSsrDevFoucFix()],
+  plugins: [react(), aaexServerRouter(), pluginSsrDevFoucFix()],
 });

package/template/tsconfig.api.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2024",
-    "module": "esnext",
-    "declaration": true,
-    "outDir": "dist",
-    "strict": true,
-    "esModuleInterop": true
-  },
-  "include": [
-    ".aaex/api","src/api"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
-}