create-nifra 0.1.0-alpha.1

package/template-site-vue/deno.json

@@ -0,0 +1,7 @@
+{
+  "tasks": {
+    "build": "bun run build-deno.ts",
+    "start": "deno run --allow-net --allow-read --allow-env dist-deno/server-deno.js"
+  },
+  "//": "Build with Bun (nifra's toolchain), run/deploy the self-contained bundle on Deno. Deploy to Deno Deploy: deployctl deploy --prod --entrypoint=dist-deno/server-deno.js"
+}

package/template-site-vue/framework.ts

@@ -0,0 +1,6 @@
+// The frontend adapter for this app. `create-nifra --framework <react|preact|vue|solid|svelte>` swaps
+// this one line (and the routes + build config); every server entry imports the adapter from here, so
+// they stay framework-agnostic.
+import { vueAdapter } from "@nifrajs/web-vue"
+
+export const adapter = vueAdapter

package/template-site-vue/gitignore

@@ -0,0 +1,16 @@
+node_modules
+dist
+dist-bun
+dist-node
+dist-deno
+.vercel
+.build
+.build-bun
+.build-node
+.build-deno
+.build-vercel
+.wrangler
+# generated by buildServer next to the entry
+server-manifest.ts
+# generated by `nifra dev` (the Vite dev client entry) at the project root
+.nifra-vite-entry.tsx

package/template-site-vue/nifra.config.ts

@@ -0,0 +1,19 @@
+// The nifra CLI's config — read by `nifra dev|build|start`. It's imported ONLY by the CLI (which runs on
+// Bun), so it can eagerly import the Vite plugin + the SFC compiler — keeping them OUT of the edge
+// worker bundle that `framework.ts` (the render-adapter source the entries import) must stay free of.
+import { vueBunPlugin } from "@nifrajs/web-vue/plugin"
+import vue from "@vitejs/plugin-vue"
+
+export { adapter } from "./framework"
+export const clientModule = "@nifrajs/web-vue/client"
+// `nifra dev` HMR: Vite + the official Vue plugin compile/HMR the .vue client modules.
+export const vitePlugins = [vue()]
+// `nifra build` (client) + `nifra start`/`nifra dev` (Bun-side SSR) compile .vue via these.
+export const clientPlugins = [vueBunPlugin("dom")]
+export const serverPlugins = [vueBunPlugin("ssr")]
+// Vue feature flags the plugin doesn't inject (mirrors the build scripts' define).
+export const define = {
+  __VUE_OPTIONS_API__: "true",
+  __VUE_PROD_DEVTOOLS__: "false",
+  __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false",
+}

package/template-site-vue/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "nifra-site",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "nifra dev",
+    "preview": "bunx wrangler pages dev dist",
+    "build": "bun run build.ts",
+    "build:bun": "bun run build-bun.ts",
+    "build:node": "bun run build-node.ts",
+    "build:deno": "bun run build-deno.ts",
+    "build:vercel": "bun run build-vercel.ts",
+    "start": "bun dist-bun/server-bun.js",
+    "start:node": "node dist-node/server-node.js",
+    "deploy:cf": "wrangler pages deploy dist",
+    "deploy:vercel": "vercel deploy --prebuilt"
+  },
+  "dependencies": {
+    "@nifrajs/client": "^0.1.0",
+    "@nifrajs/core": "^0.1.0",
+    "@nifrajs/deno": "^0.1.0",
+    "@nifrajs/node": "^0.1.0",
+    "@nifrajs/web": "^0.1.0",
+    "@nifrajs/web-vue": "^0.1.0",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@nifrajs/cli": "^0.1.0",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "@vue/compiler-sfc": "^3.5.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.0"
+  }
+}

package/template-site-vue/routes/_404.vue

@@ -0,0 +1,18 @@
+<!-- nifra's catch-all renders _404 WITHOUT the layout chain, so it wraps itself in the root Layout. -->
+<script lang="ts">
+export const meta = { title: "Not found" }
+</script>
+
+<script setup lang="ts">
+import Layout from "./_layout.vue"
+</script>
+
+<template>
+  <Layout>
+    <section class="hero">
+      <h1><span class="grad">404</span></h1>
+      <p>That page doesn't exist.</p>
+      <a class="btn" href="/">← Back home</a>
+    </section>
+  </Layout>
+</template>

package/template-site-vue/routes/_layout.vue

