docs(devframe): document rpc/ folder + WeakMap context pattern

Skill and rpc guide now describe the one-file-per-RPC layout under
src/rpc/ and the WeakMap-based src/context.ts for sharing setup-time
state across files. All three examples adopt the pattern, with
streaming-chat demonstrating the WeakMap context for its shared
channel + history.

Author: antfu

docs/guide/rpc.md

@@ -53,6 +53,8 @@ export default defineDevframe({
 })
 ```
 
+Place each function in its own file under `src/rpc/`, and barrel them in `src/rpc/index.ts` as `const serverFunctions = [...] as const`. The same array feeds the [type-safe client registry](#type-safe-client-registry) and keeps registration order explicit. When per-file functions need to share setup-time state (channels, shared state handles, loaders), expose it through a `WeakMap<DevToolsNodeContext, T>` in a sibling `src/context.ts`.
+
 ### Naming convention
 
 Scope with your devframe id and use kebab-case for the action: `my-devframe:get-modules`, `my-devframe:read-file`, `my-devframe:trigger-rebuild`.

examples/files-inspector/src/client/routes/about.tsx

@@ -5,7 +5,7 @@ export function About({ rpc, basePath }: { rpc: DevToolsRpcClient, basePath: str
   const [cwd, setCwd] = useState<string>('')
 
   useEffect(() => {
-    rpc.call('devframe-files-inspector:get-cwd' as any).then((r: any) => {
+    rpc.call('devframe-files-inspector:get-cwd').then((r) => {
       setCwd(r.cwd)
     })
   }, [rpc])

examples/files-inspector/src/client/routes/home.tsx

@@ -8,7 +8,7 @@ export function Home({ rpc }: { rpc: DevToolsRpcClient }) {
   async function refresh() {
     setLoading(true)
     try {
-      const result = await rpc.call('devframe-files-inspector:list-files' as any) as string[]
+      const result = await rpc.call('devframe-files-inspector:list-files')
       setFiles(result)
     }
     finally {

examples/files-inspector/src/devframe.ts

@@ -1,8 +1,6 @@
-import process from 'node:process'
 import { fileURLToPath } from 'node:url'
-import { defineRpcFunction } from 'devframe'
 import { defineDevframe } from 'devframe/types'
-import { glob } from 'tinyglobby'
+import { serverFunctions } from './rpc'
 
 const BASE_PATH = '/__devframe-files-inspector/'
 const distDir = fileURLToPath(new URL('../dist/client', import.meta.url))
@@ -18,25 +16,8 @@ export default defineDevframe({
     distDir,
   },
   spa: { loader: 'none' },
-  async setup(ctx) {
-    const targetCwd = process.env.DEVFRAME_E2E_CWD || ctx.cwd
-
-    ctx.rpc.register(defineRpcFunction({
-      name: 'devframe-files-inspector:get-cwd',
-      type: 'static',
-      jsonSerializable: true,
-      handler: () => ({ cwd: targetCwd }),
-    }))
-
-    ctx.rpc.register(defineRpcFunction({
-      name: 'devframe-files-inspector:list-files',
-      type: 'query',
-      jsonSerializable: true,
-      handler: async () => {
-        const files = await glob(['*'], { cwd: targetCwd, onlyFiles: true, dot: false })
-        return files.map(f => f.replace(/\\/g, '/')).sort()
-      },
-      snapshot: true,
-    }))
+  setup(ctx) {
+    for (const fn of serverFunctions)
+      ctx.rpc.register(fn)
   },
 })

examples/files-inspector/src/rpc/get-cwd.ts

@@ -0,0 +1,11 @@
+import process from 'node:process'
+import { defineRpcFunction } from 'devframe'
+
+export const getCwd = defineRpcFunction({
+  name: 'devframe-files-inspector:get-cwd',
+  type: 'static',
+  jsonSerializable: true,
+  setup: ctx => ({
+    handler: () => ({ cwd: process.env.DEVFRAME_E2E_CWD || ctx.cwd }),
+  }),
+})

examples/files-inspector/src/rpc/index.ts

@@ -0,0 +1,9 @@
+import type { RpcDefinitionsToFunctions } from 'devframe/rpc'
+import { getCwd } from './get-cwd'
+import { listFiles } from './list-files'
+
+export const serverFunctions = [getCwd, listFiles] as const
+
+declare module 'devframe' {
+  interface DevToolsRpcServerFunctions extends RpcDefinitionsToFunctions<typeof serverFunctions> {}
+}

examples/files-inspector/src/rpc/list-files.ts

@@ -0,0 +1,17 @@
+import process from 'node:process'
+import { defineRpcFunction } from 'devframe'
+import { glob } from 'tinyglobby'
+
+export const listFiles = defineRpcFunction({
+  name: 'devframe-files-inspector:list-files',
+  type: 'query',
+  jsonSerializable: true,
+  snapshot: true,
+  setup: ctx => ({
+    handler: async () => {
+      const cwd = process.env.DEVFRAME_E2E_CWD || ctx.cwd
+      const files = await glob(['*'], { cwd, onlyFiles: true, dot: false })
+      return files.map(f => f.replace(/\\/g, '/')).sort()
+    },
+  }),
+})

examples/next-runtime-snapshot/src/client/app/components/snapshot-env.tsx

@@ -15,7 +15,7 @@ export function SnapshotEnv() {
       return
     setLoading(true)
     try {
-      const r = await rpc.call('next-runtime-snapshot:env' as any, { pattern: p }) as EnvSnapshot
+      const r = await rpc.call('next-runtime-snapshot:env', { pattern: p })
       setSnap(r)
     }
     finally {

examples/next-runtime-snapshot/src/client/app/components/snapshot-memory.tsx

@@ -31,7 +31,7 @@ export function SnapshotMemory() {
       return
     setLoading(true)
     try {
-      const r = await rpc.call('next-runtime-snapshot:memory' as any) as MemorySnapshot
+      const r = await rpc.call('next-runtime-snapshot:memory')
       setSnap(r)
     }
     finally {

examples/next-runtime-snapshot/src/client/app/components/snapshot-system.tsx

@@ -16,9 +16,9 @@ export function SnapshotSystem() {
     if (!rpc)
       return
     let active = true
-    rpc.call('next-runtime-snapshot:system' as any).then((r: unknown) => {
+    rpc.call('next-runtime-snapshot:system').then((r) => {
       if (active)
-        setInfo(r as SystemInfo)
+        setInfo(r)
     })
     return () => {
       active = false