create-rasti 0.0.1

package/templates/_extras/router/components/About-cssfun.js

@@ -0,0 +1,43 @@
+import { Component } from 'rasti';
+import { css } from 'cssfun';
+
+const { classes } = css({
+    root : {
+        width : '100%',
+        display : 'flex',
+        justifyContent : 'center'
+    },
+    info : {
+        width : 'min(100%, 720px)',
+        padding : 'clamp(20px, 4vw, 30px)',
+        background : 'var(--fun-cardBg)',
+        borderRadius : '24px',
+        border : '1px solid var(--fun-cardBorder)',
+        boxShadow : 'var(--fun-cardInset), var(--fun-cardShadow)',
+        backdropFilter : 'blur(18px)'
+    },
+    infoStack : {
+        display : 'grid',
+        gap : '16px'
+    },
+    infoDescription : {
+        margin : 0,
+        lineHeight : '1.7',
+        fontSize : '15px'
+    }
+});
+
+/**
+ * About page (cssfun).
+ */
+const About = Component.create`
+    <div class="${classes.root}">
+        <div class="${classes.info}">
+            <div class="${classes.infoStack}">
+                <p class="${classes.infoDescription}">This is the About page. Add your content here.</p>
+            </div>
+        </div>
+    </div>
+`;
+
+export default About;

package/templates/_extras/router/components/About-tailwind.js

@@ -0,0 +1,14 @@
+import { Component } from 'rasti';
+
+/**
+ * About page.
+ */
+const About = Component.create`
+    <div class="flex w-full justify-center">
+        <div class="w-full max-w-[720px] rounded-3xl border border-white/12 bg-linear-to-b from-[rgba(20,24,28,0.92)] to-[rgba(10,10,10,0.82)] p-5 md:p-[30px] shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_12px_40px_rgba(0,0,0,0.2)] backdrop-blur-[18px]">
+            <p class="m-0 text-[15px] leading-[1.7] text-white/88">This is the About page. Add your content here.</p>
+        </div>
+    </div>
+`;
+
+export default About;

package/templates/_extras/router/components/About.js

@@ -0,0 +1,16 @@
+import { Component } from 'rasti';
+
+/**
+ * About page.
+ */
+const About = Component.create`
+    <div class="page">
+        <div class="info">
+            <div class="info-stack">
+                <p class="info-description">This is the About page. Add your content here.</p>
+            </div>
+        </div>
+    </div>
+`;
+
+export default About;

package/templates/_extras/router/router-setup.js

@@ -0,0 +1,60 @@
+import createRouter from './lib/router.js';
+
+const DEFAULT_TITLE = '{{NAME}}';
+
+/** Maps route paths to document titles. */
+const PAGE_TITLES = {
+    '/' : 'Home | {{NAME}}',
+    '/about' : 'About | {{NAME}}'
+};
+
+/** Normalize path for lookup (strip trailing slash; '' -> '/'). */
+function normalizePath(p) {
+    return (p || '/').replace(/\/$/, '') || '/';
+}
+
+/**
+ * Get document title for a route path.
+ * @param {string} path - Route path (e.g. '/', '/about', '/about/')
+ * @returns {string} Page title
+ */
+export function getTitleForPath(path) {
+    return PAGE_TITLES[normalizePath(path)] ?? DEFAULT_TITLE;
+}
+
+/**
+ * Get document title for a request URL (for SSR).
+ * @param {string} url - Request URL
+ * @returns {string} Page title
+ */
+export function getTitleForUrl(url) {
+    const pathname = typeof url === 'string' ? url.replace(/\?.*$/, '').replace(/^https?:\/\/[^/]+/, '') || '/' : '/';
+    const path = pathname === '' ? '/' : pathname;
+    return getTitleForPath(path);
+}
+
+/**
+ * Create router bound to model (sets model.location on navigate).
+ * Updates document.title on client when route changes.
+ * @param {object} model - Model with location
+ * @returns {object} Router with navigate, delegateNavigation, bindHistory, createUrl
+ */
+export function createAppRouter(model) {
+    const routes = [
+        {
+            path : '/',
+            action : (location) => {
+                model.location = location;
+                if (typeof document !== 'undefined') document.title = getTitleForPath(location.path);
+            }
+        },
+        {
+            path : '{{ROUTE_ABOUT}}',
+            action : (location) => {
+                model.location = location;
+                if (typeof document !== 'undefined') document.title = getTitleForPath(location.path);
+            }
+        }
+    ];
+    return createRouter(routes, { baseUrl : '' });
+}

