@netrojs/create-vono 0.0.1

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,213 @@
+#!/usr/bin/env node
+
+// index.ts
+import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from "fs";
+import { dirname, join, relative, resolve } from "path";
+import { execSync } from "child_process";
+import { fileURLToPath } from "url";
+import prompts from "prompts";
+import { bold, cyan, dim, green, red } from "kolorist";
+var VONO_VERSION = "0.0.1";
+var FILES_DIR = join(dirname(fileURLToPath(import.meta.url)), "..", "files");
+function banner() {
+  console.log();
+  console.log(bold(cyan("  \u25C8  create-vono")));
+  console.log(dim("  Full-stack Hono + Vue 3 \u2014 SSR \xB7 SPA \xB7 code splitting \xB7 TypeScript"));
+  console.log();
+}
+function isDirEmpty(dir) {
+  if (!existsSync(dir)) return true;
+  const items = readdirSync(dir);
+  return items.length === 0 || items.length === 1 && items[0] === ".git";
+}
+function* walk(dir) {
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) yield* walk(full);
+    else yield full;
+  }
+}
+function applyVars(content, vars) {
+  for (const [k, v] of Object.entries(vars)) {
+    content = content.replaceAll(`{{${k}}}`, v);
+  }
+  return content;
+}
+var serverContent = {
+  node: `// server.ts \u2014 Node.js production entry
+// vonoVitePlugin sets target: 'node18' in the SSR build, enabling top-level await.
+import { serve } from '@netrojs/vono/server'
+import { vono } from './app'
+
+await serve({
+  app:       vono,
+  port:      Number(process.env['PORT'] ?? 3000),
+  runtime:   'node',
+  staticDir: './dist',
+})
+`,
+  bun: `// server.ts \u2014 Bun production entry
+// vonoVitePlugin sets target: 'node18' in the SSR build, enabling top-level await.
+import { serve } from '@netrojs/vono/server'
+import { vono } from './app'
+
+await serve({
+  app:       vono,
+  port:      Number(process.env['PORT'] ?? 3000),
+  runtime:   'bun',
+  staticDir: './dist',
+})
+`,
+  deno: `// server.ts \u2014 Deno production entry
+// vonoVitePlugin sets target: 'node18' in the SSR build, enabling top-level await.
+import { serve } from '@netrojs/vono/server'
+import { vono } from './app'
+
+await serve({
+  app:       vono,
+  port:      Number(Deno.env.get('PORT') ?? 3000),
+  runtime:   'deno',
+  staticDir: './dist',
+})
+`
+};
+function scaffold(dir, a) {
+  const devCmds = {
+    node: "vite --host",
+    bun: "bun --bun vite --host",
+    deno: "deno run -A npm:vite --host"
+  };
+  const buildCmds = {
+    node: "vite build",
+    bun: "bun --bun vite build",
+    deno: "deno run -A npm:vite build"
+  };
+  const vars = {
+    PROJECT_NAME: a.projectName,
+    VONO_VERSION,
+    DEV_CMD: devCmds[a.runtime],
+    BUILD_CMD: buildCmds[a.runtime]
+  };
+  mkdirSync(dir, { recursive: true });
+  for (const srcPath of walk(FILES_DIR)) {
+    const rel = relative(FILES_DIR, srcPath);
+    if (/\scopy\b/.test(rel)) continue;
+    const renamed = rel.replace(/^_package\.json$/, "package.json").replace(/^_gitignore$/, ".gitignore");
+    const destPath = join(dir, renamed);
+    mkdirSync(dirname(destPath), { recursive: true });
+    let content = readFileSync(srcPath, "utf-8");
+    if (renamed === "server.ts") {
+      content = serverContent[a.runtime];
+    }
+    if (renamed === "package.json") {
+      const parsed = JSON.parse(applyVars(content, vars));
+      if (a.runtime === "bun") {
+        delete parsed.devDependencies["@hono/node-server"];
+        parsed.devDependencies["@types/bun"] = "latest";
+      }
+      if (a.runtime === "deno") {
+        delete parsed.devDependencies["@hono/node-server"];
+      }
+      writeFileSync(destPath, JSON.stringify(parsed, null, 2) + "\n", "utf-8");
+      continue;
+    }
+    writeFileSync(destPath, applyVars(content, vars), "utf-8");
+  }
+  writeFileSync(
+    join(dir, ".env.example"),
+    `PORT=3000
+NODE_ENV=development
+`,
+    "utf-8"
+  );
+}
+var INSTALL = {
+  npm: "npm install",
+  pnpm: "pnpm install",
+  bun: "bun install",
+  yarn: "yarn"
+};
+async function main() {
+  banner();
+  const nameArg = process.argv[2]?.trim();
+  const a = await prompts([
+    {
+      name: "projectName",
+      type: nameArg ? null : "text",
+      message: "Project name:",
+      initial: "my-vono-app",
+      validate: (v) => v.trim() ? true : "Name is required"
+    },
+    {
+      name: "runtime",
+      type: "select",
+      message: "Runtime:",
+      choices: [
+        { title: "Node.js", value: "node" },
+        { title: "Bun", value: "bun" },
+        { title: "Deno", value: "deno" }
+      ],
+      initial: 0
+    },
+    {
+      name: "pkgManager",
+      type: "select",
+      message: "Package manager:",
+      choices: [
+        { title: "npm", value: "npm" },
+        { title: "pnpm", value: "pnpm" },
+        { title: "bun", value: "bun" },
+        { title: "yarn", value: "yarn" }
+      ],
+      initial: 0
+    },
+    { name: "gitInit", type: "confirm", message: "Init git repo?", initial: true },
+    { name: "installDeps", type: "confirm", message: "Install dependencies?", initial: true }
+  ], {
+    onCancel: () => {
+      console.log(red("\nCancelled.\n"));
+      process.exit(1);
+    }
+  });
+  if (nameArg) a.projectName = nameArg;
+  const dir = resolve(process.cwd(), a.projectName);
+  if (!isDirEmpty(dir)) {
+    console.log(red(`
+  Directory "${a.projectName}" is not empty.
+`));
+    process.exit(1);
+  }
+  console.log();
+  scaffold(dir, a);
+  console.log(green(`  \u2713 Scaffolded ${bold(a.projectName)}/`));
+  if (a.gitInit) {
+    try {
+      execSync("git init", { cwd: dir, stdio: "ignore" });
+      execSync("git add -A", { cwd: dir, stdio: "ignore" });
+      execSync('git commit -m "chore: initial vono scaffold"', { cwd: dir, stdio: "ignore" });
+      console.log(green("  \u2713 Git repo initialised"));
+    } catch {
+    }
+  }
+  if (a.installDeps) {
+    console.log(dim(`
+  Running ${INSTALL[a.pkgManager]}\u2026
+`));
+    execSync(INSTALL[a.pkgManager], { cwd: dir, stdio: "inherit" });
+  }
+  const rel = relative(process.cwd(), dir);
+  console.log();
+  console.log(bold("  Next steps:"));
+  if (rel !== ".") console.log(`    ${cyan(`cd ${rel}`)}`);
+  if (!a.installDeps) console.log(`    ${cyan(INSTALL[a.pkgManager])}`);
+  console.log(`    ${cyan(a.runtime === "bun" ? "bun run dev" : "npm run dev")}`);
+  console.log();
+  console.log(dim("  Open http://localhost:5173 to see the demo app."));
+  console.log(dim("  Dashboard demo: /dashboard  (sign in with any credentials)"));
+  console.log(dim("  Docs: https://github.com/netrosolutions/vono"));
+  console.log();
+}
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/files/_gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+.env
+.env.local
+*.local
+.DS_Store

