@pylonsync/create-pylon 0.3.51 → 0.3.54

package/templates/expo/todo/apps/expo/App.tsx

@@ -0,0 +1,287 @@
+import { useEffect, useState } from "react";
+import {
+	View,
+	Text,
+	TextInput,
+	Pressable,
+	FlatList,
+	ActivityIndicator,
+	StyleSheet,
+	Platform,
+	Alert,
+} from "react-native";
+import { StatusBar } from "expo-status-bar";
+import { init, db, callFn } from "@pylonsync/react-native";
+
+const PYLON_BASE_URL =
+	process.env.EXPO_PUBLIC_PYLON_BASE_URL ??
+	(Platform.OS === "android" ? "http://10.0.2.2:4321" : "http://localhost:4321");
+
+type Todo = {
+	id: string;
+	title: string;
+	done: boolean;
+	createdAt: string;
+	position?: number;
+};
+
+let initPromise: Promise<void> | null = null;
+function ensureInit() {
+	if (!initPromise) {
+		initPromise = init({
+			baseUrl: PYLON_BASE_URL,
+			appName: "__APP_NAME_SNAKE__",
+		});
+	}
+	return initPromise;
+}
+
+export default function App() {
+	const [ready, setReady] = useState(false);
+	useEffect(() => {
+		ensureInit().then(() => setReady(true));
+	}, []);
+
+	if (!ready) {
+		return (
+			<View style={[styles.screen, styles.center]}>
+				<ActivityIndicator />
+			</View>
+		);
+	}
+	return <TodoApp />;
+}
+
+function TodoApp() {
+	const { data: todos, loading } = db.useQuery<Todo>("Todo", {});
+	const [draft, setDraft] = useState("");
+	const [busy, setBusy] = useState(false);
+	const [editingId, setEditingId] = useState<string | null>(null);
+	const [editingDraft, setEditingDraft] = useState("");
+
+	async function add() {
+		const trimmed = draft.trim();
+		if (!trimmed) return;
+		setBusy(true);
+		try {
+			await callFn("addTodo", { title: trimmed });
+			setDraft("");
+		} catch (e) {
+			Alert.alert("Add failed", String(e));
+		} finally {
+			setBusy(false);
+		}
+	}
+
+	async function toggle(t: Todo) {
+		try {
+			await callFn("toggleTodo", { id: t.id, done: !t.done });
+		} catch (e) {
+			Alert.alert("Toggle failed", String(e));
+		}
+	}
+
+	async function remove(t: Todo) {
+		try {
+			await callFn("deleteTodo", { id: t.id });
+		} catch (e) {
+			Alert.alert("Delete failed", String(e));
+		}
+	}
+
+	async function commitEdit(t: Todo) {
+		const trimmed = editingDraft.trim();
+		if (!trimmed || trimmed === t.title) {
+			setEditingId(null);
+			setEditingDraft("");
+			return;
+		}
+		try {
+			await callFn("editTodo", { id: t.id, title: trimmed });
+		} catch (e) {
+			Alert.alert("Rename failed", String(e));
+		} finally {
+			setEditingId(null);
+			setEditingDraft("");
+		}
+	}
+
+	const sorted = (todos ?? [])
+		.slice()
+		.sort((a, b) => {
+			const ap = typeof a.position === "number" ? a.position : Date.parse(a.createdAt) || 0;
+			const bp = typeof b.position === "number" ? b.position : Date.parse(b.createdAt) || 0;
+			return ap - bp;
+		});
+
+	return (
+		<View style={styles.screen}>
+			<StatusBar style="auto" />
+			<Text style={styles.title}>__APP_NAME__</Text>
+			<Text style={styles.subtitle}>
+				Tap to toggle. Long-press to edit. Swipe-style buttons for delete.
+			</Text>
+
+			<View style={styles.row}>
+				<TextInput
+					style={styles.input}
+					placeholder="What needs doing?"
+					value={draft}
+					onChangeText={setDraft}
+					onSubmitEditing={add}
+					editable={!busy}
+					autoCorrect={false}
+				/>
+				<Pressable
+					onPress={add}
+					disabled={busy || !draft.trim()}
+					style={({ pressed }) => [
+						styles.button,
+						(busy || !draft.trim()) && styles.buttonDisabled,
+						pressed && styles.buttonPressed,
+					]}
+				>
+					<Text style={styles.buttonLabel}>Add</Text>
+				</Pressable>
+			</View>
+
+			{loading ? (
+				<ActivityIndicator style={{ marginTop: 24 }} />
+			) : sorted.length === 0 ? (
+				<Text style={styles.empty}>No todos yet.</Text>
+			) : (
+				<FlatList
+					data={sorted}
+					keyExtractor={(t) => t.id}
+					contentContainerStyle={{ paddingTop: 16 }}
+					ItemSeparatorComponent={() => <View style={styles.separator} />}
+					renderItem={({ item }) => (
+						<Row
+							todo={item}
+							editing={editingId === item.id}
+							editingDraft={editingDraft}
+							onEditingDraftChange={setEditingDraft}
+							onStartEdit={() => {
+								setEditingId(item.id);
+								setEditingDraft(item.title);
+							}}
+							onCommitEdit={() => commitEdit(item)}
+							onCancelEdit={() => {
+								setEditingId(null);
+								setEditingDraft("");
+							}}
+							onToggle={() => toggle(item)}
+							onDelete={() => remove(item)}
+						/>
+					)}
+				/>
+			)}
+		</View>
+	);
+}
+
+function Row({
+	todo,
+	editing,
+	editingDraft,
+	onEditingDraftChange,
+	onStartEdit,
+	onCommitEdit,
+	onCancelEdit,
+	onToggle,
+	onDelete,
+}: {
+	todo: Todo;
+	editing: boolean;
+	editingDraft: string;
+	onEditingDraftChange: (v: string) => void;
+	onStartEdit: () => void;
+	onCommitEdit: () => void;
+	onCancelEdit: () => void;
+	onToggle: () => void;
+	onDelete: () => void;
+}) {
+	return (
+		<View style={styles.item}>
+			<Pressable onPress={onToggle} hitSlop={8}>
+				<Text style={[styles.checkbox, todo.done && styles.checkboxDone]}>
+					{todo.done ? "☑" : "☐"}
+				</Text>
+			</Pressable>
+			{editing ? (
+				<TextInput
+					style={[styles.itemText, styles.itemEditInput]}
+					value={editingDraft}
+					onChangeText={onEditingDraftChange}
+					onSubmitEditing={onCommitEdit}
+					onBlur={onCommitEdit}
+					autoFocus
+					blurOnSubmit
+				/>
+			) : (
+				<Pressable onLongPress={onStartEdit} style={{ flex: 1 }}>
+					<Text
+						style={[styles.itemText, todo.done && styles.itemTextDone]}
+						numberOfLines={1}
+					>
+						{todo.title}
+					</Text>
+				</Pressable>
+			)}
+			{editing ? (
+				<Pressable onPress={onCancelEdit} hitSlop={8}>
+					<Text style={styles.actionLabel}>Cancel</Text>
+				</Pressable>
+			) : (
+				<Pressable onPress={onDelete} hitSlop={8}>
+					<Text style={[styles.actionLabel, styles.actionDelete]}>Delete</Text>
+				</Pressable>
+			)}
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	screen: { flex: 1, paddingTop: 64, paddingHorizontal: 20, backgroundColor: "#fff" },
+	center: { alignItems: "center", justifyContent: "center" },
+	title: { fontSize: 28, fontWeight: "600" },
+	subtitle: { color: "#666", marginTop: 4, marginBottom: 20 },
+	row: { flexDirection: "row", gap: 8 },
+	input: {
+		flex: 1,
+		borderWidth: 1,
+		borderColor: "#d4d4d8",
+		borderRadius: 6,
+		paddingHorizontal: 12,
+		paddingVertical: 8,
+		fontSize: 14,
+	},
+	button: {
+		backgroundColor: "#171717",
+		borderRadius: 6,
+		paddingHorizontal: 16,
+		justifyContent: "center",
+	},
+	buttonDisabled: { opacity: 0.5 },
+	buttonPressed: { opacity: 0.8 },
+	buttonLabel: { color: "#fff", fontWeight: "600" },
+	empty: { textAlign: "center", color: "#999", marginTop: 32 },
+	item: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: 12,
+		paddingVertical: 12,
+	},
+	checkbox: { fontSize: 22, color: "#9ca3af" },
+	checkboxDone: { color: "#16a34a" },
+	itemText: { flex: 1, fontSize: 15 },
+	itemTextDone: { color: "#9ca3af", textDecorationLine: "line-through" },
+	itemEditInput: {
+		borderBottomWidth: 1,
+		borderColor: "#d4d4d8",
+		paddingVertical: 4,
+	},
+	actionLabel: { fontSize: 13, color: "#6b7280" },
+	actionDelete: { color: "#ef4444" },
+	separator: { height: 1, backgroundColor: "#e5e5e5" },
+});

