npm - @pyreon/create-zero - Versions diffs - 0.14.0 → 0.15.0 - Mend

@pyreon/create-zero 0.14.0 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/README.md +85 -22
package/bin/create-pyreon-app.js +2 -0
package/lib/index.js +1254 -191
package/package.json +5 -2
package/templates/{default → app}/src/routes/_layout.tsx +5 -2
package/templates/blog/.mcp.json +8 -0
package/templates/blog/CLAUDE.md +59 -0
package/templates/blog/index.html +18 -0
package/templates/blog/public/favicon.svg +4 -0
package/templates/blog/src/content/posts/static-vs-ssr.tsx +54 -0
package/templates/blog/src/content/posts/welcome.tsx +70 -0
package/templates/blog/src/content/posts/why-signals.tsx +57 -0
package/templates/blog/src/entry-client.ts +5 -0
package/templates/blog/src/global.css +292 -0
package/templates/blog/src/lib/posts.ts +45 -0
package/templates/blog/src/routes/_layout.tsx +40 -0
package/templates/blog/src/routes/about.tsx +28 -0
package/templates/blog/src/routes/api/rss.ts +55 -0
package/templates/blog/src/routes/blog/[slug].tsx +67 -0
package/templates/blog/src/routes/blog/index.tsx +43 -0
package/templates/blog/src/routes/index.tsx +52 -0
package/templates/blog/tsconfig.json +16 -0
package/templates/dashboard/.mcp.json +8 -0
package/templates/dashboard/CLAUDE.md +50 -0
package/templates/dashboard/index.html +16 -0
package/templates/dashboard/public/favicon.svg +4 -0
package/templates/dashboard/src/entry-client.ts +5 -0
package/templates/dashboard/src/global.css +451 -0
package/templates/dashboard/src/lib/auth.ts +106 -0
package/templates/dashboard/src/lib/db.ts +118 -0
package/templates/dashboard/src/routes/_layout.tsx +28 -0
package/templates/dashboard/src/routes/api/signout.ts +15 -0
package/templates/dashboard/src/routes/app/_layout.tsx +76 -0
package/templates/dashboard/src/routes/app/dashboard.tsx +92 -0
package/templates/dashboard/src/routes/app/invoices/[id].tsx +197 -0
package/templates/dashboard/src/routes/app/invoices/index.tsx +61 -0
package/templates/dashboard/src/routes/app/settings/account.tsx +31 -0
package/templates/dashboard/src/routes/app/settings/billing.tsx +28 -0
package/templates/dashboard/src/routes/app/settings/index.tsx +29 -0
package/templates/dashboard/src/routes/app/users.tsx +50 -0
package/templates/dashboard/src/routes/index.tsx +40 -0
package/templates/dashboard/src/routes/login.tsx +79 -0
package/templates/dashboard/src/routes/signup.tsx +78 -0
package/templates/dashboard/tsconfig.json +16 -0
package/lib/index.js.map +0 -1
/package/templates/{default → app}/.mcp.json +0 -0
/package/templates/{default → app}/CLAUDE.md +0 -0
/package/templates/{default → app}/index.html +0 -0
/package/templates/{default → app}/public/favicon.svg +0 -0
/package/templates/{default → app}/src/entry-client.ts +0 -0
/package/templates/{default → app}/src/features/posts.ts +0 -0
/package/templates/{default → app}/src/global.css +0 -0
/package/templates/{default → app}/src/routes/(admin)/dashboard.tsx +0 -0
/package/templates/{default → app}/src/routes/_error.tsx +0 -0
/package/templates/{default → app}/src/routes/_loading.tsx +0 -0
/package/templates/{default → app}/src/routes/about.tsx +0 -0
/package/templates/{default → app}/src/routes/api/health.ts +0 -0
/package/templates/{default → app}/src/routes/api/posts.ts +0 -0
/package/templates/{default → app}/src/routes/counter.tsx +0 -0
/package/templates/{default → app}/src/routes/index.tsx +0 -0
/package/templates/{default → app}/src/routes/posts/[id].tsx +0 -0
/package/templates/{default → app}/src/routes/posts/index.tsx +0 -0
/package/templates/{default → app}/src/routes/posts/new.tsx +0 -0
/package/templates/{default → app}/src/stores/app.ts +0 -0
/package/templates/{default → app}/tsconfig.json +0 -0

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@pyreon/create-zero",
-  "version": "0.14.0",
-  "description": "Create a new Pyreon Zero project",
+  "version": "0.15.0",
+  "description": "Create a new Pyreon project — invoke as `create-pyreon-app` (canonical) or `create-zero` (alias)",
   "license": "MIT",
   "author": "Vit Bokisch",
   "repository": {
@@ -10,17 +10,20 @@
     "directory": "packages/zero/create-zero"
   },
   "bin": {
+    "create-pyreon-app": "./bin/create-pyreon-app.js",
     "create-zero": "./bin/create-zero.js"
   },
   "files": [
     "bin",
     "lib",
+    "!lib/**/*.map",
     "!lib/analysis",
     "templates",
     "LICENSE",
     "README.md"
   ],
   "type": "module",
