aplosjs 0.15.0

package/src/runtime/app.jsx

@@ -0,0 +1,126 @@
+import React, { createElement, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Routes, BrowserRouter, Route } from 'react-router-dom';
+
+import { routeTree } from '@aplos_routes';
+import { CustomError, NoMatch } from '@aplos_pages';
+import headConfig, { reactStrictMode } from '@aplos_head';
+
+import ErrorBoundary from './ErrorBoundary.jsx';
+import DefaultErrorPage from './DefaultErrorPage.jsx';
+import MiddlewareGate from './MiddlewareGate.jsx';
+
+const MANAGED_ATTR = "data-head-default";
+
+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)} />;
+    });
+}
+
+function HeadDefaults() {
+    useEffect(() => {
+        if (!headConfig) return;
+
+        const { defaultTitle, meta = [], link = [], script = [] } = headConfig;
+
+        if (defaultTitle) {
+            document.title = defaultTitle;
+        }
+
+        const elements = [];
+
+        meta.forEach((m) => {
+            const el = document.createElement('meta');
+            Object.entries(m).forEach(([key, value]) => el.setAttribute(key, value));
+            el.setAttribute(MANAGED_ATTR, 'true');
+            document.head.appendChild(el);
+            elements.push(el);
+        });
+
+        link.forEach((l) => {
+            const el = document.createElement('link');
+            Object.entries(l).forEach(([key, value]) => el.setAttribute(key, value));
+            el.setAttribute(MANAGED_ATTR, 'true');
+            document.head.appendChild(el);
+            elements.push(el);
+        });
+
+        script.forEach((s) => {
+            const el = document.createElement('script');
+            Object.entries(s).forEach(([key, value]) => {
+                if (key === 'innerHTML') {
+                    el.textContent = value;
+                } else if (typeof value === 'boolean') {
+                    if (value) el.setAttribute(key, '');
+                } else {
+                    el.setAttribute(key, value);
+                }
+            });
+            el.setAttribute(MANAGED_ATTR, 'true');
+            document.head.appendChild(el);
+            elements.push(el);
+        });
+
+        return () => {
+            elements.forEach((el) => {
+                if (el.parentNode) el.parentNode.removeChild(el);
+            });
+        };
+    }, []);
+
+    return null;
+}
+
+function App() {
+    const ErrorComponent = CustomError || DefaultErrorPage;
+
+    return (
+        <>
+            <HeadDefaults />
+            <ErrorBoundary errorComponent={ErrorComponent}>
+                <BrowserRouter>
+                    <MiddlewareGate>
+                        <Routes>
+                            {renderRoutes(routeTree)}
+                            <Route path="*" element={createElement(NoMatch)} />
+                        </Routes>
+                    </MiddlewareGate>
+                </BrowserRouter>
+            </ErrorBoundary>
+        </>
+    );
+}
+
+const container = document.getElementById('root');
+
+// Reuse the React root across hot updates so HMR re-renders instead of
+// recreating the root (which would force a full reload).
+const root =
+    (module.hot && module.hot.data && module.hot.data.root) || createRoot(container);
+
+function render() {
+    if (reactStrictMode) {
+        const { StrictMode } = React;
+        root.render(<StrictMode><App /></StrictMode>);
+    } else {
+        root.render(<App />);
+    }
+}
+
+render();
+
+if (module.hot) {
+    // Accept updates here so React Refresh commits them without a full reload.
+    module.hot.accept();
+    module.hot.dispose((data) => {
+        data.root = root;
+    });
+}

package/src/runtime/default-middleware.js

@@ -0,0 +1,10 @@
+/**
+ * Default route middleware used when a project does not define
+ * `src/middleware.{ts,tsx,js,jsx}`. It never redirects, so navigation always
+ * proceeds unchanged.
+ *
+ * @returns {undefined}
+ */
+export default function middleware() {
+    return undefined;
+}

package/src/runtime/default-not-found.jsx

@@ -0,0 +1,3 @@
+export default function DefaultNotFound() {
+    return <div>Not found</div>;
+}

package/src/runtime/passthrough-layout.jsx

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

package/src/runtime/redirect.js

