create-rasti 0.0.1

package/extras/rasti-icons/bin/rasti-icons.js

@@ -0,0 +1,84 @@
+#!/usr/bin/env node
+import path from 'node:path';
+import { generateIcons } from '../src/generate.js';
+import { DEFAULT_PRESET, PRESETS } from '../src/presets.js';
+
+function parseArgs(argv) {
+    const args = { preset : null, source : null, license : null, output : null };
+    for (let i = 0; i < argv.length; i++) {
+        const arg = argv[i];
+        if (arg === '--preset')       { args.preset  = argv[++i]; }
+        else if (arg === '--source')  { args.source  = argv[++i]; }
+        else if (arg === '--license') { args.license = argv[++i]; }
+        else if (arg === '--output')  { args.output  = argv[++i]; }
+    }
+    return args;
+}
+
+function showHelp() {
+    const presetList = Object.keys(PRESETS).map(k => `    ${k}`).join('\n');
+    console.log(`
+rasti-icons — Generate Rasti icon components from GitHub-hosted SVG sets
+
+Usage:
+  rasti-icons --preset <name> [--output <dir>]
+  rasti-icons --source <github-api-url> [--license <url>] --output <dir>
+
+Options:
+  --preset <name>    Built-in preset (see below)
+  --source <url>     GitHub API URL for a directory listing of SVG files
+  --license <url>    Raw URL for the license file (optional)
+  --output <dir>     Output directory (default: ./icons/<preset> or ./icons)
+
+Presets:
+${presetList}
+
+Examples:
+  rasti-icons --preset ${DEFAULT_PRESET}
+  rasti-icons --preset heroicons-outline --output ./src/icons
+  rasti-icons --preset akar-icons --output ./src/icons
+  rasti-icons --preset feathericon --output ./src/icons
+  rasti-icons --preset pixelarticons --output ./src/icons
+  rasti-icons --source https://api.github.com/repos/owner/repo/contents/svg --output ./icons
+`);
+}
+
+async function main() {
+    const argv = process.argv.slice(2);
+
+    if (argv.length === 0 || argv.includes('--help') || argv.includes('-h')) {
+        showHelp();
+        return;
+    }
+
+    const args = parseArgs(argv);
+
+    let source  = args.source;
+    let license = args.license;
+    let outputDir = args.output;
+
+    if (args.preset) {
+        const preset = PRESETS[args.preset];
+        if (!preset) {
+            console.error(`Unknown preset "${args.preset}". Valid presets: ${Object.keys(PRESETS).join(', ')}`);
+            process.exit(1);
+        }
+        source  = source  || preset.source;
+        license = license || preset.license;
+        if (!outputDir) outputDir = `./icons/${args.preset}`;
+    }
+
+    if (!source) {
+        showHelp();
+        process.exit(1);
+    }
+
+    if (!outputDir) outputDir = './icons';
+
+    const output = path.resolve(process.cwd(), outputDir);
+    console.log(`Fetching icons from ${source}...`);
+    const count = await generateIcons({ source, license, output });
+    console.log(`Done. Generated ${count} icon${count !== 1 ? 's' : ''} → ${output}`);
+}
+
+main().catch(e => { console.error(e.message); process.exit(1); });

package/extras/rasti-icons/package.json

@@ -0,0 +1,11 @@
+{
+    "name" : "rasti-icons",
+    "version" : "0.0.0",
+    "private" : true,
+    "description" : "Generic Rasti icon component generator from GitHub-hosted SVG sets",
+    "type" : "module",
+    "bin" : {
+        "rasti-icons" : "./bin/rasti-icons.js"
+    },
+    "license" : "MIT"
+}

package/extras/rasti-icons/src/generate.js

