@sigx/cli 0.1.0

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

@@ -0,0 +1,165 @@
+import { component, defineApp, effect } from "sigx";
+import {
+    ThemeProvider,
+    ThemeSelector,
+    Card,
+    Button,
+    Badge,
+    Toggle,
+    Stats,
+    Stat,
+    Hero,
+    Footer,
+} from "@sigx/daisyui";
+
+const themes = ['light', 'dark', 'cupcake', 'synthwave', 'cyberpunk', 'dracula', 'nord', 'autumn'] as const;
+
+const App = component(({ signal }) => {
+    const state = signal({
+        count: 0,
+        autoIncrement: false,
+        elapsed: 0,
+    });
+
+    effect(() => {
+        if (!state.autoIncrement) return;
+        const timer = setInterval(() => state.count++, 800);
+        return () => clearInterval(timer);
+    });
+
+    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 () => (
+        <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">
+                        <span class="btn btn-ghost text-xl font-bold">🚀 {{projectName}}</span>
+                    </div>
+                    <div class="navbar-end">
+                        <ThemeSelector themes={[...themes]} />
+                    </div>
+                </header>
+
+                {/* Main */}
+                <main class="flex-1">
+                    {/* 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>
+                                <Button variant="primary" size="lg">Get Started</Button>
+                            </div>
+                        </Hero.Content>
+                    </Hero>
+
+                    {/* Stats */}
+                    <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.
+                                        </p>
+                                    </Card.Body>
+                                </Card>
+                                <Card bordered>
+                                    <Card.Body>
+                                        <Card.Title>🧩 Component Model</Card.Title>
+                                        <p class="text-base-content/70">
+                                            Composable components with JSX, compound patterns,
+                                            and full TypeScript support.
+                                        </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!
+                                        </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>
+                </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>
+    );
+});
+
+defineApp(App).mount('#app');

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

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

package/dist/templates/basic-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"></div>
+    <script type="module" src="/src/App.tsx"></script>
+  </body>
+</html>

package/dist/templates/basic-tailwind/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "{{projectName}}",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "sigx": "^0.4.1"
+    },
+    "devDependencies": {
+        "@sigx/vite": "^0.4.1",
+        "vite": "^8.0.3",
+        "typescript": "^5.9.3",
+        "tailwindcss": "^4.1.0",
+        "@tailwindcss/vite": "^4.2.2"
+    }
+}

package/dist/templates/basic-tailwind/src/App.tsx

@@ -0,0 +1,37 @@
+import { component, defineApp } from "sigx";
+
+const Counter = component(({ signal }) => {
+    const state = signal({ count: 0 });
+
+    return () => (
+        <div class="max-w-2xl mx-auto p-10 text-center">
+            <h1 class="text-3xl font-bold text-gray-800 mb-4">
+                🚀 Welcome to SignalX!
+            </h1>
+            <p class="text-gray-600 mb-8">
+                Edit <code class="bg-gray-200 px-2 py-1 rounded">src/App.tsx</code> to get started
+            </p>
+            <div class="bg-white p-8 rounded-xl shadow-lg">
+                <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>
+    );
+});
+
+defineApp(Counter).mount('#app');

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

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

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

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

package/dist/templates/lynx/README.md

