create-rasti 0.0.1

package/templates/_base/App-tailwind.js

@@ -0,0 +1,58 @@
+import { Component, Model } from 'rasti';
+import Header from './components/Header.js';
+import Home from './components/Home.js';
+{{#if ROUTER}}
+import About from './components/About.js';
+import { createAppRouter } from './router-setup.js';
+{{#endif}}
+
+/**
+ * @typedef {Object} AppState
+ * @property {number} count
+{{#if ROUTER}}
+ * @property {import('./router-setup.js').Location | null} location
+{{#endif}}
+ */
+
+/** Root application component.
+ * @type {typeof import('rasti').Component<{}, AppState>}
+ */
+const App = Component.create`
+    <div class="font-sans flex min-h-dvh flex-col items-center gap-6 md:gap-10 max-w-[1000px] mx-auto p-5 md:p-12 box-border text-white">
+        <${Header} />
+{{#if ROUTER}}
+        ${({ state, partial }) => state.location?.test('/') ?
+            partial`<${Home} count="${({ state }) => state.count}" handleIncrement="${({ state }) => () => { state.count++; }}" />` :
+            partial`<${About} />`}
+{{#else}}
+        <${Home} count="${({ state }) => state.count}" handleIncrement="${({ state }) => () => { state.count++; }}" />
+{{#endif}}
+    </div>
+{{#if ROUTER}}
+`.extend({
+    /**
+     * @param {Object} [options]
+     * @param {string} [options.url] - Initial URL for server-side routing.
+     */
+    onCreate(options = {}) {
+        this.state = new Model({ location : null, count : 0 });
+        this.router = createAppRouter(this.state);
+        const url = options.url ?? (typeof window !== 'undefined' ? window.location.pathname + window.location.search : '/');
+        this.router.navigate(url, { addToHistory : false });
+    },
+    onHydrate() {
+        this.destroyQueue.push(
+            this.router.delegateNavigation(this.el),
+            this.router.bindHistory()
+        );
+    }
+});
+{{#else}}
+`.extend({
+    onCreate() {
+        this.state = new Model({ count : 0 });
+    }
+});
+{{#endif}}
+
+export default App;

package/templates/_base/App.js

@@ -0,0 +1,58 @@
+import { Component, Model } from 'rasti';
+import Header from './components/Header.js';
+import Home from './components/Home.js';
+{{#if ROUTER}}
+import About from './components/About.js';
+import { createAppRouter } from './router-setup.js';
+{{#endif}}
+
+/**
+ * @typedef {Object} AppState
+ * @property {number} count
+{{#if ROUTER}}
+ * @property {import('./router-setup.js').Location | null} location
+{{#endif}}
+ */
+
+/** Root application component.
+ * @type {typeof import('rasti').Component<{}, AppState>}
+ */
+const App = Component.create`
+    <div class="app">
+        <${Header} />
+{{#if ROUTER}}
+        ${({ state, partial }) => state.location?.test('/') ?
+            partial`<${Home} count="${({ state }) => state.count}" handleIncrement="${({ state }) => () => { state.count++; }}" />` :
+            partial`<${About} />`}
+{{#else}}
+        <${Home} count="${({ state }) => state.count}" handleIncrement="${({ state }) => () => { state.count++; }}" />
+{{#endif}}
+    </div>
+{{#if ROUTER}}
+`.extend({
+    /**
+     * @param {Object} [options]
+     * @param {string} [options.url] - Initial URL for server-side routing.
+     */
+    onCreate(options = {}) {
+        this.state = new Model({ location : null, count : 0 });
+        this.router = createAppRouter(this.state);
+        const url = options.url ?? (typeof window !== 'undefined' ? window.location.pathname + window.location.search : '/');
+        this.router.navigate(url, { addToHistory : false });
+    },
+    onHydrate() {
+        this.destroyQueue.push(
+            this.router.delegateNavigation(this.el),
+            this.router.bindHistory()
+        );
+    }
+});
+{{#else}}
+`.extend({
+    onCreate() {
+        this.state = new Model({ count : 0 });
+    }
+});
+{{#endif}}
+
+export default App;

package/templates/_base/components/Button-cssfun.js

@@ -0,0 +1,51 @@
+import { Component } from 'rasti';
+import { css } from 'cssfun';
+import cn from '../lib/cn.js';
+
+const { classes } = css({
+    root : {
+        display : 'inline-flex',
+        alignItems : 'center',
+        justifyContent : 'center',
+        minHeight : '52px',
+        minWidth : '200px',
+        padding : '0 32px',
+        fontSize : '20px',
+        fontWeight : '650',
+        color : 'inherit',
+        background : 'var(--fun-buttonBg)',
+        border : '1px solid var(--fun-buttonBorder)',
+        borderRadius : '999px',
+        cursor : 'pointer',
+        boxShadow : 'inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--fun-buttonShadow)',
+        backdropFilter : 'blur(16px)',
+        transition : 'border-color 0.2s ease, background 0.2s ease, transform 0.15s ease',
+        '&:hover' : {
+            borderColor : 'var(--fun-buttonHoverBorder)',
+            background : 'var(--fun-buttonHoverBg)'
+        },
+        '&:active' : {
+            transform : 'scale(0.985)'
+        },
+    }
+});
+
+/**
+ * @typedef {Object} ButtonProps
+ * @property {Function} handleClick - Click handler.
+ * @property {string} [className] - Additional CSS classes.
+ */
+
+/** Reusable styled button. Renders children via props.renderChildren().
+ * @type {typeof import('rasti').Component<ButtonProps>}
+ */
+const Button = Component.create`
+    <button
+        class="${({ props }) => cn(classes.root, props.className)}"
+        onClick="${({ props }) => props.handleClick}"
+    >
+        ${({ props }) => props.renderChildren()}
+    </button>
+`;
+
+export default Button;

package/templates/_base/components/Button-tailwind.js

@@ -0,0 +1,52 @@
+import { Component } from 'rasti';
+import cn from '../lib/cn.js';
+
+/**
+ * The base classes for the button.
+ */
+const BASE_CLASSES = [
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'rounded-full',
+    'border',
+    'border-white/12',
+    'bg-linear-to-b',
+    'from-[#5ee9df]/20',
+    'to-white/6',
+    'text-white',
+    'shadow-[inset_0_1px_0_rgba(255,255,255,0.1),0_6px_20px_rgba(0,0,0,0.18)]',
+    'backdrop-blur-md',
+    'transition-[border-color,background,transform]',
+    'duration-200',
+    'hover:border-[#5ee9df]/40',
+    'hover:from-[#5ee9df]/28',
+    'hover:to-white/10',
+    'active:scale-[0.985]',
+    'active:duration-150',
+    'min-h-13',
+    'min-w-[200px]',
+    'px-8',
+    'text-xl',
+    'font-[650]'
+];
+
+/**
+ * @typedef {Object} ButtonProps
+ * @property {Function} handleClick - Click handler.
+ * @property {string} [className] - Additional CSS classes.
+ */
+
+/** Reusable styled button. Renders children via props.renderChildren().
+ * @type {typeof import('rasti').Component<ButtonProps>}
+ */
+const Button = Component.create`
+    <button
+        class="${({ props }) => cn(BASE_CLASSES, props.className)}"
+        onClick="${({ props }) => props.handleClick}"
+    >
+        ${({ props }) => props.renderChildren()}
+    </button>
+`;
+
+export default Button;

package/templates/_base/components/Button.js

@@ -0,0 +1,22 @@
+import { Component } from 'rasti';
+import cn from '../lib/cn.js';
+
+/**
+ * @typedef {Object} ButtonProps
+ * @property {Function} handleClick - Click handler.
+ * @property {string} [className] - Additional CSS classes.
+ */
+
+/** Reusable styled button. Renders children via props.renderChildren().
+ * @type {typeof import('rasti').Component<ButtonProps>}
+ */
+const Button = Component.create`
+    <button
+        class="${({ props }) => cn('button', props.className)}"
+        onClick="${({ props }) => props.handleClick}"
+    >
+        ${({ props }) => props.renderChildren()}
+    </button>
+`;
+
+export default Button;

package/templates/_base/components/Header-cssfun.js

@@ -0,0 +1,69 @@
+import { Component } from 'rasti';
+import { css } from 'cssfun';
+import cn from '../lib/cn.js';
+import Button from './Button.js';
+
+const { classes } = css({
+    root : {
+        display : 'flex',
+        alignItems : 'center',
+        width : '100%'
+    },
+    nav : {
+        display : 'flex',
+        gap : '16px'
+    },
+    actions : {
+        display : 'flex',
+        gap : '10px',
+        marginLeft : 'auto'
+    },
+    showWhenLight : {
+        display : 'var(--fun-showWhenLight)'
+    },
+    showWhenDark : {
+        display : 'var(--fun-showWhenDark)'
+    },
+    buttonSm : {
+        minHeight : '40px',
+        minWidth : 'auto',
+        padding : '0 16px',
+        fontSize : '13px',
+        fontWeight : '600',
+        letterSpacing : '0.01em'
+    }
+});
+
+function setColorScheme(mode) {
+    if (typeof document !== 'undefined') document.documentElement.setAttribute('data-color-scheme', mode);
+}
+
+/**
+ * App header (cssfun): light/dark theme toggle, and navigation when router is enabled.
+ */
+const Header = Component.create`
+    <header class="${classes.root}">
+{{#if ROUTER}}
+        <nav class="${classes.nav}">
+            <a data-router href="/">Home</a>
+            <a data-router href="{{ROUTE_ABOUT}}">About</a>
+        </nav>
+{{#endif}}
+        <div class="${classes.actions}">
+            <${Button}
+                className=${cn(classes.buttonSm, classes.showWhenDark)}
+                handleClick=${() => setColorScheme('light')}
+            >
+                Light
+            </${Button}>
+            <${Button}
+                className=${cn(classes.buttonSm, classes.showWhenLight)}
+                handleClick=${() => setColorScheme('dark')}
+            >
+                Dark
+            </${Button}>
+        </div>
+    </header>
+`;
+
+export default Header;

package/templates/_base/components/Header-tailwind.js

@@ -0,0 +1,17 @@
+import { Component } from 'rasti';
+
+/**
+ * App header: navigation (when router is enabled).
+ */
+const Header = Component.create`
+    <header class="flex w-full items-center">
+{{#if ROUTER}}
+        <nav class="flex gap-6">
+            <a data-router href="/">Home</a>
+            <a data-router href="{{ROUTE_ABOUT}}">About</a>
+        </nav>
+{{#endif}}
+    </header>
+`;
+
+export default Header;

package/templates/_base/components/Header.js

@@ -0,0 +1,17 @@
+import { Component } from 'rasti';
+
+/**
+ * App header: navigation (when router is enabled).
+ */
+const Header = Component.create`
+    <header class="header">
+{{#if ROUTER}}
+        <nav class="nav">
+            <a data-router href="/">Home</a>
+            <a data-router href="{{ROUTE_ABOUT}}">About</a>
+        </nav>
+{{#endif}}
+    </header>
+`;
+
+export default Header;

package/templates/_base/components/Home-cssfun.js

@@ -0,0 +1,98 @@
+import { Component } from 'rasti';
+import { css } from 'cssfun';
+import Button from './Button.js';
+
+const { classes } = css({
+    root : {
+        width : '100%',
+        display : 'flex',
+        flexDirection : 'column',
+        alignItems : 'center',
+        gap : 'clamp(24px, 6vw, 40px)'
+    },
+    title : { display : 'flex', alignItems : 'center', justifyContent : 'center', gap : '16px', fontSize : '36px', fontWeight : '700', margin : 0 },
+    logoLink : { display : 'inline-block' },
+    logoLight : { height : 'clamp(56px, 15vw, 96px)', display : 'var(--fun-showWhenLight)' },
+    logoDark : { height : 'clamp(56px, 15vw, 96px)', display : 'var(--fun-showWhenDark)' },
+    counter : {
+        display : 'flex',
+        alignItems : 'center',
+        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)',
+        '& code' : {
+            backgroundColor : 'var(--fun-codeBg)',
+            padding : '3px 10px',
+            borderRadius : '999px',
+            fontSize : '13px',
+            fontFamily : 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+            fontWeight : '600',
+            border : '1px solid var(--fun-codeBorder)'
+        }
+    },
+    infoStack : {
+        display : 'grid',
+        gap : '16px'
+    },
+    infoDescription : {
+        margin : 0,
+        lineHeight : '1.7',
+        fontSize : '15px'
+    },
+    infoIncludes : {
+        padding : '16px 20px',
+        borderRadius : '16px',
+        background : 'var(--fun-metaBg)',
+        border : '1px solid var(--fun-metaBorder)',
+        '& p' : {
+            margin : 0,
+            lineHeight : '1.7'
+        },
+        '& p + p' : {
+            marginTop : '8px'
+        }
+    },
+    infoHint : {
+        margin : 0,
+        lineHeight : '1.7',
+        color : 'var(--fun-mutedText)'
+    }
+});
+
+/**
+ * @typedef {Object} HomeProps
+ * @property {number} count - Current counter value.
+ * @property {Function} handleIncrement - Increments the counter.
+ */
+
+/** Home view: logo, counter and project info.
+ * @type {typeof import('rasti').Component<HomeProps>}
+ */
+const Home = Component.create`
+    <div class="${classes.root}">
+        <h1 class="${classes.title}">
+            <a class="${classes.logoLink}" href="https://rasti.js.org" target="_blank"><img class="${classes.logoLight}" src="{{LOGO_LIGHT_SRC}}" alt="{{NAME}}" /><img class="${classes.logoDark}" src="{{LOGO_SRC}}" alt="{{NAME}}" /></a>
+        </h1>
+        <div class="${classes.counter}">
+            <${Button} handleClick="${({ props }) => props.handleIncrement}">
+                count is ${({ props }) => props.count}
+            </${Button}>
+        </div>
+        <div class="${classes.info}">
+            <div class="${classes.infoStack}">
+                <p class="${classes.infoDescription}">{{DESCRIPTION}}</p>
+                <div class="${classes.infoIncludes}">{{FEATURES_INCLUDE}}</div>
+                <p class="${classes.infoHint}">Edit <code>src/App.js</code> and save to test HMR.</p>
+            </div>
+        </div>
+    </div>
+`;
+
+export default Home;

package/templates/_base/components/Home-tailwind.js

@@ -0,0 +1,35 @@
+import { Component } from 'rasti';
+import Button from './Button.js';
+
+/**
+ * @typedef {Object} HomeProps
+ * @property {number} count - Current counter value.
+ * @property {Function} handleIncrement - Increments the counter.
+ */
+
+/** Home view: logo, counter and project info.
+ * @type {typeof import('rasti').Component<HomeProps>}
+ */
+const Home = Component.create`
+    <div class="flex w-full flex-col items-center gap-6 md:gap-10">
+        <h1 class="flex items-center justify-center gap-4 text-4xl font-bold m-0">
+            <a class="inline-block" href="https://rasti.js.org" target="_blank">
+                <img class="h-14 md:h-24 block" src="{{LOGO_SRC}}" alt="{{NAME}}" />
+            </a>
+        </h1>
+        <div class="flex items-center">
+            <${Button} handleClick="${({ props }) => props.handleIncrement}">
+                count is ${({ props }) => props.count}
+            </${Button}>
+        </div>
+        <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]">
+            <div class="grid gap-4">
+                <p class="m-0 text-[15px] leading-[1.7] text-white/88">{{DESCRIPTION}}</p>
+                <div class="rounded-2xl border border-white/6 bg-white/4 px-5 py-4 leading-[1.7] text-white/88 [&_p+p]:mt-2 [&_p]:m-0">{{FEATURES_INCLUDE}}</div>
+                <p class="m-0 leading-[1.7] text-white/58">Edit <code class="rounded-full border border-white/10 bg-white/10 px-2.5 py-0.5 text-[13px] font-semibold font-mono">src/App.js</code> and save to test HMR.</p>
+            </div>
+        </div>
+    </div>
+`;
+
+export default Home;

package/templates/_base/components/Home.js

@@ -0,0 +1,35 @@
+import { Component } from 'rasti';
+import Button from './Button.js';
+
+/**
+ * @typedef {Object} HomeProps
+ * @property {number} count - Current counter value.
+ * @property {Function} handleIncrement - Increments the counter.
+ */
+
+/** Home view: logo, counter and project info.
+ * @type {typeof import('rasti').Component<HomeProps>}
+ */
+const Home = Component.create`
+    <div class="home">
+        <h1 class="title">
+            <a class="logo-link" href="https://rasti.js.org" target="_blank">
+                <img class="logo" src="{{LOGO_SRC}}" alt="{{NAME}}" />
+            </a>
+        </h1>
+        <div class="counter">
+            <${Button} handleClick="${({ props }) => props.handleIncrement}">
+                count is ${({ props }) => props.count}
+            </${Button}>
+        </div>
+        <div class="info">
+            <div class="info-stack">
+                <p class="info-description">{{DESCRIPTION}}</p>
+                <div class="info-includes">{{FEATURES_INCLUDE}}</div>
+                <p class="info-hint">Edit <code>src/App.js</code> and save to test HMR.</p>
+            </div>
+        </div>
+    </div>
+`;
+
+export default Home;

package/templates/_base/style.css

@@ -0,0 +1,170 @@
+:root {
+    --app-link: #5ee9df;
+    --app-link-hover: #93fdf5;
+    --app-accent: #5ee9df;
+    --app-border: rgba(255, 255, 255, 0.12);
+    --app-border-hover: rgba(94, 233, 223, 0.4);
+    --app-muted: rgba(255, 255, 255, 0.58);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    background: #0a0a0a;
+    color: #ffffff;
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    color: var(--app-link);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+a:hover {
+    color: var(--app-link-hover);
+    text-decoration: underline;
+}
+
+.app {
+    font-family: system-ui, sans-serif;
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: clamp(24px, 5vw, 40px);
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: clamp(20px, 5vw, 48px);
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.logo-link {
+    display: inline-block;
+}
+
+.logo {
+    height: clamp(56px, 15vw, 96px);
+    display: block;
+}
+
+.home {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: clamp(24px, 6vw, 40px);
+}
+
+.page {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    font-size: 36px;
+    font-weight: 700;
+    margin: 0;
+}
+
+.counter {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 52px;
+    min-width: 200px;
+    padding: 0 32px;
+    font-size: 20px;
+    font-weight: 650;
+    color: #ffffff;
+    background: linear-gradient(180deg, rgba(94, 233, 223, 0.2) 0%, rgba(255, 255, 255, 0.06) 100%);
+    border: 1px solid var(--app-border);
+    border-radius: 999px;
+    cursor: pointer;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 20px rgba(0, 0, 0, 0.18);
+    backdrop-filter: blur(16px);
+    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
+}
+
+.button:hover {
+    border-color: var(--app-border-hover);
+    background: linear-gradient(180deg, rgba(94, 233, 223, 0.28) 0%, rgba(255, 255, 255, 0.1) 100%);
+}
+
+.button:active {
+    transform: scale(0.985);
+}
+
+.info {
+    width: min(100%, 720px);
+    padding: clamp(20px, 4vw, 30px);
+    background: linear-gradient(180deg, rgba(20, 24, 28, 0.92) 0%, rgba(10, 10, 10, 0.82) 100%);
+    border-radius: 24px;
+    border: 1px solid var(--app-border);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(18px);
+}
+
+.info-stack {
+    display: grid;
+    gap: 16px;
+}
+
+.info-description {
+    margin: 0;
+    line-height: 1.7;
+    font-size: 15px;
+    color: rgba(255, 255, 255, 0.88);
+}
+
+.info-includes {
+    padding: 16px 20px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.info-includes p {
+    margin: 0;
+    line-height: 1.7;
+    color: rgba(255, 255, 255, 0.88);
+}
+
+.info-includes p + p {
+    margin-top: 8px;
+}
+
+.info-hint {
+    margin: 0;
+    line-height: 1.7;
+    color: var(--app-muted);
+}
+
+.info code {
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 3px 10px;
+    border-radius: 999px;
+    font-size: 13px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-weight: 600;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}