create-rudder-app 0.3.1 → 0.5.0

package/dist/templates/demos/sync.js

@@ -0,0 +1,97 @@
+export function demosSyncView() {
+    return `import '@/index.css'
+import { useEffect, useRef, useState } from 'react'
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'y-websocket'
+
+function getWsUrl() {
+  if (typeof window === 'undefined') return ''
+  return \`ws://\${window.location.host}/ws-sync\`
+}
+
+export default function SyncDemo() {
+  const [connected, setConnected] = useState(false)
+  const [text,      setText]      = useState('')
+  const [users,     setUsers]     = useState<{ name: string; color: string }[]>([])
+  const [myName]                  = useState(() => \`User-\${Math.floor(Math.random() * 1000)}\`)
+  const [myColor]                 = useState(() => \`hsl(\${Math.floor(Math.random() * 360)}, 70%, 50%)\`)
+
+  const docRef      = useRef<Y.Doc | null>(null)
+  const provRef     = useRef<WebsocketProvider | null>(null)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    const doc      = new Y.Doc()
+    const ytext    = doc.getText('content')
+    const provider = new WebsocketProvider(getWsUrl(), 'sync-demo', doc)
+
+    docRef.current  = doc
+    provRef.current = provider
+
+    ytext.observe(() => setText(ytext.toString()))
+    provider.on('status', ({ status }: { status: string }) => setConnected(status === 'connected'))
+    provider.awareness.setLocalStateField('user', { name: myName, color: myColor })
+
+    const syncUsers = () => {
+      const states = [...provider.awareness.getStates().values()] as { user?: { name: string; color: string } }[]
+      setUsers(states.map(s => s.user).filter((u): u is { name: string; color: string } => Boolean(u)))
+    }
+    provider.awareness.on('change', syncUsers)
+    syncUsers()
+
+    return () => { provider.destroy(); doc.destroy() }
+  }, [myName, myColor])
+
+  function onChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    const ytext = docRef.current?.getText('content')
+    if (!ytext) return
+    docRef.current?.transact(() => {
+      ytext.delete(0, ytext.length)
+      ytext.insert(0, e.target.value)
+    })
+  }
+
+  return (
+    <div className="page">
+      <nav className="page-nav">
+        <div className="brand">
+          <span className="brand-dot" />
+          RudderJS
+        </div>
+        <div className="nav-right">
+          <a href="/demos" className="nav-link">← Demos</a>
+        </div>
+      </nav>
+
+      <section className="hero">
+        <h1 className="hero-title">Collaborative editor</h1>
+        <p className="hero-lead">
+          Yjs CRDT over @rudderjs/sync. Open this page in two tabs to see real-time updates.{' '}
+          {connected ? '🟢 connected' : '⚪ connecting…'}
+        </p>
+      </section>
+
+      <section className="feature-section" style={{ maxWidth: '40rem', margin: '0 auto' }}>
+        <p className="form-label">Active users:</p>
+        <ul style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginBottom: '1rem' }}>
+          {users.map((u, i) => (
+            <li key={i} className="inline-code" style={{ borderLeft: \`3px solid \${u.color}\`, paddingLeft: '0.5rem' }}>
+              {u.name}
+            </li>
+          ))}
+        </ul>
+        <textarea
+          ref={textareaRef}
+          className="form-input"
+          rows={10}
+          value={text}
+          onChange={onChange}
+          placeholder="Start typing…"
+        />
+      </section>
+    </div>
+  )
+}
+`;
+}
+//# sourceMappingURL=sync.js.map

package/dist/templates/demos/sync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sync.js","sourceRoot":"","sources":["../../../src/templates/demos/sync.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,aAAa;IAC3B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FR,CAAA;AACD,CAAC"}

package/dist/templates/demos/system-info.d.ts

@@ -0,0 +1,3 @@
+export declare function demosSystemInfoView(): string;
+export declare function demosSystemInfoApiBlock(): string;
+//# sourceMappingURL=system-info.d.ts.map

