create-sygnal-app 1.0.0

package/index.js

@@ -0,0 +1,135 @@
+#!/usr/bin/env node
+
+import * as p from '@clack/prompts'
+import { resolve, dirname, join, basename } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { existsSync, mkdirSync, readdirSync, statSync, readFileSync, writeFileSync } from 'node:fs'
+import { execSync } from 'node:child_process'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+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',
+  },
+}
+
+async function main() {
+  p.intro('Create Sygnal App')
+
+  // Project name — use CLI arg if provided
+  const argName = process.argv[2]
+
+  const projectName = argName || await p.text({
+    message: 'Project name:',
+    placeholder: 'my-sygnal-app',
+    defaultValue: 'my-sygnal-app',
+    validate(value) {
+      if (!value) return 'Project name is required'
+      if (/[^\w\-.]/.test(value)) return 'Project name can only contain letters, numbers, hyphens, dots, and underscores'
+    },
+  })
+
+  if (p.isCancel(projectName)) {
+    p.cancel('Cancelled.')
+    process.exit(0)
+  }
+
+  const template = await p.select({
+    message: 'Template:',
+    options: Object.entries(TEMPLATES).map(([value, { label, hint }]) => ({
+      value,
+      label,
+      hint,
+    })),
+  })
+
+  if (p.isCancel(template)) {
+    p.cancel('Cancelled.')
+    process.exit(0)
+  }
+
+  const installDeps = await p.confirm({
+    message: 'Install dependencies?',
+    initialValue: true,
+  })
+
+  if (p.isCancel(installDeps)) {
+    p.cancel('Cancelled.')
+    process.exit(0)
+  }
+
+  const targetDir = resolve(process.cwd(), projectName)
+
+  if (existsSync(targetDir) && readdirSync(targetDir).length > 0) {
+    p.cancel(`Directory "${projectName}" already exists and is not empty.`)
+    process.exit(1)
+  }
+
+  const s = p.spinner()
+
+  // Copy template
+  s.start('Scaffolding project...')
+  const templateDir = join(__dirname, TEMPLATES[template].dir)
+  copyDir(templateDir, targetDir)
+
+  // Update package.json name
+  const pkgPath = join(targetDir, 'package.json')
+  if (existsSync(pkgPath)) {
+    const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'))
+    pkg.name = basename(projectName)
+    writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n')
+  }
+  s.stop('Project scaffolded.')
+
+  // Install
+  if (installDeps) {
+    s.start('Installing dependencies...')
+    try {
+      execSync('npm install', { cwd: targetDir, stdio: 'ignore' })
+      s.stop('Dependencies installed.')
+    } catch {
+      s.stop('Failed to install dependencies. Run `npm install` manually.')
+    }
+  }
+
+  // Done
+  const relative = targetDir === process.cwd() ? '.' : projectName
+
+  p.note([
+    `cd ${relative}`,
+    'npm run dev',
+  ].join('\n'), 'Next steps')
+
+  p.outro('Happy building!')
+}
+
+function copyDir(src, dest) {
+  mkdirSync(dest, { recursive: true })
+  for (const entry of readdirSync(src)) {
+    const srcPath = join(src, entry)
+    const destPath = join(dest, entry)
+    if (statSync(srcPath).isDirectory()) {
+      copyDir(srcPath, destPath)
+    } else {
+      writeFileSync(destPath, readFileSync(srcPath))
+    }
+  }
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "create-sygnal-app",
+  "version": "1.0.0",
+  "description": "Scaffold a new Sygnal project",
+  "type": "module",
+  "bin": {
+    "create-sygnal-app": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "template-vite",
+    "template-vike",
+    "template-astro"
+  ],
+  "keywords": [
+    "sygnal",
+    "create",
+    "scaffold",
+    "template",
+    "cli"
+  ],
+  "author": "Troy Presley <troy.presley@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tpresley/sygnal.git",
+    "directory": "create-sygnal-app"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.10.0"
+  }
+}

package/template-astro/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/package.json

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

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

@@ -0,0 +1,25 @@
+function Counter({ state }) {
+  return (
+    <div className="counter-card">
+      <p>Count: {state.count}</p>
+      <div className="buttons">
+        <button className="dec">-</button>
+        <button className="inc">+</button>
+      </div>
+    </div>
+  )
+}
+
+Counter.initialState = { count: 0 }
+
+Counter.intent = ({ DOM }) => ({
+  INC: DOM.click('.inc'),
+  DEC: DOM.click('.dec'),
+})
+
+Counter.model = {
+  INC: (state) => ({ ...state, count: state.count + 1 }),
+  DEC: (state) => ({ ...state, count: state.count - 1 }),
+}
+
+export default Counter

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

@@ -0,0 +1,31 @@
+---
+import Counter from '../components/Counter.jsx'
+---
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <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>
+  </head>
+  <body>
+    <div class="page">
+      <h1>Sygnal + Astro</h1>
+      <Counter client:load />
+    </div>
+  </body>
+</html>

package/template-vike/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "my-sygnal-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vike dev",
+    "build": "vike build",
+    "preview": "vike preview"
+  },
+  "dependencies": {
+    "sygnal": "^5.1.0",
+    "vike": "^0.4.250"
+  },
+  "devDependencies": {
+    "vite": "^6.4.1"
+  }
+}

