@pylonsync/create-pylon 0.3.50 → 0.3.53

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.3.50",
-  "description": "Scaffold a new Pylon app — realtime backend + Next.js frontend in one command. Run via `npm create @pylonsync/pylon@latest`.",
+  "version": "0.3.53",
+  "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"
   },
@@ -10,7 +10,8 @@
     "create-pylon": "./bin/create-pylon.js"
   },
   "files": [
-    "bin"
+    "bin",
+    "templates"
   ],
   "engines": {
     "node": ">=18"

package/templates/_root/.env.example

@@ -0,0 +1,9 @@
+# Backend port the Pylon control plane listens on.
+PYLON_PORT=4321
+
+# Where the Next.js dev server can reach the control plane.
+PYLON_TARGET=http://localhost:4321
+
+# Cookie name the auth helpers look for.
+# Pattern: `${app_name}_session` from the Pylon manifest.
+PYLON_COOKIE_NAME=__APP_NAME_SNAKE___session

package/templates/_root/README.md

@@ -0,0 +1,43 @@
+# __APP_NAME__
+
+Scaffolded by [@pylonsync/create-pylon](https://npmjs.com/@pylonsync/create-pylon).
+
+## Layout
+
+```
+apps/
+  api/         Pylon backend — schema, policies, function handlers
+  web/         Next.js frontend (if you picked --platforms web)
+  mobile/      Swift / SwiftUI app (if you picked --platforms mobile)
+  expo/        Expo + React Native app (if you picked --platforms expo)
+
+packages/
+  ui/          Shared shadcn-style React primitives (web only)
+```
+
+## Getting started
+
+```sh
+# Install
+bun install   # or pnpm install / yarn / npm install
+
+# Run everything (the API + every frontend you picked)
+bun run dev
+```
+
+- **api** on http://localhost:4321 — Pylon control plane
+- **web** on http://localhost:3000 — Next.js (if scaffolded)
+- **expo** runs Metro on a separate port (if scaffolded)
+- **mobile** lives in `apps/mobile/` — open in Xcode or run `swift run`
+
+## What to do next
+
+- Edit `apps/api/schema.ts` to add entities + policies.
+- Drop handlers into `apps/api/functions/` — auto-discovered by name.
+- For web: components in `apps/web/src/app/components/`.
+- For mobile: SwiftUI views in `apps/mobile/Sources/__APP_NAME_PASCAL__/`.
+- For expo: screens in `apps/expo/src/screens/`.
+
+## Docs
+
+[pylonsync.com/docs](https://pylonsync.com/docs)

package/templates/backend/barebones/apps/api/functions/createWidget.ts

@@ -0,0 +1,22 @@
+import { mutation, v } from "@pylonsync/functions";
+
+/**
+ * Insert a new Widget. Initializes count to 0 and stamps the time.
+ * Returns the inserted row so the client can render it without a
+ * follow-up read.
+ */
+export default mutation({
+	args: { name: v.string() },
+	async handler(ctx, args: { name: string }) {
+		const trimmed = args.name.trim();
+		if (!trimmed) {
+			throw ctx.error("EMPTY_NAME", "name cannot be empty");
+		}
+		const id = await ctx.db.insert("Widget", {
+			name: trimmed,
+			count: 0,
+			createdAt: new Date().toISOString(),
+		});
+		return await ctx.db.get("Widget", id);
+	},
+});

package/templates/backend/barebones/apps/api/functions/listWidgets.ts

@@ -0,0 +1,18 @@
+import { query } from "@pylonsync/functions";
+
+/**
+ * Live query — every Widget, newest first. Subscribed via the React
+ * `useQuery` / Swift `PylonQuery` / RN `useQuery` hooks; rerenders
+ * whenever a row is inserted, updated, or deleted.
+ */
+export default query({
+	args: {},
+	async handler(ctx) {
+		const rows = await ctx.db.query("Widget", {});
+		return [...rows].sort((a: any, b: any) => {
+			const ad = Date.parse(a.createdAt) || 0;
+			const bd = Date.parse(b.createdAt) || 0;
+			return bd - ad;
+		});
+	},
+});

package/templates/backend/barebones/apps/api/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@__APP_NAME_KEBAB__/api",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pylon dev schema.ts --port 4321",
+    "build": "pylon codegen schema.ts --out pylon.manifest.json && pylon codegen client pylon.manifest.json --out pylon.client.ts",
+    "schema:push": "pylon schema push pylon.manifest.json --sqlite dev.db",
+    "schema:inspect": "pylon schema inspect --sqlite dev.db"
+  },
+  "dependencies": {
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
+    "@pylonsync/functions": "^__PYLON_VERSION__"
+  },
+  "devDependencies": {
+    "@pylonsync/cli": "^__PYLON_VERSION__",
+    "typescript": "^5.5.0"
+  }
+}

package/templates/backend/barebones/apps/api/schema.ts

@@ -0,0 +1,61 @@
+import {
+	entity,
+	field,
+	query,
+	action,
+	policy,
+	buildManifest,
+} from "@pylonsync/sdk";
+
+// ---------------------------------------------------------------------------
+// Schema — one entity, two operations. The smallest thing that
+// demonstrates the loop: declare → handler → live query.
+// ---------------------------------------------------------------------------
+
+const Widget = entity("Widget", {
+	name: field.string(),
+	count: field.int(),
+	createdAt: field.datetime(),
+});
+
+// ---------------------------------------------------------------------------
+// Function declarations — names only. Implementations live under
+// functions/<name>.ts and are auto-discovered by the runtime.
+// ---------------------------------------------------------------------------
+
+const listWidgets = query("listWidgets");
+
+const createWidget = action("createWidget", {
+	input: [{ name: "name", type: "string" }],
+});
+
+// ---------------------------------------------------------------------------
+// Policies — wide-open by default. Tighten for production.
+// ---------------------------------------------------------------------------
+
+const widgetPolicy = policy({
+	name: "widget_open",
+	entity: "Widget",
+	allowRead: "true",
+	allowInsert: "true",
+	allowUpdate: "true",
+	allowDelete: "true",
+});
+
+// ---------------------------------------------------------------------------
+// Manifest — pylon codegen reads this and emits pylon.manifest.json.
+// pylon dev / pylon codegen run `bun run schema.ts` and read the
+// manifest off stdout — every entry file ends with this console.log.
+// ---------------------------------------------------------------------------
+
+const manifest = buildManifest({
+	name: "__APP_NAME_SNAKE__",
+	version: "0.0.1",
+	entities: [Widget],
+	queries: [listWidgets],
+	actions: [createWidget],
+	policies: [widgetPolicy],
+	routes: [],
+});
+
+console.log(JSON.stringify(manifest));

package/templates/backend/barebones/apps/api/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["schema.ts", "functions/**/*.ts"]
+}

