From 1b18f270fbc60702ede7fc5fb97e19a63daa5305 Mon Sep 17 00:00:00 2001 From: "1058039938@qq.com" Date: Sun, 23 Apr 2023 14:33:00 +0800 Subject: [PATCH] Updates --- asset-manifest.json | 15 ++++++ favicon.ico | Bin 0 -> 3870 bytes index.html | 1 + logo192.png | Bin 0 -> 5347 bytes logo512.png | Bin 0 -> 9664 bytes manifest.json | 25 +++++++++ robots.txt | 3 ++ static/css/main.7b633a43.css | 2 + static/css/main.7b633a43.css.map | 1 + static/js/787.bc7d429a.chunk.js | 2 + static/js/787.bc7d429a.chunk.js.map | 1 + static/js/main.e7c2d0bc.js | 3 ++ static/js/main.e7c2d0bc.js.LICENSE.txt | 72 +++++++++++++++++++++++++ static/js/main.e7c2d0bc.js.map | 1 + 14 files changed, 126 insertions(+) create mode 100644 asset-manifest.json create mode 100644 favicon.ico create mode 100644 index.html create mode 100644 logo192.png create mode 100644 logo512.png create mode 100644 manifest.json create mode 100644 robots.txt create mode 100644 static/css/main.7b633a43.css create mode 100644 static/css/main.7b633a43.css.map create mode 100644 static/js/787.bc7d429a.chunk.js create mode 100644 static/js/787.bc7d429a.chunk.js.map create mode 100644 static/js/main.e7c2d0bc.js create mode 100644 static/js/main.e7c2d0bc.js.LICENSE.txt create mode 100644 static/js/main.e7c2d0bc.js.map diff --git a/asset-manifest.json b/asset-manifest.json new file mode 100644 index 0000000..83d3ce8 --- /dev/null +++ b/asset-manifest.json @@ -0,0 +1,15 @@ +{ + "files": { + "main.css": "/study-react/static/css/main.7b633a43.css", + "main.js": "/study-react/static/js/main.e7c2d0bc.js", + "static/js/787.bc7d429a.chunk.js": "/study-react/static/js/787.bc7d429a.chunk.js", + "index.html": "/study-react/index.html", + "main.7b633a43.css.map": "/study-react/static/css/main.7b633a43.css.map", + "main.e7c2d0bc.js.map": "/study-react/static/js/main.e7c2d0bc.js.map", + "787.bc7d429a.chunk.js.map": "/study-react/static/js/787.bc7d429a.chunk.js.map" + }, + "entrypoints": [ + "static/css/main.7b633a43.css", + "static/js/main.e7c2d0bc.js" + ] +} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..a11777cc471a4344702741ab1c8a588998b1311a GIT binary patch literal 3870 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..3741cc0 --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +React App
\ No newline at end of file diff --git a/logo192.png b/logo192.png new file mode 100644 index 0000000000000000000000000000000000000000..fc44b0a3796c0e0a64c3d858ca038bd4570465d9 GIT binary patch literal 5347 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 b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN literal 0 HcmV?d00001 diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/static/css/main.7b633a43.css b/static/css/main.7b633a43.css new file mode 100644 index 0000000..58662a6 --- /dev/null +++ b/static/css/main.7b633a43.css @@ -0,0 +1,2 @@ +html{width:100%}body,html{height:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}h3,h4,h5,h6{margin:10px 0}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}#root{flex:1 1}.page{display:flex;flex-direction:column;height:100%}.page-body{flex:1 1} +/*# sourceMappingURL=main.7b633a43.css.map*/ \ No newline at end of file diff --git a/static/css/main.7b633a43.css.map b/static/css/main.7b633a43.css.map new file mode 100644 index 0000000..6320089 --- /dev/null +++ b/static/css/main.7b633a43.css.map @@ -0,0 +1 @@ +{"version":3,"file":"static/css/main.7b633a43.css","mappings":"AAAA,KACE,UAEF,CACA,UAFE,WAcF,CAZA,KAKE,kCAAmC,CACnC,iCAAkC,CAIlC,YAAa,CACb,qBAAsB,CATtB,mIAEY,CAHZ,QAWF,CAEA,KACE,uEAEF,CAGA,YACE,aACF,CC1BA,KACE,iBACF,CAEA,UACE,aAAc,CACd,mBACF,CAEA,8CACE,UACE,mDAA4C,CAA5C,2CACF,CACF,CAEA,YAKE,kBAAmB,CAJnB,wBAAyB,CAOzB,UAAY,CALZ,YAAa,CACb,qBAAsB,CAGtB,4BAA6B,CAD7B,sBAAuB,CAJvB,gBAOF,CAEA,UACE,aACF,CAEA,iCACE,GACE,8BAAuB,CAAvB,sBACF,CACA,GACE,+BAAyB,CAAzB,uBACF,CACF,CAPA,yBACE,GACE,8BAAuB,CAAvB,sBACF,CACA,GACE,+BAAyB,CAAzB,uBACF,CACF,CAGA,MACE,QACF,CACA,MAEE,YAAa,CACb,qBAAsB,CAFtB,WAGF,CACA,WACE,QACF","sources":["index.css","App.css"],"sourcesContent":["html {\r\n width: 100%;\r\n height: 100%;\r\n}\r\nbody {\r\n margin: 0;\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\r\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\r\n sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n\r\n\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\ncode {\r\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\r\n monospace;\r\n}\r\n\r\n\r\nh3, h4, h5, h6 {\r\n margin: 10px 0;\r\n}",".App {\r\n text-align: center;\r\n}\r\n\r\n.App-logo {\r\n height: 40vmin;\r\n pointer-events: none;\r\n}\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n .App-logo {\r\n animation: App-logo-spin infinite 20s linear;\r\n }\r\n}\r\n\r\n.App-header {\r\n background-color: #282c34;\r\n min-height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: calc(10px + 2vmin);\r\n color: white;\r\n}\r\n\r\n.App-link {\r\n color: #61dafb;\r\n}\r\n\r\n@keyframes App-logo-spin {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n\r\n#root {\r\n flex: 1;\r\n}\r\n.page {\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.page-body {\r\n flex: 1;\r\n}\r\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/static/js/787.bc7d429a.chunk.js b/static/js/787.bc7d429a.chunk.js new file mode 100644 index 0000000..9ae7627 --- /dev/null +++ b/static/js/787.bc7d429a.chunk.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkmy_react_app=self.webpackChunkmy_react_app||[]).push([[787],{787:function(e,t,n){n.r(t),n.d(t,{getCLS:function(){return y},getFCP:function(){return g},getFID:function(){return C},getLCP:function(){return P},getTTFB:function(){return D}});var i,r,a,o,u=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},f=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},s=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},m=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},v=-1,p=function(){return"hidden"===document.visibilityState?0:1/0},d=function(){f((function(e){var t=e.timeStamp;v=t}),!0)},l=function(){return v<0&&(v=p(),d(),s((function(){setTimeout((function(){v=p(),d()}),0)}))),{get firstHiddenTime(){return v}}},g=function(e,t){var n,i=l(),r=u("FCP"),a=function(e){"first-contentful-paint"===e.name&&(f&&f.disconnect(),e.startTime-1&&e(t)},r=u("CLS",0),a=0,o=[],v=function(e){if(!e.hadRecentInput){var t=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,n())}},p=c("layout-shift",v);p&&(n=m(i,r,t),f((function(){p.takeRecords().map(v),n(!0)})),s((function(){a=0,T=-1,r=u("CLS",0),n=m(i,r,t)})))},E={passive:!0,capture:!0},w=new Date,L=function(e,t){i||(i=t,r=e,a=new Date,F(removeEventListener),S())},S=function(){if(r>=0&&r1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){L(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",n,E),addEventListener("pointercancel",i,E)}(t,e):L(t,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,b,E)}))},C=function(e,t){var n,a=l(),v=u("FID"),p=function(e){e.startTimeperformance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))}}}]); +//# sourceMappingURL=787.bc7d429a.chunk.js.map \ No newline at end of file diff --git a/static/js/787.bc7d429a.chunk.js.map b/static/js/787.bc7d429a.chunk.js.map new file mode 100644 index 0000000..3520c53 --- /dev/null +++ b/static/js/787.bc7d429a.chunk.js.map @@ -0,0 +1 @@ +{"version":3,"file":"static/js/787.bc7d429a.chunk.js","mappings":"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","sources":["../node_modules/web-vitals/dist/web-vitals.js"],"sourcesContent":["var e,t,n,i,r=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:\"v2-\".concat(Date.now(),\"-\").concat(Math.floor(8999999999999*Math.random())+1e12)}},a=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if(\"first-input\"===e&&!(\"PerformanceEventTiming\"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},o=function(e,t){var n=function n(i){\"pagehide\"!==i.type&&\"hidden\"!==document.visibilityState||(e(i),t&&(removeEventListener(\"visibilitychange\",n,!0),removeEventListener(\"pagehide\",n,!0)))};addEventListener(\"visibilitychange\",n,!0),addEventListener(\"pagehide\",n,!0)},u=function(e){addEventListener(\"pageshow\",(function(t){t.persisted&&e(t)}),!0)},c=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},f=-1,s=function(){return\"hidden\"===document.visibilityState?0:1/0},m=function(){o((function(e){var t=e.timeStamp;f=t}),!0)},v=function(){return f<0&&(f=s(),m(),u((function(){setTimeout((function(){f=s(),m()}),0)}))),{get firstHiddenTime(){return f}}},d=function(e,t){var n,i=v(),o=r(\"FCP\"),f=function(e){\"first-contentful-paint\"===e.name&&(m&&m.disconnect(),e.startTime-1&&e(t)},f=r(\"CLS\",0),s=0,m=[],v=function(e){if(!e.hadRecentInput){var t=m[0],i=m[m.length-1];s&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(s+=e.value,m.push(e)):(s=e.value,m=[e]),s>f.value&&(f.value=s,f.entries=m,n())}},h=a(\"layout-shift\",v);h&&(n=c(i,f,t),o((function(){h.takeRecords().map(v),n(!0)})),u((function(){s=0,l=-1,f=r(\"CLS\",0),n=c(i,f,t)})))},T={passive:!0,capture:!0},y=new Date,g=function(i,r){e||(e=r,t=i,n=new Date,w(removeEventListener),E())},E=function(){if(t>=0&&t1e12?new Date:performance.now())-e.timeStamp;\"pointerdown\"==e.type?function(e,t){var n=function(){g(e,t),r()},i=function(){r()},r=function(){removeEventListener(\"pointerup\",n,T),removeEventListener(\"pointercancel\",i,T)};addEventListener(\"pointerup\",n,T),addEventListener(\"pointercancel\",i,T)}(t,e):g(t,e)}},w=function(e){[\"mousedown\",\"keydown\",\"touchstart\",\"pointerdown\"].forEach((function(t){return e(t,S,T)}))},L=function(n,f){var s,m=v(),d=r(\"FID\"),p=function(e){e.startTimeperformance.now())return;n.entries=[t],e(n)}catch(e){}},\"complete\"===document.readyState?setTimeout(t,0):addEventListener(\"load\",(function(){return setTimeout(t,0)}))};export{h as getCLS,d as getFCP,L as getFID,F as getLCP,P as getTTFB};\n"],"names":["e","t","n","i","r","name","value","delta","entries","id","concat","Date","now","Math","floor","random","a","PerformanceObserver","supportedEntryTypes","includes","self","getEntries","map","observe","type","buffered","o","document","visibilityState","removeEventListener","addEventListener","u","persisted","c","f","s","m","timeStamp","v","setTimeout","firstHiddenTime","d","disconnect","startTime","push","window","performance","getEntriesByName","requestAnimationFrame","p","l","h","hadRecentInput","length","takeRecords","T","passive","capture","y","g","w","E","entryType","target","cancelable","processingStart","forEach","S","L","b","F","once","P","getEntriesByType","timing","max","navigationStart","responseStart","readyState"],"sourceRoot":""} \ No newline at end of file diff --git a/static/js/main.e7c2d0bc.js b/static/js/main.e7c2d0bc.js new file mode 100644 index 0000000..cc549d5 --- /dev/null +++ b/static/js/main.e7c2d0bc.js @@ -0,0 +1,3 @@ +/*! For license information please see main.e7c2d0bc.js.LICENSE.txt */ +!function(){var e={757:function(e,t,n){e.exports=n(727)},463:function(e,t,n){"use strict";var r=n(791),a=n(296);function o(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n
attribute.\n *\n * @param to - The destination URL\n */\n createHref(to: To): string;\n\n /**\n * Encode a location the same way window.history would do (no-op for memory\n * history) so we ensure our PUSH/REPLAC e navigations for data routers\n * behave the same as POP\n *\n * @param location The incoming location from router.navigate()\n */\n encodeLocation(location: Location): Location;\n\n /**\n * Pushes a new location onto the history stack, increasing its length by one.\n * If there were any entries in the stack after the current one, they are\n * lost.\n *\n * @param to - The new URL\n * @param state - Data to associate with the new location\n */\n push(to: To, state?: any): void;\n\n /**\n * Replaces the current location in the history stack with a new one. The\n * location that was replaced will no longer be available.\n *\n * @param to - The new URL\n * @param state - Data to associate with the new location\n */\n replace(to: To, state?: any): void;\n\n /**\n * Navigates `n` entries backward/forward in the history stack relative to the\n * current index. For example, a \"back\" navigation would use go(-1).\n *\n * @param delta - The delta in the stack index\n */\n go(delta: number): void;\n\n /**\n * Sets up a listener that will be called whenever the current location\n * changes.\n *\n * @param listener - A function that will be called when the location changes\n * @returns unlisten - A function that may be used to stop listening\n */\n listen(listener: Listener): () => void;\n}\n\ntype HistoryState = {\n usr: any;\n key?: string;\n};\n\nconst PopStateEventType = \"popstate\";\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Memory History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A user-supplied object that describes a location. Used when providing\n * entries to `createMemoryHistory` via its `initialEntries` option.\n */\nexport type InitialEntry = string | Partial;\n\nexport type MemoryHistoryOptions = {\n initialEntries?: InitialEntry[];\n initialIndex?: number;\n v5Compat?: boolean;\n};\n\n/**\n * A memory history stores locations in memory. This is useful in stateful\n * environments where there is no web browser, such as node tests or React\n * Native.\n */\nexport interface MemoryHistory extends History {\n /**\n * The current index in the history stack.\n */\n readonly index: number;\n}\n\n/**\n * Memory history stores the current location in memory. It is designed for use\n * in stateful non-browser environments like tests and React Native.\n */\nexport function createMemoryHistory(\n options: MemoryHistoryOptions = {}\n): MemoryHistory {\n let { initialEntries = [\"/\"], initialIndex, v5Compat = false } = options;\n let entries: Location[]; // Declare so we can access from createMemoryLocation\n entries = initialEntries.map((entry, index) =>\n createMemoryLocation(\n entry,\n typeof entry === \"string\" ? null : entry.state,\n index === 0 ? \"default\" : undefined\n )\n );\n let index = clampIndex(\n initialIndex == null ? entries.length - 1 : initialIndex\n );\n let action = Action.Pop;\n let listener: Listener | null = null;\n\n function clampIndex(n: number): number {\n return Math.min(Math.max(n, 0), entries.length - 1);\n }\n function getCurrentLocation(): Location {\n return entries[index];\n }\n function createMemoryLocation(\n to: To,\n state: any = null,\n key?: string\n ): Location {\n let location = createLocation(\n entries ? getCurrentLocation().pathname : \"/\",\n to,\n state,\n key\n );\n warning(\n location.pathname.charAt(0) === \"/\",\n `relative pathnames are not supported in memory history: ${JSON.stringify(\n to\n )}`\n );\n return location;\n }\n\n let history: MemoryHistory = {\n get index() {\n return index;\n },\n get action() {\n return action;\n },\n get location() {\n return getCurrentLocation();\n },\n createHref(to) {\n return typeof to === \"string\" ? to : createPath(to);\n },\n encodeLocation(location) {\n return location;\n },\n push(to, state) {\n action = Action.Push;\n let nextLocation = createMemoryLocation(to, state);\n index += 1;\n entries.splice(index, entries.length, nextLocation);\n if (v5Compat && listener) {\n listener({ action, location: nextLocation });\n }\n },\n replace(to, state) {\n action = Action.Replace;\n let nextLocation = createMemoryLocation(to, state);\n entries[index] = nextLocation;\n if (v5Compat && listener) {\n listener({ action, location: nextLocation });\n }\n },\n go(delta) {\n action = Action.Pop;\n index = clampIndex(index + delta);\n if (listener) {\n listener({ action, location: getCurrentLocation() });\n }\n },\n listen(fn: Listener) {\n listener = fn;\n return () => {\n listener = null;\n };\n },\n };\n\n return history;\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Browser History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A browser history stores the current location in regular URLs in a web\n * browser environment. This is the standard for most web apps and provides the\n * cleanest URLs the browser's address bar.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#browserhistory\n */\nexport interface BrowserHistory extends UrlHistory {}\n\nexport type BrowserHistoryOptions = UrlHistoryOptions;\n\n/**\n * Browser history stores the location in regular URLs. This is the standard for\n * most web apps, but it requires some configuration on the server to ensure you\n * serve the same app at multiple URLs.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createbrowserhistory\n */\nexport function createBrowserHistory(\n options: BrowserHistoryOptions = {}\n): BrowserHistory {\n function createBrowserLocation(\n window: Window,\n globalHistory: Window[\"history\"]\n ) {\n let { pathname, search, hash } = window.location;\n return createLocation(\n \"\",\n { pathname, search, hash },\n // state defaults to `null` because `window.history.state` does\n (globalHistory.state && globalHistory.state.usr) || null,\n (globalHistory.state && globalHistory.state.key) || \"default\"\n );\n }\n\n function createBrowserHref(window: Window, to: To) {\n return typeof to === \"string\" ? to : createPath(to);\n }\n\n return getUrlBasedHistory(\n createBrowserLocation,\n createBrowserHref,\n null,\n options\n );\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Hash History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A hash history stores the current location in the fragment identifier portion\n * of the URL in a web browser environment.\n *\n * This is ideal for apps that do not control the server for some reason\n * (because the fragment identifier is never sent to the server), including some\n * shared hosting environments that do not provide fine-grained controls over\n * which pages are served at which URLs.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#hashhistory\n */\nexport interface HashHistory extends UrlHistory {}\n\nexport type HashHistoryOptions = UrlHistoryOptions;\n\n/**\n * Hash history stores the location in window.location.hash. This makes it ideal\n * for situations where you don't want to send the location to the server for\n * some reason, either because you do cannot configure it or the URL space is\n * reserved for something else.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createhashhistory\n */\nexport function createHashHistory(\n options: HashHistoryOptions = {}\n): HashHistory {\n function createHashLocation(\n window: Window,\n globalHistory: Window[\"history\"]\n ) {\n let {\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n } = parsePath(window.location.hash.substr(1));\n return createLocation(\n \"\",\n { pathname, search, hash },\n // state defaults to `null` because `window.history.state` does\n (globalHistory.state && globalHistory.state.usr) || null,\n (globalHistory.state && globalHistory.state.key) || \"default\"\n );\n }\n\n function createHashHref(window: Window, to: To) {\n let base = window.document.querySelector(\"base\");\n let href = \"\";\n\n if (base && base.getAttribute(\"href\")) {\n let url = window.location.href;\n let hashIndex = url.indexOf(\"#\");\n href = hashIndex === -1 ? url : url.slice(0, hashIndex);\n }\n\n return href + \"#\" + (typeof to === \"string\" ? to : createPath(to));\n }\n\n function validateHashLocation(location: Location, to: To) {\n warning(\n location.pathname.charAt(0) === \"/\",\n `relative pathnames are not supported in hash history.push(${JSON.stringify(\n to\n )})`\n );\n }\n\n return getUrlBasedHistory(\n createHashLocation,\n createHashHref,\n validateHashLocation,\n options\n );\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region UTILS\n////////////////////////////////////////////////////////////////////////////////\n\nfunction warning(cond: any, message: string) {\n if (!cond) {\n // eslint-disable-next-line no-console\n if (typeof console !== \"undefined\") console.warn(message);\n\n try {\n // Welcome to debugging history!\n //\n // This error is thrown as a convenience so you can more easily\n // find the source for a warning that appears in the console by\n // enabling \"pause on exceptions\" in your JavaScript debugger.\n throw new Error(message);\n // eslint-disable-next-line no-empty\n } catch (e) {}\n }\n}\n\nfunction createKey() {\n return Math.random().toString(36).substr(2, 8);\n}\n\n/**\n * For browser-based histories, we combine the state and key into an object\n */\nfunction getHistoryState(location: Location): HistoryState {\n return {\n usr: location.state,\n key: location.key,\n };\n}\n\n/**\n * Creates a Location object with a unique key from the given Path\n */\nexport function createLocation(\n current: string | Location,\n to: To,\n state: any = null,\n key?: string\n): Readonly {\n let location: Readonly = {\n pathname: typeof current === \"string\" ? current : current.pathname,\n search: \"\",\n hash: \"\",\n ...(typeof to === \"string\" ? parsePath(to) : to),\n state,\n // TODO: This could be cleaned up. push/replace should probably just take\n // full Locations now and avoid the need to run through this flow at all\n // But that's a pretty big refactor to the current test suite so going to\n // keep as is for the time being and just let any incoming keys take precedence\n key: (to && (to as Location).key) || key || createKey(),\n };\n return location;\n}\n\n/**\n * Creates a string URL path from the given pathname, search, and hash components.\n */\nexport function createPath({\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n}: Partial) {\n if (search && search !== \"?\")\n pathname += search.charAt(0) === \"?\" ? search : \"?\" + search;\n if (hash && hash !== \"#\")\n pathname += hash.charAt(0) === \"#\" ? hash : \"#\" + hash;\n return pathname;\n}\n\n/**\n * Parses a string URL path into its separate pathname, search, and hash components.\n */\nexport function parsePath(path: string): Partial {\n let parsedPath: Partial = {};\n\n if (path) {\n let hashIndex = path.indexOf(\"#\");\n if (hashIndex >= 0) {\n parsedPath.hash = path.substr(hashIndex);\n path = path.substr(0, hashIndex);\n }\n\n let searchIndex = path.indexOf(\"?\");\n if (searchIndex >= 0) {\n parsedPath.search = path.substr(searchIndex);\n path = path.substr(0, searchIndex);\n }\n\n if (path) {\n parsedPath.pathname = path;\n }\n }\n\n return parsedPath;\n}\n\nexport function createURL(location: Location | string): URL {\n // window.location.origin is \"null\" (the literal string value) in Firefox\n // under certain conditions, notably when serving from a local HTML file\n // See https://bugzilla.mozilla.org/show_bug.cgi?id=878297\n let base =\n typeof window !== \"undefined\" &&\n typeof window.location !== \"undefined\" &&\n window.location.origin !== \"null\"\n ? window.location.origin\n : \"unknown://unknown\";\n let href = typeof location === \"string\" ? location : createPath(location);\n return new URL(href, base);\n}\n\nexport interface UrlHistory extends History {}\n\nexport type UrlHistoryOptions = {\n window?: Window;\n v5Compat?: boolean;\n};\n\nfunction getUrlBasedHistory(\n getLocation: (window: Window, globalHistory: Window[\"history\"]) => Location,\n createHref: (window: Window, to: To) => string,\n validateLocation: ((location: Location, to: To) => void) | null,\n options: UrlHistoryOptions = {}\n): UrlHistory {\n let { window = document.defaultView!, v5Compat = false } = options;\n let globalHistory = window.history;\n let action = Action.Pop;\n let listener: Listener | null = null;\n\n function handlePop() {\n action = Action.Pop;\n if (listener) {\n listener({ action, location: history.location });\n }\n }\n\n function push(to: To, state?: any) {\n action = Action.Push;\n let location = createLocation(history.location, to, state);\n if (validateLocation) validateLocation(location, to);\n\n let historyState = getHistoryState(location);\n let url = history.createHref(location);\n\n // try...catch because iOS limits us to 100 pushState calls :/\n try {\n globalHistory.pushState(historyState, \"\", url);\n } catch (error) {\n // They are going to lose state here, but there is no real\n // way to warn them about it since the page will refresh...\n window.location.assign(url);\n }\n\n if (v5Compat && listener) {\n listener({ action, location: history.location });\n }\n }\n\n function replace(to: To, state?: any) {\n action = Action.Replace;\n let location = createLocation(history.location, to, state);\n if (validateLocation) validateLocation(location, to);\n\n let historyState = getHistoryState(location);\n let url = history.createHref(location);\n globalHistory.replaceState(historyState, \"\", url);\n\n if (v5Compat && listener) {\n listener({ action, location: history.location });\n }\n }\n\n let history: History = {\n get action() {\n return action;\n },\n get location() {\n return getLocation(window, globalHistory);\n },\n listen(fn: Listener) {\n if (listener) {\n throw new Error(\"A history only accepts one active listener\");\n }\n window.addEventListener(PopStateEventType, handlePop);\n listener = fn;\n\n return () => {\n window.removeEventListener(PopStateEventType, handlePop);\n listener = null;\n };\n },\n createHref(to) {\n return createHref(window, to);\n },\n encodeLocation(location) {\n // Encode a Location the same way window.location would\n let url = createURL(createPath(location));\n return {\n ...location,\n pathname: url.pathname,\n search: url.search,\n hash: url.hash,\n };\n },\n push,\n replace,\n go(n) {\n return globalHistory.go(n);\n },\n };\n\n return history;\n}\n\n//#endregion\n","import type { Location, Path, To } from \"./history\";\nimport { parsePath } from \"./history\";\n\n/**\n * Map of routeId -> data returned from a loader/action/error\n */\nexport interface RouteData {\n [routeId: string]: any;\n}\n\nexport enum ResultType {\n data = \"data\",\n deferred = \"deferred\",\n redirect = \"redirect\",\n error = \"error\",\n}\n\n/**\n * Successful result from a loader or action\n */\nexport interface SuccessResult {\n type: ResultType.data;\n data: any;\n statusCode?: number;\n headers?: Headers;\n}\n\n/**\n * Successful defer() result from a loader or action\n */\nexport interface DeferredResult {\n type: ResultType.deferred;\n deferredData: DeferredData;\n}\n\n/**\n * Redirect result from a loader or action\n */\nexport interface RedirectResult {\n type: ResultType.redirect;\n status: number;\n location: string;\n revalidate: boolean;\n}\n\n/**\n * Unsuccessful result from a loader or action\n */\nexport interface ErrorResult {\n type: ResultType.error;\n error: any;\n headers?: Headers;\n}\n\n/**\n * Result from a loader or action - potentially successful or unsuccessful\n */\nexport type DataResult =\n | SuccessResult\n | DeferredResult\n | RedirectResult\n | ErrorResult;\n\nexport type FormMethod = \"get\" | \"post\" | \"put\" | \"patch\" | \"delete\";\nexport type FormEncType =\n | \"application/x-www-form-urlencoded\"\n | \"multipart/form-data\";\n\n/**\n * @private\n * Internal interface to pass around for action submissions, not intended for\n * external consumption\n */\nexport interface Submission {\n formMethod: Exclude;\n formAction: string;\n formEncType: FormEncType;\n formData: FormData;\n}\n\n/**\n * @private\n * Arguments passed to route loader/action functions. Same for now but we keep\n * this as a private implementation detail in case they diverge in the future.\n */\ninterface DataFunctionArgs {\n request: Request;\n params: Params;\n}\n\n/**\n * Arguments passed to loader functions\n */\nexport interface LoaderFunctionArgs extends DataFunctionArgs {}\n\n/**\n * Arguments passed to action functions\n */\nexport interface ActionFunctionArgs extends DataFunctionArgs {}\n\n/**\n * Route loader function signature\n */\nexport interface LoaderFunction {\n (args: LoaderFunctionArgs): Promise | Response | Promise | any;\n}\n\n/**\n * Route action function signature\n */\nexport interface ActionFunction {\n (args: ActionFunctionArgs): Promise | Response | Promise | any;\n}\n\n/**\n * Route shouldRevalidate function signature. This runs after any submission\n * (navigation or fetcher), so we flatten the navigation/fetcher submission\n * onto the arguments. It shouldn't matter whether it came from a navigation\n * or a fetcher, what really matters is the URLs and the formData since loaders\n * have to re-run based on the data models that were potentially mutated.\n */\nexport interface ShouldRevalidateFunction {\n (args: {\n currentUrl: URL;\n currentParams: AgnosticDataRouteMatch[\"params\"];\n nextUrl: URL;\n nextParams: AgnosticDataRouteMatch[\"params\"];\n formMethod?: Submission[\"formMethod\"];\n formAction?: Submission[\"formAction\"];\n formEncType?: Submission[\"formEncType\"];\n formData?: Submission[\"formData\"];\n actionResult?: DataResult;\n defaultShouldRevalidate: boolean;\n }): boolean;\n}\n\n/**\n * Base RouteObject with common props shared by all types of routes\n */\ntype AgnosticBaseRouteObject = {\n caseSensitive?: boolean;\n path?: string;\n id?: string;\n loader?: LoaderFunction;\n action?: ActionFunction;\n hasErrorBoundary?: boolean;\n shouldRevalidate?: ShouldRevalidateFunction;\n handle?: any;\n};\n\n/**\n * Index routes must not have children\n */\nexport type AgnosticIndexRouteObject = AgnosticBaseRouteObject & {\n children?: undefined;\n index: true;\n};\n\n/**\n * Non-index routes may have children, but cannot have index\n */\nexport type AgnosticNonIndexRouteObject = AgnosticBaseRouteObject & {\n children?: AgnosticRouteObject[];\n index?: false;\n};\n\n/**\n * A route object represents a logical route, with (optionally) its child\n * routes organized in a tree-like structure.\n */\nexport type AgnosticRouteObject =\n | AgnosticIndexRouteObject\n | AgnosticNonIndexRouteObject;\n\nexport type AgnosticDataIndexRouteObject = AgnosticIndexRouteObject & {\n id: string;\n};\n\nexport type AgnosticDataNonIndexRouteObject = AgnosticNonIndexRouteObject & {\n children?: AgnosticDataRouteObject[];\n id: string;\n};\n\n/**\n * A data route object, which is just a RouteObject with a required unique ID\n */\nexport type AgnosticDataRouteObject =\n | AgnosticDataIndexRouteObject\n | AgnosticDataNonIndexRouteObject;\n\n// Recursive helper for finding path parameters in the absence of wildcards\ntype _PathParam =\n // split path into individual path segments\n Path extends `${infer L}/${infer R}`\n ? _PathParam | _PathParam\n : // find params after `:`\n Path extends `${string}:${infer Param}`\n ? Param\n : // otherwise, there aren't any params present\n never;\n\n/**\n * Examples:\n * \"/a/b/*\" -> \"*\"\n * \":a\" -> \"a\"\n * \"/a/:b\" -> \"b\"\n * \"/a/blahblahblah:b\" -> \"b\"\n * \"/:a/:b\" -> \"a\" | \"b\"\n * \"/:a/b/:c/*\" -> \"a\" | \"c\" | \"*\"\n */\ntype PathParam =\n // check if path is just a wildcard\n Path extends \"*\"\n ? \"*\"\n : // look for wildcard at the end of the path\n Path extends `${infer Rest}/*`\n ? \"*\" | _PathParam\n : // look for params in the absence of wildcards\n _PathParam;\n\n// Attempt to parse the given string segment. If it fails, then just return the\n// plain string type as a default fallback. Otherwise return the union of the\n// parsed string literals that were referenced as dynamic segments in the route.\nexport type ParamParseKey =\n // if could not find path params, fallback to `string`\n [PathParam] extends [never] ? string : PathParam;\n\n/**\n * The parameters that were parsed from the URL path.\n */\nexport type Params = {\n readonly [key in Key]: string | undefined;\n};\n\n/**\n * A RouteMatch contains info about how a route matched a URL.\n */\nexport interface AgnosticRouteMatch<\n ParamKey extends string = string,\n RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject\n> {\n /**\n * The names and values of dynamic parameters in the URL.\n */\n params: Params;\n /**\n * The portion of the URL pathname that was matched.\n */\n pathname: string;\n /**\n * The portion of the URL pathname that was matched before child routes.\n */\n pathnameBase: string;\n /**\n * The route object that was used to match.\n */\n route: RouteObjectType;\n}\n\nexport interface AgnosticDataRouteMatch\n extends AgnosticRouteMatch {}\n\nfunction isIndexRoute(\n route: AgnosticRouteObject\n): route is AgnosticIndexRouteObject {\n return route.index === true;\n}\n\n// Walk the route tree generating unique IDs where necessary so we are working\n// solely with AgnosticDataRouteObject's within the Router\nexport function convertRoutesToDataRoutes(\n routes: AgnosticRouteObject[],\n parentPath: number[] = [],\n allIds: Set = new Set()\n): AgnosticDataRouteObject[] {\n return routes.map((route, index) => {\n let treePath = [...parentPath, index];\n let id = typeof route.id === \"string\" ? route.id : treePath.join(\"-\");\n invariant(\n route.index !== true || !route.children,\n `Cannot specify children on an index route`\n );\n invariant(\n !allIds.has(id),\n `Found a route id collision on id \"${id}\". Route ` +\n \"id's must be globally unique within Data Router usages\"\n );\n allIds.add(id);\n\n if (isIndexRoute(route)) {\n let indexRoute: AgnosticDataIndexRouteObject = { ...route, id };\n return indexRoute;\n } else {\n let pathOrLayoutRoute: AgnosticDataNonIndexRouteObject = {\n ...route,\n id,\n children: route.children\n ? convertRoutesToDataRoutes(route.children, treePath, allIds)\n : undefined,\n };\n return pathOrLayoutRoute;\n }\n });\n}\n\n/**\n * Matches the given routes to a location and returns the match data.\n *\n * @see https://reactrouter.com/docs/en/v6/utils/match-routes\n */\nexport function matchRoutes<\n RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject\n>(\n routes: RouteObjectType[],\n locationArg: Partial | string,\n basename = \"/\"\n): AgnosticRouteMatch[] | null {\n let location =\n typeof locationArg === \"string\" ? parsePath(locationArg) : locationArg;\n\n let pathname = stripBasename(location.pathname || \"/\", basename);\n\n if (pathname == null) {\n return null;\n }\n\n let branches = flattenRoutes(routes);\n rankRouteBranches(branches);\n\n let matches = null;\n for (let i = 0; matches == null && i < branches.length; ++i) {\n matches = matchRouteBranch(\n branches[i],\n // Incoming pathnames are generally encoded from either window.location\n // or from router.navigate, but we want to match against the unencoded\n // paths in the route definitions. Memory router locations won't be\n // encoded here but there also shouldn't be anything to decode so this\n // should be a safe operation. This avoids needing matchRoutes to be\n // history-aware.\n safelyDecodeURI(pathname)\n );\n }\n\n return matches;\n}\n\ninterface RouteMeta<\n RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject\n> {\n relativePath: string;\n caseSensitive: boolean;\n childrenIndex: number;\n route: RouteObjectType;\n}\n\ninterface RouteBranch<\n RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject\n> {\n path: string;\n score: number;\n routesMeta: RouteMeta[];\n}\n\nfunction flattenRoutes<\n RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject\n>(\n routes: RouteObjectType[],\n branches: RouteBranch[] = [],\n parentsMeta: RouteMeta[] = [],\n parentPath = \"\"\n): RouteBranch[] {\n routes.forEach((route, index) => {\n let meta: RouteMeta = {\n relativePath: route.path || \"\",\n caseSensitive: route.caseSensitive === true,\n childrenIndex: index,\n route,\n };\n\n if (meta.relativePath.startsWith(\"/\")) {\n invariant(\n meta.relativePath.startsWith(parentPath),\n `Absolute route path \"${meta.relativePath}\" nested under path ` +\n `\"${parentPath}\" is not valid. An absolute child route path ` +\n `must start with the combined path of all its parent routes.`\n );\n\n meta.relativePath = meta.relativePath.slice(parentPath.length);\n }\n\n let path = joinPaths([parentPath, meta.relativePath]);\n let routesMeta = parentsMeta.concat(meta);\n\n // Add the children before adding this route to the array so we traverse the\n // route tree depth-first and child routes appear before their parents in\n // the \"flattened\" version.\n if (route.children && route.children.length > 0) {\n invariant(\n // Our types know better, but runtime JS may not!\n // @ts-expect-error\n route.index !== true,\n `Index routes must not have child routes. Please remove ` +\n `all child routes from route path \"${path}\".`\n );\n\n flattenRoutes(route.children, branches, routesMeta, path);\n }\n\n // Routes without a path shouldn't ever match by themselves unless they are\n // index routes, so don't add them to the list of possible branches.\n if (route.path == null && !route.index) {\n return;\n }\n\n branches.push({ path, score: computeScore(path, route.index), routesMeta });\n });\n\n return branches;\n}\n\nfunction rankRouteBranches(branches: RouteBranch[]): void {\n branches.sort((a, b) =>\n a.score !== b.score\n ? b.score - a.score // Higher score first\n : compareIndexes(\n a.routesMeta.map((meta) => meta.childrenIndex),\n b.routesMeta.map((meta) => meta.childrenIndex)\n )\n );\n}\n\nconst paramRe = /^:\\w+$/;\nconst dynamicSegmentValue = 3;\nconst indexRouteValue = 2;\nconst emptySegmentValue = 1;\nconst staticSegmentValue = 10;\nconst splatPenalty = -2;\nconst isSplat = (s: string) => s === \"*\";\n\nfunction computeScore(path: string, index: boolean | undefined): number {\n let segments = path.split(\"/\");\n let initialScore = segments.length;\n if (segments.some(isSplat)) {\n initialScore += splatPenalty;\n }\n\n if (index) {\n initialScore += indexRouteValue;\n }\n\n return segments\n .filter((s) => !isSplat(s))\n .reduce(\n (score, segment) =>\n score +\n (paramRe.test(segment)\n ? dynamicSegmentValue\n : segment === \"\"\n ? emptySegmentValue\n : staticSegmentValue),\n initialScore\n );\n}\n\nfunction compareIndexes(a: number[], b: number[]): number {\n let siblings =\n a.length === b.length && a.slice(0, -1).every((n, i) => n === b[i]);\n\n return siblings\n ? // If two routes are siblings, we should try to match the earlier sibling\n // first. This allows people to have fine-grained control over the matching\n // behavior by simply putting routes with identical paths in the order they\n // want them tried.\n a[a.length - 1] - b[b.length - 1]\n : // Otherwise, it doesn't really make sense to rank non-siblings by index,\n // so they sort equally.\n 0;\n}\n\nfunction matchRouteBranch<\n ParamKey extends string = string,\n RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject\n>(\n branch: RouteBranch,\n pathname: string\n): AgnosticRouteMatch[] | null {\n let { routesMeta } = branch;\n\n let matchedParams = {};\n let matchedPathname = \"/\";\n let matches: AgnosticRouteMatch[] = [];\n for (let i = 0; i < routesMeta.length; ++i) {\n let meta = routesMeta[i];\n let end = i === routesMeta.length - 1;\n let remainingPathname =\n matchedPathname === \"/\"\n ? pathname\n : pathname.slice(matchedPathname.length) || \"/\";\n let match = matchPath(\n { path: meta.relativePath, caseSensitive: meta.caseSensitive, end },\n remainingPathname\n );\n\n if (!match) return null;\n\n Object.assign(matchedParams, match.params);\n\n let route = meta.route;\n\n matches.push({\n // TODO: Can this as be avoided?\n params: matchedParams as Params,\n pathname: joinPaths([matchedPathname, match.pathname]),\n pathnameBase: normalizePathname(\n joinPaths([matchedPathname, match.pathnameBase])\n ),\n route,\n });\n\n if (match.pathnameBase !== \"/\") {\n matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);\n }\n }\n\n return matches;\n}\n\n/**\n * Returns a path with params interpolated.\n *\n * @see https://reactrouter.com/docs/en/v6/utils/generate-path\n */\nexport function generatePath(\n path: Path,\n params: {\n [key in PathParam]: string;\n } = {} as any\n): string {\n return path\n .replace(/:(\\w+)/g, (_, key: PathParam) => {\n invariant(params[key] != null, `Missing \":${key}\" param`);\n return params[key]!;\n })\n .replace(/(\\/?)\\*/, (_, prefix, __, str) => {\n const star = \"*\" as PathParam;\n\n if (params[star] == null) {\n // If no splat was provided, trim the trailing slash _unless_ it's\n // the entire path\n return str === \"/*\" ? \"/\" : \"\";\n }\n\n // Apply the splat\n return `${prefix}${params[star]}`;\n });\n}\n\n/**\n * A PathPattern is used to match on some portion of a URL pathname.\n */\nexport interface PathPattern {\n /**\n * A string to match against a URL pathname. May contain `:id`-style segments\n * to indicate placeholders for dynamic parameters. May also end with `/*` to\n * indicate matching the rest of the URL pathname.\n */\n path: Path;\n /**\n * Should be `true` if the static portions of the `path` should be matched in\n * the same case.\n */\n caseSensitive?: boolean;\n /**\n * Should be `true` if this pattern should match the entire URL pathname.\n */\n end?: boolean;\n}\n\n/**\n * A PathMatch contains info about how a PathPattern matched on a URL pathname.\n */\nexport interface PathMatch {\n /**\n * The names and values of dynamic parameters in the URL.\n */\n params: Params;\n /**\n * The portion of the URL pathname that was matched.\n */\n pathname: string;\n /**\n * The portion of the URL pathname that was matched before child routes.\n */\n pathnameBase: string;\n /**\n * The pattern that was used to match.\n */\n pattern: PathPattern;\n}\n\ntype Mutable = {\n -readonly [P in keyof T]: T[P];\n};\n\n/**\n * Performs pattern matching on a URL pathname and returns information about\n * the match.\n *\n * @see https://reactrouter.com/docs/en/v6/utils/match-path\n */\nexport function matchPath<\n ParamKey extends ParamParseKey,\n Path extends string\n>(\n pattern: PathPattern | Path,\n pathname: string\n): PathMatch | null {\n if (typeof pattern === \"string\") {\n pattern = { path: pattern, caseSensitive: false, end: true };\n }\n\n let [matcher, paramNames] = compilePath(\n pattern.path,\n pattern.caseSensitive,\n pattern.end\n );\n\n let match = pathname.match(matcher);\n if (!match) return null;\n\n let matchedPathname = match[0];\n let pathnameBase = matchedPathname.replace(/(.)\\/+$/, \"$1\");\n let captureGroups = match.slice(1);\n let params: Params = paramNames.reduce>(\n (memo, paramName, index) => {\n // We need to compute the pathnameBase here using the raw splat value\n // instead of using params[\"*\"] later because it will be decoded then\n if (paramName === \"*\") {\n let splatValue = captureGroups[index] || \"\";\n pathnameBase = matchedPathname\n .slice(0, matchedPathname.length - splatValue.length)\n .replace(/(.)\\/+$/, \"$1\");\n }\n\n memo[paramName] = safelyDecodeURIComponent(\n captureGroups[index] || \"\",\n paramName\n );\n return memo;\n },\n {}\n );\n\n return {\n params,\n pathname: matchedPathname,\n pathnameBase,\n pattern,\n };\n}\n\nfunction compilePath(\n path: string,\n caseSensitive = false,\n end = true\n): [RegExp, string[]] {\n warning(\n path === \"*\" || !path.endsWith(\"*\") || path.endsWith(\"/*\"),\n `Route path \"${path}\" will be treated as if it were ` +\n `\"${path.replace(/\\*$/, \"/*\")}\" because the \\`*\\` character must ` +\n `always follow a \\`/\\` in the pattern. To get rid of this warning, ` +\n `please change the route path to \"${path.replace(/\\*$/, \"/*\")}\".`\n );\n\n let paramNames: string[] = [];\n let regexpSource =\n \"^\" +\n path\n .replace(/\\/*\\*?$/, \"\") // Ignore trailing / and /*, we'll handle it below\n .replace(/^\\/*/, \"/\") // Make sure it has a leading /\n .replace(/[\\\\.*+^$?{}|()[\\]]/g, \"\\\\$&\") // Escape special regex chars\n .replace(/:(\\w+)/g, (_: string, paramName: string) => {\n paramNames.push(paramName);\n return \"([^\\\\/]+)\";\n });\n\n if (path.endsWith(\"*\")) {\n paramNames.push(\"*\");\n regexpSource +=\n path === \"*\" || path === \"/*\"\n ? \"(.*)$\" // Already matched the initial /, just match the rest\n : \"(?:\\\\/(.+)|\\\\/*)$\"; // Don't include the / in params[\"*\"]\n } else if (end) {\n // When matching to the end, ignore trailing slashes\n regexpSource += \"\\\\/*$\";\n } else if (path !== \"\" && path !== \"/\") {\n // If our path is non-empty and contains anything beyond an initial slash,\n // then we have _some_ form of path in our regex so we should expect to\n // match only if we find the end of this path segment. Look for an optional\n // non-captured trailing slash (to match a portion of the URL) or the end\n // of the path (if we've matched to the end). We used to do this with a\n // word boundary but that gives false positives on routes like\n // /user-preferences since `-` counts as a word boundary.\n regexpSource += \"(?:(?=\\\\/|$))\";\n } else {\n // Nothing to match for \"\" or \"/\"\n }\n\n let matcher = new RegExp(regexpSource, caseSensitive ? undefined : \"i\");\n\n return [matcher, paramNames];\n}\n\nfunction safelyDecodeURI(value: string) {\n try {\n return decodeURI(value);\n } catch (error) {\n warning(\n false,\n `The URL path \"${value}\" could not be decoded because it is is a ` +\n `malformed URL segment. This is probably due to a bad percent ` +\n `encoding (${error}).`\n );\n\n return value;\n }\n}\n\nfunction safelyDecodeURIComponent(value: string, paramName: string) {\n try {\n return decodeURIComponent(value);\n } catch (error) {\n warning(\n false,\n `The value for the URL param \"${paramName}\" will not be decoded because` +\n ` the string \"${value}\" is a malformed URL segment. This is probably` +\n ` due to a bad percent encoding (${error}).`\n );\n\n return value;\n }\n}\n\n/**\n * @private\n */\nexport function stripBasename(\n pathname: string,\n basename: string\n): string | null {\n if (basename === \"/\") return pathname;\n\n if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {\n return null;\n }\n\n // We want to leave trailing slash behavior in the user's control, so if they\n // specify a basename with a trailing slash, we should support it\n let startIndex = basename.endsWith(\"/\")\n ? basename.length - 1\n : basename.length;\n let nextChar = pathname.charAt(startIndex);\n if (nextChar && nextChar !== \"/\") {\n // pathname does not start with basename/\n return null;\n }\n\n return pathname.slice(startIndex) || \"/\";\n}\n\n/**\n * @private\n */\nexport function invariant(value: boolean, message?: string): asserts value;\nexport function invariant(\n value: T | null | undefined,\n message?: string\n): asserts value is T;\nexport function invariant(value: any, message?: string) {\n if (value === false || value === null || typeof value === \"undefined\") {\n throw new Error(message);\n }\n}\n\n/**\n * @private\n */\nexport function warning(cond: any, message: string): void {\n if (!cond) {\n // eslint-disable-next-line no-console\n if (typeof console !== \"undefined\") console.warn(message);\n\n try {\n // Welcome to debugging React Router!\n //\n // This error is thrown as a convenience so you can more easily\n // find the source for a warning that appears in the console by\n // enabling \"pause on exceptions\" in your JavaScript debugger.\n throw new Error(message);\n // eslint-disable-next-line no-empty\n } catch (e) {}\n }\n}\n\n/**\n * Returns a resolved path object relative to the given pathname.\n *\n * @see https://reactrouter.com/docs/en/v6/utils/resolve-path\n */\nexport function resolvePath(to: To, fromPathname = \"/\"): Path {\n let {\n pathname: toPathname,\n search = \"\",\n hash = \"\",\n } = typeof to === \"string\" ? parsePath(to) : to;\n\n let pathname = toPathname\n ? toPathname.startsWith(\"/\")\n ? toPathname\n : resolvePathname(toPathname, fromPathname)\n : fromPathname;\n\n return {\n pathname,\n search: normalizeSearch(search),\n hash: normalizeHash(hash),\n };\n}\n\nfunction resolvePathname(relativePath: string, fromPathname: string): string {\n let segments = fromPathname.replace(/\\/+$/, \"\").split(\"/\");\n let relativeSegments = relativePath.split(\"/\");\n\n relativeSegments.forEach((segment) => {\n if (segment === \"..\") {\n // Keep the root \"\" segment so the pathname starts at /\n if (segments.length > 1) segments.pop();\n } else if (segment !== \".\") {\n segments.push(segment);\n }\n });\n\n return segments.length > 1 ? segments.join(\"/\") : \"/\";\n}\n\nfunction getInvalidPathError(\n char: string,\n field: string,\n dest: string,\n path: Partial\n) {\n return (\n `Cannot include a '${char}' character in a manually specified ` +\n `\\`to.${field}\\` field [${JSON.stringify(\n path\n )}]. Please separate it out to the ` +\n `\\`to.${dest}\\` field. Alternatively you may provide the full path as ` +\n `a string in and the router will parse it for you.`\n );\n}\n\n/**\n * @private\n *\n * When processing relative navigation we want to ignore ancestor routes that\n * do not contribute to the path, such that index/pathless layout routes don't\n * interfere.\n *\n * For example, when moving a route element into an index route and/or a\n * pathless layout route, relative link behavior contained within should stay\n * the same. Both of the following examples should link back to the root:\n *\n * \n * \n * \n *\n * \n * \n * }> // <-- Does not contribute\n * // <-- Does not contribute\n * \n * \n */\nexport function getPathContributingMatches<\n T extends AgnosticRouteMatch = AgnosticRouteMatch\n>(matches: T[]) {\n return matches.filter(\n (match, index) =>\n index === 0 || (match.route.path && match.route.path.length > 0)\n );\n}\n\n/**\n * @private\n */\nexport function resolveTo(\n toArg: To,\n routePathnames: string[],\n locationPathname: string,\n isPathRelative = false\n): Path {\n let to: Partial;\n if (typeof toArg === \"string\") {\n to = parsePath(toArg);\n } else {\n to = { ...toArg };\n\n invariant(\n !to.pathname || !to.pathname.includes(\"?\"),\n getInvalidPathError(\"?\", \"pathname\", \"search\", to)\n );\n invariant(\n !to.pathname || !to.pathname.includes(\"#\"),\n getInvalidPathError(\"#\", \"pathname\", \"hash\", to)\n );\n invariant(\n !to.search || !to.search.includes(\"#\"),\n getInvalidPathError(\"#\", \"search\", \"hash\", to)\n );\n }\n\n let isEmptyPath = toArg === \"\" || to.pathname === \"\";\n let toPathname = isEmptyPath ? \"/\" : to.pathname;\n\n let from: string;\n\n // Routing is relative to the current pathname if explicitly requested.\n //\n // If a pathname is explicitly provided in `to`, it should be relative to the\n // route context. This is explained in `Note on `` values` in our\n // migration guide from v5 as a means of disambiguation between `to` values\n // that begin with `/` and those that do not. However, this is problematic for\n // `to` values that do not provide a pathname. `to` can simply be a search or\n // hash string, in which case we should assume that the navigation is relative\n // to the current location's pathname and *not* the route pathname.\n if (isPathRelative || toPathname == null) {\n from = locationPathname;\n } else {\n let routePathnameIndex = routePathnames.length - 1;\n\n if (toPathname.startsWith(\"..\")) {\n let toSegments = toPathname.split(\"/\");\n\n // Each leading .. segment means \"go up one route\" instead of \"go up one\n // URL segment\". This is a key difference from how works and a\n // major reason we call this a \"to\" value instead of a \"href\".\n while (toSegments[0] === \"..\") {\n toSegments.shift();\n routePathnameIndex -= 1;\n }\n\n to.pathname = toSegments.join(\"/\");\n }\n\n // If there are more \"..\" segments than parent routes, resolve relative to\n // the root / URL.\n from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : \"/\";\n }\n\n let path = resolvePath(to, from);\n\n // Ensure the pathname has a trailing slash if the original \"to\" had one\n let hasExplicitTrailingSlash =\n toPathname && toPathname !== \"/\" && toPathname.endsWith(\"/\");\n // Or if this was a link to the current path which has a trailing slash\n let hasCurrentTrailingSlash =\n (isEmptyPath || toPathname === \".\") && locationPathname.endsWith(\"/\");\n if (\n !path.pathname.endsWith(\"/\") &&\n (hasExplicitTrailingSlash || hasCurrentTrailingSlash)\n ) {\n path.pathname += \"/\";\n }\n\n return path;\n}\n\n/**\n * @private\n */\nexport function getToPathname(to: To): string | undefined {\n // Empty strings should be treated the same as / paths\n return to === \"\" || (to as Path).pathname === \"\"\n ? \"/\"\n : typeof to === \"string\"\n ? parsePath(to).pathname\n : to.pathname;\n}\n\n/**\n * @private\n */\nexport const joinPaths = (paths: string[]): string =>\n paths.join(\"/\").replace(/\\/\\/+/g, \"/\");\n\n/**\n * @private\n */\nexport const normalizePathname = (pathname: string): string =>\n pathname.replace(/\\/+$/, \"\").replace(/^\\/*/, \"/\");\n\n/**\n * @private\n */\nexport const normalizeSearch = (search: string): string =>\n !search || search === \"?\"\n ? \"\"\n : search.startsWith(\"?\")\n ? search\n : \"?\" + search;\n\n/**\n * @private\n */\nexport const normalizeHash = (hash: string): string =>\n !hash || hash === \"#\" ? \"\" : hash.startsWith(\"#\") ? hash : \"#\" + hash;\n\nexport type JsonFunction = (\n data: Data,\n init?: number | ResponseInit\n) => Response;\n\n/**\n * This is a shortcut for creating `application/json` responses. Converts `data`\n * to JSON and sets the `Content-Type` header.\n */\nexport const json: JsonFunction = (data, init = {}) => {\n let responseInit = typeof init === \"number\" ? { status: init } : init;\n\n let headers = new Headers(responseInit.headers);\n if (!headers.has(\"Content-Type\")) {\n headers.set(\"Content-Type\", \"application/json; charset=utf-8\");\n }\n\n return new Response(JSON.stringify(data), {\n ...responseInit,\n headers,\n });\n};\n\nexport interface TrackedPromise extends Promise {\n _tracked?: boolean;\n _data?: any;\n _error?: any;\n}\n\nexport class AbortedDeferredError extends Error {}\n\nexport class DeferredData {\n private pendingKeys: Set = new Set();\n private controller: AbortController;\n private abortPromise: Promise;\n private unlistenAbortSignal: () => void;\n private subscriber?: (aborted: boolean) => void = undefined;\n data: Record;\n\n constructor(data: Record) {\n invariant(\n data && typeof data === \"object\" && !Array.isArray(data),\n \"defer() only accepts plain objects\"\n );\n\n // Set up an AbortController + Promise we can race against to exit early\n // cancellation\n let reject: (e: AbortedDeferredError) => void;\n this.abortPromise = new Promise((_, r) => (reject = r));\n this.controller = new AbortController();\n let onAbort = () =>\n reject(new AbortedDeferredError(\"Deferred data aborted\"));\n this.unlistenAbortSignal = () =>\n this.controller.signal.removeEventListener(\"abort\", onAbort);\n this.controller.signal.addEventListener(\"abort\", onAbort);\n\n this.data = Object.entries(data).reduce(\n (acc, [key, value]) =>\n Object.assign(acc, {\n [key]: this.trackPromise(key, value),\n }),\n {}\n );\n }\n\n private trackPromise(\n key: string | number,\n value: Promise | unknown\n ): TrackedPromise | unknown {\n if (!(value instanceof Promise)) {\n return value;\n }\n\n this.pendingKeys.add(key);\n\n // We store a little wrapper promise that will be extended with\n // _data/_error props upon resolve/reject\n let promise: TrackedPromise = Promise.race([value, this.abortPromise]).then(\n (data) => this.onSettle(promise, key, null, data as unknown),\n (error) => this.onSettle(promise, key, error as unknown)\n );\n\n // Register rejection listeners to avoid uncaught promise rejections on\n // errors or aborted deferred values\n promise.catch(() => {});\n\n Object.defineProperty(promise, \"_tracked\", { get: () => true });\n return promise;\n }\n\n private onSettle(\n promise: TrackedPromise,\n key: string | number,\n error: unknown,\n data?: unknown\n ): unknown {\n if (\n this.controller.signal.aborted &&\n error instanceof AbortedDeferredError\n ) {\n this.unlistenAbortSignal();\n Object.defineProperty(promise, \"_error\", { get: () => error });\n return Promise.reject(error);\n }\n\n this.pendingKeys.delete(key);\n\n if (this.done) {\n // Nothing left to abort!\n this.unlistenAbortSignal();\n }\n\n const subscriber = this.subscriber;\n if (error) {\n Object.defineProperty(promise, \"_error\", { get: () => error });\n subscriber && subscriber(false);\n return Promise.reject(error);\n }\n\n Object.defineProperty(promise, \"_data\", { get: () => data });\n subscriber && subscriber(false);\n return data;\n }\n\n subscribe(fn: (aborted: boolean) => void) {\n this.subscriber = fn;\n }\n\n cancel() {\n this.controller.abort();\n this.pendingKeys.forEach((v, k) => this.pendingKeys.delete(k));\n let subscriber = this.subscriber;\n subscriber && subscriber(true);\n }\n\n async resolveData(signal: AbortSignal) {\n let aborted = false;\n if (!this.done) {\n let onAbort = () => this.cancel();\n signal.addEventListener(\"abort\", onAbort);\n aborted = await new Promise((resolve) => {\n this.subscribe((aborted) => {\n signal.removeEventListener(\"abort\", onAbort);\n if (aborted || this.done) {\n resolve(aborted);\n }\n });\n });\n }\n return aborted;\n }\n\n get done() {\n return this.pendingKeys.size === 0;\n }\n\n get unwrappedData() {\n invariant(\n this.data !== null && this.done,\n \"Can only unwrap data on initialized and settled deferreds\"\n );\n\n return Object.entries(this.data).reduce(\n (acc, [key, value]) =>\n Object.assign(acc, {\n [key]: unwrapTrackedPromise(value),\n }),\n {}\n );\n }\n}\n\nfunction isTrackedPromise(value: any): value is TrackedPromise {\n return (\n value instanceof Promise && (value as TrackedPromise)._tracked === true\n );\n}\n\nfunction unwrapTrackedPromise(value: any) {\n if (!isTrackedPromise(value)) {\n return value;\n }\n\n if (value._error) {\n throw value._error;\n }\n return value._data;\n}\n\nexport function defer(data: Record) {\n return new DeferredData(data);\n}\n\nexport type RedirectFunction = (\n url: string,\n init?: number | ResponseInit\n) => Response;\n\n/**\n * A redirect response. Sets the status code and the `Location` header.\n * Defaults to \"302 Found\".\n */\nexport const redirect: RedirectFunction = (url, init = 302) => {\n let responseInit = init;\n if (typeof responseInit === \"number\") {\n responseInit = { status: responseInit };\n } else if (typeof responseInit.status === \"undefined\") {\n responseInit.status = 302;\n }\n\n let headers = new Headers(responseInit.headers);\n headers.set(\"Location\", url);\n\n return new Response(null, {\n ...responseInit,\n headers,\n });\n};\n\n/**\n * @private\n * Utility class we use to hold auto-unwrapped 4xx/5xx Response bodies\n */\nexport class ErrorResponse {\n status: number;\n statusText: string;\n data: any;\n\n constructor(status: number, statusText: string | undefined, data: any) {\n this.status = status;\n this.statusText = statusText || \"\";\n this.data = data;\n }\n}\n\n/**\n * Check if the given error is an ErrorResponse generated from a 4xx/5xx\n * Response throw from an action/loader\n */\nexport function isRouteErrorResponse(e: any): e is ErrorResponse {\n return e instanceof ErrorResponse;\n}\n","import type { History, Location, To } from \"./history\";\nimport {\n Action as HistoryAction,\n createLocation,\n createPath,\n createURL,\n parsePath,\n} from \"./history\";\nimport type {\n DataResult,\n AgnosticDataRouteMatch,\n AgnosticDataRouteObject,\n DeferredResult,\n ErrorResult,\n FormEncType,\n FormMethod,\n RedirectResult,\n RouteData,\n AgnosticRouteObject,\n Submission,\n SuccessResult,\n AgnosticRouteMatch,\n} from \"./utils\";\nimport {\n DeferredData,\n ErrorResponse,\n ResultType,\n convertRoutesToDataRoutes,\n getPathContributingMatches,\n invariant,\n isRouteErrorResponse,\n joinPaths,\n matchRoutes,\n resolveTo,\n} from \"./utils\";\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Types and Constants\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A Router instance manages all navigation and data loading/mutations\n */\nexport interface Router {\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Return the basename for the router\n */\n get basename(): RouterInit[\"basename\"];\n\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Return the current state of the router\n */\n get state(): RouterState;\n\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Return the routes for this router instance\n */\n get routes(): AgnosticDataRouteObject[];\n\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Initialize the router, including adding history listeners and kicking off\n * initial data fetches. Returns a function to cleanup listeners and abort\n * any in-progress loads\n */\n initialize(): Router;\n\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Subscribe to router.state updates\n *\n * @param fn function to call with the new state\n */\n subscribe(fn: RouterSubscriber): () => void;\n\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Enable scroll restoration behavior in the router\n *\n * @param savedScrollPositions Object that will manage positions, in case\n * it's being restored from sessionStorage\n * @param getScrollPosition Function to get the active Y scroll position\n * @param getKey Function to get the key to use for restoration\n */\n enableScrollRestoration(\n savedScrollPositions: Record,\n getScrollPosition: GetScrollPositionFunction,\n getKey?: GetScrollRestorationKeyFunction\n ): () => void;\n\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Navigate forward/backward in the history stack\n * @param to Delta to move in the history stack\n */\n navigate(to: number): void;\n\n /**\n * Navigate to the given path\n * @param to Path to navigate to\n * @param opts Navigation options (method, submission, etc.)\n */\n navigate(to: To, opts?: RouterNavigateOptions): void;\n\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Trigger a fetcher load/submission\n *\n * @param key Fetcher key\n * @param routeId Route that owns the fetcher\n * @param href href to fetch\n * @param opts Fetcher options, (method, submission, etc.)\n */\n fetch(\n key: string,\n routeId: string,\n href: string,\n opts?: RouterNavigateOptions\n ): void;\n\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Trigger a revalidation of all current route loaders and fetcher loads\n */\n revalidate(): void;\n\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Utility function to create an href for the given location\n * @param location\n */\n createHref(location: Location | URL): string;\n\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Get/create a fetcher for the given key\n * @param key\n */\n getFetcher(key?: string): Fetcher;\n\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Delete the fetcher for a given key\n * @param key\n */\n deleteFetcher(key?: string): void;\n\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Cleanup listeners and abort any in-progress loads\n */\n dispose(): void;\n\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Internal fetch AbortControllers accessed by unit tests\n */\n _internalFetchControllers: Map;\n\n /**\n * @internal\n * PRIVATE - DO NOT USE\n *\n * Internal pending DeferredData instances accessed by unit tests\n */\n _internalActiveDeferreds: Map;\n}\n\n/**\n * State maintained internally by the router. During a navigation, all states\n * reflect the the \"old\" location unless otherwise noted.\n */\nexport interface RouterState {\n /**\n * The action of the most recent navigation\n */\n historyAction: HistoryAction;\n\n /**\n * The current location reflected by the router\n */\n location: Location;\n\n /**\n * The current set of route matches\n */\n matches: AgnosticDataRouteMatch[];\n\n /**\n * Tracks whether we've completed our initial data load\n */\n initialized: boolean;\n\n /**\n * Current scroll position we should start at for a new view\n * - number -> scroll position to restore to\n * - false -> do not restore scroll at all (used during submissions)\n * - null -> don't have a saved position, scroll to hash or top of page\n */\n restoreScrollPosition: number | false | null;\n\n /**\n * Indicate whether this navigation should skip resetting the scroll position\n * if we are unable to restore the scroll position\n */\n preventScrollReset: boolean;\n\n /**\n * Tracks the state of the current navigation\n */\n navigation: Navigation;\n\n /**\n * Tracks any in-progress revalidations\n */\n revalidation: RevalidationState;\n\n /**\n * Data from the loaders for the current matches\n */\n loaderData: RouteData;\n\n /**\n * Data from the action for the current matches\n */\n actionData: RouteData | null;\n\n /**\n * Errors caught from loaders for the current matches\n */\n errors: RouteData | null;\n\n /**\n * Map of current fetchers\n */\n fetchers: Map;\n}\n\n/**\n * Data that can be passed into hydrate a Router from SSR\n */\nexport type HydrationState = Partial<\n Pick\n>;\n\n/**\n * Initialization options for createRouter\n */\nexport interface RouterInit {\n basename?: string;\n routes: AgnosticRouteObject[];\n history: History;\n hydrationData?: HydrationState;\n}\n\n/**\n * State returned from a server-side query() call\n */\nexport interface StaticHandlerContext {\n location: RouterState[\"location\"];\n matches: RouterState[\"matches\"];\n loaderData: RouterState[\"loaderData\"];\n actionData: RouterState[\"actionData\"];\n errors: RouterState[\"errors\"];\n statusCode: number;\n loaderHeaders: Record;\n actionHeaders: Record;\n _deepestRenderedBoundaryId?: string | null;\n}\n\n/**\n * A StaticHandler instance manages a singular SSR navigation/fetch event\n */\nexport interface StaticHandler {\n dataRoutes: AgnosticDataRouteObject[];\n query(request: Request): Promise;\n queryRoute(request: Request, routeId?: string): Promise;\n}\n\n/**\n * Subscriber function signature for changes to router state\n */\nexport interface RouterSubscriber {\n (state: RouterState): void;\n}\n\ninterface UseMatchesMatch {\n id: string;\n pathname: string;\n params: AgnosticRouteMatch[\"params\"];\n data: unknown;\n handle: unknown;\n}\n\n/**\n * Function signature for determining the key to be used in scroll restoration\n * for a given location\n */\nexport interface GetScrollRestorationKeyFunction {\n (location: Location, matches: UseMatchesMatch[]): string | null;\n}\n\n/**\n * Function signature for determining the current scroll position\n */\nexport interface GetScrollPositionFunction {\n (): number;\n}\n\n/**\n * Options for a navigate() call for a Link navigation\n */\ntype LinkNavigateOptions = {\n replace?: boolean;\n state?: any;\n preventScrollReset?: boolean;\n};\n\n/**\n * Options for a navigate() call for a Form navigation\n */\ntype SubmissionNavigateOptions = {\n replace?: boolean;\n state?: any;\n formMethod?: FormMethod;\n formEncType?: FormEncType;\n formData: FormData;\n};\n\n/**\n * Options to pass to navigate() for either a Link or Form navigation\n */\nexport type RouterNavigateOptions =\n | LinkNavigateOptions\n | SubmissionNavigateOptions;\n\n/**\n * Options to pass to fetch()\n */\nexport type RouterFetchOptions =\n | Omit\n | Omit;\n\n/**\n * Potential states for state.navigation\n */\nexport type NavigationStates = {\n Idle: {\n state: \"idle\";\n location: undefined;\n formMethod: undefined;\n formAction: undefined;\n formEncType: undefined;\n formData: undefined;\n };\n Loading: {\n state: \"loading\";\n location: Location;\n formMethod: FormMethod | undefined;\n formAction: string | undefined;\n formEncType: FormEncType | undefined;\n formData: FormData | undefined;\n };\n Submitting: {\n state: \"submitting\";\n location: Location;\n formMethod: FormMethod;\n formAction: string;\n formEncType: FormEncType;\n formData: FormData;\n };\n};\n\nexport type Navigation = NavigationStates[keyof NavigationStates];\n\nexport type RevalidationState = \"idle\" | \"loading\";\n\n/**\n * Potential states for fetchers\n */\ntype FetcherStates = {\n Idle: {\n state: \"idle\";\n formMethod: undefined;\n formAction: undefined;\n formEncType: undefined;\n formData: undefined;\n data: TData | undefined;\n };\n Loading: {\n state: \"loading\";\n formMethod: FormMethod | undefined;\n formAction: string | undefined;\n formEncType: FormEncType | undefined;\n formData: FormData | undefined;\n data: TData | undefined;\n };\n Submitting: {\n state: \"submitting\";\n formMethod: FormMethod;\n formAction: string;\n formEncType: FormEncType;\n formData: FormData;\n data: TData | undefined;\n };\n};\n\nexport type Fetcher =\n FetcherStates[keyof FetcherStates];\n\ninterface ShortCircuitable {\n /**\n * startNavigation does not need to complete the navigation because we\n * redirected or got interrupted\n */\n shortCircuited?: boolean;\n}\n\ninterface HandleActionResult extends ShortCircuitable {\n /**\n * Error thrown from the current action, keyed by the route containing the\n * error boundary to render the error. To be committed to the state after\n * loaders have completed\n */\n pendingActionError?: RouteData;\n /**\n * Data returned from the current action, keyed by the route owning the action.\n * To be committed to the state after loaders have completed\n */\n pendingActionData?: RouteData;\n}\n\ninterface HandleLoadersResult extends ShortCircuitable {\n /**\n * loaderData returned from the current set of loaders\n */\n loaderData?: RouterState[\"loaderData\"];\n /**\n * errors thrown from the current set of loaders\n */\n errors?: RouterState[\"errors\"];\n}\n\n/**\n * Tuple of [key, href, DataRouteMatch, DataRouteMatch[]] for a revalidating\n * fetcher.load()\n */\ntype RevalidatingFetcher = [\n string,\n string,\n AgnosticDataRouteMatch,\n AgnosticDataRouteMatch[]\n];\n\n/**\n * Tuple of [href, DataRouteMatch, DataRouteMatch[]] for an active\n * fetcher.load()\n */\ntype FetchLoadMatch = [\n string,\n AgnosticDataRouteMatch,\n AgnosticDataRouteMatch[]\n];\n\n/**\n * Wrapper object to allow us to throw any response out from callLoaderOrAction\n * for queryRouter while preserving whether or not it was thrown or returned\n * from the loader/action\n */\ninterface QueryRouteResponse {\n type: ResultType.data | ResultType.error;\n response: Response;\n}\n\nexport const IDLE_NAVIGATION: NavigationStates[\"Idle\"] = {\n state: \"idle\",\n location: undefined,\n formMethod: undefined,\n formAction: undefined,\n formEncType: undefined,\n formData: undefined,\n};\n\nexport const IDLE_FETCHER: FetcherStates[\"Idle\"] = {\n state: \"idle\",\n data: undefined,\n formMethod: undefined,\n formAction: undefined,\n formEncType: undefined,\n formData: undefined,\n};\n\nconst isBrowser =\n typeof window !== \"undefined\" &&\n typeof window.document !== \"undefined\" &&\n typeof window.document.createElement !== \"undefined\";\nconst isServer = !isBrowser;\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region createRouter\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * Create a router and listen to history POP navigations\n */\nexport function createRouter(init: RouterInit): Router {\n invariant(\n init.routes.length > 0,\n \"You must provide a non-empty routes array to createRouter\"\n );\n\n let dataRoutes = convertRoutesToDataRoutes(init.routes);\n // Cleanup function for history\n let unlistenHistory: (() => void) | null = null;\n // Externally-provided functions to call on all state changes\n let subscribers = new Set();\n // Externally-provided object to hold scroll restoration locations during routing\n let savedScrollPositions: Record | null = null;\n // Externally-provided function to get scroll restoration keys\n let getScrollRestorationKey: GetScrollRestorationKeyFunction | null = null;\n // Externally-provided function to get current scroll position\n let getScrollPosition: GetScrollPositionFunction | null = null;\n // One-time flag to control the initial hydration scroll restoration. Because\n // we don't get the saved positions from until _after_\n // the initial render, we need to manually trigger a separate updateState to\n // send along the restoreScrollPosition\n let initialScrollRestored = false;\n\n let initialMatches = matchRoutes(\n dataRoutes,\n init.history.location,\n init.basename\n );\n let initialErrors: RouteData | null = null;\n\n if (initialMatches == null) {\n // If we do not match a user-provided-route, fall back to the root\n // to allow the error boundary to take over\n let { matches, route, error } = getNotFoundMatches(dataRoutes);\n initialMatches = matches;\n initialErrors = { [route.id]: error };\n }\n\n let initialized =\n !initialMatches.some((m) => m.route.loader) || init.hydrationData != null;\n\n let router: Router;\n let state: RouterState = {\n historyAction: init.history.action,\n location: init.history.location,\n matches: initialMatches,\n initialized,\n navigation: IDLE_NAVIGATION,\n restoreScrollPosition: null,\n preventScrollReset: false,\n revalidation: \"idle\",\n loaderData: (init.hydrationData && init.hydrationData.loaderData) || {},\n actionData: (init.hydrationData && init.hydrationData.actionData) || null,\n errors: (init.hydrationData && init.hydrationData.errors) || initialErrors,\n fetchers: new Map(),\n };\n\n // -- Stateful internal variables to manage navigations --\n // Current navigation in progress (to be committed in completeNavigation)\n let pendingAction: HistoryAction = HistoryAction.Pop;\n // Should the current navigation prevent the scroll reset if scroll cannot\n // be restored?\n let pendingPreventScrollReset = false;\n // AbortController for the active navigation\n let pendingNavigationController: AbortController | null;\n // We use this to avoid touching history in completeNavigation if a\n // revalidation is entirely uninterrupted\n let isUninterruptedRevalidation = false;\n // Use this internal flag to force revalidation of all loaders:\n // - submissions (completed or interrupted)\n // - useRevalidate()\n // - X-Remix-Revalidate (from redirect)\n let isRevalidationRequired = false;\n // Use this internal array to capture routes that require revalidation due\n // to a cancelled deferred on action submission\n let cancelledDeferredRoutes: string[] = [];\n // Use this internal array to capture fetcher loads that were cancelled by an\n // action navigation and require revalidation\n let cancelledFetcherLoads: string[] = [];\n // AbortControllers for any in-flight fetchers\n let fetchControllers = new Map();\n // Track loads based on the order in which they started\n let incrementingLoadId = 0;\n // Track the outstanding pending navigation data load to be compared against\n // the globally incrementing load when a fetcher load lands after a completed\n // navigation\n let pendingNavigationLoadId = -1;\n // Fetchers that triggered data reloads as a result of their actions\n let fetchReloadIds = new Map();\n // Fetchers that triggered redirect navigations from their actions\n let fetchRedirectIds = new Set();\n // Most recent href/match for fetcher.load calls for fetchers\n let fetchLoadMatches = new Map();\n // Store DeferredData instances for active route matches. When a\n // route loader returns defer() we stick one in here. Then, when a nested\n // promise resolves we update loaderData. If a new navigation starts we\n // cancel active deferreds for eliminated routes.\n let activeDeferreds = new Map();\n\n // Initialize the router, all side effects should be kicked off from here.\n // Implemented as a Fluent API for ease of:\n // let router = createRouter(init).initialize();\n function initialize() {\n // If history informs us of a POP navigation, start the navigation but do not update\n // state. We'll update our own state once the navigation completes\n unlistenHistory = init.history.listen(\n ({ action: historyAction, location }) =>\n startNavigation(historyAction, location)\n );\n\n // Kick off initial data load if needed. Use Pop to avoid modifying history\n if (!state.initialized) {\n startNavigation(HistoryAction.Pop, state.location);\n }\n\n return router;\n }\n\n // Clean up a router and it's side effects\n function dispose() {\n if (unlistenHistory) {\n unlistenHistory();\n }\n subscribers.clear();\n pendingNavigationController && pendingNavigationController.abort();\n state.fetchers.forEach((_, key) => deleteFetcher(key));\n }\n\n // Subscribe to state updates for the router\n function subscribe(fn: RouterSubscriber) {\n subscribers.add(fn);\n return () => subscribers.delete(fn);\n }\n\n // Update our state and notify the calling context of the change\n function updateState(newState: Partial): void {\n state = {\n ...state,\n ...newState,\n };\n subscribers.forEach((subscriber) => subscriber(state));\n }\n\n // Complete a navigation returning the state.navigation back to the IDLE_NAVIGATION\n // and setting state.[historyAction/location/matches] to the new route.\n // - Location is a required param\n // - Navigation will always be set to IDLE_NAVIGATION\n // - Can pass any other state in newState\n function completeNavigation(\n location: Location,\n newState: Partial>\n ): void {\n // Deduce if we're in a loading/actionReload state:\n // - We have committed actionData in the store\n // - The current navigation was a submission\n // - We're past the submitting state and into the loading state\n // - The location we've finished loading is different from the submission\n // location, indicating we redirected from the action (avoids false\n // positives for loading/submissionRedirect when actionData returned\n // on a prior submission)\n let isActionReload =\n state.actionData != null &&\n state.navigation.formMethod != null &&\n state.navigation.state === \"loading\" &&\n state.navigation.formAction?.split(\"?\")[0] === location.pathname;\n\n // Always preserve any existing loaderData from re-used routes\n let newLoaderData = newState.loaderData\n ? {\n loaderData: mergeLoaderData(\n state.loaderData,\n newState.loaderData,\n newState.matches || []\n ),\n }\n : {};\n\n updateState({\n // Clear existing actionData on any completed navigation beyond the original\n // action, unless we're currently finishing the loading/actionReload state.\n // Do this prior to spreading in newState in case we got back to back actions\n ...(isActionReload ? {} : { actionData: null }),\n ...newState,\n ...newLoaderData,\n historyAction: pendingAction,\n location,\n initialized: true,\n navigation: IDLE_NAVIGATION,\n revalidation: \"idle\",\n // Don't restore on submission navigations\n restoreScrollPosition: state.navigation.formData\n ? false\n : getSavedScrollPosition(location, newState.matches || state.matches),\n preventScrollReset: pendingPreventScrollReset,\n });\n\n if (isUninterruptedRevalidation) {\n // If this was an uninterrupted revalidation then do not touch history\n } else if (pendingAction === HistoryAction.Pop) {\n // Do nothing for POP - URL has already been updated\n } else if (pendingAction === HistoryAction.Push) {\n init.history.push(location, location.state);\n } else if (pendingAction === HistoryAction.Replace) {\n init.history.replace(location, location.state);\n }\n\n // Reset stateful navigation vars\n pendingAction = HistoryAction.Pop;\n pendingPreventScrollReset = false;\n isUninterruptedRevalidation = false;\n isRevalidationRequired = false;\n cancelledDeferredRoutes = [];\n cancelledFetcherLoads = [];\n }\n\n // Trigger a navigation event, which can either be a numerical POP or a PUSH\n // replace with an optional submission\n async function navigate(\n to: number | To,\n opts?: RouterNavigateOptions\n ): Promise {\n if (typeof to === \"number\") {\n init.history.go(to);\n return;\n }\n\n let { path, submission, error } = normalizeNavigateOptions(to, opts);\n\n let location = createLocation(state.location, path, opts && opts.state);\n\n // When using navigate as a PUSH/REPLACE we aren't reading an already-encoded\n // URL from window.location, so we need to encode it here so the behavior\n // remains the same as POP and non-data-router usages. new URL() does all\n // the same encoding we'd get from a history.pushState/window.location read\n // without having to touch history\n location = init.history.encodeLocation(location);\n\n let historyAction =\n (opts && opts.replace) === true || submission != null\n ? HistoryAction.Replace\n : HistoryAction.Push;\n let preventScrollReset =\n opts && \"preventScrollReset\" in opts\n ? opts.preventScrollReset === true\n : undefined;\n\n return await startNavigation(historyAction, location, {\n submission,\n // Send through the formData serialization error if we have one so we can\n // render at the right error boundary after we match routes\n pendingError: error,\n preventScrollReset,\n replace: opts && opts.replace,\n });\n }\n\n // Revalidate all current loaders. If a navigation is in progress or if this\n // is interrupted by a navigation, allow this to \"succeed\" by calling all\n // loaders during the next loader round\n function revalidate() {\n interruptActiveLoads();\n updateState({ revalidation: \"loading\" });\n\n // If we're currently submitting an action, we don't need to start a new\n // navigation, we'll just let the follow up loader execution call all loaders\n if (state.navigation.state === \"submitting\") {\n return;\n }\n\n // If we're currently in an idle state, start a new navigation for the current\n // action/location and mark it as uninterrupted, which will skip the history\n // update in completeNavigation\n if (state.navigation.state === \"idle\") {\n startNavigation(state.historyAction, state.location, {\n startUninterruptedRevalidation: true,\n });\n return;\n }\n\n // Otherwise, if we're currently in a loading state, just start a new\n // navigation to the navigation.location but do not trigger an uninterrupted\n // revalidation so that history correctly updates once the navigation completes\n startNavigation(\n pendingAction || state.historyAction,\n state.navigation.location,\n { overrideNavigation: state.navigation }\n );\n }\n\n // Start a navigation to the given action/location. Can optionally provide a\n // overrideNavigation which will override the normalLoad in the case of a redirect\n // navigation\n async function startNavigation(\n historyAction: HistoryAction,\n location: Location,\n opts?: {\n submission?: Submission;\n overrideNavigation?: Navigation;\n pendingError?: ErrorResponse;\n startUninterruptedRevalidation?: boolean;\n preventScrollReset?: boolean;\n replace?: boolean;\n }\n ): Promise {\n // Abort any in-progress navigations and start a new one. Unset any ongoing\n // uninterrupted revalidations unless told otherwise, since we want this\n // new navigation to update history normally\n pendingNavigationController && pendingNavigationController.abort();\n pendingNavigationController = null;\n pendingAction = historyAction;\n isUninterruptedRevalidation =\n (opts && opts.startUninterruptedRevalidation) === true;\n\n // Save the current scroll position every time we start a new navigation,\n // and track whether we should reset scroll on completion\n saveScrollPosition(state.location, state.matches);\n pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;\n\n let loadingNavigation = opts && opts.overrideNavigation;\n let matches = matchRoutes(dataRoutes, location, init.basename);\n\n // Short circuit with a 404 on the root error boundary if we match nothing\n if (!matches) {\n let {\n matches: notFoundMatches,\n route,\n error,\n } = getNotFoundMatches(dataRoutes);\n // Cancel all pending deferred on 404s since we don't keep any routes\n cancelActiveDeferreds();\n completeNavigation(location, {\n matches: notFoundMatches,\n loaderData: {},\n errors: {\n [route.id]: error,\n },\n });\n return;\n }\n\n // Short circuit if it's only a hash change\n if (isHashChangeOnly(state.location, location)) {\n completeNavigation(location, { matches });\n return;\n }\n\n // Create a controller/Request for this navigation\n pendingNavigationController = new AbortController();\n let request = createRequest(\n location,\n pendingNavigationController.signal,\n opts && opts.submission\n );\n let pendingActionData: RouteData | undefined;\n let pendingError: RouteData | undefined;\n\n if (opts && opts.pendingError) {\n // If we have a pendingError, it means the user attempted a GET submission\n // with binary FormData so assign here and skip to handleLoaders. That\n // way we handle calling loaders above the boundary etc. It's not really\n // different from an actionError in that sense.\n pendingError = {\n [findNearestBoundary(matches).route.id]: opts.pendingError,\n };\n } else if (opts && opts.submission) {\n // Call action if we received an action submission\n let actionOutput = await handleAction(\n request,\n location,\n opts.submission,\n matches,\n { replace: opts.replace }\n );\n\n if (actionOutput.shortCircuited) {\n return;\n }\n\n pendingActionData = actionOutput.pendingActionData;\n pendingError = actionOutput.pendingActionError;\n\n let navigation: NavigationStates[\"Loading\"] = {\n state: \"loading\",\n location,\n ...opts.submission,\n };\n loadingNavigation = navigation;\n }\n\n // Call loaders\n let { shortCircuited, loaderData, errors } = await handleLoaders(\n request,\n location,\n matches,\n loadingNavigation,\n opts && opts.submission,\n opts && opts.replace,\n pendingActionData,\n pendingError\n );\n\n if (shortCircuited) {\n return;\n }\n\n // Clean up now that the action/loaders have completed. Don't clean up if\n // we short circuited because pendingNavigationController will have already\n // been assigned to a new controller for the next navigation\n pendingNavigationController = null;\n\n completeNavigation(location, {\n matches,\n loaderData,\n errors,\n });\n }\n\n // Call the action matched by the leaf route for this navigation and handle\n // redirects/errors\n async function handleAction(\n request: Request,\n location: Location,\n submission: Submission,\n matches: AgnosticDataRouteMatch[],\n opts?: { replace?: boolean }\n ): Promise {\n interruptActiveLoads();\n\n // Put us in a submitting state\n let navigation: NavigationStates[\"Submitting\"] = {\n state: \"submitting\",\n location,\n ...submission,\n };\n updateState({ navigation });\n\n // Call our action and get the result\n let result: DataResult;\n let actionMatch = getTargetMatch(matches, location);\n\n if (!actionMatch.route.action) {\n result = getMethodNotAllowedResult(location);\n } else {\n result = await callLoaderOrAction(\n \"action\",\n request,\n actionMatch,\n matches,\n router.basename\n );\n\n if (request.signal.aborted) {\n return { shortCircuited: true };\n }\n }\n\n if (isRedirectResult(result)) {\n let redirectNavigation: NavigationStates[\"Loading\"] = {\n state: \"loading\",\n location: createLocation(state.location, result.location),\n ...submission,\n };\n await startRedirectNavigation(\n result,\n redirectNavigation,\n opts && opts.replace\n );\n return { shortCircuited: true };\n }\n\n if (isErrorResult(result)) {\n // Store off the pending error - we use it to determine which loaders\n // to call and will commit it when we complete the navigation\n let boundaryMatch = findNearestBoundary(matches, actionMatch.route.id);\n\n // By default, all submissions are REPLACE navigations, but if the\n // action threw an error that'll be rendered in an errorElement, we fall\n // back to PUSH so that the user can use the back button to get back to\n // the pre-submission form location to try again\n if ((opts && opts.replace) !== true) {\n pendingAction = HistoryAction.Push;\n }\n\n return {\n pendingActionError: { [boundaryMatch.route.id]: result.error },\n };\n }\n\n if (isDeferredResult(result)) {\n throw new Error(\"defer() is not supported in actions\");\n }\n\n return {\n pendingActionData: { [actionMatch.route.id]: result.data },\n };\n }\n\n // Call all applicable loaders for the given matches, handling redirects,\n // errors, etc.\n async function handleLoaders(\n request: Request,\n location: Location,\n matches: AgnosticDataRouteMatch[],\n overrideNavigation?: Navigation,\n submission?: Submission,\n replace?: boolean,\n pendingActionData?: RouteData,\n pendingError?: RouteData\n ): Promise {\n // Figure out the right navigation we want to use for data loading\n let loadingNavigation = overrideNavigation;\n if (!loadingNavigation) {\n let navigation: NavigationStates[\"Loading\"] = {\n state: \"loading\",\n location,\n formMethod: undefined,\n formAction: undefined,\n formEncType: undefined,\n formData: undefined,\n };\n loadingNavigation = navigation;\n }\n\n let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(\n state,\n matches,\n submission,\n location,\n isRevalidationRequired,\n cancelledDeferredRoutes,\n cancelledFetcherLoads,\n pendingActionData,\n pendingError,\n fetchLoadMatches\n );\n\n // Cancel pending deferreds for no-longer-matched routes or routes we're\n // about to reload. Note that if this is an action reload we would have\n // already cancelled all pending deferreds so this would be a no-op\n cancelActiveDeferreds(\n (routeId) =>\n !(matches && matches.some((m) => m.route.id === routeId)) ||\n (matchesToLoad && matchesToLoad.some((m) => m.route.id === routeId))\n );\n\n // Short circuit if we have no loaders to run\n if (matchesToLoad.length === 0 && revalidatingFetchers.length === 0) {\n completeNavigation(location, {\n matches,\n loaderData: mergeLoaderData(state.loaderData, {}, matches),\n // Commit pending error if we're short circuiting\n errors: pendingError || null,\n actionData: pendingActionData || null,\n });\n return { shortCircuited: true };\n }\n\n // If this is an uninterrupted revalidation, we remain in our current idle\n // state. If not, we need to switch to our loading state and load data,\n // preserving any new action data or existing action data (in the case of\n // a revalidation interrupting an actionReload)\n if (!isUninterruptedRevalidation) {\n revalidatingFetchers.forEach(([key]) => {\n let fetcher = state.fetchers.get(key);\n let revalidatingFetcher: FetcherStates[\"Loading\"] = {\n state: \"loading\",\n data: fetcher && fetcher.data,\n formMethod: undefined,\n formAction: undefined,\n formEncType: undefined,\n formData: undefined,\n };\n state.fetchers.set(key, revalidatingFetcher);\n });\n updateState({\n navigation: loadingNavigation,\n actionData: pendingActionData || state.actionData || null,\n ...(revalidatingFetchers.length > 0\n ? { fetchers: new Map(state.fetchers) }\n : {}),\n });\n }\n\n pendingNavigationLoadId = ++incrementingLoadId;\n revalidatingFetchers.forEach(([key]) =>\n fetchControllers.set(key, pendingNavigationController!)\n );\n\n let { results, loaderResults, fetcherResults } =\n await callLoadersAndMaybeResolveData(\n state.matches,\n matches,\n matchesToLoad,\n revalidatingFetchers,\n request\n );\n\n if (request.signal.aborted) {\n return { shortCircuited: true };\n }\n\n // Clean up _after_ loaders have completed. Don't clean up if we short\n // circuited because fetchControllers would have been aborted and\n // reassigned to new controllers for the next navigation\n revalidatingFetchers.forEach(([key]) => fetchControllers.delete(key));\n\n // If any loaders returned a redirect Response, start a new REPLACE navigation\n let redirect = findRedirect(results);\n if (redirect) {\n let redirectNavigation = getLoaderRedirect(state, redirect);\n await startRedirectNavigation(redirect, redirectNavigation, replace);\n return { shortCircuited: true };\n }\n\n // Process and commit output from loaders\n let { loaderData, errors } = processLoaderData(\n state,\n matches,\n matchesToLoad,\n loaderResults,\n pendingError,\n revalidatingFetchers,\n fetcherResults,\n activeDeferreds\n );\n\n // Wire up subscribers to update loaderData as promises settle\n activeDeferreds.forEach((deferredData, routeId) => {\n deferredData.subscribe((aborted) => {\n // Note: No need to updateState here since the TrackedPromise on\n // loaderData is stable across resolve/reject\n // Remove this instance if we were aborted or if promises have settled\n if (aborted || deferredData.done) {\n activeDeferreds.delete(routeId);\n }\n });\n });\n\n markFetchRedirectsDone();\n let didAbortFetchLoads = abortStaleFetchLoads(pendingNavigationLoadId);\n\n return {\n loaderData,\n errors,\n ...(didAbortFetchLoads || revalidatingFetchers.length > 0\n ? { fetchers: new Map(state.fetchers) }\n : {}),\n };\n }\n\n function getFetcher(key: string): Fetcher {\n return state.fetchers.get(key) || IDLE_FETCHER;\n }\n\n // Trigger a fetcher load/submit for the given fetcher key\n function fetch(\n key: string,\n routeId: string,\n href: string,\n opts?: RouterFetchOptions\n ) {\n if (isServer) {\n throw new Error(\n \"router.fetch() was called during the server render, but it shouldn't be. \" +\n \"You are likely calling a useFetcher() method in the body of your component. \" +\n \"Try moving it to a useEffect or a callback.\"\n );\n }\n\n if (fetchControllers.has(key)) abortFetcher(key);\n\n let matches = matchRoutes(dataRoutes, href, init.basename);\n if (!matches) {\n setFetcherError(key, routeId, new ErrorResponse(404, \"Not Found\", null));\n return;\n }\n\n let { path, submission } = normalizeNavigateOptions(href, opts, true);\n let match = getTargetMatch(matches, path);\n\n if (submission) {\n handleFetcherAction(key, routeId, path, match, matches, submission);\n return;\n }\n\n // Store off the match so we can call it's shouldRevalidate on subsequent\n // revalidations\n fetchLoadMatches.set(key, [path, match, matches]);\n handleFetcherLoader(key, routeId, path, match, matches);\n }\n\n // Call the action for the matched fetcher.submit(), and then handle redirects,\n // errors, and revalidation\n async function handleFetcherAction(\n key: string,\n routeId: string,\n path: string,\n match: AgnosticDataRouteMatch,\n requestMatches: AgnosticDataRouteMatch[],\n submission: Submission\n ) {\n interruptActiveLoads();\n fetchLoadMatches.delete(key);\n\n if (!match.route.action) {\n let { error } = getMethodNotAllowedResult(path);\n setFetcherError(key, routeId, error);\n return;\n }\n\n // Put this fetcher into it's submitting state\n let existingFetcher = state.fetchers.get(key);\n let fetcher: FetcherStates[\"Submitting\"] = {\n state: \"submitting\",\n ...submission,\n data: existingFetcher && existingFetcher.data,\n };\n state.fetchers.set(key, fetcher);\n updateState({ fetchers: new Map(state.fetchers) });\n\n // Call the action for the fetcher\n let abortController = new AbortController();\n let fetchRequest = createRequest(path, abortController.signal, submission);\n fetchControllers.set(key, abortController);\n\n let actionResult = await callLoaderOrAction(\n \"action\",\n fetchRequest,\n match,\n requestMatches,\n router.basename\n );\n\n if (fetchRequest.signal.aborted) {\n // We can delete this so long as we weren't aborted by ou our own fetcher\n // re-submit which would have put _new_ controller is in fetchControllers\n if (fetchControllers.get(key) === abortController) {\n fetchControllers.delete(key);\n }\n return;\n }\n\n if (isRedirectResult(actionResult)) {\n fetchControllers.delete(key);\n fetchRedirectIds.add(key);\n let loadingFetcher: FetcherStates[\"Loading\"] = {\n state: \"loading\",\n ...submission,\n data: undefined,\n };\n state.fetchers.set(key, loadingFetcher);\n updateState({ fetchers: new Map(state.fetchers) });\n\n let redirectNavigation: NavigationStates[\"Loading\"] = {\n state: \"loading\",\n location: createLocation(state.location, actionResult.location),\n ...submission,\n };\n await startRedirectNavigation(actionResult, redirectNavigation);\n return;\n }\n\n // Process any non-redirect errors thrown\n if (isErrorResult(actionResult)) {\n setFetcherError(key, routeId, actionResult.error);\n return;\n }\n\n if (isDeferredResult(actionResult)) {\n invariant(false, \"defer() is not supported in actions\");\n }\n\n // Start the data load for current matches, or the next location if we're\n // in the middle of a navigation\n let nextLocation = state.navigation.location || state.location;\n let revalidationRequest = createRequest(\n nextLocation,\n abortController.signal\n );\n let matches =\n state.navigation.state !== \"idle\"\n ? matchRoutes(dataRoutes, state.navigation.location, init.basename)\n : state.matches;\n\n invariant(matches, \"Didn't find any matches after fetcher action\");\n\n let loadId = ++incrementingLoadId;\n fetchReloadIds.set(key, loadId);\n\n let loadFetcher: FetcherStates[\"Loading\"] = {\n state: \"loading\",\n data: actionResult.data,\n ...submission,\n };\n state.fetchers.set(key, loadFetcher);\n\n let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(\n state,\n matches,\n submission,\n nextLocation,\n isRevalidationRequired,\n cancelledDeferredRoutes,\n cancelledFetcherLoads,\n { [match.route.id]: actionResult.data },\n undefined, // No need to send through errors since we short circuit above\n fetchLoadMatches\n );\n\n // Put all revalidating fetchers into the loading state, except for the\n // current fetcher which we want to keep in it's current loading state which\n // contains it's action submission info + action data\n revalidatingFetchers\n .filter(([staleKey]) => staleKey !== key)\n .forEach(([staleKey]) => {\n let existingFetcher = state.fetchers.get(staleKey);\n let revalidatingFetcher: FetcherStates[\"Loading\"] = {\n state: \"loading\",\n data: existingFetcher && existingFetcher.data,\n formMethod: undefined,\n formAction: undefined,\n formEncType: undefined,\n formData: undefined,\n };\n state.fetchers.set(staleKey, revalidatingFetcher);\n fetchControllers.set(staleKey, abortController);\n });\n\n updateState({ fetchers: new Map(state.fetchers) });\n\n let { results, loaderResults, fetcherResults } =\n await callLoadersAndMaybeResolveData(\n state.matches,\n matches,\n matchesToLoad,\n revalidatingFetchers,\n revalidationRequest\n );\n\n if (abortController.signal.aborted) {\n return;\n }\n\n fetchReloadIds.delete(key);\n fetchControllers.delete(key);\n revalidatingFetchers.forEach(([staleKey]) =>\n fetchControllers.delete(staleKey)\n );\n\n let redirect = findRedirect(results);\n if (redirect) {\n let redirectNavigation = getLoaderRedirect(state, redirect);\n await startRedirectNavigation(redirect, redirectNavigation);\n return;\n }\n\n // Process and commit output from loaders\n let { loaderData, errors } = processLoaderData(\n state,\n state.matches,\n matchesToLoad,\n loaderResults,\n undefined,\n revalidatingFetchers,\n fetcherResults,\n activeDeferreds\n );\n\n let doneFetcher: FetcherStates[\"Idle\"] = {\n state: \"idle\",\n data: actionResult.data,\n formMethod: undefined,\n formAction: undefined,\n formEncType: undefined,\n formData: undefined,\n };\n state.fetchers.set(key, doneFetcher);\n\n let didAbortFetchLoads = abortStaleFetchLoads(loadId);\n\n // If we are currently in a navigation loading state and this fetcher is\n // more recent than the navigation, we want the newer data so abort the\n // navigation and complete it with the fetcher data\n if (\n state.navigation.state === \"loading\" &&\n loadId > pendingNavigationLoadId\n ) {\n invariant(pendingAction, \"Expected pending action\");\n pendingNavigationController && pendingNavigationController.abort();\n\n completeNavigation(state.navigation.location, {\n matches,\n loaderData,\n errors,\n fetchers: new Map(state.fetchers),\n });\n } else {\n // otherwise just update with the fetcher data, preserving any existing\n // loaderData for loaders that did not need to reload. We have to\n // manually merge here since we aren't going through completeNavigation\n updateState({\n errors,\n loaderData: mergeLoaderData(state.loaderData, loaderData, matches),\n ...(didAbortFetchLoads ? { fetchers: new Map(state.fetchers) } : {}),\n });\n isRevalidationRequired = false;\n }\n }\n\n // Call the matched loader for fetcher.load(), handling redirects, errors, etc.\n async function handleFetcherLoader(\n key: string,\n routeId: string,\n path: string,\n match: AgnosticDataRouteMatch,\n matches: AgnosticDataRouteMatch[]\n ) {\n let existingFetcher = state.fetchers.get(key);\n // Put this fetcher into it's loading state\n let loadingFetcher: FetcherStates[\"Loading\"] = {\n state: \"loading\",\n formMethod: undefined,\n formAction: undefined,\n formEncType: undefined,\n formData: undefined,\n data: existingFetcher && existingFetcher.data,\n };\n state.fetchers.set(key, loadingFetcher);\n updateState({ fetchers: new Map(state.fetchers) });\n\n // Call the loader for this fetcher route match\n let abortController = new AbortController();\n let fetchRequest = createRequest(path, abortController.signal);\n fetchControllers.set(key, abortController);\n let result: DataResult = await callLoaderOrAction(\n \"loader\",\n fetchRequest,\n match,\n matches,\n router.basename\n );\n\n // Deferred isn't supported or fetcher loads, await everything and treat it\n // as a normal load. resolveDeferredData will return undefined if this\n // fetcher gets aborted, so we just leave result untouched and short circuit\n // below if that happens\n if (isDeferredResult(result)) {\n result =\n (await resolveDeferredData(result, fetchRequest.signal, true)) ||\n result;\n }\n\n // We can delete this so long as we weren't aborted by ou our own fetcher\n // re-load which would have put _new_ controller is in fetchControllers\n if (fetchControllers.get(key) === abortController) {\n fetchControllers.delete(key);\n }\n\n if (fetchRequest.signal.aborted) {\n return;\n }\n\n // If the loader threw a redirect Response, start a new REPLACE navigation\n if (isRedirectResult(result)) {\n let redirectNavigation = getLoaderRedirect(state, result);\n await startRedirectNavigation(result, redirectNavigation);\n return;\n }\n\n // Process any non-redirect errors thrown\n if (isErrorResult(result)) {\n let boundaryMatch = findNearestBoundary(state.matches, routeId);\n state.fetchers.delete(key);\n // TODO: In remix, this would reset to IDLE_NAVIGATION if it was a catch -\n // do we need to behave any differently with our non-redirect errors?\n // What if it was a non-redirect Response?\n updateState({\n fetchers: new Map(state.fetchers),\n errors: {\n [boundaryMatch.route.id]: result.error,\n },\n });\n return;\n }\n\n invariant(!isDeferredResult(result), \"Unhandled fetcher deferred data\");\n\n // Put the fetcher back into an idle state\n let doneFetcher: FetcherStates[\"Idle\"] = {\n state: \"idle\",\n data: result.data,\n formMethod: undefined,\n formAction: undefined,\n formEncType: undefined,\n formData: undefined,\n };\n state.fetchers.set(key, doneFetcher);\n updateState({ fetchers: new Map(state.fetchers) });\n }\n\n /**\n * Utility function to handle redirects returned from an action or loader.\n * Normally, a redirect \"replaces\" the navigation that triggered it. So, for\n * example:\n *\n * - user is on /a\n * - user clicks a link to /b\n * - loader for /b redirects to /c\n *\n * In a non-JS app the browser would track the in-flight navigation to /b and\n * then replace it with /c when it encountered the redirect response. In\n * the end it would only ever update the URL bar with /c.\n *\n * In client-side routing using pushState/replaceState, we aim to emulate\n * this behavior and we also do not update history until the end of the\n * navigation (including processed redirects). This means that we never\n * actually touch history until we've processed redirects, so we just use\n * the history action from the original navigation (PUSH or REPLACE).\n */\n async function startRedirectNavigation(\n redirect: RedirectResult,\n navigation: Navigation,\n replace?: boolean\n ) {\n if (redirect.revalidate) {\n isRevalidationRequired = true;\n }\n invariant(\n navigation.location,\n \"Expected a location on the redirect navigation\"\n );\n // There's no need to abort on redirects, since we don't detect the\n // redirect until the action/loaders have settled\n pendingNavigationController = null;\n\n let redirectHistoryAction =\n replace === true ? HistoryAction.Replace : HistoryAction.Push;\n\n await startNavigation(redirectHistoryAction, navigation.location, {\n overrideNavigation: navigation,\n });\n }\n\n async function callLoadersAndMaybeResolveData(\n currentMatches: AgnosticDataRouteMatch[],\n matches: AgnosticDataRouteMatch[],\n matchesToLoad: AgnosticDataRouteMatch[],\n fetchersToLoad: RevalidatingFetcher[],\n request: Request\n ) {\n // Call all navigation loaders and revalidating fetcher loaders in parallel,\n // then slice off the results into separate arrays so we can handle them\n // accordingly\n let results = await Promise.all([\n ...matchesToLoad.map((match) =>\n callLoaderOrAction(\"loader\", request, match, matches, router.basename)\n ),\n ...fetchersToLoad.map(([, href, match, fetchMatches]) =>\n callLoaderOrAction(\n \"loader\",\n createRequest(href, request.signal),\n match,\n fetchMatches,\n router.basename\n )\n ),\n ]);\n let loaderResults = results.slice(0, matchesToLoad.length);\n let fetcherResults = results.slice(matchesToLoad.length);\n\n await Promise.all([\n resolveDeferredResults(\n currentMatches,\n matchesToLoad,\n loaderResults,\n request.signal,\n false,\n state.loaderData\n ),\n resolveDeferredResults(\n currentMatches,\n fetchersToLoad.map(([, , match]) => match),\n fetcherResults,\n request.signal,\n true\n ),\n ]);\n\n return { results, loaderResults, fetcherResults };\n }\n\n function interruptActiveLoads() {\n // Every interruption triggers a revalidation\n isRevalidationRequired = true;\n\n // Cancel pending route-level deferreds and mark cancelled routes for\n // revalidation\n cancelledDeferredRoutes.push(...cancelActiveDeferreds());\n\n // Abort in-flight fetcher loads\n fetchLoadMatches.forEach((_, key) => {\n if (fetchControllers.has(key)) {\n cancelledFetcherLoads.push(key);\n abortFetcher(key);\n }\n });\n }\n\n function setFetcherError(key: string, routeId: string, error: any) {\n let boundaryMatch = findNearestBoundary(state.matches, routeId);\n deleteFetcher(key);\n updateState({\n errors: {\n [boundaryMatch.route.id]: error,\n },\n fetchers: new Map(state.fetchers),\n });\n }\n\n function deleteFetcher(key: string): void {\n if (fetchControllers.has(key)) abortFetcher(key);\n fetchLoadMatches.delete(key);\n fetchReloadIds.delete(key);\n fetchRedirectIds.delete(key);\n state.fetchers.delete(key);\n }\n\n function abortFetcher(key: string) {\n let controller = fetchControllers.get(key);\n invariant(controller, `Expected fetch controller: ${key}`);\n controller.abort();\n fetchControllers.delete(key);\n }\n\n function markFetchersDone(keys: string[]) {\n for (let key of keys) {\n let fetcher = getFetcher(key);\n let doneFetcher: FetcherStates[\"Idle\"] = {\n state: \"idle\",\n data: fetcher.data,\n formMethod: undefined,\n formAction: undefined,\n formEncType: undefined,\n formData: undefined,\n };\n state.fetchers.set(key, doneFetcher);\n }\n }\n\n function markFetchRedirectsDone(): void {\n let doneKeys = [];\n for (let key of fetchRedirectIds) {\n let fetcher = state.fetchers.get(key);\n invariant(fetcher, `Expected fetcher: ${key}`);\n if (fetcher.state === \"loading\") {\n fetchRedirectIds.delete(key);\n doneKeys.push(key);\n }\n }\n markFetchersDone(doneKeys);\n }\n\n function abortStaleFetchLoads(landedId: number): boolean {\n let yeetedKeys = [];\n for (let [key, id] of fetchReloadIds) {\n if (id < landedId) {\n let fetcher = state.fetchers.get(key);\n invariant(fetcher, `Expected fetcher: ${key}`);\n if (fetcher.state === \"loading\") {\n abortFetcher(key);\n fetchReloadIds.delete(key);\n yeetedKeys.push(key);\n }\n }\n }\n markFetchersDone(yeetedKeys);\n return yeetedKeys.length > 0;\n }\n\n function cancelActiveDeferreds(\n predicate?: (routeId: string) => boolean\n ): string[] {\n let cancelledRouteIds: string[] = [];\n activeDeferreds.forEach((dfd, routeId) => {\n if (!predicate || predicate(routeId)) {\n // Cancel the deferred - but do not remove from activeDeferreds here -\n // we rely on the subscribers to do that so our tests can assert proper\n // cleanup via _internalActiveDeferreds\n dfd.cancel();\n cancelledRouteIds.push(routeId);\n activeDeferreds.delete(routeId);\n }\n });\n return cancelledRouteIds;\n }\n\n // Opt in to capturing and reporting scroll positions during navigations,\n // used by the component\n function enableScrollRestoration(\n positions: Record,\n getPosition: GetScrollPositionFunction,\n getKey?: GetScrollRestorationKeyFunction\n ) {\n savedScrollPositions = positions;\n getScrollPosition = getPosition;\n getScrollRestorationKey = getKey || ((location) => location.key);\n\n // Perform initial hydration scroll restoration, since we miss the boat on\n // the initial updateState() because we've not yet rendered \n // and therefore have no savedScrollPositions available\n if (!initialScrollRestored && state.navigation === IDLE_NAVIGATION) {\n initialScrollRestored = true;\n let y = getSavedScrollPosition(state.location, state.matches);\n if (y != null) {\n updateState({ restoreScrollPosition: y });\n }\n }\n\n return () => {\n savedScrollPositions = null;\n getScrollPosition = null;\n getScrollRestorationKey = null;\n };\n }\n\n function saveScrollPosition(\n location: Location,\n matches: AgnosticDataRouteMatch[]\n ): void {\n if (savedScrollPositions && getScrollRestorationKey && getScrollPosition) {\n let userMatches = matches.map((m) =>\n createUseMatchesMatch(m, state.loaderData)\n );\n let key = getScrollRestorationKey(location, userMatches) || location.key;\n savedScrollPositions[key] = getScrollPosition();\n }\n }\n\n function getSavedScrollPosition(\n location: Location,\n matches: AgnosticDataRouteMatch[]\n ): number | null {\n if (savedScrollPositions && getScrollRestorationKey && getScrollPosition) {\n let userMatches = matches.map((m) =>\n createUseMatchesMatch(m, state.loaderData)\n );\n let key = getScrollRestorationKey(location, userMatches) || location.key;\n let y = savedScrollPositions[key];\n if (typeof y === \"number\") {\n return y;\n }\n }\n return null;\n }\n\n router = {\n get basename() {\n return init.basename;\n },\n get state() {\n return state;\n },\n get routes() {\n return dataRoutes;\n },\n initialize,\n subscribe,\n enableScrollRestoration,\n navigate,\n fetch,\n revalidate,\n // Passthrough to history-aware createHref used by useHref so we get proper\n // hash-aware URLs in DOM paths\n createHref: (to: To) => init.history.createHref(to),\n getFetcher,\n deleteFetcher,\n dispose,\n _internalFetchControllers: fetchControllers,\n _internalActiveDeferreds: activeDeferreds,\n };\n\n return router;\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region createStaticHandler\n////////////////////////////////////////////////////////////////////////////////\n\nconst validActionMethods = new Set([\"POST\", \"PUT\", \"PATCH\", \"DELETE\"]);\nconst validRequestMethods = new Set([\"GET\", \"HEAD\", ...validActionMethods]);\n\nexport function unstable_createStaticHandler(\n routes: AgnosticRouteObject[]\n): StaticHandler {\n invariant(\n routes.length > 0,\n \"You must provide a non-empty routes array to unstable_createStaticHandler\"\n );\n\n let dataRoutes = convertRoutesToDataRoutes(routes);\n\n /**\n * The query() method is intended for document requests, in which we want to\n * call an optional action and potentially multiple loaders for all nested\n * routes. It returns a StaticHandlerContext object, which is very similar\n * to the router state (location, loaderData, actionData, errors, etc.) and\n * also adds SSR-specific information such as the statusCode and headers\n * from action/loaders Responses.\n *\n * It _should_ never throw and should report all errors through the\n * returned context.errors object, properly associating errors to their error\n * boundary. Additionally, it tracks _deepestRenderedBoundaryId which can be\n * used to emulate React error boundaries during SSr by performing a second\n * pass only down to the boundaryId.\n *\n * The one exception where we do not return a StaticHandlerContext is when a\n * redirect response is returned or thrown from any action/loader. We\n * propagate that out and return the raw Response so the HTTP server can\n * return it directly.\n */\n async function query(\n request: Request\n ): Promise {\n let url = new URL(request.url);\n let location = createLocation(\"\", createPath(url), null, \"default\");\n let matches = matchRoutes(dataRoutes, location);\n\n if (!validRequestMethods.has(request.method)) {\n let {\n matches: methodNotAllowedMatches,\n route,\n error,\n } = getMethodNotAllowedMatches(dataRoutes);\n return {\n location,\n matches: methodNotAllowedMatches,\n loaderData: {},\n actionData: null,\n errors: {\n [route.id]: error,\n },\n statusCode: error.status,\n loaderHeaders: {},\n actionHeaders: {},\n };\n } else if (!matches) {\n let {\n matches: notFoundMatches,\n route,\n error,\n } = getNotFoundMatches(dataRoutes);\n return {\n location,\n matches: notFoundMatches,\n loaderData: {},\n actionData: null,\n errors: {\n [route.id]: error,\n },\n statusCode: error.status,\n loaderHeaders: {},\n actionHeaders: {},\n };\n }\n\n let result = await queryImpl(request, location, matches);\n if (result instanceof Response) {\n return result;\n }\n\n // When returning StaticHandlerContext, we patch back in the location here\n // since we need it for React Context. But this helps keep our submit and\n // loadRouteData operating on a Request instead of a Location\n return { location, ...result };\n }\n\n /**\n * The queryRoute() method is intended for targeted route requests, either\n * for fetch ?_data requests or resource route requests. In this case, we\n * are only ever calling a single action or loader, and we are returning the\n * returned value directly. In most cases, this will be a Response returned\n * from the action/loader, but it may be a primitive or other value as well -\n * and in such cases the calling context should handle that accordingly.\n *\n * We do respect the throw/return differentiation, so if an action/loader\n * throws, then this method will throw the value. This is important so we\n * can do proper boundary identification in Remix where a thrown Response\n * must go to the Catch Boundary but a returned Response is happy-path.\n *\n * One thing to note is that any Router-initiated thrown Response (such as a\n * 404 or 405) will have a custom X-Remix-Router-Error: \"yes\" header on it\n * in order to differentiate from responses thrown from user actions/loaders.\n */\n async function queryRoute(request: Request, routeId?: string): Promise {\n let url = new URL(request.url);\n let location = createLocation(\"\", createPath(url), null, \"default\");\n let matches = matchRoutes(dataRoutes, location);\n\n if (!validRequestMethods.has(request.method)) {\n throw createRouterErrorResponse(null, {\n status: 405,\n statusText: \"Method Not Allowed\",\n });\n } else if (!matches) {\n throw createRouterErrorResponse(null, {\n status: 404,\n statusText: \"Not Found\",\n });\n }\n\n let match = routeId\n ? matches.find((m) => m.route.id === routeId)\n : getTargetMatch(matches, location);\n\n if (!match) {\n throw createRouterErrorResponse(null, {\n status: 404,\n statusText: \"Not Found\",\n });\n }\n\n let result = await queryImpl(request, location, matches, match);\n if (result instanceof Response) {\n return result;\n }\n\n let error = result.errors ? Object.values(result.errors)[0] : undefined;\n if (error !== undefined) {\n // If we got back result.errors, that means the loader/action threw\n // _something_ that wasn't a Response, but it's not guaranteed/required\n // to be an `instanceof Error` either, so we have to use throw here to\n // preserve the \"error\" state outside of queryImpl.\n throw error;\n }\n\n // Pick off the right state value to return\n let routeData = [result.actionData, result.loaderData].find((v) => v);\n return Object.values(routeData || {})[0];\n }\n\n async function queryImpl(\n request: Request,\n location: Location,\n matches: AgnosticDataRouteMatch[],\n routeMatch?: AgnosticDataRouteMatch\n ): Promise | Response> {\n invariant(\n request.signal,\n \"query()/queryRoute() requests must contain an AbortController signal\"\n );\n\n try {\n if (validActionMethods.has(request.method)) {\n let result = await submit(\n request,\n matches,\n routeMatch || getTargetMatch(matches, location),\n routeMatch != null\n );\n return result;\n }\n\n let result = await loadRouteData(request, matches, routeMatch);\n return result instanceof Response\n ? result\n : {\n ...result,\n actionData: null,\n actionHeaders: {},\n };\n } catch (e) {\n // If the user threw/returned a Response in callLoaderOrAction, we throw\n // it to bail out and then return or throw here based on whether the user\n // returned or threw\n if (isQueryRouteResponse(e)) {\n if (e.type === ResultType.error && !isRedirectResponse(e.response)) {\n throw e.response;\n }\n return e.response;\n }\n // Redirects are always returned since they don't propagate to catch\n // boundaries\n if (isRedirectResponse(e)) {\n return e;\n }\n throw e;\n }\n }\n\n async function submit(\n request: Request,\n matches: AgnosticDataRouteMatch[],\n actionMatch: AgnosticDataRouteMatch,\n isRouteRequest: boolean\n ): Promise | Response> {\n let result: DataResult;\n if (!actionMatch.route.action) {\n if (isRouteRequest) {\n throw createRouterErrorResponse(null, {\n status: 405,\n statusText: \"Method Not Allowed\",\n });\n }\n result = getMethodNotAllowedResult(request.url);\n } else {\n result = await callLoaderOrAction(\n \"action\",\n request,\n actionMatch,\n matches,\n undefined, // Basename not currently supported in static handlers\n true,\n isRouteRequest\n );\n\n if (request.signal.aborted) {\n let method = isRouteRequest ? \"queryRoute\" : \"query\";\n throw new Error(`${method}() call aborted`);\n }\n }\n\n if (isRedirectResult(result)) {\n // Uhhhh - this should never happen, we should always throw these from\n // callLoaderOrAction, but the type narrowing here keeps TS happy and we\n // can get back on the \"throw all redirect responses\" train here should\n // this ever happen :/\n throw new Response(null, {\n status: result.status,\n headers: {\n Location: result.location,\n },\n });\n }\n\n if (isDeferredResult(result)) {\n throw new Error(\"defer() is not supported in actions\");\n }\n\n if (isRouteRequest) {\n // Note: This should only be non-Response values if we get here, since\n // isRouteRequest should throw any Response received in callLoaderOrAction\n if (isErrorResult(result)) {\n let boundaryMatch = findNearestBoundary(matches, actionMatch.route.id);\n return {\n matches: [actionMatch],\n loaderData: {},\n actionData: null,\n errors: {\n [boundaryMatch.route.id]: result.error,\n },\n // Note: statusCode + headers are unused here since queryRoute will\n // return the raw Response or value\n statusCode: 500,\n loaderHeaders: {},\n actionHeaders: {},\n };\n }\n\n return {\n matches: [actionMatch],\n loaderData: {},\n actionData: { [actionMatch.route.id]: result.data },\n errors: null,\n // Note: statusCode + headers are unused here since queryRoute will\n // return the raw Response or value\n statusCode: 200,\n loaderHeaders: {},\n actionHeaders: {},\n };\n }\n\n if (isErrorResult(result)) {\n // Store off the pending error - we use it to determine which loaders\n // to call and will commit it when we complete the navigation\n let boundaryMatch = findNearestBoundary(matches, actionMatch.route.id);\n let context = await loadRouteData(request, matches, undefined, {\n [boundaryMatch.route.id]: result.error,\n });\n\n // action status codes take precedence over loader status codes\n return {\n ...context,\n statusCode: isRouteErrorResponse(result.error)\n ? result.error.status\n : 500,\n actionData: null,\n actionHeaders: {\n ...(result.headers ? { [actionMatch.route.id]: result.headers } : {}),\n },\n };\n }\n\n let context = await loadRouteData(request, matches);\n\n return {\n ...context,\n // action status codes take precedence over loader status codes\n ...(result.statusCode ? { statusCode: result.statusCode } : {}),\n actionData: {\n [actionMatch.route.id]: result.data,\n },\n actionHeaders: {\n ...(result.headers ? { [actionMatch.route.id]: result.headers } : {}),\n },\n };\n }\n\n async function loadRouteData(\n request: Request,\n matches: AgnosticDataRouteMatch[],\n routeMatch?: AgnosticDataRouteMatch,\n pendingActionError?: RouteData\n ): Promise<\n | Omit\n | Response\n > {\n let isRouteRequest = routeMatch != null;\n let requestMatches = routeMatch\n ? [routeMatch]\n : getLoaderMatchesUntilBoundary(\n matches,\n Object.keys(pendingActionError || {})[0]\n );\n let matchesToLoad = requestMatches.filter((m) => m.route.loader);\n\n // Short circuit if we have no loaders to run\n if (matchesToLoad.length === 0) {\n return {\n matches,\n loaderData: {},\n errors: pendingActionError || null,\n statusCode: 200,\n loaderHeaders: {},\n };\n }\n\n let results = await Promise.all([\n ...matchesToLoad.map((match) =>\n callLoaderOrAction(\n \"loader\",\n request,\n match,\n matches,\n undefined, // Basename not currently supported in static handlers\n true,\n isRouteRequest\n )\n ),\n ]);\n\n if (request.signal.aborted) {\n let method = isRouteRequest ? \"queryRoute\" : \"query\";\n throw new Error(`${method}() call aborted`);\n }\n\n // Can't do anything with these without the Remix side of things, so just\n // cancel them for now\n results.forEach((result) => {\n if (isDeferredResult(result)) {\n result.deferredData.cancel();\n }\n });\n\n // Process and commit output from loaders\n let context = processRouteLoaderData(\n matches,\n matchesToLoad,\n results,\n pendingActionError\n );\n\n return {\n ...context,\n matches,\n };\n }\n\n function createRouterErrorResponse(\n body: BodyInit | null | undefined,\n init: ResponseInit\n ) {\n return new Response(body, {\n ...init,\n headers: {\n ...init.headers,\n \"X-Remix-Router-Error\": \"yes\",\n },\n });\n }\n\n return {\n dataRoutes,\n query,\n queryRoute,\n };\n}\n\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Helpers\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * Given an existing StaticHandlerContext and an error thrown at render time,\n * provide an updated StaticHandlerContext suitable for a second SSR render\n */\nexport function getStaticContextFromError(\n routes: AgnosticDataRouteObject[],\n context: StaticHandlerContext,\n error: any\n) {\n let newContext: StaticHandlerContext = {\n ...context,\n statusCode: 500,\n errors: {\n [context._deepestRenderedBoundaryId || routes[0].id]: error,\n },\n };\n return newContext;\n}\n\n// Normalize navigation options by converting formMethod=GET formData objects to\n// URLSearchParams so they behave identically to links with query params\nfunction normalizeNavigateOptions(\n to: To,\n opts?: RouterNavigateOptions,\n isFetcher = false\n): {\n path: string;\n submission?: Submission;\n error?: ErrorResponse;\n} {\n let path = typeof to === \"string\" ? to : createPath(to);\n\n // Return location verbatim on non-submission navigations\n if (!opts || (!(\"formMethod\" in opts) && !(\"formData\" in opts))) {\n return { path };\n }\n\n // Create a Submission on non-GET navigations\n if (opts.formMethod != null && opts.formMethod !== \"get\") {\n return {\n path,\n submission: {\n formMethod: opts.formMethod,\n formAction: stripHashFromPath(path),\n formEncType:\n (opts && opts.formEncType) || \"application/x-www-form-urlencoded\",\n formData: opts.formData,\n },\n };\n }\n\n // No formData to flatten for GET submission\n if (!opts.formData) {\n return { path };\n }\n\n // Flatten submission onto URLSearchParams for GET submissions\n let parsedPath = parsePath(path);\n try {\n let searchParams = convertFormDataToSearchParams(opts.formData);\n // Since fetcher GET submissions only run a single loader (as opposed to\n // navigation GET submissions which run all loaders), we need to preserve\n // any incoming ?index params\n if (\n isFetcher &&\n parsedPath.search &&\n hasNakedIndexQuery(parsedPath.search)\n ) {\n searchParams.append(\"index\", \"\");\n }\n parsedPath.search = `?${searchParams}`;\n } catch (e) {\n return {\n path,\n error: new ErrorResponse(\n 400,\n \"Bad Request\",\n \"Cannot submit binary form data using GET\"\n ),\n };\n }\n\n return { path: createPath(parsedPath) };\n}\n\nfunction getLoaderRedirect(\n state: RouterState,\n redirect: RedirectResult\n): Navigation {\n let { formMethod, formAction, formEncType, formData } = state.navigation;\n let navigation: NavigationStates[\"Loading\"] = {\n state: \"loading\",\n location: createLocation(state.location, redirect.location),\n formMethod: formMethod || undefined,\n formAction: formAction || undefined,\n formEncType: formEncType || undefined,\n formData: formData || undefined,\n };\n return navigation;\n}\n\n// Filter out all routes below any caught error as they aren't going to\n// render so we don't need to load them\nfunction getLoaderMatchesUntilBoundary(\n matches: AgnosticDataRouteMatch[],\n boundaryId?: string\n) {\n let boundaryMatches = matches;\n if (boundaryId) {\n let index = matches.findIndex((m) => m.route.id === boundaryId);\n if (index >= 0) {\n boundaryMatches = matches.slice(0, index);\n }\n }\n return boundaryMatches;\n}\n\nfunction getMatchesToLoad(\n state: RouterState,\n matches: AgnosticDataRouteMatch[],\n submission: Submission | undefined,\n location: Location,\n isRevalidationRequired: boolean,\n cancelledDeferredRoutes: string[],\n cancelledFetcherLoads: string[],\n pendingActionData?: RouteData,\n pendingError?: RouteData,\n fetchLoadMatches?: Map\n): [AgnosticDataRouteMatch[], RevalidatingFetcher[]] {\n let actionResult = pendingError\n ? Object.values(pendingError)[0]\n : pendingActionData\n ? Object.values(pendingActionData)[0]\n : null;\n\n // Pick navigation matches that are net-new or qualify for revalidation\n let boundaryId = pendingError ? Object.keys(pendingError)[0] : undefined;\n let boundaryMatches = getLoaderMatchesUntilBoundary(matches, boundaryId);\n let navigationMatches = boundaryMatches.filter(\n (match, index) =>\n match.route.loader != null &&\n (isNewLoader(state.loaderData, state.matches[index], match) ||\n // If this route had a pending deferred cancelled it must be revalidated\n cancelledDeferredRoutes.some((id) => id === match.route.id) ||\n shouldRevalidateLoader(\n state.location,\n state.matches[index],\n submission,\n location,\n match,\n isRevalidationRequired,\n actionResult\n ))\n );\n\n // Pick fetcher.loads that need to be revalidated\n let revalidatingFetchers: RevalidatingFetcher[] = [];\n fetchLoadMatches &&\n fetchLoadMatches.forEach(([href, match, fetchMatches], key) => {\n // This fetcher was cancelled from a prior action submission - force reload\n if (cancelledFetcherLoads.includes(key)) {\n revalidatingFetchers.push([key, href, match, fetchMatches]);\n } else if (isRevalidationRequired) {\n let shouldRevalidate = shouldRevalidateLoader(\n href,\n match,\n submission,\n href,\n match,\n isRevalidationRequired,\n actionResult\n );\n if (shouldRevalidate) {\n revalidatingFetchers.push([key, href, match, fetchMatches]);\n }\n }\n });\n\n return [navigationMatches, revalidatingFetchers];\n}\n\nfunction isNewLoader(\n currentLoaderData: RouteData,\n currentMatch: AgnosticDataRouteMatch,\n match: AgnosticDataRouteMatch\n) {\n let isNew =\n // [a] -> [a, b]\n !currentMatch ||\n // [a, b] -> [a, c]\n match.route.id !== currentMatch.route.id;\n\n // Handle the case that we don't have data for a re-used route, potentially\n // from a prior error or from a cancelled pending deferred\n let isMissingData = currentLoaderData[match.route.id] === undefined;\n\n // Always load if this is a net-new route or we don't yet have data\n return isNew || isMissingData;\n}\n\nfunction isNewRouteInstance(\n currentMatch: AgnosticDataRouteMatch,\n match: AgnosticDataRouteMatch\n) {\n let currentPath = currentMatch.route.path;\n return (\n // param change for this match, /users/123 -> /users/456\n currentMatch.pathname !== match.pathname ||\n // splat param changed, which is not present in match.path\n // e.g. /files/images/avatar.jpg -> files/finances.xls\n (currentPath &&\n currentPath.endsWith(\"*\") &&\n currentMatch.params[\"*\"] !== match.params[\"*\"])\n );\n}\n\nfunction shouldRevalidateLoader(\n currentLocation: string | Location,\n currentMatch: AgnosticDataRouteMatch,\n submission: Submission | undefined,\n location: string | Location,\n match: AgnosticDataRouteMatch,\n isRevalidationRequired: boolean,\n actionResult: DataResult | undefined\n) {\n let currentUrl = createURL(currentLocation);\n let currentParams = currentMatch.params;\n let nextUrl = createURL(location);\n let nextParams = match.params;\n\n // This is the default implementation as to when we revalidate. If the route\n // provides it's own implementation, then we give them full control but\n // provide this value so they can leverage it if needed after they check\n // their own specific use cases\n // Note that fetchers always provide the same current/next locations so the\n // URL-based checks here don't apply to fetcher shouldRevalidate calls\n let defaultShouldRevalidate =\n isNewRouteInstance(currentMatch, match) ||\n // Clicked the same link, resubmitted a GET form\n currentUrl.toString() === nextUrl.toString() ||\n // Search params affect all loaders\n currentUrl.search !== nextUrl.search ||\n // Forced revalidation due to submission, useRevalidate, or X-Remix-Revalidate\n isRevalidationRequired;\n\n if (match.route.shouldRevalidate) {\n let routeChoice = match.route.shouldRevalidate({\n currentUrl,\n currentParams,\n nextUrl,\n nextParams,\n ...submission,\n actionResult,\n defaultShouldRevalidate,\n });\n if (typeof routeChoice === \"boolean\") {\n return routeChoice;\n }\n }\n\n return defaultShouldRevalidate;\n}\n\nasync function callLoaderOrAction(\n type: \"loader\" | \"action\",\n request: Request,\n match: AgnosticDataRouteMatch,\n matches: AgnosticDataRouteMatch[],\n basename: string | undefined,\n isStaticRequest: boolean = false,\n isRouteRequest: boolean = false\n): Promise {\n let resultType;\n let result;\n\n // Setup a promise we can race against so that abort signals short circuit\n let reject: () => void;\n let abortPromise = new Promise((_, r) => (reject = r));\n let onReject = () => reject();\n request.signal.addEventListener(\"abort\", onReject);\n\n try {\n let handler = match.route[type];\n invariant(\n handler,\n `Could not find the ${type} to run on the \"${match.route.id}\" route`\n );\n\n result = await Promise.race([\n handler({ request, params: match.params }),\n abortPromise,\n ]);\n } catch (e) {\n resultType = ResultType.error;\n result = e;\n } finally {\n request.signal.removeEventListener(\"abort\", onReject);\n }\n\n if (result instanceof Response) {\n let status = result.status;\n\n // Process redirects\n if (status >= 300 && status <= 399) {\n let location = result.headers.get(\"Location\");\n invariant(\n location,\n \"Redirects returned/thrown from loaders/actions must have a Location header\"\n );\n\n // Support relative routing in redirects\n let activeMatches = matches.slice(0, matches.indexOf(match) + 1);\n let routePathnames = getPathContributingMatches(activeMatches).map(\n (match) => match.pathnameBase\n );\n let requestPath = createURL(request.url).pathname;\n let resolvedLocation = resolveTo(location, routePathnames, requestPath);\n invariant(\n createPath(resolvedLocation),\n `Unable to resolve redirect location: ${result.headers.get(\"Location\")}`\n );\n\n // Prepend the basename to the redirect location if we have one\n if (basename) {\n let path = resolvedLocation.pathname;\n resolvedLocation.pathname =\n path === \"/\" ? basename : joinPaths([basename, path]);\n }\n\n location = createPath(resolvedLocation);\n\n // Don't process redirects in the router during static requests requests.\n // Instead, throw the Response and let the server handle it with an HTTP\n // redirect. We also update the Location header in place in this flow so\n // basename and relative routing is taken into account\n if (isStaticRequest) {\n result.headers.set(\"Location\", location);\n throw result;\n }\n\n return {\n type: ResultType.redirect,\n status,\n location,\n revalidate: result.headers.get(\"X-Remix-Revalidate\") !== null,\n };\n }\n\n // For SSR single-route requests, we want to hand Responses back directly\n // without unwrapping. We do this with the QueryRouteResponse wrapper\n // interface so we can know whether it was returned or thrown\n if (isRouteRequest) {\n // eslint-disable-next-line no-throw-literal\n throw {\n type: resultType || ResultType.data,\n response: result,\n };\n }\n\n let data: any;\n let contentType = result.headers.get(\"Content-Type\");\n if (contentType && contentType.startsWith(\"application/json\")) {\n data = await result.json();\n } else {\n data = await result.text();\n }\n\n if (resultType === ResultType.error) {\n return {\n type: resultType,\n error: new ErrorResponse(status, result.statusText, data),\n headers: result.headers,\n };\n }\n\n return {\n type: ResultType.data,\n data,\n statusCode: result.status,\n headers: result.headers,\n };\n }\n\n if (resultType === ResultType.error) {\n return { type: resultType, error: result };\n }\n\n if (result instanceof DeferredData) {\n return { type: ResultType.deferred, deferredData: result };\n }\n\n return { type: ResultType.data, data: result };\n}\n\nfunction createRequest(\n location: string | Location,\n signal: AbortSignal,\n submission?: Submission\n): Request {\n let url = createURL(stripHashFromPath(location)).toString();\n let init: RequestInit = { signal };\n\n if (submission) {\n let { formMethod, formEncType, formData } = submission;\n init.method = formMethod.toUpperCase();\n init.body =\n formEncType === \"application/x-www-form-urlencoded\"\n ? convertFormDataToSearchParams(formData)\n : formData;\n }\n\n // Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)\n return new Request(url, init);\n}\n\nfunction convertFormDataToSearchParams(formData: FormData): URLSearchParams {\n let searchParams = new URLSearchParams();\n\n for (let [key, value] of formData.entries()) {\n invariant(\n typeof value === \"string\",\n 'File inputs are not supported with encType \"application/x-www-form-urlencoded\", ' +\n 'please use \"multipart/form-data\" instead.'\n );\n searchParams.append(key, value);\n }\n\n return searchParams;\n}\n\nfunction processRouteLoaderData(\n matches: AgnosticDataRouteMatch[],\n matchesToLoad: AgnosticDataRouteMatch[],\n results: DataResult[],\n pendingError: RouteData | undefined,\n activeDeferreds?: Map\n): {\n loaderData: RouterState[\"loaderData\"];\n errors: RouterState[\"errors\"] | null;\n statusCode: number;\n loaderHeaders: Record;\n} {\n // Fill in loaderData/errors from our loaders\n let loaderData: RouterState[\"loaderData\"] = {};\n let errors: RouterState[\"errors\"] | null = null;\n let statusCode: number | undefined;\n let foundError = false;\n let loaderHeaders: Record = {};\n\n // Process loader results into state.loaderData/state.errors\n results.forEach((result, index) => {\n let id = matchesToLoad[index].route.id;\n invariant(\n !isRedirectResult(result),\n \"Cannot handle redirect results in processLoaderData\"\n );\n if (isErrorResult(result)) {\n // Look upwards from the matched route for the closest ancestor\n // error boundary, defaulting to the root match\n let boundaryMatch = findNearestBoundary(matches, id);\n let error = result.error;\n // If we have a pending action error, we report it at the highest-route\n // that throws a loader error, and then clear it out to indicate that\n // it was consumed\n if (pendingError) {\n error = Object.values(pendingError)[0];\n pendingError = undefined;\n }\n errors = Object.assign(errors || {}, {\n [boundaryMatch.route.id]: error,\n });\n // Once we find our first (highest) error, we set the status code and\n // prevent deeper status codes from overriding\n if (!foundError) {\n foundError = true;\n statusCode = isRouteErrorResponse(result.error)\n ? result.error.status\n : 500;\n }\n if (result.headers) {\n loaderHeaders[id] = result.headers;\n }\n } else if (isDeferredResult(result)) {\n activeDeferreds && activeDeferreds.set(id, result.deferredData);\n loaderData[id] = result.deferredData.data;\n // TODO: Add statusCode/headers once we wire up streaming in Remix\n } else {\n loaderData[id] = result.data;\n // Error status codes always override success status codes, but if all\n // loaders are successful we take the deepest status code.\n if (\n result.statusCode != null &&\n result.statusCode !== 200 &&\n !foundError\n ) {\n statusCode = result.statusCode;\n }\n if (result.headers) {\n loaderHeaders[id] = result.headers;\n }\n }\n });\n\n // If we didn't consume the pending action error (i.e., all loaders\n // resolved), then consume it here\n if (pendingError) {\n errors = pendingError;\n }\n\n return {\n loaderData,\n errors,\n statusCode: statusCode || 200,\n loaderHeaders,\n };\n}\n\nfunction processLoaderData(\n state: RouterState,\n matches: AgnosticDataRouteMatch[],\n matchesToLoad: AgnosticDataRouteMatch[],\n results: DataResult[],\n pendingError: RouteData | undefined,\n revalidatingFetchers: RevalidatingFetcher[],\n fetcherResults: DataResult[],\n activeDeferreds: Map\n): {\n loaderData: RouterState[\"loaderData\"];\n errors?: RouterState[\"errors\"];\n} {\n let { loaderData, errors } = processRouteLoaderData(\n matches,\n matchesToLoad,\n results,\n pendingError,\n activeDeferreds\n );\n\n // Process results from our revalidating fetchers\n for (let index = 0; index < revalidatingFetchers.length; index++) {\n let [key, , match] = revalidatingFetchers[index];\n invariant(\n fetcherResults !== undefined && fetcherResults[index] !== undefined,\n \"Did not find corresponding fetcher result\"\n );\n let result = fetcherResults[index];\n\n // Process fetcher non-redirect errors\n if (isErrorResult(result)) {\n let boundaryMatch = findNearestBoundary(state.matches, match.route.id);\n if (!(errors && errors[boundaryMatch.route.id])) {\n errors = {\n ...errors,\n [boundaryMatch.route.id]: result.error,\n };\n }\n state.fetchers.delete(key);\n } else if (isRedirectResult(result)) {\n // Should never get here, redirects should get processed above, but we\n // keep this to type narrow to a success result in the else\n throw new Error(\"Unhandled fetcher revalidation redirect\");\n } else if (isDeferredResult(result)) {\n // Should never get here, deferred data should be awaited for fetchers\n // in resolveDeferredResults\n throw new Error(\"Unhandled fetcher deferred data\");\n } else {\n let doneFetcher: FetcherStates[\"Idle\"] = {\n state: \"idle\",\n data: result.data,\n formMethod: undefined,\n formAction: undefined,\n formEncType: undefined,\n formData: undefined,\n };\n state.fetchers.set(key, doneFetcher);\n }\n }\n\n return { loaderData, errors };\n}\n\nfunction mergeLoaderData(\n loaderData: RouteData,\n newLoaderData: RouteData,\n matches: AgnosticDataRouteMatch[]\n): RouteData {\n let mergedLoaderData = { ...newLoaderData };\n matches.forEach((match) => {\n let id = match.route.id;\n if (newLoaderData[id] === undefined && loaderData[id] !== undefined) {\n mergedLoaderData[id] = loaderData[id];\n }\n });\n return mergedLoaderData;\n}\n\n// Find the nearest error boundary, looking upwards from the leaf route (or the\n// route specified by routeId) for the closest ancestor error boundary,\n// defaulting to the root match\nfunction findNearestBoundary(\n matches: AgnosticDataRouteMatch[],\n routeId?: string\n): AgnosticDataRouteMatch {\n let eligibleMatches = routeId\n ? matches.slice(0, matches.findIndex((m) => m.route.id === routeId) + 1)\n : [...matches];\n return (\n eligibleMatches.reverse().find((m) => m.route.hasErrorBoundary === true) ||\n matches[0]\n );\n}\n\nfunction getShortCircuitMatches(\n routes: AgnosticDataRouteObject[],\n status: number,\n statusText: string\n): {\n matches: AgnosticDataRouteMatch[];\n route: AgnosticDataRouteObject;\n error: ErrorResponse;\n} {\n // Prefer a root layout route if present, otherwise shim in a route object\n let route = routes.find((r) => r.index || !r.path || r.path === \"/\") || {\n id: `__shim-${status}-route__`,\n };\n\n return {\n matches: [\n {\n params: {},\n pathname: \"\",\n pathnameBase: \"\",\n route,\n },\n ],\n route,\n error: new ErrorResponse(status, statusText, null),\n };\n}\n\nfunction getNotFoundMatches(routes: AgnosticDataRouteObject[]) {\n return getShortCircuitMatches(routes, 404, \"Not Found\");\n}\n\nfunction getMethodNotAllowedMatches(routes: AgnosticDataRouteObject[]) {\n return getShortCircuitMatches(routes, 405, \"Method Not Allowed\");\n}\n\nfunction getMethodNotAllowedResult(path: Location | string): ErrorResult {\n let href = typeof path === \"string\" ? path : createPath(path);\n console.warn(\n \"You're trying to submit to a route that does not have an action. To \" +\n \"fix this, please add an `action` function to the route for \" +\n `[${href}]`\n );\n return {\n type: ResultType.error,\n error: new ErrorResponse(405, \"Method Not Allowed\", \"\"),\n };\n}\n\n// Find any returned redirect errors, starting from the lowest match\nfunction findRedirect(results: DataResult[]): RedirectResult | undefined {\n for (let i = results.length - 1; i >= 0; i--) {\n let result = results[i];\n if (isRedirectResult(result)) {\n return result;\n }\n }\n}\n\nfunction stripHashFromPath(path: To) {\n let parsedPath = typeof path === \"string\" ? parsePath(path) : path;\n return createPath({ ...parsedPath, hash: \"\" });\n}\n\nfunction isHashChangeOnly(a: Location, b: Location): boolean {\n return (\n a.pathname === b.pathname && a.search === b.search && a.hash !== b.hash\n );\n}\n\nfunction isDeferredResult(result: DataResult): result is DeferredResult {\n return result.type === ResultType.deferred;\n}\n\nfunction isErrorResult(result: DataResult): result is ErrorResult {\n return result.type === ResultType.error;\n}\n\nfunction isRedirectResult(result?: DataResult): result is RedirectResult {\n return (result && result.type) === ResultType.redirect;\n}\n\nfunction isRedirectResponse(result: any): result is Response {\n if (!(result instanceof Response)) {\n return false;\n }\n\n let status = result.status;\n let location = result.headers.get(\"Location\");\n return status >= 300 && status <= 399 && location != null;\n}\n\nfunction isQueryRouteResponse(obj: any): obj is QueryRouteResponse {\n return (\n obj &&\n obj.response instanceof Response &&\n (obj.type === ResultType.data || ResultType.error)\n );\n}\n\nasync function resolveDeferredResults(\n currentMatches: AgnosticDataRouteMatch[],\n matchesToLoad: AgnosticDataRouteMatch[],\n results: DataResult[],\n signal: AbortSignal,\n isFetcher: boolean,\n currentLoaderData?: RouteData\n) {\n for (let index = 0; index < results.length; index++) {\n let result = results[index];\n let match = matchesToLoad[index];\n let currentMatch = currentMatches.find(\n (m) => m.route.id === match.route.id\n );\n let isRevalidatingLoader =\n currentMatch != null &&\n !isNewRouteInstance(currentMatch, match) &&\n (currentLoaderData && currentLoaderData[match.route.id]) !== undefined;\n\n if (isDeferredResult(result) && (isFetcher || isRevalidatingLoader)) {\n // Note: we do not have to touch activeDeferreds here since we race them\n // against the signal in resolveDeferredData and they'll get aborted\n // there if needed\n await resolveDeferredData(result, signal, isFetcher).then((result) => {\n if (result) {\n results[index] = result || results[index];\n }\n });\n }\n }\n}\n\nasync function resolveDeferredData(\n result: DeferredResult,\n signal: AbortSignal,\n unwrap = false\n): Promise {\n let aborted = await result.deferredData.resolveData(signal);\n if (aborted) {\n return;\n }\n\n if (unwrap) {\n try {\n return {\n type: ResultType.data,\n data: result.deferredData.unwrappedData,\n };\n } catch (e) {\n // Handle any TrackedPromise._error values encountered while unwrapping\n return {\n type: ResultType.error,\n error: e,\n };\n }\n }\n\n return {\n type: ResultType.data,\n data: result.deferredData.data,\n };\n}\n\nfunction hasNakedIndexQuery(search: string): boolean {\n return new URLSearchParams(search).getAll(\"index\").some((v) => v === \"\");\n}\n\n// Note: This should match the format exported by useMatches, so if you change\n// this please also change that :) Eventually we'll DRY this up\nfunction createUseMatchesMatch(\n match: AgnosticDataRouteMatch,\n loaderData: RouteData\n): UseMatchesMatch {\n let { route, pathname, params } = match;\n return {\n id: route.id,\n pathname,\n params,\n data: loaderData[route.id] as unknown,\n handle: route.handle as unknown,\n };\n}\n\nfunction getTargetMatch(\n matches: AgnosticDataRouteMatch[],\n location: Location | string\n) {\n let search =\n typeof location === \"string\" ? parsePath(location).search : location.search;\n if (\n matches[matches.length - 1].route.index &&\n hasNakedIndexQuery(search || \"\")\n ) {\n // Return the leaf index route when index is present\n return matches[matches.length - 1];\n }\n // Otherwise grab the deepest \"path contributing\" match (ignoring index and\n // pathless layout routes)\n let pathMatches = getPathContributingMatches(matches);\n return pathMatches[pathMatches.length - 1];\n}\n//#endregion\n","/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport * as React from \"react\";\n\n/**\n * inlined Object.is polyfill to avoid requiring consumers ship their own\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is\n */\nfunction isPolyfill(x: any, y: any) {\n return (\n (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) // eslint-disable-line no-self-compare\n );\n}\n\nconst is: (x: any, y: any) => boolean =\n typeof Object.is === \"function\" ? Object.is : isPolyfill;\n\n// Intentionally not using named imports because Rollup uses dynamic\n// dispatch for CommonJS interop named imports.\nconst { useState, useEffect, useLayoutEffect, useDebugValue } = React;\n\nlet didWarnOld18Alpha = false;\nlet didWarnUncachedGetSnapshot = false;\n\n// Disclaimer: This shim breaks many of the rules of React, and only works\n// because of a very particular set of implementation details and assumptions\n// -- change any one of them and it will break. The most important assumption\n// is that updates are always synchronous, because concurrent rendering is\n// only available in versions of React that also have a built-in\n// useSyncExternalStore API. And we only use this shim when the built-in API\n// does not exist.\n//\n// Do not assume that the clever hacks used by this hook also work in general.\n// The point of this shim is to replace the need for hacks by other libraries.\nexport function useSyncExternalStore(\n subscribe: (fn: () => void) => () => void,\n getSnapshot: () => T,\n // Note: The shim does not use getServerSnapshot, because pre-18 versions of\n // React do not expose a way to check if we're hydrating. So users of the shim\n // will need to track that themselves and return the correct value\n // from `getSnapshot`.\n getServerSnapshot?: () => T\n): T {\n if (__DEV__) {\n if (!didWarnOld18Alpha) {\n if (\"startTransition\" in React) {\n didWarnOld18Alpha = true;\n console.error(\n \"You are using an outdated, pre-release alpha of React 18 that \" +\n \"does not support useSyncExternalStore. The \" +\n \"use-sync-external-store shim will not work correctly. Upgrade \" +\n \"to a newer pre-release.\"\n );\n }\n }\n }\n\n // Read the current snapshot from the store on every render. Again, this\n // breaks the rules of React, and only works here because of specific\n // implementation details, most importantly that updates are\n // always synchronous.\n const value = getSnapshot();\n if (__DEV__) {\n if (!didWarnUncachedGetSnapshot) {\n const cachedValue = getSnapshot();\n if (!is(value, cachedValue)) {\n console.error(\n \"The result of getSnapshot should be cached to avoid an infinite loop\"\n );\n didWarnUncachedGetSnapshot = true;\n }\n }\n }\n\n // Because updates are synchronous, we don't queue them. Instead we force a\n // re-render whenever the subscribed state changes by updating an some\n // arbitrary useState hook. Then, during render, we call getSnapshot to read\n // the current value.\n //\n // Because we don't actually use the state returned by the useState hook, we\n // can save a bit of memory by storing other stuff in that slot.\n //\n // To implement the early bailout, we need to track some things on a mutable\n // object. Usually, we would put that in a useRef hook, but we can stash it in\n // our useState hook instead.\n //\n // To force a re-render, we call forceUpdate({inst}). That works because the\n // new object always fails an equality check.\n const [{ inst }, forceUpdate] = useState({ inst: { value, getSnapshot } });\n\n // Track the latest getSnapshot function with a ref. This needs to be updated\n // in the layout phase so we can access it during the tearing check that\n // happens on subscribe.\n useLayoutEffect(() => {\n inst.value = value;\n inst.getSnapshot = getSnapshot;\n\n // Whenever getSnapshot or subscribe changes, we need to check in the\n // commit phase if there was an interleaved mutation. In concurrent mode\n // this can happen all the time, but even in synchronous mode, an earlier\n // effect may have mutated the store.\n if (checkIfSnapshotChanged(inst)) {\n // Force a re-render.\n forceUpdate({ inst });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [subscribe, value, getSnapshot]);\n\n useEffect(() => {\n // Check for changes right before subscribing. Subsequent changes will be\n // detected in the subscription handler.\n if (checkIfSnapshotChanged(inst)) {\n // Force a re-render.\n forceUpdate({ inst });\n }\n const handleStoreChange = () => {\n // TODO: Because there is no cross-renderer API for batching updates, it's\n // up to the consumer of this library to wrap their subscription event\n // with unstable_batchedUpdates. Should we try to detect when this isn't\n // the case and print a warning in development?\n\n // The store changed. Check if the snapshot changed since the last time we\n // read from the store.\n if (checkIfSnapshotChanged(inst)) {\n // Force a re-render.\n forceUpdate({ inst });\n }\n };\n // Subscribe to the store and return a clean-up function.\n return subscribe(handleStoreChange);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [subscribe]);\n\n useDebugValue(value);\n return value;\n}\n\nfunction checkIfSnapshotChanged(inst: any) {\n const latestGetSnapshot = inst.getSnapshot;\n const prevValue = inst.value;\n try {\n const nextValue = latestGetSnapshot();\n return !is(prevValue, nextValue);\n } catch (error) {\n return true;\n }\n}\n","/**\n * Inlined into the react-router repo since use-sync-external-store does not\n * provide a UMD-compatible package, so we need this to be able to distribute\n * UMD react-router bundles\n */\n\n/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport * as React from \"react\";\n\nimport { useSyncExternalStore as client } from \"./useSyncExternalStoreShimClient\";\nimport { useSyncExternalStore as server } from \"./useSyncExternalStoreShimServer\";\n\nconst canUseDOM: boolean = !!(\n typeof window !== \"undefined\" &&\n typeof window.document !== \"undefined\" &&\n typeof window.document.createElement !== \"undefined\"\n);\nconst isServerEnvironment = !canUseDOM;\nconst shim = isServerEnvironment ? server : client;\n\nexport const useSyncExternalStore =\n \"useSyncExternalStore\" in React\n ? ((module) => module.useSyncExternalStore)(React)\n : shim;\n","import * as React from \"react\";\nimport type {\n AgnosticRouteMatch,\n AgnosticIndexRouteObject,\n AgnosticNonIndexRouteObject,\n History,\n Location,\n Router,\n StaticHandlerContext,\n To,\n TrackedPromise,\n} from \"@remix-run/router\";\nimport type { Action as NavigationType } from \"@remix-run/router\";\n\n// Create react-specific types from the agnostic types in @remix-run/router to\n// export from react-router\nexport interface IndexRouteObject {\n caseSensitive?: AgnosticIndexRouteObject[\"caseSensitive\"];\n path?: AgnosticIndexRouteObject[\"path\"];\n id?: AgnosticIndexRouteObject[\"id\"];\n loader?: AgnosticIndexRouteObject[\"loader\"];\n action?: AgnosticIndexRouteObject[\"action\"];\n hasErrorBoundary?: AgnosticIndexRouteObject[\"hasErrorBoundary\"];\n shouldRevalidate?: AgnosticIndexRouteObject[\"shouldRevalidate\"];\n handle?: AgnosticIndexRouteObject[\"handle\"];\n index: true;\n children?: undefined;\n element?: React.ReactNode | null;\n errorElement?: React.ReactNode | null;\n}\n\nexport interface NonIndexRouteObject {\n caseSensitive?: AgnosticNonIndexRouteObject[\"caseSensitive\"];\n path?: AgnosticNonIndexRouteObject[\"path\"];\n id?: AgnosticNonIndexRouteObject[\"id\"];\n loader?: AgnosticNonIndexRouteObject[\"loader\"];\n action?: AgnosticNonIndexRouteObject[\"action\"];\n hasErrorBoundary?: AgnosticNonIndexRouteObject[\"hasErrorBoundary\"];\n shouldRevalidate?: AgnosticNonIndexRouteObject[\"shouldRevalidate\"];\n handle?: AgnosticNonIndexRouteObject[\"handle\"];\n index?: false;\n children?: RouteObject[];\n element?: React.ReactNode | null;\n errorElement?: React.ReactNode | null;\n}\n\nexport type RouteObject = IndexRouteObject | NonIndexRouteObject;\n\nexport type DataRouteObject = RouteObject & {\n children?: DataRouteObject[];\n id: string;\n};\n\nexport interface RouteMatch<\n ParamKey extends string = string,\n RouteObjectType extends RouteObject = RouteObject\n> extends AgnosticRouteMatch {}\n\nexport interface DataRouteMatch extends RouteMatch {}\n\n// Contexts for data routers\nexport const DataStaticRouterContext =\n React.createContext(null);\nif (__DEV__) {\n DataStaticRouterContext.displayName = \"DataStaticRouterContext\";\n}\n\nexport interface DataRouterContextObject extends NavigationContextObject {\n router: Router;\n}\n\nexport const DataRouterContext =\n React.createContext(null);\nif (__DEV__) {\n DataRouterContext.displayName = \"DataRouter\";\n}\n\nexport const DataRouterStateContext = React.createContext<\n Router[\"state\"] | null\n>(null);\nif (__DEV__) {\n DataRouterStateContext.displayName = \"DataRouterState\";\n}\n\nexport const AwaitContext = React.createContext(null);\nif (__DEV__) {\n AwaitContext.displayName = \"Await\";\n}\n\nexport type RelativeRoutingType = \"route\" | \"path\";\n\nexport interface NavigateOptions {\n replace?: boolean;\n state?: any;\n preventScrollReset?: boolean;\n relative?: RelativeRoutingType;\n}\n\n/**\n * A Navigator is a \"location changer\"; it's how you get to different locations.\n *\n * Every history instance conforms to the Navigator interface, but the\n * distinction is useful primarily when it comes to the low-level API\n * where both the location and a navigator must be provided separately in order\n * to avoid \"tearing\" that may occur in a suspense-enabled app if the action\n * and/or location were to be read directly from the history instance.\n */\nexport interface Navigator {\n createHref: History[\"createHref\"];\n go: History[\"go\"];\n push(to: To, state?: any, opts?: NavigateOptions): void;\n replace(to: To, state?: any, opts?: NavigateOptions): void;\n}\n\ninterface NavigationContextObject {\n basename: string;\n navigator: Navigator;\n static: boolean;\n}\n\nexport const NavigationContext = React.createContext(\n null!\n);\n\nif (__DEV__) {\n NavigationContext.displayName = \"Navigation\";\n}\n\ninterface LocationContextObject {\n location: Location;\n navigationType: NavigationType;\n}\n\nexport const LocationContext = React.createContext(\n null!\n);\n\nif (__DEV__) {\n LocationContext.displayName = \"Location\";\n}\n\nexport interface RouteContextObject {\n outlet: React.ReactElement | null;\n matches: RouteMatch[];\n}\n\nexport const RouteContext = React.createContext({\n outlet: null,\n matches: [],\n});\n\nif (__DEV__) {\n RouteContext.displayName = \"Route\";\n}\n\nexport const RouteErrorContext = React.createContext(null);\n\nif (__DEV__) {\n RouteErrorContext.displayName = \"RouteError\";\n}\n","import * as React from \"react\";\nimport type {\n Location,\n ParamParseKey,\n Params,\n Path,\n PathMatch,\n PathPattern,\n Router as RemixRouter,\n To,\n} from \"@remix-run/router\";\nimport {\n Action as NavigationType,\n invariant,\n isRouteErrorResponse,\n joinPaths,\n matchPath,\n matchRoutes,\n parsePath,\n resolveTo,\n warning,\n UNSAFE_getPathContributingMatches as getPathContributingMatches,\n} from \"@remix-run/router\";\n\nimport type {\n NavigateOptions,\n RouteContextObject,\n RouteMatch,\n RouteObject,\n DataRouteMatch,\n RelativeRoutingType,\n} from \"./context\";\nimport {\n DataRouterContext,\n DataRouterStateContext,\n LocationContext,\n NavigationContext,\n RouteContext,\n RouteErrorContext,\n AwaitContext,\n DataStaticRouterContext,\n} from \"./context\";\n\n/**\n * Returns the full href for the given \"to\" value. This is useful for building\n * custom links that are also accessible and preserve right-click behavior.\n *\n * @see https://reactrouter.com/docs/en/v6/hooks/use-href\n */\nexport function useHref(\n to: To,\n { relative }: { relative?: RelativeRoutingType } = {}\n): string {\n invariant(\n useInRouterContext(),\n // TODO: This error is probably because they somehow have 2 versions of the\n // router loaded. We can help them understand how to avoid that.\n `useHref() may be used only in the context of a component.`\n );\n\n let { basename, navigator } = React.useContext(NavigationContext);\n let { hash, pathname, search } = useResolvedPath(to, { relative });\n\n let joinedPathname = pathname;\n\n // If we're operating within a basename, prepend it to the pathname prior\n // to creating the href. If this is a root navigation, then just use the raw\n // basename which allows the basename to have full control over the presence\n // of a trailing slash on root links\n if (basename !== \"/\") {\n joinedPathname =\n pathname === \"/\" ? basename : joinPaths([basename, pathname]);\n }\n\n return navigator.createHref({ pathname: joinedPathname, search, hash });\n}\n\n/**\n * Returns true if this component is a descendant of a .\n *\n * @see https://reactrouter.com/docs/en/v6/hooks/use-in-router-context\n */\nexport function useInRouterContext(): boolean {\n return React.useContext(LocationContext) != null;\n}\n\n/**\n * Returns the current location object, which represents the current URL in web\n * browsers.\n *\n * Note: If you're using this it may mean you're doing some of your own\n * \"routing\" in your app, and we'd like to know what your use case is. We may\n * be able to provide something higher-level to better suit your needs.\n *\n * @see https://reactrouter.com/docs/en/v6/hooks/use-location\n */\nexport function useLocation(): Location {\n invariant(\n useInRouterContext(),\n // TODO: This error is probably because they somehow have 2 versions of the\n // router loaded. We can help them understand how to avoid that.\n `useLocation() may be used only in the context of a component.`\n );\n\n return React.useContext(LocationContext).location;\n}\n\n/**\n * Returns the current navigation action which describes how the router came to\n * the current location, either by a pop, push, or replace on the history stack.\n *\n * @see https://reactrouter.com/docs/en/v6/hooks/use-navigation-type\n */\nexport function useNavigationType(): NavigationType {\n return React.useContext(LocationContext).navigationType;\n}\n\n/**\n * Returns true if the URL for the given \"to\" value matches the current URL.\n * This is useful for components that need to know \"active\" state, e.g.\n * .\n *\n * @see https://reactrouter.com/docs/en/v6/hooks/use-match\n */\nexport function useMatch<\n ParamKey extends ParamParseKey,\n Path extends string\n>(pattern: PathPattern | Path): PathMatch | null {\n invariant(\n useInRouterContext(),\n // TODO: This error is probably because they somehow have 2 versions of the\n // router loaded. We can help them understand how to avoid that.\n `useMatch() may be used only in the context of a component.`\n );\n\n let { pathname } = useLocation();\n return React.useMemo(\n () => matchPath(pattern, pathname),\n [pathname, pattern]\n );\n}\n\n/**\n * The interface for the navigate() function returned from useNavigate().\n */\nexport interface NavigateFunction {\n (to: To, options?: NavigateOptions): void;\n (delta: number): void;\n}\n\n/**\n * Returns an imperative method for changing the location. Used by s, but\n * may also be used by other elements to change the location.\n *\n * @see https://reactrouter.com/docs/en/v6/hooks/use-navigate\n */\nexport function useNavigate(): NavigateFunction {\n invariant(\n useInRouterContext(),\n // TODO: This error is probably because they somehow have 2 versions of the\n // router loaded. We can help them understand how to avoid that.\n `useNavigate() may be used only in the context of a component.`\n );\n\n let { basename, navigator } = React.useContext(NavigationContext);\n let { matches } = React.useContext(RouteContext);\n let { pathname: locationPathname } = useLocation();\n\n let routePathnamesJson = JSON.stringify(\n getPathContributingMatches(matches).map((match) => match.pathnameBase)\n );\n\n let activeRef = React.useRef(false);\n React.useEffect(() => {\n activeRef.current = true;\n });\n\n let navigate: NavigateFunction = React.useCallback(\n (to: To | number, options: NavigateOptions = {}) => {\n warning(\n activeRef.current,\n `You should call navigate() in a React.useEffect(), not when ` +\n `your component is first rendered.`\n );\n\n if (!activeRef.current) return;\n\n if (typeof to === \"number\") {\n navigator.go(to);\n return;\n }\n\n let path = resolveTo(\n to,\n JSON.parse(routePathnamesJson),\n locationPathname,\n options.relative === \"path\"\n );\n\n // If we're operating within a basename, prepend it to the pathname prior\n // to handing off to history. If this is a root navigation, then we\n // navigate to the raw basename which allows the basename to have full\n // control over the presence of a trailing slash on root links\n if (basename !== \"/\") {\n path.pathname =\n path.pathname === \"/\"\n ? basename\n : joinPaths([basename, path.pathname]);\n }\n\n (!!options.replace ? navigator.replace : navigator.push)(\n path,\n options.state,\n options\n );\n },\n [basename, navigator, routePathnamesJson, locationPathname]\n );\n\n return navigate;\n}\n\nconst OutletContext = React.createContext(null);\n\n/**\n * Returns the context (if provided) for the child route at this level of the route\n * hierarchy.\n * @see https://reactrouter.com/docs/en/v6/hooks/use-outlet-context\n */\nexport function useOutletContext(): Context {\n return React.useContext(OutletContext) as Context;\n}\n\n/**\n * Returns the element for the child route at this level of the route\n * hierarchy. Used internally by to render child routes.\n *\n * @see https://reactrouter.com/docs/en/v6/hooks/use-outlet\n */\nexport function useOutlet(context?: unknown): React.ReactElement | null {\n let outlet = React.useContext(RouteContext).outlet;\n if (outlet) {\n return (\n {outlet}\n );\n }\n return outlet;\n}\n\n/**\n * Returns an object of key/value pairs of the dynamic params from the current\n * URL that were matched by the route path.\n *\n * @see https://reactrouter.com/docs/en/v6/hooks/use-params\n */\nexport function useParams<\n ParamsOrKey extends string | Record = string\n>(): Readonly<\n [ParamsOrKey] extends [string] ? Params : Partial\n> {\n let { matches } = React.useContext(RouteContext);\n let routeMatch = matches[matches.length - 1];\n return routeMatch ? (routeMatch.params as any) : {};\n}\n\n/**\n * Resolves the pathname of the given `to` value against the current location.\n *\n * @see https://reactrouter.com/docs/en/v6/hooks/use-resolved-path\n */\nexport function useResolvedPath(\n to: To,\n { relative }: { relative?: RelativeRoutingType } = {}\n): Path {\n let { matches } = React.useContext(RouteContext);\n let { pathname: locationPathname } = useLocation();\n\n let routePathnamesJson = JSON.stringify(\n getPathContributingMatches(matches).map((match) => match.pathnameBase)\n );\n\n return React.useMemo(\n () =>\n resolveTo(\n to,\n JSON.parse(routePathnamesJson),\n locationPathname,\n relative === \"path\"\n ),\n [to, routePathnamesJson, locationPathname, relative]\n );\n}\n\n/**\n * Returns the element of the route that matched the current location, prepared\n * with the correct context to render the remainder of the route tree. Route\n * elements in the tree must render an to render their child route's\n * element.\n *\n * @see https://reactrouter.com/docs/en/v6/hooks/use-routes\n */\nexport function useRoutes(\n routes: RouteObject[],\n locationArg?: Partial | string\n): React.ReactElement | null {\n invariant(\n useInRouterContext(),\n // TODO: This error is probably because they somehow have 2 versions of the\n // router loaded. We can help them understand how to avoid that.\n `useRoutes() may be used only in the context of a component.`\n );\n\n let dataRouterStateContext = React.useContext(DataRouterStateContext);\n let { matches: parentMatches } = React.useContext(RouteContext);\n let routeMatch = parentMatches[parentMatches.length - 1];\n let parentParams = routeMatch ? routeMatch.params : {};\n let parentPathname = routeMatch ? routeMatch.pathname : \"/\";\n let parentPathnameBase = routeMatch ? routeMatch.pathnameBase : \"/\";\n let parentRoute = routeMatch && routeMatch.route;\n\n if (__DEV__) {\n // You won't get a warning about 2 different under a \n // without a trailing *, but this is a best-effort warning anyway since we\n // cannot even give the warning unless they land at the parent route.\n //\n // Example:\n //\n // \n // {/* This route path MUST end with /* because otherwise\n // it will never match /blog/post/123 */}\n // } />\n // } />\n // \n //\n // function Blog() {\n // return (\n // \n // } />\n // \n // );\n // }\n let parentPath = (parentRoute && parentRoute.path) || \"\";\n warningOnce(\n parentPathname,\n !parentRoute || parentPath.endsWith(\"*\"),\n `You rendered descendant (or called \\`useRoutes()\\`) at ` +\n `\"${parentPathname}\" (under ) but the ` +\n `parent route path has no trailing \"*\". This means if you navigate ` +\n `deeper, the parent won't match anymore and therefore the child ` +\n `routes will never render.\\n\\n` +\n `Please change the parent to .`\n );\n }\n\n let locationFromContext = useLocation();\n\n let location;\n if (locationArg) {\n let parsedLocationArg =\n typeof locationArg === \"string\" ? parsePath(locationArg) : locationArg;\n\n invariant(\n parentPathnameBase === \"/\" ||\n parsedLocationArg.pathname?.startsWith(parentPathnameBase),\n `When overriding the location using \\`\\` or \\`useRoutes(routes, location)\\`, ` +\n `the location pathname must begin with the portion of the URL pathname that was ` +\n `matched by all parent routes. The current pathname base is \"${parentPathnameBase}\" ` +\n `but pathname \"${parsedLocationArg.pathname}\" was given in the \\`location\\` prop.`\n );\n\n location = parsedLocationArg;\n } else {\n location = locationFromContext;\n }\n\n let pathname = location.pathname || \"/\";\n let remainingPathname =\n parentPathnameBase === \"/\"\n ? pathname\n : pathname.slice(parentPathnameBase.length) || \"/\";\n\n let matches = matchRoutes(routes, { pathname: remainingPathname });\n\n if (__DEV__) {\n warning(\n parentRoute || matches != null,\n `No routes matched location \"${location.pathname}${location.search}${location.hash}\" `\n );\n\n warning(\n matches == null ||\n matches[matches.length - 1].route.element !== undefined,\n `Matched leaf route at location \"${location.pathname}${location.search}${location.hash}\" does not have an element. ` +\n `This means it will render an with a null value by default resulting in an \"empty\" page.`\n );\n }\n\n let renderedMatches = _renderMatches(\n matches &&\n matches.map((match) =>\n Object.assign({}, match, {\n params: Object.assign({}, parentParams, match.params),\n pathname: joinPaths([parentPathnameBase, match.pathname]),\n pathnameBase:\n match.pathnameBase === \"/\"\n ? parentPathnameBase\n : joinPaths([parentPathnameBase, match.pathnameBase]),\n })\n ),\n parentMatches,\n dataRouterStateContext || undefined\n );\n\n // When a user passes in a `locationArg`, the associated routes need to\n // be wrapped in a new `LocationContext.Provider` in order for `useLocation`\n // to use the scoped location instead of the global location.\n if (locationArg && renderedMatches) {\n return (\n \n {renderedMatches}\n \n );\n }\n\n return renderedMatches;\n}\n\nfunction DefaultErrorElement() {\n let error = useRouteError();\n let message = isRouteErrorResponse(error)\n ? `${error.status} ${error.statusText}`\n : error instanceof Error\n ? error.message\n : JSON.stringify(error);\n let stack = error instanceof Error ? error.stack : null;\n let lightgrey = \"rgba(200,200,200, 0.5)\";\n let preStyles = { padding: \"0.5rem\", backgroundColor: lightgrey };\n let codeStyles = { padding: \"2px 4px\", backgroundColor: lightgrey };\n return (\n <>\n

