@pylonsync/create-pylon 0.11.0 → 0.11.3

package/templates/consumer/app/feed-client.tsx

@@ -1,159 +0,0 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import { db, callFn } from "@pylonsync/react";
-import { EnsureGuest, useAuth } from "@pylonsync/client";
-import { Button } from "@/components/ui/button";
-
-export interface Post {
-  id: string;
-  authorId: string;
-  text: string;
-  createdAt: string;
-}
-
-export interface Like {
-  id: string;
-  userId: string;
-  postId: string;
-}
-
-// `<EnsureGuest>` mints a guest session so anyone can post + like with no
-// login. Inside it, `useAuth()` exposes the guest's `userId` — that's how we
-// know which posts the current visitor has already liked.
-export function Feed() {
-  return (
-    <EnsureGuest fallback={<FeedSkeleton />}>
-      <FeedInner />
-    </EnsureGuest>
-  );
-}
-
-function FeedInner() {
-  const { userId } = useAuth();
-  const [text, setText] = useState("");
-  // Seed a few demo posts on first visit so the feed isn't empty. No-op once
-  // any post exists; safe to call every mount.
-  useEffect(() => {
-    void callFn("seedPosts", {});
-  }, []);
-  const { data: posts, loading } = db.useQuery<Post>("Post");
-  // Public-read, so this is every like in the system — we count + match them
-  // client-side. db.useQuery is live, so counts update the instant anyone likes.
-  const { data: likes } = db.useQuery<Like>("Like");
-
-  async function addPost(e: React.FormEvent) {
-    e.preventDefault();
-    const value = text.trim();
-    if (!value) return;
-    setText("");
-    // No authorId sent — field.owner() stamps it from the session.
-    await db.insert("Post", { text: value });
-  }
-
-  function toggleLike(postId: string) {
-    const mine = likes.find((l) => l.postId === postId && l.userId === userId);
-    if (mine) {
-      void db.delete("Like", mine.id);
-    } else {
-      void db.insert("Like", { postId });
-    }
-  }
-
-  const ordered = [...posts].sort((a, b) =>
-    b.createdAt.localeCompare(a.createdAt),
-  );
-
-  return (
-    <div className="space-y-6">
-      <form onSubmit={addPost} className="space-y-2">
-        <textarea
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          placeholder="What's happening?"
-          aria-label="Post"
-          rows={2}
-          className="w-full resize-none rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
-        />
-        <div className="flex justify-end">
-          <Button type="submit" disabled={!text.trim()}>
-            Post
-          </Button>
-        </div>
-      </form>
-
-      {loading && posts.length === 0 ? (
-        <FeedSkeleton />
-      ) : ordered.length === 0 ? (
-        <p className="text-sm text-muted-foreground">
-          No posts yet — say something above. It appears instantly and syncs;
-          open a second tab to watch the feed update live.
-        </p>
-      ) : (
-        <ul className="space-y-3">
-          {ordered.map((post) => {
-            const count = likes.filter((l) => l.postId === post.id).length;
-            const liked = likes.some(
-              (l) => l.postId === post.id && l.userId === userId,
-            );
-            const mine = post.authorId === userId;
-            return (
-              <li key={post.id} className="rounded-lg border px-4 py-3">
-                <div className="flex items-center justify-between text-xs text-muted-foreground">
-                  <span className="font-mono">
-                    {mine ? "you" : shortId(post.authorId)}
-                  </span>
-                  {mine && (
-                    <button
-                      type="button"
-                      aria-label="Delete post"
-                      onClick={() => db.delete("Post", post.id)}
-                      className="hover:text-red-600"
-                    >
-                      Delete
-                    </button>
-                  )}
-                </div>
-                <p className="mt-1 whitespace-pre-wrap text-sm">{post.text}</p>
-                <div className="mt-2">
-                  <button
-                    type="button"
-                    onClick={() => toggleLike(post.id)}
-                    aria-pressed={liked}
-                    className={
-                      "inline-flex items-center gap-1.5 text-xs transition-colors " +
-                      (liked
-                        ? "text-rose-600"
-                        : "text-muted-foreground hover:text-foreground")
-                    }
-                  >
-                    <span>{liked ? "♥" : "♡"}</span>
-                    <span>{count}</span>
-                  </button>
-                </div>
-              </li>
-            );
-          })}
-        </ul>
-      )}
-    </div>
-  );
-}
-
-// Guest ids look like `guest_<hex>`; show a short, stable handle.
-function shortId(id: string) {
-  return "@" + id.replace(/^guest_/, "").slice(0, 6);
-}
-
-function FeedSkeleton() {
-  return (
-    <ul className="space-y-3" aria-hidden>
-      {[0, 1, 2].map((i) => (
-        <li key={i} className="rounded-lg border px-4 py-3">
-          <span className="block h-3 w-16 rounded bg-muted" />
-          <span className="mt-2 block h-4 w-3/4 rounded bg-muted" />
-        </li>
-      ))}
-    </ul>
-  );
-}