@@ -0,0 +1,57 @@
+# {{projectName}}
+
+A native mobile app built with [sigx-lynx](https://github.com/signalxjs/core).
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+
+- pnpm (recommended) or npm
+- [sigx-lynx-go](https://github.com/signalxjs/core/tree/main/go) app on your device/emulator
+
+### Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start the dev server
+sigx dev
+
+# Or use npx
+npx sigx dev
+```
+
+Scan the QR code shown in the terminal with sigx-lynx-go, or enter the URL manually.
+
+### Building
+
+```bash
+sigx build
+```
+
+### Environment Check
+
+```bash
+sigx doctor
+```
+
+## Project Structure
+
+```
+{{projectName}}/
+├── src/
+│   ├── App.tsx              # Root component
+│   ├── main.tsx             # BG-thread entry point
+│   └── main.thread.tsx      # Main-thread entry point
+├── lynx.config.ts           # rspeedy build config
+├── sigx.lynx.config.ts      # sigx-lynx native config
+├── tsconfig.json
+└── package.json
+```
+
+## Learn More
+
+- [sigx-lynx Documentation](https://github.com/signalxjs/core)
+- [Lynx Runtime](https://lynxjs.org)

package/dist/templates/lynx/lynx.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from '@lynx-js/rspeedy';
+import { pluginSigxLynx } from '@sigx/lynx-plugin';
+
+export default defineConfig({
+    source: {
+        entry: {
+            main: './src/main.tsx',
+        },
+    },
+    server: {
+        host: '0.0.0.0',
+        port: 3000,
+    },
+    plugins: [
+        pluginSigxLynx(),
+    ],
+});

package/dist/templates/lynx/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "{{projectName}}",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "sigx dev",
+        "build": "sigx build",
+        "doctor": "sigx doctor",
+        "prebuild": "sigx prebuild"
+    },
+    "dependencies": {
+        "@sigx/lynx": "^0.1.0",
+        "@sigx/lynx-runtime-main": "^0.1.0",
+        "@sigx/lynx-core": "^0.1.0"
+    },
+    "devDependencies": {
+        "@sigx/cli": "^0.1.0",
+        "@sigx/lynx-cli": "^0.1.0",
+        "@sigx/lynx-plugin": "^0.1.0",
+        "@lynx-js/rspeedy": ">=0.1.0",
+        "@lynx-js/css-extract-webpack-plugin": ">=0.1.0",
+        "@lynx-js/template-webpack-plugin": ">=0.1.0",
+        "@lynx-js/runtime-wrapper-webpack-plugin": ">=0.1.0",
+        "@lynx-js/webpack-dev-transport": ">=0.1.0",
+        "typescript": "^5.9.3"
+    }
+}

package/dist/templates/lynx/sigx.lynx.config.ts

@@ -0,0 +1,46 @@
+import { defineLynxConfig } from '@sigx/lynx-cli/config';
+
+export default defineLynxConfig({
+    name: '{{projectName}}',
+    version: '0.1.0',
+    buildNumber: '1',
+
+    // App-shell assets — sigx ships sensible defaults in ./assets/.
+    // Swap these PNGs to rebrand without touching native code.
+    icon: 'assets/icon.png',
+    splash: {
+        image: 'assets/splash.png',
+        backgroundColor: '#FFFFFF',
+    },
+
+    // Custom URL scheme for deep linking ({{projectName}}://...).
+    // Comment out if you don't need deep links.
+    scheme: '{{projectName}}',
+
+    // 'portrait' | 'landscape' | 'default'
+    orientation: 'portrait',
+
+    // Native modules — these are auto-linked into the native project.
+    // Built-in modules available in sigx-lynx-go (dev client) without prebuild.
+    modules: [
+        '@sigx/lynx-storage',
+        '@sigx/lynx-clipboard',
+        '@sigx/lynx-haptics',
+        '@sigx/lynx-device-info',
+        '@sigx/lynx-network',
+    ],
+    android: {
+        applicationId: 'com.example.{{projectName}}',
+        versionCode: 1,
+        minSdk: 24,
+        targetSdk: 35,
+        adaptiveIcon: {
+            foreground: 'assets/adaptive-foreground.png',
+            backgroundColor: '#0D9488',
+        },
+    },
+    ios: {
+        bundleIdentifier: 'com.example.{{projectName}}',
+        deploymentTarget: '15.0',
+    },
+});

package/dist/templates/lynx/src/App.tsx

@@ -0,0 +1,103 @@
+import { signal, component } from '@sigx/lynx';
+
+const App = component(() => {
+    const count = signal(0);
+
+    return () => (
+        <scroll-view scroll-orientation="vertical" style={{ height: '100vh' }}>
+            <view style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100vh',
+                gap: '20px',
+                backgroundColor: '#0f172a',
+            }}>
+                {/* Logo area */}
+                <view style={{
+                    width: '80px',
+                    height: '80px',
+                    borderRadius: '20px',
+                    backgroundColor: '#3b82f6',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <text style={{ fontSize: '36px', color: '#fff' }}>⚡</text>
+                </view>
+
+                <text style={{
+                    fontSize: '28px',
+                    fontWeight: 'bold',
+                    color: '#f1f5f9',
+                }}>
+                    {{projectName}}
+                </text>
+
+                <text style={{
+                    fontSize: '14px',
+                    color: '#94a3b8',
+                    textAlign: 'center',
+                    maxWidth: '280px',
+                }}>
+                    Built with sigx-lynx — signal-based native apps
+                </text>
+
+                {/* Counter card */}
+                <view style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    marginTop: '20px',
+                    padding: '24px',
+                    backgroundColor: '#1e293b',
+                    borderRadius: '16px',
+                    alignItems: 'center',
+                    gap: '16px',
+                    width: '280px',
+                }}>
+                    <text style={{ fontSize: '48px', fontWeight: 'bold', color: '#e2e8f0' }}>
+                        {count.value}
+                    </text>
+
+                    <view style={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        gap: '12px',
+                    }}>
+                        <view
+                            bindtap={() => count.value > 0 && count.value--}
+                            style={{
+                                padding: '12px 24px',
+                                backgroundColor: '#334155',
+                                borderRadius: '10px',
+                            }}
+                        >
+                            <text style={{ color: '#e2e8f0', fontSize: '18px' }}>−</text>
+                        </view>
+                        <view
+                            bindtap={() => count.value++}
+                            style={{
+                                padding: '12px 24px',
+                                backgroundColor: '#3b82f6',
+                                borderRadius: '10px',
+                            }}
+                        >
+                            <text style={{ color: '#fff', fontSize: '18px' }}>+</text>
+                        </view>
+                    </view>
+                </view>
+
+                <text style={{
+                    fontSize: '12px',
+                    color: '#64748b',
+                    marginTop: '16px',
+                }}>
+                    Edit src/App.tsx to get started
+                </text>
+            </view>
+        </scroll-view>
+    );
+});
+
+export default App;

package/dist/templates/lynx/src/main.thread.tsx

@@ -0,0 +1,2 @@
+// Main-thread entry — bootstraps the Lepus-side globals
+import '@sigx/runtime-lynx-main';

package/dist/templates/lynx/src/main.tsx

@@ -0,0 +1,8 @@
+import { defineApp } from '@sigx/lynx';
+import App from './App';
+
+defineApp(<App />).mount(null);
+
+if ((module as any).hot) {
+    (module as any).hot.accept();
+}

package/dist/templates/lynx/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "@sigx/lynx",
+        "types": []
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx"],
+    "exclude": ["node_modules", "dist"]
+}

package/dist/templates/lynx-tailwind/README.md

@@ -0,0 +1,61 @@
+# {{projectName}}
+
+A native mobile app built with [sigx-lynx](https://github.com/signalxjs/core) and Tailwind CSS.
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+
+- pnpm (recommended) or npm
+- [sigx-lynx-go](https://github.com/signalxjs/core/tree/main/go) app on your device/emulator
+
+### Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start the dev server
+sigx dev
+
+# Or use npx
+npx sigx dev
+```
+
+Scan the QR code shown in the terminal with sigx-lynx-go, or enter the URL manually.
+
+### Building
+
+```bash
+sigx build
+```
+
+### Environment Check
+
+```bash
+sigx doctor
+```
+
+## Project Structure
+
+```
+{{projectName}}/
+├── src/
+│   ├── App.tsx              # Root component
+│   ├── styles.css           # Tailwind entry point
+│   ├── main.tsx             # BG-thread entry point
+│   └── main.thread.tsx      # Main-thread entry point
+├── lynx.config.ts           # rspeedy build config
+├── sigx.lynx.config.ts      # sigx-lynx native config
+├── tailwind.config.ts       # Tailwind CSS config
+├── postcss.config.js        # PostCSS config
+├── tsconfig.json
+└── package.json
+```
+
+## Learn More
+
+- [sigx-lynx Documentation](https://github.com/signalxjs/core)
+- [Lynx Runtime](https://lynxjs.org)
+- [Tailwind CSS](https://tailwindcss.com)