aplosjs 0.15.0

package/README.md

@@ -0,0 +1,28 @@
+# Aplos
+
+A fast, modern React framework with file-based routing, powered by Rspack.
+
+## Features
+
+- File-based routing with dynamic and catch-all routes
+- Nested layouts
+- Custom rspack configuration
+- React Compiler & HMR
+- TypeScript & PostCSS support
+- Environment variables (`.env`, `.env.local`)
+
+## Quick Start
+
+```bash
+bun add aplosjs
+
+# Start development server
+npx aplos server
+
+# Build for production
+npx aplos build
+```
+
+## Documentation
+
+See the full documentation in the [`documentation/`](documentation/) directory, or browse it online at [aplos.alpacode.io](https://aplos.alpacode.io).

package/aplos.config.dist.js

@@ -0,0 +1,30 @@
+export default {
+    // React configuration
+    reactStrictMode: true,
+    
+    // Server configuration
+    server: {
+        port: 3001,
+    },
+    
+    // Client-side runtime configuration
+    publicRuntimeConfig: {
+        api_base_url: process.env.API_BASE_URL || "https://api.example.com",
+    },
+    
+    // Routes configuration
+    routes: [
+        {
+            source: '/custom',
+            destination: '/custom-page'
+        },
+        {
+            path: '/blog/:id',
+            component: 'BlogPost',
+            file: 'pages/blog/[id]',
+            requirements: {
+                id: '\\d+'  // Numbers only
+            }
+        }
+    ]
+};

package/bin/aplos

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+import { config } from "dotenv";
+import { existsSync } from "node:fs";
+import { resolve } from "node:path";
+
+const projectDir = process.cwd();
+config({ path: resolve(projectDir, ".env") });
+if (existsSync(resolve(projectDir, ".env.local"))) {
+  config({ path: resolve(projectDir, ".env.local"), override: true });
+}
+
+import { Command } from "commander";
+import devServer from "../src/command/devServer.js";
+import build from "../src/command/build.js";
+import router from "../src/command/router.js";
+import create from "../src/command/create.js";
+
+const program = new Command();
+program.name("Aplos").description("React Framework").version("0.14.0");
+
+program
+  .command("server")
+  .description("Split a string into substrings and display as an array")
+  .action(devServer);
+
+program
+  .command("build")
+  .description("Build assets")
+  .option(
+    "--mode <mode>",
+    "Providing the mode configuration option tells webpack to use its built-in optimizations accordingly",
+    process.env.NODE_ENV || "development"
+  )
+  .option(
+    "--static",
+    "Pre-render each static route to HTML (SSG). Dynamic routes fall back to SPA.",
+    false
+  )
+  .action(build);
+
+program
+  .command("router:debug")
+  .argument("[name]", "Name of the route")
+  .description("Debug the router")
+  .action(router);
+
+program
+  .command("router:match")
+  .argument("<url>", "URL to test against routes")
+  .description("Test if a URL matches any route")
+  .action((url) => router({ url }));
+
+program
+  .command("create")
+  .argument("<project-name>", "Name of the new project")
+  .description("Scaffold a new Aplos project")
+  .action(create);
+
+program.parse();

package/create-aplos/index.js

@@ -0,0 +1,95 @@
+#!/usr/bin/env node
+
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const TEMPLATE_DIR = path.resolve(__dirname, "templates/minimal");
+const VALID_NAME = /^[a-z0-9][a-z0-9._-]*$/i;
+
+const projectName = process.argv[2];
+
+if (!projectName) {
+  console.error("Usage: create-aplos <project-name>");
+  console.error("       bun create aplos <project-name>");
+  console.error("       npm create aplos <project-name>");
+  process.exit(1);
+}
+
+if (!VALID_NAME.test(projectName) || projectName.startsWith(".")) {
+  console.error(
+    `Invalid project name: "${projectName}". Use letters, digits, dashes, dots or underscores.`
+  );
+  process.exit(1);
+}
+
+const targetDir = path.resolve(process.cwd(), projectName);
+
+if (fs.existsSync(targetDir)) {
+  const entries = fs.readdirSync(targetDir);
+  if (entries.length > 0) {
+    console.error(
+      `Target directory "${projectName}" already exists and is not empty.`
+    );
+    process.exit(1);
+  }
+} else {
+  fs.mkdirSync(targetDir, { recursive: true });
+}
+
+console.log(`Creating Aplos project in ${targetDir}...`);
+
+copyDirectory(TEMPLATE_DIR, targetDir, projectName);
+renameGitignore(targetDir);
+
+console.log("");
+console.log("Done. Next steps:");
+console.log("");
+console.log(`  cd ${projectName}`);
+console.log("  bun install");
+console.log("  bun dev");
+console.log("");
+console.log("Happy hacking!");
+
+function copyDirectory(src, dest, name) {
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      fs.mkdirSync(destPath, { recursive: true });
+      copyDirectory(srcPath, destPath, name);
+    } else if (entry.isFile()) {
+      copyFile(srcPath, destPath, name);
+    }
+  }
+}
+
+function copyFile(src, dest, name) {
+  if (isBinary(src)) {
+    fs.copyFileSync(src, dest);
+    return;
+  }
+
+  const content = fs.readFileSync(src, "utf8");
+  const replaced = content.replace(/\{\{NAME\}\}/g, name);
+  fs.writeFileSync(dest, replaced);
+}
+
+function isBinary(filePath) {
+  const ext = path.extname(filePath).toLowerCase();
+  return [".png", ".jpg", ".jpeg", ".gif", ".ico", ".webp", ".woff", ".woff2"].includes(
+    ext
+  );
+}
+
+function renameGitignore(dir) {
+  const stub = path.join(dir, "_gitignore");
+  const real = path.join(dir, ".gitignore");
+  if (fs.existsSync(stub) && !fs.existsSync(real)) {
+    fs.renameSync(stub, real);
+  }
+}