package/templates/expo/todo/apps/expo/app.json

@@ -0,0 +1,25 @@
+{
+  "expo": {
+    "name": "__APP_NAME__",
+    "slug": "__APP_NAME_KEBAB__",
+    "version": "0.0.1",
+    "orientation": "portrait",
+    "userInterfaceStyle": "automatic",
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.example.__APP_NAME_SNAKE__",
+      "infoPlist": {
+        "NSAppTransportSecurity": {
+          "NSAllowsLocalNetworking": true
+        }
+      }
+    },
+    "android": {
+      "package": "com.example.__APP_NAME_SNAKE__",
+      "usesCleartextTraffic": true
+    },
+    "web": {
+      "bundler": "metro"
+    }
+  }
+}

package/templates/expo/todo/apps/expo/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+	api.cache(true);
+	return {
+		presets: ["babel-preset-expo"],
+	};
+};

package/templates/expo/todo/apps/expo/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@__APP_NAME_KEBAB__/expo",
+  "version": "0.0.1",
+  "private": true,
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
+    "@pylonsync/react": "^__PYLON_VERSION__",
+    "@pylonsync/react-native": "^__PYLON_VERSION__",
+    "@pylonsync/sync": "^__PYLON_VERSION__",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-community/netinfo": "11.3.1",
+    "expo": "~51.0.0",
+    "expo-status-bar": "~1.12.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.74.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "^19.0.0",
+    "typescript": "^5.5.0"
+  }
+}