package/dist/templates/demos/system-info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-info.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/system-info.ts"],"names":[],"mappings":"AAGA,wBAAgB,mBAAmB,IAAI,MAAM,CA4G5C;AAED,wBAAgB,uBAAuB,IAAI,MAAM,CA6BhD"}

package/dist/templates/demos/system-info.js

@@ -0,0 +1,142 @@
+// SystemInfo demo — three shell commands run via @rudderjs/process,
+// comparing sequential vs parallel cost via Process.pool().
+export function demosSystemInfoView() {
+    return `import { useState } from 'react'
+import '@/index.css'
+
+interface CommandResult {
+  command:  string
+  ok:       boolean
+  exitCode: number
+  duration: number
+  stdout:   string
+  stderr:   string
+}
+
+interface SystemInfoResponse {
+  results:    CommandResult[]
+  totalMs:    number
+  parallelMs: number
+}
+
+export default function SystemInfo() {
+  const [data,    setData   ] = useState<SystemInfoResponse | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error,   setError  ] = useState<string | null>(null)
+
+  async function run() {
+    setLoading(true); setError(null)
+    try {
+      const res  = await fetch('/api/system-info')
+      const body = await res.json() as SystemInfoResponse | { message: string }
+      if (!res.ok) throw new Error((body as { message: string }).message ?? 'Failed')
+      setData(body as SystemInfoResponse)
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="page">
+      <nav className="page-nav">
+        <div className="brand">
+          <span className="brand-dot" />
+          RudderJS
+        </div>
+        <div className="nav-right">
+          <a href="/demos" className="nav-link">Demos</a>
+          <a href="/" className="nav-link">Home</a>
+        </div>
+      </nav>
+
+      <section className="hero">
+        <h1 className="hero-title">System Info</h1>
+        <p className="hero-lead">
+          Three shell commands run in parallel via{' '}
+          <code className="inline-code">@rudderjs/process</code> —{' '}
+          <code className="inline-code">git rev-parse HEAD</code>,{' '}
+          <code className="inline-code">node --version</code>,{' '}
+          <code className="inline-code">uptime</code>. Click run to dispatch.
+        </p>
+      </section>
+
+      <section className="feature-section">
+        <div className="form-card">
+          <button
+            className="form-submit"
+            onClick={run}
+            disabled={loading}
+            style={{ marginBottom: '1rem' }}
+          >
+            {loading ? 'Running…' : 'Run commands'}
+          </button>
+
+          {error && <p className="form-error">{error}</p>}
+
+          {data && (
+            <>
+              <p className="feature-desc" style={{ fontSize: '0.75rem', marginBottom: '0.75rem' }}>
+                3 commands · sequential cost {data.totalMs}ms · parallel cost {data.parallelMs}ms
+                {' · '}
+                <strong>{Math.round((1 - data.parallelMs / data.totalMs) * 100)}% faster</strong> via{' '}
+                <code className="inline-code">Process.pool()</code>
+              </p>
+
+              {data.results.map((r, i) => (
+                <div key={i} style={{ marginBottom: '0.75rem', padding: '0.75rem', borderRadius: '0.375rem', border: '1px solid var(--border, #e5e7eb)' }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.25rem' }}>
+                    <code style={{ fontSize: '0.85rem', fontWeight: 600 }}>{r.command}</code>
+                    <span style={{ fontSize: '0.7rem', opacity: 0.7 }}>
+                      exit {r.exitCode} · {r.duration}ms
+                    </span>
+                  </div>
+                  {r.stdout && (
+                    <pre style={{ margin: 0, padding: '0.5rem', borderRadius: '0.25rem', background: 'var(--muted, #f4f4f5)', fontSize: '0.75rem', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>{r.stdout}</pre>
+                  )}
+                  {r.stderr && (
+                    <pre style={{ margin: '0.25rem 0 0', padding: '0.5rem', borderRadius: '0.25rem', background: 'var(--destructive-bg, #fef2f2)', color: 'var(--destructive, #b91c1c)', fontSize: '0.75rem', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>{r.stderr}</pre>
+                  )}
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+      </section>
+    </div>
+  )
+}
+`;
+}
+export function demosSystemInfoApiBlock() {
+    return `// GET /api/system-info — three shell commands, sequential vs Process.pool() parallel.
+router.get('/api/system-info', async (_req, res) => {
+  const { Process } = await import('@rudderjs/process')
+  const commands = ['git rev-parse HEAD', 'node --version', 'uptime']
+
+  const sequential: { command: string; duration: number }[] = []
+  for (const cmd of commands) {
+    const t0 = Date.now()
+    await Process.run(cmd)
+    sequential.push({ command: cmd, duration: Date.now() - t0 })
+  }
+  const totalMs = sequential.reduce((sum, r) => sum + r.duration, 0)
+
+  const t0   = Date.now()
+  const pool = await Process.pool(commands)
+  const parallelMs = Date.now() - t0
+
+  const results = pool.results.map((r, i) => ({
+    command:  commands[i],
+    ok:       r.successful(),
+    exitCode: r.exitCode,
+    duration: sequential[i]!.duration,
+    stdout:   r.stdout.trim(),
+    stderr:   r.stderr.trim(),
+  }))
+
+  res.json({ results, totalMs, parallelMs })
+})`;
+}
+//# sourceMappingURL=system-info.js.map

