From 8ca45cb12e5a8232fb59e2995bdf94144c7c1bf3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Tue, 8 Jul 2025 22:59:33 +0200
Subject: [PATCH] Async rendering dev route

---
 packages/example/src/routeTree.gen.ts         | 42 ++++++++---------
 .../example/src/routes/async-rendering.tsx    | 28 -----------
 .../src/routes/dev/async-rendering.tsx        | 46 +++++++++++++++++++
 3 files changed, 67 insertions(+), 49 deletions(-)
 delete mode 100644 packages/example/src/routes/async-rendering.tsx
 create mode 100644 packages/example/src/routes/dev/async-rendering.tsx

diff --git a/packages/example/src/routeTree.gen.ts b/packages/example/src/routeTree.gen.ts
index 544cf65..636e476 100644
--- a/packages/example/src/routeTree.gen.ts
+++ b/packages/example/src/routeTree.gen.ts
@@ -10,53 +10,53 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as BlankRouteImport } from './routes/blank'
-import { Route as AsyncRenderingRouteImport } from './routes/async-rendering'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as DevAsyncRenderingRouteImport } from './routes/dev/async-rendering'
 
 const BlankRoute = BlankRouteImport.update({
   id: '/blank',
   path: '/blank',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AsyncRenderingRoute = AsyncRenderingRouteImport.update({
-  id: '/async-rendering',
-  path: '/async-rendering',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const DevAsyncRenderingRoute = DevAsyncRenderingRouteImport.update({
+  id: '/dev/async-rendering',
+  path: '/dev/async-rendering',
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/async-rendering': typeof AsyncRenderingRoute
   '/blank': typeof BlankRoute
+  '/dev/async-rendering': typeof DevAsyncRenderingRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/async-rendering': typeof AsyncRenderingRoute
   '/blank': typeof BlankRoute
+  '/dev/async-rendering': typeof DevAsyncRenderingRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
-  '/async-rendering': typeof AsyncRenderingRoute
   '/blank': typeof BlankRoute
+  '/dev/async-rendering': typeof DevAsyncRenderingRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/async-rendering' | '/blank'
+  fullPaths: '/' | '/blank' | '/dev/async-rendering'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/async-rendering' | '/blank'
-  id: '__root__' | '/' | '/async-rendering' | '/blank'
+  to: '/' | '/blank' | '/dev/async-rendering'
+  id: '__root__' | '/' | '/blank' | '/dev/async-rendering'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  AsyncRenderingRoute: typeof AsyncRenderingRoute
   BlankRoute: typeof BlankRoute
+  DevAsyncRenderingRoute: typeof DevAsyncRenderingRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -68,13 +68,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof BlankRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/async-rendering': {
-      id: '/async-rendering'
-      path: '/async-rendering'
-      fullPath: '/async-rendering'
-      preLoaderRoute: typeof AsyncRenderingRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/': {
       id: '/'
       path: '/'
@@ -82,13 +75,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/dev/async-rendering': {
+      id: '/dev/async-rendering'
+      path: '/dev/async-rendering'
+      fullPath: '/dev/async-rendering'
+      preLoaderRoute: typeof DevAsyncRenderingRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  AsyncRenderingRoute: AsyncRenderingRoute,
   BlankRoute: BlankRoute,
+  DevAsyncRenderingRoute: DevAsyncRenderingRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
diff --git a/packages/example/src/routes/async-rendering.tsx b/packages/example/src/routes/async-rendering.tsx
deleted file mode 100644
index 685c30d..0000000
--- a/packages/example/src/routes/async-rendering.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { runtime } from "@/runtime"
-import { Text } from "@radix-ui/themes"
-import { createFileRoute } from "@tanstack/react-router"
-import { Console, Effect } from "effect"
-import { Component } from "effect-fc"
-
-
-const RouteComponent = Component.make(function* AsyncRendering() {
-    console.log("render")
-    const VAsyncComponent = yield* Component.useSuspenseFC(AsyncComponent)
-    return <>
-        <Text>Route component</Text>
-        <VAsyncComponent />
-    </>
-}).pipe(
-    Component.withRuntime(runtime.context)
-)
-
-const AsyncComponent = Component.make(function* AsyncComponent() {
-    yield* Console.log("rendering")
-    yield* Effect.sleep("500 millis")
-    return <Text>Rendered!</Text>
-})
-
-
-export const Route = createFileRoute("/async-rendering")({
-    component: RouteComponent
-})
diff --git a/packages/example/src/routes/dev/async-rendering.tsx b/packages/example/src/routes/dev/async-rendering.tsx
new file mode 100644
index 0000000..2832679
--- /dev/null
+++ b/packages/example/src/routes/dev/async-rendering.tsx
@@ -0,0 +1,46 @@
+import { runtime } from "@/runtime"
+import { Text, TextField } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { GetRandomValues, makeUuid4 } from "@typed/id"
+import { Console, Effect } from "effect"
+import { Component, Hook } from "effect-fc"
+import * as React from "react"
+
+
+const RouteComponent = Component.make(function* AsyncRendering() {
+    const VAsyncComponent = yield* Component.useSuspenseFC(AsyncComponent)
+    const [input, setInput] = React.useState("")
+
+    return <>
+        <TextField.Root
+            value={input}
+            onChange={e => setInput(e.target.value)}
+        />
+
+        <VAsyncComponent />
+    </>
+}).pipe(
+    Component.withRuntime(runtime.context)
+)
+
+const AsyncComponent = Component.make(function* AsyncComponent() {
+    yield* Console.log("rendering")
+
+    const VSubComponent = yield* Component.useFC(SubComponent)
+    React.useState()
+    yield* Effect.sleep("500 millis")
+
+    return <>
+        <Text>Rendered!</Text><br />
+        <VSubComponent />
+    </>
+})
+
+const SubComponent = Component.make(function* SubComponent() {
+    const [state] = React.useState(yield* Hook.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
+    return <Text>{state}</Text>
+})
+
+export const Route = createFileRoute("/dev/async-rendering")({
+    component: RouteComponent
+})