@pylonsync/create-pylon 0.3.50 → 0.3.53

package/templates/mobile/todo/apps/mobile/Sources/__APP_NAME_PASCAL__/TodoListView.swift

@@ -0,0 +1,230 @@
+import SwiftUI
+import PylonClient
+
+/// Live Todo list with add, toggle, edit, drag-reorder, and delete.
+/// Uses PylonClient's HTTP API directly. Drop-in upgrade path:
+/// swap `load()` for a `PylonQuery<Todo>` ObservableObject from
+/// PylonSwiftUI to get realtime updates without polling.
+struct TodoListView: View {
+	@EnvironmentObject var session: AppSession
+
+	@State private var todos: [Todo] = []
+	@State private var draftTitle: String = ""
+	@State private var loading = true
+	@State private var pending = false
+	@State private var errorMessage: String?
+	@State private var editingId: String?
+	@State private var editingDraft: String = ""
+
+	var body: some View {
+		NavigationStack {
+			List {
+				Section("Add") {
+					HStack {
+						TextField("What needs doing?", text: $draftTitle)
+							.textFieldStyle(.roundedBorder)
+							.onSubmit { Task { await add() } }
+						Button("Add") { Task { await add() } }
+							.buttonStyle(.borderedProminent)
+							.disabled(draftTitle.trimmingCharacters(in: .whitespaces).isEmpty || pending)
+					}
+				}
+
+				Section("Todos") {
+					if loading {
+						ProgressView()
+					} else if todos.isEmpty {
+						Text("No todos yet.").foregroundStyle(.secondary)
+					} else {
+						ForEach(todos) { todo in
+							row(todo)
+						}
+						.onMove { source, destination in
+							Task { await reorder(from: source, to: destination) }
+						}
+						.onDelete { offsets in
+							Task { await delete(at: offsets) }
+						}
+					}
+				}
+
+				if let errorMessage {
+					Section {
+						Text(errorMessage)
+							.foregroundStyle(.red)
+							.font(.caption)
+					}
+				}
+			}
+			.navigationTitle("__APP_NAME__")
+			.toolbar { EditButton() }
+			.task { await load() }
+			.refreshable { await load() }
+		}
+	}
+
+	@ViewBuilder
+	private func row(_ todo: Todo) -> some View {
+		HStack(spacing: 12) {
+			Button {
+				Task { await toggle(todo) }
+			} label: {
+				Image(systemName: todo.done ? "checkmark.circle.fill" : "circle")
+					.foregroundStyle(todo.done ? .green : .secondary)
+			}
+			.buttonStyle(.plain)
+
+			if editingId == todo.id {
+				TextField("Title", text: $editingDraft)
+					.textFieldStyle(.roundedBorder)
+					.onSubmit { Task { await commitEdit(todo) } }
+				Button("Save") { Task { await commitEdit(todo) } }
+					.buttonStyle(.bordered)
+				Button("Cancel") {
+					editingId = nil
+					editingDraft = ""
+				}
+				.buttonStyle(.bordered)
+			} else {
+				Text(todo.title)
+					.strikethrough(todo.done, color: .secondary)
+					.foregroundStyle(todo.done ? .secondary : .primary)
+				Spacer()
+				Button("Edit") {
+					editingId = todo.id
+					editingDraft = todo.title
+				}
+				.buttonStyle(.borderless)
+				.font(.caption)
+			}
+		}
+	}
+
+	// MARK: - Network
+
+	private func load() async {
+		loading = true
+		defer { loading = false }
+		do {
+			let rows: [Todo] = try await session.pylon.callFn("listTodos", args: EmptyArgs())
+			todos = rows
+			errorMessage = nil
+		} catch {
+			errorMessage = "Load failed: \(error.localizedDescription)"
+		}
+	}
+
+	private func add() async {
+		let trimmed = draftTitle.trimmingCharacters(in: .whitespaces)
+		guard !trimmed.isEmpty else { return }
+		pending = true
+		defer { pending = false }
+		do {
+			let todo: Todo = try await session.pylon.callFn(
+				"addTodo",
+				args: AddTodoArgs(title: trimmed),
+			)
+			todos.append(todo)
+			draftTitle = ""
+		} catch {
+			errorMessage = "Add failed: \(error.localizedDescription)"
+		}
+	}
+
+	private func toggle(_ todo: Todo) async {
+		let nextDone = !todo.done
+		// Optimistic update
+		if let i = todos.firstIndex(where: { $0.id == todo.id }) {
+			todos[i].done = nextDone
+		}
+		do {
+			let _: Todo = try await session.pylon.callFn(
+				"toggleTodo",
+				args: ToggleTodoArgs(id: todo.id, done: nextDone),
+			)
+		} catch {
+			// Revert
+			if let i = todos.firstIndex(where: { $0.id == todo.id }) {
+				todos[i].done = todo.done
+			}
+			errorMessage = "Toggle failed: \(error.localizedDescription)"
+		}
+	}
+
+	private func commitEdit(_ todo: Todo) async {
+		let trimmed = editingDraft.trimmingCharacters(in: .whitespaces)
+		guard !trimmed.isEmpty, trimmed != todo.title else {
+			editingId = nil
+			editingDraft = ""
+			return
+		}
+		let originalTitle = todo.title
+		if let i = todos.firstIndex(where: { $0.id == todo.id }) {
+			todos[i].title = trimmed
+		}
+		editingId = nil
+		editingDraft = ""
+		do {
+			let _: Todo = try await session.pylon.callFn(
+				"editTodo",
+				args: EditTodoArgs(id: todo.id, title: trimmed),
+			)
+		} catch {
+			if let i = todos.firstIndex(where: { $0.id == todo.id }) {
+				todos[i].title = originalTitle
+			}
+			errorMessage = "Rename failed: \(error.localizedDescription)"
+		}
+	}
+
+	private func delete(at offsets: IndexSet) async {
+		let removed = offsets.map { todos[$0] }
+		todos.remove(atOffsets: offsets)
+		for todo in removed {
+			do {
+				let _: Todo = try await session.pylon.callFn(
+					"deleteTodo",
+					args: DeleteTodoArgs(id: todo.id),
+				)
+			} catch {
+				todos.append(todo)
+				errorMessage = "Delete failed: \(error.localizedDescription)"
+			}
+		}
+	}
+
+	private func reorder(from source: IndexSet, to destination: Int) async {
+		var moved = todos
+		moved.move(fromOffsets: source, toOffset: destination)
+		guard let movedIndex = source.first else { return }
+		// Compute the moved row's new index after the move
+		let newIndex = destination > movedIndex ? destination - 1 : destination
+		guard newIndex < moved.count else { return }
+		let movedTodo = moved[newIndex]
+		let prev = newIndex > 0 ? moved[newIndex - 1] : nil
+		let next = newIndex + 1 < moved.count ? moved[newIndex + 1] : nil
+		let prevPos = prev?.position ?? 0
+		let nextPos = next?.position ?? 0
+		let position: Double
+		if prev != nil && next != nil {
+			position = (prevPos + nextPos) / 2
+		} else if prev != nil {
+			position = prevPos + 1024
+		} else if next != nil {
+			position = nextPos - 1024
+		} else {
+			position = 1024
+		}
+		let snapshot = todos
+		todos = moved
+		do {
+			let _: Todo = try await session.pylon.callFn(
+				"reorderTodo",
+				args: ReorderTodoArgs(id: movedTodo.id, position: position),
+			)
+		} catch {
+			todos = snapshot
+			errorMessage = "Reorder failed: \(error.localizedDescription)"
+		}
+	}
+}