package/templates/backend/todo/apps/api/functions/addTodo.ts

@@ -0,0 +1,27 @@
+import { mutation, v } from "@pylonsync/functions";
+
+/**
+ * Insert a new Todo. Seeds `position` to (max + 1024) so new rows
+ * land at the end of the drag-reorder list; the 1024 step leaves
+ * room for inserts-between without needing global renumber.
+ */
+export default mutation({
+	args: { title: v.string() },
+	async handler(ctx, args: { title: string }) {
+		const existing = await ctx.db.query("Todo", {});
+		const maxPos = existing.reduce((acc: number, row: any) => {
+			const p =
+				typeof row.position === "number"
+					? row.position
+					: Date.parse(row.createdAt) || 0;
+			return p > acc ? p : acc;
+		}, 0);
+		const id = await ctx.db.insert("Todo", {
+			title: args.title,
+			done: false,
+			createdAt: new Date().toISOString(),
+			position: maxPos + 1024,
+		});
+		return await ctx.db.get("Todo", id);
+	},
+});

package/templates/backend/todo/apps/api/functions/deleteTodo.ts

@@ -0,0 +1,14 @@
+import { mutation, v } from "@pylonsync/functions";
+
+/**
+ * Remove a Todo row. Returns the row as it existed pre-delete so
+ * the client can show a "todo removed" toast or animate it out.
+ */
+export default mutation({
+	args: { id: v.id("Todo") },
+	async handler(ctx, args: { id: string }) {
+		const snapshot = await ctx.db.get("Todo", args.id);
+		await ctx.db.delete("Todo", args.id);
+		return snapshot;
+	},
+});

package/templates/backend/todo/apps/api/functions/editTodo.ts

@@ -0,0 +1,16 @@
+import { mutation, v } from "@pylonsync/functions";
+
+/**
+ * Rename a Todo. Trims whitespace; rejects empty titles.
+ */
+export default mutation({
+	args: { id: v.id("Todo"), title: v.string() },
+	async handler(ctx, args: { id: string; title: string }) {
+		const trimmed = args.title.trim();
+		if (!trimmed) {
+			throw ctx.error("EMPTY_TITLE", "title cannot be empty");
+		}
+		await ctx.db.update("Todo", args.id, { title: trimmed });
+		return await ctx.db.get("Todo", args.id);
+	},
+});