package/create-aplos/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "create-aplos",
+  "version": "0.14.0",
+  "description": "Scaffold a new Aplos project",
+  "type": "module",
+  "bin": {
+    "create-aplos": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "templates"
+  ],
+  "keywords": [
+    "aplos",
+    "react",
+    "scaffold",
+    "starter",
+    "create"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alpac0de/aplos.git",
+    "directory": "create-aplos"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  }
+}

package/create-aplos/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/create-aplos/templates/minimal/_gitignore

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

package/create-aplos/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/create-aplos/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/create-aplos/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/create-aplos/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/create-aplos/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/create-aplos/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/create-aplos/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/create-aplos/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"]
+}

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "aplosjs",
+  "version": "0.15.0",
+  "description": "A fast, modern React framework",
+  "author": "Mbechezi Nawo",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alpac0de/aplos.git"
+  },
+  "bugs": {
+    "url": "https://github.com/alpac0de/aplos/issues"
+  },
+  "homepage": "https://github.com/alpac0de/aplos#readme",
+  "keywords": [
+    "react",
+    "framework",
+    "routing",
+    "file-based-routing",
+    "rspack",
+    "frontend",
+    "spa"
+  ],
+  "bin": {
+    "aplos": "bin/aplos"
+  },
+  "files": [
+    "bin/",
+    "src/",
+    "templates/",
+    "create-aplos/",
+    "rspack.config.js",
+    "rspack.ssr.config.js",
+    "postcss.config.js",
+    "aplos.config.dist.js",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "bin/aplos server",
+    "test": "bun test",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-proposal-decorators": "^7.28.0",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@rspack/cli": "^1.7.0",
+    "@rspack/core": "^1.7.0",
+    "@rspack/dev-server": "^1.1.4",
+    "@rspack/plugin-html": "^0.5.8",
+    "@rspack/plugin-react-refresh": "^1.6.0",
+    "autoprefixer": "^10.4.21",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
+    "cli-table3": "^0.6.5",
+    "commander": "^14.0.0",
+    "css-loader": "^7.1.2",
+    "dotenv": "^17.3.1",
+    "glob": "^11.0.3",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.2.0",
+    "postcss-nested": "^7.0.2",
+    "react-refresh": "^0.16.0",
+    "style-loader": "^4.0.0",
+    "typescript": "^5.9.3",
+    "webpack-merge": "^6.0.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
+    "globals": "^16.5.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.9.5"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0"
+  },
+  "exports": {
+    "./config": "./src/config.js",
+    "./navigation": "./src/components/navigation.jsx",
+    "./head": "./src/components/head.jsx",
+    "./redirect": "./src/runtime/redirect.js"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+    plugins: [
+        require('autoprefixer'),
+        require('postcss-nested')
+    ]
+}
+
+module.exports = config