package/templates/mobile/todo/apps/mobile/Sources/__APP_NAME_PASCAL__/__APP_NAME_PASCAL__App.swift

@@ -0,0 +1,28 @@
+import SwiftUI
+import PylonClient
+
+@main
+struct __APP_NAME_PASCAL__App: App {
+	@StateObject private var session = AppSession()
+
+	var body: some Scene {
+		WindowGroup {
+			TodoListView()
+				.environmentObject(session)
+		}
+	}
+}
+
+@MainActor
+final class AppSession: ObservableObject {
+	let pylon: PylonClient
+
+	init() {
+		let baseURLString = ProcessInfo.processInfo.environment["PYLON_BASE_URL"]
+			?? "http://localhost:4321"
+		guard let url = URL(string: baseURLString) else {
+			fatalError("Invalid PYLON_BASE_URL: \(baseURLString)")
+		}
+		self.pylon = PylonClient(baseURL: url, appName: "__APP_NAME_SNAKE__")
+	}
+}

package/templates/mobile/todo/apps/mobile/project.yml

@@ -0,0 +1,32 @@
+name: __APP_NAME_PASCAL__
+options:
+  bundleIdPrefix: com.example
+  deploymentTarget:
+    iOS: "16.0"
+
+packages:
+  pylon:
+    url: https://github.com/pylonsync/pylon.git
+    from: "0.3.0"
+
+targets:
+  __APP_NAME_PASCAL__:
+    type: application
+    platform: iOS
+    sources:
+      - path: Sources/__APP_NAME_PASCAL__
+    settings:
+      base:
+        GENERATE_INFOPLIST_FILE: YES
+        INFOPLIST_KEY_UIApplicationSceneManifest_Generation: YES
+        INFOPLIST_KEY_UILaunchScreen_Generation: YES
+        INFOPLIST_KEY_UISupportedInterfaceOrientations: "UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight"
+        TARGETED_DEVICE_FAMILY: "1,2"
+        SWIFT_VERSION: "5.9"
+        ENABLE_PREVIEWS: YES
+        INFOPLIST_KEY_NSAppTransportSecurity: "{NSAllowsLocalNetworking = YES;}"
+    dependencies:
+      - package: pylon
+        product: PylonClient
+      - package: pylon
+        product: PylonSwiftUI

