@timber-js/app 0.2.0-alpha.196 → 0.2.0-alpha.198

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (289) hide show
  1. package/dist/_chunks/{actions-CWYtq6ii.js → actions-BS-m5SLv.js} +3 -3
  2. package/dist/_chunks/{actions-CWYtq6ii.js.map → actions-BS-m5SLv.js.map} +1 -1
  3. package/dist/_chunks/als-registry-C6kcfprT.js.map +1 -1
  4. package/dist/_chunks/{build-manifest-DWppEdLB.js → build-manifest-DTmSGLRz.js} +51 -2
  5. package/dist/_chunks/build-manifest-DTmSGLRz.js.map +1 -0
  6. package/dist/_chunks/{cache-api-CQeYzA5g.js → cache-api-DqzgTEqk.js} +4 -49
  7. package/dist/_chunks/cache-api-DqzgTEqk.js.map +1 -0
  8. package/dist/_chunks/{chains-h7EO-u3n.js → chains-CZG7E5zg.js} +2 -2
  9. package/dist/_chunks/{chains-h7EO-u3n.js.map → chains-CZG7E5zg.js.map} +1 -1
  10. package/dist/_chunks/{cli-check-BVthpfLS.js → cli-check-dVDi1GQz.js} +3 -3
  11. package/dist/_chunks/{cli-check-BVthpfLS.js.map → cli-check-dVDi1GQz.js.map} +1 -1
  12. package/dist/_chunks/{cli-schema-sync-3Wutm8pH.js → cli-schema-sync-DTy_-Msq.js} +2 -2
  13. package/dist/_chunks/{cli-schema-sync-3Wutm8pH.js.map → cli-schema-sync-DTy_-Msq.js.map} +1 -1
  14. package/dist/_chunks/{cloudflare-BKJC3SC_.js → cloudflare-BFb__LYG.js} +2 -2
  15. package/dist/_chunks/{cloudflare-BKJC3SC_.js.map → cloudflare-BFb__LYG.js.map} +1 -1
  16. package/dist/_chunks/{convention-lint-DO10_pVl.js → convention-lint-Ph6luW4c.js} +4 -2
  17. package/dist/_chunks/convention-lint-Ph6luW4c.js.map +1 -0
  18. package/dist/_chunks/{error-boundary-D-lkwyaD.js → error-boundary-BvRCCmbN.js} +3 -3
  19. package/dist/_chunks/{error-boundary-D-lkwyaD.js.map → error-boundary-BvRCCmbN.js.map} +1 -1
  20. package/dist/_chunks/{href-validation-CMc5JRls.js → href-validation-BIrxavIy.js} +74 -2
  21. package/dist/_chunks/href-validation-BIrxavIy.js.map +1 -0
  22. package/dist/_chunks/{live-graph-Bx4HodF1.js → live-graph-BXDsdzBv.js} +3 -3
  23. package/dist/_chunks/{live-graph-Bx4HodF1.js.map → live-graph-BXDsdzBv.js.map} +1 -1
  24. package/dist/_chunks/{logger-pumCm3Il.js → logger-DDirEsn7.js} +3 -4
  25. package/dist/_chunks/{logger-pumCm3Il.js.map → logger-DDirEsn7.js.map} +1 -1
  26. package/dist/_chunks/navigation-root-B00jjGd5.js +233 -0
  27. package/dist/_chunks/navigation-root-B00jjGd5.js.map +1 -0
  28. package/dist/_chunks/{segment-context-CjOlyB8Y.js → param-value-C8TNYchQ.js} +2 -33
  29. package/dist/_chunks/param-value-C8TNYchQ.js.map +1 -0
  30. package/dist/_chunks/{poison-scan-BAxfTT5L.js → poison-scan-BoDLgbix.js} +2 -2
  31. package/dist/_chunks/{poison-scan-BAxfTT5L.js.map → poison-scan-BoDLgbix.js.map} +1 -1
  32. package/dist/_chunks/{router-ref-BzqbPwYC.js → router-ref-8gr8qsxN.js} +2 -2
  33. package/dist/_chunks/{router-ref-BzqbPwYC.js.map → router-ref-8gr8qsxN.js.map} +1 -1
  34. package/dist/_chunks/{rsc-cache-key-DD0fl_-s.js → rsc-cache-key-ClUiXQnK.js} +2 -2
  35. package/dist/_chunks/{rsc-cache-key-DD0fl_-s.js.map → rsc-cache-key-ClUiXQnK.js.map} +1 -1
  36. package/dist/_chunks/{scanner-BRIOmHE2.js → scanner-tdFPvDYi.js} +174 -7
  37. package/dist/_chunks/scanner-tdFPvDYi.js.map +1 -0
  38. package/dist/_chunks/segment-context-D9_89u34.js +34 -0
  39. package/dist/_chunks/segment-context-D9_89u34.js.map +1 -0
  40. package/dist/_chunks/singleflight-2lUWfcAk.js +54 -0
  41. package/dist/_chunks/singleflight-2lUWfcAk.js.map +1 -0
  42. package/dist/_chunks/{ssr-data-Ya2HJPFp.js → ssr-data-BQGhTPAK.js} +2 -17
  43. package/dist/_chunks/ssr-data-BQGhTPAK.js.map +1 -0
  44. package/dist/_chunks/{walkers-BU6z9xRV.js → walkers-DNX05dC0.js} +2 -2
  45. package/dist/_chunks/{walkers-BU6z9xRV.js.map → walkers-DNX05dC0.js.map} +1 -1
  46. package/dist/adapters/cloudflare-dev.js +1 -1
  47. package/dist/adapters/cloudflare-kv-cache.js +1 -1
  48. package/dist/adapters/cloudflare.js +1 -1
  49. package/dist/adapters/nitro.d.ts +1 -1
  50. package/dist/adapters/nitro.d.ts.map +1 -1
  51. package/dist/adapters/nitro.js.map +1 -1
  52. package/dist/analyze/crawl-entry.js +2 -2
  53. package/dist/analyze/graph-command.js +2 -2
  54. package/dist/cache/index.js +1 -1
  55. package/dist/cache/singleflight.d.ts +2 -0
  56. package/dist/cache/singleflight.d.ts.map +1 -1
  57. package/dist/cli.js +2 -2
  58. package/dist/client/browser-entry/hydrate.d.ts +21 -15
  59. package/dist/client/browser-entry/hydrate.d.ts.map +1 -1
  60. package/dist/client/browser-entry/index.d.ts +4 -3
  61. package/dist/client/browser-entry/index.d.ts.map +1 -1
  62. package/dist/client/browser-entry/post-hydration.d.ts.map +1 -1
  63. package/dist/client/browser-entry/router-init.d.ts +17 -1
  64. package/dist/client/browser-entry/router-init.d.ts.map +1 -1
  65. package/dist/client/error-boundary.js +1 -1
  66. package/dist/client/global-context.d.ts +15 -0
  67. package/dist/client/global-context.d.ts.map +1 -0
  68. package/dist/client/index.js +138 -35
  69. package/dist/client/index.js.map +1 -1
  70. package/dist/client/internal.d.ts +0 -1
  71. package/dist/client/internal.d.ts.map +1 -1
  72. package/dist/client/internal.js +206 -55
  73. package/dist/client/internal.js.map +1 -1
  74. package/dist/client/link.d.ts.map +1 -1
  75. package/dist/client/location-search.d.ts +12 -0
  76. package/dist/client/location-search.d.ts.map +1 -0
  77. package/dist/client/navigation-api.d.ts.map +1 -1
  78. package/dist/client/navigation-commit.d.ts +18 -0
  79. package/dist/client/navigation-commit.d.ts.map +1 -1
  80. package/dist/client/navigation-context.d.ts +13 -11
  81. package/dist/client/navigation-context.d.ts.map +1 -1
  82. package/dist/client/navigation-root.d.ts +47 -108
  83. package/dist/client/navigation-root.d.ts.map +1 -1
  84. package/dist/client/navigation-transition.d.ts +136 -0
  85. package/dist/client/navigation-transition.d.ts.map +1 -0
  86. package/dist/client/nuqs-adapter.d.ts.map +1 -1
  87. package/dist/client/params-context.d.ts +4 -5
  88. package/dist/client/params-context.d.ts.map +1 -1
  89. package/dist/client/react-root.d.ts +44 -0
  90. package/dist/client/react-root.d.ts.map +1 -0
  91. package/dist/client/router-pipeline.d.ts +2 -2
  92. package/dist/client/router-pipeline.d.ts.map +1 -1
  93. package/dist/client/router-types.d.ts +12 -2
  94. package/dist/client/router-types.d.ts.map +1 -1
  95. package/dist/client/router.d.ts.map +1 -1
  96. package/dist/client/segment-cache.d.ts +39 -0
  97. package/dist/client/segment-cache.d.ts.map +1 -1
  98. package/dist/client/segment-context.d.ts.map +1 -1
  99. package/dist/client/segment-outlet.d.ts +25 -14
  100. package/dist/client/segment-outlet.d.ts.map +1 -1
  101. package/dist/client/segment-update-context.d.ts +3 -9
  102. package/dist/client/segment-update-context.d.ts.map +1 -1
  103. package/dist/client/slot-content-cache-context.d.ts +35 -0
  104. package/dist/client/slot-content-cache-context.d.ts.map +1 -0
  105. package/dist/client/ssr-data.d.ts +8 -2
  106. package/dist/client/ssr-data.d.ts.map +1 -1
  107. package/dist/client/state.d.ts +0 -15
  108. package/dist/client/state.d.ts.map +1 -1
  109. package/dist/client/use-pathname.d.ts +13 -11
  110. package/dist/client/use-pathname.d.ts.map +1 -1
  111. package/dist/client/use-search-params.d.ts +13 -13
  112. package/dist/client/use-search-params.d.ts.map +1 -1
  113. package/dist/client/use-segment-params.d.ts +18 -68
  114. package/dist/client/use-segment-params.d.ts.map +1 -1
  115. package/dist/config-types.d.ts +17 -0
  116. package/dist/config-types.d.ts.map +1 -1
  117. package/dist/config-validation.d.ts.map +1 -1
  118. package/dist/cookies/index.js +1 -1
  119. package/dist/dev-tools/holding-server.d.ts +15 -10
  120. package/dist/dev-tools/holding-server.d.ts.map +1 -1
  121. package/dist/index.d.ts.map +1 -1
  122. package/dist/index.js +44 -43
  123. package/dist/index.js.map +1 -1
  124. package/dist/plugins/dev-server.d.ts.map +1 -1
  125. package/dist/plugins/entries.d.ts.map +1 -1
  126. package/dist/plugins/shims.d.ts.map +1 -1
  127. package/dist/plugins/static-build.d.ts +2 -2
  128. package/dist/plugins/static-build.d.ts.map +1 -1
  129. package/dist/routing/codegen-write.d.ts.map +1 -1
  130. package/dist/routing/index.js +2 -2
  131. package/dist/routing/interception-overlap.d.ts +35 -0
  132. package/dist/routing/interception-overlap.d.ts.map +1 -0
  133. package/dist/routing/interception.d.ts.map +1 -1
  134. package/dist/rsc-runtime/ssr.d.ts +3 -1
  135. package/dist/rsc-runtime/ssr.d.ts.map +1 -1
  136. package/dist/server/als-registry.d.ts +6 -0
  137. package/dist/server/als-registry.d.ts.map +1 -1
  138. package/dist/server/csp-nonce.d.ts +45 -0
  139. package/dist/server/csp-nonce.d.ts.map +1 -0
  140. package/dist/server/default-status-page.d.ts.map +1 -1
  141. package/dist/server/deny-renderer.d.ts.map +1 -1
  142. package/dist/server/flight-scripts.d.ts +5 -2
  143. package/dist/server/flight-scripts.d.ts.map +1 -1
  144. package/dist/server/html-injector-core.d.ts +17 -2
  145. package/dist/server/html-injector-core.d.ts.map +1 -1
  146. package/dist/server/html-injectors.d.ts +3 -2
  147. package/dist/server/html-injectors.d.ts.map +1 -1
  148. package/dist/server/index.js +2 -2
  149. package/dist/server/internal.js +86 -37
  150. package/dist/server/internal.js.map +1 -1
  151. package/dist/server/metadata-render.d.ts.map +1 -1
  152. package/dist/server/node-stream-transforms.d.ts +3 -17
  153. package/dist/server/node-stream-transforms.d.ts.map +1 -1
  154. package/dist/server/nuqs-ssr-provider.d.ts +7 -3
  155. package/dist/server/nuqs-ssr-provider.d.ts.map +1 -1
  156. package/dist/server/pipeline-phases.d.ts.map +1 -1
  157. package/dist/server/prebuilt/key-discipline.d.ts +32 -3
  158. package/dist/server/prebuilt/key-discipline.d.ts.map +1 -1
  159. package/dist/server/primitives.d.ts.map +1 -1
  160. package/dist/server/render-utils.d.ts +4 -3
  161. package/dist/server/render-utils.d.ts.map +1 -1
  162. package/dist/server/rsc-entry/action-middleware-runner.d.ts.map +1 -1
  163. package/dist/server/rsc-entry/error-renderer.d.ts.map +1 -1
  164. package/dist/server/rsc-entry/index.d.ts.map +1 -1
  165. package/dist/server/rsc-entry/ssr-renderer.d.ts.map +1 -1
  166. package/dist/server/ssr-bridge-types.d.ts +22 -2
  167. package/dist/server/ssr-bridge-types.d.ts.map +1 -1
  168. package/dist/server/ssr-entry.d.ts.map +1 -1
  169. package/dist/server/ssr-render.d.ts +5 -1
  170. package/dist/server/ssr-render.d.ts.map +1 -1
  171. package/dist/server/ssr-wrappers.d.ts +59 -27
  172. package/dist/server/ssr-wrappers.d.ts.map +1 -1
  173. package/dist/server/types.d.ts +10 -0
  174. package/dist/server/types.d.ts.map +1 -1
  175. package/dist/shims/navigation-rsc.d.ts +21 -0
  176. package/dist/shims/navigation-rsc.d.ts.map +1 -0
  177. package/docs/api/30-api-server.mdx +1 -0
  178. package/docs/api/35-api-typescript.mdx +4 -83
  179. package/docs/learn/03-fetching-data.mdx +1 -1
  180. package/docs/learn/{03b-access-control.mdx → 04-access-control.mdx} +2 -17
  181. package/docs/learn/05-the-flush-point.mdx +175 -0
  182. package/docs/learn/{05-typed-params.mdx → 06-typed-params.mdx} +1 -1
  183. package/docs/learn/07-typed-routes.mdx +25 -49
  184. package/docs/learn/{08-streaming.mdx → 09-streaming.mdx} +1 -7
  185. package/docs/learn/{10-middleware.mdx → 11-middleware.mdx} +1 -0
  186. package/package.json +3 -3
  187. package/src/adapters/nitro.ts +7 -7
  188. package/src/cache/singleflight.ts +5 -0
  189. package/src/client/browser-entry/hydrate.ts +54 -104
  190. package/src/client/browser-entry/index.ts +16 -6
  191. package/src/client/browser-entry/post-hydration.ts +3 -2
  192. package/src/client/browser-entry/router-init.ts +84 -33
  193. package/src/client/global-context.ts +31 -0
  194. package/src/client/internal.ts +1 -2
  195. package/src/client/link.tsx +18 -18
  196. package/src/client/location-search.ts +15 -0
  197. package/src/client/navigation-api.ts +4 -2
  198. package/src/client/navigation-commit.ts +48 -2
  199. package/src/client/navigation-context.ts +25 -37
  200. package/src/client/navigation-root.tsx +55 -411
  201. package/src/client/navigation-transition.ts +278 -0
  202. package/src/client/nuqs-adapter.tsx +4 -5
  203. package/src/client/params-context.ts +13 -18
  204. package/src/client/react-root.ts +72 -0
  205. package/src/client/router-lifecycle.ts +1 -1
  206. package/src/client/router-pipeline.ts +96 -22
  207. package/src/client/router-types.ts +12 -2
  208. package/src/client/router.ts +48 -36
  209. package/src/client/segment-cache.ts +70 -2
  210. package/src/client/segment-context.ts +7 -4
  211. package/src/client/segment-outlet.tsx +41 -86
  212. package/src/client/segment-update-context.ts +7 -26
  213. package/src/client/slot-content-cache-context.ts +43 -0
  214. package/src/client/ssr-data.ts +8 -2
  215. package/src/client/state.ts +0 -26
  216. package/src/client/use-pathname.ts +21 -31
  217. package/src/client/use-search-params.ts +31 -29
  218. package/src/client/use-segment-params.ts +27 -126
  219. package/src/config-types.ts +17 -0
  220. package/src/config-validation.ts +17 -0
  221. package/src/dev-tools/holding-server.ts +23 -12
  222. package/src/index.ts +26 -11
  223. package/src/plugins/dev-server.ts +9 -12
  224. package/src/plugins/entries.ts +3 -0
  225. package/src/plugins/shims.ts +8 -7
  226. package/src/plugins/static-build.ts +9 -5
  227. package/src/react-canary.d.ts +2 -0
  228. package/src/routing/codegen-write.ts +2 -0
  229. package/src/routing/interception-overlap.ts +141 -0
  230. package/src/routing/interception.ts +118 -5
  231. package/src/rsc-runtime/ssr.ts +3 -2
  232. package/src/server/als-registry.ts +6 -0
  233. package/src/server/csp-nonce.ts +70 -0
  234. package/src/server/default-status-page.ts +1 -0
  235. package/src/server/deny-renderer.ts +7 -3
  236. package/src/server/flight-scripts.ts +9 -4
  237. package/src/server/html-injector-core.ts +26 -9
  238. package/src/server/html-injectors.ts +8 -8
  239. package/src/server/metadata-render.ts +26 -4
  240. package/src/server/node-stream-transforms.ts +7 -20
  241. package/src/server/nuqs-ssr-provider.tsx +8 -7
  242. package/src/server/pipeline-phases.ts +5 -0
  243. package/src/server/prebuilt/key-discipline.ts +82 -13
  244. package/src/server/prebuilt-runtime.ts +2 -2
  245. package/src/server/primitives.ts +4 -4
  246. package/src/server/render-utils.ts +8 -4
  247. package/src/server/rsc-entry/action-middleware-runner.ts +7 -0
  248. package/src/server/rsc-entry/error-renderer.ts +5 -2
  249. package/src/server/rsc-entry/index.ts +8 -0
  250. package/src/server/rsc-entry/ssr-renderer.ts +11 -4
  251. package/src/server/ssr-bridge-types.ts +22 -2
  252. package/src/server/ssr-entry.ts +35 -28
  253. package/src/server/ssr-render.ts +13 -4
  254. package/src/server/ssr-wrappers.tsx +81 -61
  255. package/src/server/types.ts +10 -0
  256. package/src/shared/slot-params.ts +3 -4
  257. package/src/shims/navigation-rsc.ts +47 -0
  258. package/dist/_chunks/build-manifest-DWppEdLB.js.map +0 -1
  259. package/dist/_chunks/cache-api-CQeYzA5g.js.map +0 -1
  260. package/dist/_chunks/convention-lint-DO10_pVl.js.map +0 -1
  261. package/dist/_chunks/href-validation-CMc5JRls.js.map +0 -1
  262. package/dist/_chunks/scanner-BRIOmHE2.js.map +0 -1
  263. package/dist/_chunks/segment-context-CjOlyB8Y.js.map +0 -1
  264. package/dist/_chunks/slot-params-BCTmZkQB.js +0 -76
  265. package/dist/_chunks/slot-params-BCTmZkQB.js.map +0 -1
  266. package/dist/_chunks/ssr-data-Ya2HJPFp.js.map +0 -1
  267. package/dist/_chunks/use-segment-params-DzTBpkvj.js +0 -398
  268. package/dist/_chunks/use-segment-params-DzTBpkvj.js.map +0 -1
  269. package/docs/learn/04-loading-states.mdx +0 -67
  270. package/docs/learn/04b-the-flush-point.mdx +0 -115
  271. package/docs/learn/12-client-navigation.mdx +0 -176
  272. package/docs/learn/13-configuration.mdx +0 -166
  273. package/docs/more/01-advanced-routing.mdx +0 -344
  274. package/docs/more/02-advanced-forms.mdx +0 -137
  275. package/docs/more/03-coming-from-nextjs.mdx +0 -186
  276. package/docs/more/04-metadata-and-fonts.mdx +0 -193
  277. package/docs/more/04b-mdx.mdx +0 -229
  278. package/docs/more/05-content-collections.mdx +0 -90
  279. package/docs/more/06-instrumentation.mdx +0 -214
  280. package/docs/more/07-security.mdx +0 -129
  281. package/docs/more/08-developer-experience.mdx +0 -134
  282. package/docs/more/40-why-timber.mdx +0 -50
  283. package/docs/more/41-timber-vs-nextjs.mdx +0 -81
  284. package/docs/more/42-timber-vs-others.mdx +0 -68
  285. package/docs/more/50-ai-agent-instructions.mdx +0 -171
  286. /package/docs/learn/{06-forms-and-actions.mdx → 08-forms-and-actions.mdx} +0 -0
  287. /package/docs/learn/{09-caching.mdx → 10-caching.mdx} +0 -0
  288. /package/docs/learn/{11-error-handling.mdx → 12-error-handling.mdx} +0 -0
  289. /package/docs/learn/{14-deploying.mdx → 13-deploying.mdx} +0 -0