@@ -0,0 +1,119 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+/**
+ * Convert kebab-case SVG filename to PascalCase component name.
+ * @param {string} filename - e.g. 'arrow-right.svg'
+ * @returns {string} e.g. 'ArrowRight'
+ */
+function toPascalCase(filename) {
+    return filename
+        .replace('.svg', '')
+        .replace(/-(.)/g, (_, c) => c.toUpperCase())
+        .replace(/^(.)/, m => m.toUpperCase());
+}
+
+/**
+ * Extract a size value from the SVG opening tag.
+ * Tries direct attribute first, falls back to viewBox.
+ * @param {string} tag - The opening <svg ...> tag string
+ * @param {'width'|'height'} dim - Dimension to extract
+ * @returns {string} Numeric string, e.g. '24'
+ */
+function extractSize(tag, dim) {
+    // Match only real SVG width/height attributes (not stroke-width, etc.)
+    const direct = tag.match(new RegExp(`\\s${dim}="(\\d+(?:\\.\\d+)?)"`));
+    if (direct) return direct[1];
+    const vb = tag.match(/\bviewBox="[\d.]+ [\d.]+ ([\d.]+) ([\d.]+)"/);
+    if (vb) return dim === 'width' ? vb[1] : vb[2];
+    return '24';
+}
+
+/**
+ * Transform raw SVG content into a Rasti component template body.
+ * Replaces/adds class, width, height with dynamic props expressions.
+ * @param {string} svgContent - Raw SVG file content
+ * @returns {string} Indented SVG ready to embed in Component.create`...`
+ */
+function transformSvg(svgContent) {
+    const openEnd = svgContent.indexOf('>');
+    const openTag = svgContent.slice(0, openEnd + 1);
+    const rest = svgContent.slice(openEnd + 1);
+
+    const origW = extractSize(openTag, 'width');
+    const origH = extractSize(openTag, 'height');
+
+    // Build template expression strings (written as literal text to output files)
+    const classExpr = 'class="${({ props }) => props.className || \'\'}"';
+    const widthExpr = `width="\${({ props }) => props.width || '${origW}'}"`;
+    const heightExpr = `height="\${({ props }) => props.height || '${origH}'}"`;
+
+    const newTag = openTag
+        .replace(/\s+class="[^"]*"/g, '')
+        .replace(/\s+width="[^"]*"/g, '')
+        .replace(/\s+height="[^"]*"/g, '')
+        .replace('<svg', `<svg ${classExpr} ${widthExpr} ${heightExpr}`);
+
+    return (newTag + rest)
+        .replace(/\n$/, '')
+        .replace(/^ {2}/gm, '    ')
+        .replace(/^/gm, '    ');
+}
+
+/**
+ * Generate Rasti icon components from a GitHub-hosted SVG directory.
+ * @param {object} options
+ * @param {string} options.source    - GitHub API URL for directory listing
+ * @param {string} [options.license] - Raw URL for license file (optional)
+ * @param {string} options.output    - Absolute path to output directory
+ * @returns {Promise<number>} Number of icons generated
+ */
+export async function generateIcons({ source, license, output }) {
+    fs.mkdirSync(output, { recursive : true });
+
+    if (license) {
+        const licRes = await fetch(license);
+        if (!licRes.ok) throw new Error(`License fetch failed: ${licRes.status}`);
+        fs.writeFileSync(path.join(output, 'LICENSE.txt'), await licRes.text());
+    }
+
+    const listRes = await fetch(source);
+    if (!listRes.ok) throw new Error(`Source fetch failed: ${listRes.status}`);
+    const files = await listRes.json();
+
+    if (!Array.isArray(files)) {
+        throw new Error(`Unexpected response from source URL. Got: ${JSON.stringify(files).slice(0, 100)}`);
+    }
+
+    let count = 0;
+    for (const item of files) {
+        if (item.type !== 'file' || !item.name.endsWith('.svg')) continue;
+        const iconName = toPascalCase(item.name);
+        const svgRes = await fetch(item.download_url);
+        if (!svgRes.ok) throw new Error(`SVG fetch failed for ${item.name}: ${svgRes.status}`);
+        const svgContent = await svgRes.text();
+        const transformed = transformSvg(svgContent);
+        const component = [
+            `import { Component } from 'rasti';`,
+            ``,
+            `/**`,
+            ` * @typedef {Object} IconProps`,
+            ` * @property {string} [className]`,
+            ` * @property {string} [width]`,
+            ` * @property {string} [height]`,
+            ` */`,
+            ``,
+            `/** @type {typeof import('rasti').Component<IconProps>} */`,
+            `const ${iconName} = Component.create\``,
+            transformed,
+            `\`;`,
+            ``,
+            `export default ${iconName};`,
+            ``
+        ].join('\n');
+        fs.writeFileSync(path.join(output, `${iconName}.js`), component);
+        count++;
+    }
+
+    return count;
+}

package/extras/rasti-icons/src/presets.js