package/templates/ui/packages/ui/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@__APP_NAME_KEBAB__/ui",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./button": "./src/button.tsx",
+    "./input": "./src/input.tsx",
+    "./card": "./src/card.tsx",
+    "./cn": "./src/cn.ts"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.5.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "typescript": "^5.5.0"
+  }
+}

package/templates/ui/packages/ui/src/button.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { cn } from "./cn";
+
+type Variant = "default" | "primary" | "ghost";
+type Size = "sm" | "md";
+
+const variants: Record<Variant, string> = {
+	default:
+		"bg-neutral-100 hover:bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-neutral-100",
+	primary:
+		"bg-neutral-900 hover:bg-neutral-800 text-white dark:bg-white dark:hover:bg-neutral-200 dark:text-neutral-900",
+	ghost:
+		"bg-transparent hover:bg-neutral-100 text-neutral-700 dark:hover:bg-neutral-800 dark:text-neutral-300",
+};
+
+const sizes: Record<Size, string> = {
+	sm: "h-8 px-3 text-[13px]",
+	md: "h-9 px-4 text-sm",
+};
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	variant?: Variant;
+	size?: Size;
+}
+
+export function Button({
+	className,
+	variant = "default",
+	size = "md",
+	...props
+}: ButtonProps) {
+	return (
+		<button
+			className={cn(
+				"inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
+				variants[variant],
+				sizes[size],
+				className,
+			)}
+			{...props}
+		/>
+	);
+}