package/template-vike/pages/+Head.jsx

@@ -0,0 +1,3 @@
+export default function Head() {
+  return <link rel="stylesheet" href="/style.css" />
+}

package/template-vike/pages/+Layout.jsx

@@ -0,0 +1,18 @@
+function Layout({ state, innerHTML }) {
+  return (
+    <div className="layout">
+      <nav className="nav">
+        <strong>Sygnal + Vike</strong>
+        <div className="nav-links">
+          <a href="/">Home</a>
+          <a href="/about">About</a>
+        </div>
+      </nav>
+      <main className="content" props={{ innerHTML: innerHTML || '' }}></main>
+    </div>
+  )
+}
+
+Layout.initialState = {}
+
+export default Layout

package/template-vike/pages/+config.js

@@ -0,0 +1,6 @@
+import vikeSygnal from 'sygnal/config'
+
+export default {
+  extends: [vikeSygnal],
+  title: 'Sygnal + Vike',
+}

package/template-vike/pages/about/+Page.jsx

@@ -0,0 +1,14 @@
+function Page({ state }) {
+  return (
+    <div className="page">
+      <h1>About</h1>
+      <p>{state.description}</p>
+    </div>
+  )
+}
+
+Page.initialState = {
+  description: 'Built with Sygnal and Vike.',
+}
+
+export default Page

package/template-vike/pages/about/+config.js

@@ -0,0 +1,3 @@
+export default {
+  title: 'About',
+}

package/template-vike/pages/index/+Page.jsx

@@ -0,0 +1,26 @@
+function Page({ state }) {
+  return (
+    <div className="page">
+      <h1>Welcome</h1>
+      <p>Count: {state.count}</p>
+      <div className="buttons">
+        <button className="dec">-</button>
+        <button className="inc">+</button>
+      </div>
+    </div>
+  )
+}
+
+Page.initialState = { count: 0 }
+
+Page.intent = ({ DOM }) => ({
+  INC: DOM.click('.inc'),
+  DEC: DOM.click('.dec'),
+})
+
+Page.model = {
+  INC: (state) => ({ ...state, count: state.count + 1 }),
+  DEC: (state) => ({ ...state, count: state.count - 1 }),
+}
+
+export default Page

package/template-vike/pages/index/+config.js

@@ -0,0 +1,3 @@
+export default {
+  title: 'Home',
+}

package/template-vike/public/style.css

@@ -0,0 +1,71 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #f5f5f5;
+  color: #333;
+}
+
+.layout {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  padding: 1rem 0;
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 2rem;
+}
+
+.nav-links {
+  display: flex;
+  gap: 1rem;
+}
+
+.nav-links a {
+  color: #555;
+  text-decoration: none;
+}
+
+.nav-links a:hover {
+  color: #111;
+}
+
+.page {
+  text-align: center;
+  padding: 2rem 0;
+}
+
+h1 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.buttons {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+button {
+  font-size: 1.25rem;
+  padding: 0.5rem 1.5rem;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: white;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+button:hover {
+  background: #f0f0f0;
+}

package/template-vike/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import vike from 'vike/plugin'
+import sygnal from 'sygnal/vite'
+
+export default defineConfig({
+  plugins: [
+    sygnal({ disableHmr: true }),
+    vike(),
+  ],
+})

package/template-vite/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>Sygnal App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/template-vite/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "my-sygnal-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "sygnal": "^5.1.0"
+  },
+  "devDependencies": {
+    "vite": "^6.4.1"
+  }
+}

package/template-vite/src/App.jsx

@@ -0,0 +1,28 @@
+function App({ state }) {
+  return (
+    <div className="app">
+      <h1>Sygnal</h1>
+      <div className="counter-card">
+        <p>Count: {state.count}</p>
+        <div className="buttons">
+          <button className="dec">-</button>
+          <button className="inc">+</button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+App.initialState = { count: 0 }
+
+App.intent = ({ DOM }) => ({
+  INC: DOM.click('.inc'),
+  DEC: DOM.click('.dec'),
+})
+
+App.model = {
+  INC: (state) => ({ ...state, count: state.count + 1 }),
+  DEC: (state) => ({ ...state, count: state.count - 1 }),
+}
+
+export default App

package/template-vite/src/main.js

@@ -0,0 +1,10 @@
+import { run } from 'sygnal'
+import App from './App.jsx'
+import './style.css'
+
+const { hmr, dispose } = run(App)
+
+if (import.meta.hot) {
+  import.meta.hot.accept('./App.jsx', hmr)
+  import.meta.hot.dispose(dispose)
+}

package/template-vite/src/style.css

@@ -0,0 +1,57 @@
+* {
+  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;
+}
+
+.app {
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+  color: #111;
+}
+
+.counter-card {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem 3rem;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.counter-card p {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.buttons {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+button {
+  font-size: 1.25rem;
+  padding: 0.5rem 1.5rem;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: white;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+button:hover {
+  background: #f0f0f0;
+}

package/template-vite/vite.config.js

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