@@ -0,0 +1,40 @@
+<!--
+  Root layout (Vue SFC) — wraps every page; the compose fold passes the page through the default slot.
+  The global stylesheet is rendered as a <style> element via <component :is="'style'"> — SFC <style>
+  blocks are dropped (nifra has no CSS pipeline), and a dynamic component sidesteps the template
+  compiler's special-casing of a literal <style> tag. Keeps the whole template single-file.
+-->
+<script setup lang="ts">
+const css = `
+  :root { --bg:#0a0a0f; --panel:#14141c; --border:#26263a; --fg:#e8e8f0; --muted:#9a9ab0; --accent:#7c5cff; --accent2:#00d4ff; }
+  * { box-sizing: border-box; } html { color-scheme: dark; }
+  body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
+  a { color:var(--accent2); text-decoration:none; } a:hover { text-decoration:underline; }
+  .wrap { max-width:840px; margin:0 auto; padding:0 24px; }
+  header.site { border-bottom:1px solid var(--border); } header.site .wrap { display:flex; align-items:center; justify-content:space-between; height:62px; }
+  .logo, .logo b { font-weight:800; font-size:20px; } .logo b { background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
+  .hero { text-align:center; padding:80px 0 56px; }
+  .hero h1 { font-size:clamp(36px,6vw,56px); line-height:1.05; margin:0 0 16px; letter-spacing:-0.03em; }
+  .hero h1 .grad { background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
+  .hero p { font-size:19px; color:var(--muted); max-width:560px; margin:0 auto 28px; }
+  .card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:24px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
+  .card h3 { margin:0 0 4px; } .card p { margin:0; color:var(--muted); font-size:14px; }
+  .count { font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; min-width:44px; text-align:center; background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
+  .btn { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#0a0a0f; font:inherit; font-weight:700; border:none; cursor:pointer; padding:11px 20px; border-radius:10px; }
+  footer.site { border-top:1px solid var(--border); color:var(--muted); font-size:14px; } footer.site .wrap { padding:24px; }
+`.trim()
+</script>
+
+<template>
+  <div id="app">
+    <component :is="'style'">{{ css }}</component>
+    <header class="site">
+      <div class="wrap">
+        <a href="/" class="logo"><b>nifra</b></a>
+        <a href="https://github.com">GitHub</a>
+      </div>
+    </header>
+    <main class="wrap"><slot /></main>
+    <footer class="site"><div class="wrap">Built with nifra</div></footer>
+  </div>
+</template>

package/template-site-vue/routes/index.vue

@@ -0,0 +1,56 @@
+<!--
+  Home route (Vue SFC). The plain <script> carries nifra's route convention — loader/action/meta are
+  server-only named exports the client codegen tree-shakes out. <script setup> + <template> are the
+  component. The form POST is the SSR action path; after a client submit the loader revalidates with
+  no full reload (progressive enhancement). Compiled by @nifrajs/web-vue/plugin.
+-->
+<script lang="ts">
+import type { ActionArgs, LoaderArgs } from "@nifrajs/client"
+import type { backend } from "../backend"
+
+export const meta = {
+  title: "nifra site",
+  meta: [{ name: "description", content: "A nifra + Vue SSR site, deployable to every runtime." }],
+}
+
+// Loader runs on the server (in-process during SSR). The action handles the form POST.
+export async function loader({ api }: LoaderArgs<typeof backend>) {
+  const res = await api.count.get()
+  return { count: res.data?.count ?? 0 }
+}
+
+export async function action({ api }: ActionArgs<typeof backend>) {
+  await api.count.post()
+  return { ok: true }
+}
+</script>
+
+<script setup lang="ts">
+// compose() spreads data/actionData/pending/submission as props — declare them so they aren't attrs.
+defineProps(["data", "actionData", "pending", "submission"])
+</script>
+
+<template>
+  <div>
+    <section class="hero">
+      <h1>Your nifra app,<br /><span class="grad">everywhere.</span></h1>
+      <p>
+        SSR + hydration, end-to-end types, Vue. One source — deploy to Cloudflare Pages, Node, Deno,
+        or Vercel Edge. Edit <code>routes/index.vue</code> to begin.
+      </p>
+    </section>
+    <div class="card">
+      <div>
+        <h3>Live full-stack loop</h3>
+        <p>
+          Count is rendered by a typed <code>loader</code>, incremented by an <code>action</code>,
+          revalidated with no full reload.
+        </p>
+      </div>
+      <form method="post" style="display: flex; align-items: center; gap: 16px">
+        <span class="count">{{ data.count }}</span>
+        <button class="btn" type="submit">increment →</button>
+      </form>
+    </div>
+  </div>
+</template>

package/template-site-vue/server-bun.ts

@@ -0,0 +1,35 @@
+import { inProcessClient } from "@nifrajs/client"
+import { createWebApp } from "@nifrajs/web"
+import { backend } from "./backend"
+import { adapter } from "./framework"
+import { clientEntry, manifest } from "./server-manifest"
+
+const app = createWebApp({
+  adapter,
+  manifest,
+  clientEntry,
+  api: inProcessClient(backend),
+  title: "nifra site",
+})
+
+// Bun (nifra's flagship runtime): Bun.serve handles app.fetch; serve the client bundle (/assets/*)
+// from disk with Bun.file. Assets live next to this file in the built dist-bun/ output.
+const ASSETS = new URL("./assets/", import.meta.url)
+const TYPES: Readonly<Record<string, string>> = { js: "text/javascript", css: "text/css" }
+
+const server = Bun.serve({
+  port: Number(Bun.env.PORT ?? 3000),
+  async fetch(req) {
+    const { pathname } = new URL(req.url)
+    if (pathname.startsWith("/assets/")) {
+      const name = pathname.slice("/assets/".length)
+      if (!/^[A-Za-z0-9._-]+$/.test(name)) return new Response("bad request", { status: 400 })
+      const file = Bun.file(new URL(name, ASSETS))
+      if (!(await file.exists())) return new Response("not found", { status: 404 })
+      const ext = name.slice(name.lastIndexOf(".") + 1)
+      return new Response(file, { headers: { "content-type": TYPES[ext] ?? "application/octet-stream" } })
+    }
+    return app.fetch(req)
+  },
+})
+console.log(`nifra (Bun) → http://localhost:${server.port}`)