package/dist/templates/demos/system-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-info.js","sourceRoot":"","sources":["../../../src/templates/demos/system-info.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,4DAA4D;AAE5D,MAAM,UAAU,mBAAmB;IACjC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GR,CAAA;AACD,CAAC;AAED,MAAM,UAAU,uBAAuB;IACrC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BN,CAAA;AACH,CAAC"}

package/dist/templates/demos/todos.d.ts

@@ -0,0 +1,6 @@
+export declare function demosTodosView(): string;
+export declare function todoModelPrisma(): string;
+export declare function todoSchema(): string;
+export declare function todoService(): string;
+export declare function todoServiceProvider(): string;
+//# sourceMappingURL=todos.d.ts.map

package/dist/templates/demos/todos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"todos.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/todos.ts"],"names":[],"mappings":"AAMA,wBAAgB,cAAc,IAAI,MAAM,CA4HvC;AAED,wBAAgB,eAAe,IAAI,MAAM,CASxC;AAED,wBAAgB,UAAU,IAAI,MAAM,CAwBnC;AAED,wBAAgB,WAAW,IAAI,MAAM,CAgCpC;AAED,wBAAgB,mBAAmB,IAAI,MAAM,CA8C5C"}

package/dist/templates/demos/todos.js

@@ -0,0 +1,246 @@
+// Todos demo — ORM + interactive CRUD via @rudderjs/router.
+//
+// Scaffolds five files under `app/Modules/Todo/` (Laravel-style self-contained
+// module) plus the React view, and wires them into AppServiceProvider's boot()
+// so the API routes register at app startup.
+export function demosTodosView() {
+    return `import '@/index.css'
+import { useState, useRef } from 'react'
+import type { Todo } from '../../Modules/Todo/TodoSchema.js'
+
+interface TodosDemoProps {
+  todos: Todo[]
+}
+
+export default function TodosDemo({ todos: initial }: TodosDemoProps) {
+  const [todos, setTodos]     = useState<Todo[]>(initial)
+  const [loading, setLoading] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  async function addTodo() {
+    const title = inputRef.current?.value.trim()
+    if (!title) return
+    setLoading(true)
+    const res = await fetch('/api/todos', {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body:    JSON.stringify({ title }),
+    })
+    const { data } = await res.json() as { data: Todo }
+    setTodos(prev => [data, ...prev])
+    if (inputRef.current) inputRef.current.value = ''
+    setLoading(false)
+  }
+
+  async function toggleTodo(todo: Todo) {
+    const res = await fetch(\`/api/todos/\${todo.id}\`, {
+      method:  'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body:    JSON.stringify({ completed: !todo.completed }),
+    })
+    const { data } = await res.json() as { data: Todo }
+    setTodos(prev => prev.map(t => t.id === data.id ? data : t))
+  }
+
+  async function deleteTodo(id: string) {
+    await fetch(\`/api/todos/\${id}\`, { method: 'DELETE' })
+    setTodos(prev => prev.filter(t => t.id !== id))
+  }
+
+  const done    = todos.filter(t => t.completed).length
+  const pending = todos.length - done
+
+  return (
+    <div className="page">
+      <nav className="page-nav">
+        <div className="brand">
+          <span className="brand-dot" />
+          RudderJS
+        </div>
+        <div className="nav-right">
+          <a href="/demos" className="nav-link">Demos</a>
+          <a href="/" className="nav-link">Home</a>
+        </div>
+      </nav>
+
+      <section className="hero">
+        <h1 className="hero-title">Todo List</h1>
+        <p className="hero-lead">
+          {pending} remaining · {done} completed
+        </p>
+        <p className="hero-meta">
+          Rendered from <code className="inline-code">app/Views/Demos/Todos.tsx</code> via{' '}
+          <code className="inline-code">view('demos.todos', &#123; todos &#125;)</code>.
+          Initial data fetched by the controller, not the view.
+        </p>
+      </section>
+
+      <section className="feature-section">
+        <div className="demo-narrow">
+          <div className="demo-card">
+            <div className="input-row">
+              <input
+                ref={inputRef}
+                className="form-input"
+                placeholder="What needs to be done?"
+                onKeyDown={e => e.key === 'Enter' && addTodo()}
+              />
+              <button className="button-primary" onClick={addTodo} disabled={loading}>
+                {loading ? '...' : 'Add'}
+              </button>
+            </div>
+          </div>
+
+          <div className="demo-card">
+            <div className="demo-card-header">
+              <h2 className="demo-card-title">Tasks</h2>
+            </div>
+            <div className="demo-card-body">
+              {todos.length === 0 && (
+                <p className="empty-state">No todos yet. Add one above!</p>
+              )}
+              {todos.map(todo => (
+                <div key={todo.id} className="list-row group">
+                  <input
+                    type="checkbox"
+                    className="checkbox-input"
+                    checked={todo.completed}
+                    onChange={() => toggleTodo(todo)}
+                  />
+                  <span className={\`list-row-text\${todo.completed ? ' list-row-text-done' : ''}\`}>
+                    {todo.title}
+                  </span>
+                  <button
+                    onClick={() => deleteTodo(todo.id)}
+                    className="list-row-delete"
+                    aria-label="Delete"
+                  >
+                    ✕
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+`;
+}
+export function todoModelPrisma() {
+    return `model Todo {
+  id        String   @id @default(cuid())
+  title     String
+  completed Boolean  @default(false)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+`;
+}
+export function todoSchema() {
+    return `import { z } from 'zod'
+
+export const TodoInputSchema = z.object({
+  title:     z.string().min(1, 'Title is required'),
+  completed: z.boolean().optional().default(false),
+})
+
+export const TodoUpdateSchema = z.object({
+  title:     z.string().min(1).optional(),
+  completed: z.boolean().optional(),
+})
+
+export type TodoInput  = z.infer<typeof TodoInputSchema>
+export type TodoUpdate = z.infer<typeof TodoUpdateSchema>
+
+export interface Todo {
+  id:        string
+  title:     string
+  completed: boolean
+  createdAt: Date
+  updatedAt: Date
+}
+`;
+}
+export function todoService() {
+    return `import { Injectable, resolve } from '@rudderjs/core'
+import type { OrmAdapter } from '@rudderjs/orm'
+import type { Todo, TodoInput, TodoUpdate } from './TodoSchema.js'
+
+@Injectable()
+export class TodoService {
+  private get db(): OrmAdapter {
+    return resolve<OrmAdapter>('db')
+  }
+
+  findAll(): Promise<Todo[]> {
+    return this.db.query<Todo>('todo').orderBy('createdAt', 'DESC').get()
+  }
+
+  findById(id: string): Promise<Todo | null> {
+    return this.db.query<Todo>('todo').find(id)
+  }
+
+  create(input: TodoInput): Promise<Todo> {
+    return this.db.query<Todo>('todo').create(input)
+  }
+
+  update(id: string, input: TodoUpdate): Promise<Todo> {
+    return this.db.query<Todo>('todo').update(id, input as Partial<Todo>)
+  }
+
+  delete(id: string): Promise<void> {
+    return this.db.query<Todo>('todo').delete(id)
+  }
+}
+`;
+}
+export function todoServiceProvider() {
+    return `import { ServiceProvider } from '@rudderjs/core'
+import { router } from '@rudderjs/router'
+import { TodoService } from './TodoService.js'
+import { TodoInputSchema, TodoUpdateSchema } from './TodoSchema.js'
+
+export class TodoServiceProvider extends ServiceProvider {
+  register(): void {
+    this.app.singleton(TodoService, () => new TodoService())
+  }
+
+  override async boot(): Promise<void> {
+    const service = this.app.make<TodoService>(TodoService)
+
+    router.get('/api/todos', async (_req, res) => {
+      const todos = await service.findAll()
+      res.json({ data: todos })
+    })
+
+    router.post('/api/todos', async (req, res) => {
+      const parsed = TodoInputSchema.safeParse(req.body)
+      if (!parsed.success) {
+        res.status(422).json({ errors: parsed.error.flatten().fieldErrors })
+        return
+      }
+      const todo = await service.create(parsed.data)
+      res.status(201).json({ data: todo })
+    })
+
+    router.patch('/api/todos/:id', async (req, res) => {
+      const parsed = TodoUpdateSchema.safeParse(req.body)
+      if (!parsed.success) {
+        res.status(422).json({ errors: parsed.error.flatten().fieldErrors })
+        return
+      }
+      const todo = await service.update(req.params['id']!, parsed.data)
+      res.json({ data: todo })
+    })
+
+    router.delete('/api/todos/:id', async (req, res) => {
+      await service.delete(req.params['id']!)
+      res.status(204).send('')
+    })
+  }
+}
+`;
+}
+//# sourceMappingURL=todos.js.map

