aplosjs 0.15.0

package/src/command/router.js

@@ -0,0 +1,137 @@
+import { buildRouter } from "../build/router.js";
+import get_config from "../build/config.js";
+import Table from "cli-table3";
+import fs from "fs";
+
+
+// Function to check if URL matches a route pattern with requirements
+const matchRoute = (url, routePath, requirements = {}) => {
+  // Convert React Router path to regex
+  let pattern = routePath.replace(/\//g, '\\/');  // Escape forward slashes
+  
+  // Get parameter names first
+  const paramNames = [...routePath.matchAll(/:([^/]+)/g)].map(m => m[1]);
+  
+  // Replace each parameter with its requirement pattern or default
+  paramNames.forEach(paramName => {
+    const requirement = requirements[paramName] || '[^/]+';
+    pattern = pattern.replace(`:${paramName}`, `(${requirement})`);
+  });
+    
+  const regex = new RegExp(`^${pattern}$`);
+  const match = url.match(regex);
+  
+  if (match) {
+    // Extract parameters
+    const params = {};
+    paramNames.forEach((name, index) => {
+      params[name] = match[index + 1];
+    });
+    return { match: true, params };
+  }
+  
+  return { match: false };
+};
+
+export default async (options) => {
+  let projectDirectory = process.cwd();
+
+  await buildRouter(await get_config(projectDirectory));
+
+  const data = fs
+    .readFileSync(projectDirectory + "/.aplos/cache/router.js")
+    .toString();
+  const routes = JSON.parse(data);
+
+  // Handle router:match command
+  if (options && options.url) {
+    const url = options.url;
+    let matchedRoute = null;
+    let matchParams = {};
+
+    // Test each route
+    for (const route of routes) {
+      // Skip config routes without path
+      if (!route.path) continue;
+      
+      const result = matchRoute(url, route.path, route.requirements || route.requirement || {});
+      if (result.match) {
+        matchedRoute = route;
+        matchParams = result.params;
+        break;
+      }
+    }
+
+    const table = new Table({
+      head: ["Property", "Value"],
+    });
+
+    if (matchedRoute) {
+      table.push(["Route Name", matchedRoute.component]);
+      table.push(["Path", matchedRoute.path]);
+      table.push(["File", matchedRoute.file ? `src/pages${matchedRoute.file}` : "-"]);
+      const regexPattern = matchedRoute.path.replace(/\//g, '\\/').replace(/:([^/]+)/g, '(?P<$1>[^/]++)');
+      table.push(["Path Regex", `{^${regexPattern}$}`]);
+      table.push(["Host", "ANY"]);
+      table.push(["Scheme", "ANY"]);
+      const reqs = matchedRoute.requirements || matchedRoute.requirement || {};
+      table.push(["Requirements", Object.keys(reqs).length > 0 ? JSON.stringify(reqs) : "NO CUSTOM"]);
+      
+      if (Object.keys(matchParams).length > 0) {
+        table.push(["Parameters", JSON.stringify(matchParams)]);
+      }
+      
+      console.log(`✅ URL "${url}" matches route:`);
+      console.log(table.toString());
+    } else {
+      console.log(`❌ URL "${url}" does not match any route.`);
+      console.log("\nAvailable routes:");
+      const availableTable = new Table({
+        head: ["Component", "Path"],
+      });
+      routes.forEach(route => {
+        if (route.path) {
+          availableTable.push([route.component, route.path]);
+        }
+      });
+      console.log(availableTable.toString());
+    }
+    return;
+  }
+
+  if (typeof options === "string") {
+    const table = new Table({
+      head: ["Property", "Value"],
+    });
+
+    const route = routes.find((route) => route.component === options);
+    if (route) {
+      table.push(["Route name", route.path]);
+
+      table.push(["Path", route.path]);
+
+      table.push(["File", route.file ? `src/pages${route.file}` : "-"]);
+
+      table.push(["Path Regex", ""]);
+
+      table.push(["Host", ""]);
+
+      table.push(["Scheme", ""]);
+
+      table.push(["Requirement", route.requirement]);
+
+      console.log(table.toString());
+    } else {
+      console.log("Component not found");
+    }
+  } else {
+    const table = new Table({
+      head: ["Component", "File", "Scheme", "Host", "Path"],
+    });
+
+    routes.map((route) => {
+      table.push([route.component, route.file ? `src/pages${route.file}` : "-", "Any", "Any", route.path]);
+    });
+    console.log(table.toString());
+  }
+};

package/src/components/head.jsx

@@ -0,0 +1,65 @@
+import { useEffect, Children } from "react";
+
+const MANAGED_ATTR = "data-head";
+
+export default function Head({ children }) {
+    useEffect(() => {
+        const managedElements = [];
+
+        Children.forEach(children, (child) => {
+            if (!child || !child.props) return;
+
+            const { type } = child;
+            const { children: textContent, ...props } = child.props;
+
+            if (type === "title") {
+                document.title = typeof textContent === "string" ? textContent : "";
+                return;
+            }
+
+            if (type === "html") {
+                Object.entries(props).forEach(([key, value]) => {
+                    document.documentElement.setAttribute(key, value);
+                });
+                return;
+            }
+
+            if (type === "body") {
+                Object.entries(props).forEach(([key, value]) => {
+                    document.body.setAttribute(key, value);
+                });
+                return;
+            }
+
+            const el = document.createElement(type);
+            el.setAttribute(MANAGED_ATTR, "true");
+
+            Object.entries(props).forEach(([key, value]) => {
+                if (key === "crossOrigin") {
+                    el.setAttribute("crossorigin", value);
+                } else if (key === "hrefLang") {
+                    el.setAttribute("hreflang", value);
+                } else {
+                    el.setAttribute(key, value);
+                }
+            });
+
+            if (type === "script" && textContent) {
+                el.textContent = typeof textContent === "string" ? textContent : "";
+            }
+
+            document.head.appendChild(el);
+            managedElements.push(el);
+        });
+
+        return () => {
+            managedElements.forEach((el) => {
+                if (el.parentNode) {
+                    el.parentNode.removeChild(el);
+                }
+            });
+        };
+    }, [children]);
+
+    return null;
+}

package/src/components/navigation.jsx

@@ -0,0 +1,11 @@
+export {
+    Link,
+    NavLink,
+    Navigate,
+    Outlet,
+    useNavigate,
+    useLocation,
+    useParams,
+    useSearchParams,
+    useMatch,
+} from "react-router-dom";

package/src/config.js

@@ -0,0 +1,5 @@
+import Config from "@aplos_config";
+
+export default function getConfig() {
+  return Config;
+}

package/src/pages/_app.tsx

@@ -0,0 +1,9 @@
+import {Outlet} from "react-router-dom";
+
+export default function Toto() {
+    return (
+        <div>
+            <Outlet />
+        </div>
+    );
+}

package/src/pages/blog/[slug].tsx

@@ -0,0 +1,6 @@
+import { useParams } from 'react-router-dom';
+
+export default function BlogPost() {
+    const { slug } = useParams();
+    return <h1>Blog Post: {slug}</h1>;
+}

package/src/pages/crash.tsx

@@ -0,0 +1,6 @@
+export default function CrashPage() {
+    // This will crash the component
+    throw new Error("This is a test error to demonstrate error boundary");
+    
+    return <div>This won't render</div>;
+}

package/src/pages/index.tsx

@@ -0,0 +1,10 @@
+import getConfig from 'aplos/config';
+
+export default function Home() {
+    const config = getConfig();
+
+    console.log(config.publicRuntimeConfig)
+
+
+    return <div>Home</div>
+}

package/src/pages/test.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Test() {
+  return <div style={{ color: "coucou" }}>Coucou</div>;
+}

package/src/runtime/DefaultErrorPage.jsx

@@ -0,0 +1,76 @@
+export default function DefaultErrorPage({ error }) {
+    const isDevelopment = process.env.NODE_ENV === 'development';
+
+    if (isDevelopment) {
+        return (
+            <div style={{
+                padding: '20px',
+                backgroundColor: '#fff5f5',
+                border: '1px solid #fed7d7',
+                borderRadius: '6px',
+                margin: '20px',
+                fontFamily: 'monospace'
+            }}>
+                <h1 style={{ color: '#c53030', fontSize: '24px', marginBottom: '16px' }}>
+                    Something went wrong
+                </h1>
+                <h2 style={{ color: '#2d3748', fontSize: '18px', marginBottom: '12px' }}>
+                    {error && error.toString()}
+                </h2>
+                <details style={{ whiteSpace: 'pre-wrap', fontSize: '14px', color: '#4a5568' }}>
+                    <summary style={{ cursor: 'pointer', marginBottom: '8px' }}>
+                        Click to see stack trace
+                    </summary>
+                    {error?.stack}
+                </details>
+                <button
+                    onClick={() => window.location.reload()}
+                    style={{
+                        marginTop: '16px',
+                        padding: '8px 16px',
+                        backgroundColor: '#4299e1',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '4px',
+                        cursor: 'pointer'
+                    }}
+                >
+                    Reload page
+                </button>
+            </div>
+        );
+    }
+
+    return (
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '50vh',
+            textAlign: 'center',
+            padding: '20px'
+        }}>
+            <h2 style={{ fontSize: '24px', marginBottom: '8px', color: '#2d3748' }}>
+                Oops! Something went wrong
+            </h2>
+            <p style={{ fontSize: '16px', color: '#718096', marginBottom: '24px' }}>
+                We're sorry, but something unexpected happened. Please try refreshing the page.
+            </p>
+            <button
+                onClick={() => window.location.reload()}
+                style={{
+                    padding: '12px 24px',
+                    backgroundColor: '#4299e1',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '6px',
+                    fontSize: '16px',
+                    cursor: 'pointer'
+                }}
+            >
+                Refresh page
+            </button>
+        </div>
+    );
+}