package/templates/ui/packages/ui/src/card.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { cn } from "./cn";
+
+export function Card({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			className={cn(
+				"rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export function CardHeader({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			className={cn(
+				"p-5 border-b border-neutral-200 dark:border-neutral-800",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export function CardContent({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+	return <div className={cn("p-5", className)} {...props} />;
+}

package/templates/ui/packages/ui/src/cn.ts

@@ -0,0 +1,12 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Tailwind-aware class merger. Last-class-wins semantics so a
+ * caller's `className` reliably overrides a default in a UI
+ * primitive (e.g. <Button className="bg-red-500"> beats the
+ * primitive's bg-neutral-900 base).
+ */
+export function cn(...inputs: ClassValue[]): string {
+	return twMerge(clsx(inputs));
+}

package/templates/ui/packages/ui/src/index.ts

@@ -0,0 +1,4 @@
+export { cn } from "./cn";
+export { Button, type ButtonProps } from "./button";
+export { Input, type InputProps } from "./input";
+export { Card, CardHeader, CardContent } from "./card";

package/templates/ui/packages/ui/src/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "./cn";
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+	function Input({ className, ...props }, ref) {
+		return (
+			<input
+				ref={ref}
+				className={cn(
+					"flex h-9 w-full rounded-md border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:opacity-50",
+					className,
+				)}
+				{...props}
+			/>
+		);
+	},
+);

package/templates/ui/packages/ui/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "esnext"],
+    "jsx": "preserve",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/templates/web/barebones/apps/web/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />

package/templates/web/barebones/apps/web/next.config.ts

@@ -0,0 +1,40 @@
+import type { NextConfig } from "next";
+
+/**
+ * Pylon's typed client + functions packages re-export across the
+ * server/client boundary AND the workspace UI package ships TSX.
+ * `transpilePackages` makes Next bundle them cleanly.
+ *
+ * `rewrites` proxies every Pylon-owned path (`/api/fn/*`,
+ * `/api/auth/*`, `/api/sync/*`, …) to the Pylon binary running on
+ * `PYLON_API_URL` (default http://localhost:4321). Without this,
+ * Next.js sees `/api/fn/createWidget` as a missing route and 404s
+ * before the request reaches Pylon.
+ *
+ * In production set `PYLON_API_URL` to wherever you've deployed the
+ * Pylon binary (Fly, Render, Railway, your own box). The browser
+ * still hits same-origin paths under your Next deployment, and Next
+ * forwards them server-side — no CORS, no extra DNS.
+ */
+const PYLON_API_URL = process.env.PYLON_API_URL ?? "http://localhost:4321";
+
+const config: NextConfig = {
+	transpilePackages: [
+		"@__APP_NAME_KEBAB__/ui",
+		"@pylonsync/sdk",
+		"@pylonsync/react",
+		"@pylonsync/next",
+		"@pylonsync/functions",
+		"@pylonsync/sync",
+	],
+	async rewrites() {
+		return [
+			{ source: "/api/fn/:path*", destination: `${PYLON_API_URL}/api/fn/:path*` },
+			{ source: "/api/auth/:path*", destination: `${PYLON_API_URL}/api/auth/:path*` },
+			{ source: "/api/sync/:path*", destination: `${PYLON_API_URL}/api/sync/:path*` },
+			{ source: "/api/:path*", destination: `${PYLON_API_URL}/api/:path*` },
+		];
+	},
+};
+
+export default config;

package/templates/web/barebones/apps/web/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@__APP_NAME_KEBAB__/web",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev --port 3000",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@__APP_NAME_KEBAB__/ui": "__WORKSPACE_DEP__",
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
+    "@pylonsync/react": "^__PYLON_VERSION__",
+    "@pylonsync/next": "^__PYLON_VERSION__",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.5.0"
+  }
+}

package/templates/web/barebones/apps/web/postcss.config.mjs

@@ -0,0 +1,4 @@
+/** Tailwind v4 PostCSS pipeline. */
+export default {
+	plugins: { "@tailwindcss/postcss": {} },
+};

package/templates/web/barebones/apps/web/src/app/components/WidgetList.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Button, Input } from "@__APP_NAME_KEBAB__/ui";
+
+type Widget = {
+	id: string;
+	name: string;
+	count: number;
+	createdAt: string;
+};
+
+export function WidgetList({ initialWidgets }: { initialWidgets: Widget[] }) {
+	const [widgets, setWidgets] = useState(initialWidgets);
+	const [name, setName] = useState("");
+	const [pending, startTransition] = useTransition();
+
+	async function add() {
+		const trimmed = name.trim();
+		if (!trimmed) return;
+		setName("");
+		startTransition(async () => {
+			const res = await fetch("/api/fn/createWidget", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ name: trimmed }),
+			});
+			if (res.ok) {
+				const widget = (await res.json()) as Widget;
+				setWidgets((prev) => [widget, ...prev]);
+			}
+		});
+	}
+
+	return (
+		<div className="space-y-4">
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					add();
+				}}
+				className="flex gap-2"
+			>
+				<Input
+					value={name}
+					onChange={(e) => setName(e.target.value)}
+					placeholder="Name a widget…"
+					disabled={pending}
+					className="flex-1"
+				/>
+				<Button
+					type="submit"
+					variant="primary"
+					disabled={pending || !name.trim()}
+				>
+					Create
+				</Button>
+			</form>
+
+			{widgets.length === 0 ? (
+				<p className="text-sm text-neutral-500 dark:text-neutral-400 text-center py-8">
+					No widgets yet. Create one above.
+				</p>
+			) : (
+				<ul className="divide-y divide-neutral-200 dark:divide-neutral-800 rounded-md border border-neutral-200 dark:border-neutral-800">
+					{widgets.map((w) => (
+						<li
+							key={w.id}
+							className="flex items-center justify-between gap-3 px-4 py-3 text-sm bg-white dark:bg-neutral-950"
+						>
+							<span className="font-medium">{w.name}</span>
+							<span className="font-mono text-xs text-neutral-400">
+								count: {w.count}
+							</span>
+						</li>
+					))}
+				</ul>
+			)}
+		</div>
+	);
+}

package/templates/web/barebones/apps/web/src/app/globals.css

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+@source "../../../../packages/ui/src/**/*.{ts,tsx}";
+
+:root {
+	color-scheme: light dark;
+}
+
+html, body { height: 100%; }
+body { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }

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

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+	title: "__APP_NAME__",
+	description: "Realtime app powered by Pylon",
+};
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<html lang="en">
+			<body className="antialiased min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
+				{children}
+			</body>
+		</html>
+	);
+}