@netrojs/create-vono 0.0.1

package/files/app/pages/dashboard/settings.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { usePageData } from '@netrojs/vono/client'
+
+interface SettingsData {
+  settings: {
+    siteName:        string
+    siteUrl:         string
+    analyticsId:     string
+    emailNotifs:     boolean
+    maintenanceMode: boolean
+  }
+}
+
+const data = usePageData<SettingsData>()
+
+// Editable local copy — reactive so template updates instantly
+const form    = reactive({ ...data.settings })
+const saved   = ref(false)
+const saving  = ref(false)
+
+async function save() {
+  saving.value = true
+  // Simulate an API call
+  await new Promise(r => setTimeout(r, 600))
+  saving.value = false
+  saved.value  = true
+  setTimeout(() => { saved.value = false }, 2500)
+}
+</script>
+
+<template>
+  <div class="dash-section settings-form">
+    <div class="form-group">
+      <label class="form-label" for="siteName">Site name</label>
+      <input id="siteName" v-model="form.siteName" class="form-input" type="text">
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="siteUrl">Site URL</label>
+      <input id="siteUrl" v-model="form.siteUrl" class="form-input" type="url">
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="analyticsId">Analytics ID</label>
+      <input id="analyticsId" v-model="form.analyticsId" class="form-input" type="text" placeholder="G-XXXXXXXXXX">
+    </div>
+
+    <div class="form-group form-toggle">
+      <label class="form-label">
+        <input v-model="form.emailNotifs" type="checkbox">
+        Email notifications
+      </label>
+    </div>
+
+    <div class="form-group form-toggle">
+      <label class="form-label">
+        <input v-model="form.maintenanceMode" type="checkbox">
+        Maintenance mode
+        <span v-if="form.maintenanceMode" class="tag tag-warn">⚠️ Site is offline to visitors</span>
+      </label>
+    </div>
+
+    <div class="form-footer">
+      <button class="btn btn-primary" :disabled="saving" @click="save">
+        {{ saving ? 'Saving…' : 'Save settings' }}
+      </button>
+      <Transition name="fade">
+        <span v-if="saved" class="save-confirm">✅ Saved!</span>
+      </Transition>
+    </div>
+  </div>
+</template>