package/src/runtime/ErrorBoundary.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export default function ErrorBoundary({ errorComponent, children }) {
+    const [hasError, setHasError] = React.useState(false);
+    const [error, setError] = React.useState(null);
+
+    React.useEffect(() => {
+        const handleError = (error, errorInfo) => {
+            setHasError(true);
+            setError(error);
+
+            if (process.env.NODE_ENV === 'development') {
+                console.error('Error caught by boundary:', error, errorInfo);
+            }
+        };
+
+        const handleGlobalError = (event) => {
+            handleError(event.error, { componentStack: event.error?.stack });
+        };
+
+        const handleUnhandledRejection = (event) => {
+            handleError(event.reason, { componentStack: event.reason?.stack });
+        };
+
+        window.addEventListener('error', handleGlobalError);
+        window.addEventListener('unhandledrejection', handleUnhandledRejection);
+
+        return () => {
+            window.removeEventListener('error', handleGlobalError);
+            window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+        };
+    }, []);
+
+    if (hasError) {
+        const ErrorComponent = errorComponent;
+        return <ErrorComponent error={error} />;
+    }
+
+    return children;
+}

package/src/runtime/MiddlewareGate.jsx

@@ -0,0 +1,149 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import userMiddleware from '@aplos_middleware';
+import defaultMiddleware from 'aplos/internal/default-middleware';
+import { isRedirect } from './redirect.js';
+
+// When the project defines no `src/middleware.*`, the generated cache
+// re-exports the framework no-op, so `userMiddleware` is identically the
+// default function (ESM re-export preserves reference identity). In that
+// case there is no decision to make: skip the gate entirely so apps that
+// don't use middleware pay zero cost — no `null` frame, no extra render,
+// no layout effect on every navigation.
+const HAS_MIDDLEWARE = userMiddleware !== defaultMiddleware;
+
+// A middleware can redirect to a path it also intercepts. If the chain never
+// reaches a route that renders (each target redirects again), navigation never
+// settles: the app freezes on a blank `null` with navigate() looping. No
+// amount of documentation prevents a user from writing that by accident, so
+// the runtime breaks the loop itself. This bounds *consecutive* redirects
+// with no route rendered in between — a legitimate auth→onboarding→dashboard
+// hop is a handful; anything past this is a cycle.
+const MAX_REDIRECT_CHAIN = 20;
+
+/**
+ * Runs the project route middleware before the matched route renders.
+ *
+ * Placed inside `<BrowserRouter>` and wrapping `<Routes>`, it intercepts every
+ * navigation: it calls the user middleware with the current location, and if
+ * the middleware returns `redirect(...)` it navigates away *before* committing
+ * the guarded route to the DOM. This avoids the "flash of protected content"
+ * you get when guarding inside a `useEffect` in a layout/page.
+ *
+ * The decision runs synchronously in a layout effect (pre-paint). While a
+ * redirect is pending we render `null` so the guarded tree is never painted.
+ *
+ * A middleware may be sync or async. Async middleware cannot block the first
+ * paint (we can't await before rendering), so it renders `null` until the
+ * promise settles — async is intended for cases where a brief blank frame is
+ * acceptable (e.g. token refresh). Prefer sync middleware for auth guards.
+ */
+export default function MiddlewareGate({ children }) {
+    // `HAS_MIDDLEWARE` is a module constant — it never changes for the life of
+    // the process — so branching on it here does not violate the Rules of
+    // Hooks: a given render path always calls the same hooks. Apps without a
+    // middleware render through with no gate machinery at all.
+    if (!HAS_MIDDLEWARE) {
+        return children;
+    }
+    return <ActiveMiddlewareGate>{children}</ActiveMiddlewareGate>;
+}
+
+function ActiveMiddlewareGate({ children }) {
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    // Key the decision on the full location so back/forward and query changes
+    // re-run the middleware. `null` => undecided (don't paint yet).
+    const [decidedFor, setDecidedFor] = useState(null);
+    const pendingRef = useRef(null);
+    // Counts consecutive redirects with no route rendered in between. Reset to
+    // 0 whenever a navigation is allowed through (a route renders), so it only
+    // grows while the middleware is bouncing the user without ever settling.
+    const redirectChainRef = useRef(0);
+
+    const locationKey = location.pathname + location.search;
+
+    useLayoutEffect(() => {
+        let cancelled = false;
+
+        function letThrough() {
+            redirectChainRef.current = 0;
+            setDecidedFor(locationKey);
+        }
+
+        function applyResult(result) {
+            if (cancelled) return;
+            if (isRedirect(result)) {
+                if (redirectChainRef.current >= MAX_REDIRECT_CHAIN) {
+                    // The middleware is in a redirect cycle (e.g. it redirects
+                    // to a path it also intercepts, with no exit condition).
+                    // Fail open like a thrown middleware: a guard bug must not
+                    // freeze the app. The user sees the route instead of a
+                    // hung blank page, and the error names the cause.
+                    console.error(
+                        `[aplos] route middleware redirected ${redirectChainRef.current} ` +
+                        `times without settling — aborting the redirect chain to ` +
+                        `avoid an infinite loop. Check that your redirect target ` +
+                        `is not itself redirected (its condition must become ` +
+                        `false after the redirect).`,
+                    );
+                    letThrough();
+                    return;
+                }
+                redirectChainRef.current += 1;
+                navigate(result.to, { replace: result.replace });
+                // Leave `decidedFor` unset for this location: the navigate()
+                // will change the location and re-run this effect for the new
+                // target, which is where the decision that matters is made.
+                return;
+            }
+            letThrough();
+        }
+
+        let result;
+        try {
+            result = userMiddleware({
+                pathname: location.pathname,
+                search: location.search,
+                searchParams: new URLSearchParams(location.search),
+                hash: location.hash,
+                state: location.state,
+            });
+        } catch (error) {
+            // A throwing middleware must not wedge navigation. Surface it and
+            // fail open (let the route render) so the app stays usable.
+            console.error('[aplos] route middleware threw:', error);
+            letThrough();
+            return () => {
+                cancelled = true;
+            };
+        }
+
+        if (result && typeof result.then === 'function') {
+            const token = {};
+            pendingRef.current = token;
+            Promise.resolve(result)
+                .then((resolved) => {
+                    if (pendingRef.current === token) applyResult(resolved);
+                })
+                .catch((error) => {
+                    if (pendingRef.current !== token) return;
+                    console.error('[aplos] async route middleware rejected:', error);
+                    if (!cancelled) letThrough();
+                });
+        } else {
+            applyResult(result);
+        }
+
+        return () => {
+            cancelled = true;
+        };
+    }, [locationKey, location.pathname, location.search, location.hash, location.state, navigate]);
+
+    if (decidedFor !== locationKey) {
+        return null;
+    }
+
+    return children;
+}