@@ -0,0 +1,57 @@
+export const DEFAULT_PRESET = 'heroicons-outline';
+
+export const PRESETS = {
+    'heroicons-outline' : {
+        label : 'Heroicons Outline',
+        hint : '24px, by Tailwind Labs (MIT)',
+        sourceName : 'Heroicons by Tailwind Labs',
+        licenseName : 'MIT',
+        homepage : 'https://heroicons.com',
+        source : 'https://api.github.com/repos/tailwindlabs/heroicons/contents/optimized/24/outline',
+        license : 'https://raw.githubusercontent.com/tailwindlabs/heroicons/master/LICENSE'
+    },
+    'heroicons-solid' : {
+        label : 'Heroicons Solid',
+        hint : '24px, by Tailwind Labs (MIT)',
+        sourceName : 'Heroicons by Tailwind Labs',
+        licenseName : 'MIT',
+        homepage : 'https://heroicons.com',
+        source : 'https://api.github.com/repos/tailwindlabs/heroicons/contents/optimized/24/solid',
+        license : 'https://raw.githubusercontent.com/tailwindlabs/heroicons/master/LICENSE'
+    },
+    pixelarticons : {
+        label : 'Pixelarticons',
+        hint : 'by Halfmage (MIT)',
+        sourceName : 'Pixelarticons by Halfmage',
+        licenseName : 'MIT',
+        homepage : 'https://pixelarticons.com',
+        source : 'https://api.github.com/repos/halfmage/pixelarticons/contents/svg',
+        license : 'https://raw.githubusercontent.com/halfmage/pixelarticons/master/LICENSE'
+    },
+    'akar-icons' : {
+        label : 'Akar Icons',
+        hint : '24px, by Arturo Wibawa (MIT)',
+        sourceName : 'Akar Icons by Arturo Wibawa',
+        licenseName : 'MIT',
+        homepage : 'https://akaricons.com',
+        source : 'https://api.github.com/repos/artcoholic/akar-icons/contents/src/svg',
+        license : 'https://raw.githubusercontent.com/artcoholic/akar-icons/master/LICENSE'
+    },
+    feathericon : {
+        label : 'Feathericon',
+        hint : 'by Megumi Hano (MIT)',
+        sourceName : 'Feathericon by Megumi Hano',
+        licenseName : 'MIT',
+        homepage : 'https://feathericon.github.io/feathericon/',
+        source : 'https://api.github.com/repos/feathericon/feathericon/contents/src/svg',
+        license : 'https://raw.githubusercontent.com/feathericon/feathericon/master/LICENSE'
+    }
+};
+
+export const PRESET_IDS = Object.keys(PRESETS);
+
+export const PRESET_OPTIONS = PRESET_IDS.map((value) => {
+    const { label, hint } = PRESETS[value];
+
+    return { value, label, hint };
+});

package/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "create-rasti",
+    "version": "0.0.1",
+    "description": "Create Rasti projects with Vite",
+    "type": "module",
+    "bin": {
+        "create-rasti": "./bin/create-rasti.js"
+    },
+    "files": [
+        "bin",
+        "src",
+        "templates",
+        "extras",
+        "!extras/**/node_modules"
+    ],
+    "scripts": {
+        "prepare": "npm run test",
+        "lint": "eslint src bin extras",
+        "test": "vitest run",
+        "posttest": "npm run lint",
+        "version": "node scripts/release-changelog.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/8tentaculos/create-rasti.git"
+    },
+    "homepage": "https://github.com/8tentaculos/create-rasti",
+    "bugs": {
+        "url": "https://github.com/8tentaculos/create-rasti/issues"
+    },
+    "keywords": [
+        "rasti",
+        "vite",
+        "starter",
+        "scaffolding",
+        "cli",
+        "spa",
+        "ssr"
+    ],
+    "author": "Alberto Masuelli <alberto.masuelli@gmail.com> (https://github.com/8tentaculos)",
+    "license": "MIT",
+    "dependencies": {
+        "@clack/prompts": "^0.9.1"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.34.0",
+        "eslint": "^9.34.0",
+        "globals": "^16.3.0",
+        "vitest": "^3.0.0"
+    },
+    "engines": {
+        "node": ">=22"
+    }
+}

package/src/apply/base.js

@@ -0,0 +1,29 @@
+import path from 'node:path';
+import { copyTemplateDir, copyTemplateFile, copyStyledTemplate, copyExtraFile } from '../utils/template.js';
+import { updatePackageName } from '../utils/pkg.js';
+import { getBaseContext } from './description.js';
+
+/**
+ * Apply the SPA base template.
+ * @param {object} ctx - Context object with plan and targetDir
+ */
+export async function applyBase(ctx) {
+    const { plan, targetDir } = ctx;
+    const routeAbout = plan.base === 'static' ? '/about/' : '/about';
+    const context = {
+        ...getBaseContext(plan),
+        CSSFUN : plan.features.cssfun ? 'true' : '',
+        TAILWIND : plan.features.tailwind ? 'true' : '',
+        ROUTER : plan.features.router ? 'true' : '',
+        ROUTE_ABOUT : routeAbout
+    };
+
+    await copyTemplateDir('spa', targetDir, context);
+    await copyStyledTemplate('_base/App.js', path.join(targetDir, 'src', 'App.js'), context, plan);
+    await copyStyledTemplate('_base/components/Button.js', path.join(targetDir, 'src', 'components', 'Button.js'), context, plan);
+    await copyStyledTemplate('_base/components/Home.js', path.join(targetDir, 'src', 'components', 'Home.js'), context, plan);
+    await copyStyledTemplate('_base/components/Header.js', path.join(targetDir, 'src', 'components', 'Header.js'), context, plan);
+    await copyTemplateFile('_base/style.css', path.join(targetDir, 'src', 'style.css'), context);
+    await copyExtraFile('cn/src/index.js', path.join(targetDir, 'src', 'lib', 'cn.js'));
+    await updatePackageName(targetDir, plan.name);
+}