package/files/app/pages/home.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import { usePageData } from '@netrojs/vono/client'
+import type { HomeData } from '../routes'
+
+// Full type inference — HomeData is derived from the loader via InferPageData<T>
+const data = usePageData<HomeData>()
+
+// Client-only state — demonstrates ref + onMounted working after SSR hydration
+const activeFeature = ref(0)
+const mounted       = ref(false)
+
+onMounted(() => {
+  mounted.value = true
+  // Rotate the highlighted feature card every 3s
+  setInterval(() => {
+    activeFeature.value = (activeFeature.value + 1) % data.features.length
+  }, 3000)
+})
+</script>
+
+<template>
+  <!-- ── Hero ──────────────────────────────────────────────────────────── -->
+  <section class="hero">
+    <div class="hero-badge">Full-stack · Vue 3 + Hono</div>
+    <h1 class="hero-headline">{{ data.headline }}</h1>
+    <p class="hero-sub">{{ data.subline }}</p>
+    <div class="hero-actions">
+      <RouterLink to="/blog" class="btn btn-primary">Read the Blog →</RouterLink>
+      <RouterLink to="/dashboard" class="btn btn-ghost">Dashboard Demo</RouterLink>
+    </div>
+
+    <!-- Stat chips — data from the loader, typed -->
+    <div class="stat-row">
+      <div class="stat-chip">⚡ {{ data.stats.ssr }}</div>
+      <div class="stat-chip">📦 {{ data.stats.bundle }}</div>
+      <div class="stat-chip">🔒 {{ data.stats.dx }}</div>
+    </div>
+  </section>
+
+  <!-- ── Feature grid ───────────────────────────────────────────────────── -->
+  <section class="section">
+    <h2 class="section-title">Everything you need</h2>
+    <div class="feature-grid">
+      <div
+        v-for="(f, i) in data.features"
+        :key="f.title"
+        class="feature-card"
+        :class="{ highlight: mounted && i === activeFeature }"
+      >
+        <span class="feature-icon">{{ f.icon }}</span>
+        <h3 class="feature-title">{{ f.title }}</h3>
+        <p class="feature-desc">{{ f.desc }}</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── Recent posts ───────────────────────────────────────────────────── -->
+  <section class="section">
+    <h2 class="section-title">Recent posts</h2>
+    <div class="post-list">
+      <RouterLink
+        v-for="post in data.recentPosts"
+        :key="post.slug"
+        :to="`/blog/${post.slug}`"
+        class="post-card"
+      >
+        <div class="post-meta">
+          <span>{{ post.date }}</span>
+          <span class="tag" v-for="tag in post.tags.slice(0, 2)" :key="tag">#{{ tag }}</span>
+        </div>
+        <h3 class="post-card-title">{{ post.title }}</h3>
+        <p class="post-card-excerpt">{{ post.excerpt }}</p>
+        <span class="post-views">{{ post.views.toLocaleString() }} views</span>
+      </RouterLink>
+    </div>
+    <RouterLink to="/blog" class="btn btn-ghost" style="margin-top:1.5rem">All posts →</RouterLink>
+  </section>
+
+  <!-- ── Code example ───────────────────────────────────────────────────── -->
+  <section class="section">
+    <h2 class="section-title">Type-safe in 3 lines</h2>
+    <pre class="code-block"><code>// routes.ts
+export const postPage = definePage({
+  loader: async (c) =&gt; fetchPost(c.req.param('slug')),
+  component: () =&gt; import('./pages/post.vue'),
+})
+export type PostData = InferPageData&lt;typeof postPage&gt;
+
+// pages/post.vue
+const data = usePageData&lt;PostData&gt;()  // ✅ fully typed, zero duplication</code></pre>
+  </section>
+</template>

package/files/app/pages/login.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router   = useRouter()
+const email    = ref('')
+const password = ref('')
+const error    = ref<string | null>(null)
+const loading  = ref(false)
+
+async function login() {
+  if (!email.value || !password.value) {
+    error.value = 'Please enter your email and password.'
+    return
+  }
+  loading.value = true
+  error.value   = null
+
+  // Stub: set a cookie and redirect.  Replace with a real auth call.
+  await new Promise(r => setTimeout(r, 500))
+  document.cookie = 'session=demo; path=/'
+  await router.push('/dashboard')
+}
+</script>
+
+<template>
+  <div class="login-shell">
+    <div class="login-card">
+      <div class="login-logo">◈ Vono</div>
+      <h1 class="login-title">Sign in</h1>
+      <p class="login-sub">Dashboard is protected by server middleware.</p>
+
+      <div v-if="error" class="alert-error">{{ error }}</div>
+
+      <div class="form-group">
+        <label class="form-label" for="email">Email</label>
+        <input
+          id="email"
+          v-model="email"
+          class="form-input"
+          type="email"
+          placeholder="you@example.com"
+          autocomplete="email"
+          @keyup.enter="login"
+        >
+      </div>
+
+      <div class="form-group">
+        <label class="form-label" for="password">Password</label>
+        <input
+          id="password"
+          v-model="password"
+          class="form-input"
+          type="password"
+          placeholder="••••••••"
+          autocomplete="current-password"
+          @keyup.enter="login"
+        >
+      </div>
+
+      <button class="btn btn-primary" style="width:100%;margin-top:.5rem" :disabled="loading" @click="login">
+        {{ loading ? 'Signing in…' : 'Sign in' }}
+      </button>
+
+      <p class="login-hint">
+        Demo: any email + password sets a <code>session=demo</code> cookie
+        and grants dashboard access (the auth guard stub accepts it).
+      </p>
+    </div>
+  </div>
+</template>