+  "sideEffects": false,
   "main": "./lib/index.js",
   "scripts": {
     "build": "vl_rolldown_build",

package/templates/{default → app}/src/routes/_layout.tsx RENAMED Viewed

@@ -1,4 +1,5 @@
 import { QueryClient, QueryClientProvider } from "@pyreon/query"
+import { RouterView } from "@pyreon/router"
 import { Link } from "@pyreon/zero/link"
 import { ThemeToggle } from "@pyreon/zero/theme"
 import { useAppStore } from "../stores/app"
@@ -7,7 +8,7 @@ const queryClient = new QueryClient({
   defaultOptions: { queries: { staleTime: 30000 } },
 })
-export function layout(props: { children: any }) {
+export function layout() {
   const app = useAppStore()
   const sidebarOpen = app.store.sidebarOpen
   const toggleSidebar = app.store.toggleSidebar
@@ -49,7 +50,9 @@ export function layout(props: { children: any }) {
         </div>
       </header>
-      <main class="app-main">{props.children}</main>
+      <main class="app-main">
+        <RouterView />
+      </main>
       <footer class="app-footer">Built with Pyreon Zero — signal-based, blazing fast.</footer>
     </QueryClientProvider>

package/templates/blog/.mcp.json ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "pyreon": {
+      "command": "bunx",
+      "args": ["@pyreon/mcp"]
+    }
+  }
+}

package/templates/blog/CLAUDE.md ADDED Viewed

@@ -0,0 +1,59 @@
+# Blog (Pyreon Zero)
+A statically-rendered blog. Posts live as TSX files in `src/content/posts/`.
+## Reactivity (Pyreon, not React)
+- `signal()` not `useState`; `computed()` not `useMemo`; `effect()` not `useEffect`.
+- Write signals via `signal.set(value)` or `signal.update(fn)`. Calling `signal(value)` does NOT write — it reads.
+- Inside JSX, signals auto-call: `{count}` (compiler inserts `()`). Outside JSX, call explicitly.
+## JSX
+- `class=` not `className`; `for=` not `htmlFor`; camelCase events (`onClick`, `onMouseEnter`).
+- JSX import source is `@pyreon/core` — auto-configured via tsconfig.
+## Adding a post
+Drop a `.tsx` file in `src/content/posts/`:
+```tsx
+export const meta = {
+  title: "My new post",
+  date: "2026-04-28",
+  description: "One sentence summary used in meta tags + RSS.",
+  tags: ["pyreon", "ssg"],
+}
+export default function Post() {
+  return (
+    <>
+      <p>The body of the post — JSX, including code blocks, images, etc.</p>
+    </>
+  )
+}
+```
+The post auto-appears in `/blog/` and the `/rss.xml` feed via `src/lib/posts.ts`'s
+`import.meta.glob` scan. The slug is derived from the filename.
+## Routes
+- `/` — landing page with the most recent posts
+- `/blog/` — full post archive
+- `/blog/:slug` — post detail with hydration
+- `/rss.xml` — RSS feed (API route)
+## Rendering
+This template is configured for SSG — every route is pre-rendered at build time.
+The `/rss.xml` API route is also pre-rendered. Per-post viewers are hydrated client-
+side so internal links and theme toggles stay reactive.
+## Commands
+```bash
+bun run dev       # dev server with HMR
+bun run build     # static build → dist/
+bun run preview   # serve dist/ locally
+```

package/templates/blog/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#0a0a0b" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate" type="application/rss+xml" title="RSS" href="/api/rss" />
+    <!-- Prevent flash of wrong theme -->
+    <script>(()=> {try{var t=localStorage.getItem("blog-theme");var r=t==="light"?"light":t==="dark"?"dark":window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light";document.documentElement.dataset.theme=r}catch(e){}})()</script>
+    <!--pyreon-head-->
+  </head>
+  <body>
+    <div id="app"><!--pyreon-app--></div>
+    <!--pyreon-scripts-->
+    <script type="module" src="/src/entry-client.ts"></script>
+  </body>
+</html>

package/templates/blog/public/favicon.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#0a0a0b"/>
+  <path d="M9 8h14v3H9zm0 7h14v3H9zm0 7h10v3H9z" fill="#fafafa"/>
+</svg>

package/templates/blog/src/content/posts/static-vs-ssr.tsx ADDED Viewed

@@ -0,0 +1,54 @@
+export const meta = {
+  title: "Static vs SSR — picking the right rendering mode",
+  date: "2026-04-20",
+  description:
+    "Pyreon Zero ships four rendering modes. Here's a one-paragraph guide to picking between them for a content site.",
+  tags: ["pyreon", "ssg", "ssr"],
+}
+export default function Post() {
+  return (
+    <>
+      <p>
+        Pyreon Zero ships four rendering modes — SSG, SSR (string), SSR (stream), and SPA.
+        For a blog, SSG is almost always the right choice. Here's why.
+      </p>
+      <h2>SSG (this template's default)</h2>
+      <p>
+        Every page is HTML on disk. Cheap to host (any static CDN), fast to load (zero
+        server work), and indexable by every search engine and AI crawler. The downside:
+        new content requires a rebuild + redeploy. For a blog where posts are written, not
+        scraped, this is a feature.
+      </p>
+      <h2>SSR string / stream</h2>
+      <p>
+        Render on every request. Required for per-user content (dashboards, social feeds).
+        The streaming variant flushes HTML chunks as they're ready — fastest TTFB. Overkill
+        for a blog unless you're personalizing posts.
+      </p>
+      <h2>SPA</h2>
+      <p>
+        Client-only rendering. Never the right answer for a content site — search engines and
+        AI crawlers see an empty shell. Reserve for behind-login dashboards.
+      </p>
+      <h2>Mixing modes</h2>
+      <p>
+        Pyreon supports per-route overrides. Even on this SSG template, you can mark a single
+        route SSR by exporting <code>renderMode</code>:
+      </p>
+      <pre>
+        <code>
+          {`export const renderMode = "ssr-stream"
+export default function LiveStats() {
+  // ...
+}`}
+        </code>
+      </pre>
+    </>
+  )
+}

package/templates/blog/src/content/posts/welcome.tsx ADDED Viewed

@@ -0,0 +1,70 @@
+export const meta = {
+  title: "Welcome to your new Pyreon blog",
+  date: "2026-04-28",
+  description:
+    "A quick tour of how this blog is wired together — TSX posts, SSG, RSS, and dark mode out of the box.",
+  tags: ["pyreon", "ssg", "intro"],
+}
+export default function Post() {
+  return (
+    <>
+      <p>
+        This blog ships pre-rendered at build time. Every post is a small TSX file in{" "}
+        <code>src/content/posts/</code>, and the loader at <code>src/lib/posts.ts</code> walks
+        the directory via Vite's <code>import.meta.glob</code>.
+      </p>
+      <h2>Adding a post</h2>
+      <p>
+        Drop a new <code>.tsx</code> file alongside this one. Export <code>meta</code> with{" "}
+        <code>title</code>, <code>date</code>, and <code>description</code>, then a default
+        component for the body:
+      </p>
+      <pre>
+        <code>
+          {`export const meta = {
+  title: "My new post",
+  date: "2026-05-01",
+  description: "One sentence summary.",
+}
+export default function Post() {
+  return <p>The body of the post.</p>
+}`}
+        </code>
+      </pre>
+      <p>
+        The post auto-appears in <code>/blog/</code> and the <code>/api/rss</code> feed. The
+        slug comes from the filename.
+      </p>
+      <h2>Why TSX instead of Markdown?</h2>
+      <p>
+        TSX gives you the full Pyreon component model inside posts — interactive demos, live
+        signals, charts — without an extra build step or a markdown-to-JSX bridge. If you'd
+        prefer markdown, swap the loader for a remark/MDX pipeline; the route shape stays the
+        same.
+      </p>
+      <h2>What's next?</h2>
+      <ul>
+        <li>
+          Edit <code>src/routes/_layout.tsx</code> to change the site header
+        </li>
+        <li>
+          Edit <code>src/global.css</code> for typography
+        </li>
+        <li>
+          Update <code>src/routes/api/rss.xml.ts</code> with your domain
+        </li>
+        <li>Replace this post with your own.</li>
+      </ul>
+    </>
+  )
+}

package/templates/blog/src/content/posts/why-signals.tsx ADDED Viewed

@@ -0,0 +1,57 @@
+export const meta = {
+  title: "Why signals beat hooks for content sites",
+  date: "2026-04-25",
+  description:
+    "Pyreon's fine-grained reactivity model means a blog's interactive widgets don't pay the React re-render tax.",
+  tags: ["pyreon", "reactivity"],
+}
+export default function Post() {
+  return (
+    <>
+      <p>
+        A typical content site has a few interactive widgets — a theme toggle, a search box, a
+        comments thread — sitting in an otherwise static page. Most frameworks re-render the
+        whole component subtree every time one of those widgets changes state. Pyreon doesn't.
+      </p>
+      <h2>Components run once</h2>
+      <p>
+        In Pyreon, a component function executes exactly once at mount. Reactivity comes from
+        signals reading themselves at use sites — the framework subscribes the surrounding
+        DOM node to the signal and updates only the affected text or attribute when the signal
+        changes.
+      </p>
+      <pre>
+        <code>
+          {`const count = signal(0)
+function Counter() {
+  return <button onClick={() => count.update(n => n + 1)}>{count}</button>
+}`}
+        </code>
+      </pre>
+      <p>
+        <code>{"{count}"}</code> auto-calls the signal in JSX (the compiler inserts the parens),
+        and the framework binds the resulting text node to the signal's subscription set. When
+        you click, only the button's text node updates — the component function never re-runs.
+      </p>
+      <h2>What this means for a blog</h2>
+      <ul>
+        <li>Toggling dark mode flips a single <code>data-theme</code> attribute on <code>html</code>.</li>
+        <li>Live search filters update only the post list, not the layout.</li>
+        <li>Embedded interactive demos don't re-render their surroundings.</li>
+      </ul>
+      <p>
+        The blog template ships with a theme toggle in the header — open the page, switch
+        themes, and watch only the relevant CSS variables update.
+      </p>
+    </>
+  )
+}

package/templates/blog/src/entry-client.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import "./global.css"
+import { routes } from "virtual:zero/routes"
+import { startClient } from "@pyreon/zero/client"
+startClient({ routes })

package/templates/blog/src/global.css ADDED Viewed

@@ -0,0 +1,292 @@
+/* ─── Reset ──────────────────────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+:root {
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+  --c-bg: #0a0a0b;
+  --c-surface: #141416;
+  --c-border: #27272a;
+  --c-text: #fafafa;
+  --c-text-secondary: #a1a1aa;
+  --c-text-muted: #71717a;
+  --c-accent: #6d5cff;
+  --c-accent-hover: #7d6fff;
+  --measure: 68ch;
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+  --space-3xl: 5rem;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+}
+[data-theme='light'] {
+  --c-bg: #ffffff;
+  --c-surface: #f4f4f5;
+  --c-border: #d4d4d8;
+  --c-text: #18181b;
+  --c-text-secondary: #3f3f46;
+  --c-text-muted: #71717a;
+  --c-accent: #5b4fd6;
+  --c-accent-hover: #4a3fb8;
+}
+html {
+  font-family: var(--font-sans);
+  background: var(--c-bg);
+  color: var(--c-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.6;
+}
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+#app {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+/* ─── Layout ─────────────────────────────────────────────────────────────── */
+.site-header {
+  border-bottom: 1px solid var(--c-border);
+  padding: var(--space-md) var(--space-lg);
+}
+.site-header-inner {
+  max-width: 960px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-lg);
+}
+.site-logo {
+  font-weight: 700;
+  font-size: 1.125rem;
+  letter-spacing: -0.02em;
+  color: var(--c-text);
+  text-decoration: none;
+}
+.site-nav {
+  display: flex;
+  gap: var(--space-lg);
+  align-items: center;
+}
+.site-nav a {
+  color: var(--c-text-secondary);
+  text-decoration: none;
+  font-size: 0.9375rem;
+  transition: color 150ms ease;
+}
+.site-nav a:hover,
+.site-nav a.nav-active {
+  color: var(--c-text);
+}
+.site-main {
+  flex: 1;
+  padding: var(--space-2xl) var(--space-lg);
+}
+.site-main-inner {
+  max-width: var(--measure);
+  margin: 0 auto;
+}
+.site-footer {
+  border-top: 1px solid var(--c-border);
+  padding: var(--space-lg);
+  color: var(--c-text-muted);
+  font-size: 0.875rem;
+  text-align: center;
+}
+/* ─── Typography ─────────────────────────────────────────────────────────── */
+h1,
+h2,
+h3,
+h4 {
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  margin-bottom: var(--space-md);
+}
+h1 {
+  font-size: 2.5rem;
+  font-weight: 800;
+}
+h2 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin-top: var(--space-2xl);
+}
+h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: var(--space-xl);
+}
+p {
+  margin-bottom: var(--space-md);
+  color: var(--c-text-secondary);
+}
+a {
+  color: var(--c-accent);
+}
+a:hover {
+  color: var(--c-accent-hover);
+}
+code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  padding: 0.125em 0.375em;
+}
+pre {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-md);
+  margin-bottom: var(--space-lg);
+  overflow-x: auto;
+}
+pre code {
+  background: transparent;
+  border: 0;
+  padding: 0;
+}
+ul,
+ol {
+  margin-bottom: var(--space-md);
+  padding-left: 1.5rem;
+  color: var(--c-text-secondary);
+}
+li {
+  margin-bottom: var(--space-xs);
+}
+blockquote {
+  border-left: 3px solid var(--c-accent);
+  padding-left: var(--space-md);
+  margin: var(--space-lg) 0;
+  color: var(--c-text-secondary);
+  font-style: italic;
+}
+img {
+  max-width: 100%;
+  border-radius: var(--radius-md);
+  margin: var(--space-lg) 0;
+}
+hr {
+  border: 0;
+  border-top: 1px solid var(--c-border);
+  margin: var(--space-2xl) 0;
+}
+/* ─── Post lists ─────────────────────────────────────────────────────────── */
+.post-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.post-list li {
+  margin-bottom: var(--space-xl);
+  padding-bottom: var(--space-xl);
+  border-bottom: 1px solid var(--c-border);
+}
+.post-list li:last-child {
+  border-bottom: 0;
+}
+.post-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: var(--space-xs);
+}
+.post-title a {
+  color: var(--c-text);
+  text-decoration: none;
+}
+.post-title a:hover {
+  color: var(--c-accent);
+}
+.post-meta {
+  color: var(--c-text-muted);
+  font-size: 0.875rem;
+  margin-bottom: var(--space-sm);
+}
+.post-summary {
+  color: var(--c-text-secondary);
+}
+.tags {
+  display: flex;
+  gap: var(--space-xs);
+  flex-wrap: wrap;
+  margin-top: var(--space-sm);
+}
+.tag {
+  font-size: 0.75rem;
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  padding: 0.125rem 0.5rem;
+  color: var(--c-text-secondary);
+}
+/* ─── Post detail ────────────────────────────────────────────────────────── */
+.post-header {
+  margin-bottom: var(--space-2xl);
+  padding-bottom: var(--space-xl);
+  border-bottom: 1px solid var(--c-border);
+}