package/templates/consumer/app/page.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { type Metadata } from "@pylonsync/react";
-import { Feed } from "./feed-client";
-
-export const metadata: Metadata = {
-  title: "__APP_NAME__ — a live social feed on Pylon",
-  description:
-    "A public feed with optimistic posts and likes, server-rendered over one Pylon backend. Open two tabs and watch it sync.",
-};
-
-// `app/page.tsx` → `/`. The intro is server-rendered; `<Feed>` is a client
-// island that mints a guest session and runs the live query + optimistic
-// posts/likes in the browser.
-export default function IndexPage() {
-  return (
-    <div>
-      <header className="mb-6">
-        <h1 className="text-2xl font-semibold tracking-tight">Feed</h1>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Post something — it appears instantly and syncs to every tab. Likes
-          are live too.
-        </p>
-      </header>
-      <Feed />
-    </div>
-  );
-}

package/templates/consumer/functions/_keep.ts

@@ -1,13 +0,0 @@
-// Server functions go here. Each file in this directory that exports a
-// query() or action() becomes a typed RPC endpoint, callable from your
-// pages and client with full type inference. Delete this placeholder when
-// you add your first one.
-//
-// Example (functions/notes.ts):
-//
-//   import { query } from "@pylonsync/functions";
-//
-//   export const listNotes = query(async (ctx) => {
-//     return ctx.db.list("Note");
-//   });
-export {};

package/templates/consumer/functions/seedPosts.ts

@@ -1,56 +0,0 @@
-import { mutation } from "@pylonsync/functions";
-
-// A few demo posts so the feed isn't an empty shell on first visit. The feed
-// calls this on mount; it's a no-op once any post exists (the lock guards
-// against a double-seed from two concurrent first-visits). Public so an
-// anonymous first visitor seeds it — it only writes demo content.
-//
-// `unsafe.insert` sets the demo `authorId` + a backdated `createdAt` directly
-// (bypassing the `field.owner()` stamp + policies) so the seed reads like a few
-// different people already posted, instead of everything attributed to the
-// first visitor.
-const DEMO_POSTS: { author: string; text: string }[] = [
-  {
-    author: "guest_ada",
-    text: "just shipped my first Pylon app — one binary doing SSR + sync + auth. wild.",
-  },
-  {
-    author: "guest_lin",
-    text: "the feed updates across tabs with zero websocket code I wrote. open a second tab 👀",
-  },
-  {
-    author: "guest_rey",
-    text: "likes are just rows — delete the row to unlike. local-first, so it's instant.",
-  },
-  {
-    author: "guest_max",
-    text: "no separate backend to deploy. `pylon deploy` and it's live. that's the whole thing.",
-  },
-];
-
-export default mutation<
-  Record<string, never>,
-  { seeded: boolean; count: number }
->({
-  auth: "public",
-  async handler(ctx) {
-    await ctx.db.advisoryLock("consumer_seed_posts");
-    const existing = await ctx.db.unsafe.list("Post");
-    if (existing.length > 0) return { seeded: false, count: existing.length };
-
-    const now = Date.now();
-    for (let i = 0; i < DEMO_POSTS.length; i++) {
-      const p = DEMO_POSTS[i];
-      // Backdate a minute apart so they sort into a natural order.
-      const createdAt = new Date(
-        now - (DEMO_POSTS.length - i) * 60_000,
-      ).toISOString();
-      await ctx.db.unsafe.insert("Post", {
-        authorId: p.author,
-        text: p.text,
-        createdAt,
-      });
-    }
-    return { seeded: true, count: DEMO_POSTS.length };
-  },
-});

package/templates/consumer/tests/example.test.ts