package/dist/templates/demos/todos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"todos.js","sourceRoot":"","sources":["../../../src/templates/demos/todos.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,EAAE;AACF,+EAA+E;AAC/E,+EAA+E;AAC/E,6CAA6C;AAE7C,MAAM,UAAU,cAAc;IAC5B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HR,CAAA;AACD,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,OAAO;;;;;;;CAOR,CAAA;AACD,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO;;;;;;;;;;;;;;;;;;;;;;CAsBR,CAAA;AACD,CAAC;AAED,MAAM,UAAU,WAAW;IACzB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BR,CAAA;AACD,CAAC;AAED,MAAM,UAAU,mBAAmB;IACjC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CR,CAAA;AACD,CAAC"}

package/dist/templates/demos/ws.d.ts

@@ -0,0 +1,2 @@
+export declare function demosWsView(): string;
+//# sourceMappingURL=ws.d.ts.map

package/dist/templates/demos/ws.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ws.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/ws.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,IAAI,MAAM,CAwGpC"}

package/dist/templates/demos/ws.js

@@ -0,0 +1,106 @@
+export function demosWsView() {
+    return `import '@/index.css'
+import { useEffect, useRef, useState } from 'react'
+import { RudderSocket } from '@/RudderSocket'
+
+type Message = { user: string; text: string; ts: number }
+type Member  = { id: string; name: string }
+
+function getWsUrl() {
+  if (typeof window === 'undefined') return ''
+  return \`ws://\${window.location.host}/ws\`
+}
+
+export default function WsDemo() {
+  const [me, setMe]               = useState('')
+  const socketRef                 = useRef<RudderSocket | null>(null)
+  const [connected, setConnected] = useState(false)
+  const [messages,  setMessages]  = useState<Message[]>([])
+  const [members,   setMembers]   = useState<Member[]>([])
+  const [input,     setInput]     = useState('')
+
+  useEffect(() => { setMe(\`User-\${Math.floor(Math.random() * 1000)}\`) }, [])
+
+  useEffect(() => {
+    if (!me) return
+    const socket = new RudderSocket(getWsUrl())
+    socketRef.current = socket
+
+    const chat = socket.channel('chat')
+    chat.on('message', d => setMessages(prev => [...prev, d as Message]))
+
+    const room = socket.presence('lobby', 'demo-token')
+    room.on('presence.members', d => {
+      setMembers(d as Member[])
+      setConnected(true)
+    })
+    room.on('presence.joined', d => {
+      const u = d as Member
+      setMembers(prev => [...prev.filter(m => m.id !== u.id), u])
+    })
+    room.on('presence.left', d => {
+      const id = (d as { id: string }).id
+      setMembers(prev => prev.filter(m => m.id !== id))
+    })
+
+    return () => { socket.disconnect() }
+  }, [me])
+
+  async function send() {
+    if (!input.trim()) return
+    await fetch('/api/ws/broadcast', {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body:    JSON.stringify({ user: me, text: input.trim() }),
+    })
+    setInput('')
+  }
+
+  return (
+    <div className="page">
+      <nav className="page-nav">
+        <div className="brand">
+          <span className="brand-dot" />
+          RudderJS
+        </div>
+        <div className="nav-right">
+          <a href="/demos" className="nav-link">← Demos</a>
+        </div>
+      </nav>
+
+      <section className="hero">
+        <h1 className="hero-title">WebSocket chat</h1>
+        <p className="hero-lead">
+          Pub/sub + presence over a single WebSocket. Connected as <strong>{me}</strong>.{' '}
+          {connected ? '🟢 connected' : '⚪ connecting…'}
+        </p>
+      </section>
+
+      <section className="feature-section" style={{ maxWidth: '40rem', margin: '0 auto' }}>
+        <p className="form-label">Members ({members.length})</p>
+        <ul style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginBottom: '1rem' }}>
+          {members.map(m => (
+            <li key={m.id} className="inline-code">{m.name}</li>
+          ))}
+        </ul>
+
+        <div style={{ minHeight: '12rem', marginBottom: '1rem' }}>
+          {messages.map((m, i) => (
+            <p key={i} style={{ margin: '0.25rem 0' }}>
+              <strong>{m.user}:</strong> {m.text}
+            </p>
+          ))}
+        </div>
+
+        <form onSubmit={e => { e.preventDefault(); void send() }} style={{ display: 'flex', gap: '0.5rem' }}>
+          <input className="form-input" value={input}
+            onChange={e => setInput(e.target.value)} placeholder="Say something…" />
+          <button type="submit" className="form-submit" style={{ width: 'auto' }}>Send</button>
+        </form>
+      </section>
+    </div>
+  )
+}
+`;
+}
+//# sourceMappingURL=ws.js.map

package/dist/templates/demos/ws.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ws.js","sourceRoot":"","sources":["../../../src/templates/demos/ws.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW;IACzB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGR,CAAA;AACD,CAAC"}

package/dist/templates/env.d.ts

@@ -0,0 +1,7 @@
+import type { TemplateContext } from '../templates.js';
+export declare function dotenv(ctx: TemplateContext): string;
+export declare function dotenvExample(ctx: TemplateContext): string;
+export declare function envDts(): string;
+export declare function gitignore(): string;
+export declare function pnpmWorkspace(): string;
+//# sourceMappingURL=env.d.ts.map

package/dist/templates/env.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"env.d.ts","sourceRoot":"","sources":["../../src/templates/env.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEtD,wBAAgB,MAAM,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,CA+CnD;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,CAgD1D;AAED,wBAAgB,MAAM,IAAI,MAAM,CAO/B;AAED,wBAAgB,SAAS,IAAI,MAAM,CASlC;AAED,wBAAgB,aAAa,IAAI,MAAM,CAEtC"}