@@ -0,0 +1,46 @@
+/**
+ * Sentinel returned by a route middleware to ask Aplos to navigate elsewhere
+ * before the matched route renders.
+ *
+ * A middleware returns the result of `redirect(...)` to short-circuit
+ * navigation. Returning `undefined` (or nothing) lets navigation proceed.
+ *
+ * @example
+ *   import { redirect } from 'aplos/redirect';
+ *
+ *   export default function middleware({ pathname }) {
+ *     const token = localStorage.getItem('token');
+ *     if (!token && pathname !== '/login') {
+ *       return redirect('/login');
+ *     }
+ *   }
+ *
+ * @param {string} to - Destination path (e.g. `/login`).
+ * @param {{ replace?: boolean }} [options] - `replace: true` (default) swaps
+ *   the current history entry so the guarded URL is not kept in history.
+ *   Pass `replace: false` to push a new entry instead.
+ * @returns {{ __aplosRedirect: true, to: string, replace: boolean }}
+ */
+export function redirect(to, options = {}) {
+    if (typeof to !== 'string' || to.length === 0) {
+        throw new TypeError(`redirect(): "to" must be a non-empty string, received ${typeof to}`);
+    }
+    return {
+        __aplosRedirect: true,
+        to,
+        replace: options.replace !== false,
+    };
+}
+
+/**
+ * @param {unknown} value
+ * @returns {value is { __aplosRedirect: true, to: string, replace: boolean }}
+ */
+export function isRedirect(value) {
+    return (
+        typeof value === 'object' &&
+        value !== null &&
+        value.__aplosRedirect === true &&
+        typeof value.to === 'string'
+    );
+}

package/src/runtime/ssr-entry.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import AppSSR from './app-ssr.jsx';
+import { routeTree } from '@aplos_routes';
+
+export function render(url) {
+    return renderToString(<AppSSR url={url} />);
+}
+
+function isStaticPath(p) {
+    if (!p) {
+        return false;
+    }
+    if (p.includes(':')) {
+        return false;
+    }
+    if (p.includes('*')) {
+        return false;
+    }
+    return true;
+}
+
+function walk(nodes, acc, forceAll) {
+    for (const node of nodes) {
+        if (node.path !== undefined && isStaticPath(node.path)) {
+            if (forceAll || node.static === true) {
+                acc.push(node.path);
+            }
+        }
+        if (node.children) {
+            walk(node.children, acc, forceAll);
+        }
+    }
+}
+
+export function getStaticRoutes({ forceAll = false } = {}) {
+    const acc = [];
+    walk(routeTree, acc, forceAll);
+    return Array.from(new Set(acc));
+}
+
+function findRouteModule(nodes, url) {
+    for (const node of nodes) {
+        if (node.children) {
+            const found = findRouteModule(node.children, url);
+            if (found) return found;
+        }
+        if (node.path !== undefined && node.path === url) {
+            return node;
+        }
+    }
+    return null;
+}
+
+function extractParams(sourcePath, url) {
+    if (!sourcePath) {
+        return {};
+    }
+    const sourceSegments = sourcePath.split('/').filter(Boolean);
+    const urlSegments = url.split('/').filter(Boolean);
+    const params = {};
+    for (let i = 0; i < sourceSegments.length; i++) {
+        const seg = sourceSegments[i];
+        const catchAll = seg.match(/^\[\.\.\.(.+)\]$/);
+        if (catchAll) {
+            params[catchAll[1]] = urlSegments.slice(i).join('/');
+            return params;
+        }
+        const dynamic = seg.match(/^\[(.+)\]$/);
+        if (dynamic) {
+            params[dynamic[1]] = urlSegments[i];
+        }
+    }
+    return params;
+}
+
+/**
+ * Return the `meta` export of the page module matching `url`, if any.
+ * Pages opt in by exporting `export const meta = { title, description, ... }`
+ * or `export const meta = (url, params) => ({ ... })` for per-instance values.
+ * When the matched node carries an inline `meta` (from a `paths` entry), that
+ * value wins over the component-level export.
+ * @param {string} url
+ * @returns {object|null}
+ */
+export function getRouteMeta(url) {
+    const node = findRouteModule(routeTree, url);
+    if (!node || node.meta === undefined || node.meta === null) {
+        return null;
+    }
+    if (typeof node.meta === 'function') {
+        const params = extractParams(node.sourcePath, url);
+        try {
+            const result = node.meta(url, params);
+            return result && typeof result === 'object' ? result : null;
+        } catch (err) {
+            console.error(`meta() threw for ${url}:`, err.message);
+            return null;
+        }
+    }
+    return node.meta;
+}
+
+export default { render, getStaticRoutes, getRouteMeta };