package/templates/backend/todo/apps/api/functions/listTodos.ts

@@ -0,0 +1,24 @@
+import { query } from "@pylonsync/functions";
+
+/**
+ * Live query — every Todo, in user-controlled drag-reorder position.
+ * Rows without a `position` (legacy data) get sorted by createdAt as
+ * a fallback so the list stays deterministic.
+ */
+export default query({
+	args: {},
+	async handler(ctx) {
+		const rows = await ctx.db.query("Todo", {});
+		return [...rows].sort((a: any, b: any) => {
+			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;
+		});
+	},
+});

package/templates/backend/todo/apps/api/functions/reorderTodo.ts

@@ -0,0 +1,14 @@
+import { mutation, v } from "@pylonsync/functions";
+
+/**
+ * Drag-reorder. Frontend computes `position` as the midpoint of the
+ * drop target's neighbors; we just write it. Floats give us ~52 inserts
+ * between any two rows before precision matters.
+ */
+export default mutation({
+	args: { id: v.id("Todo"), position: v.number() },
+	async handler(ctx, args: { id: string; position: number }) {
+		await ctx.db.update("Todo", args.id, { position: args.position });
+		return await ctx.db.get("Todo", args.id);
+	},
+});

package/templates/backend/todo/apps/api/functions/toggleTodo.ts

@@ -0,0 +1,13 @@
+import { mutation, v } from "@pylonsync/functions";
+
+/**
+ * Flip the `done` flag on a Todo. Mutation, not action — needs
+ * `ctx.db.update` which is only on writable ctx variants.
+ */
+export default mutation({
+	args: { id: v.id("Todo"), done: v.bool() },
+	async handler(ctx, args: { id: string; done: boolean }) {
+		await ctx.db.update("Todo", args.id, { done: args.done });
+		return await ctx.db.get("Todo", args.id);
+	},
+});

package/templates/backend/todo/apps/api/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@__APP_NAME_KEBAB__/api",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pylon dev schema.ts --port 4321",
+    "build": "pylon codegen schema.ts --out pylon.manifest.json && pylon codegen client pylon.manifest.json --out pylon.client.ts",
+    "schema:push": "pylon schema push pylon.manifest.json --sqlite dev.db",
+    "schema:inspect": "pylon schema inspect --sqlite dev.db"
+  },
+  "dependencies": {
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
+    "@pylonsync/functions": "^__PYLON_VERSION__"
+  },
+  "devDependencies": {
+    "@pylonsync/cli": "^__PYLON_VERSION__",
+    "typescript": "^5.5.0"
+  }
+}

package/templates/backend/todo/apps/api/schema.ts

@@ -0,0 +1,85 @@
+import {
+	entity,
+	field,
+	query,
+	action,
+	policy,
+	buildManifest,
+} from "@pylonsync/sdk";
+
+// ---------------------------------------------------------------------------
+// Schema
+// ---------------------------------------------------------------------------
+
+const Todo = entity("Todo", {
+	title: field.string(),
+	done: field.bool(),
+	createdAt: field.datetime(),
+	// Float position so drag-reorder can insert between two existing
+	// rows without renumbering the whole list. Frontend computes
+	// (prev.position + next.position) / 2 on drop. Optional for
+	// backwards compat with legacy rows.
+	position: field.float().optional(),
+});
+
+// ---------------------------------------------------------------------------
+// Function declarations — names only. Implementations live under
+// functions/<name>.ts and are auto-discovered by the runtime.
+// ---------------------------------------------------------------------------
+
+const listTodos = query("listTodos");
+
+const addTodo = action("addTodo", {
+	input: [{ name: "title", type: "string" }],
+});
+
+const toggleTodo = action("toggleTodo", {
+	input: [{ name: "id", type: "id(Todo)" }, { name: "done", type: "bool" }],
+});
+
+const deleteTodo = action("deleteTodo", {
+	input: [{ name: "id", type: "id(Todo)" }],
+});
+
+const editTodo = action("editTodo", {
+	input: [
+		{ name: "id", type: "id(Todo)" },
+		{ name: "title", type: "string" },
+	],
+});
+
+const reorderTodo = action("reorderTodo", {
+	input: [
+		{ name: "id", type: "id(Todo)" },
+		{ name: "position", type: "float" },
+	],
+});
+
+// ---------------------------------------------------------------------------
+// Policies — wide-open by default. Tighten for production.
+// ---------------------------------------------------------------------------
+
+const todoPolicy = policy({
+	name: "todo_open",
+	entity: "Todo",
+	allowRead: "true",
+	allowInsert: "true",
+	allowUpdate: "true",
+	allowDelete: "true",
+});
+
+// ---------------------------------------------------------------------------
+// Manifest
+// ---------------------------------------------------------------------------
+
+const manifest = buildManifest({
+	name: "__APP_NAME_SNAKE__",
+	version: "0.0.1",
+	entities: [Todo],
+	queries: [listTodos],
+	actions: [addTodo, toggleTodo, deleteTodo, editTodo, reorderTodo],
+	policies: [todoPolicy],
+	routes: [],
+});
+
+console.log(JSON.stringify(manifest));

