Async rendering dev route

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)

packages/example/src/routes/async-rendering.tsx

@@ -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
-})

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
+})