create-rudder-app 0.4.0 → 0.5.0

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"}

package/dist/templates/demos/http.js

@@ -0,0 +1,117 @@
+// HTTP client demo — fluent fetch with retry + timeout against a public API.
+export function demosHttpView() {
+    return `import { useState } from 'react'
+import '@/index.css'
+
+interface HttpResponseShape {
+  status:    number
+  ok:        boolean
+  durationMs: number
+  url:       string
+  body:      unknown
+}
+
+const ENDPOINTS = [
+  { url: 'https://jsonplaceholder.typicode.com/todos/1',  label: 'Todo (works)' },
+  { url: 'https://jsonplaceholder.typicode.com/users/1',  label: 'User (works)' },
+  { url: 'https://httpstat.us/500?sleep=300',              label: 'Force 500 (retries 3×)' },
+]
+
+export default function HttpDemo() {
+  const [url,  setUrl]     = useState(ENDPOINTS[0]!.url)
+  const [data, setData]    = useState<HttpResponseShape | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error,   setError]   = useState<string | null>(null)
+
+  async function fetchUrl() {
+    setLoading(true); setError(null)
+    try {
+      const res = await fetch('/api/http/fetch?url=' + encodeURIComponent(url))
+      const body = await res.json() as HttpResponseShape | { message: string }
+      if (!res.ok) throw new Error((body as { message: string }).message ?? 'Failed')
+      setData(body as HttpResponseShape)
+    } 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">HTTP client</h1>
+        <p className="hero-lead">
+          Server-side <code className="inline-code">Http.retry(3, 200).timeout(5000).get(url)</code>{' '}
+          against a public API. Pick a URL — the 500 endpoint exercises the retry path.
+        </p>
+      </section>
+
+      <section className="feature-section" style={{ maxWidth: '40rem', margin: '0 auto' }}>
+        <div className="form-card">
+          <label className="form-label" htmlFor="http-url">URL</label>
+          <select id="http-url" className="form-input" value={url} onChange={e => setUrl(e.target.value)} style={{ marginBottom: '0.75rem' }}>
+            {ENDPOINTS.map(e => (
+              <option key={e.url} value={e.url}>{e.label}</option>
+            ))}
+          </select>
+          <button className="form-submit" onClick={fetchUrl} disabled={loading}>
+            {loading ? 'Fetching…' : 'Fetch'}
+          </button>
+          {error && (
+            <p className="form-error" style={{ marginTop: '1rem' }}>{error}</p>
+          )}
+          {data && (
+            <div style={{ marginTop: '1rem' }}>
+              <p className="feature-desc">
+                <strong>{data.status}</strong> · {data.durationMs}ms · ok={String(data.ok)}
+              </p>
+              <pre style={{ marginTop: '0.5rem', padding: '0.75rem', borderRadius: '0.375rem', background: 'var(--muted, #f4f4f5)', fontSize: '0.7rem', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
+                {JSON.stringify(data.body, null, 2).slice(0, 600)}
+              </pre>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  )
+}
+`;
+}
+export function demosHttpApiBlock() {
+    return `// GET /api/http/fetch?url=… — server-side HTTP with retry + timeout.
+router.get('/api/http/fetch', async (req, res) => {
+  const url = (req.query as Record<string, string>)['url']
+  if (!url) return res.status(422).json({ message: 'url is required' })
+  if (!/^https?:\\/\\//.test(url)) return res.status(422).json({ message: 'url must be http(s)' })
+
+  const { Http } = await import('@rudderjs/http')
+  const t0 = Date.now()
+  try {
+    const response = await Http.retry(3, 200).timeout(5000).get(url)
+    let body: unknown = null
+    try { body = response.json() } catch { body = response.body.slice(0, 600) }
+    res.json({
+      status:     response.status,
+      ok:         response.ok(),
+      durationMs: Date.now() - t0,
+      url,
+      body,
+    })
+  } catch (e) {
+    res.status(502).json({ message: (e as Error).message ?? 'Request failed', durationMs: Date.now() - t0, url })
+  }
+})`;
+}
+//# sourceMappingURL=http.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"http.js","sourceRoot":"","sources":["../../../src/templates/demos/http.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAE7E,MAAM,UAAU,aAAa;IAC3B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFR,CAAA;AACD,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC/B,OAAO;;;;;;;;;;;;;;;;;;;;;;GAsBN,CAAA;AACH,CAAC"}