package/files/_package.json

@@ -0,0 +1,27 @@
+{
+  "name":    "{{PROJECT_NAME}}",
+  "version": "0.0.1",
+  "type":    "module",
+  "private": true,
+  "scripts": {
+    "dev":       "{{DEV_CMD}}",
+    "build":     "{{BUILD_CMD}}",
+    "start":     "node dist/server/server.js",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@netrojs/vono":      "^{{VONO_VERSION}}",
+    "vue":                  "^3.5.13",
+    "vue-router":           "^4.5.1",
+    "@vue/server-renderer": "^3.5.13",
+    "hono":                 "^4.12.8"
+  },
+  "devDependencies": {
+    "@hono/node-server":     "^1.19.11",
+    "@hono/vite-dev-server": "^0.25.0",
+    "@vitejs/plugin-vue":    "^5.2.3",
+    "typescript":            "^5.9.3",
+    "vite":                  "^6.3.5",
+    "vue-tsc":               "^2.2.10"
+  }
+}

package/files/app/layouts/DashboardLayout.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { RouterLink, useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+const route = useRoute()
+
+const sideNav = [
+  { to: '/dashboard',          icon: '📊', label: 'Overview'  },
+  { to: '/dashboard/posts',    icon: '📝', label: 'Posts'     },
+  { to: '/dashboard/settings', icon: '⚙️', label: 'Settings'  },
+]
+
+const pageTitle = computed(() => {
+  const match = sideNav.find(n => n.to === route.path)
+  return match?.label ?? 'Dashboard'
+})
+</script>
+
+<template>
+  <div class="dash-shell">
+    <!-- ── Sidebar ───────────────────────────────────────────────────── -->
+    <aside class="sidebar">
+      <RouterLink to="/" class="sidebar-logo">◈ Vono</RouterLink>
+
+      <nav class="sidebar-nav">
+        <RouterLink
+          v-for="item in sideNav"
+          :key="item.to"
+          :to="item.to"
+          class="sidebar-link"
+          :class="{ active: route.path === item.to }"
+        >
+          <span class="sidebar-icon">{{ item.icon }}</span>
+          {{ item.label }}
+        </RouterLink>
+      </nav>
+
+      <div class="sidebar-footer">
+        <a href="/" class="sidebar-link">← Back to site</a>
+      </div>
+    </aside>
+
+    <!-- ── Main area ─────────────────────────────────────────────────── -->
+    <div class="dash-body">
+      <header class="dash-header">
+        <h1 class="dash-title">{{ pageTitle }}</h1>
+        <span class="dash-badge">Demo mode — auth stub</span>
+      </header>
+
+      <main class="dash-content">
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>

package/files/app/layouts/RootLayout.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { RouterLink, useRoute } from 'vue-router'
+import { ref, onMounted } from 'vue'
+
+const route       = useRoute()
+const menuOpen    = ref(false)
+const scrolled    = ref(false)
+
+// Demonstrates onMounted + ref working correctly after SSR hydration
+onMounted(() => {
+  const handler = () => { scrolled.value = window.scrollY > 40 }
+  window.addEventListener('scroll', handler, { passive: true })
+  handler()
+})
+
+const nav = [
+  { to: '/',     label: 'Home'  },
+  { to: '/blog', label: 'Blog'  },
+  { to: '/dashboard', label: 'Dashboard' },
+]
+</script>
+
+<template>
+  <div class="app">
+    <!-- ── Sticky nav ─────────────────────────────────────────────────── -->
+    <header class="nav" :class="{ scrolled }">
+      <RouterLink to="/" class="logo" @click="menuOpen = false">◈ Vono</RouterLink>
+
+      <nav class="nav-links" :class="{ open: menuOpen }">
+        <RouterLink
+          v-for="item in nav"
+          :key="item.to"
+          :to="item.to"
+          class="nav-link"
+          :class="{ active: route.path === item.to || (item.to !== '/' && route.path.startsWith(item.to)) }"
+          @click="menuOpen = false"
+        >
+          {{ item.label }}
+        </RouterLink>
+      </nav>
+
+      <button class="menu-btn" :aria-expanded="menuOpen" @click="menuOpen = !menuOpen">
+        <span class="sr-only">Toggle menu</span>
+        <span class="hamburger" :class="{ open: menuOpen }" />
+      </button>
+    </header>
+
+    <!-- ── Page content (slot) ───────────────────────────────────────── -->
+    <main class="main">
+      <slot />
+    </main>
+
+    <!-- ── Footer ───────────────────────────────────────────────────── -->
+    <footer class="footer">
+      <span>Built with <a href="https://github.com/netrosolutions/vono" rel="external noopener">◈ Vono</a></span>
+      <span class="footer-sep">·</span>
+      <a href="https://hono.dev" rel="external noopener">Hono</a>
+      <span class="footer-sep">·</span>
+      <a href="https://vuejs.org" rel="external noopener">Vue 3</a>
+    </footer>
+  </div>
+</template>

package/files/app/pages/404.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// This component is used as createVono({ notFound: NotFoundPage })
+// It is rendered server-side for unmatched URLs (returns 404 status).
+// No usePageData() here — it's not a route page, it's a fallback component.
+</script>
+
+<template>
+  <div class="not-found">
+    <div class="not-found-code">404</div>
+    <h1>Page not found</h1>
+    <p>The page you're looking for doesn't exist or has been moved.</p>
+    <a href="/" class="btn btn-primary">Go home</a>
+  </div>
+</template>

package/files/app/pages/blog/[slug].vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+import { usePageData } from '@netrojs/vono/client'
+import type { BlogPostData } from '../routes'
+
+// useRoute() works identically after SSR hydration — no special handling needed
+const route = useRoute()
+const data  = usePageData<BlogPostData>()
+
+// Computed from loader data — reactive on SPA navigation
+const post     = computed(() => data.post)
+const notFound = computed(() => !post.value)
+</script>
+
+<template>
+  <!-- 404 state — post not in loader data -->
+  <div v-if="notFound" class="page">
+    <h1>Post not found</h1>
+    <p class="lead">No post matched <code>{{ route.params.slug }}</code>.</p>
+    <RouterLink to="/blog" class="btn btn-ghost">← Back to Blog</RouterLink>
+  </div>
+
+  <!-- Post content -->
+  <article v-else class="page">
+    <!-- Tags -->
+    <div class="post-meta" style="margin-bottom:1rem">
+      <RouterLink to="/blog" class="muted">Blog</RouterLink>
+      <span class="muted"> / </span>
+      <span class="tag" v-for="tag in post!.tags" :key="tag">#{{ tag }}</span>
+    </div>
+
+    <h1>{{ post!.title }}</h1>
+
+    <div class="post-byline">
+      <span>By {{ post!.author }}</span>
+      <span class="muted">·</span>
+      <time :datetime="post!.date">{{ post!.date }}</time>
+      <span class="muted">·</span>
+      <span>{{ post!.views.toLocaleString() }} views</span>
+    </div>
+
+    <p class="lead">{{ post!.excerpt }}</p>
+
+    <div class="prose">
+      <!-- In a real app: use a markdown renderer e.g. @shikijs/vitepress-twoslash -->
+      <p>{{ post!.body }}</p>
+
+      <blockquote>
+        This is a demo post. In production, render markdown here using
+        <code>marked</code>, <code>unified</code>, or your preferred pipeline.
+      </blockquote>
+    </div>
+
+    <div class="post-footer">
+      <RouterLink to="/blog" class="btn btn-ghost">← All posts</RouterLink>
+    </div>
+  </article>
+</template>

package/files/app/pages/blog/index.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { usePageData } from '@netrojs/vono/client'
+import type { BlogListData } from '../routes'
+
+const data   = usePageData<BlogListData>()
+const search = ref('')
+
+const filtered = computed(() =>
+  search.value.trim() === ''
+    ? data.posts
+    : data.posts.filter(p =>
+        p.title.toLowerCase().includes(search.value.toLowerCase()) ||
+        p.tags.some(t => t.includes(search.value.toLowerCase()))
+      )
+)
+
+// All unique tags from all posts
+const allTags = computed(() => [...new Set(data.posts.flatMap(p => p.tags))])
+</script>
+
+<template>
+  <div class="page">
+    <h1>Blog</h1>
+    <p class="lead">Deep dives into Vue 3, Hono, SSR, and the Vono framework.</p>
+
+    <!-- Search -->
+    <div class="search-row">
+      <input
+        v-model="search"
+        class="search-input"
+        type="search"
+        placeholder="Search posts or tags…"
+        aria-label="Search posts"
+      >
+      <div class="tag-row">
+        <button
+          v-for="tag in allTags"
+          :key="tag"
+          class="tag"
+          :class="{ active: search === tag }"
+          @click="search = search === tag ? '' : tag"
+        >
+          #{{ tag }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Post list -->
+    <div class="post-list" v-if="filtered.length">
+      <RouterLink
+        v-for="post in filtered"
+        :key="post.slug"
+        :to="`/blog/${post.slug}`"
+        class="post-card"
+      >
+        <div class="post-meta">
+          <span>{{ post.author }}</span>
+          <span>{{ post.date }}</span>
+          <span class="tag" v-for="tag in post.tags" :key="tag">#{{ tag }}</span>
+        </div>
+        <h2 class="post-card-title">{{ post.title }}</h2>
+        <p class="post-card-excerpt">{{ post.excerpt }}</p>
+        <span class="post-views">{{ post.views.toLocaleString() }} views</span>
+      </RouterLink>
+    </div>
+    <p v-else class="muted">No posts match "{{ search }}".</p>
+  </div>
+</template>

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { usePageData } from '@netrojs/vono/client'
+import type { DashboardStats } from '../routes'
+
+const data = usePageData<DashboardStats>()
+
+// Client-only interactive state — verified working with onMounted after hydration
+const selectedMetric = ref<'users' | 'views'>('views')
+const chartMounted   = ref(false)
+
+onMounted(() => { chartMounted.value = true })
+
+const maxVal = computed(() =>
+  Math.max(...data.trend.map(d => d[selectedMetric.value]))
+)
+
+const barHeight = (val: number) =>
+  chartMounted.value ? `${Math.round((val / maxVal.value) * 100)}%` : '0%'
+
+const kpis = computed(() => [
+  { label: 'Total Users',    value: data.totalUsers.toLocaleString(),    icon: '👥' },
+  { label: 'Total Posts',    value: data.totalPosts.toLocaleString(),    icon: '📝' },
+  { label: 'Total Views',    value: data.totalViews.toLocaleString(),    icon: '👀' },
+  { label: 'Recent Signups', value: `+${data.recentSignups}`,            icon: '🆕' },
+])
+</script>
+
+<template>
+  <!-- KPI cards -->
+  <div class="kpi-grid">
+    <div v-for="kpi in kpis" :key="kpi.label" class="kpi-card">
+      <span class="kpi-icon">{{ kpi.icon }}</span>
+      <div>
+        <div class="kpi-value">{{ kpi.value }}</div>
+        <div class="kpi-label">{{ kpi.label }}</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Interactive sparkline chart — client-only behaviour -->
+  <div class="chart-card">
+    <div class="chart-header">
+      <h2 class="chart-title">7-day trend</h2>
+      <div class="chart-tabs">
+        <button
+          class="chart-tab"
+          :class="{ active: selectedMetric === 'views' }"
+          @click="selectedMetric = 'views'"
+        >Views</button>
+        <button
+          class="chart-tab"
+          :class="{ active: selectedMetric === 'users' }"
+          @click="selectedMetric = 'users'"
+        >Users</button>
+      </div>
+    </div>
+
+    <div class="chart-bars">
+      <div
+        v-for="d in data.trend"
+        :key="d.day"
+        class="bar-col"
+      >
+        <div class="bar-value">{{ d[selectedMetric] }}</div>
+        <div class="bar-wrap">
+          <div
+            class="bar"
+            :style="{ height: barHeight(d[selectedMetric]) }"
+            :title="`${d.day}: ${d[selectedMetric]}`"
+          />
+        </div>
+        <div class="bar-label">{{ d.day }}</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Hydration proof -->
+  <div class="info-banner">
+    ✅ This dashboard data was SSR-rendered on the server, hydrated on the client, and the
+    chart is fully interactive — no extra fetch needed on first load.
+    The <code>onMounted</code> hook animates the bars after hydration.
+  </div>
+</template>

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { usePageData } from '@netrojs/vono/client'
+import type { Post } from '../routes'
+
+interface PostsData { posts: Post[] }
+
+const data   = usePageData<PostsData>()
+const search = ref('')
+const sorted = ref<'date' | 'views'>('date')
+
+const rows = computed(() => {
+  let list = [...data.posts]
+  if (search.value) {
+    list = list.filter(p => p.title.toLowerCase().includes(search.value.toLowerCase()))
+  }
+  return sorted.value === 'views'
+    ? list.sort((a, b) => b.views - a.views)
+    : list.sort((a, b) => b.date.localeCompare(a.date))
+})
+</script>
+
+<template>
+  <div class="dash-section">
+    <div class="table-toolbar">
+      <input
+        v-model="search"
+        class="search-input"
+        type="search"
+        placeholder="Filter posts…"
+      >
+      <div class="sort-tabs">
+        <button class="chart-tab" :class="{ active: sorted === 'date' }"  @click="sorted = 'date'">Latest</button>
+        <button class="chart-tab" :class="{ active: sorted === 'views' }" @click="sorted = 'views'">Top views</button>
+      </div>
+    </div>
+
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Title</th>
+          <th>Author</th>
+          <th>Date</th>
+          <th>Tags</th>
+          <th style="text-align:right">Views</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="post in rows" :key="post.id">
+          <td><strong>{{ post.title }}</strong></td>
+          <td>{{ post.author }}</td>
+          <td>{{ post.date }}</td>
+          <td>
+            <span class="tag" v-for="tag in post.tags" :key="tag">#{{ tag }}</span>
+          </td>
+          <td style="text-align:right">{{ post.views.toLocaleString() }}</td>
+        </tr>
+        <tr v-if="rows.length === 0">
+          <td colspan="5" class="muted" style="text-align:center;padding:1.5rem">No posts match.</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>