@pylonsync/create-pylon 0.3.53 → 0.3.54

package/templates/expo/chat/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/expo/consumer/apps/expo/App.tsx

@@ -0,0 +1,360 @@
+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, 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 Profile = {
+	id: string;
+	userId: string;
+	handle: string;
+	displayName: string;
+	bio?: string | null;
+	createdAt: string;
+};
+
+type FeedItem = {
+	id: string;
+	body: string;
+	createdAt: string;
+	author: { id: string; handle: string; displayName: string } | null;
+	likeCount: number;
+	likedByMe: boolean;
+};
+
+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);
+	const [me, setMe] = useState<Profile | null>(null);
+
+	useEffect(() => {
+		ensureInit().then(async () => {
+			try {
+				const profile = await callFn<Profile | null>("myProfile", {});
+				setMe(profile);
+			} catch {
+				setMe(null);
+			}
+			setReady(true);
+		});
+	}, []);
+
+	if (!ready) {
+		return (
+			<View style={[styles.screen, styles.center]}>
+				<ActivityIndicator />
+			</View>
+		);
+	}
+	if (!me) {
+		return <ProfileSetup onSaved={setMe} />;
+	}
+	return <Feed me={me} />;
+}
+
+function ProfileSetup({ onSaved }: { onSaved: (p: Profile) => void }) {
+	const [handle, setHandle] = useState("");
+	const [displayName, setDisplayName] = useState("");
+	const [bio, setBio] = useState("");
+	const [saving, setSaving] = useState(false);
+
+	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);
+		}
+	}
+
+	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>
+	);
+}
+
+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;
+		setPosting(true);
+		try {
+			const item = await callFn<FeedItem>("createPost", { body });
+			setFeed((prev) => [item, ...prev]);
+			setDraft("");
+		} catch (e) {
+			Alert.alert("Post failed", String(e));
+		} 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}>
+			<StatusBar style="auto" />
+			<View style={styles.headerRow}>
+				<View>
+					<Text style={styles.title}>__APP_NAME__</Text>
+					<Text style={styles.handle}>@{me.handle}</Text>
+				</View>
+			</View>
+
+			<View style={styles.composerCard}>
+				<TextInput
+					style={styles.composerInput}
+					placeholder="What's on your mind?"
+					value={draft}
+					onChangeText={setDraft}
+					multiline
+					maxLength={1000}
+				/>
+				<View style={styles.composerFoot}>
+					<Text style={styles.counter}>{draft.length}/1000</Text>
+					<Pressable
+						onPress={post}
+						disabled={posting || !draft.trim()}
+						style={({ pressed }) => [
+							styles.buttonSmall,
+							(posting || !draft.trim()) && styles.buttonDisabled,
+							pressed && styles.buttonPressed,
+						]}
+					>
+						<Text style={styles.buttonLabel}>{posting ? "Posting…" : "Post"}</Text>
+					</Pressable>
+				</View>
+			</View>
+
+			{loading ? (
+				<ActivityIndicator style={{ marginTop: 24 }} />
+			) : feed.length === 0 ? (
+				<Text style={styles.empty}>No posts yet.</Text>
+			) : (
+				<FlatList
+					data={feed}
+					keyExtractor={(p) => p.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>
+					)}
+				/>
+			)}
+		</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 },
+	handle: { fontFamily: "Menlo", fontSize: 12, color: "#999" },
+	headerRow: { flexDirection: "row", justifyContent: "space-between", marginBottom: 16 },
+	input: {
+		borderWidth: 1,
+		borderColor: "#d4d4d8",
+		borderRadius: 6,
+		paddingHorizontal: 12,
+		paddingVertical: 8,
+		fontSize: 14,
+		marginBottom: 8,
+	},
+	composerCard: {
+		borderWidth: 1,
+		borderColor: "#e5e5e5",
+		borderRadius: 8,
+		padding: 12,
+		marginBottom: 12,
+	},
+	composerInput: { minHeight: 70, fontSize: 14, textAlignVertical: "top" },
+	composerFoot: {
+		flexDirection: "row",
+		justifyContent: "space-between",
+		alignItems: "center",
+		marginTop: 6,
+	},
+	counter: { color: "#999", fontSize: 12 },
+	button: {
+		backgroundColor: "#171717",
+		borderRadius: 6,
+		paddingHorizontal: 16,
+		paddingVertical: 12,
+		justifyContent: "center",
+		alignItems: "center",
+	},
+	buttonSmall: {
+		backgroundColor: "#171717",
+		borderRadius: 6,
+		paddingHorizontal: 12,
+		paddingVertical: 6,
+	},
+	buttonDisabled: { opacity: 0.5 },
+	buttonPressed: { opacity: 0.8 },
+	buttonLabel: { color: "#fff", fontWeight: "600", fontSize: 13 },
+	empty: { textAlign: "center", color: "#999", marginTop: 32 },
+	separator: { height: 1, backgroundColor: "#e5e5e5" },
+	post: { paddingVertical: 12 },
+	postHead: { flexDirection: "row", alignItems: "baseline", gap: 6 },
+	postName: { fontSize: 14, fontWeight: "500" },
+	postHandle: { fontFamily: "Menlo", fontSize: 12, color: "#999" },
+	postBody: { fontSize: 15, marginTop: 4, lineHeight: 20 },
+	postFoot: { flexDirection: "row", gap: 16, marginTop: 8 },
+	likeBtn: { fontSize: 13, color: "#666" },
+	likeBtnActive: { color: "#ec4899" },
+	deleteBtn: { fontSize: 13, color: "#ef4444" },
+});

