@sigx/cli 0.1.0

package/dist/templates/ssg-tailwind/src/layouts/default.tsx

@@ -0,0 +1,29 @@
+import { component } from 'sigx';
+import type { LayoutProps, LayoutSlots } from '@sigx/ssg';
+import { Link } from '@sigx/router';
+
+export default component<LayoutProps, unknown, LayoutSlots>(({ slots }) => {
+    return () => (
+        <div class="min-h-screen flex flex-col bg-gray-50">
+            <header class="bg-gray-800 text-white">
+                <div class="max-w-4xl mx-auto px-6 py-4 flex justify-between items-center">
+                    <h1 class="text-xl font-bold">🚀 {{projectName}}</h1>
+                    <nav class="flex gap-6">
+                        <Link to="/" class="text-white hover:text-gray-300 no-underline">Home</Link>
+                        <Link to="/about" class="text-white hover:text-gray-300 no-underline">About</Link>
+                    </nav>
+                </div>
+            </header>
+
+            <main class="flex-1 max-w-4xl mx-auto w-full px-6 py-12">
+                <article class="prose prose-lg max-w-none">
+                    {slots.default()}
+                </article>
+            </main>
+
+            <footer class="bg-gray-800 text-gray-400 text-center py-4 text-sm">
+                Built with SignalX SSG
+            </footer>
+        </div>
+    );
+});

package/dist/templates/ssg-tailwind/src/pages/about.mdx

@@ -0,0 +1,16 @@
+---
+title: About
+---
+
+# About
+
+This is a SignalX static site generated with **@sigx/ssg**.
+
+## Features
+
+- 📄 File-based routing
+- ✍️ MDX support (Markdown + JSX)
+- 🎨 Syntax highlighting with Shiki
+- ⚡ Island architecture with selective hydration
+- 🌊 Tailwind CSS styling
+- 🏗️ Static site generation for optimal performance

package/dist/templates/ssg-tailwind/src/pages/index.mdx

@@ -0,0 +1,37 @@
+---
+title: Home
+---
+
+import { component } from 'sigx';
+
+export const Counter = component(({ signal }) => {
+    const state = signal({ count: 0 });
+
+    return () => (
+        <div class="bg-white p-8 rounded-xl shadow-lg text-center mt-8">
+            <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>
+    );
+});
+
+# Welcome to {{projectName}}
+
+This is a **SignalX SSG** site with file-based routing and MDX support.
+
+Edit `src/pages/index.mdx` to get started.
+
+<Counter client:load />

package/dist/templates/ssg-tailwind/src/style.css

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

package/dist/templates/ssg-tailwind/ssg.config.ts

@@ -0,0 +1,20 @@
+import { defineSSGConfig } from '@sigx/ssg';
+
+export default defineSSGConfig({
+    pages: 'src/pages',
+    layouts: 'src/layouts',
+    outDir: 'dist',
+
+    site: {
+        title: '{{projectName}}',
+        description: 'A SignalX static site',
+        url: 'https://example.com',
+    },
+
+    markdown: {
+        shiki: {
+            light: 'github-light',
+            dark: 'github-dark',
+        },
+    },
+});

package/dist/templates/ssg-tailwind/tsconfig.json

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

package/dist/templates/ssg-tailwind/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import { sigxPlugin } from '@sigx/vite';
+import { ssgPlugin } from '@sigx/ssg/vite';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+    plugins: [
+        tailwindcss(),
+        sigxPlugin(),
+        ssgPlugin()
+    ],
+    oxc: {
+        jsx: {
+            runtime: 'automatic',
+            importSource: 'sigx'
+        }
+    }
+});

package/dist/templates/ssr/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/src/entry-client.tsx"></script>
+  </body>
+</html>

package/dist/templates/ssr/package.json

@@ -0,0 +1,24 @@
+{
+    "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"
+    }
+}

package/dist/templates/ssr/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 style="font-family: system-ui, sans-serif; max-width: 800px; margin: 0 auto; padding: 2rem;">
+            <header style="background: #2c3e50; color: white; padding: 1rem; margin-bottom: 2rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
+                <h1 style="margin: 0; font-size: 1.5rem;">🚀 {{projectName}}</h1>
+                <nav style="display: flex; gap: 1rem;">
+                    <Link
+                        to="/"
+                        style={`color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; background: ${route.path === '/' ? '#3498db' : 'transparent'}`}
+                    >
+                        Home
+                    </Link>
+                    <Link
+                        to="/about"
+                        style={`color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; background: ${route.path === '/about' ? '#3498db' : 'transparent'}`}
+                    >
+                        About
+                    </Link>
+                </nav>
+            </header>
+
+            <main style="background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
+                <RouterView />
+            </main>
+        </div>
+    );
+});

package/dist/templates/ssr/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/dist/templates/ssr/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/dist/templates/ssr/src/pages/About.tsx