package/src/apply/cssfun.js

@@ -0,0 +1,38 @@
+import path from 'node:path';
+import fs from 'node:fs/promises';
+import { copyTemplateFile } from '../utils/template.js';
+import { addDependencies } from '../utils/pkg.js';
+import { getBaseContext } from './description.js';
+import { VERSIONS } from '../versions.js';
+
+/**
+ * Apply cssfun to the project.
+ * @param {object} ctx - Context object with plan and targetDir
+ */
+export async function applyCssfun(ctx) {
+    const { plan, targetDir } = ctx;
+    const isSsr = plan.base === 'ssr' || plan.base === 'static';
+    const routeAbout = plan.base === 'static' ? '/about/' : '/about';
+    const context = {
+        ...getBaseContext(plan),
+        ROUTER : plan.features.router ? 'true' : '',
+        ROUTE_ABOUT : routeAbout
+    };
+
+    await addDependencies(targetDir, {
+        dependencies : {
+            'cssfun' : VERSIONS.cssfun
+        }
+    });
+
+    // App and components (Button, Home, Header) are resolved by copyStyledTemplate
+    // in the base appliers, which pick the *-cssfun.js variants when cssfun is enabled.
+    await copyTemplateFile('_features/cssfun/theme.js', path.join(targetDir, 'src', 'theme.js'), {});
+
+    // cssfun handles all styling — drop the base style.css.
+    await fs.rm(path.join(targetDir, 'src', 'style.css'), { force : true });
+
+    if (isSsr) {
+        await copyTemplateFile('_features/cssfun/index.html', path.join(targetDir, 'index.html'), context);
+    }
+}

package/src/apply/description.js

@@ -0,0 +1,56 @@
+import { VERSIONS } from '../versions.js';
+
+const CDN_BASE = 'https://cdn.jsdelivr.net/gh/8tentaculos/rasti@v' + VERSIONS.rasti.replace(/^[\^~]/, '') + '/docs';
+
+/** Logo and favicon URLs served from the Rasti CDN. */
+const LOGO_SRC = CDN_BASE + '/logo-dark.svg';
+const LOGO_LIGHT_SRC = CDN_BASE + '/logo.svg';
+const FAVICON_SRC = CDN_BASE + '/favicon.svg';
+
+/**
+ * Shared placeholder context for template copying.
+ * @param {object} plan - Project plan
+ * @returns {object} Placeholder map for copyTemplateFile/copyTemplateDir
+ */
+export function getBaseContext(plan) {
+    return {
+        NAME : plan.name,
+        DESCRIPTION : getDescription(plan),
+        LOGO_SRC,
+        LOGO_LIGHT_SRC,
+        FAVICON_SRC,
+        RASTI_VERSION : VERSIONS.rasti,
+        VITE_VERSION : VERSIONS.vite,
+        EXPRESS_VERSION : VERSIONS.express,
+        COMPRESSION_VERSION : VERSIONS.compression,
+        SIRV_VERSION : VERSIONS.sirv,
+        CROSS_ENV_VERSION : VERSIONS.crossEnv
+    };
+}
+
+/**
+ * Build the {{DESCRIPTION}} HTML for a given plan.
+ * Centralizes the description logic used by base, ssr, and router appliers.
+ * @param {object} plan - Project plan
+ * @returns {string} HTML description string
+ */
+export function getDescription(plan) {
+    const isSsr = plan.base === 'ssr' || plan.base === 'static';
+    const parts = ['<a href="https://rasti.js.org" target="_blank">Rasti</a>', '<a href="https://vite.dev" target="_blank">Vite</a>'];
+
+    if (isSsr) parts.push('<a href="https://expressjs.com" target="_blank">Express</a>');
+
+    let styling = '';
+    if (plan.features.tailwind) {
+        styling = ', styled with <a href="https://tailwindcss.com" target="_blank">Tailwind CSS</a>';
+    } else if (plan.features.cssfun) {
+        styling = ', styled with <a href="https://cssfun.js.org" target="_blank">CSSFUN</a> (CSS-in-JS with light and dark themes)';
+    }
+
+    if (plan.base === 'static') {
+        return `Pre-rendered static site with ${parts.join(' + ')}${styling}. Development uses SSR; run <code>npm run build:static</code> to export configured URLs to static HTML under <code>dist/static</code>.`;
+    }
+
+    const prefix = isSsr ? 'Server-side rendered app with' : 'Single page app powered by';
+    return `${prefix} ${parts.join(' + ')}${styling}.`;
+}

