@sigx/cli 0.1.0

package/templates/ssr-daisyui/src/pages/About.tsx

@@ -0,0 +1,104 @@
+import { component } from 'sigx';
+import { Card, Steps, Badge, Divider, Button } from '@sigx/daisyui';
+
+export const About = component(({ signal }) => {
+    const state = signal({ currentStep: 'signals' });
+
+    const steps = [
+        { id: 'signals', label: 'Signals', color: 'primary' as const },
+        { id: 'effects', label: 'Effects', color: 'secondary' as const },
+        { id: 'components', label: 'Components', color: 'accent' as const },
+        { id: 'ssr', label: 'SSR', color: 'success' as const },
+    ];
+
+    const stepDetails: Record<string, { title: string; desc: string }> = {
+        signals: {
+            title: '📡 Signals — Reactive Primitives',
+            desc: 'Signals are the foundation of SignalX. They hold reactive state and automatically notify subscribers when values change. No proxies, no cloning — just direct, fine-grained reactivity.',
+        },
+        effects: {
+            title: '⚡ Effects — Automatic Reactions',
+            desc: 'Effects run whenever their signal dependencies change. Use them for side effects like timers, API calls, or DOM updates. Cleanup functions are called automatically.',
+        },
+        components: {
+            title: '🧩 Components — Composable UI',
+            desc: 'SignalX components use a render function that only runs once. The returned JSX template is live — signal references inside it update surgically without re-running the function.',
+        },
+        ssr: {
+            title: '🌊 SSR — Streaming Server Rendering',
+            desc: 'Stream HTML to the browser as it\'s generated. SignalX hydrates seamlessly on the client, preserving server-rendered content and adding full interactivity.',
+        },
+    };
+
+    const current = () => stepDetails[state.currentStep] || stepDetails.signals;
+
+    return () => (
+        <div>
+            {/* Header */}
+            <section class="py-16 px-6 bg-base-100">
+                <div class="max-w-3xl mx-auto text-center">
+                    <h1 class="text-4xl font-bold mb-4">About SignalX</h1>
+                    <p class="text-lg text-base-content/70">
+                        A modern reactive framework for building fast, type-safe web applications
+                        with fine-grained reactivity and streaming SSR.
+                    </p>
+                </div>
+            </section>
+
+            <Divider />
+
+            {/* How It Works — Interactive Steps */}
+            <section class="py-16 px-6">
+                <div class="max-w-3xl mx-auto">
+                    <h2 class="text-3xl font-bold text-center mb-10">How It Works</h2>
+
+                    <Steps
+                        items={steps}
+                        model={() => state.currentStep}
+                        class="mb-10"
+                    />
+
+                    <Card bordered shadow="lg" class="transition-all duration-300">
+                        <Card.Body>
+                            <Card.Title>{current().title}</Card.Title>
+                            <p class="text-base-content/70 leading-relaxed">{current().desc}</p>
+                        </Card.Body>
+                    </Card>
+                </div>
+            </section>
+
+            <Divider />
+
+            {/* Tech Stack */}
+            <section class="py-16 px-6 bg-base-100">
+                <div class="max-w-3xl mx-auto">
+                    <h2 class="text-3xl font-bold text-center mb-10">Built With</h2>
+                    <div class="flex flex-wrap justify-center gap-3">
+                        <Badge variant="primary" size="lg">SignalX</Badge>
+                        <Badge variant="secondary" size="lg">TypeScript</Badge>
+                        <Badge variant="accent" size="lg">Vite</Badge>
+                        <Badge variant="info" size="lg">DaisyUI</Badge>
+                        <Badge variant="success" size="lg">Tailwind CSS</Badge>
+                        <Badge variant="warning" size="lg">SSR Streaming</Badge>
+                    </div>
+                </div>
+            </section>
+
+            <Divider />
+
+            {/* CTA */}
+            <section class="py-16 px-6">
+                <div class="max-w-xl mx-auto text-center">
+                    <h2 class="text-2xl font-bold mb-4">Ready to build?</h2>
+                    <p class="text-base-content/60 mb-6">
+                        Start building your next project with SignalX.
+                    </p>
+                    <div class="flex gap-3 justify-center">
+                        <Button variant="primary">Read the Docs</Button>
+                        <Button variant="ghost" outline>View on GitHub</Button>
+                    </div>
+                </div>
+            </section>
+        </div>
+    );
+});

package/templates/ssr-daisyui/src/pages/Home.tsx

