react-router 7.16.0 → 8.0.0-pre.0

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 (369) hide show
  1. package/CHANGELOG.md +0 -1
  2. package/dist/development/dom-export.d.ts +6 -172
  3. package/dist/development/dom-export.js +12 -1007
  4. package/dist/development/index-react-server-client.d.ts +7 -4
  5. package/dist/development/index-react-server-client.js +8 -52
  6. package/dist/development/index-react-server.d.ts +1645 -1635
  7. package/dist/development/index-react-server.js +2880 -3642
  8. package/dist/development/index.d.ts +43 -1475
  9. package/dist/development/index.js +37 -2621
  10. package/dist/development/lib/actions.js +62 -0
  11. package/dist/development/lib/components.d.ts +1022 -0
  12. package/dist/development/lib/components.js +835 -0
  13. package/dist/development/lib/context.d.ts +83 -0
  14. package/dist/development/lib/context.js +41 -0
  15. package/dist/development/lib/dom/dom.d.ts +119 -0
  16. package/dist/development/lib/dom/dom.js +143 -0
  17. package/dist/development/lib/dom/lib.d.ts +2042 -0
  18. package/dist/development/lib/dom/lib.js +1259 -0
  19. package/dist/development/lib/dom/server.d.ts +138 -0
  20. package/dist/development/lib/dom/server.js +301 -0
  21. package/dist/development/lib/dom/ssr/components.d.ts +196 -0
  22. package/dist/development/lib/dom/ssr/components.js +579 -0
  23. package/dist/development/lib/dom/ssr/data.js +29 -0
  24. package/dist/development/lib/dom/ssr/entry.d.ts +59 -0
  25. package/dist/development/lib/dom/ssr/errorBoundaries.d.ts +27 -0
  26. package/dist/development/lib/dom/ssr/errorBoundaries.js +83 -0
  27. package/dist/development/lib/dom/ssr/errors.d.ts +7 -0
  28. package/dist/development/lib/dom/ssr/errors.js +36 -0
  29. package/dist/development/lib/dom/ssr/fallback.js +28 -0
  30. package/dist/development/lib/dom/ssr/fog-of-war.d.ts +12 -0
  31. package/dist/development/lib/dom/ssr/fog-of-war.js +170 -0
  32. package/dist/development/lib/dom/ssr/hydration.d.ts +32 -0
  33. package/dist/development/lib/dom/ssr/hydration.js +29 -0
  34. package/dist/development/lib/dom/ssr/invariant.js +16 -0
  35. package/dist/development/lib/dom/ssr/links.js +170 -0
  36. package/dist/development/lib/dom/ssr/markup.js +24 -0
  37. package/dist/development/lib/dom/ssr/routeModules.d.ts +206 -0
  38. package/dist/development/lib/dom/ssr/routeModules.js +31 -0
  39. package/dist/development/lib/dom/ssr/routes-test-stub.d.ts +62 -0
  40. package/dist/development/lib/dom/ssr/routes-test-stub.js +108 -0
  41. package/dist/development/lib/dom/ssr/routes.d.ts +33 -0
  42. package/dist/development/lib/dom/ssr/routes.js +303 -0
  43. package/dist/development/lib/dom/ssr/server.d.ts +45 -0
  44. package/dist/development/lib/dom/ssr/server.js +68 -0
  45. package/dist/development/lib/dom/ssr/single-fetch.d.ts +14 -0
  46. package/dist/development/lib/dom/ssr/single-fetch.js +346 -0
  47. package/dist/development/lib/dom-export/dom-router-provider.d.ts +9 -0
  48. package/dist/development/lib/dom-export/dom-router-provider.js +22 -0
  49. package/dist/development/lib/dom-export/hydrated-router.d.ts +125 -0
  50. package/dist/development/lib/dom-export/hydrated-router.js +153 -0
  51. package/dist/development/lib/errors.js +29 -0
  52. package/dist/development/lib/hooks.d.ts +947 -0
  53. package/dist/development/lib/hooks.js +1386 -0
  54. package/dist/development/lib/href.d.ts +20 -0
  55. package/dist/development/lib/href.js +50 -0
  56. package/dist/development/lib/router/history.d.ts +258 -0
  57. package/dist/development/lib/router/history.js +371 -0
  58. package/dist/development/lib/router/instrumentation.d.ts +86 -0
  59. package/dist/development/lib/router/instrumentation.js +213 -0
  60. package/dist/development/lib/router/links.d.ts +113 -0
  61. package/dist/development/lib/router/router.d.ts +663 -0
  62. package/dist/development/lib/router/router.js +2981 -0
  63. package/dist/development/lib/router/utils.d.ts +942 -0
  64. package/dist/development/lib/router/utils.js +791 -0
  65. package/dist/development/lib/rsc/browser.d.ts +137 -0
  66. package/dist/development/lib/rsc/browser.js +599 -0
  67. package/dist/development/lib/rsc/errorBoundaries.d.ts +11 -0
  68. package/dist/development/lib/rsc/errorBoundaries.js +90 -0
  69. package/dist/development/lib/rsc/html-stream/browser.d.ts +48 -0
  70. package/dist/development/lib/rsc/html-stream/browser.js +74 -0
  71. package/dist/development/lib/rsc/html-stream/server.js +78 -0
  72. package/dist/development/lib/rsc/route-modules.js +27 -0
  73. package/dist/development/lib/rsc/server.rsc.d.ts +219 -0
  74. package/dist/development/lib/rsc/server.ssr.d.ts +129 -0
  75. package/dist/development/lib/rsc/server.ssr.js +388 -0
  76. package/dist/development/lib/server-runtime/build.d.ts +66 -0
  77. package/dist/development/lib/server-runtime/cookies.d.ts +66 -0
  78. package/dist/development/lib/server-runtime/cookies.js +139 -0
  79. package/dist/development/lib/server-runtime/crypto.js +43 -0
  80. package/dist/development/lib/server-runtime/data.d.ts +13 -0
  81. package/dist/development/lib/server-runtime/data.js +25 -0
  82. package/dist/development/lib/server-runtime/dev.d.ts +9 -0
  83. package/dist/development/lib/server-runtime/dev.js +26 -0
  84. package/dist/development/lib/server-runtime/entry.js +20 -0
  85. package/dist/development/lib/server-runtime/errors.js +95 -0
  86. package/dist/development/lib/server-runtime/headers.js +73 -0
  87. package/dist/development/lib/server-runtime/invariant.js +19 -0
  88. package/dist/development/lib/server-runtime/mode.d.ts +12 -0
  89. package/dist/development/lib/server-runtime/mode.js +25 -0
  90. package/dist/development/lib/server-runtime/routeMatching.js +28 -0
  91. package/dist/development/lib/server-runtime/routes.d.ts +13 -0
  92. package/dist/development/lib/server-runtime/routes.js +74 -0
  93. package/dist/development/lib/server-runtime/server.d.ts +10 -0
  94. package/dist/development/lib/server-runtime/server.js +351 -0
  95. package/dist/development/lib/server-runtime/serverHandoff.js +17 -0
  96. package/dist/development/lib/server-runtime/sessions/cookieStorage.d.ts +25 -0
  97. package/dist/development/lib/server-runtime/sessions/cookieStorage.js +45 -0
  98. package/dist/development/lib/server-runtime/sessions/memoryStorage.d.ts +23 -0
  99. package/dist/development/lib/server-runtime/sessions/memoryStorage.js +52 -0
  100. package/dist/development/lib/server-runtime/sessions.d.ts +145 -0
  101. package/dist/development/lib/server-runtime/sessions.js +98 -0
  102. package/dist/development/lib/server-runtime/single-fetch.d.ts +7 -0
  103. package/dist/development/lib/server-runtime/single-fetch.js +215 -0
  104. package/dist/development/lib/server-runtime/urls.js +31 -0
  105. package/dist/development/lib/server-runtime/warnings.js +20 -0
  106. package/dist/development/lib/types/future.d.ts +9 -0
  107. package/dist/development/lib/types/internal.d.ts +26 -177
  108. package/dist/development/lib/types/internal.js +3 -2
  109. package/dist/{production/register-CNAx3TXj.d.ts → development/lib/types/register.d.ts} +9 -15
  110. package/dist/development/lib/types/route-data.d.ts +113 -0
  111. package/dist/development/lib/types/route-module-annotations.d.ts +149 -0
  112. package/dist/development/lib/types/route-module.d.ts +19 -0
  113. package/dist/development/lib/types/serializes-to.d.ts +13 -0
  114. package/dist/development/lib/types/utils.d.ts +11 -0
  115. package/dist/development/vendor/turbo-stream-v2/flatten.js +159 -0
  116. package/dist/development/vendor/turbo-stream-v2/turbo-stream.js +178 -0
  117. package/dist/development/vendor/turbo-stream-v2/unflatten.js +198 -0
  118. package/dist/development/vendor/turbo-stream-v2/utils.js +47 -0
  119. package/dist/production/dom-export.d.ts +6 -172
  120. package/dist/production/dom-export.js +12 -1007
  121. package/dist/production/index-react-server-client.d.ts +7 -4
  122. package/dist/production/index-react-server-client.js +8 -52
  123. package/dist/production/index-react-server.d.ts +1645 -1635
  124. package/dist/production/index-react-server.js +2871 -3642
  125. package/dist/production/index.d.ts +43 -1475
  126. package/dist/production/index.js +37 -2621
  127. package/dist/production/lib/actions.js +62 -0
  128. package/dist/production/lib/components.d.ts +1022 -0
  129. package/dist/production/lib/components.js +835 -0
  130. package/dist/production/lib/context.d.ts +83 -0
  131. package/dist/production/lib/context.js +41 -0
  132. package/dist/production/lib/dom/dom.d.ts +119 -0
  133. package/dist/production/lib/dom/dom.js +143 -0
  134. package/dist/production/lib/dom/lib.d.ts +2042 -0
  135. package/dist/production/lib/dom/lib.js +1259 -0
  136. package/dist/production/lib/dom/server.d.ts +138 -0
  137. package/dist/production/lib/dom/server.js +301 -0
  138. package/dist/production/lib/dom/ssr/components.d.ts +196 -0
  139. package/dist/production/lib/dom/ssr/components.js +579 -0
  140. package/dist/production/lib/dom/ssr/data.js +29 -0
  141. package/dist/production/lib/dom/ssr/entry.d.ts +59 -0
  142. package/dist/production/lib/dom/ssr/errorBoundaries.d.ts +27 -0
  143. package/dist/production/lib/dom/ssr/errorBoundaries.js +83 -0
  144. package/dist/production/lib/dom/ssr/errors.d.ts +7 -0
  145. package/dist/production/lib/dom/ssr/errors.js +36 -0
  146. package/dist/production/lib/dom/ssr/fallback.js +21 -0
  147. package/dist/production/lib/dom/ssr/fog-of-war.d.ts +12 -0
  148. package/dist/production/lib/dom/ssr/fog-of-war.js +170 -0
  149. package/dist/production/lib/dom/ssr/hydration.d.ts +32 -0
  150. package/dist/production/lib/dom/ssr/hydration.js +29 -0
  151. package/dist/production/lib/dom/ssr/invariant.js +16 -0
  152. package/dist/production/lib/dom/ssr/links.js +170 -0
  153. package/dist/production/lib/dom/ssr/markup.js +24 -0
  154. package/dist/production/lib/dom/ssr/routeModules.d.ts +206 -0
  155. package/dist/production/lib/dom/ssr/routeModules.js +31 -0
  156. package/dist/production/lib/dom/ssr/routes-test-stub.d.ts +62 -0
  157. package/dist/production/lib/dom/ssr/routes-test-stub.js +108 -0
  158. package/dist/production/lib/dom/ssr/routes.d.ts +33 -0
  159. package/dist/production/lib/dom/ssr/routes.js +303 -0
  160. package/dist/production/lib/dom/ssr/server.d.ts +45 -0
  161. package/dist/production/lib/dom/ssr/server.js +68 -0
  162. package/dist/production/lib/dom/ssr/single-fetch.d.ts +14 -0
  163. package/dist/production/lib/dom/ssr/single-fetch.js +346 -0
  164. package/dist/production/lib/dom-export/dom-router-provider.d.ts +9 -0
  165. package/dist/production/lib/dom-export/dom-router-provider.js +22 -0
  166. package/dist/production/lib/dom-export/hydrated-router.d.ts +125 -0
  167. package/dist/production/lib/dom-export/hydrated-router.js +153 -0
  168. package/dist/production/lib/errors.js +29 -0
  169. package/dist/production/lib/hooks.d.ts +947 -0
  170. package/dist/production/lib/hooks.js +1371 -0
  171. package/dist/production/lib/href.d.ts +20 -0
  172. package/dist/production/lib/href.js +50 -0
  173. package/dist/production/lib/router/history.d.ts +258 -0
  174. package/dist/production/lib/router/history.js +371 -0
  175. package/dist/production/lib/router/instrumentation.d.ts +86 -0
  176. package/dist/production/lib/router/instrumentation.js +213 -0
  177. package/dist/production/lib/router/links.d.ts +113 -0
  178. package/dist/production/lib/router/router.d.ts +663 -0
  179. package/dist/production/lib/router/router.js +2981 -0
  180. package/dist/production/lib/router/utils.d.ts +942 -0
  181. package/dist/production/lib/router/utils.js +782 -0
  182. package/dist/production/lib/rsc/browser.d.ts +137 -0
  183. package/dist/production/lib/rsc/browser.js +599 -0
  184. package/dist/production/lib/rsc/errorBoundaries.d.ts +11 -0
  185. package/dist/production/lib/rsc/errorBoundaries.js +90 -0
  186. package/dist/production/lib/rsc/html-stream/browser.d.ts +48 -0
  187. package/dist/production/lib/rsc/html-stream/browser.js +74 -0
  188. package/dist/production/lib/rsc/html-stream/server.js +78 -0
  189. package/dist/production/lib/rsc/route-modules.js +27 -0
  190. package/dist/production/lib/rsc/server.rsc.d.ts +219 -0
  191. package/dist/production/lib/rsc/server.ssr.d.ts +129 -0
  192. package/dist/production/lib/rsc/server.ssr.js +388 -0
  193. package/dist/production/lib/server-runtime/build.d.ts +66 -0
  194. package/dist/production/lib/server-runtime/cookies.d.ts +66 -0
  195. package/dist/production/lib/server-runtime/cookies.js +139 -0
  196. package/dist/production/lib/server-runtime/crypto.js +43 -0
  197. package/dist/production/lib/server-runtime/data.d.ts +13 -0
  198. package/dist/production/lib/server-runtime/data.js +25 -0
  199. package/dist/production/lib/server-runtime/dev.d.ts +9 -0
  200. package/dist/production/lib/server-runtime/dev.js +26 -0
  201. package/dist/production/lib/server-runtime/entry.js +20 -0
  202. package/dist/production/lib/server-runtime/errors.js +95 -0
  203. package/dist/production/lib/server-runtime/headers.js +73 -0
  204. package/dist/production/lib/server-runtime/invariant.js +19 -0
  205. package/dist/production/lib/server-runtime/mode.d.ts +12 -0
  206. package/dist/production/lib/server-runtime/mode.js +25 -0
  207. package/dist/production/lib/server-runtime/routeMatching.js +28 -0
  208. package/dist/production/lib/server-runtime/routes.d.ts +13 -0
  209. package/dist/production/lib/server-runtime/routes.js +74 -0
  210. package/dist/production/lib/server-runtime/server.d.ts +10 -0
  211. package/dist/production/lib/server-runtime/server.js +351 -0
  212. package/dist/production/lib/server-runtime/serverHandoff.js +17 -0
  213. package/dist/production/lib/server-runtime/sessions/cookieStorage.d.ts +25 -0
  214. package/dist/production/lib/server-runtime/sessions/cookieStorage.js +45 -0
  215. package/dist/production/lib/server-runtime/sessions/memoryStorage.d.ts +23 -0
  216. package/dist/production/lib/server-runtime/sessions/memoryStorage.js +52 -0
  217. package/dist/production/lib/server-runtime/sessions.d.ts +145 -0
  218. package/dist/production/lib/server-runtime/sessions.js +98 -0
  219. package/dist/production/lib/server-runtime/single-fetch.d.ts +7 -0
  220. package/dist/production/lib/server-runtime/single-fetch.js +215 -0
  221. package/dist/production/lib/server-runtime/urls.js +31 -0
  222. package/dist/production/lib/server-runtime/warnings.js +20 -0
  223. package/dist/production/lib/types/future.d.ts +9 -0
  224. package/dist/production/lib/types/internal.d.ts +26 -177
  225. package/dist/production/lib/types/internal.js +3 -2
  226. package/dist/{development/register-CNAx3TXj.d.ts → production/lib/types/register.d.ts} +9 -15
  227. package/dist/production/lib/types/route-data.d.ts +113 -0
  228. package/dist/production/lib/types/route-module-annotations.d.ts +149 -0
  229. package/dist/production/lib/types/route-module.d.ts +19 -0
  230. package/dist/production/lib/types/serializes-to.d.ts +13 -0
  231. package/dist/production/lib/types/utils.d.ts +11 -0
  232. package/dist/production/vendor/turbo-stream-v2/flatten.js +159 -0
  233. package/dist/production/vendor/turbo-stream-v2/turbo-stream.js +178 -0
  234. package/dist/production/vendor/turbo-stream-v2/unflatten.js +198 -0
  235. package/dist/production/vendor/turbo-stream-v2/utils.js +47 -0
  236. package/docs/explanation/backend-for-frontend.md +50 -0
  237. package/docs/explanation/code-splitting.md +77 -0
  238. package/docs/explanation/concurrency.md +135 -0
  239. package/docs/explanation/form-vs-fetcher.md +292 -0
  240. package/docs/explanation/hot-module-replacement.md +137 -0
  241. package/docs/explanation/hydration.md +14 -0
  242. package/docs/explanation/index-query-param.md +86 -0
  243. package/docs/explanation/index.md +4 -0
  244. package/docs/explanation/lazy-route-discovery.md +78 -0
  245. package/docs/explanation/location.md +6 -0
  246. package/docs/explanation/progressive-enhancement.md +150 -0
  247. package/docs/explanation/race-conditions.md +88 -0
  248. package/docs/explanation/react-transitions.md +160 -0
  249. package/docs/explanation/route-matching.md +7 -0
  250. package/docs/explanation/server-client-execution.md +4 -0
  251. package/docs/explanation/sessions-and-cookies.md +465 -0
  252. package/docs/explanation/special-files.md +16 -0
  253. package/docs/explanation/state-management.md +524 -0
  254. package/docs/explanation/styling.md +87 -0
  255. package/docs/explanation/type-safety.md +82 -0
  256. package/docs/how-to/accessibility.md +44 -0
  257. package/docs/how-to/client-data.md +199 -0
  258. package/docs/how-to/data-strategy.md +317 -0
  259. package/docs/how-to/error-boundary.md +231 -0
  260. package/docs/how-to/error-reporting.md +134 -0
  261. package/docs/how-to/fetchers.md +307 -0
  262. package/docs/how-to/file-route-conventions.md +410 -0
  263. package/docs/how-to/file-uploads.md +217 -0
  264. package/docs/how-to/form-validation.md +120 -0
  265. package/docs/how-to/headers.md +164 -0
  266. package/docs/how-to/index.md +4 -0
  267. package/docs/how-to/instrumentation.md +556 -0
  268. package/docs/how-to/meta.md +40 -0
  269. package/docs/how-to/middleware.md +728 -0
  270. package/docs/how-to/navigation-blocking.md +233 -0
  271. package/docs/how-to/optimize-revalidation.md +12 -0
  272. package/docs/how-to/pre-rendering.md +225 -0
  273. package/docs/how-to/presets.md +103 -0
  274. package/docs/how-to/react-server-components.md +899 -0
  275. package/docs/how-to/resource-routes.md +126 -0
  276. package/docs/how-to/route-module-type-safety.md +100 -0
  277. package/docs/how-to/search-params.md +4 -0
  278. package/docs/how-to/security.md +30 -0
  279. package/docs/how-to/server-bundles.md +66 -0
  280. package/docs/how-to/spa.md +120 -0
  281. package/docs/how-to/status.md +63 -0
  282. package/docs/how-to/suspense.md +132 -0
  283. package/docs/how-to/using-handle.md +117 -0
  284. package/docs/how-to/view-transitions.md +237 -0
  285. package/docs/how-to/webhook.md +50 -0
  286. package/docs/index.md +39 -0
  287. package/docs/start/data/actions.md +138 -0
  288. package/docs/start/data/custom.md +198 -0
  289. package/docs/start/data/data-loading.md +44 -0
  290. package/docs/start/data/index.md +4 -0
  291. package/docs/start/data/installation.md +52 -0
  292. package/docs/start/data/navigating.md +12 -0
  293. package/docs/start/data/pending-ui.md +12 -0
  294. package/docs/start/data/route-object.md +248 -0
  295. package/docs/start/data/routing.md +281 -0
  296. package/docs/start/data/testing.md +8 -0
  297. package/docs/start/declarative/index.md +4 -0
  298. package/docs/start/declarative/installation.md +43 -0
  299. package/docs/start/declarative/navigating.md +133 -0
  300. package/docs/start/declarative/routing.md +237 -0
  301. package/docs/start/declarative/url-values.md +65 -0
  302. package/docs/start/framework/actions.md +175 -0
  303. package/docs/start/framework/data-loading.md +201 -0
  304. package/docs/start/framework/deploying.md +96 -0
  305. package/docs/start/framework/index.md +4 -0
  306. package/docs/start/framework/installation.md +42 -0
  307. package/docs/start/framework/navigating.md +182 -0
  308. package/docs/start/framework/pending-ui.md +142 -0
  309. package/docs/start/framework/rendering.md +59 -0
  310. package/docs/start/framework/route-module.md +527 -0
  311. package/docs/start/framework/routing.md +362 -0
  312. package/docs/start/framework/testing.md +133 -0
  313. package/docs/start/index.md +4 -0
  314. package/docs/start/modes.md +201 -0
  315. package/docs/upgrading/component-routes.md +363 -0
  316. package/docs/upgrading/future.md +31 -0
  317. package/docs/upgrading/index.md +4 -0
  318. package/docs/upgrading/remix.md +403 -0
  319. package/docs/upgrading/router-provider.md +442 -0
  320. package/docs/upgrading/v6.md +379 -0
  321. package/package.json +44 -87
  322. package/dist/development/browser-D3uq9sI1.d.ts +0 -318
  323. package/dist/development/browser-nIQ4Nsyi.d.mts +0 -318
  324. package/dist/development/chunk-IBI7OMNB.js +0 -1363
  325. package/dist/development/chunk-QUQL4437.mjs +0 -11529
  326. package/dist/development/chunk-S54KXAEJ.mjs +0 -2585
  327. package/dist/development/chunk-SRID2YZ2.js +0 -10229
  328. package/dist/development/chunk-XEJDWL2B.js +0 -188
  329. package/dist/development/context-m8rizgnE.d.mts +0 -1771
  330. package/dist/development/data-D4xhSy90.d.ts +0 -1732
  331. package/dist/development/data-U8FS-wNn.d.mts +0 -1732
  332. package/dist/development/dom-export.d.mts +0 -172
  333. package/dist/development/dom-export.mjs +0 -1008
  334. package/dist/development/index-react-server-client-BLiUx67a.d.ts +0 -3655
  335. package/dist/development/index-react-server-client-CdKROblb.d.mts +0 -2600
  336. package/dist/development/index-react-server-client.d.mts +0 -4
  337. package/dist/development/index-react-server-client.mjs +0 -59
  338. package/dist/development/index-react-server.d.mts +0 -2703
  339. package/dist/development/index-react-server.mjs +0 -3780
  340. package/dist/development/index.d.mts +0 -1478
  341. package/dist/development/index.mjs +0 -277
  342. package/dist/development/instrumentation-1q4YhLGP.d.ts +0 -715
  343. package/dist/development/lib/types/internal.d.mts +0 -184
  344. package/dist/development/lib/types/internal.mjs +0 -10
  345. package/dist/development/register-CqK96Zfk.d.mts +0 -30
  346. package/dist/production/browser-D3uq9sI1.d.ts +0 -318
  347. package/dist/production/browser-nIQ4Nsyi.d.mts +0 -318
  348. package/dist/production/chunk-EAQNHM3N.js +0 -188
  349. package/dist/production/chunk-NALGHHKE.mjs +0 -2585
  350. package/dist/production/chunk-Q65P7S7Y.mjs +0 -11529
  351. package/dist/production/chunk-SKEDDLRM.js +0 -1363
  352. package/dist/production/chunk-Y7DNFQZP.js +0 -10229
  353. package/dist/production/context-m8rizgnE.d.mts +0 -1771
  354. package/dist/production/data-D4xhSy90.d.ts +0 -1732
  355. package/dist/production/data-U8FS-wNn.d.mts +0 -1732
  356. package/dist/production/dom-export.d.mts +0 -172
  357. package/dist/production/dom-export.mjs +0 -1008
  358. package/dist/production/index-react-server-client-BLiUx67a.d.ts +0 -3655
  359. package/dist/production/index-react-server-client-CdKROblb.d.mts +0 -2600
  360. package/dist/production/index-react-server-client.d.mts +0 -4
  361. package/dist/production/index-react-server-client.mjs +0 -59
  362. package/dist/production/index-react-server.d.mts +0 -2703
  363. package/dist/production/index-react-server.mjs +0 -3780
  364. package/dist/production/index.d.mts +0 -1478
  365. package/dist/production/index.mjs +0 -277
  366. package/dist/production/instrumentation-1q4YhLGP.d.ts +0 -715
  367. package/dist/production/lib/types/internal.d.mts +0 -184
  368. package/dist/production/lib/types/internal.mjs +0 -10
  369. package/dist/production/register-CqK96Zfk.d.mts +0 -30