package/templates/expo/consumer/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/consumer/apps/expo/babel.config.js

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

package/templates/expo/consumer/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/consumer/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/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__"
+		),
+	]
+)

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

@@ -0,0 +1,120 @@
+import SwiftUI
+import PylonClient
+
+/// 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.
+struct ChatRootView: View {
+	@EnvironmentObject var session: AppSession
+	@State private var rooms: [Room] = []
+	@State private var loadingRooms = true
+	@State private var errorMessage: String?
+
+	var body: some View {
+		NavigationStack {
+			List {
+				Section("Your name") {
+					TextField("display name", text: Binding(
+						get: { session.authorName },
+						set: { session.setAuthorName($0) },
+					))
+					.autocorrectionDisabled()
+				}
+				Section("Rooms") {
+					if loadingRooms {
+						ProgressView()
+					} else if rooms.isEmpty {
+						Text("No rooms yet. Create one below.")
+							.foregroundStyle(.secondary)
+					} else {
+						ForEach(rooms) { r in
+							NavigationLink(value: r) {
+								VStack(alignment: .leading) {
+									Text(r.name)
+									Text("#\(r.slug)")
+										.font(.system(.caption, design: .monospaced))
+										.foregroundStyle(.secondary)
+								}
+							}
+						}
+					}
+				}
+				Section {
+					Button("Create room") {
+						Task { await createRoom() }
+					}
+				}
+				if let errorMessage {
+					Section {
+						Text(errorMessage)
+							.foregroundStyle(.red)
+							.font(.caption)
+					}
+				}
+			}
+			.navigationTitle("__APP_NAME__")
+			.navigationDestination(for: Room.self) { room in
+				RoomView(room: room)
+			}
+			.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 func createRoom() async {
+		let alert = await prompt(title: "Create room", message: "Room name?")
+		guard let name = alert?.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(
+				"createRoom",
+				args: CreateRoomArgs(slug: slug, name: name),
+			)
+			rooms.append(room)
+		} catch {
+			errorMessage = "Create failed: \(error.localizedDescription)"
+		}
+	}
+
+	@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)
+			alert.addTextField()
+			alert.addAction(UIAlertAction(title: "Cancel", style: .cancel) { _ in cont.resume(returning: nil) })
+			alert.addAction(UIAlertAction(title: "Create", style: .default) { _ in cont.resume(returning: alert.textFields?.first?.text) })
+			UIApplication.shared.connectedScenes
+				.compactMap { ($0 as? UIWindowScene)?.windows.first }
+				.first?
+				.rootViewController?
+				.present(alert, animated: true)
+		}
+#else
+		return nil
+#endif
+	}
+}
+
+#if canImport(UIKit)
+import UIKit
+#endif

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

@@ -0,0 +1,26 @@
+import Foundation
+
+struct Room: Codable, Identifiable, Hashable {
+	let id: String
+	let slug: String
+	let name: String
+	let createdAt: String
+}
+
+struct Message: Codable, Identifiable, Hashable {
+	let id: String
+	let roomId: String
+	let authorId: String
+	let authorName: String
+	let body: String
+	let createdAt: String
+}
+
+struct CreateRoomArgs: Encodable { let slug: String; let name: String }
+struct RoomMessagesArgs: Encodable { let roomId: String }
+struct SendMessageArgs: Encodable {
+	let roomId: String
+	let body: String
+	let authorName: String
+}
+struct EmptyArgs: Encodable {}