create-rudder-app 0.3.1 → 0.5.0

package/dist/templates/demos/avatar.js

@@ -0,0 +1,182 @@
+// Avatar demo — image upload + resize via @rudderjs/image, persisted to the
+// `public` Storage disk so the resized URL is browser-reachable.
+export function demosAvatarView() {
+    return `import { useState, useRef } from 'react'
+import '@/index.css'
+
+interface ProcessedImage {
+  url:    string
+  format: string
+  width:  number
+  height: number
+  size:   number
+}
+
+interface UploadResponse {
+  original:  { format: string; width: number; height: number; size: number }
+  processed: ProcessedImage
+}
+
+export default function AvatarResize() {
+  const inputRef               = useRef<HTMLInputElement>(null)
+  const [preview,  setPreview] = useState<string | null>(null)
+  const [result,   setResult ] = useState<UploadResponse | null>(null)
+  const [loading,  setLoading] = useState(false)
+  const [error,    setError  ] = useState<string | null>(null)
+
+  function onPick(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0]
+    if (!file) return
+    setError(null)
+    setResult(null)
+    const reader = new FileReader()
+    reader.onload = () => setPreview(reader.result as string)
+    reader.readAsDataURL(file)
+  }
+
+  async function upload() {
+    if (!preview) return
+    setLoading(true); setError(null)
+    try {
+      const res = await fetch('/api/avatar', {
+        method:  'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body:    JSON.stringify({ image: preview }),
+      })
+      const data = await res.json() as UploadResponse | { message: string }
+      if (!res.ok) throw new Error((data as { message: string }).message ?? 'Upload failed')
+      setResult(data as UploadResponse)
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function reset() {
+    setPreview(null); setResult(null); setError(null)
+    if (inputRef.current) inputRef.current.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>
+          <a href="/" className="nav-link">Home</a>
+        </div>
+      </nav>
+
+      <section className="hero">
+        <h1 className="hero-title">Avatar Resize</h1>
+        <p className="hero-lead">
+          Upload any image — the server resizes it to 256×256, converts to WebP at quality 85,
+          and saves to the <code className="inline-code">public</code> storage disk via{' '}
+          <code className="inline-code">@rudderjs/image</code>.
+        </p>
+      </section>
+
+      <section className="feature-section">
+        <div className="form-card">
+          <input
+            ref={inputRef}
+            type="file"
+            accept="image/*"
+            onChange={onPick}
+            className="form-input"
+            style={{ marginBottom: '1rem' }}
+          />
+
+          {preview && !result && (
+            <>
+              <div style={{ marginBottom: '1rem' }}>
+                <p className="form-label">Original</p>
+                <img src={preview} alt="preview" style={{ maxWidth: '256px', maxHeight: '256px', borderRadius: '0.5rem', border: '1px solid var(--border, #e5e7eb)' }} />
+              </div>
+              <div style={{ display: 'flex', gap: '0.5rem' }}>
+                <button className="form-submit" onClick={upload} disabled={loading} style={{ flex: 1 }}>
+                  {loading ? 'Processing…' : 'Resize & upload'}
+                </button>
+                <button onClick={reset} disabled={loading} style={{ padding: '0.5rem 1rem', borderRadius: '0.375rem', border: '1px solid var(--border, #e5e7eb)', background: 'transparent', cursor: 'pointer' }}>
+                  Reset
+                </button>
+              </div>
+            </>
+          )}
+
+          {error && (
+            <p className="form-error" style={{ marginTop: '1rem' }}>{error}</p>
+          )}
+
+          {result && (
+            <>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginTop: '1rem' }}>
+                <div>
+                  <p className="form-label">Original</p>
+                  {preview && (
+                    <img src={preview} alt="original" style={{ maxWidth: '100%', borderRadius: '0.5rem', border: '1px solid var(--border, #e5e7eb)' }} />
+                  )}
+                  <p className="feature-desc" style={{ fontSize: '0.75rem' }}>
+                    {result.original.format} · {result.original.width}×{result.original.height} ·{' '}
+                    {(result.original.size / 1024).toFixed(1)} KB
+                  </p>
+                </div>
+                <div>
+                  <p className="form-label">Resized (WebP, 256×256)</p>
+                  <img src={result.processed.url} alt="resized" style={{ maxWidth: '100%', borderRadius: '0.5rem', border: '1px solid var(--border, #e5e7eb)' }} />
+                  <p className="feature-desc" style={{ fontSize: '0.75rem' }}>
+                    {result.processed.format} · {result.processed.width}×{result.processed.height} ·{' '}
+                    {(result.processed.size / 1024).toFixed(1)} KB ·{' '}
+                    {Math.round((1 - result.processed.size / result.original.size) * 100)}% smaller
+                  </p>
+                </div>
+              </div>
+              <div style={{ marginTop: '1rem' }}>
+                <button onClick={reset} style={{ padding: '0.5rem 1rem', borderRadius: '0.375rem', border: '1px solid var(--border, #e5e7eb)', background: 'transparent', cursor: 'pointer' }}>
+                  Try another
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </section>
+    </div>
+  )
+}
+`;
+}
+export function demosAvatarApiBlock() {
+    return `// POST /api/avatar — resize an uploaded image to 256x256 webp via @rudderjs/image,
+// then write to the 'public' Storage disk so the URL is browser-reachable.
+router.post('/api/avatar', async (req, res) => {
+  const { image: dataUrl } = (req.body ?? {}) as { image?: string }
+  if (!dataUrl || !dataUrl.startsWith('data:image/')) {
+    return res.status(422).json({ message: 'Body must be { image: "data:image/...;base64,..." }' })
+  }
+  const base64 = dataUrl.split(',', 2)[1] ?? ''
+  const input  = Buffer.from(base64, 'base64')
+
+  const { image }   = await import('@rudderjs/image')
+  const { Storage } = await import('@rudderjs/storage')
+
+  const original = await image(input).metadata()
+  const buf      = await image(input).resize(256, 256).format('webp').quality(85).toBuffer()
+  const meta     = await image(buf).metadata()
+
+  const filename = \`avatars/\${Date.now()}-\${Math.random().toString(36).slice(2, 8)}.webp\`
+  await Storage.disk('public').put(filename, buf)
+
+  res.json({
+    original:  { format: original.format, width: original.width, height: original.height, size: input.length },
+    processed: {
+      url:    Storage.disk('public').url(filename),
+      format: meta.format, width: meta.width, height: meta.height, size: buf.length,
+    },
+  })
+})`;
+}
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/templates/demos/avatar.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,iEAAiE;AAEjE,MAAM,UAAU,eAAe;IAC7B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJR,CAAA;AACD,CAAC;AAED,MAAM,UAAU,mBAAmB;IACjC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BN,CAAA;AACH,CAAC"}

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