package/src/runtime/app-ssr.jsx

@@ -0,0 +1,42 @@
+import React, { createElement } from 'react';
+import { StaticRouter, Routes, Route } from 'react-router';
+
+import { routeTree } from '@aplos_routes';
+import { CustomError, NoMatch } from '@aplos_pages';
+import { reactStrictMode } from '@aplos_head';
+
+import ErrorBoundary from './ErrorBoundary.jsx';
+import DefaultErrorPage from './DefaultErrorPage.jsx';
+
+function renderRoutes(nodes) {
+    return nodes.map((node, i) => {
+        if (node.children) {
+            return (
+                <Route key={i} element={createElement(node.element)}>
+                    {renderRoutes(node.children)}
+                </Route>
+            );
+        }
+        return <Route key={i} path={node.path} element={createElement(node.element)} />;
+    });
+}
+
+export default function AppSSR({ url }) {
+    const ErrorComponent = CustomError || DefaultErrorPage;
+    const tree = (
+        <ErrorBoundary errorComponent={ErrorComponent}>
+            <StaticRouter location={url}>
+                <Routes>
+                    {renderRoutes(routeTree)}
+                    <Route path="*" element={createElement(NoMatch)} />
+                </Routes>
+            </StaticRouter>
+        </ErrorBoundary>
+    );
+
+    if (reactStrictMode) {
+        const { StrictMode } = React;
+        return <StrictMode>{tree}</StrictMode>;
+    }
+    return tree;
+}