Unhandled Thrown Error!

\n

{message}

\n {stack ?
{stack}
: null}\n

💿 Hey developer 👋

\n

\n You can provide a way better UX than this when your app throws errors by\n providing your own \n errorElement props on \n <Route>\n

\n \n );\n}\n\ntype RenderErrorBoundaryProps = React.PropsWithChildren<{\n location: Location;\n error: any;\n component: React.ReactNode;\n}>;\n\ntype RenderErrorBoundaryState = {\n location: Location;\n error: any;\n};\n\nexport class RenderErrorBoundary extends React.Component<\n RenderErrorBoundaryProps,\n RenderErrorBoundaryState\n> {\n constructor(props: RenderErrorBoundaryProps) {\n super(props);\n this.state = {\n location: props.location,\n error: props.error,\n };\n }\n\n static getDerivedStateFromError(error: any) {\n return { error: error };\n }\n\n static getDerivedStateFromProps(\n props: RenderErrorBoundaryProps,\n state: RenderErrorBoundaryState\n ) {\n // When we get into an error state, the user will likely click \"back\" to the\n // previous page that didn't have an error. Because this wraps the entire\n // application, that will have no effect--the error page continues to display.\n // This gives us a mechanism to recover from the error when the location changes.\n //\n // Whether we're in an error state or not, we update the location in state\n // so that when we are in an error state, it gets reset when a new location\n // comes in and the user recovers from the error.\n if (state.location !== props.location) {\n return {\n error: props.error,\n location: props.location,\n };\n }\n\n // If we're not changing locations, preserve the location but still surface\n // any new errors that may come through. We retain the existing error, we do\n // this because the error provided from the app state may be cleared without\n // the location changing.\n return {\n error: props.error || state.error,\n location: state.location,\n };\n }\n\n componentDidCatch(error: any, errorInfo: any) {\n console.error(\n \"React Router caught the following error during render\",\n error,\n errorInfo\n );\n }\n\n render() {\n return this.state.error ? (\n \n ) : (\n this.props.children\n );\n }\n}\n\ninterface RenderedRouteProps {\n routeContext: RouteContextObject;\n match: RouteMatch;\n children: React.ReactNode | null;\n}\n\nfunction RenderedRoute({ routeContext, match, children }: RenderedRouteProps) {\n let dataStaticRouterContext = React.useContext(DataStaticRouterContext);\n\n // Track how deep we got in our render pass to emulate SSR componentDidCatch\n // in a DataStaticRouter\n if (dataStaticRouterContext && match.route.errorElement) {\n dataStaticRouterContext._deepestRenderedBoundaryId = match.route.id;\n }\n\n return (\n \n {children}\n \n );\n}\n\nexport function _renderMatches(\n matches: RouteMatch[] | null,\n parentMatches: RouteMatch[] = [],\n dataRouterState?: RemixRouter[\"state\"]\n): React.ReactElement | null {\n if (matches == null) {\n if (dataRouterState?.errors) {\n // Don't bail if we have data router errors so we can render them in the\n // boundary. Use the pre-matched (or shimmed) matches\n matches = dataRouterState.matches as DataRouteMatch[];\n } else {\n return null;\n }\n }\n\n let renderedMatches = matches;\n\n // If we have data errors, trim matches to the highest error boundary\n let errors = dataRouterState?.errors;\n if (errors != null) {\n let errorIndex = renderedMatches.findIndex(\n (m) => m.route.id && errors?.[m.route.id]\n );\n invariant(\n errorIndex >= 0,\n `Could not find a matching route for the current errors: ${errors}`\n );\n renderedMatches = renderedMatches.slice(\n 0,\n Math.min(renderedMatches.length, errorIndex + 1)\n );\n }\n\n return renderedMatches.reduceRight((outlet, match, index) => {\n let error = match.route.id ? errors?.[match.route.id] : null;\n // Only data routers handle errors\n let errorElement = dataRouterState\n ? match.route.errorElement || \n : null;\n let getChildren = () => (\n \n {error\n ? errorElement\n : match.route.element !== undefined\n ? match.route.element\n : outlet}\n \n );\n // Only wrap in an error boundary within data router usages when we have an\n // errorElement on this route. Otherwise let it bubble up to an ancestor\n // errorElement\n return dataRouterState && (match.route.errorElement || index === 0) ? (\n \n ) : (\n getChildren()\n );\n }, null as React.ReactElement | null);\n}\n\nenum DataRouterHook {\n UseRevalidator = \"useRevalidator\",\n}\n\nenum DataRouterStateHook {\n UseLoaderData = \"useLoaderData\",\n UseActionData = \"useActionData\",\n UseRouteError = \"useRouteError\",\n UseNavigation = \"useNavigation\",\n UseRouteLoaderData = \"useRouteLoaderData\",\n UseMatches = \"useMatches\",\n UseRevalidator = \"useRevalidator\",\n}\n\nfunction getDataRouterConsoleError(\n hookName: DataRouterHook | DataRouterStateHook\n) {\n return `${hookName} must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router.`;\n}\n\nfunction useDataRouterContext(hookName: DataRouterHook) {\n let ctx = React.useContext(DataRouterContext);\n invariant(ctx, getDataRouterConsoleError(hookName));\n return ctx;\n}\n\nfunction useDataRouterState(hookName: DataRouterStateHook) {\n let state = React.useContext(DataRouterStateContext);\n invariant(state, getDataRouterConsoleError(hookName));\n return state;\n}\n\n/**\n * Returns the current navigation, defaulting to an \"idle\" navigation when\n * no navigation is in progress\n */\nexport function useNavigation() {\n let state = useDataRouterState(DataRouterStateHook.UseNavigation);\n return state.navigation;\n}\n\n/**\n * Returns a revalidate function for manually triggering revalidation, as well\n * as the current state of any manual revalidations\n */\nexport function useRevalidator() {\n let dataRouterContext = useDataRouterContext(DataRouterHook.UseRevalidator);\n let state = useDataRouterState(DataRouterStateHook.UseRevalidator);\n return {\n revalidate: dataRouterContext.router.revalidate,\n state: state.revalidation,\n };\n}\n\n/**\n * Returns the active route matches, useful for accessing loaderData for\n * parent/child routes or the route \"handle\" property\n */\nexport function useMatches() {\n let { matches, loaderData } = useDataRouterState(\n DataRouterStateHook.UseMatches\n );\n return React.useMemo(\n () =>\n matches.map((match) => {\n let { pathname, params } = match;\n // Note: This structure matches that created by createUseMatchesMatch\n // in the @remix-run/router , so if you change this please also change\n // that :) Eventually we'll DRY this up\n return {\n id: match.route.id,\n pathname,\n params,\n data: loaderData[match.route.id] as unknown,\n handle: match.route.handle as unknown,\n };\n }),\n [matches, loaderData]\n );\n}\n\n/**\n * Returns the loader data for the nearest ancestor Route loader\n */\nexport function useLoaderData(): unknown {\n let state = useDataRouterState(DataRouterStateHook.UseLoaderData);\n\n let route = React.useContext(RouteContext);\n invariant(route, `useLoaderData must be used inside a RouteContext`);\n\n let thisRoute = route.matches[route.matches.length - 1];\n invariant(\n thisRoute.route.id,\n `useLoaderData can only be used on routes that contain a unique \"id\"`\n );\n\n return state.loaderData[thisRoute.route.id];\n}\n\n/**\n * Returns the loaderData for the given routeId\n */\nexport function useRouteLoaderData(routeId: string): unknown {\n let state = useDataRouterState(DataRouterStateHook.UseRouteLoaderData);\n return state.loaderData[routeId];\n}\n\n/**\n * Returns the action data for the nearest ancestor Route action\n */\nexport function useActionData(): unknown {\n let state = useDataRouterState(DataRouterStateHook.UseActionData);\n\n let route = React.useContext(RouteContext);\n invariant(route, `useActionData must be used inside a RouteContext`);\n\n return Object.values(state?.actionData || {})[0];\n}\n\n/**\n * Returns the nearest ancestor Route error, which could be a loader/action\n * error or a render error. This is intended to be called from your\n * errorElement to display a proper error message.\n */\nexport function useRouteError(): unknown {\n let error = React.useContext(RouteErrorContext);\n let state = useDataRouterState(DataRouterStateHook.UseRouteError);\n let route = React.useContext(RouteContext);\n let thisRoute = route.matches[route.matches.length - 1];\n\n // If this was a render error, we put it in a RouteError context inside\n // of RenderErrorBoundary\n if (error) {\n return error;\n }\n\n invariant(route, `useRouteError must be used inside a RouteContext`);\n invariant(\n thisRoute.route.id,\n `useRouteError can only be used on routes that contain a unique \"id\"`\n );\n\n // Otherwise look for errors from our data router state\n return state.errors?.[thisRoute.route.id];\n}\n\n/**\n * Returns the happy-path data from the nearest ancestor value\n */\nexport function useAsyncValue(): unknown {\n let value = React.useContext(AwaitContext);\n return value?._data;\n}\n\n/**\n * Returns the error from the nearest ancestor value\n */\nexport function useAsyncError(): unknown {\n let value = React.useContext(AwaitContext);\n return value?._error;\n}\n\nconst alreadyWarned: Record = {};\n\nfunction warningOnce(key: string, cond: boolean, message: string) {\n if (!cond && !alreadyWarned[key]) {\n alreadyWarned[key] = true;\n warning(false, message);\n }\n}\n","import * as React from \"react\";\nimport type {\n TrackedPromise,\n InitialEntry,\n Location,\n MemoryHistory,\n Router as RemixRouter,\n RouterState,\n To,\n} from \"@remix-run/router\";\nimport {\n Action as NavigationType,\n AbortedDeferredError,\n createMemoryHistory,\n invariant,\n parsePath,\n stripBasename,\n warning,\n} from \"@remix-run/router\";\nimport { useSyncExternalStore as useSyncExternalStoreShim } from \"./use-sync-external-store-shim\";\n\nimport type {\n DataRouteObject,\n IndexRouteObject,\n RouteMatch,\n RouteObject,\n Navigator,\n NonIndexRouteObject,\n RelativeRoutingType,\n} from \"./context\";\nimport {\n LocationContext,\n NavigationContext,\n DataRouterContext,\n DataRouterStateContext,\n AwaitContext,\n} from \"./context\";\nimport {\n useAsyncValue,\n useInRouterContext,\n useNavigate,\n useOutlet,\n useRoutes,\n _renderMatches,\n} from \"./hooks\";\n\nexport interface RouterProviderProps {\n fallbackElement?: React.ReactNode;\n router: RemixRouter;\n}\n\n/**\n * Given a Remix Router instance, render the appropriate UI\n */\nexport function RouterProvider({\n fallbackElement,\n router,\n}: RouterProviderProps): React.ReactElement {\n // Sync router state to our component state to force re-renders\n let state: RouterState = useSyncExternalStoreShim(\n router.subscribe,\n () => router.state,\n // We have to provide this so React@18 doesn't complain during hydration,\n // but we pass our serialized hydration data into the router so state here\n // is already synced with what the server saw\n () => router.state\n );\n\n let navigator = React.useMemo((): Navigator => {\n return {\n createHref: router.createHref,\n go: (n) => router.navigate(n),\n push: (to, state, opts) =>\n router.navigate(to, {\n state,\n preventScrollReset: opts?.preventScrollReset,\n }),\n replace: (to, state, opts) =>\n router.navigate(to, {\n replace: true,\n state,\n preventScrollReset: opts?.preventScrollReset,\n }),\n };\n }, [router]);\n\n let basename = router.basename || \"/\";\n\n return (\n \n \n \n {router.state.initialized ? : fallbackElement}\n
\n \n \n );\n}\n\nexport interface MemoryRouterProps {\n basename?: string;\n children?: React.ReactNode;\n initialEntries?: InitialEntry[];\n initialIndex?: number;\n}\n\n/**\n * A that stores all entries in memory.\n *\n * @see https://reactrouter.com/docs/en/v6/routers/memory-router\n */\nexport function MemoryRouter({\n basename,\n children,\n initialEntries,\n initialIndex,\n}: MemoryRouterProps): React.ReactElement {\n let historyRef = React.useRef();\n if (historyRef.current == null) {\n historyRef.current = createMemoryHistory({\n initialEntries,\n initialIndex,\n v5Compat: true,\n });\n }\n\n let history = historyRef.current;\n let [state, setState] = React.useState({\n action: history.action,\n location: history.location,\n });\n\n React.useLayoutEffect(() => history.listen(setState), [history]);\n\n return (\n \n );\n}\n\nexport interface NavigateProps {\n to: To;\n replace?: boolean;\n state?: any;\n relative?: RelativeRoutingType;\n}\n\n/**\n * Changes the current location.\n *\n * Note: This API is mostly useful in React.Component subclasses that are not\n * able to use hooks. In functional components, we recommend you use the\n * `useNavigate` hook instead.\n *\n * @see https://reactrouter.com/docs/en/v6/components/navigate\n */\nexport function Navigate({\n to,\n replace,\n state,\n relative,\n}: NavigateProps): null {\n invariant(\n useInRouterContext(),\n // TODO: This error is probably because they somehow have 2 versions of\n // the router loaded. We can help them understand how to avoid that.\n ` may be used only in the context of a component.`\n );\n\n warning(\n !React.useContext(NavigationContext).static,\n ` must not be used on the initial render in a . ` +\n `This is a no-op, but you should modify your code so the is ` +\n `only ever rendered in response to some user interaction or state change.`\n );\n\n let dataRouterState = React.useContext(DataRouterStateContext);\n let navigate = useNavigate();\n\n React.useEffect(() => {\n // Avoid kicking off multiple navigations if we're in the middle of a\n // data-router navigation, since components get re-rendered when we enter\n // a submitting/loading state\n if (dataRouterState && dataRouterState.navigation.state !== \"idle\") {\n return;\n }\n navigate(to, { replace, state, relative });\n });\n\n return null;\n}\n\nexport interface OutletProps {\n context?: unknown;\n}\n\n/**\n * Renders the child route's element, if there is one.\n *\n * @see https://reactrouter.com/docs/en/v6/components/outlet\n */\nexport function Outlet(props: OutletProps): React.ReactElement | null {\n return useOutlet(props.context);\n}\n\nexport interface PathRouteProps {\n caseSensitive?: NonIndexRouteObject[\"caseSensitive\"];\n path?: NonIndexRouteObject[\"path\"];\n id?: NonIndexRouteObject[\"id\"];\n loader?: NonIndexRouteObject[\"loader\"];\n action?: NonIndexRouteObject[\"action\"];\n hasErrorBoundary?: NonIndexRouteObject[\"hasErrorBoundary\"];\n shouldRevalidate?: NonIndexRouteObject[\"shouldRevalidate\"];\n handle?: NonIndexRouteObject[\"handle\"];\n index?: false;\n children?: React.ReactNode;\n element?: React.ReactNode | null;\n errorElement?: React.ReactNode | null;\n}\n\nexport interface LayoutRouteProps extends PathRouteProps {}\n\nexport interface IndexRouteProps {\n caseSensitive?: IndexRouteObject[\"caseSensitive\"];\n path?: IndexRouteObject[\"path\"];\n id?: IndexRouteObject[\"id\"];\n loader?: IndexRouteObject[\"loader\"];\n action?: IndexRouteObject[\"action\"];\n hasErrorBoundary?: IndexRouteObject[\"hasErrorBoundary\"];\n shouldRevalidate?: IndexRouteObject[\"shouldRevalidate\"];\n handle?: IndexRouteObject[\"handle\"];\n index: true;\n children?: undefined;\n element?: React.ReactNode | null;\n errorElement?: React.ReactNode | null;\n}\n\nexport type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;\n\n/**\n * Declares an element that should be rendered at a certain URL path.\n *\n * @see https://reactrouter.com/docs/en/v6/components/route\n */\nexport function Route(_props: RouteProps): React.ReactElement | null {\n invariant(\n false,\n `A is only ever to be used as the child of element, ` +\n `never rendered directly. Please wrap your in a .`\n );\n}\n\nexport interface RouterProps {\n basename?: string;\n children?: React.ReactNode;\n location: Partial | string;\n navigationType?: NavigationType;\n navigator: Navigator;\n static?: boolean;\n}\n\n/**\n * Provides location context for the rest of the app.\n *\n * Note: You usually won't render a directly. Instead, you'll render a\n * router that is more specific to your environment such as a \n * in web browsers or a for server rendering.\n *\n * @see https://reactrouter.com/docs/en/v6/routers/router\n */\nexport function Router({\n basename: basenameProp = \"/\",\n children = null,\n location: locationProp,\n navigationType = NavigationType.Pop,\n navigator,\n static: staticProp = false,\n}: RouterProps): React.ReactElement | null {\n invariant(\n !useInRouterContext(),\n `You cannot render a inside another .` +\n ` You should never have more than one in your app.`\n );\n\n // Preserve trailing slashes on basename, so we can let the user control\n // the enforcement of trailing slashes throughout the app\n let basename = basenameProp.replace(/^\\/*/, \"/\");\n let navigationContext = React.useMemo(\n () => ({ basename, navigator, static: staticProp }),\n [basename, navigator, staticProp]\n );\n\n if (typeof locationProp === \"string\") {\n locationProp = parsePath(locationProp);\n }\n\n let {\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n state = null,\n key = \"default\",\n } = locationProp;\n\n let location = React.useMemo(() => {\n let trailingPathname = stripBasename(pathname, basename);\n\n if (trailingPathname == null) {\n return null;\n }\n\n return {\n pathname: trailingPathname,\n search,\n hash,\n state,\n key,\n };\n }, [basename, pathname, search, hash, state, key]);\n\n warning(\n location != null,\n ` is not able to match the URL ` +\n `\"${pathname}${search}${hash}\" because it does not start with the ` +\n `basename, so the won't render anything.`\n );\n\n if (location == null) {\n return null;\n }\n\n return (\n \n \n \n );\n}\n\nexport interface RoutesProps {\n children?: React.ReactNode;\n location?: Partial | string;\n}\n\n/**\n * A container for a nested tree of elements that renders the branch\n * that best matches the current location.\n *\n * @see https://reactrouter.com/docs/en/v6/components/routes\n */\nexport function Routes({\n children,\n location,\n}: RoutesProps): React.ReactElement | null {\n let dataRouterContext = React.useContext(DataRouterContext);\n // When in a DataRouterContext _without_ children, we use the router routes\n // directly. If we have children, then we're in a descendant tree and we\n // need to use child routes.\n let routes =\n dataRouterContext && !children\n ? (dataRouterContext.router.routes as DataRouteObject[])\n : createRoutesFromChildren(children);\n return useRoutes(routes, location);\n}\n\nexport interface AwaitResolveRenderFunction {\n (data: Awaited): React.ReactElement;\n}\n\nexport interface AwaitProps {\n children: React.ReactNode | AwaitResolveRenderFunction;\n errorElement?: React.ReactNode;\n resolve: TrackedPromise | any;\n}\n\n/**\n * Component to use for rendering lazily loaded data from returning defer()\n * in a loader function\n */\nexport function Await({ children, errorElement, resolve }: AwaitProps) {\n return (\n \n {children}\n \n );\n}\n\ntype AwaitErrorBoundaryProps = React.PropsWithChildren<{\n errorElement?: React.ReactNode;\n resolve: TrackedPromise | any;\n}>;\n\ntype AwaitErrorBoundaryState = {\n error: any;\n};\n\nenum AwaitRenderStatus {\n pending,\n success,\n error,\n}\n\nconst neverSettledPromise = new Promise(() => {});\n\nclass AwaitErrorBoundary extends React.Component<\n AwaitErrorBoundaryProps,\n AwaitErrorBoundaryState\n> {\n constructor(props: AwaitErrorBoundaryProps) {\n super(props);\n this.state = { error: null };\n }\n\n static getDerivedStateFromError(error: any) {\n return { error };\n }\n\n componentDidCatch(error: any, errorInfo: any) {\n console.error(\n \" caught the following error during render\",\n error,\n errorInfo\n );\n }\n\n render() {\n let { children, errorElement, resolve } = this.props;\n\n let promise: TrackedPromise | null = null;\n let status: AwaitRenderStatus = AwaitRenderStatus.pending;\n\n if (!(resolve instanceof Promise)) {\n // Didn't get a promise - provide as a resolved promise\n status = AwaitRenderStatus.success;\n promise = Promise.resolve();\n Object.defineProperty(promise, \"_tracked\", { get: () => true });\n Object.defineProperty(promise, \"_data\", { get: () => resolve });\n } else if (this.state.error) {\n // Caught a render error, provide it as a rejected promise\n status = AwaitRenderStatus.error;\n let renderError = this.state.error;\n promise = Promise.reject().catch(() => {}); // Avoid unhandled rejection warnings\n Object.defineProperty(promise, \"_tracked\", { get: () => true });\n Object.defineProperty(promise, \"_error\", { get: () => renderError });\n } else if ((resolve as TrackedPromise)._tracked) {\n // Already tracked promise - check contents\n promise = resolve;\n status =\n promise._error !== undefined\n ? AwaitRenderStatus.error\n : promise._data !== undefined\n ? AwaitRenderStatus.success\n : AwaitRenderStatus.pending;\n } else {\n // Raw (untracked) promise - track it\n status = AwaitRenderStatus.pending;\n Object.defineProperty(resolve, \"_tracked\", { get: () => true });\n promise = resolve.then(\n (data: any) =>\n Object.defineProperty(resolve, \"_data\", { get: () => data }),\n (error: any) =>\n Object.defineProperty(resolve, \"_error\", { get: () => error })\n );\n }\n\n if (\n status === AwaitRenderStatus.error &&\n promise._error instanceof AbortedDeferredError\n ) {\n // Freeze the UI by throwing a never resolved promise\n throw neverSettledPromise;\n }\n\n if (status === AwaitRenderStatus.error && !errorElement) {\n // No errorElement, throw to the nearest route-level error boundary\n throw promise._error;\n }\n\n if (status === AwaitRenderStatus.error) {\n // Render via our errorElement\n return ;\n }\n\n if (status === AwaitRenderStatus.success) {\n // Render children with resolved value\n return ;\n }\n\n // Throw to the suspense boundary\n throw promise;\n }\n}\n\n/**\n * @private\n * Indirection to leverage useAsyncValue for a render-prop API on \n */\nfunction ResolveAwait({\n children,\n}: {\n children: React.ReactNode | AwaitResolveRenderFunction;\n}) {\n let data = useAsyncValue();\n if (typeof children === \"function\") {\n return children(data);\n }\n return <>{children};\n}\n\n///////////////////////////////////////////////////////////////////////////////\n// UTILS\n///////////////////////////////////////////////////////////////////////////////\n\n/**\n * Creates a route config from a React \"children\" object, which is usually\n * either a `` element or an array of them. Used internally by\n * `` to create a route config from its children.\n *\n * @see https://reactrouter.com/docs/en/v6/utils/create-routes-from-children\n */\nexport function createRoutesFromChildren(\n children: React.ReactNode,\n parentPath: number[] = []\n): RouteObject[] {\n let routes: RouteObject[] = [];\n\n React.Children.forEach(children, (element, index) => {\n if (!React.isValidElement(element)) {\n // Ignore non-elements. This allows people to more easily inline\n // conditionals in their route config.\n return;\n }\n\n if (element.type === React.Fragment) {\n // Transparently support React.Fragment and its children.\n routes.push.apply(\n routes,\n createRoutesFromChildren(element.props.children, parentPath)\n );\n return;\n }\n\n invariant(\n element.type === Route,\n `[${\n typeof element.type === \"string\" ? element.type : element.type.name\n }] is not a component. All component children of must be a or `\n );\n\n invariant(\n !element.props.index || !element.props.children,\n \"An index route cannot have child routes.\"\n );\n\n let treePath = [...parentPath, index];\n let route: RouteObject = {\n id: element.props.id || treePath.join(\"-\"),\n caseSensitive: element.props.caseSensitive,\n element: element.props.element,\n index: element.props.index,\n path: element.props.path,\n loader: element.props.loader,\n action: element.props.action,\n errorElement: element.props.errorElement,\n hasErrorBoundary: element.props.errorElement != null,\n shouldRevalidate: element.props.shouldRevalidate,\n handle: element.props.handle,\n };\n\n if (element.props.children) {\n route.children = createRoutesFromChildren(\n element.props.children,\n treePath\n );\n }\n\n routes.push(route);\n });\n\n return routes;\n}\n\n/**\n * Renders the result of `matchRoutes()` into a React element.\n */\nexport function renderMatches(\n matches: RouteMatch[] | null\n): React.ReactElement | null {\n return _renderMatches(matches);\n}\n\n/**\n * @private\n * Walk the route tree and add hasErrorBoundary if it's not provided, so that\n * users providing manual route arrays can just specify errorElement\n */\nexport function enhanceManualRouteObjects(\n routes: RouteObject[]\n): RouteObject[] {\n return routes.map((route) => {\n let routeClone = { ...route };\n if (routeClone.hasErrorBoundary == null) {\n routeClone.hasErrorBoundary = routeClone.errorElement != null;\n }\n if (routeClone.children) {\n routeClone.children = enhanceManualRouteObjects(routeClone.children);\n }\n return routeClone;\n });\n}\n","/**\n * NOTE: If you refactor this to split up the modules into separate files,\n * you'll need to update the rollup config for react-router-dom-v5-compat.\n */\nimport * as React from \"react\";\nimport type {\n NavigateOptions,\n RelativeRoutingType,\n RouteObject,\n To,\n} from \"react-router\";\nimport {\n Router,\n createPath,\n useHref,\n useLocation,\n useMatch,\n useMatches,\n useNavigate,\n useNavigation,\n useResolvedPath,\n UNSAFE_DataRouterContext as DataRouterContext,\n UNSAFE_DataRouterStateContext as DataRouterStateContext,\n UNSAFE_NavigationContext as NavigationContext,\n UNSAFE_RouteContext as RouteContext,\n UNSAFE_enhanceManualRouteObjects as enhanceManualRouteObjects,\n} from \"react-router\";\nimport type {\n BrowserHistory,\n Fetcher,\n FormEncType,\n FormMethod,\n GetScrollRestorationKeyFunction,\n HashHistory,\n History,\n HydrationState,\n Router as RemixRouter,\n} from \"@remix-run/router\";\nimport {\n createRouter,\n createBrowserHistory,\n createHashHistory,\n invariant,\n joinPaths,\n matchPath,\n} from \"@remix-run/router\";\n\nimport type {\n SubmitOptions,\n ParamKeyValuePair,\n URLSearchParamsInit,\n} from \"./dom\";\nimport {\n createSearchParams,\n defaultMethod,\n getFormSubmissionInfo,\n getSearchParamsForLocation,\n shouldProcessLinkClick,\n} from \"./dom\";\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Re-exports\n////////////////////////////////////////////////////////////////////////////////\n\nexport type {\n FormEncType,\n FormMethod,\n ParamKeyValuePair,\n SubmitOptions,\n URLSearchParamsInit,\n};\nexport { createSearchParams };\n\n// Note: Keep in sync with react-router exports!\nexport type {\n ActionFunction,\n ActionFunctionArgs,\n AwaitProps,\n DataRouteMatch,\n DataRouteObject,\n Fetcher,\n Hash,\n IndexRouteObject,\n IndexRouteProps,\n JsonFunction,\n LayoutRouteProps,\n LoaderFunction,\n LoaderFunctionArgs,\n Location,\n MemoryRouterProps,\n NavigateFunction,\n NavigateOptions,\n NavigateProps,\n Navigation,\n Navigator,\n NonIndexRouteObject,\n OutletProps,\n Params,\n ParamParseKey,\n Path,\n PathMatch,\n Pathname,\n PathPattern,\n PathRouteProps,\n RedirectFunction,\n RelativeRoutingType,\n RouteMatch,\n RouteObject,\n RouteProps,\n RouterProps,\n RouterProviderProps,\n RoutesProps,\n Search,\n ShouldRevalidateFunction,\n To,\n} from \"react-router\";\nexport {\n AbortedDeferredError,\n Await,\n MemoryRouter,\n Navigate,\n NavigationType,\n Outlet,\n Route,\n Router,\n RouterProvider,\n Routes,\n createMemoryRouter,\n createPath,\n createRoutesFromChildren,\n createRoutesFromElements,\n defer,\n isRouteErrorResponse,\n generatePath,\n json,\n matchPath,\n matchRoutes,\n parsePath,\n redirect,\n renderMatches,\n resolvePath,\n useActionData,\n useAsyncError,\n useAsyncValue,\n useHref,\n useInRouterContext,\n useLoaderData,\n useLocation,\n useMatch,\n useMatches,\n useNavigate,\n useNavigation,\n useNavigationType,\n useOutlet,\n useOutletContext,\n useParams,\n useResolvedPath,\n useRevalidator,\n useRouteError,\n useRouteLoaderData,\n useRoutes,\n} from \"react-router\";\n\n///////////////////////////////////////////////////////////////////////////////\n// DANGER! PLEASE READ ME!\n// We provide these exports as an escape hatch in the event that you need any\n// routing data that we don't provide an explicit API for. With that said, we\n// want to cover your use case if we can, so if you feel the need to use these\n// we want to hear from you. Let us know what you're building and we'll do our\n// best to make sure we can support you!\n//\n// We consider these exports an implementation detail and do not guarantee\n// against any breaking changes, regardless of the semver release. Use with\n// extreme caution and only if you understand the consequences. Godspeed.\n///////////////////////////////////////////////////////////////////////////////\n\n/** @internal */\nexport {\n UNSAFE_DataRouterContext,\n UNSAFE_DataRouterStateContext,\n UNSAFE_DataStaticRouterContext,\n UNSAFE_NavigationContext,\n UNSAFE_LocationContext,\n UNSAFE_RouteContext,\n UNSAFE_enhanceManualRouteObjects,\n} from \"react-router\";\n//#endregion\n\ndeclare global {\n var __staticRouterHydrationData: HydrationState | undefined;\n}\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Routers\n////////////////////////////////////////////////////////////////////////////////\n\nexport function createBrowserRouter(\n routes: RouteObject[],\n opts?: {\n basename?: string;\n hydrationData?: HydrationState;\n window?: Window;\n }\n): RemixRouter {\n return createRouter({\n basename: opts?.basename,\n history: createBrowserHistory({ window: opts?.window }),\n hydrationData: opts?.hydrationData || window?.__staticRouterHydrationData,\n routes: enhanceManualRouteObjects(routes),\n }).initialize();\n}\n\nexport function createHashRouter(\n routes: RouteObject[],\n opts?: {\n basename?: string;\n hydrationData?: HydrationState;\n window?: Window;\n }\n): RemixRouter {\n return createRouter({\n basename: opts?.basename,\n history: createHashHistory({ window: opts?.window }),\n hydrationData: opts?.hydrationData || window?.__staticRouterHydrationData,\n routes: enhanceManualRouteObjects(routes),\n }).initialize();\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Components\n////////////////////////////////////////////////////////////////////////////////\n\nexport interface BrowserRouterProps {\n basename?: string;\n children?: React.ReactNode;\n window?: Window;\n}\n\n/**\n * A `` for use in web browsers. Provides the cleanest URLs.\n */\nexport function BrowserRouter({\n basename,\n children,\n window,\n}: BrowserRouterProps) {\n let historyRef = React.useRef();\n if (historyRef.current == null) {\n historyRef.current = createBrowserHistory({ window, v5Compat: true });\n }\n\n let history = historyRef.current;\n let [state, setState] = React.useState({\n action: history.action,\n location: history.location,\n });\n\n React.useLayoutEffect(() => history.listen(setState), [history]);\n\n return (\n \n );\n}\n\nexport interface HashRouterProps {\n basename?: string;\n children?: React.ReactNode;\n window?: Window;\n}\n\n/**\n * A `` for use in web browsers. Stores the location in the hash\n * portion of the URL so it is not sent to the server.\n */\nexport function HashRouter({ basename, children, window }: HashRouterProps) {\n let historyRef = React.useRef();\n if (historyRef.current == null) {\n historyRef.current = createHashHistory({ window, v5Compat: true });\n }\n\n let history = historyRef.current;\n let [state, setState] = React.useState({\n action: history.action,\n location: history.location,\n });\n\n React.useLayoutEffect(() => history.listen(setState), [history]);\n\n return (\n \n );\n}\n\nexport interface HistoryRouterProps {\n basename?: string;\n children?: React.ReactNode;\n history: History;\n}\n\n/**\n * A `` that accepts a pre-instantiated history object. It's important\n * to note that using your own history object is highly discouraged and may add\n * two versions of the history library to your bundles unless you use the same\n * version of the history library that React Router uses internally.\n */\nfunction HistoryRouter({ basename, children, history }: HistoryRouterProps) {\n const [state, setState] = React.useState({\n action: history.action,\n location: history.location,\n });\n\n React.useLayoutEffect(() => history.listen(setState), [history]);\n\n return (\n \n );\n}\n\nif (__DEV__) {\n HistoryRouter.displayName = \"unstable_HistoryRouter\";\n}\n\nexport { HistoryRouter as unstable_HistoryRouter };\n\nexport interface LinkProps\n extends Omit, \"href\"> {\n reloadDocument?: boolean;\n replace?: boolean;\n state?: any;\n preventScrollReset?: boolean;\n relative?: RelativeRoutingType;\n to: To;\n}\n\n/**\n * The public API for rendering a history-aware
.\n */\nexport const Link = React.forwardRef(\n function LinkWithRef(\n {\n onClick,\n relative,\n reloadDocument,\n replace,\n state,\n target,\n to,\n preventScrollReset,\n ...rest\n },\n ref\n ) {\n let href = useHref(to, { relative });\n let internalOnClick = useLinkClickHandler(to, {\n replace,\n state,\n target,\n preventScrollReset,\n relative,\n });\n function handleClick(\n event: React.MouseEvent\n ) {\n if (onClick) onClick(event);\n if (!event.defaultPrevented) {\n internalOnClick(event);\n }\n }\n\n return (\n // eslint-disable-next-line jsx-a11y/anchor-has-content\n \n );\n }\n);\n\nif (__DEV__) {\n Link.displayName = \"Link\";\n}\n\nexport interface NavLinkProps\n extends Omit {\n children?:\n | React.ReactNode\n | ((props: { isActive: boolean; isPending: boolean }) => React.ReactNode);\n caseSensitive?: boolean;\n className?:\n | string\n | ((props: {\n isActive: boolean;\n isPending: boolean;\n }) => string | undefined);\n end?: boolean;\n style?:\n | React.CSSProperties\n | ((props: {\n isActive: boolean;\n isPending: boolean;\n }) => React.CSSProperties | undefined);\n}\n\n/**\n * A wrapper that knows if it's \"active\" or not.\n */\nexport const NavLink = React.forwardRef(\n function NavLinkWithRef(\n {\n \"aria-current\": ariaCurrentProp = \"page\",\n caseSensitive = false,\n className: classNameProp = \"\",\n end = false,\n style: styleProp,\n to,\n children,\n ...rest\n },\n ref\n ) {\n let path = useResolvedPath(to, { relative: rest.relative });\n let location = useLocation();\n let routerState = React.useContext(DataRouterStateContext);\n\n let toPathname = path.pathname;\n let locationPathname = location.pathname;\n let nextLocationPathname =\n routerState && routerState.navigation && routerState.navigation.location\n ? routerState.navigation.location.pathname\n : null;\n\n if (!caseSensitive) {\n locationPathname = locationPathname.toLowerCase();\n nextLocationPathname = nextLocationPathname\n ? nextLocationPathname.toLowerCase()\n : null;\n toPathname = toPathname.toLowerCase();\n }\n\n let isActive =\n locationPathname === toPathname ||\n (!end &&\n locationPathname.startsWith(toPathname) &&\n locationPathname.charAt(toPathname.length) === \"/\");\n\n let isPending =\n nextLocationPathname != null &&\n (nextLocationPathname === toPathname ||\n (!end &&\n nextLocationPathname.startsWith(toPathname) &&\n nextLocationPathname.charAt(toPathname.length) === \"/\"));\n\n let ariaCurrent = isActive ? ariaCurrentProp : undefined;\n\n let className: string | undefined;\n if (typeof classNameProp === \"function\") {\n className = classNameProp({ isActive, isPending });\n } else {\n // If the className prop is not a function, we use a default `active`\n // class for s that are active. In v5 `active` was the default\n // value for `activeClassName`, but we are removing that API and can still\n // use the old default behavior for a cleaner upgrade path and keep the\n // simple styling rules working as they currently do.\n className = [\n classNameProp,\n isActive ? \"active\" : null,\n isPending ? \"pending\" : null,\n ]\n .filter(Boolean)\n .join(\" \");\n }\n\n let style =\n typeof styleProp === \"function\"\n ? styleProp({ isActive, isPending })\n : styleProp;\n\n return (\n \n {typeof children === \"function\"\n ? children({ isActive, isPending })\n : children}\n \n );\n }\n);\n\nif (__DEV__) {\n NavLink.displayName = \"NavLink\";\n}\n\nexport interface FormProps extends React.FormHTMLAttributes {\n /**\n * The HTTP verb to use when the form is submit. Supports \"get\", \"post\",\n * \"put\", \"delete\", \"patch\".\n */\n method?: FormMethod;\n\n /**\n * Normal `
` but supports React Router's relative paths.\n */\n action?: string;\n\n /**\n * Forces a full document navigation instead of a fetch.\n */\n reloadDocument?: boolean;\n\n /**\n * Replaces the current entry in the browser history stack when the form\n * navigates. Use this if you don't want the user to be able to click \"back\"\n * to the page with the form on it.\n */\n replace?: boolean;\n\n /**\n * Determines whether the form action is relative to the route hierarchy or\n * the pathname. Use this if you want to opt out of navigating the route\n * hierarchy and want to instead route based on /-delimited URL segments\n */\n relative?: RelativeRoutingType;\n\n /**\n * A function to call when the form is submitted. If you call\n * `event.preventDefault()` then this form will not do anything.\n */\n onSubmit?: React.FormEventHandler;\n}\n\n/**\n * A `@remix-run/router`-aware ``. It behaves like a normal form except\n * that the interaction with the server is with `fetch` instead of new document\n * requests, allowing components to add nicer UX to the page as the form is\n * submitted and returns with data.\n */\nexport const Form = React.forwardRef(\n (props, ref) => {\n return ;\n }\n);\n\nif (__DEV__) {\n Form.displayName = \"Form\";\n}\n\ntype HTMLSubmitEvent = React.BaseSyntheticEvent<\n SubmitEvent,\n Event,\n HTMLFormElement\n>;\n\ntype HTMLFormSubmitter = HTMLButtonElement | HTMLInputElement;\n\ninterface FormImplProps extends FormProps {\n fetcherKey?: string;\n routeId?: string;\n}\n\nconst FormImpl = React.forwardRef(\n (\n {\n reloadDocument,\n replace,\n method = defaultMethod,\n action,\n onSubmit,\n fetcherKey,\n routeId,\n relative,\n ...props\n },\n forwardedRef\n ) => {\n let submit = useSubmitImpl(fetcherKey, routeId);\n let formMethod: FormMethod =\n method.toLowerCase() === \"get\" ? \"get\" : \"post\";\n let formAction = useFormAction(action, { relative });\n let submitHandler: React.FormEventHandler = (event) => {\n onSubmit && onSubmit(event);\n if (event.defaultPrevented) return;\n event.preventDefault();\n\n let submitter = (event as unknown as HTMLSubmitEvent).nativeEvent\n .submitter as HTMLFormSubmitter | null;\n\n submit(submitter || event.currentTarget, { method, replace, relative });\n };\n\n return (\n \n );\n }\n);\n\nif (__DEV__) {\n Form.displayName = \"Form\";\n}\n\ninterface ScrollRestorationProps {\n getKey?: GetScrollRestorationKeyFunction;\n storageKey?: string;\n}\n\n/**\n * This component will emulate the browser's scroll restoration on location\n * changes.\n */\nexport function ScrollRestoration({\n getKey,\n storageKey,\n}: ScrollRestorationProps) {\n useScrollRestoration({ getKey, storageKey });\n return null;\n}\n\nif (__DEV__) {\n ScrollRestoration.displayName = \"ScrollRestoration\";\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Hooks\n////////////////////////////////////////////////////////////////////////////////\n\nenum DataRouterHook {\n UseScrollRestoration = \"useScrollRestoration\",\n UseSubmitImpl = \"useSubmitImpl\",\n UseFetcher = \"useFetcher\",\n}\n\nenum DataRouterStateHook {\n UseFetchers = \"useFetchers\",\n UseScrollRestoration = \"useScrollRestoration\",\n}\n\nfunction getDataRouterConsoleError(\n hookName: DataRouterHook | DataRouterStateHook\n) {\n return `${hookName} must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router.`;\n}\n\nfunction useDataRouterContext(hookName: DataRouterHook) {\n let ctx = React.useContext(DataRouterContext);\n invariant(ctx, getDataRouterConsoleError(hookName));\n return ctx;\n}\n\nfunction useDataRouterState(hookName: DataRouterStateHook) {\n let state = React.useContext(DataRouterStateContext);\n invariant(state, getDataRouterConsoleError(hookName));\n return state;\n}\n\n/**\n * Handles the click behavior for router `` components. This is useful if\n * you need to create custom `` components with the same click behavior we\n * use in our exported ``.\n */\nexport function useLinkClickHandler(\n to: To,\n {\n target,\n replace: replaceProp,\n state,\n preventScrollReset,\n relative,\n }: {\n target?: React.HTMLAttributeAnchorTarget;\n replace?: boolean;\n state?: any;\n preventScrollReset?: boolean;\n relative?: RelativeRoutingType;\n } = {}\n): (event: React.MouseEvent) => void {\n let navigate = useNavigate();\n let location = useLocation();\n let path = useResolvedPath(to, { relative });\n\n return React.useCallback(\n (event: React.MouseEvent) => {\n if (shouldProcessLinkClick(event, target)) {\n event.preventDefault();\n\n // If the URL hasn't changed, a regular will do a replace instead of\n // a push, so do the same here unless the replace prop is explicitly set\n let replace =\n replaceProp !== undefined\n ? replaceProp\n : createPath(location) === createPath(path);\n\n navigate(to, { replace, state, preventScrollReset, relative });\n }\n },\n [\n location,\n navigate,\n path,\n replaceProp,\n state,\n target,\n to,\n preventScrollReset,\n relative,\n ]\n );\n}\n\n/**\n * A convenient wrapper for reading and writing search parameters via the\n * URLSearchParams interface.\n */\nexport function useSearchParams(\n defaultInit?: URLSearchParamsInit\n): [URLSearchParams, SetURLSearchParams] {\n warning(\n typeof URLSearchParams !== \"undefined\",\n `You cannot use the \\`useSearchParams\\` hook in a browser that does not ` +\n `support the URLSearchParams API. If you need to support Internet ` +\n `Explorer 11, we recommend you load a polyfill such as ` +\n `https://github.com/ungap/url-search-params\\n\\n` +\n `If you're unsure how to load polyfills, we recommend you check out ` +\n `https://polyfill.io/v3/ which provides some recommendations about how ` +\n `to load polyfills only for users that need them, instead of for every ` +\n `user.`\n );\n\n let defaultSearchParamsRef = React.useRef(createSearchParams(defaultInit));\n\n let location = useLocation();\n let searchParams = React.useMemo(\n () =>\n getSearchParamsForLocation(\n location.search,\n defaultSearchParamsRef.current\n ),\n [location.search]\n );\n\n let navigate = useNavigate();\n let setSearchParams = React.useCallback(\n (nextInit, navigateOptions) => {\n const newSearchParams = createSearchParams(\n typeof nextInit === \"function\" ? nextInit(searchParams) : nextInit\n );\n navigate(\"?\" + newSearchParams, navigateOptions);\n },\n [navigate, searchParams]\n );\n\n return [searchParams, setSearchParams];\n}\n\ntype SetURLSearchParams = (\n nextInit?:\n | URLSearchParamsInit\n | ((prev: URLSearchParams) => URLSearchParamsInit),\n navigateOpts?: NavigateOptions\n) => void;\n\ntype SubmitTarget =\n | HTMLFormElement\n | HTMLButtonElement\n | HTMLInputElement\n | FormData\n | URLSearchParams\n | { [name: string]: string }\n | null;\n\n/**\n * Submits a HTML `` to the server without reloading the page.\n */\nexport interface SubmitFunction {\n (\n /**\n * Specifies the `` to be submitted to the server, a specific\n * `\r\n\r\n {/* \r\n\r\n
\r\n \r\n
*/}\r\n \r\n )\r\n}\r\n","import React, { useEffect, useState, useReducer } from 'react'\n\nconst setCountArr = []\nconst effectArr = []\n\nexport function ExampleUseState0() {\n console.log('ExampleUseState0---渲染---')\n // initialState 参数只会在组件的初始渲染中起作用,后续渲染时会被忽略。如果初始 state 需要通过复杂计算获得,则可以传入一个函数,在函数中计算并返回初始的 state,此函数只在初始渲染时被调用:\n // const [count, setCount] = useState(0)\n const [count, setCount] = useState(() => {\n // const initialState = someExpensiveComputation(props);\n const initialState = 0\n return initialState\n })\n\n function handleAdd() {\n setCount((c) => {\n const res = c + 1\n\n console.log('setCount前使用count: ', c)\n doQuery(res)\n\n return res\n })\n }\n\n function doQuery(c) {\n console.log('doQuery---count', c)\n }\n\n useEffect(() => {\n console.log('useEffetc---count: ', count)\n }, [count])\n\n return (\n <>\n

内置hook useState

\n\n \n\n \n\n {/* 如果你更新 State Hook 后的 state 与当前的 state 相同时,React 将跳过子组件的渲染并且不会触发 effect 的执行。(React 使用 Object.is 比较算法 来比较 state。) */}\n \n \n )\n}\nfunction Child({ count }) {\n console.log('Child---渲染---')\n return
{count}
\n}\n\nexport function ExampleUseState() {\n console.log('ExampleUseState------render---')\n\n const [count, setCount] = useState(0)\n\n if (count > 2) {\n /**\n * Hook 规则\n * 1.只在最顶层使用 Hook 不要在循环,条件或嵌套函数中调用 Hook\n * 2.只在 React 函数中调用 Hook 不要在普通的 JavaScript 函数中调用 Hook。\n * -✅ 在 React 的函数组件中调用 Hook\n * -✅ 在自定义 Hook 中调用其他 Hook (我们将会在下一页 中学习这个。)\n */\n /**\n 使用 eslint-plugin-react-hooks ESLint 插件来强制执行上面两条hook的规则\n .eslintrc.js\n \"react-hooks/rules-of-hooks\": \"error\", // 检查 Hook 的规则\n \"react-hooks/exhaustive-deps\": \"warn\" // 检查 effect 的依赖\n */\n // React Hook \"useState\" is called conditionally. React Hooks must be called in the exact same order in every component render.\n // const [count2, setCoun2] = useState(0)\n // React Hook \"useEffect\" is called conditionally. React Hooks must be called in the exact same order in every component render.\n // useEffect(() => {\n // console.log('test---useEffect---')\n // })\n }\n\n const onClick = () => {\n setCount(count + 1)\n\n localStorage.setItem('MY-REACT-APP---click-count', count)\n }\n\n setCountArr.push(setCount)\n console.log('setCountArr---', setCountArr)\n if (setCountArr.length >= 2) {\n console.log(setCountArr[0] === setCountArr[1]) // true -> 每次渲染, state hook的更新函数都是同一个\n }\n\n const [age, setAge] = useState(42)\n const [fruit, setFruit] = useState('banana')\n const [todos, setTodos] = useState([{ text: 'Learn Hooks' }])\n\n // 被 effect hook调用的函数,挪到hook函数里去\n // The 'logFruit' function makes the dependencies of useEffect Hook (at line 80) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'logFruit' in its own useCallback() Hook.\n // function logFruit () {\n // console.log('fruit---', fruit)\n // }\n\n // 相当于 componentDidMount 和 componentDidUpdate:\n const effect = () => {\n console.log('effect---new count:', count)\n // 使用浏览器的 API 更新页面标题\n document.title = `You clicked ${count} times`\n\n function logFruit() {\n console.log('fruit---', fruit)\n }\n\n if (count > 2) {\n console.log('count is greater than 2---')\n console.log('age---', age)\n } else if (count < 2) {\n console.log('count is less than 2---')\n logFruit()\n } else {\n console.log('count is equal to 2---')\n }\n\n return () => {\n console.log('清除useEffect---old count', count) // effect hook中返回的清除函数会在组件卸载的时候执行清除操作(effect 的清除阶段在每次重新渲染时都会执行)\n }\n }\n useEffect(effect, [count, age, fruit]) // eslint校验 \"react-hooks/exhaustive-deps\": \"warn\" // eslint-plugin-react-hooks 检查 effect 的依赖\n\n effectArr.push(effect)\n console.log('effectArr---', effectArr)\n if (effectArr.length >= 2) {\n console.log(effectArr[0] === effectArr[1]) // false -> 每次渲染, effect hook的effect函数都不同\n }\n\n return (\n
\n

\n
count: {count}
\n \n\n

age: {age}

\n

fruit: {fruit}

\n

todos: {todos[0].text}

\n\n

---------------------------------------------

\n
\n )\n}\n\nexport function ExampleOfOldStateAndProp() {\n console.log('Example---')\n const [count, setCount] = useState(0)\n\n // 如果你先点击「Show alert」然后增加计数器的计数,那这个 alert 会显示在你点击『Show alert』按钮时的 count 变量。\n function handleAlertClick() {\n setTimeout(() => {\n alert('You clicked on: ' + count)\n }, 3000)\n }\n\n return (\n
\n

You clicked {count} times

\n \n \n
\n )\n}\n\nexport class ClassExampleUseState extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n count: 0,\n }\n }\n\n componentDidMount() {\n console.log('ClassExampleUseState---componentDidMount---')\n document.title = `You clicked ${this.state.count} times`\n }\n componentDidUpdate() {\n console.log('ClassExampleUseState---componentDidUpdate---')\n document.title = `You clicked ${this.state.count} times`\n }\n\n componentWillUnmount() {\n console.log('ClassExampleUseState---componentWillUnmount---')\n }\n\n render() {\n return (\n
\n

内置hook useState

\n
You Clicked {this.state.count} times
\n \n

---------------------------------------------

\n
\n )\n }\n}\n\nexport function ExampleUseReducer({ initailCount = 100 }) {\n const initialState = { count: 0 }\n function init(initailCount) {\n debugger\n return {\n count: initailCount,\n }\n }\n\n function reducer(state, action) {\n switch (action.type) {\n case 'increment':\n return { count: state.count + 1 }\n case 'decrement':\n return { count: state.count - 1 }\n case 'reset':\n return init(action.payload)\n default:\n return new Error()\n }\n }\n\n // const [state, dispatch] = useReducer(reducer, initialState)\n\n /* \n 惰性初始化\n 你可以选择惰性地创建初始 state。为此,需要将 init 函数作为 useReducer 的第三个参数传入,这样初始 state 将被设置为 init(initialArg)。\n 这么做可以将用于计算 state 的逻辑提取到 reducer 外部,这也为将来对重置 state 的 action 做处理提供了便利:\n */\n const [state, dispatch] = useReducer(reducer, initailCount, init)\n return (\n <>\n

内置hook useReducer

\n Count: {state.count}\n \n \n dispatch({ type: 'reset', payload: initailCount })}\n >\n Reset\n \n