@@ -0,0 +1,133 @@
+import { component, effect } from 'sigx';
+import { Button, Card, Badge, Toggle, Stats, Stat, Hero } from '@sigx/daisyui';
+
+export const Home = component(({ signal }) => {
+    const state = signal({
+        count: 0,
+        autoIncrement: false,
+        elapsed: 0,
+    });
+
+    // Auto-increment effect — shows reactive effects in action
+    effect(() => {
+        if (!state.autoIncrement) return;
+        const timer = setInterval(() => state.count++, 800);
+        return () => clearInterval(timer);
+    });
+
+    // Elapsed timer — shows independent reactive state
+    effect(() => {
+        const timer = setInterval(() => state.elapsed++, 1000);
+        return () => clearInterval(timer);
+    });
+
+    const formatTime = (s: number) => {
+        const m = Math.floor(s / 60);
+        const sec = s % 60;
+        return `${m}:${sec.toString().padStart(2, '0')}`;
+    };
+
+    return () => (
+        <div>
+            {/* Hero */}
+            <Hero class="bg-base-100 py-20">
+                <Hero.Content>
+                    <div class="max-w-2xl">
+                        <h1 class="text-5xl font-bold leading-tight">
+                            Build Reactive Apps<br />
+                            <span class="text-primary">with SignalX</span>
+                        </h1>
+                        <p class="py-6 text-lg text-base-content/70">
+                            Fine-grained reactivity, SSR streaming, and a beautiful component library —
+                            everything you need to build modern web applications.
+                        </p>
+                        <div class="flex gap-3 justify-center">
+                            <Button variant="primary" size="lg">Get Started</Button>
+                            <Button variant="ghost" size="lg" outline>Documentation</Button>
+                        </div>
+                    </div>
+                </Hero.Content>
+            </Hero>
+
+            {/* Stats — all reactive */}
+            <div class="px-6 -mt-8 relative z-10 flex justify-center">
+                <Stats class="w-full max-w-3xl bg-base-100">
+                    <Stat title="Counter" value={state.count} description="Reactive signal" />
+                    <Stat title="Doubled" value={state.count * 2} description="Computed value" />
+                    <Stat title="Uptime" value={formatTime(state.elapsed)} description="Live timer" />
+                </Stats>
+            </div>
+
+            {/* Features */}
+            <section class="py-16 px-6">
+                <div class="max-w-5xl mx-auto">
+                    <h2 class="text-3xl font-bold text-center mb-12">Why SignalX?</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <Card bordered>
+                            <Card.Body>
+                                <Card.Title>⚡ Fine-grained Reactivity</Card.Title>
+                                <p class="text-base-content/70">
+                                    Signals update only what changed — no virtual DOM diffing,
+                                    no unnecessary re-renders. Surgical precision updates.
+                                </p>
+                            </Card.Body>
+                        </Card>
+                        <Card bordered>
+                            <Card.Body>
+                                <Card.Title>🌊 SSR Streaming</Card.Title>
+                                <p class="text-base-content/70">
+                                    Server-side render your app with streaming HTML.
+                                    Instant first paint, seamless hydration, full interactivity.
+                                </p>
+                            </Card.Body>
+                        </Card>
+                        <Card bordered>
+                            <Card.Body>
+                                <Card.Title>🎨 DaisyUI Themes</Card.Title>
+                                <p class="text-base-content/70">
+                                    30+ built-in themes, dark mode, and full component library.
+                                    Switch the theme above to see it in action!
+                                </p>
+                            </Card.Body>
+                        </Card>
+                    </div>
+                </div>
+            </section>
+
+            {/* Interactive Demo */}
+            <section class="py-16 px-6 bg-base-100">
+                <div class="max-w-xl mx-auto">
+                    <h2 class="text-3xl font-bold text-center mb-2">Try It Live</h2>
+                    <p class="text-center text-base-content/60 mb-8">Interact with reactive signals right here</p>
+
+                    <Card shadow="lg" bordered>
+                        <Card.Body center>
+                            <div class="flex items-center gap-4 mb-6">
+                                <Badge variant="primary" size="lg">{state.count}</Badge>
+                                <span class="text-base-content/60">×2 =</span>
+                                <Badge variant="secondary" size="lg">{state.count * 2}</Badge>
+                            </div>
+                            <Card.Actions justify="center">
+                                <Button variant="primary" onClick={() => state.count++}>
+                                    + Increment
+                                </Button>
+                                <Button variant="error" outline onClick={() => state.count--}>
+                                    − Decrement
+                                </Button>
+                                <Button variant="ghost" onClick={() => (state.count = 0)}>
+                                    Reset
+                                </Button>
+                            </Card.Actions>
+                            <div class="divider">AUTO MODE</div>
+                            <Toggle
+                                onChange={(val: boolean) => (state.autoIncrement = val)}
+                                label="Auto-increment every 800ms"
+                                color="success"
+                            />
+                        </Card.Body>
+                    </Card>
+                </div>
+            </section>
+        </div>
+    );
+});

