@pylonsync/create-pylon 0.3.54 → 0.3.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.3.54",
+  "version": "0.3.55",
   "description": "Scaffold a new Pylon app — realtime backend + web/mobile/expo frontends in one command. Run via `npm create @pylonsync/pylon@latest`.",
   "publishConfig": {
     "access": "public"

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

@@ -13,7 +13,7 @@ import {
 	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";
 
 const PYLON_BASE_URL =
 	process.env.EXPO_PUBLIC_PYLON_BASE_URL ??
@@ -48,23 +48,9 @@ function ensureInit() {
 
 export default function App() {
 	const [ready, setReady] = useState(false);
-	const [rooms, setRooms] = useState<Room[]>([]);
-	const [active, setActive] = useState<Room | null>(null);
-	const [authorName, setAuthorName] = useState("anonymous");
-
 	useEffect(() => {
-		ensureInit().then(async () => {
-			try {
-				const list = await callFn<Room[]>("listRooms", {});
-				setRooms(list);
-				setActive(list[0] ?? null);
-			} catch (e) {
-				Alert.alert("Load failed", String(e));
-			}
-			setReady(true);
-		});
+		ensureInit().then(() => setReady(true));
 	}, []);
-
 	if (!ready) {
 		return (
 			<View style={[styles.screen, styles.center]}>
@@ -72,159 +58,61 @@ export default function App() {
 			</View>
 		);
 	}
-
-	if (!active) {
-		return (
-			<RoomCreate
-				authorName={authorName}
-				onAuthorNameChange={setAuthorName}
-				onCreated={(r) => {
-					setRooms((prev) => [...prev, r]);
-					setActive(r);
-				}}
-			/>
-		);
-	}
-
-	return (
-		<RoomView
-			room={active}
-			rooms={rooms}
-			onSwitch={setActive}
-			authorName={authorName}
-			onAuthorNameChange={setAuthorName}
-			onCreate={(r) => {
-				setRooms((prev) => [...prev, r]);
-				setActive(r);
-			}}
-		/>
-	);
+	return <Chat />;
 }
 
-function RoomCreate({
-	authorName,
-	onAuthorNameChange,
-	onCreated,
-}: {
-	authorName: string;
-	onAuthorNameChange: (s: string) => void;
-	onCreated: (r: Room) => void;
-}) {
-	const [name, setName] = useState("General");
-	const [slug, setSlug] = useState("general");
-	const [creating, setCreating] = useState(false);
+function Chat() {
+	// Live subscriptions — sync engine pushes diffs over WebSocket.
+	// New rooms / new messages from any other device or device update
+	// re-render this component without polling.
+	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]);
 
-	async function create() {
-		setCreating(true);
-		try {
-			const r = await callFn<Room>("createRoom", {
-				slug: slug.toLowerCase(),
-				name,
-			});
-			onCreated(r);
-		} catch (e) {
-			Alert.alert("Create failed", String(e));
-		} finally {
-			setCreating(false);
-		}
-	}
+	const active = rooms.find((r) => r.id === activeId) ?? null;
 
-	return (
-		<SafeAreaView style={styles.screen}>
-			<StatusBar style="auto" />
-			<View style={styles.content}>
-				<Text style={styles.title}>__APP_NAME__</Text>
-				<Text style={styles.subtitle}>No rooms yet — create one.</Text>
-				<TextInput
-					style={styles.input}
-					placeholder="Your display name"
-					value={authorName}
-					onChangeText={onAuthorNameChange}
-				/>
-				<TextInput
-					style={styles.input}
-					placeholder="Room name"
-					value={name}
-					onChangeText={setName}
-				/>
-				<TextInput
-					style={styles.input}
-					placeholder="Slug"
-					value={slug}
-					onChangeText={(s) => setSlug(s.toLowerCase())}
-					autoCapitalize="none"
-					autoCorrect={false}
-				/>
-				<Pressable
-					onPress={create}
-					disabled={creating || !name.trim() || !slug.trim()}
-					style={({ pressed }) => [
-						styles.button,
-						(creating || !name.trim() || !slug.trim()) && styles.buttonDisabled,
-						pressed && styles.buttonPressed,
-					]}
-				>
-					<Text style={styles.buttonLabel}>
-						{creating ? "Creating…" : "Create room"}
-					</Text>
-				</Pressable>
-			</View>
-		</SafeAreaView>
-	);
-}
+	const { data: messages = [] } = db.useQuery<Message>("Message", {
+		where: activeId ? { roomId: activeId } : undefined,
+		orderBy: { createdAt: "asc" },
+		limit: 200,
+	});
 
-function RoomView({
-	room,
-	rooms,
-	onSwitch,
-	authorName,
-	onAuthorNameChange,
-	onCreate,
-}: {
-	room: Room;
-	rooms: Room[];
-	onSwitch: (r: Room) => void;
-	authorName: string;
-	onAuthorNameChange: (s: string) => void;
-	onCreate: (r: Room) => void;
-}) {
-	const [messages, setMessages] = useState<Message[]>([]);
 	const [draft, setDraft] = useState("");
 	const [sending, setSending] = useState(false);
+	const [authorName, setAuthorName] = useState("anonymous");
 	const listRef = useRef<FlatList<Message>>(null);
 
-	useEffect(() => {
-		void load();
-		const t = setInterval(load, 1500);
-		return () => clearInterval(t);
-		async function load() {
-			try {
-				const m = await callFn<Message[]>("roomMessages", { roomId: room.id });
-				setMessages(m);
-			} catch {
-				// ignore — will retry on next tick
-			}
-		}
-	}, [room.id]);
-
 	useEffect(() => {
 		if (messages.length > 0) {
 			listRef.current?.scrollToEnd({ animated: true });
 		}
-	}, [messages.length]);
+	}, [messages.length, activeId]);
+
+	if (!active) {
+		return (
+			<RoomCreate
+				authorName={authorName}
+				onAuthorNameChange={setAuthorName}
+				onCreated={(r) => setActiveId(r.id)}
+			/>
+		);
+	}
 
 	async function send() {
 		const body = draft.trim();
 		if (!body) return;
-		setSending(true);
 		setDraft("");
+		setSending(true);
 		try {
-			const msg = await callFn<Message>("sendMessage", {
-				roomId: room.id,
+			await callFn("sendMessage", {
+				roomId: active.id,
 				body,
 				authorName,
 			});
-			setMessages((prev) => [...prev, msg]);
 		} catch (e) {
 			setDraft(body);
 			Alert.alert("Send failed", String(e));
@@ -241,8 +129,8 @@ function RoomView({
 			.replace(/[^a-z0-9]+/g, "-")
 			.replace(/^-|-$/g, "");
 		try {
-			const r = await callFn<Room>("createRoom", { slug, name });
-			onCreate(r);
+			const r = (await callFn("createRoom", { slug, name })) as Room;
+			setActiveId(r.id);
 		} catch (e) {
 			Alert.alert("Create failed", String(e));
 		}
@@ -258,15 +146,14 @@ function RoomView({
 			>
 				<View style={styles.header}>
 					<View>
-						<Text style={styles.title}>{room.name}</Text>
-						<Text style={styles.handle}>#{room.slug}</Text>
+						<Text style={styles.title}>{active.name}</Text>
+						<Text style={styles.handle}>#{active.slug}</Text>
 					</View>
 					{rooms.length > 1 && (
 						<Pressable
 							onPress={() => {
-								// Cycle to next room — simplest "switch room" UX without a sidebar.
-								const idx = rooms.findIndex((r) => r.id === room.id);
-								onSwitch(rooms[(idx + 1) % rooms.length]);
+								const idx = rooms.findIndex((r) => r.id === active.id);
+								setActiveId(rooms[(idx + 1) % rooms.length].id);
 							}}
 						>
 							<Text style={styles.switchBtn}>Next room →</Text>
@@ -279,7 +166,7 @@ function RoomView({
 					<TextInput
 						style={styles.nameinput}
 						value={authorName}
-						onChangeText={onAuthorNameChange}
+						onChangeText={setAuthorName}
 						autoCapitalize="none"
 					/>
 				</View>
@@ -313,7 +200,7 @@ function RoomView({
 						style={styles.composerInput}
 						value={draft}
 						onChangeText={setDraft}
-						placeholder={`Message ${room.name}…`}
+						placeholder={`Message ${active.name}…`}
 						multiline
 						editable={!sending}
 					/>
@@ -329,11 +216,87 @@ function RoomView({
 						<Text style={styles.buttonLabel}>Send</Text>
 					</Pressable>
 				</View>
+
+				<Pressable onPress={createRoom} style={styles.newRoomBar}>
+					<Text style={styles.newRoomLabel}>+ New room</Text>
+				</Pressable>
 			</KeyboardAvoidingView>
 		</SafeAreaView>
 	);
 }
 
+function RoomCreate({
+	authorName,
+	onAuthorNameChange,
+	onCreated,
+}: {
+	authorName: string;
+	onAuthorNameChange: (s: string) => void;
+	onCreated: (r: Room) => void;
+}) {
+	const [name, setName] = useState("General");
+	const [slug, setSlug] = useState("general");
+	const [creating, setCreating] = useState(false);
+
+	async function create() {
+		setCreating(true);
+		try {
+			const r = (await callFn("createRoom", {
+				slug: slug.toLowerCase(),
+				name,
+			})) as Room;
+			onCreated(r);
+		} catch (e) {
+			Alert.alert("Create failed", String(e));
+		} finally {
+			setCreating(false);
+		}
+	}
+
+	return (
+		<SafeAreaView style={styles.screen}>
+			<StatusBar style="auto" />
+			<View style={styles.content}>
+				<Text style={styles.title}>__APP_NAME__</Text>
+				<Text style={styles.subtitle}>No rooms yet — create one.</Text>
+				<TextInput
+					style={styles.input}
+					placeholder="Your display name"
+					value={authorName}
+					onChangeText={onAuthorNameChange}
+				/>
+				<TextInput
+					style={styles.input}
+					placeholder="Room name"
+					value={name}
+					onChangeText={setName}
+				/>
+				<TextInput
+					style={styles.input}
+					placeholder="Slug"
+					value={slug}
+					onChangeText={(s) => setSlug(s.toLowerCase())}
+					autoCapitalize="none"
+					autoCorrect={false}
+				/>
+				<Pressable
+					onPress={create}
+					disabled={creating || !name.trim() || !slug.trim()}
+					style={({ pressed }) => [
+						styles.button,
+						(creating || !name.trim() || !slug.trim()) && styles.buttonDisabled,
+						pressed && styles.buttonPressed,
+					]}
+				>
+					<Text style={styles.buttonLabel}>
+						{creating ? "Creating…" : "Create room"}
+					</Text>
+				</Pressable>
+			</View>
+		</SafeAreaView>
+	);
+}
+
 const styles = StyleSheet.create({
 	screen: { flex: 1, backgroundColor: "#fff" },
 	flex: { flex: 1 },
@@ -411,4 +374,11 @@ const styles = StyleSheet.create({
 		paddingVertical: 8,
 		fontSize: 14,
 	},
+	newRoomBar: {
+		paddingVertical: 10,
+		alignItems: "center",
+		borderTopWidth: 1,
+		borderColor: "#e5e5e5",
+	},
+	newRoomLabel: { color: "#3b82f6", fontSize: 13 },
 });