---------------------------------------------

\n \n )\n}\n","import { useState, useEffect } from 'react'\n\nconst ChatAPI = {\n subscribeToFriendStatus(id, cb) {\n const statusArr = [true, false]\n // 在线状态\n const randomIndex = Math.round(Math.random())\n const status = {\n isOnline: statusArr[randomIndex],\n }\n cb && cb(status)\n },\n unsubscribeFromFriendStatus(id, cb) {\n const status = {\n isOnline: false,\n }\n\n cb && cb(status)\n },\n}\n\n// 自定义 Hook 更像是一种约定而不是功能。如果函数的名字以 “use” 开头并调用其他 Hook,我们就说这是一个自定义 Hook\nexport default function useFriendStatus(frinedID) {\n const [isOnline, setIsOnline] = useState(null)\n\n function handleStatusChange(status) {\n setIsOnline(status.isOnline)\n }\n\n useEffect(() => {\n ChatAPI.subscribeToFriendStatus(frinedID, handleStatusChange)\n return () => {\n ChatAPI.unsubscribeFromFriendStatus(frinedID, handleStatusChange)\n }\n })\n\n return isOnline\n}\n","import { useState, useEffect } from 'react'\n\n// 自定义hook\nimport useFriendStatus from './useFriendStatus'\n\nexport function FriendStatus(props) {\n /* const [isOnline, setIsOnline] = useState(null)\n\n function handleStatusChange (status) {\n setIsOnline(status.isOnline)\n }\n\n useEffect(() => {\n // ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange)\n return () => {\n // ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange)\n };\n }); */\n\n const isOnline = useFriendStatus(props.friend.id)\n\n if (isOnline === null) {\n return 'Loading...'\n }\n return (\n <>\n

自定义hook useFriendStatus

\n {isOnline ? 'Online' : 'Offline'}\n \n )\n}\n\nexport function FriendListItem(props) {\n console.log('props', props)\n const isOnline = useFriendStatus(props.friend.id)\n\n return (\n <>\n
  • \n {props.friend.name}\n
  • \n \n
    {props.friend.name}
    \n \n )\n}\n\nexport function FriendSelect() {\n const friendList = [\n { id: 1, name: 'Phoebe' },\n { id: 2, name: 'Rachel' },\n { id: 3, name: 'Ross' },\n ]\n\n // 在多个 Hook 之间传递信息\n const [recipientID, setRecipientID] = useState(1)\n const isRecipientOnline = useFriendStatus(recipientID)\n\n return (\n
    \n setRecipientID(e.target.value)}\n >\n {friendList.map((friend) => (\n \n ))}\n \n \n\n

    ---------------------------------------------

    \n
    \n )\n}\n\nfunction Circle(props) {\n return (\n \n )\n}\n\nfunction CompDivider() {\n return

    ---------------------------------------------

    \n}\n","import { useState } from 'react'\n\nexport function todosReducer(state, action) {\n switch (action.type) {\n case 'add':\n return [\n ...state,\n {\n text: action.text,\n completed: false,\n id: action.id,\n },\n ]\n // ... other actions ...\n default:\n return state\n }\n}\n\nexport default function useReducer(reducer, initialState) {\n const [state, setState] = useState(initialState)\n\n function dispatch(action) {\n const nextState = reducer(state, action)\n setState(nextState)\n }\n\n return [state, dispatch]\n}\n","import { useState } from 'react'\nimport useReducer, { todosReducer } from './useReducer'\n\nexport function Todos() {\n const [todo, setTodo] = useState('')\n\n const [todos, dispatch] = useReducer(todosReducer, [])\n\n const [id, setId] = useState(1)\n\n function handleAddClick(text) {\n dispatch({\n type: 'add',\n text: todo,\n id: id,\n })\n\n setId(id + 1)\n }\n\n return (\n <>\n

    自定义hook useReducer

    \n setTodo(e.target.value)}\n >\n \n
      \n {todos.map((todo) => (\n
    • \n {todo.text} conpleted: {todo.completed ? 'true' : 'false'}\n
    • \n ))}\n
    \n\n

    ---------------------------------------------

    \n \n )\n}\n","import React, { useContext } from 'react'\n\nconst themes = {\n light: {\n text: 'light',\n foreground: '#000000',\n background: '#eeeeee',\n },\n dark: {\n text: 'dark',\n foreground: '#ffffff',\n background: '#222222',\n },\n}\n\nconst ThemeContext = React.createContext(themes.light)\n\nexport function AppThemeColor() {\n return (\n \n \n \n )\n}\n\nfunction Toolbar(props) {\n return (\n
    \n \n
    \n )\n}\n\nfunction ThemeButton() {\n const theme = useContext(ThemeContext)\n return (\n <>\n

    内置hook useContext

    \n \n\n

    ---------------------------------------------

    \n \n )\n}\n","import { useCallback, useRef, useState } from 'react'\n\nexport function TextInputWithFocusButton() {\n const inputEle = useRef(null)\n const onButtonClick = () => {\n // `current` 指向已挂载到 DOM 上的文本输入元素\n inputEle.current.focus()\n }\n return (\n <>\n

    内置hook useRef

    \n \n \n \n )\n}\n\n// callback ref\nexport function MeasureExample() {\n const [height, setHeight] = useState(0)\n\n const measuredRef = useCallback((node) => {\n if (node !== null) {\n setHeight(node.getBoundingClientRect().height)\n }\n }, [])\n\n return (\n <>\n

    callback ref

    \n

    The above header is {Math.round(height)}px tall

    \n \n )\n}\n/* \n在这个案例中,我们没有选择使用 useRef,因为当 ref 是一个对象时它并不会把当前 ref 的值的 变化 通知到我们。使用 callback ref 可以确保 即便子组件延迟显示被测量的节点 (比如为了响应一次点击),我们依然能够在父组件接收到相关的信息,以便更新测量结果。\n注意到我们传递了 [] 作为 useCallback 的依赖列表。这确保了 ref callback 不会在再次渲染时改变,因此 React 不会在非必要的时候调用它。\n在此示例中,当且仅当组件挂载和卸载时,callback ref 才会被调用,因为渲染的

    组件在整个重新渲染期间始终存在。如果你希望在每次组件调整大小时都收到通知,则可能需要使用 ResizeObserver 或基于其构建的第三方 Hook。\n */\n\n// 可以 把上面这个逻辑抽取出来作为 一个可复用的 Hook:\nexport function MeasureExample2() {\n const [rect, ref] = useClientRect()\n return (\n <>\n

    callback ref

    \n {rect !== null && (\n <>\n

    The above header is {Math.round(rect.height)}px tall

    \n

    The above header is {Math.round(rect.width)}px width

    \n \n )}\n

    ---------------------------------------------

    \n \n )\n}\n\nfunction useClientRect() {\n const [rect, setRect] = useState(null)\n\n const ref = useCallback((node) => {\n if (node !== null) {\n setRect(node.getBoundingClientRect())\n }\n }, [])\n\n return [rect, ref]\n}\n","/*\nconst memoizedCallback = useCallback(\n () => {\n doSomething(a, b);\n },\n [a, b],\n);\n\n返回一个 memoized 回调函数。\n\n把内联回调函数及依赖项数组作为参数传入 useCallback,它将返回该回调函数的 memoized 版本,该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染(例如 shouldComponentUpdate)的子组件时,它将非常有用。\n */\n\n/*\nconst memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);\n\n返回一个 memoized 值。\n\n把“创建”函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。\n\n记住,传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行不应该在渲染期间内执行的操作,诸如副作用这类的操作属于 useEffect 的适用范畴,而不是 useMemo。\n\n如果没有提供依赖项数组,useMemo 在每次渲染时都会计算新的值。\n\n你可以把 useMemo 作为性能优化的手段,但不要把它当成语义上的保证。将来,React 可能会选择“遗忘”以前的一些 memoized 值,并在下次渲染时重新计算它们,比如为离屏组件释放内存。先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo,以达到优化性能的目的\n */\n\nimport { useCallback, useState, memo, useMemo } from 'react'\n\nconst fun1Set = new Set()\nconst fun2Set = new Set()\nconst fun3Set = new Set()\n\nexport function ExampleUseCallback1() {\n const [count, setCount] = useState(0)\n\n //示例1包裹了useCallBack的函数\n const fun1 = useCallback(() => {\n console.log('示例一函数')\n }, [])\n\n //示例2没有包裹useCallBack的函数\n const fun2 = () => {\n console.log('示例二函数')\n }\n\n // 示例3包裹了useCallBack的函数,但有依赖项数据\n // const fun3 = useCallback(() => {\n // console.log('useCallback回调函数依赖count---', count);\n // }, [count])\n\n // useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。\n const fun3 = useMemo(() => {\n return () => {\n console.log('useCallback回调函数依赖count---', count)\n }\n }, [count])\n\n fun1Set.add(fun1)\n fun2Set.add(fun2)\n fun3Set.add(fun3)\n\n console.log('count变化,每次渲染时---')\n console.log('fun1Set.size---', fun1Set.size) // fun1会一直创建相同的函数内存地址\n console.log('fun2Set.size---', fun2Set.size) // fun2会一直创建不同的函数内存地址\n console.log('fun3Set.size---', fun3Set.size) // fun2会一直创建不同的函数内存地址\n\n /* \n 一:useCallBack不是每个函数都需要使用!\n\n 1.为什么不用useCallBack把每个函数都包一下呢?\n\n 2.useCallBack不是缓存工具吗?\n\n 3.将每个函数都缓存不是可以更好提升性能吗?\n\n useCallBack是一个缓存工具没错。但实际上他并不能阻止函数都重现构建。\n\n 看上方这种结构的组件,Com组件中包含了fun1和fun2两个函数\n\n 是不是认为当Com组件重新渲染的时候,只有fun2(没有使用useCallBack的函数)函数会被重新构建,而fun1(使用了useCallBack的函数)函数不会被重新构建。\n\n 实际上,被useCallBack包裹了的函数也会被重新构建并当成useCallBack函数的实参传入。\n\n useCallBack的本质工作不是在依赖不变的情况下阻止函数创建,而是在依赖不变的情况下不返回新的函数地址而返回旧的函数地址。不论是否使用useCallBack都无法阻止组件render时函数的重新创建!!\n\n 每一个被useCallBack的函数都将被加入useCallBack内部的管理队列。而当我们大量使用useCallBack的时候,管理队列中的函数会非常之多,任何一个使用了useCallBack的组件重新渲染的时候都需要去便利useCallBack内部所有被管理的函数找到需要校验依赖是否改变的函数并进行校验。\n\n 在以上这个过程中,寻找指定函数需要性能,校验也需要性能。所以,滥用useCallBack不但不能阻止函数重新构建还会增加“寻找指定函数和校验依赖是否改变”这两个功能,为项目增添不必要的负担。 */\n\n return (\n <>\n

    内置hook useCallback

    \n

    count: {count}

    \n \n \n )\n}\n\n/* 二:useCallBack在什么情况下使用?\n在往子组件传入了一个函数并且子组件被React.momo缓存了的时候使用 */\n\n/* \n如上所说的,useCallBack的作用不是阻止函数创建,而是在依赖不变的情况下返回旧函数地址(保持地址不变)。\n\nReact.memo(),是一种缓存技术。\n\n简单说,React.memo()是通过校验props中的数据是否改变的来决定组件是否需要重新渲染的一种缓存技术,具体点说React.memo()其实是通过校验Props中的数据的内存地址是否改变来决定组件是否重新渲染组件的一种技术。\n\n假设我们往子组件(假设子组件为Child组件)传入一个函数呢?当父组件的其他State(与Child组件无关的state)改变的时候。那么,因为状态的改变,父组件需要重新渲染,那被React.memo保护的子组件(Child组件)是否会被重新构建? */\n\n/* React.memo检测的是props中数据的栈地址是否改变。而父组件重新构建的时候,会重新构建父组件中的所有函数(旧函数销毁,新函数创建,等于更新了函数地址),新的函数地址传入到子组件中被props检测到栈地址更新。也就引发了子组件的重新渲染。\n\n所以,在上面的代码示例里面,子组件是要被重新渲染的。\n\n那么如何才能让子组件不进行重新渲染呢?useCallBack的正确使用方法来了。\n使用useCallBack包一下需要传入子组件的那个函数。那样的话,父组件重新渲染,子组件中的函数就会因为被useCallBack保护而返回旧的函数地址,子组件就不会检测成地址变化,也就不会重选渲染。 */\n\n/* 我们只需要使用useCallBack保护一下父组件中传入子组件的那个函数(toChildFun函数)保证它不会在没有必要的情况下返回一个新的内存地址就好了。 */\n\nexport function ExampleUseCallback2() {\n return \n}\n\nexport function Parent() {\n const [parentState, setParentState] = useState(0) // 父组件的state\n const [count, setCount] = useState(0)\n\n // 需要传入子组件的函数\n const toChildFun = () => {\n console.log('需要传入子组件的函数')\n }\n\n const toChildFunFromUseCallback = useCallback(() => {\n console.log('需要传入子组件的函数-被useCallback包裹')\n }, [])\n\n //\n return (\n <>\n

    \n {/* */}\n \n\n {/* 更新parentState不会触发子组件更新 */}\n {/* */}\n\n {/* 更新parentState会触发子组件更新 */}\n {/* */}\n\n {/* 将父组件的函数传入子组件 */}\n {/* 更新parentState会触发子组件更新 */}\n {/* */}\n\n {/* 更新parentState不会触发子组件更新-虽然传递给子组件的是函数,但是被useCallback包裹缓存了,除非因为依赖更新产生新的回调函数(内存地址不一样) */}\n \n \n )\n}\n\nconst Child = memo(() => {\n console.log('我被打印了就说明子组件重新构建了')\n return
    子组件
    \n})\n\n/* 总结\nuseCallBack不要每个函数都包一下,否则就会变成反向优化,useCallBack本身就是需要一定性能的\nuseCallBack并不能阻止函数重新创建,它只能通过依赖决定返回新的函数还是旧的函数,从而在依赖不变的情况下保证函数地址不变\nuseCallBack需要配合React.memo使用 */\n","import { useEffect, useImperativeHandle, forwardRef, useRef } from 'react'\n\nfunction FancyInput(props, ref) {\n console.log('FancyInput---', props, ref)\n const inputRef = useRef()\n useImperativeHandle(ref, () => ({\n focus: () => {\n console.log('focus函数被父组件手动触发, ref: ', ref, inputRef)\n inputRef.current.focus()\n },\n }))\n\n return \n}\nFancyInput = forwardRef(FancyInput)\n\nexport function ExampleUseImperativeHandle() {\n const inputRef = useRef()\n useEffect(() => {})\n const handleFocusFancyInput = () => {\n inputRef.current.focus()\n }\n\n return (\n <>\n

    ---------------------------------------------

    \n

    内置hook useImperativeHandle

    \n\n \n\n \n \n )\n}\n","import { useRef, useState, useTransition } from 'react'\n\nexport function ExampleUseTransition() {\n console.log('ExampleUseTransition---')\n const [isPending, startTransition] = useTransition()\n const [count, setCount] = useState(0)\n const inputRef = useRef(null)\n\n function handleClick() {\n startTransition(() => {\n setCount((c) => c + 1)\n\n // inputRef.current.focus()\n })\n // setCount(c => c + 1)\n }\n\n return (\n
    \n

    ---------------------------------------------

    \n

    内置hook useTransition

    \n\n {isPending && }\n \n\n \n
    \n )\n}\n\nfunction Spinner() {\n return
    loading...
    \n}\n","import { useId } from 'react'\n\nexport function ExampleUseId() {\n const id = useId()\n\n console.log('id', id)\n return (\n <>\n

    ---------------------------------------------

    \n

    内置hook useId

    \n\n \n \n\n \n \n )\n}\n\nfunction NameField() {\n const id = useId()\n\n return (\n
    \n \n
    \n \n
    \n\n \n
    \n \n
    \n
    \n )\n}\n","import { useState, useEffect, useLayoutEffect, useInsertionEffect } from 'react'\n\nexport function ExampleUseEffect(props) {\n const [count, setCount] = useState(0)\n\n const { x } = props\n\n function handleCountChange() {\n setCount((c) => c + 1)\n }\n\n // const func1 = function () {\n // console.log('x---', x);\n // }\n\n function func1() {\n // console.log('x---', x);\n }\n\n // 使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。\n useEffect(() => {\n console.log('useEffect---count----', count)\n console.log(\n 'useEffect---document count---',\n document.getElementById('count').innerText\n )\n\n func1()\n return () => {\n // 通常,组件卸载时需要清除 effect 创建的诸如订阅或计时器 ID 等资源。要实现这一点,useEffect 函数需返回一个清除函数。\n // 为防止内存泄漏,清除函数会在组件卸载前执行。另外,如果组件多次渲染(通常如此),则在执行下一个 effect 之前,上一个 effect 就已被清除。在上述示例中,意味着组件的每一次更新都会创建新的订阅\n // 与 componentDidMount、componentDidUpdate 不同的是,传给 useEffect 的函数会在浏览器完成布局与绘制之后,在一个延迟事件中被调用。这使得它适用于许多常见的副作用场景,比如设置订阅和事件处理等情况,因为绝大多数操作不应阻塞浏览器对屏幕的更新。\n console.log('清除useEffect---count----', count) // 每次执行清除函数,里面获取的数据是旧的\n console.log(\n '清除useEffect---document count---',\n document.getElementById('count') &&\n document.getElementById('count').innerText\n ) // 每次执行清除函数,里面获取的dom是最新的(执行下一个 effect 之前,先清除上一个 effect-执行上一个effect的清除函数,传给 useEffect 的函数会在浏览器完成布局与绘制之后,在一个延迟事件中被调用 )\n }\n }, [count, x])\n\n useLayoutEffect(() => {\n console.log('useLayoutEffect---count----', count)\n console.log(\n 'useLayoutEffect---document count---',\n document.getElementById('count') &&\n document.getElementById('count').innerText\n )\n }, [count])\n\n // useInsertionEffect(() => {\n // console.log('useInsertionEffect---count----', count)\n // console.log('useInsertionEffect---document count---', document.getElementById('count') && document.getElementById('count').innerText);\n // }, [count])\n\n return (\n <>\n

    ---------------------------------------------

    \n

    内置hook useEffect & useLayoutEffect

    \n\n

    {count}

    \n \n \n )\n}\n","import {\n ExampleUseState,\n ClassExampleUseState,\n ExampleUseReducer,\n ExampleUseState0,\n ExampleOfOldStateAndProp,\n} from './hooks/useState'\nimport {\n FriendStatus,\n FriendListItem,\n FriendSelect,\n} from './hooks/FriendStatus'\nimport { Todos } from './hooks/Todos'\nimport { AppThemeColor } from './hooks/useContext'\nimport {\n TextInputWithFocusButton,\n MeasureExample,\n MeasureExample2,\n} from './hooks/useRef'\nimport { ExampleUseCallback1, ExampleUseCallback2 } from './hooks/useCallback'\nimport { ExampleUseImperativeHandle } from './hooks/useImperativeHandle'\nimport { ExampleUseTransition } from './hooks/useTransition'\nimport { ExampleUseId } from './hooks/useId'\nimport { ExampleUseEffect } from './hooks/useEffect'\n\nconst friend = {\n id: '1',\n name: '张三',\n}\n\nexport default function Hooks() {\n return (\n <>\n \n \n \n \n \n\n \n \n \n\n \n\n \n\n \n \n \n\n \n \n\n \n\n \n\n \n\n \n \n )\n}\n","import { useState, useEffect, useRef } from 'react'\n\n// https://react.docschina.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often\n\n// 如果我的 effect 的依赖频繁变化,我该怎么办?\n// 有时候,你的 effect 可能会使用一些频繁变化的值。你可能会忽略依赖列表中 state,但这通常会引起 Bug:\n\n/**\n * \nfunction Counter() {\n const [count, setCount] = useState(0);\n\n useEffect(() => {\n const id = setInterval(() => {\n setCount(count + 1); // 这个 effect 依赖于 `count` state\n }, 1000);\n return () => clearInterval(id);\n }, []); // 🔴 Bug: `count` 没有被指定为依赖\n\n return

    {count}

    ;\n}\n\n传入空的依赖数组 [],意味着该 hook 只在组件挂载时运行一次,并非重新渲染时。\n但如此会有问题,在 setInterval 的回调中,count 的值不会发生变化。因为当 effect 执行时,我们会创建一个闭包,并将 count 的值被保存在该闭包当中,且初值为 0。\n每隔一秒,回调就会执行 setCount(0 + 1),因此,count 永远不会超过 1。\n\n * \n */\n\n// 指定 [count] 作为依赖列表就能修复这个 Bug,但会导致每次改变发生时定时器都被重置。\n// 事实上,每个 setInterval 在被清除前(类似于 setTimeout)都会调用一次。但这并不是我们想要的。\n// 要解决这个问题,我们可以使用 setState 的函数式更新形式。它允许我们指定 state 该 如何 改变而不用引用 当前 state:\nexport function StateExample() {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n const id = setInterval(() => {\n setCount((c) => c + 1) // ✅ 在这不依赖于外部的 `count` 变量\n }, 1000)\n return () => clearInterval(id)\n }, []) // ✅ 我们的 effect 不使用组件作用域中的任何变量\n\n return (\n <>\n

    {count}

    \n \n )\n}\n// (setCount 函数的身份是被确保稳定的,所以可以放心的省略掉)\n// 此时,setInterval 的回调依旧每秒调用一次,但每次 setCount 内部的回调取到的 count 是最新值(在回调中变量命名为 c)。\n\nexport function RefExample(props) {\n // 把最新的 props 保存在一个 ref 中\n const latestProps = useRef(props)\n useEffect(() => {\n latestProps.current = props\n })\n\n useEffect(() => {\n function tick() {\n // 在任何时候读取最新的 props\n console.log(latestProps.current)\n }\n\n const id = setInterval(tick, 1000)\n return () => clearInterval(id)\n }, []) // 这个 effect 从不会重新执行\n}\n","import { memo, useState } from 'react'\n\nexport default function () {\n const [count, setCount] = useState(0)\n\n return (\n <>\n

    ---------------------------------------------

    \n\n \n\n {/* */}\n \n \n )\n}\n\nexport function Child(props) {\n console.log('Child 渲染了---props: ', props)\n return (\n <>\n
    I'm Child, count from parent is {props.count}
    \n \n )\n}\n\n// React.memo 等效于 PureComponent,但它只比较 props\nexport const MemoChild = memo(Child, function (prevProps, nextProps) {\n // memo 第二个参数指定一个自定义的比较函数来比较新旧 props。如果函数返回 true,就会跳过更新。\n console.log('MemoChild---compare函数执行')\n console.log('prevProps: ', prevProps)\n console.log('nextProps: ', nextProps)\n if (nextProps.count !== prevProps.count) {\n // 更新\n return false\n }\n return true\n})\n","import { useState, useMemo } from 'react'\n\n// useMemo Hook 允许你通过「记住」上一次计算结果的方式在多次渲染的之间缓存计算结果:\n// const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);\n// 这行代码会调用 computeExpensiveValue(a, b)。但如果依赖数组 [a, b] 自上次赋值以来没有改变过,useMemo 会跳过二次调用,只是简单复用它上一次返回的值。\n\nexport default function () {\n const [a, setA] = useState(100)\n const [b, setB] = useState(900)\n const [c, setC] = useState(1)\n\n const computeExpensiveValue = (a, b) => {\n console.log('computeExpensiveValue 执行了')\n let count = 0\n for (let i = 0; i < 10000000; i++) {\n count += a + b\n }\n console.log('count---', count)\n }\n const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])\n\n /**\n *\n * @param {string} a\n * @param {number} b\n * @param {number} c\n * @return {number}\n */\n function testJSDoc(a, b, c) {}\n testJSDoc(1, 2, 3)\n\n return (\n <>\n

    ---------------------------------------------

    \n \n \n \n \n
    c: {c}
    \n \n )\n}\n\nfunction Parent({ a, b }) {\n // Only re-rendered if `a` changes:\n const child1 = useMemo(() => , [a])\n // Only re-rendered if `b` changes:\n const child2 = useMemo(() => , [b])\n return (\n <>\n {child1}\n {child2}\n \n )\n}\n\nfunction Child1({ a }) {\n console.log('Child1 渲染了---', a)\n return
    a: {a}
    \n}\n\nfunction Child2({ b }) {\n console.log('Child2 渲染了---', b)\n return
    b: {b}
    \n}\n","import { useState, useRef } from 'react'\n\n// 如果依赖数组的值相同,useMemo 允许你 记住一次昂贵的计算。但是,这仅作为一种提示,并不 保证 计算不会重新运行。但有时候需要确保一个对象仅被创建一次。\n\n// 第一个常见的使用场景是当创建初始 state 很昂贵时:\nexport default function () {\n const [count, setCount] = useState(100)\n\n return (\n <>\n

    ---------------------------------------------

    \n
    count: {count}
    \n \n {/* */}\n \n {/* */}\n \n )\n}\n\nfunction createRows(count) {\n console.log('createRows---被调用了')\n let rows = []\n for (let i = 0; i < count; i++) {\n rows.push({\n id: i,\n name: `name_${i}`,\n })\n }\n\n return rows\n}\n\nfunction Table(props) {\n console.log('Table---渲染了')\n // ⚠️ createRows() 每次渲染都会被调用\n // const [rows, setRows] = useState(createRows(props.count)); // 但每次渲染时rows都取第一次执行的数据,后面的执行都会被忽略,不会更新到useState的返回值 https://react.docschina.org/docs/hooks-reference.html#usestate\n // console.log('rows---', rows);\n\n // 为避免重新创建被忽略的初始 state,我们可以传一个 函数 给 useState:\n // ✅ createRows() 只会被调用一次\n const [rows2, setRows2] = useState(() => createRows(props.count))\n // console.log('rows2---', rows2);\n // React 只会在首次渲染时调用这个函数。\n\n return (\n <>\n
    Table {props.count}
    \n \n )\n // ...\n}\n\n// 你或许也会偶尔想要避免重新创建 useRef() 的初始值。举个例子,或许你想确保某些命令式的 class 实例只被创建一次:\nfunction Image(props) {\n function onIntersect() {\n console.log('onIntersect---')\n }\n function createIntersectionObserver() {\n console.log('createIntersectionObserver---')\n const io = new IntersectionObserver(onIntersect)\n console.log('io---', io)\n }\n // ⚠️ IntersectionObserver 在每次渲染都会被创建\n const ref = useRef(createIntersectionObserver())\n\n function onViewRefData() {\n console.log('onViewRefData---ref', ref.current)\n }\n onViewRefData()\n return (\n <>\n
    Images {props.count}
    \n \n \n )\n}\n\n// useRef 不会 像 useState 那样接受一个特殊的函数重载。相反,你可以编写你自己的函数来创建并将其设为惰性的:\nfunction Image2(props) {\n const ref = useRef(null)\n\n function onIntersect() {\n console.log('onIntersect---')\n }\n\n // ✅ IntersectionObserver 只会被惰性创建一次\n function getObserver(props) {\n console.log('getObserver-----')\n if (ref.current === null) {\n ref.current = new IntersectionObserver(onIntersect)\n }\n return ref.current\n }\n\n // 当你需要时,调用 getObserver()\n // ...\n console.log('ref---', ref, ref.current)\n function onViewRefData() {\n console.log('onViewRefData---ref', ref.current)\n }\n return (\n <>\n
    Image2 {props.count}
    \n \n \n \n )\n}\n// 这避免了我们在一个对象被首次真正需要之前就创建它。如果你使用 Flow 或 TypeScript,你还可以为了方便给 getObserver() 一个不可为 null 的类型。\n","import {\n StateExample,\n RefExample,\n} from './hooks-faq/what-can-i-do-if-my-effect-dependencies-change-too-often'\nimport HowDoIImplementShouldComponentUpdate from './hooks-faq/how-do-i-implement-shouldcomponentupdate'\nimport HowToMemoizeCalculations from './hooks-faq/how-to-memoize-calculations'\nimport HowToCreateExpensiveObjectsLazily from './hooks-faq/how-to-create-expensive-objects-lazily'\n\nexport default function () {\n return (\n <>\n \n\n {/* */}\n\n \n\n \n\n \n \n )\n}\n","import React from 'react'\n\nconst Element = function () {\n return
    Hello JSX!
    \n}\n\nconst Element2 = function () {\n const element = React.createElement(\n 'div',\n { className: 'greeting', tabIndex: 1 },\n 'Hello ',\n React.createElement(\n 'div',\n { className: 'greeting', tabIndex: 1 },\n 'JSX1 ',\n 'JSX2 '\n )\n )\n\n console.log('element: ', element)\n\n return element\n}\n\nexport default function () {\n return (\n <>\n
    jsx------------------------------------
    \n \n \n\n {[1, 2, 3]}\n {true}\n \n )\n}\n","import JSX from './core/jsx'\n\nexport default function () {\n return \n}\n","import { createBrowserRouter } from 'react-router-dom'\n\nimport ReactApiHome from './../views/react-api/Home'\nimport Hooks from './../views/react-api/hooks'\nimport HooksFaq from './../views/react-api/hooks-faq'\nimport Core from './../views/react-api/core'\n\nconst router = createBrowserRouter([\n {\n path: '/',\n element: ,\n },\n {\n path: '/react',\n element: ,\n children: [\n {\n path: 'hooks',\n element: ,\n },\n {\n path: 'hooks-faq',\n element: ,\n },\n {\n path: 'core',\n element: ,\n },\n ],\n },\n {\n path: 'about',\n element:
    About
    ,\n },\n])\n\nexport default router\n","import React from 'react'\r\n\r\nexport default function ReduxPage() {\r\n return
    redux
    \r\n}\r\n","import { useState, useRef, useCallback, useEffect, forwardRef } from 'react'\r\n\r\nexport default function () {\r\n const inputRef = useRef(null)\r\n const handleFoucsChildInput = () => {\r\n console.log('inputRef---', inputRef)\r\n inputRef.current.focus()\r\n }\r\n return (\r\n <>\r\n {/* */}\r\n\r\n {/* \r\n */}\r\n\r\n {/* */}\r\n\r\n \r\n\r\n \r\n\r\n
    \r\n \r\n
    \r\n \r\n \r\n )\r\n}\r\n\r\n// 使用 state 存timerId -- 问题:设置timerId时触发多余的组件重新渲染\r\nfunction DemoSaveTimerByState() {\r\n console.log('DemoSaveTimerByState render---')\r\n const [count, setCount] = useState(60)\r\n const [timerId, setTimerId] = useState(null)\r\n const handleStart = () => {\r\n const _timerId = setInterval(() => {\r\n setCount((prev) => prev - 1)\r\n }, 1000)\r\n\r\n setTimerId(_timerId) // 触发一次组件重新渲染\r\n }\r\n const handleStop = () => {\r\n clearInterval(timerId)\r\n setTimerId(null) // 触发一次组件重新渲染\r\n }\r\n\r\n const handleGetCount = () => {\r\n console.log(`count: ${count}`)\r\n console.log(`timerId: ${timerId}`)\r\n }\r\n\r\n return (\r\n
    \r\n
    count: {count}
    \r\n \r\n \r\n\r\n \r\n
    \r\n )\r\n}\r\n\r\n// 使用全局变量存timerId -- 问题:组件多次使用时公用一个变量,互相影响(清除定时器时只能清除掉最后哪个组件的-多个组件多次更新全局变量,最终只剩最后一个组件的timerId。获取timerId也是获取的最后一个组件时创建的定时器id)\r\nlet _timerId = null\r\nfunction DemoSaveTimerByGlobalVariable() {\r\n console.log('DemoSaveTimerByGlobalVariable render---')\r\n const [count, setCount] = useState(60)\r\n\r\n const handleStart = () => {\r\n _timerId = setInterval(() => {\r\n setCount((prev) => prev - 1)\r\n }, 1000)\r\n }\r\n const handleStop = () => {\r\n clearInterval(_timerId)\r\n _timerId = null\r\n }\r\n\r\n const handleGetCount = () => {\r\n console.log(`count: ${count}`)\r\n console.log(`timerId: ${_timerId}`)\r\n }\r\n\r\n return (\r\n
    \r\n
    count: {count}
    \r\n \r\n \r\n\r\n \r\n
    \r\n )\r\n}\r\n\r\n// 使用 ref 来存储多次组件更新但保持不变的状态。ref的值更新(.current)不触发组件重新渲染\r\nfunction DemoSaveTimerByRef() {\r\n console.log('DemoSaveTimerByRef render---')\r\n const [count, setCount] = useState(60)\r\n const timerRef = useRef(null)\r\n const handleStart = () => {\r\n timerRef.current = setInterval(() => {\r\n setCount((prev) => prev - 1)\r\n }, 1000)\r\n }\r\n const handleStop = () => {\r\n clearInterval(timerRef.current)\r\n }\r\n\r\n const handleGetCount = () => {\r\n console.log(`count: ${count}`)\r\n console.log(`timerId: ${timerRef.current}`)\r\n }\r\n\r\n return (\r\n
    \r\n
    count: {count}
    \r\n \r\n \r\n\r\n \r\n
    \r\n )\r\n}\r\n\r\n// React时间切片原理\r\nfunction DemoTimeSlicing() {\r\n console.log('DemoSaveTimerByRef render---')\r\n const [count, setCount] = useState(60)\r\n const timerRef = useRef(null)\r\n const handleStart = () => {\r\n timerRef.current = setInterval(() => {\r\n setCount((prev) => prev - 1)\r\n }, 1000)\r\n }\r\n const handleStop = () => {\r\n clearInterval(timerRef.current)\r\n }\r\n\r\n // 每次组件重新渲染,函数会重新创建,获取到最新组件渲染的上下文\r\n const handleGetCount = () => {\r\n console.log(`count: ${count}`)\r\n console.log(`timerId: ${timerRef.current}`)\r\n }\r\n\r\n // 使用useCallback缓存函数\r\n const handleGetCountByUseCallback = useCallback(() => {\r\n console.log(`count: ${count}`)\r\n console.log(`timerId: ${timerRef.current}`)\r\n }, [count]) // 依赖项数组,count变化时,重新生成缓存的函数。依赖项数组里之外的数据变更导致组件重新刷新时,跳过函数的重新创建\r\n\r\n // 使用useCallback缓存函数,但里面访问了state,却不将其放到依赖项数组中 -- 会导致,count发生更新,组件重新渲染,但缓存函数不重新生成,获取count时停留在之前的(第一次)时间切片状态里的数据状态\r\n const handleGetCountByUseCallbackButNoDependencies = useCallback(() => {\r\n console.log(`count: ${count}`)\r\n console.log(`timerId: ${timerRef.current}`)\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n return (\r\n
    \r\n
    count: {count}
    \r\n \r\n \r\n\r\n \r\n \r\n \r\n
    \r\n )\r\n}\r\n\r\n// 使用 ref 保存dom\r\nfunction DemoSaveDomByRef() {\r\n console.log('Counter render---')\r\n const [count, setCount] = useState(0)\r\n // 使用state来存储dom\r\n const [inputElementState, setInputElementState] = useState(null)\r\n useEffect(() => {\r\n const inputEle = document.getElementsByClassName('input')[0]\r\n setInputElementState(inputEle) // 触发一次多余的组件重新渲染\r\n }, [])\r\n const handleInputFocusByState = useCallback(() => {\r\n console.log(\r\n 'handleInputFocusByState---inputElementState: ',\r\n inputElementState\r\n )\r\n inputElementState.focus()\r\n // eslint-disable-next-line\r\n // }, []) // 不传入依赖数组时,上面的setInputElementState执行完,组件重新渲染,但该缓存函数停留在上一个时间切片(此时其state中inputElementState还是null),所以点击按钮执行该缓存函数时报Uncaught TypeError: Cannot read property 'focus' of null\r\n }, [inputElementState])\r\n\r\n // 使用ref来存储dom\r\n const inputRef = useRef(null)\r\n useEffect(() => {\r\n console.log('inputRef---', inputRef)\r\n }, [])\r\n const handleInputFocusByRef = useCallback(() => {\r\n inputRef.current.focus()\r\n }, [])\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n count: {count}\r\n \r\n \r\n )\r\n}\r\n\r\n// 使用 forwardRef 让父组件聚焦子组件input\r\n// 父组件给子组件函数挂了ref属性,则子组件必须使用React.forwardRef()包裹\r\n// 否则报错 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?\r\nfunction DemoParentFocusChildInput(props, parentRef) {\r\n console.log(\r\n 'DemoParentFocusChildInput render---props, parentRef---',\r\n props,\r\n parentRef\r\n )\r\n // parentRef.current = {\r\n // focus () {\r\n // console.log('myfocus---');\r\n // }\r\n // }\r\n return \r\n}\r\nconst ForwardDemoParentFocusChildInput = forwardRef(DemoParentFocusChildInput)\r\n","import { useCallback, useEffect } from 'react'\n\nexport default function () {\n const handleInput = useCallback(() => {\n console.log('用户对应的输入事件被触发')\n }, [])\n\n // 来顶帧\n const handleClick = useCallback(() => {\n for (let i = 0; i < 50000; i++) {\n console.log(i)\n }\n }, [])\n\n return (\n
    \n \n \n
    \n )\n}\n","export default function Home() {\n return
    Home
    \n}\n","export default function NewsItem({ newDescriptor }) {\n // 拖一下时间 卡一下帧\n // 分析:\n // js 一个时间段只能做一件事\n // 在当前帧里在走这段for循环(500个这段for循环),那他就没有精力去响应用户的点击\n // concurrency --> 任务拆分 组件 归根结底是你组件加载时间太长了 而concurrency任务拆分的最小单元是组件和react元素\n // 也就是说,正常情况下 所有的组件合在一起渲染 要花费2秒钟 那在这2秒钟之内 用户的所有响应全部失效(当前帧都被这个2秒钟任务占完了)\n // 那么有了concurrency以后,react会把这么多合在一起的组件拆分成最小单元塞入每一帧里 每个最小单元就有了自己的执行时长 那只要单个组件的执行周期不超过16ms就不会卡帧了(这个时长只要在一帧最长时间16ms之内就不会卡帧影响用户响应)\n // 但是 如果单个组件执行就超过了16ms 依旧会出现卡顿 这就不是concurrency能处理的范围了\n // 本质上是因为News这个组件执行的渲染时间太长了\n // 其实我们是希望 点击首页 -> 再点击新闻页面 -> 再点击关于我们 的时候 中间新闻页面停止渲染\n // 换句话来讲 我们是希望切换tab这个行为的【优先级】要高于News页面渲染的【优先级】\n // 我们希望 从首页 -> 新闻列表 -> 关于我们 这个时候新闻列表的渲染工作直接被react手动强制中断\n for (let i = 0; i < 80; i++) {\n console.log('i', newDescriptor, i)\n }\n\n return
    newsItem: {newDescriptor}
    \n}\n","import { useState } from 'react'\nimport NewsItem from './NewsItem'\n\nconst arr = []\n\nfor (let i = 0; i < 500; i++) {\n arr.push(i)\n}\n\nexport default function News() {\n const [news, setNews] = useState(arr)\n\n // 列表页 往往都是需要循环 循环必定会生成很多元素 我们最好是将这些元素单独封装成一个组件\n // 同时 单个项大概率不仅仅在当前列表使用,在别的地方也很大可能会使用到\n\n // 新闻列表 --> 单条新闻\n // 学生列表 --> 单个学生\n\n return (\n
    \n {news.map((newDescriptor, index) => (\n \n ))}\n
    \n )\n}\n","export default function About() {\n return
    About
    \n}\n","import { useCallback, useMemo, useState, useTransition } from 'react'\nimport Home from './components/Home'\nimport News from './components/News'\nimport About from './components/About'\n\n// 现在要做的就是让切换tab以后的渲染不要影响切换tab本身的工作\n\nexport default function TabView() {\n // pending --> 代表当前是否有transition任务在执行\n // startTransition --> 代表开启一个transition 任务\n const [pending, startTransition] = useTransition()\n // 好比 loading startRequest\n\n // home news about\n const [presentActiveTab, setPresentActiveTab] = useState('home')\n\n const tabs = useMemo(() => {\n return [\n {\n key: 'home',\n label: '首页',\n component: ,\n },\n {\n key: 'news',\n label: '新闻页面',\n component: ,\n },\n {\n key: 'about',\n label: '关于我们',\n component: ,\n },\n ]\n }, []) // 如果没有依赖的话这个tabs就不会变化\n\n const presentComponent = useMemo(() => {\n return tabs.find((tabItem) => tabItem.key === presentActiveTab).component\n }, [tabs, presentActiveTab])\n\n const changeTab = useCallback(\n (tab) => {\n // setPresentActiveTab(tab) // 切换tab的工作\n\n // react底层内部源码中区分的\n // 变为一个transition工作,transition工作是低优先级的 他不会阻塞用户的交互 也不会让页面失去响应\n startTransition(() => {\n console.log('pending: ', pending)\n // 首页 -> 新闻页面 -> 关于我们\n // 从首页 切换到 新闻页面 pending: false\n // 在新闻页面未渲染完时 切换到 关于我们 pending: true 新闻页面的渲染工作(里面的for循环打印)立即停止,然后渲染关于我们页面\n // 再次从关于我们 切换 到首页 pending: false\n setPresentActiveTab(tab)\n })\n },\n [pending]\n )\n const changeTabByParentTransition = useCallback((tab) => {\n setPresentActiveTab(tab)\n }, [])\n\n return (\n
    \n {/* 1. 展示tab 2. 切换tab渲染不同的页面 */}\n {tabs.map((tabItem) => {\n return (\n // \n\n // 写在触发事件里面也可以\n {\n startTransition(() => {\n console.log('pending: ', pending)\n changeTabByParentTransition(tabItem.key)\n })\n }}\n >\n {tabItem.label}\n \n )\n })}\n
    {pending ? '正在loading...' : null}
    \n {presentComponent}\n
    \n )\n}\n","import { useState, useCallback, useTransition } from 'react'\n\nexport default function TransitionCase() {\n const [inputValue, setInputValue] = useState('')\n const [recommendList, setRecommendList] = useState([]) // 啥推荐都没有\n const [isPending, startTransition] = useTransition()\n\n const handleChange = useCallback((event) => {\n setInputValue(event.target.value)\n // 很多时候 往往我们在设置完inputValue的值以后 会做一些额外的事情【比如搜索框输入完,显示搜索推荐结果列表】\n // 注册用户名 会有格式限制 那这个我们会先到本地校验一次这个用户名是否合法\n // 为啥要在本地校验 对 后端也会给你校验\n // 因为你本地校验了 就不用产生额外的网络请求了 后端为什么要做校验 【后端一定要做的 但是不是为了你前端服务的】\n // 后端做校验 是为了别人绕过前端直接请求他的API 是为了数据的安全性和完整性 postman\n\n // 那我们有一个需求 就是本地校验完如果不合法 那么我们就推荐给他几个合法的用户名\n // 那这些合法的用户名都是要经过运算\n\n // 我们默认他永远不合格\n // 生成推荐数据\n\n // 假设一个点:我们的生成推荐数据这个运算要500ms\n // generateRecommendList()\n // 转为transition任务 setInputValue的优先级就不会被抢了\n startTransition(() => {\n generateRecommendList()\n })\n\n function generateRecommendList() {\n console.log(event.target.value)\n\n const innerRecommendList = []\n for (let i = 0; i < 8000; i++) {\n innerRecommendList.push(`${event.target.value}_${i}_recommend`)\n }\n setRecommendList(innerRecommendList)\n }\n }, [])\n\n return (\n
    \n \n\n {isPending ? (\n
    正在计算中...
    \n ) : (\n recommendList.map((item) =>
    {item}
    )\n )}\n
    \n )\n}\n","import React, { useCallback, useMemo, useState, type ElementType } from 'react'\r\n\r\ninterface User {\r\n name: string\r\n age: number\r\n}\r\n\r\nexport default function TestTS () {\r\n const [count, setCount] = useState(0)\r\n\r\n const m = useMemo(() => {\r\n return 1\r\n }, [])\r\n\r\n const handleClick = useCallback(() => {\r\n setCount((count) => count + 2)\r\n }, [])\r\n\r\n const [userList, setUserList] = useState([\r\n {\r\n name: 'zhangsan',\r\n age: 18\r\n },\r\n {\r\n name: 'lisi',\r\n age: 19\r\n }\r\n ])\r\n\r\n return (\r\n
    \r\n
    count: {count}
    \r\n \r\n {\r\n userList.map(user => (\r\n
    {user.name}
    \r\n ))\r\n }\r\n
    \r\n )\r\n}","import { useCallback, useState } from 'react'\n\n// let currentState\nlet isFirst = true\n\n// 让多次调用useState 不要去共享同一份数据\n// let memorizedState = {\n// state: null,\n// next: null,\n// isFirst: true\n// }\nconst currentStateArr = [\n // {}, // 0\n // {}, // helloworld\n]\nlet callIndex // 代表当前到第几个hook了\n\n// 第一次是0 那我dispatch的时候就要稳稳的找到0这个人\n// 第二次是helloworld 那我dispatch的时候就要稳稳的找到1\n\nexport function myUseState(initialState) {\n if (callIndex === undefined) {\n // 第二次helloworld进来的时候已经callIndex === 0\n callIndex = 0\n }\n // else {\n // callIndex++\n // }\n if (currentStateArr[callIndex]) {\n // 当前state已经有值,更新阶段\n } else {\n // 全局一个useState都没有调用过\n currentStateArr.push({\n isFirst: false,\n state: typeof initialState === 'function' ? initialState() : initialState,\n })\n }\n\n // currentState -> undefined\n // isFirst -> true\n // inititialState -> 0\n // currentState 立即被赋值为了0\n\n // currentState -> 0\n // isFirst -> false\n\n // if (isFirst) { // 但是useState() 是可以传undefined\n // currentState = typeof initialState === 'function' ? initialState() : initialState;\n // isFirst = false\n // }\n\n // 修改状态\n // 定义修改状态的函数\n const dispatchState = (() => {\n let _callIndex = callIndex // 很关键 // 永久的这个_callIndex=0\n return (newState) => {\n // 需要修正callIndex(外部的index)\n // callIndex = _callIndex // 更新时候 将callIndex设置为当前state的_callIndex(内部index)\n callIndex = 0 // 更新时候 将callIndex设置为当前state的_callIndex(内部index)\n\n // 实际上就是修改currentState的值\n console.log('修改前currentState', currentStateArr[_callIndex])\n const prevState = currentStateArr[_callIndex].state\n\n currentStateArr[_callIndex].state =\n typeof newState === 'function' ? newState(prevState) : newState\n console.log('修改后currentState', currentStateArr[_callIndex])\n window.render()\n }\n })()\n\n // callIndex 0\n console.log('currentStateArr', currentStateArr)\n console.log(\n 'currentStateArr[callIndex]',\n currentStateArr[callIndex],\n currentStateArr[callIndex].state\n )\n const matchValue = currentStateArr[callIndex++] // 稳稳的拿到callIndex 0的对象 // 只不过当这段代码走完以后 callIndex变为1\n return [matchValue.state, dispatchState]\n}\n\n// 首次渲染完之后 callIndex 来到1\n\n// 因为我们点击了increase以后会导致页面的重新渲染\n\nexport default function MyUseState() {\n // const [count, setCount] = useState(0)\n const [myCount, setMyCount] = myUseState(0)\n const [words, setWords] = myUseState('helloworld')\n\n // console.log('myCount', myCount, 'count', count)\n console.log('重新渲染:myCount', myCount)\n\n const increase = useCallback(() => {\n // setCount(prev => prev + 1)\n\n // 0 1\n setMyCount((prev) => prev + 1)\n }, [setMyCount])\n\n const decrease = useCallback(() => {\n // setCount(prev => prev - 1)\n setMyCount((prev) => prev - 1)\n }, [setMyCount])\n\n const changeWords = useCallback(() => {\n setWords((prev) => Math.random())\n }, [setWords])\n\n return (\n
    \n

    手写useState

    \n {/* count: {count} */}\n myCount: {myCount}{' '}\n \n \n words: {words}\n \n
    \n )\n}\n","import RenderFrame from './RenderFrame'\nimport TabView from './TabView'\nimport TransitionCase from './TransitionCase'\nimport TestTS from './TestTS.tsx'\nimport MyUseState from './MyHooks/useState'\n\nexport default function () {\n return (\n <>\n {/* 浏览器渲染帧 */}\n \n\n {/* useTransition */}\n \n\n \n\n \n\n \n \n \n \n )\n}\n","import React from 'react'\nimport {\n // BrowserRouter as Router,\n HashRouter as Router,\n Routes,\n Route,\n Link,\n RouterProvider,\n} from 'react-router-dom'\n\nimport './App.css'\n\nimport router from './router'\n\nimport Home from './views/react-api/Home'\nimport Hooks from './views/react-api/hooks'\nimport HooksFaq from './views/react-api/hooks-faq'\nimport Core from './views/react-api/core'\nimport Redux from './views/redux'\nimport UseRefDemo from './views/useRef'\nimport Render from './views/render'\n\nexport default function App(props) {\n // console.log('App---', props)\n return (\n // \n // \n \n
    \n \n
    \n \n }>\n }>\n }>\n }>\n }>\n }>\n }>\n \n
    \n
    \n
    \n )\n}\n","export const TestCommaDangle = {\n foo: 'foo',\n bar: 'bar',\n zzz: 'zzz',\n}\n\nconst str =\n '1234567890-1234567890-1234567890-1234567890-1234567890-1234567890-1234567890-1234567890-1234567890-1234567890-1234567890-1234567890-1234567890-1234567890-1234567890-1234567890-1234567890-1234567890-'\n\n// 禁止不必要的布尔类型转换(no-extra-boolean-cast)\n// 配置文件中的 \"extends\": \"eslint:recommended\" 属性启用了此规则。\n// 命令行中的 --fix 选项可以自动修复一些该规则报告的问题。\n// 在上下文中比如 if 语句的测试表达式的结果已经被强制转化成了一个布尔值,再通过双重否定(!!)或 Boolean 转化是不必要的。例如,这些 if 语句是等价的\nconst bar = 'bar'\nif (bar) {\n // 通过 eslint --fix 可进行修复 转为如下\n // if (bar) {\n console.log(bar)\n}\nconsole.log('test--')\n","import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport './index.css'\nimport reportWebVitals from './reportWebVitals'\nimport App from './App'\nimport './test-eslint/index'\n\nconst root = ReactDOM.createRoot(document.getElementById('root'))\n// 我们的render就是这个 只不过我们的性能比较差 我们没有diff算法\nfunction render() {\n root.render(\n // \n \n // \n )\n}\n\nrender()\n\nconsole.log('root', root)\n\nwindow.render = render\n\nclass TestApp extends React.Component {\n render() {\n return (\n
    \n
    header
    \n \n
    footer
    \n
    \n )\n }\n}\n\nclass Content extends React.Component {\n render() {\n return (\n \n

    1

    \n

    2

    \n

    3

    \n
    \n )\n }\n}\n\nconsole.log('TestApp', )\nconsole.log('Content', )\n\nexport default App\n\nconst root2 = ReactDOM.createRoot(document.getElementById('root2'))\nroot2.render(<>hello world!)\nfunction tick() {\n const element = (\n
    \n
    Hello, world!
    \n
    It is {new Date().toLocaleTimeString()}.
    \n
    \n )\n root2.render(element)\n}\n// tick()\n// setInterval(tick, 1000)\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals()\n"],"names":["module","exports","aa","require","ba","p","a","b","c","arguments","length","encodeURIComponent","ca","Set","da","ea","fa","add","ha","window","document","createElement","ia","Object","prototype","hasOwnProperty","ja","ka","la","q","d","e","f","g","this","acceptsBooleans","attributeName","attributeNamespace","mustUseProperty","propertyName","type","sanitizeURL","removeEmptyString","z","split","forEach","toLowerCase","pa","qa","toUpperCase","ra","slice","na","isNaN","oa","call","test","ma","removeAttribute","setAttribute","setAttributeNS","replace","xlinkHref","sa","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ta","Symbol","for","ua","va","wa","xa","ya","Aa","Ba","Ca","Da","Ea","Fa","Ga","Ha","iterator","Ia","Ja","A","assign","Ka","Error","stack","trim","match","La","Ma","prepareStackTrace","defineProperty","set","Reflect","construct","l","h","k","displayName","includes","name","Na","tag","render","Oa","$$typeof","_context","_payload","_init","Pa","Qa","Ra","nodeName","Ta","_valueTracker","getOwnPropertyDescriptor","constructor","get","configurable","enumerable","getValue","setValue","stopTracking","Sa","Ua","checked","value","Va","activeElement","body","Wa","defaultChecked","defaultValue","_wrapperState","initialChecked","Xa","initialValue","controlled","Ya","Za","$a","ab","ownerDocument","bb","Array","isArray","cb","options","selected","defaultSelected","disabled","db","dangerouslySetInnerHTML","children","eb","fb","gb","textContent","hb","ib","jb","kb","namespaceURI","innerHTML","valueOf","toString","firstChild","removeChild","appendChild","MSApp","execUnsafeLocalFunction","lb","lastChild","nodeType","nodeValue","mb","animationIterationCount","aspectRatio","borderImageOutset","borderImageSlice","borderImageWidth","boxFlex","boxFlexGroup","boxOrdinalGroup","columnCount","columns","flex","flexGrow","flexPositive","flexShrink","flexNegative","flexOrder","gridArea","gridRow","gridRowEnd","gridRowSpan","gridRowStart","gridColumn","gridColumnEnd","gridColumnSpan","gridColumnStart","fontWeight","lineClamp","lineHeight","opacity","order","orphans","tabSize","widows","zIndex","zoom","fillOpacity","floodOpacity","stopOpacity","strokeDasharray","strokeDashoffset","strokeMiterlimit","strokeOpacity","strokeWidth","nb","ob","pb","style","indexOf","setProperty","keys","charAt","substring","qb","menuitem","area","base","br","col","embed","hr","img","input","keygen","link","meta","param","source","track","wbr","rb","sb","is","tb","ub","target","srcElement","correspondingUseElement","parentNode","vb","wb","xb","yb","zb","stateNode","Ab","Bb","push","Cb","Db","Eb","Fb","Gb","Hb","Ib","Jb","addEventListener","removeEventListener","Kb","apply","m","onError","Lb","Mb","Nb","Ob","Pb","Qb","Sb","alternate","return","flags","Tb","memoizedState","dehydrated","Ub","Wb","child","sibling","current","Vb","Xb","Yb","unstable_scheduleCallback","Zb","unstable_cancelCallback","$b","unstable_shouldYield","ac","unstable_requestPaint","D","unstable_now","bc","unstable_getCurrentPriorityLevel","cc","unstable_ImmediatePriority","dc","unstable_UserBlockingPriority","ec","unstable_NormalPriority","fc","unstable_LowPriority","gc","unstable_IdlePriority","hc","ic","lc","Math","clz32","mc","nc","log","LN2","oc","pc","qc","rc","pendingLanes","suspendedLanes","pingedLanes","entangledLanes","entanglements","sc","uc","vc","wc","eventTimes","yc","E","zc","Ac","Bc","Cc","Dc","Ec","Fc","Gc","Hc","Ic","Jc","Kc","Map","Lc","Mc","Nc","Oc","delete","pointerId","Pc","nativeEvent","blockedOn","domEventName","eventSystemFlags","targetContainers","Rc","Sc","priority","isDehydrated","containerInfo","Tc","Uc","dispatchEvent","shift","Vc","Wc","Xc","Yc","Zc","ReactCurrentBatchConfig","$c","transition","ad","bd","cd","dd","Qc","stopPropagation","ed","fd","gd","hd","id","jd","keyCode","charCode","kd","ld","md","_reactName","_targetInst","currentTarget","isDefaultPrevented","defaultPrevented","returnValue","isPropagationStopped","preventDefault","cancelBubble","persist","isPersistent","rd","sd","td","nd","eventPhase","bubbles","cancelable","timeStamp","Date","now","isTrusted","od","pd","view","detail","qd","vd","screenX","screenY","clientX","clientY","pageX","pageY","ctrlKey","shiftKey","altKey","metaKey","getModifierState","ud","button","buttons","relatedTarget","fromElement","toElement","movementX","movementY","wd","yd","dataTransfer","Ad","Cd","animationName","elapsedTime","pseudoElement","Dd","clipboardData","Ed","Gd","data","Hd","Esc","Spacebar","Left","Up","Right","Down","Del","Win","Menu","Apps","Scroll","MozPrintableKey","Id","Jd","Alt","Control","Meta","Shift","Kd","Ld","key","String","fromCharCode","code","location","repeat","locale","which","Md","Od","width","height","pressure","tangentialPressure","tiltX","tiltY","twist","pointerType","isPrimary","Qd","touches","targetTouches","changedTouches","Sd","Td","deltaX","wheelDeltaX","deltaY","wheelDeltaY","wheelDelta","deltaZ","deltaMode","Ud","Vd","Wd","Xd","documentMode","Yd","Zd","$d","ae","be","ce","de","ge","color","date","datetime","email","month","number","password","range","search","tel","text","time","url","week","he","ie","je","event","listeners","ke","le","me","ne","oe","pe","qe","re","se","te","ue","oninput","ve","detachEvent","we","xe","attachEvent","ye","ze","Ae","Ce","De","Ee","Fe","node","offset","nextSibling","Ge","contains","compareDocumentPosition","He","HTMLIFrameElement","contentWindow","href","Ie","contentEditable","Je","focusedElem","selectionRange","documentElement","start","end","selectionStart","selectionEnd","min","defaultView","getSelection","extend","rangeCount","anchorNode","anchorOffset","focusNode","focusOffset","createRange","setStart","removeAllRanges","addRange","setEnd","element","left","scrollLeft","top","scrollTop","focus","Ke","Le","Me","Ne","Oe","Pe","Qe","Re","animationend","animationiteration","animationstart","transitionend","Se","Te","Ue","animation","Ve","We","Xe","Ye","Ze","$e","af","bf","cf","ff","gf","concat","hf","Rb","instance","listener","F","jf","has","kf","lf","mf","random","nf","bind","capture","passive","n","v","C","t","x","r","B","of","pf","parentWindow","qf","rf","O","T","za","L","ee","char","fe","unshift","sf","tf","uf","vf","wf","xf","yf","__html","zf","setTimeout","Af","clearTimeout","Bf","Promise","Df","queueMicrotask","resolve","then","catch","Cf","Ef","Ff","Gf","previousSibling","Hf","If","Jf","Kf","Lf","Mf","Nf","Of","G","H","Pf","I","Qf","Rf","Sf","contextTypes","__reactInternalMemoizedUnmaskedChildContext","__reactInternalMemoizedMaskedChildContext","Tf","childContextTypes","Uf","Vf","Wf","getChildContext","Xf","__reactInternalMemoizedMergedChildContext","Yf","Zf","$f","ag","bg","dg","eg","fg","defaultProps","gg","hg","ig","jg","kg","lg","_currentValue","mg","childLanes","ng","dependencies","firstContext","lanes","og","pg","context","memoizedValue","next","qg","rg","sg","updateQueue","baseState","firstBaseUpdate","lastBaseUpdate","shared","pending","interleaved","effects","tg","ug","eventTime","lane","payload","callback","vg","J","mode","K","wg","xg","yg","w","u","y","zg","Ag","Bg","Component","refs","Cg","Fg","isMounted","_reactInternals","enqueueSetState","M","Dg","Eg","enqueueReplaceState","enqueueForceUpdate","Gg","shouldComponentUpdate","isPureReactComponent","Hg","contextType","state","updater","Ig","componentWillReceiveProps","UNSAFE_componentWillReceiveProps","Jg","props","getDerivedStateFromProps","getSnapshotBeforeUpdate","UNSAFE_componentWillMount","componentWillMount","componentDidMount","Kg","Lg","Mg","Ng","Og","Pg","Qg","Rg","Sg","Tg","Ug","Vg","Wg","Xg","Yg","N","Zg","$g","ah","elementType","deletions","bh","pendingProps","overflow","treeContext","retryLane","ch","dh","eh","fh","memoizedProps","gh","hh","ih","ref","_owner","_stringRef","jh","join","kh","lh","index","mh","nh","oh","implementation","ph","qh","done","rh","sh","th","uh","vh","wh","xh","yh","tagName","zh","Ah","Bh","P","Ch","revealOrder","Dh","Eh","_workInProgressVersionPrimary","Fh","ReactCurrentDispatcher","Gh","Hh","Q","R","S","Ih","Jh","Kh","Lh","U","Mh","Nh","Oh","Ph","Qh","Rh","Sh","Th","baseQueue","queue","Uh","Vh","Wh","lastRenderedReducer","action","hasEagerState","eagerState","lastRenderedState","dispatch","Xh","Yh","Zh","$h","ai","getSnapshot","bi","ci","di","lastEffect","stores","ei","fi","gi","create","destroy","deps","hi","ii","ji","ki","li","mi","ni","oi","pi","qi","ri","si","ti","ui","vi","wi","xi","yi","readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","identifierPrefix","zi","message","Ai","console","error","Li","Ni","Oi","Bi","WeakMap","Ci","Di","Ei","Fi","getDerivedStateFromError","componentDidCatch","Gi","componentStack","Hi","pingCache","Ii","Ji","Ki","Pi","tailMode","tail","V","subtreeFlags","Qi","pendingContext","Ri","wasMultiple","multiple","onClick","onclick","size","createElementNS","autoFocus","createTextNode","W","Si","rendering","Ti","renderingStartTime","isBackwards","last","Ui","Vi","Wi","ReactCurrentOwner","Xi","Yi","Zi","$i","aj","compare","bj","cj","dj","baseLanes","cachePool","ej","fj","gj","UNSAFE_componentWillUpdate","componentWillUpdate","componentDidUpdate","hj","ij","jj","kj","lj","mj","fallback","nj","oj","pj","qj","_reactRetry","rj","sj","tj","uj","vj","xj","yj","zj","Aj","WeakSet","X","Bj","Cj","Dj","Ej","Gj","Hj","Ij","Jj","onCommitFiberUnmount","componentWillUnmount","Kj","Lj","Mj","Nj","Oj","Pj","Qj","insertBefore","_reactRootContainer","Rj","Sj","Tj","Xj","Yj","Zj","ak","__reactInternalSnapshotBeforeUpdate","src","Wj","Lk","bk","ceil","ck","dk","ek","Y","Z","fk","gk","hk","ik","jk","Vj","Infinity","kk","lk","mk","nk","ok","pk","qk","rk","sk","tk","callbackNode","expirationTimes","expiredLanes","tc","callbackPriority","cg","uk","vk","wk","xk","yk","zk","Ak","Bk","Ck","Dk","Ek","finishedWork","finishedLanes","Fk","timeoutHandle","Gk","Hk","Ik","Jk","Kk","mutableReadLanes","xc","Fj","display","Uj","onCommitFiberRoot","jc","onRecoverableError","Mk","onPostCommitFiberRoot","Nk","Ok","Qk","isReactComponent","pendingChildren","Rk","mutableSourceEagerHydrationData","Sk","cache","transitions","Tk","Uk","Vk","Wk","Xk","Yk","Zk","wj","Pk","al","reportError","bl","_internalRoot","cl","dl","el","fl","hl","gl","unmount","unstable_scheduleHydration","splice","querySelectorAll","JSON","stringify","form","il","usingClientEntryPoint","Events","jl","findFiberByHostInstance","bundleType","version","rendererPackageName","kl","rendererConfig","overrideHookState","overrideHookStateDeletePath","overrideHookStateRenamePath","overrideProps","overridePropsDeletePath","overridePropsRenamePath","setErrorHandler","setSuspenseHandler","scheduleUpdate","currentDispatcherRef","findHostInstanceByFiber","findHostInstancesForRefresh","scheduleRefresh","scheduleRoot","setRefreshHandler","getCurrentFiber","reconcilerVersion","__REACT_DEVTOOLS_GLOBAL_HOOK__","ll","isDisabled","supportsFiber","inject","createPortal","createRoot","unstable_strictMode","findDOMNode","flushSync","hydrate","hydrateRoot","hydratedSources","_getVersion","_source","unmountComponentAtNode","unstable_batchedUpdates","unstable_renderSubtreeIntoContainer","checkDCE","err","__self","__source","Fragment","jsx","jsxs","setState","forceUpdate","escape","_status","_result","default","Children","map","count","toArray","only","Profiler","PureComponent","StrictMode","Suspense","cloneElement","createContext","_currentValue2","_threadCount","Provider","Consumer","_defaultValue","_globalName","createFactory","createRef","forwardRef","isValidElement","lazy","memo","startTransition","unstable_act","runtime","undefined","Op","hasOwn","$Symbol","iteratorSymbol","asyncIteratorSymbol","asyncIterator","toStringTagSymbol","toStringTag","define","obj","writable","wrap","innerFn","outerFn","self","tryLocsList","protoGenerator","Generator","generator","Context","_invoke","GenStateSuspendedStart","method","arg","GenStateExecuting","GenStateCompleted","doneResult","delegate","delegateResult","maybeInvokeDelegate","ContinueSentinel","sent","_sent","dispatchException","abrupt","record","tryCatch","GenStateSuspendedYield","makeInvokeMethod","fn","GeneratorFunction","GeneratorFunctionPrototype","IteratorPrototype","getProto","getPrototypeOf","NativeIteratorPrototype","values","Gp","defineIteratorMethods","AsyncIterator","PromiseImpl","invoke","reject","result","__await","unwrapped","previousPromise","callInvokeWithMethodAndArg","TypeError","info","resultName","nextLoc","pushTryEntry","locs","entry","tryLoc","catchLoc","finallyLoc","afterLoc","tryEntries","resetTryEntry","completion","reset","iterable","iteratorMethod","i","isGeneratorFunction","genFun","ctor","mark","setPrototypeOf","__proto__","awrap","async","iter","object","reverse","pop","skipTempReset","prev","stop","rootRecord","rval","exception","handle","loc","caught","hasCatch","hasFinally","finallyEntry","complete","finish","thrown","delegateYield","regeneratorRuntime","accidentalStrictMode","globalThis","Function","sortIndex","performance","setImmediate","startTime","expirationTime","priorityLevel","navigator","scheduling","isInputPending","MessageChannel","port2","port1","onmessage","postMessage","unstable_Profiling","unstable_continueExecution","unstable_forceFrameRate","floor","unstable_getFirstCallbackNode","unstable_next","unstable_pauseExecution","unstable_runWithPriority","delay","unstable_wrapCallback","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","__webpack_modules__","getter","__esModule","leafPrototypes","ns","def","getOwnPropertyNames","definition","o","chunkId","all","reduce","promises","miniCssF","prop","inProgress","dataWebpackPrefix","script","needAttach","scripts","getElementsByTagName","s","getAttribute","charset","timeout","onScriptComplete","onerror","onload","doneFns","head","installedChunks","j","installedChunkData","promise","errorType","realSrc","request","webpackJsonpCallback","parentChunkLoadingFunction","chunkIds","moreModules","some","chunkLoadingGlobal","_classCallCheck","Constructor","_defineProperties","descriptor","_createClass","protoProps","staticProps","_setPrototypeOf","_inherits","subClass","superClass","_getPrototypeOf","_isNativeReflectConstruct","sham","Proxy","Boolean","_typeof","_possibleConstructorReturn","ReferenceError","_createSuper","Derived","hasNativeReflectConstruct","Super","NewTarget","onPerfEntry","getCLS","getFID","getFCP","getLCP","getTTFB","_arrayLikeToArray","arr","len","arr2","_unsupportedIterableToArray","minLen","from","_i","_s","_e","_arr","_n","_d","allowArrayLike","it","normalCompletion","didErr","step","_e2","asyncGeneratorStep","gen","_next","_throw","args","_construct","Parent","Class","_wrapNativeSuper","_cache","Wrapper","Action","ResultType","PopStateEventType","warning","cond","warn","getHistoryState","usr","createLocation","to","pathname","hash","parsePath","substr","_ref","path","parsedPath","hashIndex","searchIndex","createURL","origin","createPath","URL","getUrlBasedHistory","getLocation","createHref","validateLocation","v5Compat","globalHistory","history","Pop","handlePop","listen","encodeLocation","Push","historyState","pushState","Replace","replaceState","go","convertRoutesToDataRoutes","routes","parentPath","allIds","route","treePath","invariant","isIndexRoute","matchRoutes","locationArg","basename","stripBasename","branches","flattenRoutes","sort","score","siblings","every","compareIndexes","routesMeta","childrenIndex","rankRouteBranches","matches","matchRouteBranch","safelyDecodeURI","parentsMeta","relativePath","caseSensitive","startsWith","joinPaths","computeScore","paramRe","isSplat","segments","initialScore","filter","segment","branch","matchedParams","matchedPathname","remainingPathname","matchPath","params","pathnameBase","normalizePathname","pattern","endsWith","paramNames","regexpSource","_","paramName","RegExp","compilePath","matcher","captureGroups","splatValue","decodeURIComponent","safelyDecodeURIComponent","decodeURI","startIndex","nextChar","getInvalidPathError","field","dest","getPathContributingMatches","resolveTo","toArg","routePathnames","locationPathname","isPathRelative","isEmptyPath","toPathname","routePathnameIndex","toSegments","fromPathname","resolvePathname","normalizeSearch","normalizeHash","resolvePath","hasExplicitTrailingSlash","hasCurrentTrailingSlash","paths","AbortedDeferredError","DeferredData","pendingKeys","subscriber","abortPromise","controller","AbortController","onAbort","unlistenAbortSignal","signal","entries","acc","trackPromise","race","onSettle","aborted","subscribe","cancel","abort","_tracked","isTrackedPromise","_error","_data","unwrapTrackedPromise","ErrorResponse","status","statusText","isRouteErrorResponse","IDLE_NAVIGATION","formMethod","formAction","formEncType","formData","IDLE_FETCHER","isServer","createRouter","init","dataRoutes","unlistenHistory","subscribers","savedScrollPositions","getScrollRestorationKey","getScrollPosition","initialScrollRestored","initialMatches","initialErrors","getNotFoundMatches","router","pendingNavigationController","initialized","loader","hydrationData","historyAction","navigation","restoreScrollPosition","preventScrollReset","revalidation","loaderData","actionData","errors","fetchers","pendingAction","HistoryAction","pendingPreventScrollReset","isUninterruptedRevalidation","isRevalidationRequired","cancelledDeferredRoutes","cancelledFetcherLoads","fetchControllers","incrementingLoadId","pendingNavigationLoadId","fetchReloadIds","fetchRedirectIds","fetchLoadMatches","activeDeferreds","updateState","newState","completeNavigation","isActionReload","mergeLoaderData","getSavedScrollPosition","opts","normalizeNavigateOptions","submission","startNavigation","pendingError","startUninterruptedRevalidation","saveScrollPosition","loadingNavigation","overrideNavigation","notFoundMatches","cancelActiveDeferreds","isHashChangeOnly","createRequest","findNearestBoundary","handleAction","actionOutput","shortCircuited","pendingActionData","pendingActionError","_extends","handleLoaders","interruptActiveLoads","actionMatch","getTargetMatch","getMethodNotAllowedResult","callLoaderOrAction","isRedirectResult","redirectNavigation","startRedirectNavigation","isErrorResult","boundaryMatch","isDeferredResult","getMatchesToLoad","matchesToLoad","revalidatingFetchers","routeId","fetcher","revalidatingFetcher","callLoadersAndMaybeResolveData","results","loaderResults","fetcherResults","redirect","findRedirect","getLoaderRedirect","processLoaderData","deferredData","markFetchRedirectsDone","didAbortFetchLoads","abortStaleFetchLoads","getFetcher","requestMatches","setFetcherError","existingFetcher","abortController","fetchRequest","actionResult","loadingFetcher","nextLocation","revalidationRequest","loadId","loadFetcher","staleKey","doneFetcher","resolveDeferredData","revalidate","redirectHistoryAction","currentMatches","fetchersToLoad","fetchMatches","resolveDeferredResults","abortFetcher","deleteFetcher","markFetchersDone","doneKeys","landedId","yeetedKeys","predicate","cancelledRouteIds","dfd","userMatches","createUseMatchesMatch","initialize","enableScrollRestoration","positions","getPosition","getKey","navigate","fetch","handleFetcherAction","handleFetcherLoader","dispose","clear","_internalFetchControllers","_internalActiveDeferreds","validActionMethods","isFetcher","stripHashFromPath","searchParams","convertFormDataToSearchParams","hasNakedIndexQuery","append","getLoaderMatchesUntilBoundary","boundaryId","boundaryMatches","findIndex","navigationMatches","currentLoaderData","currentMatch","isNew","isMissingData","isNewLoader","shouldRevalidateLoader","isNewRouteInstance","currentPath","currentLocation","currentUrl","currentParams","nextUrl","nextParams","defaultShouldRevalidate","shouldRevalidate","routeChoice","isStaticRequest","isRouteRequest","onReject","handler","resultType","Response","headers","activeMatches","requestPath","resolvedLocation","response","contentType","json","statusCode","deferred","Request","URLSearchParams","processRouteLoaderData","foundError","loaderHeaders","newLoaderData","mergedLoaderData","find","hasErrorBoundary","getShortCircuitMatches","isRevalidatingLoader","unwrap","resolveData","unwrappedData","getAll","pathMatches","React","checkIfSnapshotChanged","inst","latestGetSnapshot","prevValue","nextValue","DataStaticRouterContext","DataRouterContext","DataRouterStateContext","AwaitContext","NavigationContext","LocationContext","RouteContext","outlet","RouteErrorContext","useInRouterContext","useLocation","useNavigate","routePathnamesJson","activeRef","parse","relative","useResolvedPath","_temp2","DefaultErrorElement","useDataRouterState","DataRouterStateHook","UseRouteError","thisRoute","useRouteError","lightgrey","preStyles","padding","backgroundColor","codeStyles","fontStyle","DataRouterHook","RenderErrorBoundary","errorInfo","component","RenderedRoute","routeContext","dataStaticRouterContext","errorElement","_deepestRenderedBoundaryId","_renderMatches","parentMatches","dataRouterState","renderedMatches","errorIndex","reduceRight","getChildren","hookName","AwaitRenderStatus","Route","_props","Router","_ref4","basenameProp","locationProp","navigationType","NavigationType","static","staticProp","navigationContext","trailingPathname","Routes","_ref5","dataRouterContext","dataRouterStateContext","routeMatch","parentParams","parentPathnameBase","locationFromContext","parsedLocationArg","useRoutes","createRoutesFromChildren","neverSettledPromise","enhanceManualRouteObjects","routeClone","HashRouter","_ref2","historyRef","querySelector","Link","reloadDocument","rest","_temp","joinedPathname","useHref","internalOnClick","replaceProp","isModifiedEvent","shouldProcessLinkClick","useLinkClickHandler","Home","list","setList","setId","doQuery","fontSize","setCountArr","effectArr","ExampleUseState0","setCount","Child","res","ExampleUseState","age","fruit","todos","effect","title","localStorage","setItem","ExampleOfOldStateAndProp","alert","ClassExampleUseState","ExampleUseReducer","initailCount","ChatAPI","randomIndex","round","isOnline","useFriendStatus","frinedID","setIsOnline","handleStatusChange","FriendStatus","friend","FriendListItem","Circle","FriendSelect","recipientID","setRecipientID","isRecipientOnline","onChange","borderRadius","todosReducer","completed","Todos","todo","setTodo","reducer","initialState","nextState","placeholder","themes","light","foreground","background","dark","ThemeContext","AppThemeColor","Toolbar","ThemeButton","theme","TextInputWithFocusButton","inputEle","MeasureExample","setHeight","measuredRef","getBoundingClientRect","MeasureExample2","rect","setRect","useClientRect","fun1Set","fun2Set","fun3Set","ExampleUseCallback1","fun1","fun3","ExampleUseCallback2","parentState","setParentState","toChildFunFromUseCallback","fun","FancyInput","inputRef","ExampleUseImperativeHandle","ExampleUseTransition","isPending","Spinner","ExampleUseId","htmlFor","NameField","ExampleUseEffect","getElementById","innerText","Hooks","StateExample","setInterval","clearInterval","MemoChild","prevProps","nextProps","setA","setB","setC","computeExpensiveValue","child1","Child1","child2","Child2","Image","onIntersect","io","IntersectionObserver","createIntersectionObserver","onViewRefData","Element","className","Element2","tabIndex","__staticRouterHydrationData","createBrowserRouter","ReduxPage","DemoTimeSlicing","DemoSaveDomByRef","ForwardDemoParentFocusChildInput","timerRef","handleGetCountByUseCallback","handleGetCountByUseCallbackButNoDependencies","inputElementState","setInputElementState","getElementsByClassName","handleInputFocusByState","handleInputFocusByRef","DemoParentFocusChildInput","parentRef","handleInput","handleClick","NewsItem","newDescriptor","News","news","About","TabView","presentActiveTab","setPresentActiveTab","tabs","label","presentComponent","tabItem","changeTabByParentTransition","tab","TransitionCase","inputValue","setInputValue","recommendList","setRecommendList","handleChange","innerRecommendList","generateRecommendList","item","TestTS","userList","user","callIndex","currentStateArr","myUseState","isFirst","dispatchState","_callIndex","prevState","MyUseState","myCount","setMyCount","words","setWords","increase","decrease","changeWords","RenderFrame","App","border","root","ReactDOM","TestApp","Content","root2","reportWebVitals"],"sourceRoot":""} \ No newline at end of file