@@ -1,12 +0,0 @@
-import { expect, test } from "bun:test";
-
-// Your first test. Run the suite with:  pylon test  (or: npm test)
-//
-// `pylon test` discovers every *.test.ts file under tests/ (or functions/) and
-// runs it with Bun's test runner against an in-memory Pylon. Replace this
-// placeholder with tests for your functions and helpers — see AGENTS.md →
-// Testing for the pure-logic and HTTP-against-`pylon dev` patterns.
-
-test("placeholder — replace me with a real test", () => {
-  expect(true).toBe(true);
-});

package/templates/creator/app/not-found.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { Link, type NotFoundProps } from "@pylonsync/react";
-import { Button } from "@/components/ui/button";
-
-// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL, and when a
-// page calls `response.notFound()`.
-//
-// Give it real links. This boundary is also what an agent reads when it guesses
-// a URL wrong: a markdown request for a missing page renders THIS file as
-// markdown at 404, so the links below are how it finds its way back.
-export default function NotFound(_props: NotFoundProps) {
-  return (
-    <div className="mx-auto flex min-h-[60vh] max-w-lg flex-col justify-center gap-6 px-4">
-      <section>
-        <h1 className="text-2xl font-semibold tracking-tight">Page not found</h1>
-        <p className="mt-2 text-muted-foreground">
-          That URL does not exist. Try one of these:
-        </p>
-      </section>
-      <ul className="space-y-2 text-sm">
-        <li>
-          <Link className="underline underline-offset-4" href="/">
-            Home
-          </Link>
-        </li>
-        <li>
-          <a className="underline underline-offset-4" href="/sitemap.xml">
-            Sitemap
-          </a>
-        </li>
-        <li>
-          <a className="underline underline-offset-4" href="/llms.txt">
-            llms.txt
-          </a>
-        </li>
-      </ul>
-      <div>
-        <Button asChild>
-          <Link href="/">Back to home</Link>
-        </Button>
-      </div>
-    </div>
-  );
-}

package/templates/directory/app/not-found.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { Link, type NotFoundProps } from "@pylonsync/react";
-import { Button } from "@/components/ui/button";
-
-// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL, and when a
-// page calls `response.notFound()`.
-//
-// Give it real links. This boundary is also what an agent reads when it guesses
-// a URL wrong: a markdown request for a missing page renders THIS file as
-// markdown at 404, so the links below are how it finds its way back.
-export default function NotFound(_props: NotFoundProps) {
-  return (
-    <div className="mx-auto flex min-h-[60vh] max-w-lg flex-col justify-center gap-6 px-4">
-      <section>
-        <h1 className="text-2xl font-semibold tracking-tight">Page not found</h1>
-        <p className="mt-2 text-muted-foreground">
-          That URL does not exist. Try one of these:
-        </p>
-      </section>
-      <ul className="space-y-2 text-sm">
-        <li>
-          <Link className="underline underline-offset-4" href="/">
-            Home
-          </Link>
-        </li>
-        <li>
-          <a className="underline underline-offset-4" href="/sitemap.xml">
-            Sitemap
-          </a>
-        </li>
-        <li>
-          <a className="underline underline-offset-4" href="/llms.txt">
-            llms.txt
-          </a>
-        </li>
-      </ul>
-      <div>
-        <Button asChild>
-          <Link href="/">Back to home</Link>
-        </Button>
-      </div>
-    </div>
-  );
-}

package/templates/local-service/app/not-found.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { Link, type NotFoundProps } from "@pylonsync/react";
-import { Button } from "@/components/ui/button";
-
-// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL, and when a
-// page calls `response.notFound()`.
-//
-// Give it real links. This boundary is also what an agent reads when it guesses
-// a URL wrong: a markdown request for a missing page renders THIS file as
-// markdown at 404, so the links below are how it finds its way back.
-export default function NotFound(_props: NotFoundProps) {
-  return (
-    <div className="mx-auto flex min-h-[60vh] max-w-lg flex-col justify-center gap-6 px-4">
-      <section>
-        <h1 className="text-2xl font-semibold tracking-tight">Page not found</h1>
-        <p className="mt-2 text-muted-foreground">
-          That URL does not exist. Try one of these:
-        </p>
-      </section>
-      <ul className="space-y-2 text-sm">
-        <li>
-          <Link className="underline underline-offset-4" href="/">
-            Home
-          </Link>
-        </li>
-        <li>
-          <a className="underline underline-offset-4" href="/sitemap.xml">
-            Sitemap
-          </a>
-        </li>
-        <li>
-          <a className="underline underline-offset-4" href="/llms.txt">
-            llms.txt
-          </a>
-        </li>
-      </ul>
-      <div>
-        <Button asChild>
-          <Link href="/">Back to home</Link>
-        </Button>
-      </div>
-    </div>
-  );
-}