@@ -0,0 +1,3 @@
+export declare function demosCacheView(): string;
+export declare function demosCacheApiBlock(): string;
+//# sourceMappingURL=cache.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cache.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/cache.ts"],"names":[],"mappings":"AAGA,wBAAgB,cAAc,IAAI,MAAM,CA8EvC;AAED,wBAAgB,kBAAkB,IAAI,MAAM,CAgB3C"}

package/dist/templates/demos/cache.js

@@ -0,0 +1,99 @@
+// Cache counter demo — `Cache.get` + `Cache.set` round-trip with no TTL.
+// Cache is a Tier A package, so this demo is always available.
+export function demosCacheView() {
+    return `import { useState } from 'react'
+import '@/index.css'
+
+interface CacheResponse {
+  views: number
+  key:   string
+}
+
+export default function CacheDemo() {
+  const [data, setData] = useState<CacheResponse | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  async function bump() {
+    setLoading(true)
+    try {
+      const res = await fetch('/api/cache/views', { method: 'POST' })
+      setData(await res.json() as CacheResponse)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function clear() {
+    setLoading(true)
+    try {
+      await fetch('/api/cache/views', { method: 'DELETE' })
+      setData({ views: 0, key: 'demos:views' })
+    } 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">Cache counter</h1>
+        <p className="hero-lead">
+          Click "Bump" to read the current value via <code className="inline-code">Cache.get</code>,
+          increment it, and write it back via <code className="inline-code">Cache.set</code>.
+          Default driver is in-memory; swap it via <code className="inline-code">config/cache.ts</code>.
+        </p>
+      </section>
+
+      <section className="feature-section" style={{ maxWidth: '32rem', margin: '0 auto' }}>
+        <div className="form-card" style={{ textAlign: 'center' }}>
+          <p className="form-label" style={{ marginBottom: '0.5rem' }}>Views recorded</p>
+          <p style={{ fontSize: '3rem', fontWeight: 700, margin: '0.5rem 0' }}>
+            {data?.views ?? '—'}
+          </p>
+          <p className="feature-desc" style={{ fontSize: '0.7rem', marginBottom: '1rem' }}>
+            key: <code>{data?.key ?? 'demos:views'}</code>
+          </p>
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            <button className="form-submit" onClick={bump} disabled={loading} style={{ flex: 1 }}>
+              {loading ? '…' : 'Bump'}
+            </button>
+            <button onClick={clear} disabled={loading} style={{ padding: '0.5rem 1rem', borderRadius: '0.375rem', border: '1px solid var(--border, #e5e7eb)', background: 'transparent', cursor: 'pointer' }}>
+              Clear
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+`;
+}
+export function demosCacheApiBlock() {
+    return `// POST /api/cache/views — read+increment+write (no TTL); DELETE to forget the key.
+router.post('/api/cache/views', async (_req, res) => {
+  const { Cache } = await import('@rudderjs/cache')
+  const KEY     = 'demos:views'
+  const current = (await Cache.get<number>(KEY)) ?? 0
+  const next    = current + 1
+  await Cache.set(KEY, next)
+  res.json({ views: next, key: KEY })
+})
+
+router.delete('/api/cache/views', async (_req, res) => {
+  const { Cache } = await import('@rudderjs/cache')
+  await Cache.forget('demos:views')
+  res.json({ views: 0, key: 'demos:views' })
+})`;
+}
+//# sourceMappingURL=cache.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cache.js","sourceRoot":"","sources":["../../../src/templates/demos/cache.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,+DAA+D;AAE/D,MAAM,UAAU,cAAc;IAC5B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ER,CAAA;AACD,CAAC;AAED,MAAM,UAAU,kBAAkB;IAChC,OAAO;;;;;;;;;;;;;;GAcN,CAAA;AACH,CAAC"}

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