package/files/app/routes.ts

@@ -0,0 +1,272 @@
+// ─────────────────────────────────────────────────────────────────────────────
+//  app/routes.ts  ·  Vono demo — full-featured route definitions
+//
+//  Demonstrates:
+//    • definePage() with typed loaders — types flow into usePageData<T>()
+//    • InferPageData<T> for a single-source-of-truth type pattern
+//    • defineGroup() with shared layout + prefix + middleware
+//    • defineLayout() for per-section layouts
+//    • defineApiRoute() for Hono JSON APIs co-located with pages
+//    • Async loaders  → automatic code splitting per route chunk
+//    • Dynamic params → [slug], [id] in paths
+//    • Per-page SEO   → static + dynamic (function) forms
+//    • Server-side middleware  → auth guard on protected routes
+// ─────────────────────────────────────────────────────────────────────────────
+
+import {
+  definePage,
+  defineGroup,
+  defineLayout,
+  defineApiRoute,
+  type InferPageData,
+} from '@netrojs/vono'
+import type { LoaderCtx } from '@netrojs/vono'
+import RootLayout    from './layouts/RootLayout.vue'
+import DashboardLayout from './layouts/DashboardLayout.vue'
+
+// ── Shared data types (co-located with routes for InferPageData) ──────────────
+
+export interface Post {
+  id:      number
+  slug:    string
+  title:   string
+  excerpt: string
+  body:    string
+  author:  string
+  date:    string
+  tags:    string[]
+  views:   number
+}
+
+export interface DashboardStats {
+  totalUsers:    number
+  totalPosts:    number
+  totalViews:    number
+  recentSignups: number
+  trend:         Array<{ day: string; users: number; views: number }>
+}
+
+// ── In-memory mock data (replace with a real DB in production) ───────────────
+
+const POSTS: Post[] = [
+  {
+    id: 1, slug: 'getting-started', title: 'Getting Started with Vono',
+    excerpt: 'Learn how to build full-stack Vue apps with streaming SSR and Hono.',
+    body: 'Vono combines Hono\'s blazing-fast server with Vue 3\'s reactive UI layer...',
+    author: 'Alice', date: '2025-03-01', tags: ['vue', 'ssr', 'hono'], views: 1024,
+  },
+  {
+    id: 2, slug: 'type-safe-loaders', title: 'Type-Safe Loaders & usePageData',
+    excerpt: 'One type definition — inferred from your loader, available everywhere.',
+    body: 'The InferPageData<T> helper extracts the return type from definePage()...',
+    author: 'Bob', date: '2025-03-10', tags: ['typescript', 'dx'], views: 832,
+  },
+  {
+    id: 3, slug: 'streaming-ssr', title: 'Streaming SSR Deep Dive',
+    excerpt: 'Why renderToWebStream gives you dramatically lower TTFB than buffered SSR.',
+    body: 'With renderToWebStream the browser receives <head> immediately...',
+    author: 'Carol', date: '2025-03-18', tags: ['performance', 'ssr'], views: 2048,
+  },
+]
+
+// ── Auth helper (stub) ────────────────────────────────────────────────────────
+
+function isAuthenticated(c: LoaderCtx): boolean {
+  // Real app: check a JWT cookie / session token
+  return c.req.header('cookie')?.includes('session=demo') ?? false
+}
+
+// ── Layouts ───────────────────────────────────────────────────────────────────
+
+export const rootLayout      = defineLayout(RootLayout)
+export const dashboardLayout = defineLayout(DashboardLayout)
+
+// ── API routes (Hono handlers) ────────────────────────────────────────────────
+
+const postsApi = defineApiRoute('/api/posts', (app) => {
+  app.get('/', (c) => c.json({ posts: POSTS.map(({ body: _, ...p }) => p) }))
+  app.get('/:slug', (c) => {
+    const post = POSTS.find(p => p.slug === c.req.param('slug'))
+    return post ? c.json(post) : c.json({ error: 'Not found' }, 404)
+  })
+})
+
+const statsApi = defineApiRoute('/api/stats', (app) => {
+  app.get('/', (_c) => c.json({
+    totalUsers: 4200,
+    totalPosts: POSTS.length,
+    totalViews: POSTS.reduce((s, p) => s + p.views, 0),
+  }))
+})
+// (Fix the accidental `c` → use the handler param)
+const statsApiFixed = defineApiRoute('/api/stats', (app) => {
+  app.get('/', (c) => c.json({
+    totalUsers: 4200,
+    totalPosts: POSTS.length,
+    totalViews: POSTS.reduce((s, p) => s + p.views, 0),
+  }))
+})
+
+// ── Public pages ──────────────────────────────────────────────────────────────
+
+export const homePage = definePage({
+  path:   '/',
+  layout: rootLayout,
+  seo: {
+    title:       'Vono Demo — Vue 3 + Hono Full-Stack Framework',
+    description: 'A complex demo showcasing streaming SSR, SPA navigation, type-safe loaders, code splitting, and Hono middleware — all in one TypeScript-first framework.',
+    ogType:      'website',
+    twitterCard: 'summary_large_image',
+  },
+  loader: async () => ({
+    headline: 'Build faster with Vono',
+    subline:  'Streaming SSR · SPA · Type-safe loaders · Hono middleware · Multi-runtime',
+    stats: {
+      ssr:    '< 10ms TTFB on cold start',
+      bundle: '< 50 kB client JS (gzipped)',
+      dx:     'One loader type — used everywhere',
+    },
+    recentPosts: POSTS.map(({ body: _, ...p }) => p),
+    features: [
+      { icon: '⚡', title: 'Streaming SSR',       desc: 'renderToWebStream flushes <head> instantly — CSS & scripts load while the body streams.' },
+      { icon: '🔀', title: 'SPA Navigation',      desc: 'Vue Router on the client. Navigating between pages fetches JSON — no full reload.' },
+      { icon: '🔒', title: 'Type-safe Loaders',   desc: 'InferPageData<T> derives component types from your loader. Zero duplication.' },
+      { icon: '✂️', title: 'Code Splitting',       desc: 'Pass () => import() as component. Vono resolves it for SSR, splits it for the client.' },
+      { icon: '🔍', title: 'Full SEO',             desc: 'Title, description, OG, Twitter Cards, JSON-LD — synced on every navigation.' },
+      { icon: '🛡️', title: 'Server Middleware',    desc: 'Hono middleware per app, per group, per route — with a client-side counterpart.' },
+      { icon: '🗂️', title: 'Route Groups',         desc: 'defineGroup() lets you share a prefix, layout, and middleware across multiple routes.' },
+      { icon: '🚀', title: 'Multi-runtime',        desc: 'Node.js, Bun, Deno, Cloudflare Workers — same codebase, zero adapter code.' },
+    ],
+  }),
+  component: () => import('./pages/home.vue'),
+})
+export type HomeData = InferPageData<typeof homePage>
+
+// ── Blog pages ────────────────────────────────────────────────────────────────
+
+export const blogListPage = definePage({
+  path:   '/blog',
+  layout: rootLayout,
+  seo: {
+    title:       'Blog — Vono Demo',
+    description: 'Articles about Vue 3, Hono, SSR, TypeScript, and full-stack development.',
+  },
+  loader: async () => ({
+    posts: POSTS.map(({ body: _, ...p }) => p),
+  }),
+  component: () => import('./pages/blog/index.vue'),
+})
+export type BlogListData = InferPageData<typeof blogListPage>
+
+export const blogPostPage = definePage({
+  path:   '/blog/[slug]',
+  layout: rootLayout,
+  // Dynamic SEO: receives the loader output + params at render time
+  seo: (data, _params) => ({
+    title:       `${data.post?.title ?? 'Post'} — Vono Blog`,
+    description: data.post?.excerpt,
+    ogType:      'article',
+    ogImage:     `/og/blog/${data.post?.slug}.png`,
+  }),
+  loader: async (c) => {
+    const slug = c.req.param('slug')
+    const post = POSTS.find(p => p.slug === slug) ?? null
+    return { post }
+  },
+  component: () => import('./pages/blog/[slug].vue'),
+})
+export type BlogPostData = InferPageData<typeof blogPostPage>
+
+// ── Dashboard (protected) ─────────────────────────────────────────────────────
+//
+// defineGroup() applies:
+//   - prefix      → all routes under /dashboard
+//   - layout      → DashboardLayout (sidebar + header)
+//   - middleware   → auth guard; returns 401 JSON if not authenticated
+
+const authGuard = async (c: LoaderCtx, next: () => Promise<void>): Promise<void | Response> => {
+  if (!isAuthenticated(c)) {
+    // For SPA navigations return JSON; for full-page loads redirect
+    const isSPA = c.req.header('x-vono-spa') === '1'
+    if (isSPA) return c.json({ error: 'Unauthorized' }, 401) as unknown as Response
+    return c.redirect('/login') as unknown as Response
+  }
+  await next()
+}
+
+export const dashboardGroup = defineGroup({
+  prefix:     '/dashboard',
+  layout:     dashboardLayout,
+  middleware: [authGuard],
+  routes: [
+    definePage({
+      path: '',   // resolves to /dashboard
+      seo:  { title: 'Dashboard — Vono Demo' },
+      loader: async (): Promise<DashboardStats> => ({
+        totalUsers:    4200,
+        totalPosts:    POSTS.length,
+        totalViews:    POSTS.reduce((s, p) => s + p.views, 0),
+        recentSignups: 38,
+        trend: [
+          { day: 'Mon', users: 120, views: 880 },
+          { day: 'Tue', users: 145, views: 1020 },
+          { day: 'Wed', users: 98,  views: 760  },
+          { day: 'Thu', users: 210, views: 1450 },
+          { day: 'Fri', users: 175, views: 1230 },
+          { day: 'Sat', users: 90,  views: 620  },
+          { day: 'Sun', users: 60,  views: 490  },
+        ],
+      }),
+      component: () => import('./pages/dashboard/index.vue'),
+    }),
+
+    definePage({
+      path: '/posts',
+      seo:  { title: 'Manage Posts — Vono Demo' },
+      loader: async () => ({ posts: POSTS }),
+      component: () => import('./pages/dashboard/posts.vue'),
+    }),
+
+    definePage({
+      path: '/settings',
+      seo:  { title: 'Settings — Vono Demo' },
+      loader: async () => ({
+        settings: {
+          siteName:     'Vono Demo',
+          siteUrl:      'https://demo.vono.dev',
+          analyticsId:  'G-XXXXXXXXXX',
+          emailNotifs:  true,
+          maintenanceMode: false,
+        },
+      }),
+      component: () => import('./pages/dashboard/settings.vue'),
+    }),
+  ],
+})
+
+// ── Auth pages (no layout) ────────────────────────────────────────────────────
+
+export const loginPage = definePage({
+  path:   '/login',
+  layout: false,   // no layout — full-page auth screen
+  seo:    { title: 'Sign in — Vono Demo' },
+  loader: async () => ({ error: null as string | null }),
+  component: () => import('./pages/login.vue'),
+})
+export type LoginData = InferPageData<typeof loginPage>
+
+// ── 404 page (handled by createVono's notFound option) ─────────────────────
+// Exported so app.ts can reference it directly.
+export { default as NotFoundPage } from './pages/404.vue'
+
+// ── Master route list ─────────────────────────────────────────────────────────
+
+export const routes = [
+  postsApi,
+  statsApiFixed,
+  homePage,
+  blogListPage,
+  blogPostPage,
+  dashboardGroup,
+  loginPage,
+]