@@ -0,0 +1,20 @@
+import { component } from 'sigx';
+
+export const About = component(() => {
+    return () => (
+        <div>
+            <h2 style="color: #2c3e50; margin-bottom: 16px;">About</h2>
+            <p style="color: #666; margin-bottom: 16px;">
+                This is a SignalX SSR application with streaming server-side rendering,
+                client-side hydration, and file-based routing.
+            </p>
+            <ul style="color: #666; line-height: 2;">
+                <li>⚡ Streaming SSR with Express</li>
+                <li>🔄 Client-side hydration</li>
+                <li>🧭 Router with <code>@sigx/router</code></li>
+                <li>📡 API routes ready (<code>/api/hello</code>)</li>
+                <li>🏗️ Production build support</li>
+            </ul>
+        </div>
+    );
+});

package/dist/templates/ssr/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 style="color: #2c3e50; margin-bottom: 16px;">Home</h2>
+            <p style="color: #666; margin-bottom: 24px;">
+                Welcome to your SignalX SSR app! Edit <code>src/pages/Home.tsx</code> to get started.
+            </p>
+            <div style="background: #f8f9fa; padding: 24px; border-radius: 8px; text-align: center;">
+                <p style="font-size: 48px; margin-bottom: 16px;">{state.count}</p>
+                <div style="display: flex; gap: 8px; justify-content: center;">
+                    <button
+                        onClick={() => state.count++}
+                        style="padding: 10px 20px; font-size: 14px; background: #3498db; color: white; border: none; border-radius: 6px; cursor: pointer;"
+                    >
+                        Increment
+                    </button>
+                    <button
+                        onClick={() => state.count--}
+                        style="padding: 10px 20px; font-size: 14px; background: #e74c3c; color: white; border: none; border-radius: 6px; cursor: pointer;"
+                    >
+                        Decrement
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+});

package/dist/templates/ssr/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/dist/templates/ssr/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/dist/templates/ssr/vite.config.ts

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

package/dist/templates/ssr-daisyui/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+  <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" />
+    <script>(function(){try{var t=localStorage.getItem('daisy-theme');if(!t&&window.matchMedia('(prefers-color-scheme:dark)').matches)t='dark';if(t)document.documentElement.setAttribute('data-theme',t);}catch(e){}})()</script>
+  </head>
+  <body class="bg-base-200 min-h-screen">
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/src/entry-client.tsx"></script>
+  </body>
+</html>

package/dist/templates/ssr-daisyui/package.json

@@ -0,0 +1,28 @@
+{
+    "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/daisyui": "^0.3.2",
+        "@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",
+        "daisyui": "^5.0.0"
+    }
+}

package/dist/templates/ssr-daisyui/src/App.tsx

@@ -0,0 +1,55 @@
+import { component } from 'sigx';
+import { RouterView, Link, useRoute } from '@sigx/router';
+import { ThemeProvider, ThemeSelector, Footer } from '@sigx/daisyui';
+
+const themes = ['light', 'dark', 'cupcake', 'synthwave', 'cyberpunk', 'dracula', 'nord', 'autumn'] as const;
+
+export const App = component(() => {
+    const route = useRoute();
+
+    return () => (
+        <ThemeProvider defaultTheme="light" darkMode>
+            <div class="min-h-screen flex flex-col bg-base-200">
+                {/* Navbar */}
+                <header class="navbar bg-base-100 shadow-sm sticky top-0 z-50">
+                    <div class="navbar-start">
+                        <Link to="/" class="btn btn-ghost text-xl font-bold gap-2">
+                            🚀 {{projectName}}
+                        </Link>
+                    </div>
+                    <div class="navbar-center hidden sm:flex">
+                        <nav class="flex gap-1">
+                            <Link
+                                to="/"
+                                class={`btn btn-sm ${route.path === '/' ? 'btn-primary' : 'btn-ghost'}`}
+                            >
+                                Home
+                            </Link>
+                            <Link
+                                to="/about"
+                                class={`btn btn-sm ${route.path === '/about' ? 'btn-primary' : 'btn-ghost'}`}
+                            >
+                                About
+                            </Link>
+                        </nav>
+                    </div>
+                    <div class="navbar-end">
+                        <ThemeSelector themes={[...themes]} />
+                    </div>
+                </header>
+
+                {/* Main content */}
+                <main class="flex-1">
+                    <RouterView />
+                </main>
+
+                {/* Footer */}
+                <Footer center class="bg-base-100 text-base-content border-t border-base-300">
+                    <aside>
+                        <p>Built with 💜 using <strong>SignalX</strong> &amp; <strong>DaisyUI</strong></p>
+                    </aside>
+                </Footer>
+            </div>
+        </ThemeProvider>
+    );
+});

package/dist/templates/ssr-daisyui/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/dist/templates/ssr-daisyui/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/dist/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>
+    );
+});