package/templates/expo/todo/apps/expo/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "lib": ["esnext", "dom"],
+    "jsx": "react-native",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "noEmit": true
+  },
+  "include": ["App.tsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/templates/ios/barebones/apps/ios/Package.swift

@@ -0,0 +1,34 @@
+// swift-tools-version:5.9
+import PackageDescription
+
+// SwiftPM package for the __APP_NAME__ mobile app.
+//
+// The executable target runs on macOS via `swift run`. For an iOS
+// build, generate an Xcode project from `project.yml`:
+//
+//     brew install xcodegen
+//     xcodegen generate
+//     open __APP_NAME_PASCAL__.xcodeproj
+//
+// The Xcode project pulls the same Sources/__APP_NAME_PASCAL__/ tree
+// as `swift build`, so iOS + macOS share one source set.
+let package = Package(
+	name: "__APP_NAME_PASCAL__",
+	platforms: [
+		.iOS(.v16),
+		.macOS(.v13),
+	],
+	dependencies: [
+		.package(url: "https://github.com/pylonsync/pylon.git", from: "0.3.0"),
+	],
+	targets: [
+		.executableTarget(
+			name: "__APP_NAME_PASCAL__",
+			dependencies: [
+				.product(name: "PylonClient", package: "pylon"),
+				.product(name: "PylonSwiftUI", package: "pylon"),
+			],
+			path: "Sources/__APP_NAME_PASCAL__"
+		),
+	]
+)

package/templates/ios/barebones/apps/ios/Sources/__APP_NAME_PASCAL__/ContentView.swift

@@ -0,0 +1,98 @@
+import SwiftUI
+import PylonClient
+
+/// Lists every Widget and lets the user create a new one. Uses
+/// PylonClient's HTTP API directly — no offline mirror, no realtime
+/// subscription. Plenty for a barebones starter; upgrade to
+/// `PylonQuery` from `PylonSwiftUI` when you need live updates.
+struct ContentView: View {
+	@EnvironmentObject var session: AppSession
+
+	@State private var widgets: [Widget] = []
+	@State private var newName: String = ""
+	@State private var loading = true
+	@State private var creating = false
+	@State private var errorMessage: String?
+
+	var body: some View {
+		NavigationStack {
+			List {
+				Section("Create") {
+					HStack {
+						TextField("Name a widget…", text: $newName)
+							.textFieldStyle(.roundedBorder)
+							.autocorrectionDisabled()
+						Button("Add") { Task { await create() } }
+							.buttonStyle(.borderedProminent)
+							.disabled(newName.trimmingCharacters(in: .whitespaces).isEmpty || creating)
+					}
+				}
+
+				Section("Widgets") {
+					if loading {
+						ProgressView()
+					} else if widgets.isEmpty {
+						Text("No widgets yet.")
+							.foregroundStyle(.secondary)
+					} else {
+						ForEach(widgets) { w in
+							HStack {
+								Text(w.name).font(.body)
+								Spacer()
+								Text("count: \(w.count)")
+									.font(.system(.caption, design: .monospaced))
+									.foregroundStyle(.secondary)
+							}
+						}
+					}
+				}
+
+				if let errorMessage {
+					Section {
+						Text(errorMessage)
+							.foregroundStyle(.red)
+							.font(.caption)
+					}
+				}
+			}
+			.navigationTitle("__APP_NAME__")
+			.task { await load() }
+			.refreshable { await load() }
+		}
+	}
+
+	private func load() async {
+		loading = true
+		defer { loading = false }
+		do {
+			let rows: [Widget] = try await session.pylon.callFn(
+				"listWidgets",
+				args: EmptyArgs(),
+			)
+			widgets = rows
+			errorMessage = nil
+		} catch {
+			errorMessage = "Load failed: \(error.localizedDescription)"
+		}
+	}
+
+	private func create() async {
+		let trimmed = newName.trimmingCharacters(in: .whitespaces)
+		guard !trimmed.isEmpty else { return }
+		creating = true
+		defer { creating = false }
+		do {
+			let widget: Widget = try await session.pylon.callFn(
+				"createWidget",
+				args: CreateWidgetArgs(name: trimmed),
+			)
+			widgets.insert(widget, at: 0)
+			newName = ""
+			errorMessage = nil
+		} catch {
+			errorMessage = "Create failed: \(error.localizedDescription)"
+		}
+	}
+}
+
+private struct EmptyArgs: Encodable {}

package/templates/ios/barebones/apps/ios/Sources/__APP_NAME_PASCAL__/Models.swift

@@ -0,0 +1,17 @@
+import Foundation
+
+/// Mirrors `Widget` from `apps/api/schema.ts`. Kept hand-written here
+/// for clarity in the scaffold; for production, run
+/// `pylon codegen client schema.ts --target swift --out Models.swift`
+/// from `apps/api/` to regenerate this file from the schema.
+struct Widget: Codable, Identifiable, Hashable {
+	let id: String
+	let name: String
+	let count: Int
+	let createdAt: String
+}
+
+/// Argument shape for `createWidget`.
+struct CreateWidgetArgs: Encodable {
+	let name: String
+}

package/templates/ios/barebones/apps/ios/Sources/__APP_NAME_PASCAL__/__APP_NAME_PASCAL__App.swift

@@ -0,0 +1,34 @@
+import SwiftUI
+import PylonClient
+
+/// SwiftUI entry point. Bootstraps a single shared PylonClient pointed
+/// at the local Pylon control plane (`pylon dev`'s default port). For
+/// production, override `PYLON_BASE_URL` via the build environment or
+/// edit the URL inline.
+@main
+struct __APP_NAME_PASCAL__App: App {
+	@StateObject private var session = AppSession()
+
+	var body: some Scene {
+		WindowGroup {
+			ContentView()
+				.environmentObject(session)
+		}
+	}
+}
+
+/// Shared app state. The PylonClient is held here so every view in
+/// the tree gets the same instance via `@EnvironmentObject`.
+@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/ios/barebones/apps/ios/project.yml

@@ -0,0 +1,42 @@
+# xcodegen spec for the iOS build of __APP_NAME__.
+#
+# Materialize the Xcode project once with:
+#     brew install xcodegen
+#     xcodegen generate
+# Then open __APP_NAME_PASCAL__.xcodeproj.
+
+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
+        # __APP_NAME__ talks to a Pylon backend on localhost during dev.
+        # The simulator can reach localhost directly; on a physical device
+        # set PYLON_BASE_URL to your machine's LAN IP.
+        INFOPLIST_KEY_NSAppTransportSecurity: "{NSAllowsLocalNetworking = YES;}"
+    dependencies:
+      - package: pylon
+        product: PylonClient
+      - package: pylon
+        product: PylonSwiftUI

package/templates/ios/chat/apps/ios/Package.swift

@@ -0,0 +1,34 @@
+// swift-tools-version:5.9
+import PackageDescription
+
+// SwiftPM package for the __APP_NAME__ mobile app.
+//
+// The executable target runs on macOS via `swift run`. For an iOS
+// build, generate an Xcode project from `project.yml`:
+//
+//     brew install xcodegen
+//     xcodegen generate
+//     open __APP_NAME_PASCAL__.xcodeproj
+//
+// The Xcode project pulls the same Sources/__APP_NAME_PASCAL__/ tree
+// as `swift build`, so iOS + macOS share one source set.
+let package = Package(
+	name: "__APP_NAME_PASCAL__",
+	platforms: [
+		.iOS(.v16),
+		.macOS(.v13),
+	],
+	dependencies: [
+		.package(url: "https://github.com/pylonsync/pylon.git", from: "0.3.0"),
+	],
+	targets: [
+		.executableTarget(
+			name: "__APP_NAME_PASCAL__",
+			dependencies: [
+				.product(name: "PylonClient", package: "pylon"),
+				.product(name: "PylonSwiftUI", package: "pylon"),
+			],
+			path: "Sources/__APP_NAME_PASCAL__"
+		),
+	]
+)