create-rindle 0.1.6 → 0.2.0

package/README.md

@@ -22,7 +22,8 @@ pnpm dev
 A minimal but real three-tier Rindle app (a tiny forum-of-rooms with **live message counts**):
 
 - **Browser** — a TanStack Start SPA whose data layer is Rindle's in-process wasm IVM engine: local
-  instant reads, optimistic writes, live `subscribe`, and a dev-only Rindle devtools pane.
+  instant reads, optimistic writes, fragment-rooted `useRoot` reads, and a dev-only Rindle devtools
+  pane.
 - **API server** — the authority: named-query resolution, authoritative SQL mutators, and policy (a
   `"spam"` rejection demo shows the optimistic snap-back + toast).
 - **Daemon** (`rindled`) — owns the SQLite data + live incremental views, streamed to subscribers.
@@ -34,6 +35,19 @@ the dev loop), so the TypeScript can't drift from the DDL.
 The prebuilt `rindle` + `rindled` binaries come from `@rindle/cli` (per-platform, installed as a dev
 dependency) — **no Rust toolchain required**.
 
+## Fragment flow in the template
+
+The generated routes use the current co-located fragment pattern:
+
+- `src/components/*.queries.ts` defines each component's `defineFragment` beside the named
+  `defineQuery` that roots it.
+- The home route preloads `roomsQuery()` for SSR, then calls
+  `useRoot(roomsQuery, RoomCardFragment)` to receive opaque room refs.
+- Row components call `useFragment(RoomCardFragment, room)` to open narrow local reads without a
+  new server subscription.
+- The room detail route calls `useRoot(roomDetailQuery, id)` when the route itself owns the root
+  fields and passes child message refs down with `fragmentKey(ref)` list keys.
+
 ## Usage
 
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rindle",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/templates/minimal/src/components/MessageCard.tsx

@@ -8,6 +8,8 @@ import { formatDateTime } from "../lib/format.ts";
 
 export function MessageCard({ message }: { message: MessageCardRef }) {
   const data = useFragment(MessageCardFragment, message);
+  if (!data) return null;
+
   return (
     <article className="app-message">
       <div className="app-message-head">

package/templates/minimal/src/components/RoomCard.tsx

@@ -9,6 +9,8 @@ import type { RoomCardRef } from "./RoomCard.queries.ts";
 
 export function RoomCard({ room }: { room: RoomCardRef }) {
   const data = useFragment(RoomCardFragment, room);
+  if (!data) return null;
+
   return (
     <li className="app-room">
       <Link to="/r/$id" params={{ id: data.id }} className="app-room-link">

package/templates/minimal/src/components/RoomView.queries.ts

@@ -13,7 +13,9 @@ import { MessageCardFragment } from "./MessageCard.queries.ts";
 export const RoomDetailFragment = defineFragment(room, (r) =>
   r
     .select("id", "name", "createdAt")
-    .sub("messages", rels.roomMessages, (m) => m.include(MessageCardFragment).orderBy("createdAt", "asc").orderBy("id", "asc")),
+    .sub("messages", rels.roomMessages, MessageCardFragment, (m) =>
+      m.orderBy("createdAt", "asc").orderBy("id", "asc")
+    ),
 );
 export type RoomDetailRef = FragmentRef<typeof RoomDetailFragment>;
 

package/templates/minimal/src/routes/index.tsx

@@ -2,12 +2,11 @@
 // room. Its loader seeds the rooms query for first paint (SSR); after hydration the wasm engine owns
 // the live read — post a message in any room and its count here updates with no polling.
 
-import { useMemo } from "react";
 import { createFileRoute } from "@tanstack/react-router";
-import { useQuery, useQueryStatus } from "@rindle/react";
+import { fragmentKey, useRoot } from "@rindle/react";
 import type { DehydratedState } from "@rindle/client";
 
-import { roomsQuery } from "../components/RoomCard.queries.ts";
+import { RoomCardFragment, roomsQuery } from "../components/RoomCard.queries.ts";
 import { RoomCard } from "../components/RoomCard.tsx";
 import { NewRoomForm } from "../components/NewRoomForm.tsx";
 
@@ -23,9 +22,7 @@ export const Route = createFileRoute("/")({
 });
 
 function Home() {
-  const query = useMemo(() => roomsQuery(), []);
-  const rooms = useQuery(query);
-  const status = useQueryStatus(query);
+  const [rooms, { status }] = useRoot(roomsQuery, RoomCardFragment);
   const loading = status !== "complete" && rooms.length === 0;
 
   return (
@@ -42,7 +39,7 @@ function Home() {
       ) : (
         <ul className="app-rooms">
           {rooms.map((room) => (
-            <RoomCard key={room.id} room={room} />
+            <RoomCard key={fragmentKey(room)} room={room} />
           ))}
         </ul>
       )}

package/templates/minimal/src/routes/r.$id.tsx

@@ -2,9 +2,8 @@
 // single detail query is seeded by the loader for first paint; after hydration the wasm engine owns
 // the live read and every new message streams in.
 
-import { useMemo } from "react";
 import { Link, createFileRoute } from "@tanstack/react-router";
-import { useQuery, useQueryStatus } from "@rindle/react";
+import { fragmentKey, useRoot } from "@rindle/react";
 import type { DehydratedState } from "@rindle/client";
 
 import { roomDetailQuery } from "../components/RoomView.queries.ts";
@@ -22,9 +21,7 @@ export const Route = createFileRoute("/r/$id")({
 
 function RoomView() {
   const { id } = Route.useParams();
-  const query = useMemo(() => roomDetailQuery(id), [id]);
-  const room = useQuery(query);
-  const status = useQueryStatus(query);
+  const [room, { status }] = useRoot(roomDetailQuery, id);
 
   if (!room) {
     return (
@@ -50,7 +47,7 @@ function RoomView() {
         {messages.length === 0 ? (
           <p className="app-empty">No messages yet — say something below.</p>
         ) : (
-          messages.map((message) => <MessageCard key={message.id} message={message} />)
+          messages.map((message) => <MessageCard key={fragmentKey(message)} message={message} />)
         )}
       </div>