package/templates/_features/cssfun/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="{{FAVICON_SRC}}" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{{NAME}}</title>
+        <!--app-head-->
+    </head>
+    <body>
+        <div id="app"><!--app-html--></div>
+        <script type="module" src="/src/entry-client.js"></script>
+    </body>
+</html>

package/templates/_features/cssfun/theme.js

@@ -0,0 +1,60 @@
+import { createTheme } from 'cssfun';
+
+/**
+ * Application color theme with light and dark variants.
+ * CSS custom properties are scoped under the `--fun-*` prefix (e.g. `--fun-bg`, `--fun-text`).
+ * The active scheme is controlled by the `data-color-scheme` attribute on `<html>`;
+ * it defaults to the system preference and can be toggled at runtime.
+ */
+export const theme = createTheme({
+    light : {
+        bg : '#f5f5f5',
+        text : '#1a1a1a',
+        accent : '#0d9488',
+        link : '#0d9488',
+        linkHover : '#14b8a6',
+        cardBg : 'linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.72) 100%)',
+        cardBorder : 'rgba(15, 23, 42, 0.1)',
+        cardShadow : '0 8px 32px rgba(15, 23, 42, 0.08)',
+        cardInset : 'inset 0 1px 0 rgba(255, 255, 255, 0.45)',
+        metaBg : 'rgba(15, 23, 42, 0.04)',
+        metaBorder : 'rgba(15, 23, 42, 0.06)',
+        buttonBg : 'linear-gradient(180deg, rgba(13, 148, 136, 0.18) 0%, rgba(255, 255, 255, 0.92) 100%)',
+        buttonBorder : 'rgba(15, 23, 42, 0.1)',
+        buttonHoverBg : 'linear-gradient(180deg, rgba(13, 148, 136, 0.26) 0%, rgba(255, 255, 255, 0.96) 100%)',
+        buttonHoverBorder : 'rgba(13, 148, 136, 0.4)',
+        buttonShadow : '0 4px 16px rgba(15, 23, 42, 0.06)',
+        buttonHoverShadow : '0 4px 16px rgba(15, 23, 42, 0.1)',
+        codeBg : 'rgba(15, 23, 42, 0.05)',
+        codeBorder : 'rgba(15, 23, 42, 0.1)',
+        mutedText : 'rgba(15, 23, 42, 0.56)',
+        showWhenLight : '',
+        showWhenDark : 'none'
+    },
+    dark : {
+        bg : '#0a0a0a',
+        text : '#ffffff',
+        accent : '#5ee9df',
+        link : '#5ee9df',
+        linkHover : '#93fdf5',
+        cardBg : 'linear-gradient(180deg, rgba(20, 24, 28, 0.92) 0%, rgba(10, 10, 10, 0.82) 100%)',
+        cardBorder : 'rgba(255, 255, 255, 0.1)',
+        cardShadow : '0 12px 40px rgba(0, 0, 0, 0.2)',
+        cardInset : 'inset 0 1px 0 rgba(255, 255, 255, 0.06)',
+        metaBg : 'rgba(255, 255, 255, 0.04)',
+        metaBorder : 'rgba(255, 255, 255, 0.06)',
+        buttonBg : 'linear-gradient(180deg, rgba(94, 233, 223, 0.2) 0%, rgba(255, 255, 255, 0.06) 100%)',
+        buttonBorder : 'rgba(255, 255, 255, 0.12)',
+        buttonHoverBg : 'linear-gradient(180deg, rgba(94, 233, 223, 0.28) 0%, rgba(255, 255, 255, 0.1) 100%)',
+        buttonHoverBorder : 'rgba(94, 233, 223, 0.4)',
+        buttonShadow : '0 6px 20px rgba(0, 0, 0, 0.16)',
+        buttonHoverShadow : '0 6px 20px rgba(0, 0, 0, 0.2)',
+        codeBg : 'rgba(255, 255, 255, 0.08)',
+        codeBorder : 'rgba(255, 255, 255, 0.1)',
+        mutedText : 'rgba(255, 255, 255, 0.56)',
+        showWhenLight : 'none',
+        showWhenDark : ''
+    }
+});
+
+export default theme;

package/templates/_features/tailwind/style.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+@theme {
+    --color-app-link: #5ee9df;
+    --color-app-link-hover: #93fdf5;
+}
+
+body {
+    background: #0a0a0a;
+    color: #ffffff;
+    margin: 0;
+    padding: 0;
+}
+
+a,
+a[data-router] {
+    color: var(--color-app-link);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+a:hover,
+a[data-router]:hover {
+    color: var(--color-app-link-hover);
+    text-decoration: underline;
+}

package/templates/_features/tailwind/vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+    plugins : [
+        tailwindcss()
+    ]
+});