package/templates/restaurant/app/not-found.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { Link, type NotFoundProps } from "@pylonsync/react";
-import { Button } from "@/components/ui/button";
-
-// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL, and when a
-// page calls `response.notFound()`.
-//
-// Give it real links. This boundary is also what an agent reads when it guesses
-// a URL wrong: a markdown request for a missing page renders THIS file as
-// markdown at 404, so the links below are how it finds its way back.
-export default function NotFound(_props: NotFoundProps) {
-  return (
-    <div className="mx-auto flex min-h-[60vh] max-w-lg flex-col justify-center gap-6 px-4">
-      <section>
-        <h1 className="text-2xl font-semibold tracking-tight">Page not found</h1>
-        <p className="mt-2 text-muted-foreground">
-          That URL does not exist. Try one of these:
-        </p>
-      </section>
-      <ul className="space-y-2 text-sm">
-        <li>
-          <Link className="underline underline-offset-4" href="/">
-            Home
-          </Link>
-        </li>
-        <li>
-          <a className="underline underline-offset-4" href="/sitemap.xml">
-            Sitemap
-          </a>
-        </li>
-        <li>
-          <a className="underline underline-offset-4" href="/llms.txt">
-            llms.txt
-          </a>
-        </li>
-      </ul>
-      <div>
-        <Button asChild>
-          <Link href="/">Back to home</Link>
-        </Button>
-      </div>
-    </div>
-  );
-}

package/templates/shop/app/not-found.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { Link, type NotFoundProps } from "@pylonsync/react";
-import { Button } from "@/components/ui/button";
-
-// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL, and when a
-// page calls `response.notFound()`.
-//
-// Give it real links. This boundary is also what an agent reads when it guesses
-// a URL wrong: a markdown request for a missing page renders THIS file as
-// markdown at 404, so the links below are how it finds its way back.
-export default function NotFound(_props: NotFoundProps) {
-  return (
-    <div className="mx-auto flex min-h-[60vh] max-w-lg flex-col justify-center gap-6 px-4">
-      <section>
-        <h1 className="text-2xl font-semibold tracking-tight">Page not found</h1>
-        <p className="mt-2 text-muted-foreground">
-          That URL does not exist. Try one of these:
-        </p>
-      </section>
-      <ul className="space-y-2 text-sm">
-        <li>
-          <Link className="underline underline-offset-4" href="/">
-            Home
-          </Link>
-        </li>
-        <li>
-          <a className="underline underline-offset-4" href="/sitemap.xml">
-            Sitemap
-          </a>
-        </li>
-        <li>
-          <a className="underline underline-offset-4" href="/llms.txt">
-            llms.txt
-          </a>
-        </li>
-      </ul>
-      <div>
-        <Button asChild>
-          <Link href="/">Back to home</Link>
-        </Button>
-      </div>
-    </div>
-  );
-}

package/templates/waitlist/app/not-found.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { Link, type NotFoundProps } from "@pylonsync/react";
-import { Button } from "@/components/ui/button";
-
-// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL, and when a
-// page calls `response.notFound()`.
-//
-// Give it real links. This boundary is also what an agent reads when it guesses
-// a URL wrong: a markdown request for a missing page renders THIS file as
-// markdown at 404, so the links below are how it finds its way back.
-export default function NotFound(_props: NotFoundProps) {
-  return (
-    <div className="mx-auto flex min-h-[60vh] max-w-lg flex-col justify-center gap-6 px-4">
-      <section>
-        <h1 className="text-2xl font-semibold tracking-tight">Page not found</h1>
-        <p className="mt-2 text-muted-foreground">
-          That URL does not exist. Try one of these:
-        </p>
-      </section>
-      <ul className="space-y-2 text-sm">
-        <li>
-          <Link className="underline underline-offset-4" href="/">
-            Home
-          </Link>
-        </li>
-        <li>
-          <a className="underline underline-offset-4" href="/sitemap.xml">
-            Sitemap
-          </a>
-        </li>
-        <li>
-          <a className="underline underline-offset-4" href="/llms.txt">
-            llms.txt
-          </a>
-        </li>
-      </ul>
-      <div>
-        <Button asChild>
-          <Link href="/">Back to home</Link>
-        </Button>
-      </div>
-    </div>
-  );
-}