package/templates/blog/src/lib/posts.ts ADDED Viewed

@@ -0,0 +1,45 @@
+import type { ComponentFn } from "@pyreon/core"
+export interface PostMeta {
+  title: string
+  date: string
+  description: string
+  tags?: string[]
+}
+export interface Post extends PostMeta {
+  slug: string
+  Component: ComponentFn<unknown>
+}
+interface PostModule {
+  meta: PostMeta
+  default: ComponentFn<unknown>
+}
+/**
+ * Enumerate all `.tsx` posts in `src/content/posts/` at build time. Eagerly
+ * loads modules so SSG renders see frontmatter immediately. The slug is the
+ * filename without extension (`welcome.tsx` → `welcome`).
+ */
+const modules = import.meta.glob<PostModule>("../content/posts/*.tsx", {
+  eager: true,
+})
+export const posts: Post[] = Object.entries(modules)
+  .map(([path, mod]) => {
+    const slug = path
+      .split("/")
+      .pop()!
+      .replace(/\.tsx$/, "")
+    return { ...mod.meta, slug, Component: mod.default }
+  })
+  .sort((a, b) => (a.date < b.date ? 1 : -1))
+export function postBySlug(slug: string): Post | undefined {
+  return posts.find((p) => p.slug === slug)
+}
+export function postSlugs(): string[] {
+  return posts.map((p) => p.slug)
+}