@@ -1,166 +0,0 @@
1
- ---
2
- title: 'Configuration'
3
- description: 'timber.config.ts — output mode, adapters, caching, and the two-phase model.'
4
- slug: 'configuration'
5
- ---
6
-
7
- # Configuration
8
-
9
- timber.js is configured through `timber.config.ts` at the project root. Vite configuration lives separately in `vite.config.ts`.
10
-
11
- ## Minimal Config
12
-
13
- ```ts title="timber.config.ts"
14
- export default {
15
- output: 'server',
16
- };
17
- ```
18
-
19
- That's it for most projects. The defaults are sensible.
20
-
21
- ## How the Config Is Loaded
22
-
23
- `timber.config.ts` is loaded by Node.js itself using built-in type stripping — it is not bundled by Vite. This requires Node.js 22.18 or newer, and the file must stick to erasable TypeScript syntax: type annotations, interfaces, and `satisfies` are fine, but enums, namespaces, and constructor parameter properties will fail to load. Your `package.json` should declare `"type": "module"` (the default for new timber projects) so the `export default` syntax parses correctly.
24
-
25
- If the config file fails to load for any reason, every command — `timber dev`, `timber build`, and `timber preview` — stops with an error naming the file. A broken config never silently falls back to defaults.
26
-
27
- ## Output Modes
28
-
29
- | Mode | Server required | Client JS | Server Actions |
30
- | -------------------------------------- | --------------- | ------------------------- | -------------- |
31
- | `'server'` | Yes | Yes | Yes |
32
- | `'static'` | No | Yes (hydration + SPA nav) | Via adapter |
33
- | `'static'` + `clientJavascript: false` | No | None | Build error |
34
-
35
- ```ts title="timber.config.ts"
36
- // Static site with no JavaScript
37
- export default {
38
- output: 'static',
39
- clientJavascript: false,
40
- };
41
- ```
42
-
43
- ## Build Time vs Request Time
44
-
45
- The `output` field shifts work between two phases:
46
-
47
- **Build time** happens once when you run `timber build`. There's no request, no user, no cookies. Route scanning, client boundary discovery, server action extraction, font downloading, and asset bundling all happen here.
48
-
49
- **Request time** happens per incoming HTTP request. Middleware, access checks, server components, caching, cookies, and server actions all run here.
50
-
51
- | `output` | `middleware.ts` | Server components | Server actions |
52
- | ---------- | --------------------- | ------------------------------ | ------------------------------------------- |
53
- | `'server'` | Request time | Request time | Request time |
54
- | `'static'` | **Build time only** | **Build time** (once, to HTML) | **Request time**, split-deployed as endpoints |
55
-
56
- This is why `cookies()` and `headers()` are build errors in static mode — there's no request at the moment components render.
57
-
58
- Dynamic routes (`[param]`) must export `generateStaticSegmentParams` when using `output: 'static'` — the build needs to know which URLs to render. API routes (`route.ts`) are also pre-rendered at build time.
59
-
60
- For each page, the build generates both HTML (for initial loads) and RSC flight data (for client-side SPA navigation). No server is needed at runtime.
61
-
62
- ## Adapters
63
-
64
- Adapters transform the build output for your deployment platform:
65
-
66
- ```ts title="timber.config.ts"
67
- import { cloudflare } from '@timber-js/app/adapters/cloudflare';
68
-
69
- export default {
70
- output: 'server',
71
- adapter: cloudflare(),
72
- };
73
- ```
74
-
75
- ```ts title="timber.config.ts"
76
- import { nitro } from '@timber-js/app/adapters/nitro';
77
-
78
- export default {
79
- output: 'server',
80
- adapter: nitro({ preset: 'node-server' }),
81
- };
82
- ```
83
-
84
- `cloudflare()` for Cloudflare Workers. `nitro({ preset })` for everything else — Node.js, Vercel, Netlify, AWS Lambda, Deno, Bun, Azure.
85
-
86
- ## Cache Handler
87
-
88
- Cache handler configuration lives in a separate `timber.cache.ts` file (not `timber.config.ts`). This keeps runtime cache instances separate from build-time config, preventing build dependencies from leaking into the server bundle.
89
-
90
- ```ts title="timber.cache.ts"
91
- import { MemoryCacheHandler } from '@timber-js/app/cache';
92
-
93
- export default new MemoryCacheHandler();
94
- ```
95
-
96
- The default export is the `CacheHandler` instance. Export `cdnPurge` as a named export for CDN purge handlers. The default handler is in-memory. See [Caching](/docs/caching) for Redis, KV, and custom handlers.
97
-
98
- ## `clientJavascript`
99
-
100
- Control whether client-side JavaScript is included in the build. Useful for static content sites, documentation, and marketing pages that don't need interactivity.
101
-
102
- ```ts title="timber.config.ts"
103
- // Disable all client JS
104
- export default {
105
- output: 'static',
106
- clientJavascript: false,
107
- };
108
- ```
109
-
110
- ```ts title="timber.config.ts"
111
- // No client JS in production, but keep HMR in dev
112
- export default {
113
- output: 'static',
114
- clientJavascript: { disabled: true, enableHMRInDev: true },
115
- };
116
- ```
117
-
118
- | Value | Behavior |
119
- | ------------------------------------------ | ----------------------------------------------------------- |
120
- | `true` (default) | Client JS enabled — hydration, SPA navigation, etc. |
121
- | `false` | All client JS disabled. No hydration, no SPA navigation. |
122
- | `{ disabled: true, enableHMRInDev: true }` | No client JS in production, but HMR still works in dev. |
123
-
124
- Server actions still work — HTML forms submit natively via POST without JavaScript.
125
-
126
- ## All Options
127
-
128
- | Option | Type | Default | Description |
129
- | ------------------- | --------------------------- | ---------------------------- | ---------------------------------------- |
130
- | `output` | `'server' \| 'static'` | `'server'` | Output mode |
131
- | `debug` | `boolean` | `false` | Enable timber debug logging in prod |
132
- | `buildDir` | `string` | `'.timber/dist'` | Build output directory |
133
- | `clientJavascript` | `boolean \| object` | `true` | Control client-side JS |
134
- | `adapter` | `TimberPlatformAdapter` | — | Deployment adapter |
135
- | `serverTiming` | `'detailed' \| 'total' \| false` | `'detailed'` / `'total'` | Server-Timing header |
136
- | `allowedOrigins` | `string[]` | — | CORS / CSRF allowed origins |
137
- | `csrf` | `boolean` | `true` | CSRF protection |
138
- | `limits` | `object` | — | Request body size limits |
139
- | `actions` | `object` | — | Server action behavior |
140
- | `forms` | `object` | — | Form handling (sensitive field stripping) |
141
- | `pageExtensions` | `string[]` | `['tsx', 'ts', 'jsx', 'js']` | File extensions for pages |
142
- | `slowRequestMs` | `number` | `3000` | Slow request warning threshold (ms) |
143
- | `renderTimeoutMs` | `number` | `30000` | Render abort timeout (ms) |
144
- | `devBrowserLogs` | `string` | `'warn'` | Forward browser console to server in dev |
145
- | `dev` | `object` | — | Dev-mode options |
146
- | `budget` | `object` | — | Build-time performance budgets |
147
- | `appDir` | `string` | auto-detected | Override app directory location |
148
- | `mdx` | `object` | — | MDX remark/rehype plugins |
149
- | `actionEncryption` | `object` | — | Server action bound args encryption |
150
- | `reactCompiler` | `boolean \| object` | `true` | React Compiler auto-memoization |
151
- | `sitemap` | `object` | — | Auto-generated sitemap.xml |
152
- | `clientSegmentCache`| `boolean` | `false` | Opt-in client segment cache for partial nav |
153
- | `topLoader` | `object` | enabled | Navigation progress bar |
154
-
155
- For the full type definition, see the [Config API Reference](/docs/api-config).
156
-
157
- ## .gitignore
158
-
159
- Add these to your `.gitignore` — they're generated at build/dev time and should not be committed:
160
-
161
- ```txt title=".gitignore"
162
- .timber
163
- .content-collections
164
- ```
165
-
166
- `.timber` contains the build output (default `.timber/dist`). `.content-collections` contains generated modules from [content collections](/docs/content-collections). `create-timber-app` adds both automatically.
@@ -1,344 +0,0 @@
1
- ---
2
- title: 'Advanced Routing'
3
- description: 'Route groups, parallel routes (slots), intercepting routes, catch-all segments, affixed dynamic segments, and API routes.'
4
- slug: 'advanced-routing'
5
- ---
6
-
7
- # Advanced Routing
8
-
9
- This page covers routing patterns beyond the basics in [Pages and Layouts](/docs/pages-and-layouts). It assumes you understand `page.tsx`, `layout.tsx`, and nesting.
10
-
11
- ## Dynamic Segments
12
-
13
- Wrap a directory name in brackets to capture a URL parameter:
14
-
15
- ```
16
- app/
17
- products/
18
- [id]/
19
- page.tsx # /products/42, /products/abc
20
- ```
21
-
22
- Access the param with `getSegmentParams(SEGMENT_PATH)` using the `$segment` module — see [Typed Params](/docs/typed-params) for the full codec system.
23
-
24
- ## Catch-All Segments
25
-
26
- ```
27
- app/docs/[...slug]/page.tsx # /docs/a, /docs/a/b, /docs/a/b/c
28
- app/docs/[[...slug]]/page.tsx # Same, plus /docs (zero segments)
29
- ```
30
-
31
- With optional catch-all segments (`[[...slug]]`), the param is `undefined` when no segments match — not an empty array:
32
-
33
- | URL | `slug` value |
34
- | ------------- | ----------------- |
35
- | `/docs` | `undefined` |
36
- | `/docs/intro` | `['intro']` |
37
- | `/docs/a/b/c` | `['a', 'b', 'c']` |
38
-
39
- ### Not Supported: Optional Single Segments
40
-
41
- timber does not support `[[foo]]` (optional single dynamic segment). Use `[[...foo]]` and check `slug?.[0]`, or create two separate pages:
42
-
43
- ```
44
- app/blog/page.tsx # /blog (index)
45
- app/blog/[year]/page.tsx # /blog/2024 (filtered)
46
- ```
47
-
48
- ## Affixed Dynamic Segments
49
-
50
- Dynamic segments can have literal prefixes and/or suffixes:
51
-
52
- ```
53
- app/
54
- images/
55
- [id].png/
56
- route.ts # /images/123.png → id = "123"
57
- user-[name]/
58
- page.tsx # /user-alice → name = "alice"
59
- img-[id].webp/
60
- page.tsx # /img-photo.webp → id = "photo"
61
- ```
62
-
63
- This is useful for CDN-cacheable file-extension routes (e.g. image generation endpoints) and prefixed slugs. The literal parts must match exactly; the dynamic middle is extracted as the param value.
64
-
65
- **Rules:**
66
- - The param must be non-empty — `img-[id].png` does NOT match `img-.png`
67
- - One param per segment — `[foo]-[bar]` is not supported
68
- - Affixes cannot be used with catch-all (`[...slug].png`) or optional catch-all segments
69
- - Matching is greedy: `[id].png` matching `a.png.png` yields `id = "a.png"`
70
- - `app/schema.ts` codecs use the bare bracket form (`[id]`), not the full segment pattern
71
-
72
- **Priority:** static → affixed dynamic → bare dynamic → catch-all → optional catch-all. A static `foo.png` always wins over `[id].png`.
73
-
74
- `<Link>` interpolates affixed segments automatically:
75
-
76
- ```tsx
77
- <Link href="/images/[id].png" segmentParams={{ id: 'photo' }}>
78
- {/* renders href="/images/photo.png" */}
79
- </Link>
80
- ```
81
-
82
- ## Parallel Routes (Slots)
83
-
84
- Directories prefixed with `@` are slots — they render simultaneously within a parent layout:
85
-
86
- ```
87
- app/
88
- dashboard/
89
- layout.tsx # Receives { children, sidebar }
90
- page.tsx # Renders as children
91
- @sidebar/
92
- page.tsx # Renders as sidebar prop
93
- default.tsx # Fallback when no match
94
- ```
95
-
96
- ```tsx title="app/dashboard/layout.tsx"
97
- export default function DashboardLayout({
98
- children,
99
- sidebar,
100
- }: {
101
- children: React.ReactNode;
102
- sidebar: React.ReactNode;
103
- }) {
104
- return (
105
- <div className="flex">
106
- <aside className="w-64">{sidebar}</aside>
107
- <main className="flex-1">{children}</main>
108
- </div>
109
- );
110
- }
111
- ```
112
-
113
- Slots don't add URL depth. Each slot independently matches the current URL and can have its own `access.ts`, `error.tsx`, and layouts. If a slot's access check fails, the slot degrades gracefully — the rest of the page is unaffected (see [Access Control](/docs/access-control)).
114
-
115
- **A slot cannot be nested inside another slot.** Slots are resolved for segments on the matched route chain, and a slot's own subtree is not on that chain — so a nested slot could never render, and the build rejects it:
116
-
117
- ```
118
- app/dashboard/layout.tsx ← receives { children, sidebar }
119
- app/dashboard/@sidebar/page.tsx ✓
120
- app/dashboard/settings/layout.tsx ← receives { children, panel }
121
- app/dashboard/settings/@panel/page.tsx ✓ a second slot deeper on the main chain
122
- app/dashboard/@sidebar/@panel/page.tsx ✗ build error — nested inside @sidebar
123
- app/dashboard/@sidebar/settings/@panel/... ✗ build error — same, further down
124
- ```
125
-
126
- This is a build error rather than a documented limit because nothing at request time could tell you: a slot that never rendered looks exactly like a slot that simply didn't match. Put the second slot on a segment of the main route chain instead.
127
-
128
- Note the `layout.tsx` beside each slot. A slot is handed to its owning segment's layout as a named prop, so **the owner must have one** — `app/dashboard/@sidebar/` with no `app/dashboard/layout.tsx` has nothing to be passed to and never renders. That case is dead in the same way as a nested slot, and the build does not currently catch it.
129
-
130
- Each slot is also its own collision space: a slot page sharing a URL with the parent page is the point of parallel routes, but two pages inside one slot that answer the same URL (`@side/(a)/x/page.tsx` + `@side/(b)/x/page.tsx`) fail the build, just like the same collision outside a slot. Interceptors that start at the same URL are their own space on the same principle — see [Intercepting routes](#intercepting-routes).
131
-
132
- Every collision space is checked the same way: routes are compared by the URLs they match rather than by how they are spelled, so `(a)/[id]` and `(b)/[slug]` collide even though their paths read differently, and a page collides with an optional catch-all beside it because `[[...rest]]` also matches with zero segments. Segment kinds stay distinct — `[id]` beside `[...rest]`, or an affixed `img-[id]` beside a bare `[slug]`, are ordered deterministically and keep building.
133
-
134
- ## Intercepting Routes
135
-
136
- Intercepting routes show a different component on soft navigation (client-side link click) vs hard navigation (direct URL).
137
-
138
- | Marker | Meaning |
139
- | ---------- | ------------- |
140
- | `(.)` | Same level |
141
- | `(..)` | One level up |
142
- | `(..)(..)` | Two levels up |
143
- | `(...)` | Root level |
144
-
145
- Where you put the intercepting directory picks between two behaviours.
146
-
147
- **Inside a parallel slot → modal overlay.** The slot renders the intercepting page on top; the page you came from stays mounted behind it.
148
-
149
- ```
150
- app/feed/@modal/(.)photo/[id]/page.tsx ← soft nav: modal over the feed
151
- app/feed/photo/[id]/page.tsx ← hard nav: the full page
152
- ```
153
-
154
- **As a plain child of a segment or route group → sibling layout swap.** No overlay and no slot: the intercepting page replaces the content of *its own* directory's layout chain. This is how two route groups can serve one URL with different layouts.
155
-
156
- ```
157
- app/(landing)/layout.tsx
158
- app/(landing)/[artistSlug]/[year]/page.tsx ← hard nav renders this
159
- app/(browse)/layout.tsx
160
- app/(browse)/(...)[artistSlug]/[year]/page.tsx ← soft nav from inside (browse) renders this
161
- ```
162
-
163
- Navigate directly to `/grateful-dead/1977` and you get `(landing)`'s page under `(landing)`'s layout. Click a link to it from anywhere inside `(browse)` and you stay in `(browse)`'s layout with the intercepting page beneath it. Unlike the modal shape, the intercepting page's params come from the URL you navigated to, so `getSegmentParams()` works exactly as it does on a canonical route.
164
-
165
- An intercepting directory must be a **direct** child of one or the other. A marker one directory deeper inside a slot, or nested inside another intercepting subtree, would match the navigation and then have nothing to render — the build fails naming the directory rather than silently serving the wrong page.
166
-
167
- ```
168
- app/feed/@modal/(.)photo/[id]/page.tsx ✓ modal overlay
169
- app/feed/(.)photo/[id]/page.tsx ✓ layout swap (feed/layout.tsx required)
170
- app/(browse)/(...)photo/[id]/page.tsx ✓ layout swap, scoped to (browse)
171
- app/feed/@modal/(x)/(.)photo/page.tsx ✗ build error — not a direct slot child
172
- app/feed/(.)a/(.)b/page.tsx ✗ build error — nested interception
173
- app/feed/@modal/(.)photo/[id]/route.ts ✗ build error — route handler in interception
174
- ```
175
-
176
- Outside a slot, the directory holding the marker must have a `layout.tsx`. That is the directory the swap is scoped to, and the browser reports which directories it has mounted from its layouts — a scope it cannot report would let the swap fire once and then quietly stop. In practice you already have one, since rendering inside that layout is the point.
177
-
178
- ```
179
- app/(browse)/layout.tsx ✓ required
180
- app/(browse)/(...)photo/[id]/page.tsx
181
- ```
182
-
183
- Also outside a slot, every directory above the marker must be a static segment or a route group. The swapped page renders its own layouts against the URL you navigated to, and that URL carries no values for params declared above the marker — so a dynamic ancestor is a build error rather than a layout that renders with a missing param. Put the same interception in a slot if you need one: the modal shape re-matches the source route, which supplies them.
184
-
185
- ```
186
- app/(browse)/(...)photo/[id]/page.tsx ✓
187
- app/docs/guides/(.)[id]/page.tsx ✓
188
- app/[team]/(..)photo/[id]/page.tsx ✗ build error — [team] is above the marker
189
- app/[team]/@modal/(.)photo/[id]/page.tsx ✓ a slot supplies [team] from the source route
190
- ```
191
-
192
- Two pages that intercept the same URL are a build error when both sit under interceptors that **start at the same URL** — the set timber resolves in one pass. Route groups are transparent here just as they are elsewhere, so two of them under one marker both claim the same target; and two markers that compute the same starting point are the same case one level up. Either way, which page renders would come down to the order the filesystem happens to list them in.
193
-
194
- Pages are compared by the URLs they match, not by how you spell them — so param names don't make two dynamic segments different, and an optional catch-all also matches with *zero* segments.
195
-
196
- ```
197
- app/feed/(.)photo/(a)/page.tsx ✗ build error — both intercept /feed/photo
198
- app/feed/(.)photo/(b)/page.tsx
199
-
200
- app/feed/(.)photo/(a)/[id]/page.tsx ✗ build error — [id] and [slug] match the same URLs
201
- app/feed/(.)photo/(b)/[slug]/page.tsx
202
-
203
- app/feed/(.)photo/(a)/page.tsx ✗ build error — [[...rest]] also matches zero segments,
204
- app/feed/(.)photo/(b)/[[...rest]]/page.tsx so it claims /feed/photo too
205
-
206
- app/feed/(.)photo/page.tsx ✓ a page plus a tail — the page always wins
207
- app/feed/(.)photo/[[...rest]]/page.tsx /feed/photo, the catch-all takes the rest
208
-
209
- app/feed/(.)photo/(x)/a/page.tsx ✓ different URLs
210
- app/feed/(.)photo/(y)/b/page.tsx
211
-
212
- app/feed/(.)photo/(x)/[id]/page.tsx ✓ different kinds — a single segment always
213
- app/feed/(.)photo/(y)/[...rest]/page.tsx beats a catch-all, so this is unambiguous
214
-
215
- app/feed/@modal/(.)[a]/page.tsx ✗ build error — two markers, one starting point,
216
- app/feed/@modal/(.)[b]/page.tsx same kind: nothing separates them
217
-
218
- app/feed/@modal/(.)photo/[id]/page.tsx ✓ same starting point, different kinds — the
219
- app/feed/@modal/(.)[albumSlug]/page.tsx literal `photo` wins, everything else the second
220
- ```
221
-
222
- A route group is transparent for matching, so putting a page inside one does not give it a URL of its own:
223
-
224
- ```
225
- app/feed/(.)photo/page.tsx ✗ build error — both are /feed/photo, so the
226
- app/feed/(.)photo/(a)/page.tsx one in the group could never render
227
- ```
228
-
229
- Interceptors that start at **different** URLs stay legal even when they target one page — `(.)x` beside `(..)x`, or interceptors in two different slots. Those are separate spaces, and the resolver orders them (deepest marker first).
230
-
231
- ### Dynamic intercepted segments
232
-
233
- The marker is a prefix on an ordinary segment name, so the name after it uses the same bracket syntax as anywhere else:
234
-
235
- ```
236
- app/gallery/@modal/(.)photo/[id]/page.tsx # intercepts /gallery/photo/{id}
237
- app/gallery/@modal/(.)[albumSlug]/page.tsx # intercepts /gallery/{albumSlug}
238
- app/gallery/@modal/(.)[...rest]/page.tsx # intercepts the whole tail
239
- ```
240
-
241
- Intercepting siblings in one slot follow the usual priority — static, then dynamic, then catch-all — so `(.)photo/[id]` and `(.)[albumSlug]` can live in the same `@modal` without ambiguity.
242
-
243
- Two affixed interceptors are the one case priority cannot separate: `(.)a-[id]` and `(.)[slug]-b` both match `/gallery/a-b` with the same combined affix length, so which modal opened would come down to filesystem order. That fails the build, exactly as it does for ordinary affixed siblings.
244
-
245
- One placement fails the build: an interception whose intercepted level lands below a catch-all. Markers count URL segments, and a catch-all matches a number of them that changes per request, so "same level as `/docs/[...path]`" has no fixed position in `/docs/a/b/c`. Such an interception would fire only when the catch-all consumed exactly one segment and be silently dropped otherwise, so timber names the directory in a build error instead. Climbing past the catch-all avoids it:
246
-
247
- ```
248
- app/docs/[...path]/@modal/(.)photo/[id]/page.tsx ✗ build error
249
- app/docs/[...path]/@modal/(..)photo/[id]/page.tsx ✓ (..) climbs past it, basing at /docs
250
- app/docs/[...path]/@modal/(...)photo/[id]/page.tsx ✓ (...) bases at the root
251
- app/[artistSlug]/@modal/(.)photo/[id]/page.tsx ✓ a dynamic segment is one URL part
252
- ```
253
-
254
- A catch-all inside an intercepting route must also be the last segment — nothing below a catch-all can ever match, and the rewrite generated for the unreachable page would hijack the navigation with nothing to render:
255
-
256
- ```
257
- app/feed/@modal/(.)[...rest]/page.tsx ✓
258
- app/feed/@modal/(.)photo/[...rest]/page.tsx ✓
259
- app/feed/@modal/(.)[...rest]/child/page.tsx ✗ build error — child is unreachable
260
- app/feed/@modal/(.)photo/[...rest]/child/page.tsx ✗ build error — same, one level down
261
- ```
262
-
263
- ### Params in intercepting directories
264
-
265
- A dynamic intercepted segment binds a param like any other, so the ordinary param rules apply to it:
266
-
267
- ```
268
- app/feed/@modal/(.)[id]/[id]/page.tsx ✗ build error — duplicate param name
269
- app/feed/@modal/(.)[albumSlug]/[id]/... ✓
270
- ```
271
-
272
- ### Params inside an intercepting page
273
-
274
- This section is about the **modal** shape. A layout-swap interception has nothing special going on: its chain is the main route, so `getSegmentParams()` returns the URL's params everywhere in it, exactly as on a canonical route.
275
-
276
- Inside a slot, `getSegmentParams()` returns **the intercepted route's** params — what the page's own directories declare:
277
-
278
- ```tsx title="app/gallery/@modal/(.)photo/[id]/page.tsx"
279
- export default async function PhotoModal() {
280
- const { id } = getSegmentParams(); // the photo's id, not the gallery's params
281
- return <Modal photo={await getPhoto(id)} />;
282
- }
283
- ```
284
-
285
- That is worth stating because the request itself is matched against the *source* route (`/gallery`) — the page still rendering behind the modal. The modal's own params are scoped to it, and the source page underneath keeps reading its own.
286
-
287
- This is the general slot rule: inside a parallel slot, a no-arg `getSegmentParams()` returns that slot's own params merged over the main route's — the same value as passing the slot's segment path explicitly. Params the slot re-derives win, so a slot that reads a URL part as `[...year]` gets `string[]` even when the main route read it as `[year]`.
288
-
289
- ### Scope
290
-
291
- An interception fires only when the departing page renders the directory that owns it — the slot's parent for a modal, the marker's own parent for a layout swap. For `app/feed/@modal/(.)photo/`, that directory is `/feed`: clicking a photo link from `/feed` or `/feed/trending` opens the modal; clicking one from `/settings` does not.
292
-
293
- Route groups count here even though they are invisible in the URL. Anything owned by `app/(browse)/` is scoped to `(browse)`, so a navigation starting in a sibling `(landing)` group renders the normal route, not the interception — that is what makes the layout-swap shape work. A directory at the app root is scoped to the root, which every page renders, which is why `(...)` at the root intercepts from anywhere.
294
-
295
- **When two interceptions both apply, the innermost one wins.** A directory and a directory beneath it may each hold a marker for the same URL, and a page inside the inner one renders both — so `app/feed/(.)photo/` and `app/feed/(a)/(.)photo/` both qualify for a click made inside `(a)`. The one scoped to `(a)` renders, on the same reasoning that a `(.)` marker beats a `(...)` one beside it: the more local directory is the more specific statement. Directories that are *not* on one chain — `(a)` beside `(b)` — never both qualify, so they stay independent.
296
-
297
- Because scope depends on where the click starts, so does a prefetch: `<Link prefetch>` fetches the variant for the page the link is on, and the cached payload is only used by a click that starts there. Hovering an intercepting link gets you the modal; the same URL prefetched from elsewhere stays the full page.
298
-
299
- ## API Routes
300
-
301
- Export HTTP method handlers from `route.ts`:
302
-
303
- ```ts title="app/api/hello/route.ts"
304
- export async function GET(ctx: RouteContext) {
305
- return Response.json({ message: 'Hello' });
306
- }
307
-
308
- export async function POST(ctx: RouteContext) {
309
- const body = await ctx.request.json();
310
- return Response.json({ received: body });
311
- }
312
- ```
313
-
314
- ## The Segment Tree
315
-
316
- Every directory in your `app/` directory is a **segment**. Segments nest into a tree that connects your URL structure, component structure, and HTML structure:
317
-
318
- | Concern | Segment mapping |
319
- | ----------------- | ------------------------------------------------------------- |
320
- | URL matching | Each segment consumes URL segments (except groups and slots) |
321
- | Params | Dynamic segments extract params, accumulate top-down |
322
- | Authorization | `access.ts` per segment, top-down, shallowest failure wins |
323
- | Layouts | `layout.tsx` per segment, persist across navigation |
324
- | Streaming | `<Suspense>` placement controls flush boundary per segment |
325
- | Error handling | `error.tsx` / status files per segment, leaf-to-root fallback |
326
- | Client navigation | Segment cache mirrors the tree, skips mounted sync layouts |
327
- | Slot isolation | `@slot` branches render independently, fail gracefully |
328
-
329
- ## The Request Lifecycle
330
-
331
- ``` leading="none"
332
- Request
333
- ├── URL canonicalization
334
- ├── proxy.ts (global — every request)
335
- ├── Route matching
336
- ├── Param coercion (schema.ts codecs)
337
- ├── middleware.ts chain (root → leaf)
338
- └── Single renderToReadableStream call
339
- Root Segment → AccessGate → Layout
340
- Child Segment → AccessGate → Layout
341
- Leaf Segment → Page
342
- ```
343
-
344
- The entire route renders in a **single `renderToReadableStream` call**. One React tree, one `React.cache` scope.
@@ -1,137 +0,0 @@
1
- ---
2
- title: 'Advanced Forms'
3
- description: 'Coercion helpers, parseFormData, form flash internals, and sensitive field stripping.'
4
- slug: 'advanced-forms'
5
- ---
6
-
7
- # Advanced Forms
8
-
9
- This page covers advanced form patterns beyond [Forms and Actions](/docs/forms-and-actions): coercion helpers, raw FormData parsing, form flash internals, and sensitive field stripping.
10
-
11
- ## Coercing FormData Values
12
-
13
- HTML forms send everything as strings. Use `coerce` helpers to convert FormData values before schema validation:
14
-
15
- ```ts
16
- import { coerce } from '@timber-js/app/server';
17
- import { z } from 'zod/v4';
18
-
19
- const eventSchema = z.object({
20
- title: z.string().min(1),
21
- maxAttendees: z.preprocess(coerce.number, z.number().min(1)),
22
- isPublic: z.preprocess(coerce.checkbox, z.boolean()),
23
- date: z.preprocess(coerce.date, z.date()),
24
- });
25
- ```
26
-
27
- | Helper | Input | Output |
28
- | ----------------- | ------------------- | ------------------- |
29
- | `coerce.number` | `"42"`, `""` | `42`, `undefined` |
30
- | `coerce.checkbox` | `"on"`, `undefined` | `true`, `false` |
31
- | `coerce.json` | `'{"a":1}'` | `{ a: 1 }` |
32
- | `coerce.date` | `"2024-01-15"` | `Date` |
33
- | `coerce.file` | `File`, empty input | `File`, `undefined` |
34
-
35
- `coerce.file` accepts options for validation:
36
-
37
- ```ts
38
- z.preprocess(
39
- coerce.file({ maxSize: 5 * 1024 * 1024, accept: ['image/png', 'image/jpeg'] }),
40
- z.instanceof(File)
41
- );
42
- ```
43
-
44
- ## `parseFormData`
45
-
46
- For advanced cases, `parseFormData` converts raw `FormData` into a plain object before schema validation:
47
-
48
- ```ts
49
- import { parseFormData } from '@timber-js/app/server';
50
-
51
- const obj = parseFormData(formData);
52
- ```
53
-
54
- It handles common patterns:
55
-
56
- - **Duplicate keys → arrays**: `tags=js&tags=ts` → `{ tags: ["js", "ts"] }`
57
- - **Dot-path nesting**: `user.name=Alice` → `{ user: { name: "Alice" } }`
58
- - **Empty strings → undefined**: Enables `.optional()` semantics
59
- - **Empty file inputs → undefined**: File inputs with no selection become `undefined`
60
-
61
- `createActionClient` calls `parseFormData` automatically — you only need it for manual FormData handling.
62
-
63
- ## Form Flash Internals
64
-
65
- When JavaScript is disabled and a server action returns validation errors, timber re-renders the page with flash data available via `getFormFlash()`:
66
-
67
- ```ts
68
- interface FormFlashData {
69
- validationErrors: Record<string, string[]>;
70
- submittedValues: Record<string, unknown>;
71
- serverError?: { code: string; data?: Record<string, unknown> };
72
- }
73
- ```
74
-
75
- - `validationErrors` — field-level errors keyed by field name
76
- - `submittedValues` — raw input for repopulating form fields (File objects excluded, sensitive fields stripped)
77
- - `serverError` — present if an `ActionError` was thrown
78
-
79
- Flash data is server-side only — stored in AsyncLocalStorage for the duration of the re-render. Never serialized to cookies or headers.
80
-
81
- ## Sensitive Field Stripping
82
-
83
- On validation failure timber echoes submitted form values back so users don't re-type everything. To prevent plaintext passwords or credit-card numbers from leaking through the RSC payload or into HTML `defaultValue` attributes, timber automatically strips a deny-list of sensitive field names.
84
-
85
- **Built-in deny-list** (case-insensitive, nested objects walked recursively):
86
-
87
- - `password`, `passwd`, `pwd` (and variants like `currentPassword`, `newPassword`)
88
- - `secret`, `apiKey`, `accessToken`, `refreshToken`, `privateKey`
89
- - `cvv`, `cvc`, `cardNumber`, `cardCvc`
90
- - `ssn`, `socialSecurityNumber`
91
- - `otp`, `totp`, `mfaCode`, `twoFactorCode`
92
- - `token` (exact match only — `csrfToken` is preserved)
93
-
94
- Stripped fields are omitted from `submittedValues` entirely — not replaced with empty strings.
95
-
96
- ### Global Configuration
97
-
98
- ```ts title="timber.config.ts"
99
- import { defineConfig } from '@timber-js/app';
100
-
101
- export default defineConfig({
102
- forms: {
103
- // true / omitted — use built-in deny-list (default)
104
- // false — disable all stripping (NEVER in prod)
105
- // string[] — extra field names merged with built-in list
106
- stripSensitiveFields: ['internalCode', 'bankAccount'],
107
- },
108
- });
109
- ```
110
-
111
- ### Per-Action Override
112
-
113
- ```ts
114
- import { createActionClient } from '@timber-js/app/server';
115
-
116
- const action = createActionClient({
117
- stripSensitiveFields: (name) => name.startsWith('secret_'),
118
- });
119
- ```
120
-
121
- Per-action config takes precedence over global config, which takes precedence over the built-in default.
122
-
123
- ## Shared Schemas for Client + Server Validation
124
-
125
- Define Zod schemas in shared files and import them on both sides for instant client-side validation while keeping the server as the source of truth:
126
-
127
- ```ts title="lib/schemas/contact.ts"
128
- import { z } from 'zod/v4';
129
-
130
- export const contactSchema = z.object({
131
- name: z.string().min(1, 'Name is required').max(100),
132
- email: z.string().email('Invalid email address'),
133
- message: z.string().min(10).max(2000),
134
- });
135
- ```
136
-
137
- Use in the server action via `.schema(contactSchema)` and in the client form for `onBlur` validation. Client validation is a UX enhancement — always validate on the server.