@pylonsync/create-pylon 0.3.54 → 0.3.57

package/templates/mac/consumer/apps/mac/Sources/__APP_NAME_PASCAL__/__APP_NAME_PASCAL__App.swift

@@ -1,5 +1,6 @@
 import SwiftUI
 import PylonClient
+import PylonSync
 
 @main
 struct __APP_NAME_PASCAL__App: App {
@@ -7,9 +8,17 @@ struct __APP_NAME_PASCAL__App: App {
 
 	var body: some Scene {
 		Window("__APP_NAME__", id: "main") {
-			RootView()
-				.environmentObject(session)
-				.frame(minWidth: 480, minHeight: 600)
+			Group {
+				if let engine = session.engine {
+					RootView(engine: engine)
+						.environmentObject(session)
+						.frame(minWidth: 480, minHeight: 600)
+				} else {
+					ProgressView()
+						.frame(maxWidth: .infinity, maxHeight: .infinity)
+				}
+			}
+			.task { await session.bootIfNeeded() }
 		}
 		.windowResizability(.contentMinSize)
 	}
@@ -17,8 +26,9 @@ struct __APP_NAME_PASCAL__App: App {
 
 @MainActor
 final class AppSession: ObservableObject {
-	let pylon: PylonClient
-	@Published var me: Profile?
+	let client: PylonClient
+	@Published private(set) var engine: SyncEngine?
+	@Published var myProfileId: String?
 
 	init() {
 		let baseURLString = ProcessInfo.processInfo.environment["PYLON_BASE_URL"]
@@ -26,6 +36,24 @@ final class AppSession: ObservableObject {
 		guard let url = URL(string: baseURLString) else {
 			fatalError("Invalid PYLON_BASE_URL: \(baseURLString)")
 		}
-		self.pylon = PylonClient(baseURL: url, appName: "__APP_NAME_SNAKE__")
+		self.client = PylonClient(baseURL: url, appName: "__APP_NAME_SNAKE__")
+		self.myProfileId = UserDefaults.standard.string(forKey: "myProfileId")
+	}
+
+	func bootIfNeeded() async {
+		guard engine == nil else { return }
+		let baseURLString = ProcessInfo.processInfo.environment["PYLON_BASE_URL"]
+			?? "http://localhost:4321"
+		guard let url = URL(string: baseURLString) else { return }
+		let config = SyncEngineConfig(baseURL: url, appName: "__APP_NAME_SNAKE__")
+		let engine = await SyncEngine(config: config, client: client)
+		await engine.start()
+		self.engine = engine
+	}
+
+	func setMyProfileId(_ id: String?) {
+		myProfileId = id
+		if let id { UserDefaults.standard.set(id, forKey: "myProfileId") }
+		else { UserDefaults.standard.removeObject(forKey: "myProfileId") }
 	}
 }

package/templates/mac/consumer/apps/mac/project.yml

@@ -30,5 +30,7 @@ targets:
     dependencies:
       - package: pylon
         product: PylonClient
+      - package: pylon
+        product: PylonSync
       - package: pylon
         product: PylonSwiftUI

package/templates/web/chat/apps/web/src/app/components/ChatRoom.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useEffect, useRef, useState, useTransition } from "react";
+import { useEffect, useRef, useState } from "react";
+import { db, callFn } from "@pylonsync/react";
 import { Button, Input } from "@__APP_NAME_KEBAB__/ui";
 
 type Room = {
@@ -21,47 +22,29 @@ type Message = {
 
 const NAME_KEY = "__APP_NAME_SNAKE___author_name";
 
-export function ChatRoom({
-	initialRooms,
-	initialActiveRoom,
-	initialMessages,
-}: {
-	initialRooms: Room[];
-	initialActiveRoom: Room | null;
-	initialMessages: Message[];
-}) {
-	const [rooms, setRooms] = useState(initialRooms);
-	const [active, setActive] = useState(initialActiveRoom);
-	const [messages, setMessages] = useState(initialMessages);
+export function ChatRoom() {
+	// Live subscriptions. The sync engine pushes diffs over WebSocket
+	// — every Room insert + every Message append from any other client
+	// re-renders these components without a fetch / poll / refresh.
+	const { data: rooms = [] } = db.useQuery<Room>("Room", {
+		orderBy: { createdAt: "asc" },
+	});
+	const [activeId, setActiveId] = useState<string | null>(null);
+	useEffect(() => {
+		if (!activeId && rooms.length > 0) setActiveId(rooms[0].id);
+	}, [rooms, activeId]);
+
+	const { data: messages = [] } = db.useQuery<Message>("Message", {
+		where: activeId ? { roomId: activeId } : undefined,
+		orderBy: { createdAt: "asc" },
+		limit: 200,
+	});
+
 	const [body, setBody] = useState("");
 	const [authorName, setAuthorName] = useState("anonymous");
-	const [pending, startTransition] = useTransition();
-	const [pollIdx, setPollIdx] = useState(0);
+	const [sending, setSending] = useState(false);
 	const scrollerRef = useRef<HTMLDivElement>(null);
 
-	// Poll the active room every 1.5s. The framework supports a
-	// WebSocket subscription path (db.useQuery) — we use polling here
-	// so the scaffold has zero front-end SDK setup. Swap in
-	// db.useQuery("Message", { roomId }) when you wire up
-	// `@pylonsync/react`'s init() in your layout.
-	useEffect(() => {
-		if (!active) return;
-		const t = setInterval(() => setPollIdx((n) => n + 1), 1500);
-		return () => clearInterval(t);
-	}, [active]);
-
-	useEffect(() => {
-		if (!active) return;
-		void (async () => {
-			const res = await fetch("/api/fn/roomMessages", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ roomId: active.id }),
-			});
-			if (res.ok) setMessages(await res.json());
-		})();
-	}, [active, pollIdx]);
-
 	useEffect(() => {
 		const stored =
 			typeof window !== "undefined"
@@ -71,37 +54,38 @@ export function ChatRoom({
 	}, []);
 
 	useEffect(() => {
-		// Auto-scroll to bottom on new messages.
+		// Auto-scroll to bottom when message count changes.
 		scrollerRef.current?.scrollTo({
 			top: scrollerRef.current.scrollHeight,
 			behavior: "smooth",
 		});
-	}, [messages]);
+	}, [messages.length, activeId]);
 
 	function persistName(next: string) {
 		setAuthorName(next);
 		window.localStorage.setItem(NAME_KEY, next);
 	}
 
+	const active = rooms.find((r) => r.id === activeId) ?? null;
+
 	async function send() {
 		const trimmed = body.trim();
 		if (!trimmed || !active) return;
 		setBody("");
-		startTransition(async () => {
-			const res = await fetch("/api/fn/sendMessage", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({
-					roomId: active.id,
-					body: trimmed,
-					authorName,
-				}),
+		setSending(true);
+		try {
+			// Server validates body length / auth, runs ctx.db.insert,
+			// the resulting change_event hits every subscriber's local
+			// store. We don't append to local state ourselves — the
+			// useQuery above re-renders when the new row lands.
+			await callFn("sendMessage", {
+				roomId: active.id,
+				body: trimmed,
+				authorName,
 			});
-			if (res.ok) {
-				const msg = (await res.json()) as Message;
-				setMessages((prev) => [...prev, msg]);
-			}
-		});
+		} finally {
+			setSending(false);
+		}
 	}
 
 	async function createRoom() {
@@ -111,18 +95,12 @@ export function ChatRoom({
 			.toLowerCase()
 			.replace(/[^a-z0-9]+/g, "-")
 			.replace(/^-|-$/g, "");
-		startTransition(async () => {
-			const res = await fetch("/api/fn/createRoom", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ slug, name }),
-			});
-			if (res.ok) {
-				const room = (await res.json()) as Room;
-				setRooms((prev) => [...prev, room]);
-				setActive(room);
-			}
-		});
+		try {
+			const room = (await callFn("createRoom", { slug, name })) as Room;
+			setActiveId(room.id);
+		} catch (e) {
+			window.alert(`Create failed: ${String(e)}`);
+		}
 	}
 
 	return (
@@ -149,9 +127,9 @@ export function ChatRoom({
 					{rooms.map((r) => (
 						<li key={r.id}>
 							<button
-								onClick={() => setActive(r)}
+								onClick={() => setActiveId(r.id)}
 								className={`w-full text-left px-4 py-2.5 text-sm hover:bg-neutral-50 dark:hover:bg-neutral-900 ${
-									r.id === active?.id
+									r.id === activeId
 										? "bg-neutral-100 dark:bg-neutral-800 font-medium"
 										: ""
 								}`}
@@ -181,7 +159,10 @@ export function ChatRoom({
 							</p>
 						</header>
 
-						<div ref={scrollerRef} className="flex-1 overflow-auto px-6 py-4 space-y-3">
+						<div
+							ref={scrollerRef}
+							className="flex-1 overflow-auto px-6 py-4 space-y-3"
+						>
 							{messages.length === 0 ? (
 								<p className="text-sm text-neutral-500 text-center py-12">
 									No messages yet. Say hi.
@@ -219,13 +200,13 @@ export function ChatRoom({
 								value={body}
 								onChange={(e) => setBody(e.target.value)}
 								placeholder={`Message ${active.name}…`}
-								disabled={pending}
+								disabled={sending}
 								className="flex-1"
 							/>
 							<Button
 								type="submit"
 								variant="primary"
-								disabled={pending || !body.trim()}
+								disabled={sending || !body.trim()}
 							>
 								Send
 							</Button>

package/templates/web/chat/apps/web/src/app/layout.tsx

@@ -1,9 +1,10 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import { Providers } from "./providers";
 
 export const metadata: Metadata = {
 	title: "__APP_NAME__",
-	description: "Multi-tenant SaaS scaffold powered by Pylon",
+	description: "Realtime chat powered by Pylon's sync engine",
 };
 
 export default function RootLayout({
@@ -14,7 +15,7 @@ export default function RootLayout({
 	return (
 		<html lang="en">
 			<body className="antialiased min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
-				{children}
+				<Providers>{children}</Providers>
 			</body>
 		</html>
 	);

package/templates/web/chat/apps/web/src/app/page.tsx

@@ -1,51 +1,12 @@
-import { pylon } from "@/lib/pylon";
 import { ChatRoom } from "./components/ChatRoom";
 
-export const dynamic = "force-dynamic";
-
-type Room = {
-	id: string;
-	slug: string;
-	name: string;
-	createdAt: string;
-};
-
-type Message = {
-	id: string;
-	roomId: string;
-	authorId: string;
-	authorName: string;
-	body: string;
-	createdAt: string;
-};
-
-export default async function HomePage() {
-	const rooms = await pylon
-		.json<Room[]>("/api/fn/listRooms", {
-			method: "POST",
-			body: "{}",
-			headers: { "Content-Type": "application/json" },
-		})
-		.catch(() => [] as Room[]);
-
-	const initialRoom = rooms[0] ?? null;
-	const initialMessages = initialRoom
-		? await pylon
-				.json<Message[]>("/api/fn/roomMessages", {
-					method: "POST",
-					body: JSON.stringify({ roomId: initialRoom.id }),
-					headers: { "Content-Type": "application/json" },
-				})
-				.catch(() => [] as Message[])
-		: [];
-
+// All data flows through `db.useQuery` in the client component below —
+// no server-side initial fetch needed. The sync engine handles initial
+// hydration + every subsequent change over the same WebSocket.
+export default function HomePage() {
 	return (
 		<main className="h-screen flex">
-			<ChatRoom
-				initialRooms={rooms}
-				initialActiveRoom={initialRoom}
-				initialMessages={initialMessages}
-			/>
+			<ChatRoom />
 		</main>
 	);
 }

package/templates/web/chat/apps/web/src/app/providers.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { init } from "@pylonsync/react";
+
+/**
+ * Boots the Pylon sync engine on first mount. Every `db.useQuery`
+ * downstream renders against the same engine instance, so a single
+ * top-level Providers wrapper is enough — no need to thread a client
+ * through context.
+ *
+ * `baseUrl` is the same-origin Next path because next.config.ts
+ * proxies /api/* to the Pylon binary on PYLON_API_URL. Browser →
+ * same-origin → Next server → Pylon: no CORS, no extra DNS, the
+ * cookie travels naturally.
+ */
+export function Providers({ children }: { children: React.ReactNode }) {
+	const [ready, setReady] = useState(false);
+	useEffect(() => {
+		init({ baseUrl: "", appName: "__APP_NAME_SNAKE__" });
+		setReady(true);
+	}, []);
+	if (!ready) return null;
+	return <>{children}</>;
+}