create-croissant 0.1.6 → 0.1.7

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Scaffold a new project using the Croissant Stack",
   "repository": {
     "type": "git",

package/template/apps/web/src/routes/isr.tsx

@@ -1,11 +1,15 @@
 import { createFileRoute } from "@tanstack/react-router"
+import { orpc } from "../lib/orpc"
 
 export const Route = createFileRoute("/isr")({
-  loader: () => {
+  loader: async () => {
     // In a real ISR scenario, this would be cached on the server
-    // For this example, we'll just show the time it was "generated"
+    // For this example, we'll fetch planets via oRPC
+    const planets = await orpc.getPlanets()
+    
     return {
       generatedAt: new Date().toISOString(),
+      planets,
       message: "This page is an example of ISR. In a production build with proper configuration, this data would be cached and updated in the background.",
     }
   },
@@ -13,17 +17,32 @@ export const Route = createFileRoute("/isr")({
 })
 
 function ISRExample() {
-  const { generatedAt, message } = Route.useLoaderData()
+  const { generatedAt, message, planets } = Route.useLoaderData()
 
   return (
     <div className="flex flex-col gap-4">
-      <h1 className="text-2xl font-bold">ISR Example</h1>
+      <h1 className="text-2xl font-bold">ISR Example + oRPC</h1>
       <p>{message}</p>
       
       <div className="rounded-lg border p-4">
-        <h2 className="font-semibold">Generated At:</h2>
+        <h2 className="font-semibold">Generated At (Server-side):</h2>
         <p className="font-mono">{generatedAt}</p>
       </div>
+
+      <div className="rounded-lg border p-4">
+        <h2 className="font-semibold mb-4">Planets (Fetched via oRPC):</h2>
+        {planets.length === 0 ? (
+          <p className="text-gray-500 italic">No planets found.</p>
+        ) : (
+          <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+            {planets.map((planet) => (
+              <li key={planet.id} className="rounded-md border p-3 bg-muted/50">
+                <span className="font-bold">{planet.name}</span> - {planet.description}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
       
       <p className="text-sm text-muted-foreground">
         Refresh the page to see if the time updates. In a true ISR setup, it would only update after a certain interval.