@@ -0,0 +1,3 @@
+import type { TemplateContext } from '../../templates.js';
+export declare function demosContactView(ctx: TemplateContext): string;
+//# sourceMappingURL=contact.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"contact.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/contact.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEzD,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,CAyG7D"}

package/dist/templates/demos/contact.js

@@ -0,0 +1,106 @@
+export function demosContactView(ctx) {
+    // CSRF is only enforced when @rudderjs/auth is installed (CsrfMiddleware
+    // wraps the /api/contact route in routes/api.ts). Without auth, the
+    // unprotected form just succeeds.
+    const sendsCsrf = ctx.packages.auth ? 'true' : 'false';
+    return `import '@/index.css'
+import { useState } from 'react'
+import { getCsrfToken } from '@rudderjs/middleware'
+
+interface FormFields { name: string; email: string; message: string }
+interface FormErrors { name?: string; email?: string; message?: string }
+
+export default function ContactDemo() {
+  const [fields, setFields] = useState<FormFields>({ name: '', email: '', message: '' })
+  const [errors, setErrors] = useState<FormErrors>({})
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
+  const [message, setMessage] = useState('')
+
+  function setField(key: keyof FormFields, value: string) {
+    setFields(f => ({ ...f, [key]: value }))
+    if (errors[key]) setErrors(e => ({ ...e, [key]: undefined }))
+  }
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault()
+    setStatus('loading')
+    setErrors({})
+
+    const headers: Record<string, string> = { 'Content-Type': 'application/json' }
+    if (${sendsCsrf}) headers['X-CSRF-Token'] = getCsrfToken()
+
+    const res  = await fetch('/api/contact', {
+      method:  'POST',
+      headers,
+      body:    JSON.stringify(fields),
+    })
+    const data = await res.json() as { ok?: boolean; message?: string; errors?: FormErrors }
+
+    if (res.ok) {
+      setStatus('success')
+      setMessage(data.message ?? 'Thanks!')
+      setFields({ name: '', email: '', message: '' })
+    } else if (res.status === 422) {
+      setStatus('error')
+      setErrors(data.errors ?? {})
+    } else {
+      setStatus('error')
+      setMessage(\`\${res.status} — \${data.message ?? 'Request failed.'}\`)
+    }
+  }
+
+  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">Contact</h1>
+        <p className="hero-lead">
+          POSTs to <code className="inline-code">/api/contact</code>${ctx.packages.auth
+        ? ' with an X-CSRF-Token header.'
+        : '. Add @rudderjs/auth to require CSRF.'}{' '}
+          Server-side validated with Zod.
+        </p>
+      </section>
+
+      <section className="feature-section" style={{ maxWidth: '32rem', margin: '0 auto' }}>
+        <form onSubmit={submit} className="form-card">
+          <div>
+            <label className="form-label" htmlFor="name">Name</label>
+            <input id="name" className="form-input" value={fields.name}
+              onChange={e => setField('name', e.target.value)} />
+            {errors.name && <p className="form-error">{errors.name}</p>}
+          </div>
+          <div>
+            <label className="form-label" htmlFor="email">Email</label>
+            <input id="email" type="email" className="form-input" value={fields.email}
+              onChange={e => setField('email', e.target.value)} />
+            {errors.email && <p className="form-error">{errors.email}</p>}
+          </div>
+          <div>
+            <label className="form-label" htmlFor="message">Message</label>
+            <textarea id="message" rows={4} className="form-input" value={fields.message}
+              onChange={e => setField('message', e.target.value)} />
+            {errors.message && <p className="form-error">{errors.message}</p>}
+          </div>
+          <button type="submit" className="form-submit" disabled={status === 'loading'}>
+            {status === 'loading' ? 'Sending…' : 'Send message'}
+          </button>
+          {status === 'success' && <p className="form-success">{message}</p>}
+          {status === 'error' && message && <p className="form-error">{message}</p>}
+        </form>
+      </section>
+    </div>
+  )
+}
+`;
+}
+//# sourceMappingURL=contact.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"contact.js","sourceRoot":"","sources":["../../../src/templates/demos/contact.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,gBAAgB,CAAC,GAAoB;IACnD,yEAAyE;IACzE,oEAAoE;IACpE,kCAAkC;IAClC,MAAM,SAAS,GAAG,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;IAEtD,OAAO;;;;;;;;;;;;;;;;;;;;;;;;UAwBC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sEAqCmD,GAAG,CAAC,QAAQ,CAAC,IAAI;QAC/E,CAAC,CAAC,+BAA+B;QACjC,CAAC,CAAC,uCAAuC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmChD,CAAA;AACD,CAAC"}

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

