create-sygnal-app 1.0.0 → 1.0.2

package/index.js

@@ -12,17 +12,14 @@ const TEMPLATES = {
   vite: {
     label: 'Vite (SPA)',
     hint: 'Single-page app with Vite + HMR',
-    dir: 'template-vite',
   },
   vike: {
     label: 'Vike (SSR)',
     hint: 'File-based routing with SSR, layouts, and data fetching',
-    dir: 'template-vike',
   },
   astro: {
     label: 'Astro',
     hint: 'Content-focused site with island hydration',
-    dir: 'template-astro',
   },
 }
 
@@ -61,6 +58,19 @@ async function main() {
     process.exit(0)
   }
 
+  const language = await p.select({
+    message: 'Language:',
+    options: [
+      { value: 'js', label: 'JavaScript' },
+      { value: 'ts', label: 'TypeScript' },
+    ],
+  })
+
+  if (p.isCancel(language)) {
+    p.cancel('Cancelled.')
+    process.exit(0)
+  }
+
   const installDeps = await p.confirm({
     message: 'Install dependencies?',
     initialValue: true,
@@ -82,7 +92,8 @@ async function main() {
 
   // Copy template
   s.start('Scaffolding project...')
-  const templateDir = join(__dirname, TEMPLATES[template].dir)
+  const templateName = language === 'ts' ? `template-${template}-ts` : `template-${template}`
+  const templateDir = join(__dirname, templateName)
   copyDir(templateDir, targetDir)
 
   // Update package.json name

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sygnal-app",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Scaffold a new Sygnal project",
   "type": "module",
   "bin": {
@@ -9,8 +9,11 @@
   "files": [
     "index.js",
     "template-vite",
+    "template-vite-ts",
     "template-vike",
-    "template-astro"
+    "template-vike-ts",
+    "template-astro",
+    "template-astro-ts"
   ],
   "keywords": [
     "sygnal",

package/template-astro/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-sygnal-app",
-  "version": "0.1.0",
   "private": true,
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "astro dev",
@@ -10,6 +10,6 @@
   },
   "dependencies": {
     "astro": "^5.0.0",
-    "sygnal": "^5.1.0"
+    "sygnal": "^5.1.1"
   }
 }

package/template-astro/public/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 269 240" width="269" height="240">
+  <g fill="#1485EF">
+    <polygon points="95,104.5 44.5,82 142,24.5 248.5,25 175,69.5 154,67.5"/>
+    <polygon points="142,215.5 27.5,214 94,175.5 115,182.5 188,139.5 122.5,112 163,86.5 170,83.5 233,108.5 234.5,161"/>
+    <polygon points="102,168.5 44.5,144 45,102.5 145.5,144"/>
+  </g>
+</svg>

package/template-astro/public/style.css

@@ -0,0 +1,274 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --color-bg: #0f1117;
+  --color-surface: #1a1d27;
+  --color-surface-2: #242837;
+  --color-border: #2e3346;
+  --color-text: #e4e6ef;
+  --color-text-muted: #8b8fa3;
+  --color-primary: #1485ef;
+  --color-primary-hover: #0d6dd6;
+  --color-success: #22c55e;
+  --color-danger: #ef4444;
+  --color-danger-hover: #dc2626;
+  --radius: 12px;
+  --radius-sm: 8px;
+}
+
+body {
+  min-height: 100vh;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  display: flex;
+  justify-content: center;
+  padding: 40px 20px;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── Header ─────────────────────────────────────────────── */
+
+.header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.logo-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.logo {
+  width: 56px;
+  height: 50px;
+}
+
+h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  text-align: left;
+}
+
+.tagline {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  text-align: left;
+}
+
+/* ── Card ───────────────────────────────────────────────── */
+
+.card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 24px;
+  width: 100%;
+  max-width: 480px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.card-header h2 {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.badge {
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 4px 10px;
+  border-radius: 20px;
+}
+
+/* ── Add Form ───────────────────────────────────────────── */
+
+.add-form {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.add-input {
+  flex: 1;
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: 10px 14px;
+  font-size: 0.875rem;
+  color: var(--color-text);
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.add-input:focus {
+  border-color: var(--color-primary);
+}
+
+.add-input::placeholder {
+  color: var(--color-text-muted);
+}
+
+.add-btn {
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 10px 18px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.15s;
+  white-space: nowrap;
+}
+
+.add-btn:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+}
+
+.add-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── Task List ──────────────────────────────────────────── */
+
+.tasks {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.empty {
+  text-align: center;
+  padding: 32px 16px;
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+}
+
+/* ── Task Item ──────────────────────────────────────────── */
+
+.task-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--color-surface-2);
+  border-radius: var(--radius-sm);
+  transition: background 0.1s;
+}
+
+.task-item:hover {
+  background: #2a2f40;
+}
+
+.task-item .toggle {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 2px solid var(--color-border);
+  background: transparent;
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+  padding: 0;
+}
+
+.task-item .toggle:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+.task-item.done .toggle {
+  background: var(--color-success);
+  border-color: var(--color-success);
+  color: #fff;
+}
+
+.task-text {
+  flex: 1;
+  font-size: 0.875rem;
+  transition: color 0.15s, text-decoration 0.15s;
+}
+
+.task-item.done .task-text {
+  color: var(--color-text-muted);
+  text-decoration: line-through;
+}
+
+.task-item .delete {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--color-text-muted);
+  font-size: 1.125rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.15s, background 0.15s, color 0.15s;
+  padding: 0;
+}
+
+.task-item:hover .delete {
+  opacity: 1;
+}
+
+.task-item .delete:hover {
+  background: var(--color-danger);
+  color: #fff;
+}
+
+/* ── Footer ─────────────────────────────────────────────── */
+
+.footer {
+  text-align: center;
+  margin-top: 24px;
+  color: var(--color-text-muted);
+  font-size: 0.8125rem;
+}
+
+.footer code {
+  background: var(--color-surface-2);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+}
+
+.footer a {
+  color: var(--color-primary);
+  text-decoration: none;
+  margin-left: 4px;
+}
+
+.footer a:hover {
+  text-decoration: underline;
+}

package/template-astro/src/components/App.jsx

@@ -0,0 +1,99 @@
+import { xs, ABORT } from 'sygnal'
+import TaskItem from './TaskItem.jsx'
+
+function App({ state }) {
+  return (
+    <div className="app">
+      <header className="header">
+        <div className="logo-row">
+          <img src="/favicon.svg" alt="Sygnal" className="logo" />
+          <div>
+            <h1>Sygnal</h1>
+            <p className="tagline">Reactive components with pure functions</p>
+          </div>
+        </div>
+      </header>
+
+      <main>
+        <div className="card">
+          <div className="card-header">
+            <h2>Task Tracker</h2>
+            <span className="badge">{state.remaining} remaining</span>
+          </div>
+
+          <div className="add-form">
+            <input
+              type="text"
+              className="add-input"
+              placeholder="Add a new task..."
+              value={state.inputValue}
+            />
+            <button className="add-btn" attrs={{ disabled: !state.inputValue.trim() }}>Add</button>
+          </div>
+
+          {state.tasks.length === 0
+            ? <div className="empty"><p>No tasks yet. Add one above!</p></div>
+            : <collection of={TaskItem} from="tasks" className="tasks" />
+          }
+        </div>
+
+        <footer className="footer">
+          <p>
+            Edit <code>src/components/App.jsx</code> to get started &mdash;{' '}
+            <a href="https://sygnal.js.org" target="_blank" rel="noopener">Docs</a>
+          </p>
+        </footer>
+      </main>
+    </div>
+  )
+}
+
+App.initialState = {
+  inputValue: '',
+  nextId: 4,
+  tasks: [
+    { id: 1, text: 'Learn about Sygnal components', done: true },
+    { id: 2, text: 'Explore intent and model', done: false },
+    { id: 3, text: 'Build something awesome', done: false },
+  ],
+}
+
+App.calculated = {
+  remaining: (state) => state.tasks.filter(t => !t.done).length,
+}
+
+App.intent = ({ DOM, CHILD }) => ({
+  UPDATE_INPUT: DOM.input('.add-input').value(),
+  ADD_TASK:     xs.merge(
+    DOM.click('.add-btn'),
+    DOM.keydown('.add-input').key().filter(key => key === 'Enter')
+  ),
+  TOGGLE_TASK:  CHILD.select(TaskItem),
+})
+
+App.model = {
+  UPDATE_INPUT: (state, value) => ({
+    ...state,
+    inputValue: value,
+  }),
+
+  ADD_TASK: (state) => {
+    const text = state.inputValue.trim()
+    if (!text) return ABORT
+    return {
+      ...state,
+      inputValue: '',
+      nextId: state.nextId + 1,
+      tasks: [...state.tasks, { id: state.nextId, text, done: false }],
+    }
+  },
+
+  TOGGLE_TASK: (state, id) => ({
+    ...state,
+    tasks: state.tasks.map(task =>
+      task.id === id ? { ...task, done: !task.done } : task
+    ),
+  }),
+}
+
+export default App

package/template-astro/src/components/TaskItem.jsx

@@ -0,0 +1,23 @@
+function TaskItem({ state }) {
+  return (
+    <div className={`task-item ${state.done ? 'done' : ''}`}>
+      <button className="toggle">{state.done ? '\u2713' : '\u25CB'}</button>
+      <span className="task-text">{state.text}</span>
+      <button className="delete">x</button>
+    </div>
+  )
+}
+
+TaskItem.intent = ({ DOM }) => ({
+  TOGGLE: DOM.click('.toggle'),
+  DELETE: DOM.click('.delete'),
+})
+
+TaskItem.model = {
+  TOGGLE: {
+    PARENT: (state) => state.id,
+  },
+  DELETE: () => undefined,
+}
+
+export default TaskItem

package/template-astro/src/pages/index.astro

@@ -1,31 +1,19 @@
 ---
-import Counter from '../components/Counter.jsx'
+import App from '../components/App.jsx'
 ---
 
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sygnal + Astro</title>
-    <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: 100vh;
-        background: #f5f5f5;
-        color: #333;
-      }
-      .page { text-align: center; }
-      h1 { font-size: 2.5rem; margin-bottom: 2rem; color: #111; }
-    </style>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
-    <div class="page">
-      <h1>Sygnal + Astro</h1>
-      <Counter client:load />
-    </div>
+    <App client:load />
   </body>
 </html>

package/template-astro-ts/astro.config.mjs

@@ -0,0 +1,6 @@
+import { defineConfig } from 'astro/config'
+import sygnal from 'sygnal/astro'
+
+export default defineConfig({
+  integrations: [sygnal()],
+})

package/template-astro-ts/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "my-sygnal-app",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "astro": "^5.0.0",
+    "sygnal": "^5.1.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.5"
+  }
+}

package/template-astro-ts/public/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 269 240" width="269" height="240">
+  <g fill="#1485EF">
+    <polygon points="95,104.5 44.5,82 142,24.5 248.5,25 175,69.5 154,67.5"/>
+    <polygon points="142,215.5 27.5,214 94,175.5 115,182.5 188,139.5 122.5,112 163,86.5 170,83.5 233,108.5 234.5,161"/>
+    <polygon points="102,168.5 44.5,144 45,102.5 145.5,144"/>
+  </g>
+</svg>