package/src/apply/featuresInclude.js

@@ -0,0 +1,75 @@
+import path from 'node:path';
+import fs from 'node:fs/promises';
+import { PRESETS } from '../../extras/rasti-icons/src/presets.js';
+
+const CREATE_RASTI_REPO = 'https://github.com/8tentaculos/create-rasti/tree/master';
+
+/**
+ * Build the HTML for the features info block from plan.
+ * @param {object} plan - Plan with features and base
+ * @returns {string} HTML fragment for the info block
+ */
+function buildFeaturesHtml(plan) {
+    const items = [];
+
+    if (plan.features.router) {
+        items.push(`<p>Router: <a href="${CREATE_RASTI_REPO}/extras/micro-router" target="_blank" rel="noopener">micro-router</a></p>`);
+    }
+
+    if (plan.features.icons) {
+        const iconSets = plan.features.icons
+            .map((presetId) => {
+                const preset = PRESETS[presetId];
+                return `<a href="${preset.homepage}" target="_blank" rel="noopener">${preset.label}</a>`;
+            })
+            .join(', ');
+
+        items.push(`<p>Icons: <a href="${CREATE_RASTI_REPO}/extras/rasti-icons" target="_blank" rel="noopener">rasti-icons</a> (${iconSets})</p>`);
+    }
+
+    if (items.length === 0) {
+        items.push('<p>No optional extras included.</p>');
+    }
+
+    return items.join('\n');
+}
+
+/**
+ * Replace {{FEATURES_INCLUDE}} in a file with the features list HTML.
+ * @param {string} filePath - Path to the file
+ * @param {string} html - Features list HTML
+ */
+async function replaceInFile(filePath, html) {
+    try {
+        let content = await fs.readFile(filePath, 'utf-8');
+        if (!content.includes('{{FEATURES_INCLUDE}}')) return;
+        content = content.replaceAll('{{FEATURES_INCLUDE}}', html);
+        await fs.writeFile(filePath, content, 'utf-8');
+    } catch {
+        // file may not exist
+    }
+}
+
+/**
+ * Replace {{FEATURES_INCLUDE}} in App.js and in all pages (when router).
+ * @param {object} ctx - Context with plan, targetDir
+ */
+export async function applyFeaturesInclude(ctx) {
+    const { plan, targetDir } = ctx;
+    const html = buildFeaturesHtml(plan);
+
+    const homePath = path.join(targetDir, 'src', 'components', 'Home.js');
+    await replaceInFile(homePath, html);
+
+    const pagesDir = path.join(targetDir, 'src', 'pages');
+    try {
+        const entries = await fs.readdir(pagesDir, { withFileTypes : true });
+        for (const e of entries) {
+            if (e.isFile() && (e.name.endsWith('.js') || e.name.endsWith('.ts'))) {
+                await replaceInFile(path.join(pagesDir, e.name), html);
+            }
+        }
+    } catch {
+        // no pages dir (no router)
+    }
+}

package/src/apply/icons.js

@@ -0,0 +1,21 @@
+import path from 'node:path';
+import { generateIcons } from '../../extras/rasti-icons/src/generate.js';
+import { PRESETS } from '../../extras/rasti-icons/src/presets.js';
+
+/**
+ * Add icons: fetch SVG components from the selected icon set(s) and write under src/icons/.
+ * One set → flat `src/icons/`; multiple sets → `src/icons/<preset>/` each.
+ * @param {object} ctx - Context with plan, targetDir
+ */
+export async function applyIcons(ctx) {
+    const { plan, targetDir } = ctx;
+    const sets = plan.features.icons;
+    const baseDir = path.join(targetDir, 'src', 'icons');
+    const useSubdirs = sets.length > 1;
+
+    for (const key of sets) {
+        const preset = PRESETS[key];
+        const output = useSubdirs ? path.join(baseDir, key) : baseDir;
+        await generateIcons({ source : preset.source, license : preset.license, output });
+    }
+}