package/templates/minimal/README.md

@@ -0,0 +1,38 @@
+# {{NAME}}
+
+Built with [Aplos](https://aplos.alpacode.io) — a fast, file-based React framework powered by Rspack.
+
+## Getting started
+
+```bash
+bun install
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to view the app.
+
+## Available scripts
+
+- `bun dev` — start the development server with HMR
+- `bun build` — build for production
+- `bun build:static` — build with static pre-rendering for opt-in pages
+
+## Project structure
+
+```
+src/
+  pages/        # File-based routes
+    _app.tsx    # Root layout
+    index.tsx   # Home page (/)
+    about.tsx   # About page (/about)
+  styles/
+    global.css
+aplos.config.js
+```
+
+Add files in `src/pages/` to create new routes automatically.
+
+## Learn more
+
+- [Aplos documentation](https://aplos.alpacode.io)
+- [GitHub repository](https://github.com/alpac0de/aplos)

package/templates/minimal/_gitignore

@@ -0,0 +1,7 @@
+node_modules
+.aplos
+public/dist
+dist
+.env.local
+*.log
+.DS_Store

package/templates/minimal/aplos.config.js

@@ -0,0 +1,13 @@
+export default {
+  reactStrictMode: true,
+  server: {
+    port: 3000,
+  },
+  head: {
+    defaultTitle: '{{NAME}}',
+    meta: [
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { name: 'description', content: 'Built with Aplos' },
+    ],
+  },
+};

package/templates/minimal/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "{{NAME}}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "aplos server",
+    "build": "aplos build",
+    "build:static": "aplos build --static"
+  },
+  "dependencies": {
+    "aplosjs": "^0.14.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.9.5"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
+  }
+}

package/templates/minimal/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="12" fill="#0066cc"/>
+  <text x="50%" y="58%" text-anchor="middle" fill="#fff" font-family="system-ui, sans-serif" font-size="32" font-weight="700">A</text>
+</svg>

package/templates/minimal/src/pages/_app.tsx

@@ -0,0 +1,6 @@
+import { Outlet } from 'aplos/navigation';
+import '@/styles/global.css';
+
+export default function App() {
+  return <Outlet />;
+}

package/templates/minimal/src/pages/about.tsx

@@ -0,0 +1,24 @@
+import Head from 'aplos/head';
+import { Link } from 'aplos/navigation';
+
+export default function About() {
+  return (
+    <>
+      <Head>
+        <title>About</title>
+      </Head>
+
+      <main className="container">
+        <h1>About</h1>
+        <p>
+          This is an example page. Aplos uses file-based routing — this page
+          lives at <code>src/pages/about.tsx</code> and is served at{' '}
+          <code>/about</code>.
+        </p>
+        <p>
+          <Link to="/">← Back home</Link>
+        </p>
+      </main>
+    </>
+  );
+}

package/templates/minimal/src/pages/index.tsx

@@ -0,0 +1,40 @@
+import Head from 'aplos/head';
+import { Link } from 'aplos/navigation';
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Welcome — {{NAME}}</title>
+      </Head>
+
+      <main className="container">
+        <h1>Welcome to Aplos</h1>
+        <p>
+          Your project is up and running. Edit <code>src/pages/index.tsx</code>{' '}
+          to start building.
+        </p>
+
+        <ul className="links">
+          <li>
+            <Link to="/about">About page example</Link>
+          </li>
+          <li>
+            <a href="https://aplos.alpacode.io" target="_blank" rel="noreferrer">
+              Documentation
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://github.com/alpac0de/aplos"
+              target="_blank"
+              rel="noreferrer"
+            >
+              GitHub repository
+            </a>
+          </li>
+        </ul>
+      </main>
+    </>
+  );
+}

package/templates/minimal/src/styles/global.css

@@ -0,0 +1,53 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  color: #1a1a1a;
+  background: #fafafa;
+  line-height: 1.6;
+}
+
+.container {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 4rem 1.5rem;
+}
+
+h1 {
+  font-size: 2.25rem;
+  margin-bottom: 1rem;
+}
+
+code {
+  background: #eee;
+  padding: 0.15rem 0.4rem;
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+
+.links {
+  list-style: none;
+  padding: 0;
+  margin-top: 2rem;
+}
+
+.links li {
+  margin: 0.5rem 0;
+}
+
+a {
+  color: #0066cc;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}

package/templates/minimal/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "~/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}