@@ -0,0 +1,7 @@
+export declare function demosFibonacciView(): string;
+/**
+ * Returns the inline lines that live in routes/api.ts to handle GET /api/fib.
+ * Inlined (not a separate Service) to keep the demo single-file readable.
+ */
+export declare function demosFibonacciApiBlock(): string;
+//# sourceMappingURL=fibonacci.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fibonacci.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/fibonacci.ts"],"names":[],"mappings":"AAEA,wBAAgB,kBAAkB,IAAI,MAAM,CAiI3C;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,MAAM,CAmC/C"}

package/dist/templates/demos/fibonacci.js

@@ -0,0 +1,172 @@
+// Fibonacci demo — sequential vs worker-pool parallel via @rudderjs/concurrency.
+export function demosFibonacciView() {
+    return `import { useState } from 'react'
+import '@/index.css'
+
+interface FibResponse {
+  n:            number
+  count:        number
+  result:       number
+  sequentialMs: number
+  parallelMs:   number
+  workers:      number
+}
+
+export default function FibonacciDemo() {
+  const [n,       setN      ] = useState(36)
+  const [count,   setCount  ] = useState(4)
+  const [data,    setData   ] = useState<FibResponse | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error,   setError  ] = useState<string | null>(null)
+
+  async function run() {
+    setLoading(true); setError(null); setData(null)
+    try {
+      const res  = await fetch(\`/api/fib?n=\${n}&count=\${count}\`)
+      const body = await res.json() as FibResponse | { message: string }
+      if (!res.ok) throw new Error((body as { message: string }).message ?? 'Failed')
+      setData(body as FibResponse)
+    } 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">Worker Threads</h1>
+        <p className="hero-lead">
+          Compute <code className="inline-code">fib(n)</code> N times — sequentially on the main thread, then
+          in parallel via <code className="inline-code">@rudderjs/concurrency</code>'s worker pool. Watch the
+          parallel cost stay flat as N grows (until you saturate workers).
+        </p>
+      </section>
+
+      <section className="feature-section">
+        <div className="form-card">
+          <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
+            <div style={{ flex: 1 }}>
+              <p className="form-label">n (Fibonacci index)</p>
+              <input
+                className="form-input"
+                type="number"
+                min={20}
+                max={42}
+                value={n}
+                onChange={e => setN(Number(e.target.value))}
+              />
+            </div>
+            <div style={{ flex: 1 }}>
+              <p className="form-label">count (parallel calls)</p>
+              <input
+                className="form-input"
+                type="number"
+                min={1}
+                max={16}
+                value={count}
+                onChange={e => setCount(Number(e.target.value))}
+              />
+            </div>
+          </div>
+
+          <button
+            className="form-submit"
+            onClick={run}
+            disabled={loading}
+            style={{ marginBottom: '1rem' }}
+          >
+            {loading ? 'Computing…' : \`Run \${count} × fib(\${n})\`}
+          </button>
+
+          {error && (
+            <p className="form-error">{error}</p>
+          )}
+
+          {data && (
+            <>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginBottom: '0.75rem' }}>
+                <div style={{ padding: '0.75rem', borderRadius: '0.375rem', border: '1px solid var(--border, #e5e7eb)' }}>
+                  <p className="form-label" style={{ marginBottom: '0.25rem' }}>Sequential (main thread)</p>
+                  <p style={{ fontSize: '1.25rem', fontWeight: 600, margin: 0 }}>{data.sequentialMs}ms</p>
+                  <p className="feature-desc" style={{ fontSize: '0.7rem', marginTop: '0.25rem' }}>
+                    {data.count} × fib({data.n}) one after another, blocking the event loop
+                  </p>
+                </div>
+                <div style={{ padding: '0.75rem', borderRadius: '0.375rem', border: '1px solid var(--border, #e5e7eb)' }}>
+                  <p className="form-label" style={{ marginBottom: '0.25rem' }}>Parallel ({data.workers} workers)</p>
+                  <p style={{ fontSize: '1.25rem', fontWeight: 600, margin: 0 }}>{data.parallelMs}ms</p>
+                  <p className="feature-desc" style={{ fontSize: '0.7rem', marginTop: '0.25rem' }}>
+                    same {data.count} tasks via <code>Concurrency.run([...])</code>
+                  </p>
+                </div>
+              </div>
+
+              <p className="feature-desc" style={{ fontSize: '0.85rem' }}>
+                Result: <code>fib({data.n}) = {data.result.toLocaleString()}</code>
+                {' · '}
+                <strong>{Math.round((data.sequentialMs / Math.max(data.parallelMs, 1)) * 10) / 10}× faster</strong>
+                {' '}via worker pool
+              </p>
+            </>
+          )}
+        </div>
+      </section>
+    </div>
+  )
+}
+`;
+}
+/**
+ * Returns the inline lines that live in routes/api.ts to handle GET /api/fib.
+ * Inlined (not a separate Service) to keep the demo single-file readable.
+ */
+export function demosFibonacciApiBlock() {
+    return `// GET /api/fib?n=36&count=4 — sequential vs worker-pool parallel via @rudderjs/concurrency.
+router.get('/api/fib', async (req, res) => {
+  const n     = Math.max(1, Math.min(42, Number((req.query as Record<string, string>)['n'] ?? 36)))
+  const count = Math.max(1, Math.min(16, Number((req.query as Record<string, string>)['count'] ?? 4)))
+
+  const { Concurrency } = await import('@rudderjs/concurrency')
+  const { cpus }        = await import('node:os')
+
+  // The task body must be self-contained — closures don't capture variables across the
+  // worker boundary. Inline 'fib' and bind 'n' via a Function-style template.
+  const buildTask = (val: number): (() => number) => {
+    const src = \`
+      function fib(k) { return k < 2 ? k : fib(k - 1) + fib(k - 2) }
+      return fib(\${val})
+    \`
+    return new Function(src) as () => number
+  }
+
+  const seqStart = Date.now()
+  let result = 0
+  for (let i = 0; i < count; i++) result = buildTask(n)()
+  const sequentialMs = Date.now() - seqStart
+
+  const parStart = Date.now()
+  const tasks = Array.from({ length: count }, () => buildTask(n))
+  const results = await Concurrency.run(tasks)
+  const parallelMs = Date.now() - parStart
+  result = results[0] ?? result
+
+  res.json({
+    n, count, result, sequentialMs, parallelMs,
+    workers: Math.min(count, cpus().length),
+  })
+})`;
+}
+//# sourceMappingURL=fibonacci.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fibonacci.js","sourceRoot":"","sources":["../../../src/templates/demos/fibonacci.ts"],"names":[],"mappings":"AAAA,iFAAiF;AAEjF,MAAM,UAAU,kBAAkB;IAChC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HR,CAAA;AACD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,sBAAsB;IACpC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCN,CAAA;AACH,CAAC"}

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

@@ -0,0 +1,3 @@
+export declare function demosHttpView(): string;
+export declare function demosHttpApiBlock(): string;
+//# sourceMappingURL=http.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"http.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/http.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,IAAI,MAAM,CAyFtC;AAED,wBAAgB,iBAAiB,IAAI,MAAM,CAwB1C"}