package/templates/backend/todo/apps/api/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["schema.ts", "functions/**/*.ts"]
+}

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

@@ -0,0 +1,166 @@
+import { useEffect, useState } from "react";
+import {
+	View,
+	Text,
+	TextInput,
+	Pressable,
+	FlatList,
+	ActivityIndicator,
+	StyleSheet,
+	Platform,
+} from "react-native";
+import { StatusBar } from "expo-status-bar";
+import { init, db, callFn } from "@pylonsync/react-native";
+
+// In dev, point at the Pylon control plane on your machine. The iOS
+// simulator can reach `localhost`; an Android emulator uses `10.0.2.2`;
+// a physical device needs your LAN IP. Override via `PYLON_BASE_URL`
+// in app.json `extra` or via an `.env`.
+const PYLON_BASE_URL =
+	process.env.EXPO_PUBLIC_PYLON_BASE_URL ??
+	(Platform.OS === "android" ? "http://10.0.2.2:4321" : "http://localhost:4321");
+
+type Widget = {
+	id: string;
+	name: string;
+	count: number;
+	createdAt: string;
+};
+
+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 <Home />;
+}
+
+function Home() {
+	const { data: widgets, loading } = db.useQuery<Widget>("Widget", {});
+	const [name, setName] = useState("");
+	const [creating, setCreating] = useState(false);
+
+	async function create() {
+		const trimmed = name.trim();
+		if (!trimmed) return;
+		setCreating(true);
+		try {
+			await callFn("createWidget", { name: trimmed });
+			setName("");
+		} finally {
+			setCreating(false);
+		}
+	}
+
+	return (
+		<View style={styles.screen}>
+			<StatusBar style="auto" />
+			<Text style={styles.title}>__APP_NAME__</Text>
+			<Text style={styles.subtitle}>
+				Pylon backend → Expo + React Native, live-updating list.
+			</Text>
+
+			<View style={styles.row}>
+				<TextInput
+					style={styles.input}
+					placeholder="Name a widget…"
+					value={name}
+					onChangeText={setName}
+					editable={!creating}
+					onSubmitEditing={create}
+					autoCorrect={false}
+				/>
+				<Pressable
+					onPress={create}
+					disabled={creating || !name.trim()}
+					style={({ pressed }) => [
+						styles.button,
+						(creating || !name.trim()) && styles.buttonDisabled,
+						pressed && styles.buttonPressed,
+					]}
+				>
+					<Text style={styles.buttonLabel}>Create</Text>
+				</Pressable>
+			</View>
+
+			{loading ? (
+				<ActivityIndicator style={{ marginTop: 24 }} />
+			) : (widgets ?? []).length === 0 ? (
+				<Text style={styles.empty}>No widgets yet. Create one above.</Text>
+			) : (
+				<FlatList
+					data={widgets ?? []}
+					keyExtractor={(w) => w.id}
+					contentContainerStyle={{ paddingTop: 16 }}
+					ItemSeparatorComponent={() => <View style={styles.separator} />}
+					renderItem={({ item }) => (
+						<View style={styles.item}>
+							<Text style={styles.itemName}>{item.name}</Text>
+							<Text style={styles.itemCount}>count: {item.count}</Text>
+						</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 },
+	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",
+		justifyContent: "space-between",
+		paddingVertical: 12,
+	},
+	itemName: { fontSize: 15, fontWeight: "500" },
+	itemCount: { fontSize: 12, fontFamily: "Menlo", color: "#999" },
+	separator: { height: 1, backgroundColor: "#e5e5e5" },
+});

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

@@ -0,0 +1,31 @@
+{
+  "expo": {
+    "name": "__APP_NAME__",
+    "slug": "__APP_NAME_KEBAB__",
+    "version": "0.0.1",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "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/barebones/apps/expo/babel.config.js

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