@pylonsync/create-pylon 0.3.54 → 0.3.57

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
 	View,
 	Text,
@@ -9,14 +9,18 @@ import {
 	StyleSheet,
 	Platform,
 	Alert,
+	SafeAreaView,
 } from "react-native";
 import { StatusBar } from "expo-status-bar";
-import { init, callFn } from "@pylonsync/react-native";
+import { init, db, callFn } from "@pylonsync/react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 const PYLON_BASE_URL =
 	process.env.EXPO_PUBLIC_PYLON_BASE_URL ??
 	(Platform.OS === "android" ? "http://10.0.2.2:4321" : "http://localhost:4321");
 
+const PROFILE_KEY = "__APP_NAME_SNAKE___profile_id";
+
 type Profile = {
 	id: string;
 	userId: string;
@@ -26,13 +30,18 @@ type Profile = {
 	createdAt: string;
 };
 
-type FeedItem = {
+type Post = {
 	id: string;
+	authorId: string;
 	body: string;
 	createdAt: string;
-	author: { id: string; handle: string; displayName: string } | null;
-	likeCount: number;
-	likedByMe: boolean;
+};
+
+type Like = {
+	id: string;
+	postId: string;
+	profileId: string;
+	createdAt: string;
 };
 
 let initPromise: Promise<void> | null = null;
@@ -48,20 +57,15 @@ function ensureInit() {
 
 export default function App() {
 	const [ready, setReady] = useState(false);
-	const [me, setMe] = useState<Profile | null>(null);
-
+	const [profileId, setProfileId] = useState<string | null>(null);
 	useEffect(() => {
-		ensureInit().then(async () => {
-			try {
-				const profile = await callFn<Profile | null>("myProfile", {});
-				setMe(profile);
-			} catch {
-				setMe(null);
-			}
+		(async () => {
+			await ensureInit();
+			const stored = await AsyncStorage.getItem(PROFILE_KEY);
+			setProfileId(stored);
 			setReady(true);
-		});
+		})();
 	}, []);
-
 	if (!ready) {
 		return (
 			<View style={[styles.screen, styles.center]}>
@@ -69,156 +73,86 @@ export default function App() {
 			</View>
 		);
 	}
+	return (
+		<Root
+			profileId={profileId}
+			onProfileChange={async (id) => {
+				if (id) await AsyncStorage.setItem(PROFILE_KEY, id);
+				else await AsyncStorage.removeItem(PROFILE_KEY);
+				setProfileId(id);
+			}}
+		/>
+	);
+}
+
+function Root({
+	profileId,
+	onProfileChange,
+}: {
+	profileId: string | null;
+	onProfileChange: (id: string | null) => void;
+}) {
+	const { data: profiles = [] } = db.useQuery<Profile>("Profile", {});
+	const me = useMemo(
+		() => (profileId ? (profiles.find((p) => p.id === profileId) ?? null) : null),
+		[profileId, profiles],
+	);
+
 	if (!me) {
-		return <ProfileSetup onSaved={setMe} />;
+		return (
+			<ProfileSetup
+				existingHandles={profiles.map((p) => p.handle)}
+				onSaved={(p) => onProfileChange(p.id)}
+			/>
+		);
 	}
-	return <Feed me={me} />;
+	return <Feed me={me} profiles={profiles} />;
 }
 
-function ProfileSetup({ onSaved }: { onSaved: (p: Profile) => void }) {
-	const [handle, setHandle] = useState("");
-	const [displayName, setDisplayName] = useState("");
-	const [bio, setBio] = useState("");
-	const [saving, setSaving] = useState(false);
+function Feed({ me, profiles }: { me: Profile; profiles: Profile[] }) {
+	const { data: posts = [] } = db.useQuery<Post>("Post", {
+		orderBy: { createdAt: "desc" },
+		limit: 100,
+	});
+	const { data: likes = [] } = db.useQuery<Like>("Like", {});
 
-	async function save() {
-		setSaving(true);
-		try {
-			const p = await callFn<Profile>("upsertProfile", {
-				handle: handle.trim().toLowerCase(),
-				displayName: displayName.trim(),
-				bio: bio.trim(),
-			});
-			onSaved(p);
-		} catch (e) {
-			Alert.alert("Save failed", String(e));
-		} finally {
-			setSaving(false);
-		}
-	}
+	const profilesById = useMemo(() => {
+		const map = new Map<string, Profile>();
+		for (const p of profiles) map.set(p.id, p);
+		return map;
+	}, [profiles]);
 
-	return (
-		<View style={styles.screen}>
-			<StatusBar style="auto" />
-			<Text style={styles.title}>__APP_NAME__</Text>
-			<Text style={styles.subtitle}>Set up your profile</Text>
-			<TextInput
-				style={styles.input}
-				placeholder="handle (lowercase, 2–20)"
-				autoCapitalize="none"
-				autoCorrect={false}
-				value={handle}
-				onChangeText={setHandle}
-			/>
-			<TextInput
-				style={styles.input}
-				placeholder="Display name"
-				value={displayName}
-				onChangeText={setDisplayName}
-			/>
-			<TextInput
-				style={styles.input}
-				placeholder="Bio (optional)"
-				value={bio}
-				onChangeText={setBio}
-			/>
-			<Pressable
-				onPress={save}
-				disabled={saving || !handle.trim() || !displayName.trim()}
-				style={({ pressed }) => [
-					styles.button,
-					(saving || !handle.trim() || !displayName.trim()) && styles.buttonDisabled,
-					pressed && styles.buttonPressed,
-				]}
-			>
-				<Text style={styles.buttonLabel}>{saving ? "Saving…" : "Save"}</Text>
-			</Pressable>
-		</View>
+	const items = useMemo(
+		() =>
+			posts.map((post) => {
+				const author = profilesById.get(post.authorId) ?? null;
+				const postLikes = likes.filter((l) => l.postId === post.id);
+				const likedByMe = postLikes.some((l) => l.profileId === me.id);
+				return { post, author, likeCount: postLikes.length, likedByMe };
+			}),
+		[posts, profilesById, likes, me.id],
 	);
-}
 
-function Feed({ me }: { me: Profile }) {
-	const [feed, setFeed] = useState<FeedItem[]>([]);
-	const [loading, setLoading] = useState(true);
 	const [draft, setDraft] = useState("");
 	const [posting, setPosting] = useState(false);
 
-	useEffect(() => {
-		void load();
-	}, []);
-
-	async function load() {
-		setLoading(true);
-		try {
-			setFeed(await callFn<FeedItem[]>("feed", {}));
-		} catch (e) {
-			Alert.alert("Load failed", String(e));
-		} finally {
-			setLoading(false);
-		}
-	}
-
 	async function post() {
 		const body = draft.trim();
 		if (!body) return;
+		setDraft("");
 		setPosting(true);
 		try {
-			const item = await callFn<FeedItem>("createPost", { body });
-			setFeed((prev) => [item, ...prev]);
-			setDraft("");
+			await callFn("createPost", { body });
 		} catch (e) {
 			Alert.alert("Post failed", String(e));
+			setDraft(body);
 		} finally {
 			setPosting(false);
 		}
 	}
 
-	async function toggleLike(item: FeedItem) {
-		setFeed((prev) =>
-			prev.map((p) =>
-				p.id === item.id
-					? {
-							...p,
-							likedByMe: !p.likedByMe,
-							likeCount: p.likeCount + (p.likedByMe ? -1 : 1),
-						}
-					: p,
-			),
-		);
-		try {
-			const result = await callFn<{ liked: boolean; likeCount: number }>(
-				"toggleLike",
-				{ postId: item.id },
-			);
-			setFeed((prev) =>
-				prev.map((p) =>
-					p.id === item.id
-						? { ...p, likedByMe: result.liked, likeCount: result.likeCount }
-						: p,
-				),
-			);
-		} catch {
-			setFeed((prev) =>
-				prev.map((p) =>
-					p.id === item.id
-						? { ...p, likedByMe: item.likedByMe, likeCount: item.likeCount }
-						: p,
-				),
-			);
-		}
-	}
-
-	async function remove(item: FeedItem) {
-		setFeed((prev) => prev.filter((p) => p.id !== item.id));
-		try {
-			await callFn("deletePost", { id: item.id });
-		} catch {
-			setFeed((prev) => [...prev, item]);
-		}
-	}
-
 	return (
-		<View style={styles.screen}>
+		<SafeAreaView style={styles.screen}>
 			<StatusBar style="auto" />
 			<View style={styles.headerRow}>
 				<View>
@@ -252,57 +186,155 @@ function Feed({ me }: { me: Profile }) {
 				</View>
 			</View>
 
-			{loading ? (
-				<ActivityIndicator style={{ marginTop: 24 }} />
-			) : feed.length === 0 ? (
+			{items.length === 0 ? (
 				<Text style={styles.empty}>No posts yet.</Text>
 			) : (
 				<FlatList
-					data={feed}
-					keyExtractor={(p) => p.id}
+					data={items}
+					keyExtractor={(it) => it.post.id}
 					contentContainerStyle={{ paddingTop: 8, paddingBottom: 32 }}
 					ItemSeparatorComponent={() => <View style={styles.separator} />}
-					renderItem={({ item }) => (
-						<View style={styles.post}>
-							<View style={styles.postHead}>
-								<Text style={styles.postName}>
-									{item.author?.displayName ?? "Unknown"}
-								</Text>
-								<Text style={styles.postHandle}>
-									@{item.author?.handle ?? "?"}
-								</Text>
-							</View>
-							<Text style={styles.postBody}>{item.body}</Text>
-							<View style={styles.postFoot}>
-								<Pressable onPress={() => toggleLike(item)}>
-									<Text
-										style={[
-											styles.likeBtn,
-											item.likedByMe && styles.likeBtnActive,
-										]}
-									>
-										{item.likedByMe ? "♥" : "♡"} {item.likeCount}
-									</Text>
-								</Pressable>
-								{item.author?.id === me.id && (
-									<Pressable onPress={() => remove(item)}>
-										<Text style={styles.deleteBtn}>Delete</Text>
-									</Pressable>
-								)}
-							</View>
-						</View>
-					)}
+					renderItem={({ item }) => <Row item={item} myId={me.id} />}
 				/>
 			)}
+		</SafeAreaView>
+	);
+}
+
+function Row({
+	item,
+	myId,
+}: {
+	item: {
+		post: Post;
+		author: Profile | null;
+		likeCount: number;
+		likedByMe: boolean;
+	};
+	myId: string;
+}) {
+	async function toggleLike() {
+		try {
+			await callFn("toggleLike", { postId: item.post.id });
+		} catch (e) {
+			Alert.alert("Like failed", String(e));
+		}
+	}
+	async function remove() {
+		try {
+			await callFn("deletePost", { id: item.post.id });
+		} catch (e) {
+			Alert.alert("Delete failed", String(e));
+		}
+	}
+	return (
+		<View style={styles.post}>
+			<View style={styles.postHead}>
+				<Text style={styles.postName}>
+					{item.author?.displayName ?? "Unknown"}
+				</Text>
+				<Text style={styles.postHandle}>@{item.author?.handle ?? "?"}</Text>
+			</View>
+			<Text style={styles.postBody}>{item.post.body}</Text>
+			<View style={styles.postFoot}>
+				<Pressable onPress={toggleLike}>
+					<Text
+						style={[styles.likeBtn, item.likedByMe && styles.likeBtnActive]}
+					>
+						{item.likedByMe ? "♥" : "♡"} {item.likeCount}
+					</Text>
+				</Pressable>
+				{item.author?.id === myId && (
+					<Pressable onPress={remove}>
+						<Text style={styles.deleteBtn}>Delete</Text>
+					</Pressable>
+				)}
+			</View>
 		</View>
 	);
 }
 
+function ProfileSetup({
+	existingHandles,
+	onSaved,
+}: {
+	existingHandles: string[];
+	onSaved: (p: Profile) => void;
+}) {
+	const [handle, setHandle] = useState("");
+	const [displayName, setDisplayName] = useState("");
+	const [bio, setBio] = useState("");
+	const [saving, setSaving] = useState(false);
+
+	async function save() {
+		const lower = handle.trim().toLowerCase();
+		if (existingHandles.includes(lower)) {
+			Alert.alert("Handle taken", `@${lower} is already in use.`);
+			return;
+		}
+		setSaving(true);
+		try {
+			const profile = (await callFn("upsertProfile", {
+				handle: lower,
+				displayName: displayName.trim(),
+				bio: bio.trim(),
+			})) as Profile;
+			onSaved(profile);
+		} catch (e) {
+			Alert.alert("Save failed", String(e));
+		} finally {
+			setSaving(false);
+		}
+	}
+
+	return (
+		<SafeAreaView style={styles.screen}>
+			<StatusBar style="auto" />
+			<View style={styles.content}>
+				<Text style={styles.title}>__APP_NAME__</Text>
+				<Text style={styles.subtitle}>Set up your profile</Text>
+				<TextInput
+					style={styles.input}
+					placeholder="handle (lowercase, 2–20)"
+					autoCapitalize="none"
+					autoCorrect={false}
+					value={handle}
+					onChangeText={setHandle}
+				/>
+				<TextInput
+					style={styles.input}
+					placeholder="Display name"
+					value={displayName}
+					onChangeText={setDisplayName}
+				/>
+				<TextInput
+					style={styles.input}
+					placeholder="Bio (optional)"
+					value={bio}
+					onChangeText={setBio}
+				/>
+				<Pressable
+					onPress={save}
+					disabled={saving || !handle.trim() || !displayName.trim()}
+					style={({ pressed }) => [
+						styles.button,
+						(saving || !handle.trim() || !displayName.trim()) && styles.buttonDisabled,
+						pressed && styles.buttonPressed,
+					]}
+				>
+					<Text style={styles.buttonLabel}>{saving ? "Saving…" : "Save"}</Text>
+				</Pressable>
+			</View>
+		</SafeAreaView>
+	);
+}
+
 const styles = StyleSheet.create({
 	screen: { flex: 1, paddingTop: 64, paddingHorizontal: 20, backgroundColor: "#fff" },
 	center: { alignItems: "center", justifyContent: "center" },
+	content: { padding: 20, gap: 12 },
 	title: { fontSize: 28, fontWeight: "600" },
-	subtitle: { color: "#666", marginTop: 4, marginBottom: 20 },
+	subtitle: { color: "#666", marginBottom: 12 },
 	handle: { fontFamily: "Menlo", fontSize: 12, color: "#999" },
 	headerRow: { flexDirection: "row", justifyContent: "space-between", marginBottom: 16 },
 	input: {

package/templates/expo/consumer/apps/expo/package.json

@@ -5,6 +5,7 @@
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
+    "dev": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web"

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

@@ -5,6 +5,7 @@
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
+    "dev": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web"

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

@@ -1,17 +1,6 @@
 // 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: [
@@ -26,6 +15,7 @@ let package = Package(
 			name: "__APP_NAME_PASCAL__",
 			dependencies: [
 				.product(name: "PylonClient", package: "pylon"),
+				.product(name: "PylonSync", package: "pylon"),
 				.product(name: "PylonSwiftUI", package: "pylon"),
 			],
 			path: "Sources/__APP_NAME_PASCAL__"

package/templates/ios/chat/apps/ios/Sources/__APP_NAME_PASCAL__/ChatRootView.swift

@@ -1,15 +1,24 @@
 import SwiftUI
 import PylonClient
+import PylonSync
+import PylonSwiftUI
 
-/// Two-pane chat: rooms list → room view. Polls the active room
-/// every 1.5s. For realtime, swap `pollMessages()` out for a
-/// PylonQuery<Message> from PylonSwiftUI subscribed by roomId.
+/// Two-pane chat: rooms list → room view. Subscribes to Room
+/// inserts/deletes via PylonQuery — every new room created on any
+/// device shows up here within ~ms over the WebSocket sync channel.
 struct ChatRootView: View {
 	@EnvironmentObject var session: AppSession
-	@State private var rooms: [Room] = []
-	@State private var loadingRooms = true
+	let engine: SyncEngine
+	@StateObject private var rooms: PylonQuery<Room>
 	@State private var errorMessage: String?
 
+	init(engine: SyncEngine) {
+		self.engine = engine
+		_rooms = StateObject(
+			wrappedValue: PylonQuery<Room>(engine: engine, entity: "Room"),
+		)
+	}
+
 	var body: some View {
 		NavigationStack {
 			List {
@@ -21,13 +30,11 @@ struct ChatRootView: View {
 					.autocorrectionDisabled()
 				}
 				Section("Rooms") {
-					if loadingRooms {
-						ProgressView()
-					} else if rooms.isEmpty {
-						Text("No rooms yet. Create one below.")
+					if rooms.rows.isEmpty {
+						Text("No rooms yet — create one below.")
 							.foregroundStyle(.secondary)
 					} else {
-						ForEach(rooms) { r in
+						ForEach(sortedRooms) { r in
 							NavigationLink(value: r) {
 								VStack(alignment: .leading) {
 									Text(r.name)
@@ -54,38 +61,31 @@ struct ChatRootView: View {
 			}
 			.navigationTitle("__APP_NAME__")
 			.navigationDestination(for: Room.self) { room in
-				RoomView(room: room)
+				RoomView(room: room, engine: engine)
 			}
-			.task { await loadRooms() }
-			.refreshable { await loadRooms() }
 		}
 	}
 
-	private func loadRooms() async {
-		loadingRooms = true
-		defer { loadingRooms = false }
-		do {
-			rooms = try await session.pylon.callFn("listRooms", args: EmptyArgs())
-			errorMessage = nil
-		} catch {
-			errorMessage = "Load failed: \(error.localizedDescription)"
-		}
+	private var sortedRooms: [Room] {
+		rooms.rows.sorted { $0.createdAt < $1.createdAt }
 	}
 
 	private func createRoom() async {
-		let alert = await prompt(title: "Create room", message: "Room name?")
-		guard let name = alert?.trimmingCharacters(in: .whitespaces),
+		let name = await prompt(title: "Create room", message: "Room name?")
+		guard let name = name?.trimmingCharacters(in: .whitespaces),
 			!name.isEmpty
 		else { return }
 		let slug = name.lowercased()
 			.replacingOccurrences(of: "[^a-z0-9]+", with: "-", options: .regularExpression)
 			.trimmingCharacters(in: CharacterSet(charactersIn: "-"))
 		do {
-			let room: Room = try await session.pylon.callFn(
+			// Server validates + writes via ctx.db.insert. The change_event
+			// flows back through the SyncEngine and PylonQuery picks up
+			// the new Room without us touching local state.
+			let _: Room = try await session.client.callFn(
 				"createRoom",
 				args: CreateRoomArgs(slug: slug, name: name),
 			)
-			rooms.append(room)
 		} catch {
 			errorMessage = "Create failed: \(error.localizedDescription)"
 		}
@@ -93,10 +93,6 @@ struct ChatRootView: View {
 
 	@MainActor
 	private func prompt(title: String, message: String) async -> String? {
-		// Minimal SwiftUI prompt — for production replace with an
-		// in-tree alert + TextField sheet. The scaffold uses a tiny
-		// UIKit detour on iOS so the demo works without a custom
-		// modal implementation.
 #if canImport(UIKit)
 		await withCheckedContinuation { (cont: CheckedContinuation<String?, Never>) in
 			let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)