package/docs/how-to/using-handle.md ADDED
@@ -0,0 +1,117 @@
1
+ ---
2
+ title: Using handle
3
+ ---
4
+
5
+ # Using `handle`
6
+
7
+ [MODES: framework]
8
+
9
+ <br/>
10
+ <br/>
11
+
12
+ You can build dynamic UI elements like breadcrumbs based on your route hierarchy using the [`useMatches`][use-matches] hook and [`handle`][handle] route exports.
13
+
14
+ ## Understanding the Basics
15
+
16
+ React Router provides access to all route matches and their data throughout your component tree. This allows routes to contribute metadata through the `handle` export that can be rendered by ancestor components.
17
+
18
+ The `useMatches` hook combined with `handle` exports enables routes to contribute to rendering processes higher up the component tree than their actual render point. While we'll use breadcrumbs as an example, this pattern works for any scenario where you need routes to provide additional information to their ancestors.
19
+
20
+ ## Defining Route `handle`s
21
+
22
+ We'll use a route structure like the following:
23
+
24
+ ```ts filename=app/routes.ts
25
+ import { route } from "@react-router/dev/routes";
26
+
27
+ export default [
28
+ route("parent", "./routes/parent.tsx", [
29
+ route("child", "./routes/child.tsx"),
30
+ ]),
31
+ ] satisfies RouteConfig;
32
+ ```
33
+
34
+ Add a `breadcrumb` property to the "parent" route's `handle` export. You can name this property whatever makes sense for your use case.
35
+
36
+ ```tsx filename=app/routes/parent.tsx
37
+ import { Link } from "react-router";
38
+
39
+ export const handle = {
40
+ breadcrumb: () => <Link to="/parent">Some Route</Link>,
41
+ };
42
+ ```
43
+
44
+ You can define breadcrumbs for child routes as well:
45
+
46
+ ```tsx filename=app/routes/child.tsx
47
+ import { Link } from "react-router";
48
+
49
+ export const handle = {
50
+ breadcrumb: () => (
51
+ <Link to="/parent/child">Child Route</Link>
52
+ ),
53
+ };
54
+ ```
55
+
56
+ ## Using Route `handle`s
57
+
58
+ Use the `useMatches` hook in your root layout or any ancestor component to collect and render the components defined in the `handle` export(s):
59
+
60
+ ```tsx filename=app/root.tsx lines=[7,11,22-31]
61
+ import {
62
+ Links,
63
+ Meta,
64
+ Outlet,
65
+ Scripts,
66
+ ScrollRestoration,
67
+ useMatches,
68
+ } from "react-router";
69
+
70
+ export function Layout({ children }) {
71
+ const matches = useMatches();
72
+
73
+ return (
74
+ <html lang="en">
75
+ <head>
76
+ <Meta />
77
+ <Links />
78
+ </head>
79
+ <body>
80
+ <header>
81
+ <ol>
82
+ {matches
83
+ .filter(
84
+ (match) =>
85
+ match.handle && match.handle.breadcrumb,
86
+ )
87
+ .map((match, index) => (
88
+ <li key={index}>
89
+ {match.handle.breadcrumb(match)}
90
+ </li>
91
+ ))}
92
+ </ol>
93
+ </header>
94
+ {children}
95
+ <ScrollRestoration />
96
+ <Scripts />
97
+ </body>
98
+ </html>
99
+ );
100
+ }
101
+
102
+ export default function App() {
103
+ return <Outlet />;
104
+ }
105
+ ```
106
+
107
+ The `match` object is passed to each breadcrumb function, giving you access to `match.data` (from loaders) and other route information to create dynamic breadcrumbs based on your route's data.
108
+
109
+ This pattern provides a clean way for routes to contribute metadata that can be consumed and rendered by ancestor components.
110
+
111
+ ## Additional Resources
112
+
113
+ - [`useMatches`][use-matches]
114
+ - [`handle`][handle]
115
+
116
+ [use-matches]: ../api/hooks/useMatches
117
+ [handle]: ../start/framework/route-module#handle
package/docs/how-to/view-transitions.md ADDED
@@ -0,0 +1,237 @@
1
+ ---
2
+ title: View Transitions
3
+ ---
4
+
5
+ # View Transitions
6
+
7
+ [MODES: framework, data]
8
+
9
+ <br/>
10
+ <br/>
11
+
12
+ Enable smooth animations between page transitions in your React Router applications using the [View Transitions API][view-transitions-api]. This feature allows you to create seamless visual transitions during client-side navigation.
13
+
14
+ ## Basic View Transition
15
+
16
+ ### 1. Enable view transitions on navigation
17
+
18
+ The simplest way to enable view transitions is by adding the `viewTransition` prop to your `Link`, `NavLink`, or `Form` components. This automatically wraps the navigation update in `document.startViewTransition()`.
19
+
20
+ ```tsx
21
+ <Link to="/about" viewTransition>
22
+ About
23
+ </Link>
24
+ ```
25
+
26
+ Without any additional CSS, this provides a basic cross-fade animation between pages.
27
+
28
+ ### 2. Enable view transitions with programmatic navigation
29
+
30
+ When using programmatic navigation with the `useNavigate` hook, you can enable view transitions by passing the `viewTransition: true` option:
31
+
32
+ ```tsx
33
+ import { useNavigate } from "react-router";
34
+
35
+ function NavigationButton() {
36
+ const navigate = useNavigate();
37
+
38
+ return (
39
+ <button
40
+ onClick={() =>
41
+ navigate("/about", { viewTransition: true })
42
+ }
43
+ >
44
+ About
45
+ </button>
46
+ );
47
+ }
48
+ ```
49
+
50
+ This provides the same cross-fade animation as using the `viewTransition` prop on Link components.
51
+
52
+ For more information on using the View Transitions API, please refer to the ["Smooth transitions with the View Transition API" guide][view-transitions-guide] from the Google Chrome team.
53
+
54
+ ## Image Gallery Example
55
+
56
+ Let's build an image gallery that demonstrates how to trigger and use view transitions. We'll create a list of images that expand into a detail view with smooth animations.
57
+
58
+ ### 1. Create the image gallery route
59
+
60
+ ```tsx filename=routes/image-gallery.tsx
61
+ import { NavLink } from "react-router";
62
+
63
+ export const images = [
64
+ "https://remix.run/blog-images/headers/the-future-is-now.jpg",
65
+ "https://remix.run/blog-images/headers/waterfall.jpg",
66
+ "https://remix.run/blog-images/headers/webpack.png",
67
+ // ... more images ...
68
+ ];
69
+
70
+ export default function ImageGalleryRoute() {
71
+ return (
72
+ <div className="image-list">
73
+ <h1>Image List</h1>
74
+ <div>
75
+ {images.map((src, idx) => (
76
+ <NavLink
77
+ key={src}
78
+ to={`/image/${idx}`}
79
+ viewTransition // Enable view transitions for this link
80
+ >
81
+ <p>Image Number {idx}</p>
82
+ <img
83
+ className="max-w-full contain-layout"
84
+ src={src}
85
+ />
86
+ </NavLink>
87
+ ))}
88
+ </div>
89
+ </div>
90
+ );
91
+ }
92
+ ```
93
+
94
+ ### 2. Add transition styles
95
+
96
+ Define view transition names and animations for elements that should transition smoothly between routes.
97
+
98
+ ```css filename=app.css
99
+ /* Layout styles for the image grid */
100
+ .image-list > div {
101
+ display: grid;
102
+ grid-template-columns: repeat(4, 1fr);
103
+ column-gap: 10px;
104
+ }
105
+
106
+ .image-list h1 {
107
+ font-size: 2rem;
108
+ font-weight: 600;
109
+ }
110
+
111
+ .image-list img {
112
+ max-width: 100%;
113
+ contain: layout;
114
+ }
115
+
116
+ .image-list p {
117
+ width: fit-content;
118
+ }
119
+
120
+ /* Assign transition names to elements during navigation */
121
+ .image-list a.transitioning img {
122
+ view-transition-name: image-expand;
123
+ }
124
+
125
+ .image-list a.transitioning p {
126
+ view-transition-name: image-title;
127
+ }
128
+ ```
129
+
130
+ ### 3. Create the image detail route
131
+
132
+ The detail view needs to use the same view transition names to create a seamless animation.
133
+
134
+ ```tsx filename=routes/image-details.tsx
135
+ import { Link } from "react-router";
136
+ import { images } from "./home";
137
+ import type { Route } from "./+types/image-details";
138
+
139
+ export default function ImageDetailsRoute({
140
+ params,
141
+ }: Route.ComponentProps) {
142
+ return (
143
+ <div className="image-detail">
144
+ <Link to="/" viewTransition>
145
+ Back
146
+ </Link>
147
+ <h1>Image Number {params.id}</h1>
148
+ <img src={images[Number(params.id)]} />
149
+ </div>
150
+ );
151
+ }
152
+ ```
153
+
154
+ ### 4. Add matching transition styles for the detail view
155
+
156
+ ```css filename=app.css
157
+ /* Match transition names from the list view */
158
+ .image-detail h1 {
159
+ font-size: 2rem;
160
+ font-weight: 600;
161
+ width: fit-content;
162
+ view-transition-name: image-title;
163
+ }
164
+
165
+ .image-detail img {
166
+ max-width: 100%;
167
+ contain: layout;
168
+ view-transition-name: image-expand;
169
+ }
170
+ ```
171
+
172
+ ## Advanced Usage
173
+
174
+ You can control view transitions more precisely using either render props or the `useViewTransitionState` hook.
175
+
176
+ ### 1. Using render props
177
+
178
+ ```tsx filename=routes/image-gallery.tsx
179
+ <NavLink to={`/image/${idx}`} viewTransition>
180
+ {({ isTransitioning }) => (
181
+ <>
182
+ <p
183
+ style={{
184
+ viewTransitionName: isTransitioning
185
+ ? "image-title"
186
+ : "none",
187
+ }}
188
+ >
189
+ Image Number {idx}
190
+ </p>
191
+ <img
192
+ src={src}
193
+ style={{
194
+ viewTransitionName: isTransitioning
195
+ ? "image-expand"
196
+ : "none",
197
+ }}
198
+ />
199
+ </>
200
+ )}
201
+ </NavLink>
202
+ ```
203
+
204
+ ### 2. Using the `useViewTransitionState` hook
205
+
206
+ ```tsx filename=routes/image-gallery.tsx
207
+ function NavImage(props: { src: string; idx: number }) {
208
+ const href = `/image/${props.idx}`;
209
+ // Hook provides transition state for specific route
210
+ const isTransitioning = useViewTransitionState(href);
211
+
212
+ return (
213
+ <Link to={href} viewTransition>
214
+ <p
215
+ style={{
216
+ viewTransitionName: isTransitioning
217
+ ? "image-title"
218
+ : "none",
219
+ }}
220
+ >
221
+ Image Number {props.idx}
222
+ </p>
223
+ <img
224
+ src={props.src}
225
+ style={{
226
+ viewTransitionName: isTransitioning
227
+ ? "image-expand"
228
+ : "none",
229
+ }}
230
+ />
231
+ </Link>
232
+ );
233
+ }
234
+ ```
235
+
236
+ [view-transitions-api]: https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition
237
+ [view-transitions-guide]: https://developer.chrome.com/docs/web-platform/view-transitions
package/docs/how-to/webhook.md ADDED
@@ -0,0 +1,50 @@
1
+ ---
2
+ title: Webhooks
3
+ # can make a quick how-to on creating a webhook, this was copy/pasted from another doc, needs to be reviewed first
4
+ hidden: true
5
+ ---
6
+
7
+ # Webhooks
8
+
9
+ Resource routes can be used to handle webhooks. For example, you can create a webhook that receives notifications from GitHub when a new commit is pushed to a repository:
10
+
11
+ ```tsx
12
+ import type { Route } from "./+types/github";
13
+
14
+ import crypto from "node:crypto";
15
+
16
+ export const action = async ({
17
+ request,
18
+ }: Route.ActionArgs) => {
19
+ if (request.method !== "POST") {
20
+ return Response.json(
21
+ { message: "Method not allowed" },
22
+ {
23
+ status: 405,
24
+ },
25
+ );
26
+ }
27
+ const payload = await request.json();
28
+
29
+ /* Validate the webhook */
30
+ const signature = request.headers.get(
31
+ "X-Hub-Signature-256",
32
+ );
33
+ const generatedSignature = `sha256=${crypto
34
+ .createHmac("sha256", process.env.GITHUB_WEBHOOK_SECRET)
35
+ .update(JSON.stringify(payload))
36
+ .digest("hex")}`;
37
+ if (signature !== generatedSignature) {
38
+ return Response.json(
39
+ { message: "Signature mismatch" },
40
+ {
41
+ status: 401,
42
+ },
43
+ );
44
+ }
45
+
46
+ /* process the webhook (e.g. enqueue a background job) */
47
+
48
+ return Response.json({ success: true });
49
+ };
50
+ ```
package/docs/index.md ADDED
@@ -0,0 +1,39 @@
1
+ ---
2
+ title: React Router Home
3
+ order: 1
4
+ ---
5
+
6
+ # React Router Home
7
+
8
+ React Router is a multi-strategy router for React bridging the gap from React 18 to React 19. You can use it maximally as a React framework or as minimally as you want.
9
+
10
+ ## Getting Started
11
+
12
+ There are three primary ways, or "modes", to use it in your app, so there are three guides to get you started.
13
+
14
+ - [Declarative](./start/declarative/installation)
15
+ - [Data](./start/data/installation)
16
+ - [Framework](./start/framework/installation)
17
+
18
+ Learn which mode is right for you in [Picking a Mode](./start/modes).
19
+
20
+ ## Using These Guides
21
+
22
+ Across the docs you'll see the following icons:
23
+
24
+ [MODES: framework, data, declarative]
25
+
26
+ <p></p>
27
+
28
+ These icons indicate which mode the content is relevant to.
29
+
30
+ Additional auto-generated reference documentation is available:
31
+
32
+ [Autogenerated Reference Docs ↗](https://api.reactrouter.com/v7/)
33
+
34
+ ## Upgrading
35
+
36
+ If you are caught up on future flags, upgrading from React Router v6 or Remix v2 is generally non-breaking. Remix v2 apps are encouraged to upgrade to React Router v7.
37
+
38
+ - [Upgrade from v6](./upgrading/v6)
39
+ - [Upgrade from Remix](./upgrading/remix)
package/docs/start/data/actions.md ADDED
@@ -0,0 +1,138 @@
1
+ ---
2
+ title: Actions
3
+ order: 5
4
+ ---
5
+
6
+ # Actions
7
+
8
+ [MODES: data]
9
+
10
+ ## Defining Actions
11
+
12
+ Data mutations are done through Route actions defined on the `action` property of a route object. When the action completes, all loader data on the page is revalidated to keep your UI in sync with the data without writing any code to do it.
13
+
14
+ ```tsx
15
+ import { createBrowserRouter } from "react-router";
16
+ import { someApi } from "./api";
17
+
18
+ let router = createBrowserRouter([
19
+ {
20
+ path: "/projects/:projectId",
21
+ Component: Project,
22
+ action: async ({ request }) => {
23
+ let formData = await request.formData();
24
+ let title = formData.get("title");
25
+ let project = await someApi.updateProject({ title });
26
+ return project;
27
+ },
28
+ },
29
+ ]);
30
+ ```
31
+
32
+ ## Calling Actions
33
+
34
+ Actions are called declaratively through `<Form>` and imperatively through `useSubmit` (or `<fetcher.Form>` and `fetcher.submit`) by referencing the route's path and a "post" method.
35
+
36
+ ### Calling actions with a Form
37
+
38
+ ```tsx
39
+ import { Form } from "react-router";
40
+
41
+ function SomeComponent() {
42
+ return (
43
+ <Form action="/projects/123" method="post">
44
+ <input type="text" name="title" />
45
+ <button type="submit">Submit</button>
46
+ </Form>
47
+ );
48
+ }
49
+ ```
50
+
51
+ This will cause a navigation and a new entry will be added to the browser history.
52
+
53
+ ### Calling actions with useSubmit
54
+
55
+ You can submit form data to an action imperatively with `useSubmit`.
56
+
57
+ ```tsx
58
+ import { useCallback } from "react";
59
+ import { useSubmit } from "react-router";
60
+ import { useFakeTimer } from "fake-lib";
61
+
62
+ function useQuizTimer() {
63
+ let submit = useSubmit();
64
+
65
+ let cb = useCallback(() => {
66
+ submit(
67
+ { quizTimedOut: true },
68
+ { action: "/end-quiz", method: "post" },
69
+ );
70
+ }, []);
71
+
72
+ let tenMinutes = 10 * 60 * 1000;
73
+ useFakeTimer(tenMinutes, cb);
74
+ }
75
+ ```
76
+
77
+ This will cause a navigation and a new entry will be added to the browser history.
78
+
79
+ ### Calling actions with a fetcher
80
+
81
+ Fetchers allow you to submit data to actions (and loaders) without causing a navigation (no new entries in the browser history).
82
+
83
+ ```tsx
84
+ import { useFetcher } from "react-router";
85
+
86
+ function Task() {
87
+ let fetcher = useFetcher();
88
+ let busy = fetcher.state !== "idle";
89
+
90
+ return (
91
+ <fetcher.Form method="post" action="/update-task/123">
92
+ <input type="text" name="title" />
93
+ <button type="submit">
94
+ {busy ? "Saving..." : "Save"}
95
+ </button>
96
+ </fetcher.Form>
97
+ );
98
+ }
99
+ ```
100
+
101
+ They also have the imperative `submit` method.
102
+
103
+ ```tsx
104
+ fetcher.submit(
105
+ { title: "New Title" },
106
+ { action: "/update-task/123", method: "post" },
107
+ );
108
+ ```
109
+
110
+ See the [Using Fetchers][fetchers] guide for more information.
111
+
112
+ ## Accessing Action Data
113
+
114
+ Actions can return data available through `useActionData` in the route component or `fetcher.data` when using a fetcher.
115
+
116
+ ```tsx
117
+ function Project() {
118
+ let actionData = useActionData();
119
+ return (
120
+ <div>
121
+ <h1>Project</h1>
122
+ <Form method="post">
123
+ <input type="text" name="title" />
124
+ <button type="submit">Submit</button>
125
+ </Form>
126
+ {actionData ? (
127
+ <p>{actionData.title} updated</p>
128
+ ) : null}
129
+ </div>
130
+ );
131
+ }
132
+ ```
133
+
134
+ ---
135
+
136
+ Next: [Navigating](./navigating)
137
+
138
+ [fetchers]: ../../how-to/fetchers