aplosjs 0.15.0

package/src/build/ssg.js

@@ -0,0 +1,198 @@
+import fs from 'fs';
+import path from 'path';
+import { spawn } from 'child_process';
+import { pathToFileURL, fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const SSR_ENTRY = path.resolve(__dirname, '../runtime/ssr-entry.jsx');
+const SSR_BUNDLE_NAME = 'ssr-bundle.cjs';
+
+function outputHtmlPath(distDir, routePath) {
+    if (routePath === '/' || routePath === '') {
+        return path.join(distDir, 'index.html');
+    }
+    const trimmed = routePath.replace(/^\/+/, '').replace(/\/+$/, '');
+    return path.join(distDir, `${trimmed}.html`);
+}
+
+async function buildSSRBundle(projectDirectory, frameworkDirectory, mode) {
+    const ssrConfigPath = path.resolve(frameworkDirectory, 'rspack.ssr.config.js');
+    const rspackBin = path.join(projectDirectory, 'node_modules', '.bin', 'rspack');
+
+    return new Promise((resolve, reject) => {
+        const child = spawn(rspackBin, [
+            '--mode=' + mode,
+            '--config', ssrConfigPath,
+            '--entry', SSR_ENTRY,
+        ], {
+            env: { ...process.env, APLOS_SSR: '1' },
+        });
+
+        let stderr = '';
+        child.stdout.on('data', (d) => process.stdout.write(d));
+        child.stderr.on('data', (d) => {
+            stderr += d.toString();
+            process.stderr.write(d);
+        });
+        child.on('close', (code) => {
+            if (code !== 0) {
+                reject(new Error(`SSR bundle failed (exit ${code}): ${stderr}`));
+            } else {
+                resolve();
+            }
+        });
+    });
+}
+
+export default async function ssg({ mode, forceAll = false } = {}) {
+    const projectDirectory = process.cwd();
+    const frameworkDirectory = path.resolve(__dirname, '../..');
+    const distDir = path.join(projectDirectory, 'public', 'dist');
+    const cacheDir = path.join(projectDirectory, '.aplos', 'cache');
+
+    const indexHtmlPath = path.join(distDir, 'index.html');
+    if (!fs.existsSync(indexHtmlPath)) {
+        throw new Error(`SSG: ${indexHtmlPath} not found — run the client build first.`);
+    }
+
+    // Skip the expensive SSR bundle build if no page opted in and --static wasn't passed.
+    if (!forceAll) {
+        const routesPath = path.join(cacheDir, 'routes.js');
+        if (!fs.existsSync(routesPath)) {
+            return;
+        }
+        const source = fs.readFileSync(routesPath, 'utf-8');
+        if (!/static:\s*true/.test(source)) {
+            return;
+        }
+    }
+
+    console.log('\n  Building SSR bundle...');
+    await buildSSRBundle(projectDirectory, frameworkDirectory, mode || 'production');
+
+    const ssrBundlePath = path.join(cacheDir, SSR_BUNDLE_NAME);
+    if (!fs.existsSync(ssrBundlePath)) {
+        throw new Error(`SSG: SSR bundle not produced at ${ssrBundlePath}.`);
+    }
+
+    const ssrMod = await import(pathToFileURL(ssrBundlePath).href);
+    const render = ssrMod.render || ssrMod.default?.render;
+    const getStaticRoutes = ssrMod.getStaticRoutes || ssrMod.default?.getStaticRoutes;
+    const getRouteMeta = ssrMod.getRouteMeta || ssrMod.default?.getRouteMeta;
+    if (typeof render !== 'function' || typeof getStaticRoutes !== 'function') {
+        throw new Error('SSG: SSR bundle must export render(url) and getStaticRoutes().');
+    }
+
+    const staticRoutes = getStaticRoutes({ forceAll });
+    if (staticRoutes.length === 0) {
+        return;
+    }
+
+    const template = fs.readFileSync(indexHtmlPath, 'utf-8');
+    const rootMarker = /<div id="root">\s*<\/div>/;
+    if (!rootMarker.test(template)) {
+        throw new Error('SSG: could not find <div id="root"></div> in index.html template.');
+    }
+
+    console.log(`  Pre-rendering ${staticRoutes.length} route(s)...`);
+    let rendered = 0;
+    for (const route of staticRoutes) {
+        try {
+            const html = render(route);
+            const meta = typeof getRouteMeta === 'function' ? getRouteMeta(route) : null;
+            let page = template.replace(rootMarker, `<div id="root">${html}</div>`);
+            if (meta) {
+                page = injectMetaTags(page, meta);
+            }
+            const outPath = outputHtmlPath(distDir, route);
+            fs.mkdirSync(path.dirname(outPath), { recursive: true });
+            fs.writeFileSync(outPath, page, 'utf-8');
+            console.log(`    ✓ ${route} → ${path.relative(projectDirectory, outPath)}`);
+            rendered++;
+        } catch (err) {
+            console.error(`    ✗ ${route}: ${err.message}`);
+        }
+    }
+    console.log(`  Pre-rendered ${rendered}/${staticRoutes.length} route(s).`);
+}
+
+function escapeHtml(value) {
+    return String(value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
+function metaTag(attrs) {
+    const parts = Object.entries(attrs)
+        .filter(([, v]) => v !== undefined && v !== null && v !== false)
+        .map(([k, v]) => `${k}="${escapeHtml(v)}"`);
+    return `<meta ${parts.join(' ')}>`;
+}
+
+function buildMetaHtml(meta) {
+    const tags = [];
+    if (meta.title) {
+        tags.push(`<title>${escapeHtml(meta.title)}</title>`);
+    }
+    if (meta.description) {
+        tags.push(metaTag({ name: 'description', content: meta.description }));
+    }
+    if (meta.canonical) {
+        tags.push(`<link rel="canonical" href="${escapeHtml(meta.canonical)}">`);
+    }
+    if (Array.isArray(meta.keywords) && meta.keywords.length > 0) {
+        tags.push(metaTag({ name: 'keywords', content: meta.keywords.join(', ') }));
+    }
+    if (meta.og && typeof meta.og === 'object') {
+        for (const [key, value] of Object.entries(meta.og)) {
+            tags.push(metaTag({ property: `og:${key}`, content: value }));
+        }
+    }
+    if (meta.twitter && typeof meta.twitter === 'object') {
+        for (const [key, value] of Object.entries(meta.twitter)) {
+            tags.push(metaTag({ name: `twitter:${key}`, content: value }));
+        }
+    }
+    if (Array.isArray(meta.meta)) {
+        for (const entry of meta.meta) {
+            if (entry && typeof entry === 'object') {
+                tags.push(metaTag(entry));
+            }
+        }
+    }
+    if (Array.isArray(meta.link)) {
+        for (const entry of meta.link) {
+            if (entry && typeof entry === 'object') {
+                const parts = Object.entries(entry)
+                    .filter(([, v]) => v !== undefined && v !== null && v !== false)
+                    .map(([k, v]) => `${k}="${escapeHtml(v)}"`);
+                tags.push(`<link ${parts.join(' ')}>`);
+            }
+        }
+    }
+    return tags.join('\n    ');
+}
+
+export function injectMetaTags(html, meta) {
+    const block = buildMetaHtml(meta);
+    if (!block) {
+        return html;
+    }
+    const titleMatch = block.match(/<title>[\s\S]*?<\/title>/);
+    if (titleMatch) {
+        if (/<title>[\s\S]*?<\/title>/.test(html)) {
+            html = html.replace(/<title>[\s\S]*?<\/title>/, titleMatch[0]);
+        } else {
+            html = html.replace('</head>', `    ${titleMatch[0]}\n  </head>`);
+        }
+    }
+    const remaining = block.replace(/<title>[\s\S]*?<\/title>\s*/, '');
+    if (remaining) {
+        html = html.replace('</head>', `    ${remaining}\n  </head>`);
+    }
+    return html;
+}

package/src/client/public/index.html

@@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+  <head>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/src/command/build.js

@@ -0,0 +1,105 @@
+import {spawn} from "child_process";
+import {buildRouter}  from "../build/router.js";
+import get_config from '../build/config.js';
+import ssg from '../build/ssg.js';
+import { fileURLToPath } from 'url';
+import path from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+import fs from 'fs';
+
+const showBundleAnalysis = (projectDirectory) => {
+    const distPath = path.join(projectDirectory, 'public', 'dist');
+    
+    if (!fs.existsSync(distPath)) {
+        console.log('❌ Dist folder not found');
+        return;
+    }
+    
+    const files = fs.readdirSync(distPath)
+        .filter(file => file.endsWith('.js') && !file.endsWith('.map'))
+        .map(file => {
+            const filePath = path.join(distPath, file);
+            const stats = fs.statSync(filePath);
+            return {
+                name: file,
+                size: stats.size,
+                sizeKB: Math.round(stats.size / 1024),
+            };
+        })
+        .sort((a, b) => b.size - a.size);
+    
+    const totalSize = files.reduce((sum, file) => sum + file.size, 0);
+    const totalKB = Math.round(totalSize / 1024);
+    
+    console.log('\n📊 Bundle Analysis:');
+    console.log('┌─────────────────────────────────┬─────────┐');
+    console.log('│ File                            │ Size    │');
+    console.log('├─────────────────────────────────┼─────────┤');
+    
+    files.forEach(file => {
+        const nameField = file.name.padEnd(31);
+        const sizeField = `${file.sizeKB}KB`.padStart(7);
+        console.log(`│ ${nameField} │ ${sizeField} │`);
+    });
+    
+    console.log('├─────────────────────────────────┼─────────┤');
+    const totalField = `${totalKB}KB`.padStart(7);
+    console.log(`│ TOTAL                           │ ${totalField} │`);
+    console.log('└─────────────────────────────────┴─────────┘');
+    
+    // Performance tips
+    if (totalKB > 500) {
+        console.log('⚠️  Bundle size is large. Consider code splitting or removing unused dependencies.');
+    } else if (totalKB < 200) {
+        console.log('✅ Great bundle size! Your app will load fast.');
+    } else {
+        console.log('👍 Good bundle size for most applications.');
+    }
+};
+
+export default async (options) => {
+    let projectDirectory = process.cwd();
+    let runtime_dir = __dirname + "/..";
+    let node_modules = projectDirectory + "/node_modules";
+
+    const buildStart = performance.now();
+    await buildRouter(await get_config(projectDirectory));
+
+    const rspack = spawn(node_modules + "/.bin/rspack", [
+        "--mode=" + options.mode,
+        "--config", runtime_dir + "/../rspack.config.js",
+        "--entry", runtime_dir + "/runtime/app.jsx"
+    ]);
+
+    rspack.stdout.on('data', (data) => {
+        console.log(data.toString());
+    });
+
+    rspack.stderr.on('data', (data) => {
+        console.log(`stderr: ${data.toString()}`);
+    });
+
+    rspack.on('close', async (code) => {
+        if (code !== 0) {
+            console.log(`error: Process exited with code ${code}`);
+            return;
+        }
+
+        const totalTime = Math.round(performance.now() - buildStart);
+        console.log(`\n  Built in ${totalTime}ms`);
+
+        if (options.mode === 'production' || process.env.NODE_ENV === 'production') {
+            showBundleAnalysis(projectDirectory);
+        }
+
+        try {
+            await ssg({ mode: options.mode, forceAll: options.static });
+        } catch (err) {
+            console.error(`SSG failed: ${err.message}`);
+            process.exitCode = 1;
+        }
+    });
+};

package/src/command/create.js

@@ -0,0 +1,91 @@
+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;
+
+export default async function create(projectName) {
+  if (!projectName) {
+    console.error("Usage: aplos create <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, projectName) {
+  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, projectName);
+    } else if (entry.isFile()) {
+      copyFile(srcPath, destPath, projectName);
+    }
+  }
+}
+
+function copyFile(src, dest, projectName) {
+  if (isBinary(src)) {
+    fs.copyFileSync(src, dest);
+    return;
+  }
+
+  const content = fs.readFileSync(src, "utf8");
+  const replaced = content.replace(/\{\{NAME\}\}/g, projectName);
+  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(targetDir) {
+  const stub = path.join(targetDir, "_gitignore");
+  const real = path.join(targetDir, ".gitignore");
+  if (fs.existsSync(stub) && !fs.existsSync(real)) {
+    fs.renameSync(stub, real);
+  }
+}

package/src/command/devServer.js

@@ -0,0 +1,198 @@
+import path from "path";
+import fs from "fs";
+import { rspack } from "@rspack/core";
+import { RspackDevServer } from "@rspack/dev-server";
+import {buildRouter} from "../build/router.js";
+import get_config from "../build/config.js";
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+import net from 'net';
+import os from 'os';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const require = createRequire(import.meta.url);
+
+const getNetworkUrl = (port) => {
+    const interfaces = os.networkInterfaces();
+    for (const name of Object.keys(interfaces)) {
+        for (const iface of interfaces[name]) {
+            if (iface.family === 'IPv4' && !iface.internal) {
+                return `http://${iface.address}:${port}`;
+            }
+        }
+    }
+    return null;
+};
+
+const detectFeatures = (projectDirectory) => {
+    const features = [];
+    const hasTsConfig = fs.existsSync(path.join(projectDirectory, 'tsconfig.json'));
+    const hasPostcss = fs.existsSync(path.join(projectDirectory, 'postcss.config.js'))
+        || fs.existsSync(path.join(projectDirectory, 'postcss.config.cjs'));
+
+    if (hasTsConfig) features.push('TypeScript');
+    if (hasPostcss) features.push('PostCSS');
+    features.push('React Compiler');
+    features.push('HMR');
+
+    return features;
+};
+
+const printStartupMessage = (port, projectDirectory, readyTime) => {
+    const networkUrl = getNetworkUrl(port);
+    const features = detectFeatures(projectDirectory);
+
+    console.log();
+    console.log('  \x1b[1m\x1b[36mAPLOS\x1b[0m \x1b[2mv0.0.1\x1b[0m  \x1b[32mready in ' + readyTime + 'ms\x1b[0m');
+    console.log();
+    console.log(`  \x1b[1mLocal:\x1b[0m   http://localhost:${port}/`);
+    if (networkUrl) {
+        console.log(`  \x1b[1mNetwork:\x1b[0m ${networkUrl}/`);
+    }
+    console.log(`  \x1b[2m${features.join(' | ')}\x1b[0m`);
+    console.log();
+};
+
+// Function to check if port is available
+const isPortAvailable = (port) => {
+    return new Promise((resolve) => {
+        const server = net.createServer();
+        
+        server.listen(port, () => {
+            server.once('close', () => resolve(true));
+            server.close();
+        });
+        
+        server.on('error', () => resolve(false));
+    });
+};
+
+// Function to find next available port
+const findAvailablePort = async (startPort) => {
+    let port = startPort;
+    while (port < startPort + 100) { // Try up to 100 ports
+        if (await isPortAvailable(port)) {
+            return port;
+        }
+        port++;
+    }
+    throw new Error(`No available port found starting from ${startPort}`);
+};
+
+export default async () => {
+    const config = await get_config(process.cwd());
+    const cacheDirectory = process.cwd() + "/.aplos/cache";
+
+    // Ensure cache directory exists first
+    try {
+        if (!fs.existsSync(cacheDirectory)) {
+            fs.mkdirSync(cacheDirectory, { recursive: true });
+        }
+    } catch (err) {
+        console.error('Error creating cache directory:', err);
+    }
+
+    fs.writeFileSync(
+        cacheDirectory + "/config.js",
+        "module.exports = " + JSON.stringify(config),
+    );
+    let projectDirectory = process.cwd();
+
+    // Initial build
+    const startTime = Date.now();
+    console.log('\x1b[36m⚡ Building routes...\x1b[0m');
+    const buildStart = performance.now();
+    await buildRouter(config);
+    console.log(`\x1b[32m✓ Ready in ${Date.now() - startTime}ms\x1b[0m`);
+
+    let runtime_dir = __dirname + "/..";
+
+    const { default: rspackConfig } = await import(runtime_dir + "/../rspack.config.js");
+    rspackConfig.mode = "development";
+    rspackConfig.entry = [runtime_dir + "/runtime/app.jsx"];
+
+    const compiler = rspack(rspackConfig);
+
+    // Regenerate the router cache only when a page file is added or removed.
+    const pagesDir = path.join(projectDirectory, "src", "pages");
+    const touchesPages = (files) => {
+        if (!files) return false;
+        for (const f of files) {
+            if (f && f.startsWith(pagesDir)) return true;
+        }
+        return false;
+    };
+
+    let routerReady = Promise.resolve();
+    compiler.hooks.watchRun.tapPromise("aplos-router", async (c) => {
+        const added = c.modifiedFiles;
+        const removed = c.removedFiles;
+        if (!added && !removed) return;
+        if (!touchesPages(added) && !touchesPages(removed)) return;
+
+        const startTime = Date.now();
+        console.log(`\x1b[36m⚡ Rebuilding routes...\x1b[0m`);
+        routerReady = buildRouter(config);
+        await routerReady;
+        console.log(`\x1b[32m✓ Built in ${Date.now() - startTime}ms\x1b[0m`);
+    });
+
+    let isFirstCompilation = true;
+    compiler.hooks.done.tap('aplos-startup', () => {
+        if (isFirstCompilation) {
+            const readyTime = Math.round(performance.now() - buildStart);
+            printStartupMessage(finalPort, projectDirectory, readyTime);
+            isFirstCompilation = false;
+        }
+    });
+
+    // Determine port logic based on environment variable
+    let finalPort = config.server.port;
+    const isPortExplicitlySet = process.env.APLOS_SERVER_PORT;
+    
+    // If no explicit port set, find available port
+    if (!isPortExplicitlySet) {
+        try {
+            finalPort = await findAvailablePort(config.server.port);
+            if (finalPort !== config.server.port) {
+                console.log(`Port ${config.server.port} is busy, using port ${finalPort}`);
+            }
+        } catch (error) {
+            console.error(`Could not find available port: ${error.message}`);
+            process.exit(1);
+        }
+    }
+    
+    const devServerOptions = {
+        hot: true,
+        open: false,
+        port: finalPort,
+        historyApiFallback: true,
+        client: {
+            overlay: {
+                errors: true,
+                warnings: false,
+            },
+            logging: 'error',
+        },
+        static: [
+            { directory: path.join(projectDirectory, "public") },
+            { directory: path.join(__dirname + "/../client/", "public") },
+        ],
+    };
+    const server = new RspackDevServer(devServerOptions, compiler);
+
+    const runServer = async () => {
+        await server.start();
+    };
+
+    runServer().catch((error) => {
+        if (isPortExplicitlySet && error.code === 'EADDRINUSE') {
+            console.error(`Port ${finalPort} is already in use. Since APLOS_SERVER_PORT is set, refusing to use alternative port.`);
+        } else {
+            console.error(error);
+        }
+        process.exit(1);
+    });
+};