package/templates/ssr-daisyui/src/router.ts

@@ -0,0 +1,27 @@
+import {
+    createRouter,
+    createWebHistory,
+    createMemoryHistory,
+    type RouteRecordRaw
+} from '@sigx/router';
+import { Home } from './pages/Home';
+import { About } from './pages/About';
+
+export const routes: RouteRecordRaw[] = [
+    { path: '/', name: 'home', component: Home },
+    { path: '/about', name: 'about', component: About }
+];
+
+export function createClientRouter() {
+    return createRouter({
+        history: createWebHistory(),
+        routes
+    });
+}
+
+export function createServerRouter(url: string) {
+    return createRouter({
+        history: createMemoryHistory({ initialLocation: url }),
+        routes
+    });
+}

package/templates/ssr-daisyui/src/style.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+@source "../../node_modules/@sigx/daisyui/dist/**/*.js";
+@plugin "daisyui" {
+  themes: light --default, dark --prefersdark, cupcake, synthwave, cyberpunk, dracula, nord, autumn;
+}

package/templates/ssr-daisyui/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "jsx": "react-jsx",
+        "jsxImportSource": "sigx",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noEmit": true,
+        "skipLibCheck": true
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/templates/ssr-daisyui/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import { sigxPlugin } from '@sigx/vite';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+    plugins: [
+        sigxPlugin(),
+        tailwindcss()
+    ],
+    build: {
+        outDir: 'dist/client'
+    },
+    // Vite 8 uses oxc instead of esbuild for JSX transforms
+    oxc: {
+        jsx: {
+            runtime: 'automatic',
+            importSource: 'sigx'
+        }
+    }
+});

package/templates/ssr-tailwind/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+    <link rel="stylesheet" href="/src/style.css" />
+  </head>
+  <body class="bg-gray-100 text-gray-900">
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/src/entry-client.tsx"></script>
+  </body>
+</html>

package/templates/ssr-tailwind/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "{{projectName}}",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "node server.js",
+        "build": "vite build && vite build --ssr src/entry-server.tsx --outDir dist/server",
+        "start": "cross-env NODE_ENV=production node server.js",
+        "preview": "cross-env NODE_ENV=production node server.js"
+    },
+    "dependencies": {
+        "sigx": "^0.4.1",
+        "@sigx/server-renderer": "^0.4.1",
+        "@sigx/router": "^0.3.2",
+        "express": "^4.18.2"
+    },
+    "devDependencies": {
+        "@sigx/vite": "^0.4.1",
+        "cross-env": "^7.0.3",
+        "vite": "^8.0.3",
+        "typescript": "^5.9.3",
+        "tailwindcss": "^4.1.0",
+        "@tailwindcss/vite": "^4.2.2"
+    }
+}

package/templates/ssr-tailwind/src/App.tsx

@@ -0,0 +1,32 @@
+import { component } from 'sigx';
+import { RouterView, Link, useRoute } from '@sigx/router';
+
+export const App = component(() => {
+    const route = useRoute();
+
+    return () => (
+        <div class="max-w-2xl mx-auto p-10">
+            <header class="bg-gray-800 text-white p-4 mb-8 rounded-lg flex justify-between items-center">
+                <h1 class="text-xl font-bold">🚀 {{projectName}}</h1>
+                <nav class="flex gap-4">
+                    <Link
+                        to="/"
+                        class={`text-white no-underline px-4 py-2 rounded ${route.path === '/' ? 'bg-blue-500' : 'hover:bg-gray-700'}`}
+                    >
+                        Home
+                    </Link>
+                    <Link
+                        to="/about"
+                        class={`text-white no-underline px-4 py-2 rounded ${route.path === '/about' ? 'bg-blue-500' : 'hover:bg-gray-700'}`}
+                    >
+                        About
+                    </Link>
+                </nav>
+            </header>
+
+            <main class="bg-white p-8 rounded-lg shadow-sm">
+                <RouterView />
+            </main>
+        </div>
+    );
+});

package/templates/ssr-tailwind/src/entry-client.tsx

@@ -0,0 +1,25 @@
+import { defineApp } from 'sigx';
+import { ssrClientPlugin } from '@sigx/server-renderer/client';
+import { App } from './App';
+import { createClientRouter } from './router';
+
+const router = createClientRouter();
+
+function startHydration() {
+    defineApp(<App />)
+        .use(router)
+        .use(ssrClientPlugin)
+        .hydrate('#app');
+}
+
+if (window.__SIGX_STREAMING_COMPLETE__) {
+    startHydration();
+} else {
+    window.addEventListener('sigx:ready', startHydration, { once: true });
+}
+
+declare global {
+    interface Window {
+        __SIGX_STREAMING_COMPLETE__?: boolean;
+    }
+}