package/template-site-vue/server-deno.ts

@@ -0,0 +1,38 @@
+import { inProcessClient } from "@nifrajs/client"
+import { serve } from "@nifrajs/deno"
+import { createWebApp } from "@nifrajs/web"
+import { backend } from "./backend"
+import { adapter } from "./framework"
+import { clientEntry, manifest } from "./server-manifest"
+
+const app = createWebApp({
+  adapter,
+  manifest,
+  clientEntry,
+  api: inProcessClient(backend),
+  title: "nifra site",
+})
+
+const ASSETS = new URL("./assets/", import.meta.url)
+const TYPES: Readonly<Record<string, string>> = { js: "text/javascript", css: "text/css" }
+
+await serve(
+  {
+    async fetch(req) {
+      const { pathname } = new URL(req.url)
+      if (pathname.startsWith("/assets/")) {
+        const name = pathname.slice("/assets/".length)
+        if (!/^[A-Za-z0-9._-]+$/.test(name)) return new Response("bad request", { status: 400 })
+        try {
+          const body = await Deno.readFile(new URL(name, ASSETS))
+          const ext = name.slice(name.lastIndexOf(".") + 1)
+          return new Response(body, { headers: { "content-type": TYPES[ext] ?? "application/octet-stream" } })
+        } catch {
+          return new Response("not found", { status: 404 })
+        }
+      }
+      return app.fetch(req)
+    },
+  },
+  { port: Number(Deno.env.get("PORT") ?? "3000") },
+)

package/template-site-vue/server-node.ts

@@ -0,0 +1,40 @@
+import { readFile } from "node:fs/promises"
+import { inProcessClient } from "@nifrajs/client"
+import { serve } from "@nifrajs/node"
+import { createWebApp } from "@nifrajs/web"
+import { backend } from "./backend"
+import { adapter } from "./framework"
+import { clientEntry, manifest } from "./server-manifest"
+
+const app = createWebApp({
+  adapter,
+  manifest,
+  clientEntry,
+  api: inProcessClient(backend),
+  title: "nifra site",
+})
+
+// @nifrajs/node serves app.fetch only — so serve /assets/* (the client bundle) from disk here.
+const ASSETS = new URL("./assets/", import.meta.url)
+const TYPES: Readonly<Record<string, string>> = { js: "text/javascript", css: "text/css" }
+
+await serve(
+  {
+    async fetch(req) {
+      const { pathname } = new URL(req.url)
+      if (pathname.startsWith("/assets/")) {
+        const name = pathname.slice("/assets/".length)
+        if (!/^[A-Za-z0-9._-]+$/.test(name)) return new Response("bad request", { status: 400 })
+        try {
+          const body = await readFile(new URL(name, ASSETS))
+          const ext = name.slice(name.lastIndexOf(".") + 1)
+          return new Response(body, { headers: { "content-type": TYPES[ext] ?? "application/octet-stream" } })
+        } catch {
+          return new Response("not found", { status: 404 })
+        }
+      }
+      return app.fetch(req)
+    },
+  },
+  { port: Number(process.env.PORT ?? 3000) },
+)

package/template-site-vue/server-vercel.ts

@@ -0,0 +1,17 @@
+import { inProcessClient } from "@nifrajs/client"
+import { createWebApp } from "@nifrajs/web"
+import { backend } from "./backend"
+import { adapter } from "./framework"
+import { clientEntry, manifest } from "./server-manifest"
+
+const app = createWebApp({
+  adapter,
+  manifest,
+  clientEntry,
+  api: inProcessClient(backend),
+  title: "nifra site",
+})
+
+// Vercel Edge Function — Vercel serves /assets/* from its CDN, so this only SSRs page routes.
+export const config = { runtime: "edge" }
+export default (req: Request): Response | Promise<Response> => app.fetch(req)

package/template-site-vue/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "preserve",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "dist-bun",
+    "dist-node",
+    "dist-deno",
+    "dist-vercel",
+    ".nifra",
+    ".wrangler",
+    ".vercel",
+    "server-manifest.ts",
+    "server-bun.ts",
+    "server-node.ts",
+    "server-deno.ts",
+    "server-vercel.ts",
+    "_worker.ts",
+    "build.ts",
+    "build-bun.ts",
+    "build-node.ts",
+    "build-deno.ts",
+    "build-vercel.ts"
+  ]
+}

package/template-site-vue/wrangler.toml

@@ -0,0 +1,4 @@
+name = "nifra-site"
+pages_build_output_dir = "dist"
+compatibility_date = "2025-01-01"
+compatibility_flags = ["nodejs_compat"]