package/templates/spa/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="{{FAVICON_SRC}}" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{{NAME}}</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.js"></script>
+    </body>
+</html>
+

package/templates/spa/package.json

@@ -0,0 +1,17 @@
+{
+    "name" : "rasti-app",
+    "private" : true,
+    "version" : "0.0.0",
+    "type" : "module",
+    "scripts" : {
+        "dev" : "vite",
+        "build" : "vite build",
+        "preview" : "vite preview"
+    },
+    "dependencies" : {
+        "rasti" : "{{RASTI_VERSION}}"
+    },
+    "devDependencies" : {
+        "vite" : "{{VITE_VERSION}}"
+    }
+}

package/templates/spa/src/main.js

@@ -0,0 +1,15 @@
+import App from './App.js';
+{{#if CSSFUN}}
+import { theme } from './theme.js';
+
+document.body.classList.add(theme.classes.root);
+{{#else}}
+import './style.css';
+{{#endif}}
+
+{{#if ROUTER}}
+const options = { url : window.location.pathname + window.location.search };
+App.mount(options, document.querySelector('#app'));
+{{#else}}
+App.mount({}, document.querySelector('#app'));
+{{#endif}}

package/templates/spa/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+    // https://vite.dev/config/
+});
+

package/templates/ssr/app.js

@@ -0,0 +1,71 @@
+import fs from 'node:fs/promises';
+import express from 'express';
+
+const isProduction = process.env.NODE_ENV === 'production';
+const base = process.env.BASE || '/';
+
+const templateHtml = isProduction
+    ? await fs.readFile('./dist/client/index.html', 'utf-8')
+    : '';
+
+const app = express();
+
+/** @type {object|undefined} Vite dev server instance */
+let vite;
+if (!isProduction) {
+    const { createServer } = await import('vite');
+    vite = await createServer({
+        server : { middlewareMode : true },
+        appType : 'custom',
+        base
+    });
+    app.use(vite.middlewares);
+} else {
+    const compression = (await import('compression')).default;
+    const sirv = (await import('sirv')).default;
+    app.use(compression());
+    app.use(base, sirv('./dist/client', { extensions : [] }));
+}
+
+app.use('*all', async (req, res) => {
+    try {
+        const url = '/' + req.originalUrl.replace(base, '');
+
+        /** @type {string} */
+        let template;
+        /** @type {Function} Server render function */
+        let render;
+        if (!isProduction) {
+            template = await fs.readFile('./index.html', 'utf-8');
+            template = await vite.transformIndexHtml(url, template);
+            render = (await vite.ssrLoadModule('/src/entry-server.js')).render;
+        } else {
+            template = templateHtml;
+            render = (await import('./dist/server/entry-server.js')).render;
+        }
+
+        const rendered = await render(url);
+
+        let html = template
+            .replace('<!--app-head-->', rendered.head ?? '')
+            .replace('<!--app-html-->', rendered.html ?? '');
+
+        if (rendered.bodyClassName) {
+            html = html.replace('<body>', '<body class="' + rendered.bodyClassName + '">');
+        }
+        if (rendered.dataColorScheme) {
+            html = html.replace('<html', '<html data-color-scheme="' + rendered.dataColorScheme + '"');
+        }
+        if (rendered.title) {
+            html = html.replace(/<title>[\s\S]*?<\/title>/, '<title>' + rendered.title + '</title>');
+        }
+
+        res.status(200).set({ 'Content-Type' : 'text/html' }).send(html);
+    } catch (e) {
+        vite?.ssrFixStacktrace(e);
+        console.log(e.stack);
+        res.status(500).end(e.stack);
+    }
+});
+
+export default app;

package/templates/ssr/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="{{FAVICON_SRC}}" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{{NAME}}</title>
+        <link rel="stylesheet" href="/src/style.css" />
+        <!--app-head-->
+    </head>
+    <body>
+        <div id="app"><!--app-html--></div>
+        <script type="module" src="/src/entry-client.js"></script>
+    </body>
+</html>
+

package/templates/ssr/package.json

@@ -0,0 +1,23 @@
+{
+    "name" : "rasti-ssr-app",
+    "private" : true,
+    "version" : "0.0.0",
+    "type" : "module",
+    "scripts" : {
+        "dev" : "node server",
+        "build" : "npm run build:client && npm run build:server",
+        "build:client" : "vite build --outDir dist/client",
+        "build:server" : "vite build --ssr src/entry-server.js --outDir dist/server",
+        "preview" : "cross-env NODE_ENV=production node server"
+    },
+    "dependencies" : {
+        "compression" : "{{COMPRESSION_VERSION}}",
+        "express" : "{{EXPRESS_VERSION}}",
+        "rasti" : "{{RASTI_VERSION}}",
+        "sirv" : "{{SIRV_VERSION}}"
+    },
+    "devDependencies" : {
+        "cross-env" : "{{CROSS_ENV_VERSION}}",
+        "vite" : "{{VITE_VERSION}}"
+    }
+}

package/templates/ssr/server.js

@@ -0,0 +1,7 @@
+import app from './app.js';
+
+const port = process.env.PORT || 5173;
+
+app.listen(port, () => {
+    console.log(`Server started at http://localhost:${port}`);
+});

package/templates/ssr/src/entry-client.js

@@ -0,0 +1,15 @@
+import App from './App.js';
+{{#if CSSFUN}}
+import { theme } from './theme.js';
+
+document.body.classList.add(theme.classes.root);
+{{#else}}
+import './style.css';
+{{#endif}}
+
+// The third argument `true` enables hydration of server-rendered HTML.
+{{#if ROUTER}}
+App.mount(window.__APP_OPTIONS__, document.querySelector('#app'), true);
+{{#else}}
+App.mount({}, document.querySelector('#app'), true);
+{{#endif}}

package/templates/ssr/src/entry-server.js

@@ -0,0 +1,49 @@
+import { Component } from 'rasti';
+import App from './App.js';
+{{#if ROUTER}}
+import { getTitleForUrl } from './router-setup.js';
+{{#endif}}
+{{#if CSSFUN}}
+import { theme } from './theme.js';
+import { StyleSheet } from 'cssfun';
+{{#endif}}
+
+{{#if ROUTER}}
+/**
+ * SSR render: pass url so App onCreate runs router.navigate; inject __APP_OPTIONS__ and page title for client hydrate.
+ * @param {string} url - Request URL
+ * @returns {{ html: string, head?: string, bodyClassName?: string, title?: string }}
+ */
+export function render(url) {
+    Component.resetUid();
+    const options = { url };
+    const app = App.mount(options);
+    const html = app.toString();
+    const title = getTitleForUrl(url);
+{{#if CSSFUN}}
+    const styles = StyleSheet.toString();
+    const script = `<script>window.__APP_OPTIONS__=${JSON.stringify(options)}</script>`;
+    return { html, head : styles + script, title, bodyClassName : theme.classes.root };
+{{#else}}
+    const script = `<script>window.__APP_OPTIONS__=${JSON.stringify(options)}</script>`;
+    return { html, head : script, title };
+{{#endif}}
+}
+{{#else}}
+/**
+ * Server-side render function.
+ * Returns HTML string to be injected into the template.
+ * @param {string} _url - Request URL
+ * @returns {object} Rendered content { html: string, head?: string }
+ */
+export function render(_url) {
+    Component.resetUid();
+    const html = App.mount({}).toString();
+{{#if CSSFUN}}
+    const styles = StyleSheet.toString();
+    return { html, head : styles, bodyClassName : theme.classes.root };
+{{#else}}
+    return { html };
+{{#endif}}
+}
+{{#endif}}

package/templates/ssr/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+    // https://vite.dev/config/
+});
+

package/templates/static/scripts/build-static.js

@@ -0,0 +1,161 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, '..');
+const distStatic = path.join(projectRoot, 'dist', 'static');
+const distClient = path.join(projectRoot, 'dist', 'client');
+const port = Number(process.env.PORT) || 37521;
+
+process.env.NODE_ENV = 'production';
+
+async function waitForServer(baseUrl) {
+    for (let i = 0; i < 30; i++) {
+        try {
+            const res = await fetch(baseUrl);
+            if (res.ok) return true;
+        } catch {
+            // keep waiting
+        }
+        await new Promise((r) => setTimeout(r, 200));
+    }
+    return false;
+}
+
+function urlToFilePath(fullUrl) {
+    const pathname = fullUrl.replace(/\?.*$/, '').replace(/^https?:\/\/[^/]+/, '') || '/';
+    const clean = pathname.replace(/^\//, '').replace(/\/$/, '') || 'index';
+    return clean === 'index' ? 'index.html' : path.join(clean, 'index.html');
+}
+
+/**
+ * Normalize a route path for fetching (trailing slash except root).
+ * @param {string} s
+ * @returns {string}
+ */
+function normalizeRoutePath(s) {
+    if (s === '/' || s === '') return '/';
+    return s.endsWith('/') ? s : `${s}/`;
+}
+
+/**
+ * Ensure output path stays under dist/static (no path traversal).
+ * @param {string} distRoot
+ * @param {string} rel - posix-style relative path (e.g. 404.html, nested/x.html)
+ */
+function assertSafeOutput(distRoot, rel) {
+    const normalized = path.normalize(rel.replace(/\//g, path.sep));
+    if (path.isAbsolute(normalized) || normalized.startsWith('..' + path.sep) || normalized === '..') {
+        throw new Error(`Invalid output (must be relative, no ".."): ${rel}`);
+    }
+    const resolved = path.resolve(distRoot, normalized);
+    const relToRoot = path.relative(distRoot, resolved);
+    if (relToRoot.startsWith('..') || path.isAbsolute(relToRoot)) {
+        throw new Error(`Invalid output path: ${rel}`);
+    }
+}
+
+/**
+ * @param {string | { route: string, output: string }} item
+ * @param {string} baseUrl
+ * @returns {{ fetchPath: string, fullUrl: string, outRelative: string }}
+ */
+function resolveConfigEntry(item, baseUrl) {
+    if (typeof item === 'string') {
+        const fetchPath = normalizeRoutePath(item);
+        const fullUrl = fetchPath === '/' ? `${baseUrl}/` : `${baseUrl}${fetchPath}`;
+        const outRelative = urlToFilePath(fullUrl);
+        return { fetchPath, fullUrl, outRelative };
+    }
+    if (item && typeof item === 'object' && typeof item.route === 'string' && typeof item.output === 'string') {
+        const fetchPath = normalizeRoutePath(item.route);
+        const fullUrl = fetchPath === '/' ? `${baseUrl}/` : `${baseUrl}${fetchPath}`;
+        const outRelative = item.output.replace(/\\/g, '/');
+        return { fetchPath, fullUrl, outRelative };
+    }
+    throw new Error(
+        'Each static.config.js entry must be a string route or { route: string, output: string }.'
+    );
+}
+
+async function main() {
+    const configPath = path.join(projectRoot, 'static.config.js');
+    let entries;
+    try {
+        const { default: config } = await import(configPath);
+        entries = Array.isArray(config) ? config : ['/'];
+    } catch (e) {
+        console.error(
+            'Missing or invalid static.config.js. Export an array of routes (strings) and/or { route, output } objects.'
+        );
+        process.exit(1);
+    }
+
+    const base = process.env.BASE || '/';
+    const baseUrl = `http://localhost:${port}${base.replace(/\/$/, '') || ''}`;
+
+    await fs.rm(distStatic, { recursive : true }).catch(() => {});
+    await fs.mkdir(distStatic, { recursive : true });
+    await fs.cp(distClient, distStatic, { recursive : true });
+
+    // Ensure public dir contents are at the root of dist/static (Vite already copies them to dist/client, but we merge again so it works even with custom publicDir)
+    const publicDir = path.join(projectRoot, 'public');
+    try {
+        const publicEntries = await fs.readdir(publicDir, { withFileTypes : true });
+        for (const e of publicEntries) {
+            const src = path.join(publicDir, e.name);
+            const dest = path.join(distStatic, e.name);
+            if (e.isDirectory()) {
+                await fs.cp(src, dest, { recursive : true });
+            } else {
+                await fs.copyFile(src, dest);
+            }
+        }
+    } catch {
+        // no public dir or empty
+    }
+
+    const appPath = path.join(projectRoot, 'app.js');
+    const { default: app } = await import(pathToFileURL(appPath).href);
+    const server = app.listen(port);
+
+    const ready = await waitForServer(baseUrl + '/');
+    if (!ready) {
+        server.close();
+        console.error('Server did not start in time.');
+        process.exit(1);
+    }
+
+    let resolved;
+    try {
+        resolved = entries.map((item) => resolveConfigEntry(item, baseUrl));
+    } catch (err) {
+        server.close();
+        console.error(err.message || err);
+        process.exit(1);
+    }
+
+    for (const { fetchPath, fullUrl, outRelative } of resolved) {
+        assertSafeOutput(distStatic, outRelative);
+        const res = await fetch(fullUrl);
+        if (!res.ok) {
+            server.close();
+            console.error(`Failed to fetch ${fullUrl}: ${res.status}`);
+            process.exit(1);
+        }
+        const html = await res.text();
+        const filePath = path.join(distStatic, outRelative);
+        await fs.mkdir(path.dirname(filePath), { recursive : true });
+        await fs.writeFile(filePath, html, 'utf-8');
+        console.log(`  ${fetchPath} -> ${outRelative}`);
+    }
+
+    server.close();
+    console.log('Static build done.');
+}
+
+main().catch((e) => {
+    console.error(e);
+    process.exit(1);
+});