package/templates/ssr-tailwind/src/entry-server.tsx

@@ -0,0 +1,24 @@
+import { defineApp } from 'sigx';
+import { renderToString, renderToStreamWithCallbacks } from '@sigx/server-renderer/server';
+import { App } from './App';
+import { createServerRouter } from './router';
+
+function createApp(url: string) {
+    const router = createServerRouter(url);
+    return defineApp(<App />).use(router);
+}
+
+export async function render(url: string) {
+    const app = createApp(url);
+    return await renderToString(app);
+}
+
+export async function renderStreamWithCallback(url: string, callbacks: {
+    onShellReady: (html: string) => void;
+    onAsyncChunk: (chunk: string) => void;
+    onComplete: () => void;
+    onError: (error: Error) => void;
+}) {
+    const app = createApp(url);
+    return await renderToStreamWithCallbacks(app, callbacks);
+}

package/templates/ssr-tailwind/src/pages/About.tsx

@@ -0,0 +1,21 @@
+import { component } from 'sigx';
+
+export const About = component(() => {
+    return () => (
+        <div>
+            <h2 class="text-2xl font-bold text-gray-800 mb-4">About</h2>
+            <p class="text-gray-600 mb-4">
+                This is a SignalX SSR application with streaming server-side rendering,
+                client-side hydration, and file-based routing.
+            </p>
+            <ul class="text-gray-600 space-y-2">
+                <li>⚡ Streaming SSR with Express</li>
+                <li>🔄 Client-side hydration</li>
+                <li>🧭 Router with <code class="bg-gray-200 px-2 py-1 rounded">@sigx/router</code></li>
+                <li>🎨 Tailwind CSS styling</li>
+                <li>📡 API routes ready (<code class="bg-gray-200 px-2 py-1 rounded">/api/hello</code>)</li>
+                <li>🏗️ Production build support</li>
+            </ul>
+        </div>
+    );
+});

package/templates/ssr-tailwind/src/pages/Home.tsx

@@ -0,0 +1,31 @@
+import { component } from 'sigx';
+
+export const Home = component(({ signal }) => {
+    const state = signal({ count: 0 });
+
+    return () => (
+        <div>
+            <h2 class="text-2xl font-bold text-gray-800 mb-4">Home</h2>
+            <p class="text-gray-600 mb-6">
+                Welcome to your SignalX SSR app! Edit <code class="bg-gray-200 px-2 py-1 rounded">src/pages/Home.tsx</code> to get started.
+            </p>
+            <div class="bg-gray-50 p-8 rounded-xl text-center">
+                <p class="text-6xl font-bold mb-6">{state.count}</p>
+                <div class="flex gap-4 justify-center">
+                    <button
+                        onClick={() => state.count++}
+                        class="px-6 py-3 text-lg font-medium bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors cursor-pointer"
+                    >
+                        Increment
+                    </button>
+                    <button
+                        onClick={() => state.count--}
+                        class="px-6 py-3 text-lg font-medium bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors cursor-pointer"
+                    >
+                        Decrement
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+});

package/templates/ssr-tailwind/src/router.ts

@@ -0,0 +1,27 @@
+import {
+    createRouter,
+    createWebHistory,
+    createMemoryHistory,
+    type RouteRecordRaw
+} from '@sigx/router';
+import { Home } from './pages/Home';
+import { About } from './pages/About';
+
+export const routes: RouteRecordRaw[] = [
+    { path: '/', name: 'home', component: Home },
+    { path: '/about', name: 'about', component: About }
+];
+
+export function createClientRouter() {
+    return createRouter({
+        history: createWebHistory(),
+        routes
+    });
+}
+
+export function createServerRouter(url: string) {
+    return createRouter({
+        history: createMemoryHistory({ initialLocation: url }),
+        routes
+    });
+}

package/templates/ssr-tailwind/src/style.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/ssr-tailwind/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "jsx": "react-jsx",
+        "jsxImportSource": "sigx",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noEmit": true,
+        "skipLibCheck": true
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/templates/ssr-tailwind/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import { sigxPlugin } from '@sigx/vite';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+    plugins: [
+        sigxPlugin(),
+        tailwindcss()
+    ],
+    build: {
+        outDir: 'dist/client'
+    },
+    // Vite 8 uses oxc instead of esbuild for JSX transforms
+    oxc: {
+        jsx: {
+            runtime: 'automatic',
+            importSource: 'sigx'
+        }
+    }
+});