package/dist/templates/demos/index-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index-view.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/index-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAE7E,wBAAgB,cAAc,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,CAkE3D"}
+{"version":3,"file":"index-view.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/index-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAE7E,wBAAgB,cAAc,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,CA+I3D"}

package/dist/templates/demos/index-view.js

@@ -8,6 +8,83 @@ export function demosIndexView(ctx) {
             pkgs: '@rudderjs/middleware · @rudderjs/core',
             show: shouldScaffoldDemo(ctx, 'contact'),
         },
+        {
+            title: 'Todos',
+            desc: 'ORM + interactive UI. Controller loads initial data, the view hydrates and POSTs to /api/todos/* for live updates.',
+            href: '/demos/todos',
+            pkgs: '@rudderjs/orm · @rudderjs/router',
+            show: shouldScaffoldDemo(ctx, 'todos'),
+        },
+        {
+            title: 'Avatar resize',
+            desc: 'Upload an image — server resizes it to 256×256 WebP via @rudderjs/image and saves to public storage. Side-by-side compare.',
+            href: '/demos/avatar',
+            pkgs: '@rudderjs/image · @rudderjs/storage',
+            show: shouldScaffoldDemo(ctx, 'avatar'),
+        },
+        {
+            title: 'System info',
+            desc: 'Three shell commands (git, node, uptime) executed via @rudderjs/process. Compares sequential vs parallel cost using Process.pool().',
+            href: '/demos/system-info',
+            pkgs: '@rudderjs/process',
+            show: shouldScaffoldDemo(ctx, 'system-info'),
+        },
+        {
+            title: 'Worker threads',
+            desc: 'Compute fib(n) sequentially on the main thread vs across @rudderjs/concurrency worker pool. Watch the parallel cost stay flat as you crank N.',
+            href: '/demos/fibonacci',
+            pkgs: '@rudderjs/concurrency',
+            show: shouldScaffoldDemo(ctx, 'fibonacci'),
+        },
+        {
+            title: 'Feature flags',
+            desc: 'Boolean, value, scoped, and Lottery features resolved against the current user. Sub-route guarded by FeatureMiddleware to demonstrate 403 blocking.',
+            href: '/demos/pennant',
+            pkgs: '@rudderjs/pennant',
+            show: shouldScaffoldDemo(ctx, 'pennant'),
+        },
+        {
+            title: 'Cache counter',
+            desc: 'Persistent view counter via Cache.get + Cache.set. Demonstrates the Cache facade with the in-memory driver.',
+            href: '/demos/cache',
+            pkgs: '@rudderjs/cache',
+            show: shouldScaffoldDemo(ctx, 'cache'),
+        },
+        {
+            title: 'Queue dispatch',
+            desc: 'Click to enqueue ExampleJob via @rudderjs/queue. The handler logs to the server terminal.',
+            href: '/demos/queue',
+            pkgs: '@rudderjs/queue',
+            show: shouldScaffoldDemo(ctx, 'queue'),
+        },
+        {
+            title: 'Mail send',
+            desc: 'Send a Mailable via Mail.to(...).send(). Default driver is "log" — output appears in the dev terminal.',
+            href: '/demos/mail',
+            pkgs: '@rudderjs/mail',
+            show: shouldScaffoldDemo(ctx, 'mail'),
+        },
+        {
+            title: 'Notifications',
+            desc: 'Multi-channel notification via notify(notifiable, notification). Mail channel uses the log driver.',
+            href: '/demos/notifications',
+            pkgs: '@rudderjs/notification · @rudderjs/mail',
+            show: shouldScaffoldDemo(ctx, 'notifications'),
+        },
+        {
+            title: 'Localization',
+            desc: 'Pick a locale to fetch the same keys via trans() server-side. Strings live in lang/<locale>/messages.json.',
+            href: '/demos/localization',
+            pkgs: '@rudderjs/localization',
+            show: shouldScaffoldDemo(ctx, 'localization'),
+        },
+        {
+            title: 'HTTP client',
+            desc: 'Server-side Http.retry(3, 200).timeout(5000).get(url) against a public API. The 500 endpoint exercises retry.',
+            href: '/demos/http',
+            pkgs: '@rudderjs/http',
+            show: shouldScaffoldDemo(ctx, 'http'),
+        },
         {
             title: 'WebSocket chat',
             desc: 'Real-time chat + presence using @rudderjs/broadcast — multi-channel pub/sub over a single WebSocket connection.',
@@ -18,9 +95,9 @@ export function demosIndexView(ctx) {
         {
             title: 'Collaborative editor',
             desc: 'Yjs CRDT live document with awareness cursors. Open in two tabs to see real-time sync over @rudderjs/sync.',
-            href: '/demos/live',
+            href: '/demos/sync',
             pkgs: '@rudderjs/sync',
-            show: shouldScaffoldDemo(ctx, 'live'),
+            show: shouldScaffoldDemo(ctx, 'sync'),
         },
     ].filter(c => c.show);
     const cardsJsx = cards.map(c => `        <a key="${c.href}" href="${c.href}" className="feature-card">

package/dist/templates/demos/index-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"index-view.js","sourceRoot":"","sources":["../../../src/templates/demos/index-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAwB,MAAM,oBAAoB,CAAA;AAE7E,MAAM,UAAU,cAAc,CAAC,GAAoB;IACjD,MAAM,KAAK,GAAiF;QAC1F;YACE,KAAK,EAAE,cAAc;YACrB,IAAI,EAAG,4GAA4G;YACnH,IAAI,EAAG,gBAAgB;YACvB,IAAI,EAAG,uCAAuC;YAC9C,IAAI,EAAG,kBAAkB,CAAC,GAAG,EAAE,SAAS,CAAC;SAC1C;QACD;YACE,KAAK,EAAE,gBAAgB;YACvB,IAAI,EAAG,iHAAiH;YACxH,IAAI,EAAG,WAAW;YAClB,IAAI,EAAG,qBAAqB;YAC5B,IAAI,EAAG,kBAAkB,CAAC,GAAG,EAAE,IAAI,CAAC;SACrC;QACD;YACE,KAAK,EAAE,sBAAsB;YAC7B,IAAI,EAAG,4GAA4G;YACnH,IAAI,EAAG,aAAa;YACpB,IAAI,EAAG,gBAAgB;YACvB,IAAI,EAAG,kBAAkB,CAAC,GAAG,EAAE,MAAM,CAAC;SACvC;KACF,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;IAErB,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,IAAI;0CAClC,CAAC,CAAC,KAAK;wCACT,CAAC,CAAC,IAAI;qFACuC,CAAC,CAAC,IAAI;aAC9E,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAEvB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BP,QAAQ;;;;;;CAMT,CAAA;AACD,CAAC"}
+{"version":3,"file":"index-view.js","sourceRoot":"","sources":["../../../src/templates/demos/index-view.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+export declare function demosLocalizationView(): string;
+export declare function demosLocalizationApiBlock(): string;
+export declare function langMessages(locale: 'en' | 'es' | 'ar'): string;
+//# sourceMappingURL=localization.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"localization.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/localization.ts"],"names":[],"mappings":"AAIA,wBAAgB,qBAAqB,IAAI,MAAM,CAkF9C;AAED,wBAAgB,yBAAyB,IAAI,MAAM,CAkBlD;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAuB/D"}

package/dist/templates/demos/localization.js

@@ -0,0 +1,130 @@
+// Localization demo — language switcher hits /api/i18n?locale=…
+// The route uses runWithLocale + setLocale + trans() to render strings.
+// Lang files at lang/<locale>/messages.json.
+export function demosLocalizationView() {
+    return `import { useEffect, useState } from 'react'
+import '@/index.css'
+
+interface I18nResponse {
+  locale:   string
+  greeting: string
+  items:    string
+  welcome:  string
+}
+
+const LOCALES = [
+  { code: 'en', label: 'English' },
+  { code: 'es', label: 'Español' },
+  { code: 'ar', label: 'العربية' },
+]
+
+export default function LocalizationDemo() {
+  const [locale, setLocale] = useState('en')
+  const [data,   setData]   = useState<I18nResponse | null>(null)
+
+  async function load(loc: string) {
+    const res = await fetch(\`/api/i18n?locale=\${loc}\`)
+    setData(await res.json() as I18nResponse)
+  }
+
+  useEffect(() => { load(locale) }, [locale])
+
+  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">Localization</h1>
+        <p className="hero-lead">
+          Pick a locale to fetch the same keys via{' '}
+          <code className="inline-code">trans()</code> on the server. Strings live in{' '}
+          <code className="inline-code">lang/&lt;locale&gt;/messages.json</code>.
+        </p>
+      </section>
+
+      <section className="feature-section" style={{ maxWidth: '32rem', margin: '0 auto' }}>
+        <div className="form-card">
+          <div style={{ marginBottom: '1rem' }}>
+            <label className="form-label" htmlFor="locale">Locale</label>
+            <select
+              id="locale"
+              className="form-input"
+              value={locale}
+              onChange={e => setLocale(e.target.value)}
+            >
+              {LOCALES.map(l => (
+                <option key={l.code} value={l.code}>{l.label} ({l.code})</option>
+              ))}
+            </select>
+          </div>
+
+          {data && (
+            <div style={{ display: 'grid', gap: '0.5rem' }}>
+              <p className="feature-desc"><strong>welcome:</strong> {data.welcome}</p>
+              <p className="feature-desc"><strong>greeting:</strong> {data.greeting}</p>
+              <p className="feature-desc"><strong>items (3):</strong> {data.items}</p>
+              <p className="feature-desc" style={{ fontSize: '0.7rem', opacity: 0.7 }}>
+                resolved server-side with locale = <code>{data.locale}</code>
+              </p>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  )
+}
+`;
+}
+export function demosLocalizationApiBlock() {
+    return `// GET /api/i18n?locale=… — resolves the same keys in the requested locale.
+router.get('/api/i18n', async (req, res) => {
+  const { runWithLocale, setLocale, getLocale, trans } = await import('@rudderjs/localization')
+  const requested = (req.query as Record<string, string>)['locale'] ?? 'en'
+
+  const payload = await runWithLocale(requested, async () => {
+    setLocale(requested)
+    return {
+      locale:   getLocale(),
+      welcome:  await trans('messages.welcome'),
+      greeting: await trans('messages.greeting', { name: 'World' }),
+      items:    await trans('messages.items', 3),
+    }
+  })
+
+  res.json(payload)
+})`;
+}
+export function langMessages(locale) {
+    if (locale === 'es') {
+        return `{
+  "welcome":  "¡Bienvenido a RudderJS!",
+  "greeting": "Hola, :name!",
+  "items":    "{0} sin elementos|{1} un elemento|{n} :count elementos"
+}
+`;
+    }
+    if (locale === 'ar') {
+        return `{
+  "welcome":  "مرحباً بك في RudderJS!",
+  "greeting": "مرحباً، :name!",
+  "items":    "{0} لا توجد عناصر|{1} عنصر واحد|{n} :count عناصر"
+}
+`;
+    }
+    return `{
+  "welcome":  "Welcome to RudderJS!",
+  "greeting": "Hello, :name!",
+  "items":    "{0} no items|{1} one item|{n} :count items"
+}
+`;
+}
+//# sourceMappingURL=localization.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"localization.js","sourceRoot":"","sources":["../../../src/templates/demos/localization.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,wEAAwE;AACxE,6CAA6C;AAE7C,MAAM,UAAU,qBAAqB;IACnC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFR,CAAA;AACD,CAAC;AAED,MAAM,UAAU,yBAAyB;IACvC,OAAO;;;;;;;;;;;;;;;;GAgBN,CAAA;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,MAA0B;IACrD,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;QACpB,OAAO;;;;;CAKV,CAAA;IACC,CAAC;IACD,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;QACpB,OAAO;;;;;CAKV,CAAA;IACC,CAAC;IACD,OAAO;;;;;CAKR,CAAA;AACD,CAAC"}

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

@@ -0,0 +1,4 @@
+export declare function demosMailView(): string;
+export declare function demoMailable(): string;
+export declare function demosMailApiBlock(): string;
+//# sourceMappingURL=mail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mail.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/mail.ts"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,IAAI,MAAM,CAqFtC;AAED,wBAAgB,YAAY,IAAI,MAAM,CAkBrC;AAED,wBAAgB,iBAAiB,IAAI,MAAM,CAkB1C"}