@pyreon/create-zero 0.4.1 → 0.11.0

package/templates/default/src/routes/about.tsx

@@ -1,15 +1,15 @@
-import { useHead } from '@pyreon/head'
-import { Link } from '@pyreon/zero/link'
+import { useHead } from "@pyreon/head"
+import { Link } from "@pyreon/zero/link"
 
 export const meta = {
-  title: 'About — Pyreon Zero',
-  description: 'Learn about the Pyreon Zero meta-framework.',
+  title: "About — Pyreon Zero",
+  description: "Learn about the Pyreon Zero meta-framework.",
 }
 
 export default function About() {
   useHead({
     title: meta.title,
-    meta: [{ name: 'description', content: meta.description }],
+    meta: [{ name: "description", content: meta.description }],
   })
 
   return (
@@ -17,8 +17,8 @@ export default function About() {
       <div class="page-header">
         <h1>About Zero</h1>
         <p>
-          A signal-based meta-framework built on Vite — designed for developers
-          who care about performance and simplicity.
+          A signal-based meta-framework built on Vite — designed for developers who care about
+          performance and simplicity.
         </p>
       </div>
 
@@ -43,20 +43,18 @@ export default function About() {
         </h2>
         <div style="color: var(--c-text-secondary); line-height: 1.8; display: flex; flex-direction: column; gap: var(--space-lg);">
           <p>
-            Most frameworks make you choose between developer experience and
-            runtime performance. Zero doesn't. Pyreon's signal-based reactivity
-            means your components compile to surgical DOM updates — no diffing,
-            no reconciliation, no wasted work.
+            Most frameworks make you choose between developer experience and runtime performance.
+            Zero doesn't. Pyreon's signal-based reactivity means your components compile to surgical
+            DOM updates — no diffing, no reconciliation, no wasted work.
           </p>
           <p>
-            On top of that, Zero gives you file-based routing, server-side
-            rendering, static generation, incremental regeneration, font
-            optimization, image optimization, smart caching, link prefetching,
-            and SEO utilities — all built in, all zero-config.
+            On top of that, Zero gives you file-based routing, server-side rendering, static
+            generation, incremental regeneration, font optimization, image optimization, smart
+            caching, link prefetching, and SEO utilities — all built in, all zero-config.
           </p>
           <p>
-            Deploy to Node, Bun, Vercel, Cloudflare, Netlify, or export as a
-            static site. One codebase, any target.
+            Deploy to Node, Bun, Vercel, Cloudflare, Netlify, or export as a static site. One
+            codebase, any target.
           </p>
         </div>
       </section>
@@ -67,30 +65,15 @@ export default function About() {
         </h2>
         <div style="display: grid; gap: var(--space-sm);">
           {[
-            ['Pyreon', 'Signal-based UI framework with JSX'],
-            ['Vite', 'Lightning-fast dev server and optimized builds'],
-            [
-              'File Router',
-              'Drop a file, get a route — layouts, guards, loaders',
-            ],
-            [
-              'SSR / SSG / ISR',
-              'Every rendering strategy, per-route overrides',
-            ],
-            [
-              '<Image>',
-              'Lazy loading, responsive srcset, blur-up placeholders',
-            ],
-            ['<Link>', 'Prefetch on hover or viewport entry for instant nav'],
-            [
-              'Font Plugin',
-              'Google Fonts optimization, preconnect, font-display:swap',
-            ],
-            [
-              'Cache MW',
-              'Immutable hashed assets, stale-while-revalidate pages',
-            ],
-            ['SEO Tools', 'Sitemap, robots.txt, JSON-LD structured data'],
+            ["Pyreon", "Signal-based UI framework with JSX"],
+            ["Vite", "Lightning-fast dev server and optimized builds"],
+            ["File Router", "Drop a file, get a route — layouts, guards, loaders"],
+            ["SSR / SSG / ISR", "Every rendering strategy, per-route overrides"],
+            ["<Image>", "Lazy loading, responsive srcset, blur-up placeholders"],
+            ["<Link>", "Prefetch on hover or viewport entry for instant nav"],
+            ["Font Plugin", "Google Fonts optimization, preconnect, font-display:swap"],
+            ["Cache MW", "Immutable hashed assets, stale-while-revalidate pages"],
+            ["SEO Tools", "Sitemap, robots.txt, JSON-LD structured data"],
           ].map(([name, desc]) => (
             <div
               class="card"
@@ -99,9 +82,7 @@ export default function About() {
               <code style="min-width: 130px; font-weight: 600; color: var(--c-accent);">
                 {name}
               </code>
-              <span style="color: var(--c-text-secondary); font-size: 0.9rem;">
-                {desc}
-              </span>
+              <span style="color: var(--c-text-secondary); font-size: 0.9rem;">{desc}</span>
             </div>
           ))}
         </div>

package/templates/default/src/routes/api/health.ts

@@ -3,5 +3,5 @@
  * Useful for load balancers and uptime monitoring.
  */
 export function GET() {
-  return Response.json({ status: 'ok', timestamp: new Date().toISOString() })
+  return Response.json({ status: "ok", timestamp: new Date().toISOString() })
 }

package/templates/default/src/routes/api/posts.ts

@@ -1,4 +1,4 @@
-import type { ApiContext } from '@pyreon/zero'
+import type { ApiContext } from "@pyreon/zero"
 
 /**
  * API route example — /api/posts
@@ -10,9 +10,9 @@ import type { ApiContext } from '@pyreon/zero'
  */
 
 const POSTS = [
-  { id: 1, title: 'Getting Started with Pyreon Zero', published: true },
-  { id: 2, title: 'Understanding Signals', published: true },
-  { id: 3, title: 'Server-Side Rendering Made Simple', published: false },
+  { id: 1, title: "Getting Started with Pyreon Zero", published: true },
+  { id: 2, title: "Understanding Signals", published: true },
+  { id: 3, title: "Server-Side Rendering Made Simple", published: false },
 ]
 
 export function GET(_ctx: ApiContext) {
@@ -26,7 +26,7 @@ export async function POST(ctx: ApiContext) {
   }
 
   if (!body.title) {
-    return Response.json({ error: 'Title is required' }, { status: 400 })
+    return Response.json({ error: "Title is required" }, { status: 400 })
   }
 
   const post = {

package/templates/default/src/routes/counter.tsx

@@ -1,8 +1,8 @@
-import { useHead } from '@pyreon/head'
-import { computed, signal } from '@pyreon/reactivity'
+import { useHead } from "@pyreon/head"
+import { computed, signal } from "@pyreon/reactivity"
 
 export const meta = {
-  title: 'Counter — Pyreon Zero',
+  title: "Counter — Pyreon Zero",
   description: "See Pyreon's signal-based reactivity in action.",
 }
 
@@ -19,33 +19,29 @@ export default function Counter() {
         <span class="badge">Interactive Demo</span>
         <h1 style="margin-top: var(--space-md);">Signal Reactivity</h1>
         <p>
-          Fine-grained reactivity with zero virtual DOM. Only the exact text
-          nodes that display these values are updated — nothing else re-renders.
+          Fine-grained reactivity with zero virtual DOM. Only the exact text nodes that display
+          these values are updated — nothing else re-renders.
         </p>
       </div>
 
       <div class="counter-demo">
-        <div class="counter-display">{count}</div>
+        <div class="counter-display">{() => count()}</div>
 
         <div class="counter-controls">
           <button
             type="button"
             class="btn btn-secondary"
-            onclick={() => count.update((n) => n - 1)}
+            onClick={() => count.update((n) => n - 1)}
           >
             -
           </button>
-          <button
-            type="button"
-            class="btn btn-primary"
-            onclick={() => count.set(0)}
-          >
+          <button type="button" class="btn btn-primary" onClick={() => count.set(0)}>
             Reset
           </button>
           <button
             type="button"
             class="btn btn-secondary"
-            onclick={() => count.update((n) => n + 1)}
+            onClick={() => count.update((n) => n + 1)}
           >
             +
           </button>
@@ -53,38 +49,33 @@ export default function Counter() {
 
         <div class="counter-meta">
           <div>
-            count() → <strong>{count}</strong>
+            count() → <strong>{() => count()}</strong>
           </div>
           <div>
-            doubled() → <strong>{doubled}</strong>
+            doubled() → <strong>{() => doubled()}</strong>
           </div>
           <div>
-            isEven() → <strong>{() => (isEven() ? 'true' : 'false')}</strong>
+            isEven() → <strong>{() => (isEven() ? "true" : "false")}</strong>
           </div>
         </div>
       </div>
 
-      <div
-        class="code-block"
-        style="max-width: 520px; margin: var(--space-2xl) auto 0;"
-      >
+      <div class="code-block" style="max-width: 520px; margin: var(--space-2xl) auto 0;">
         <div class="code-block-header">
           <span>counter.tsx</span>
         </div>
         <pre>
           <code>
-            <span class="kw">import</span> {'{'} signal, computed {'}'}{' '}
-            <span class="kw">from</span>{' '}
+            <span class="kw">import</span> {"{"} signal, computed {"}"} <span class="kw">from</span>{" "}
             <span class="str">"@pyreon/reactivity"</span>
-            <span class="kw">const</span> <span class="fn">count</span> ={' '}
-            <span class="fn">signal</span>(<span class="str">0</span>)
-            <span class="kw">const</span> <span class="fn">doubled</span> ={' '}
-            <span class="fn">computed</span>(() =&gt;{' '}
+            <span class="kw">const</span> <span class="fn">count</span> ={" "}
+            <span class="fn">signal</span>(<span class="str">0</span>)<span class="kw">const</span>{" "}
+            <span class="fn">doubled</span> = <span class="fn">computed</span>(() =&gt;{" "}
             <span class="fn">count</span>() * <span class="str">2</span>)
-            <span class="cm">{'// Just reference the signal in JSX —'}</span>
-            <span class="cm">{'// only this text node updates'}</span>
+            <span class="cm">{"// Just reference the signal in JSX —"}</span>
+            <span class="cm">{"// only this text node updates"}</span>
             <span class="tag">&lt;span&gt;</span>
-            {'{'}count{'}'}
+            {"{"}count{"}"}
             <span class="tag">&lt;/span&gt;</span>
           </code>
         </pre>

package/templates/default/src/routes/index.tsx

@@ -1,15 +1,15 @@
-import { useHead } from '@pyreon/head'
-import { Link } from '@pyreon/zero/link'
+import { useHead } from "@pyreon/head"
+import { Link } from "@pyreon/zero/link"
 
 export const meta = {
-  title: 'Pyreon Zero',
-  description: 'The signal-based meta-framework. Build fast, stay fast.',
+  title: "Pyreon Zero",
+  description: "The signal-based meta-framework. Build fast, stay fast.",
 }
 
 export default function Home() {
   useHead({
-    title: 'Pyreon Zero — The Signal-Based Meta-Framework',
-    meta: [{ name: 'description', content: meta.description }],
+    title: "Pyreon Zero — The Signal-Based Meta-Framework",
+    meta: [{ name: "description", content: meta.description }],
   })
 
   return (
@@ -22,9 +22,8 @@ export default function Home() {
           <span class="gradient">Stay fast.</span>
         </h1>
         <p>
-          Pyreon Zero is a signal-based full-stack framework powered by Vite.
-          File-based routing, SSR, SSG, ISR — everything you need, nothing you
-          don't.
+          Pyreon Zero is a signal-based full-stack framework powered by Vite. File-based routing,
+          SSR, SSG, ISR — everything you need, nothing you don't.
         </p>
         <div class="hero-actions">
           <Link href="/counter" class="btn btn-primary">
@@ -75,8 +74,8 @@ export default function Home() {
           </div>
           <h3>Signal-Based Reactivity</h3>
           <p>
-            Fine-grained reactivity with zero virtual DOM overhead. Only the
-            exact DOM nodes that need updating are touched.
+            Fine-grained reactivity with zero virtual DOM overhead. Only the exact DOM nodes that
+            need updating are touched.
           </p>
         </div>
 
@@ -98,8 +97,8 @@ export default function Home() {
           </div>
           <h3>File-Based Routing</h3>
           <p>
-            Drop a file in <code>src/routes/</code> and it's a route. Layouts,
-            dynamic params, catch-alls, and route groups built in.
+            Drop a file in <code>src/routes/</code> and it's a route. Layouts, dynamic params,
+            catch-alls, and route groups built in.
           </p>
         </div>
 
@@ -123,8 +122,8 @@ export default function Home() {
           </div>
           <h3>SSR / SSG / ISR / SPA</h3>
           <p>
-            Every rendering strategy out of the box. Per-route overrides let you
-            mix SSR pages with static marketing pages.
+            Every rendering strategy out of the box. Per-route overrides let you mix SSR pages with
+            static marketing pages.
           </p>
         </div>
 
@@ -146,9 +145,8 @@ export default function Home() {
           </div>
           <h3>Font & Image Optimization</h3>
           <p>
-            Automatic Google Fonts inlining, font-display swap, and an{' '}
-            <code>{'<Image>'}</code> component with lazy loading and blur-up
-            placeholders.
+            Automatic Google Fonts inlining, font-display swap, and an <code>{"<Image>"}</code>{" "}
+            component with lazy loading and blur-up placeholders.
           </p>
         </div>
 
@@ -170,8 +168,8 @@ export default function Home() {
           </div>
           <h3>Smart Caching & Security</h3>
           <p>
-            Built-in middleware for immutable asset caching,
-            stale-while-revalidate, security headers, and compression hints.
+            Built-in middleware for immutable asset caching, stale-while-revalidate, security
+            headers, and compression hints.
           </p>
         </div>
 
@@ -195,8 +193,8 @@ export default function Home() {
           </div>
           <h3>Deploy Anywhere</h3>
           <p>
-            Adapters for Node, Bun, Vercel, Cloudflare, and Netlify. Or export
-            as a fully static site.
+            Adapters for Node, Bun, Vercel, Cloudflare, and Netlify. Or export as a fully static
+            site.
           </p>
         </div>
       </section>

package/templates/default/src/routes/posts/[id].tsx

@@ -1,7 +1,7 @@
-import { useHead } from '@pyreon/head'
-import { useLoaderData } from '@pyreon/router'
-import type { LoaderContext } from '@pyreon/zero'
-import { Link } from '@pyreon/zero/link'
+import { useHead } from "@pyreon/head"
+import { useLoaderData } from "@pyreon/router"
+import type { LoaderContext } from "@pyreon/zero"
+import { Link } from "@pyreon/zero/link"
 
 interface Post {
   id: number
@@ -13,52 +13,52 @@ interface Post {
 }
 
 const POSTS: Record<string, Post> = {
-  '1': {
+  "1": {
     id: 1,
-    title: 'Getting Started with Pyreon Zero',
-    excerpt: 'Learn how to build your first app.',
+    title: "Getting Started with Pyreon Zero",
+    excerpt: "Learn how to build your first app.",
     body: "Pyreon Zero makes it incredibly easy to build modern web applications. Start by creating a new project with `bun create zero my-app`, then drop your first route file into `src/routes/`. The file-based router automatically picks up new files and generates the route tree for you.\n\nEvery route can export a `loader` for server-side data fetching, a `guard` for navigation protection, and `meta` for SEO metadata. The component itself uses JSX with Pyreon's signal-based reactivity — no virtual DOM overhead, just surgical DOM updates.",
-    author: 'Zero Team',
-    date: '2026-03-01',
+    author: "Zero Team",
+    date: "2026-03-01",
   },
-  '2': {
+  "2": {
     id: 2,
-    title: 'Understanding Signals',
-    excerpt: 'Deep dive into fine-grained reactivity.',
+    title: "Understanding Signals",
+    excerpt: "Deep dive into fine-grained reactivity.",
     body: "Signals are the foundation of Pyreon's reactivity system. Unlike the virtual DOM approach used by React, signals track exactly which DOM nodes depend on which pieces of state. When a signal changes, only the precise text nodes or attributes that reference it are updated.\n\nThis means your app does zero diffing, zero reconciliation, and zero unnecessary re-renders. A counter component that updates a number on screen? Only that one text node is touched. Everything else stays completely untouched.",
-    author: 'Zero Team',
-    date: '2026-03-05',
+    author: "Zero Team",
+    date: "2026-03-05",
   },
-  '3': {
+  "3": {
     id: 3,
-    title: 'Server-Side Rendering Made Simple',
-    excerpt: 'Pick the right strategy for every page.',
-    body: 'Zero supports four rendering strategies out of the box: SSR (server-side rendering), SSG (static site generation), ISR (incremental static regeneration), and SPA (single-page application). You can set a default mode in your config and override it per-route.\n\nSSR renders fresh HTML on every request. SSG pre-renders pages at build time. ISR combines both — serving cached static pages while revalidating in the background. SPA skips server rendering entirely for fully client-side pages.',
-    author: 'Zero Team',
-    date: '2026-03-08',
+    title: "Server-Side Rendering Made Simple",
+    excerpt: "Pick the right strategy for every page.",
+    body: "Zero supports four rendering strategies out of the box: SSR (server-side rendering), SSG (static site generation), ISR (incremental static regeneration), and SPA (single-page application). You can set a default mode in your config and override it per-route.\n\nSSR renders fresh HTML on every request. SSG pre-renders pages at build time. ISR combines both — serving cached static pages while revalidating in the background. SPA skips server rendering entirely for fully client-side pages.",
+    author: "Zero Team",
+    date: "2026-03-08",
   },
-  '4': {
+  "4": {
     id: 4,
-    title: 'Deploying to Production',
-    excerpt: 'From build to production with any platform.',
+    title: "Deploying to Production",
+    excerpt: "From build to production with any platform.",
     body: "Zero's adapter system makes deployment straightforward. Choose your target platform — Node.js, Bun, Vercel, Cloudflare Workers, or Netlify — and Zero generates the right output for that platform.\n\nThe Node adapter creates a standalone HTTP server. The Bun adapter leverages Bun.serve() for maximum performance. The static adapter exports a fully pre-rendered site ready for any CDN or static hosting platform.",
-    author: 'Zero Team',
-    date: '2026-03-10',
+    author: "Zero Team",
+    date: "2026-03-10",
   },
-  '5': {
+  "5": {
     id: 5,
-    title: 'Optimizing Performance',
-    excerpt: 'Built-in performance features.',
-    body: 'Zero includes a comprehensive performance toolkit. The font plugin automatically optimizes Google Fonts with preconnect hints and font-display:swap. The <Image> component provides lazy loading with IntersectionObserver, responsive srcset, and blur-up placeholders.\n\nThe <Link> component prefetches routes on hover or viewport entry, making navigation feel instant. Built-in cache middleware sets optimal Cache-Control headers — immutable caching for hashed assets, stale-while-revalidate for pages.',
-    author: 'Zero Team',
-    date: '2026-03-12',
+    title: "Optimizing Performance",
+    excerpt: "Built-in performance features.",
+    body: "Zero includes a comprehensive performance toolkit. The font plugin automatically optimizes Google Fonts with preconnect hints and font-display:swap. The <Image> component provides lazy loading with IntersectionObserver, responsive srcset, and blur-up placeholders.\n\nThe <Link> component prefetches routes on hover or viewport entry, making navigation feel instant. Built-in cache middleware sets optimal Cache-Control headers — immutable caching for hashed assets, stale-while-revalidate for pages.",
+    author: "Zero Team",
+    date: "2026-03-12",
   },
 }
 
 export async function loader(ctx: LoaderContext) {
   await new Promise((r) => setTimeout(r, 50))
   const post = POSTS[ctx.params.id]
-  if (!post) throw new Error('Post not found')
+  if (!post) throw new Error("Post not found")
   return { post }
 }
 
@@ -68,7 +68,7 @@ export default function PostDetail() {
 
   useHead({
     title: `${post.title} — Pyreon Zero`,
-    meta: [{ name: 'description', content: post.excerpt }],
+    meta: [{ name: "description", content: post.excerpt }],
   })
 
   return (
@@ -88,7 +88,7 @@ export default function PostDetail() {
       </div>
 
       <div class="post-body">
-        {post.body.split('\n\n').map((paragraph) => (
+        {post.body.split("\n\n").map((paragraph) => (
           <p style="margin-bottom: var(--space-lg);">{paragraph}</p>
         ))}
       </div>

package/templates/default/src/routes/posts/index.tsx

@@ -1,7 +1,7 @@
-import { useHead } from '@pyreon/head'
-import { useLoaderData } from '@pyreon/router'
-import type { LoaderContext } from '@pyreon/zero'
-import { Link } from '@pyreon/zero/link'
+import { useHead } from "@pyreon/head"
+import { useLoaderData } from "@pyreon/router"
+import type { LoaderContext } from "@pyreon/zero"
+import { Link } from "@pyreon/zero/link"
 
 interface Post {
   id: number
@@ -12,33 +12,29 @@ interface Post {
 const POSTS: Post[] = [
   {
     id: 1,
-    title: 'Getting Started with Pyreon Zero',
-    excerpt:
-      'Learn how to build your first app with file-based routing, SSR, and signals.',
+    title: "Getting Started with Pyreon Zero",
+    excerpt: "Learn how to build your first app with file-based routing, SSR, and signals.",
   },
   {
     id: 2,
-    title: 'Understanding Signals',
-    excerpt:
-      'Deep dive into fine-grained reactivity — how signals replace the virtual DOM.',
+    title: "Understanding Signals",
+    excerpt: "Deep dive into fine-grained reactivity — how signals replace the virtual DOM.",
   },
   {
     id: 3,
-    title: 'Server-Side Rendering Made Simple',
-    excerpt:
-      'SSR, SSG, ISR — pick the right strategy for every page in your app.',
+    title: "Server-Side Rendering Made Simple",
+    excerpt: "SSR, SSG, ISR — pick the right strategy for every page in your app.",
   },
   {
     id: 4,
-    title: 'Deploying to Production',
-    excerpt:
-      'From bun build to production with Node, Bun, Vercel, or Cloudflare adapters.',
+    title: "Deploying to Production",
+    excerpt: "From bun build to production with Node, Bun, Vercel, or Cloudflare adapters.",
   },
   {
     id: 5,
-    title: 'Optimizing Performance',
+    title: "Optimizing Performance",
     excerpt:
-      'Font loading, image optimization, smart caching, and link prefetching out of the box.',
+      "Font loading, image optimization, smart caching, and link prefetching out of the box.",
   },
 ]
 
@@ -52,10 +48,10 @@ export default function PostsIndex() {
   const data = useLoaderData<{ posts: Post[] }>()
 
   useHead({
-    title: 'Posts — Pyreon Zero',
+    title: "Posts — Pyreon Zero",
     meta: [
       {
-        name: 'description',
+        name: "description",
         content: "Example posts showcasing Zero's data loading.",
       },
     ],
@@ -67,25 +63,17 @@ export default function PostsIndex() {
         <span class="badge">Data Loading</span>
         <h1 style="margin-top: var(--space-md);">Posts</h1>
         <p>
-          Each post is loaded via a <code>loader</code> function — server-side
-          data fetching that runs before the route renders.
+          Each post is loaded via a <code>loader</code> function — server-side data fetching that
+          runs before the route renders.
         </p>
-        <Link
-          href="/posts/new"
-          class="btn"
-          style="margin-top: var(--space-md);"
-        >
+        <Link href="/posts/new" class="btn" style="margin-top: var(--space-md);">
           + New Post
         </Link>
       </div>
 
       <div class="posts-grid">
         {data.posts.map((post) => (
-          <Link
-            href={`/posts/${post.id}`}
-            class="card post-card"
-            prefetch="hover"
-          >
+          <Link href={`/posts/${post.id}`} class="card post-card" prefetch="hover">
             <span class="post-id">#{post.id}</span>
             <div>
               <h3>{post.title}</h3>
@@ -95,25 +83,20 @@ export default function PostsIndex() {
         ))}
       </div>
 
-      <div
-        class="code-block"
-        style="max-width: 520px; margin: var(--space-2xl) auto 0;"
-      >
+      <div class="code-block" style="max-width: 520px; margin: var(--space-2xl) auto 0;">
         <div class="code-block-header">
           <span>posts/index.tsx</span>
         </div>
         <pre>
           <code>
-            <span class="cm">{'// Export a loader — runs on the server'}</span>
-            <span class="kw">export async function</span>{' '}
-            <span class="fn">loader</span>(ctx) {'{'}
-            <span class="kw">const</span> posts = <span class="kw">await</span>{' '}
-            db.posts.<span class="fn">findMany</span>()
-            <span class="kw">return</span> {'{'} posts {'}'}
-            {'}'}
-            <span class="cm">{'// Access data in the component'}</span>
-            <span class="kw">const</span> data ={' '}
-            <span class="fn">useLoaderData</span>()
+            <span class="cm">{"// Export a loader — runs on the server"}</span>
+            <span class="kw">export async function</span> <span class="fn">loader</span>(ctx) {"{"}
+            <span class="kw">const</span> posts = <span class="kw">await</span> db.posts.
+            <span class="fn">findMany</span>()
+            <span class="kw">return</span> {"{"} posts {"}"}
+            {"}"}
+            <span class="cm">{"// Access data in the component"}</span>
+            <span class="kw">const</span> data = <span class="fn">useLoaderData</span>()
           </code>
         </pre>
       </div>