{ "version": "1", "built_at": "2026-02-23T11:51:15.247233717+01:00", "docs": [ { "id": "bae12b530240f8a249b62ca3", "doc_id": "de76ce8219ff39e211ea323d", "title": "a", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/components/a.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/a.json", "content": "--- title: A use_cases: \u003e- creating navigation links, active link styling, soft navigation, relative paths, menu items tags: - component - navigation - links - active-states - anchors - soft-navigation version: '1.0' description: \u003e- The A component provides enhanced anchor tags with automatic base path support, active states, and soft navigation for better user experience. --- Solid Router exposes the `\u003cA /\u003e` component as a wrapper around the [native anchor tag ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). It relies on the routing context provided by the [`\u003cRouter\u003e` component](/solid-router/reference/components/router) and if used outside, will triggers a runtime error.. `\u003cA /\u003e` supports relative and base paths. `\u003ca /\u003e` doesn't. But `\u003ca /\u003e` gets augmented when JS is present via a top-level listener to the DOM, so you get the soft-navigation experience nonetheless. The `\u003cA /\u003e` supports the [`\u003cRouter /\u003e`](/solid-router/reference/components/router) base property (`\u003cRouter base=\"/subpath\"\u003e`) and prepend it to the received `href` automatically and the `\u003ca /\u003e`does not. The same happens with relative paths passed to `\u003cA /\u003e`. The `\u003cA\u003e` tag has an `active` class if its href matches the current location, and `inactive` otherwise. By default matching includes locations that are descendants (e.g.: href `/users` matches locations `/users` and `/users/123`). :::tip Use the boolean `end` prop to prevent matching these. This is particularly useful for links to the root route `/` which would match everything. ::: ## Soft Navigation When JavaScript is present at the runtime, both components behave in a very similar fashion. This is because Solid Router adds a listener at the top level of the DOM and will augment the native `\u003ca /\u003e` tag to a more performant experience (with soft navigation). :::note To prevent, both `\u003cA /\u003e` and `\u003ca /\u003e` tags from soft navigating when JavaScript is present, pass a `target=\"_self\"` attribute. ::: ## Props Reference | prop | type | description | | ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | href | string | The path of the route to navigate to. This will be resolved relative to the route that the link is in, but you can preface it with `/` to refer back to the root. | | noScroll | boolean | If true, turn off the default behavior of scrolling to the top of the new page | | replace | boolean | If true, don't add a new entry to the browser history. (By default, the new page will be added to the browser history, so pressing the back button will take you to the previous route.) | | state | unknown | [Push this value](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) to the history stack when navigating | | inactiveClass | string | The class to show when the link is inactive (when the current location doesn't match the link) | | activeClass | string | The class to show when the link is active | | end | boolean | If `true`, only considers the link to be active when the current location matches the `href` exactly; if `false`, check if the current location _starts with_ `href` |", "term_freq": { "##": 2, "---": 2, "-------": 1, "-------------": 1, "----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------": 1, "//developer": 2, "//github": 1, "/\u003e": 11, "/solid-router/reference/components/router": 2, "/subpath": 1, "/users": 2, "/users/123": 1, "\u003ca": 10, "\u003ca\u003e": 1, "\u003crouter": 2, "\u003crouter\u003e": 1, "\u003e-": 2, "_self": 1, "_starts": 1, "active": 5, "active-states": 1, "activeclass": 1, "add": 1, "added": 1, "adds": 1, "an": 1, "anchor": 2, "anchors": 1, "and": 9, "are": 1, "around": 1, "as": 1, "at": 2, "attribute": 1, "augment": 1, "augmented": 1, "automatic": 1, "automatically": 1, "back": 2, "base": 3, "base=": 1, "be": 3, "because": 1, "behave": 1, "behavior": 1, "better": 1, "boolean": 4, "both": 2, "browser": 2, "but": 2, "button": 1, "by": 3, "can": 1, "check": 1, "class": 3, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/components/a": 1, "component": 4, "components": 1, "considers": 1, "context": 1, "creating": 1, "current": 4, "default": 3, "descendants": 1, "description": 2, "does": 1, "doesn": 2, "dom": 2, "don": 1, "end": 2, "enhanced": 1, "entry": 1, "error": 1, "everything": 1, "exactly": 1, "experience": 3, "exposes": 1, "false": 1, "fashion": 1, "for": 2, "from": 1, "get": 1, "gets": 1, "github-document": 1, "happens": 1, "has": 1, "history": 3, "href": 6, "https": 3, "if": 7, "in": 2, "inactive": 2, "inactiveclass": 1, "includes": 1, "is": 8, "it": 3, "items": 1, "its": 1, "javascript": 2, "js": 1, "level": 1, "link": 6, "links": 3, "listener": 2, "location": 4, "locations": 2, "match": 2, "matches": 3, "matching": 2, "mdx": 1, "menu": 1, "more": 1, "mozilla": 2, "native": 2, "navigate": 1, "navigating": 2, "navigation": 6, "new": 3, "nonetheless": 1, "noscroll": 1, "not": 1, "note": 1, "of": 4, "off": 1, "on": 1, "only": 1, "org/en-us/docs/web/api/history/pushstate": 1, "org/en-us/docs/web/html/element/a": 1, "otherwise": 1, "outside": 1, "page": 2, "particularly": 1, "pass": 1, "passed": 1, "path": 2, "paths": 3, "performant": 1, "preface": 1, "prepend": 1, "present": 3, "pressing": 1, "prevent": 2, "previous": 1, "prop": 2, "property": 1, "props": 1, "provided": 1, "provides": 1, "push": 1, "received": 1, "refer": 1, "reference": 1, "relative": 4, "relies": 1, "replace": 1, "resolved": 1, "root": 2, "route": 4, "router": 2, "routing": 1, "runtime": 2, "same": 1, "scrolling": 1, "show": 2, "similar": 1, "so": 2, "soft": 5, "soft-navigation": 2, "solid": 2, "stack": 1, "state": 1, "states": 1, "string": 3, "styling": 1, "support": 1, "supports": 2, "tag": 3, "tags": 3, "take": 1, "target=": 1, "that": 2, "the": 44, "these": 1, "this": 4, "tip": 1, "title": 1, "to": 20, "top": 2, "top-level": 1, "triggers": 1, "true": 3, "turn": 1, "type": 1, "unknown": 1, "use": 1, "use_cases": 1, "used": 1, "useful": 1, "user": 1, "value": 1, "version": 1, "very": 1, "via": 1, "when": 8, "which": 1, "will": 5, "with": 4, "with_": 1, "would": 1, "wrapper": 1, "you": 3 }, "length": 454 }, { "id": "a2267310e5cd97c3d1e3b7ba", "doc_id": "83302636f7285d78af8cda47", "title": "action | Remix", "url": "https://v2.remix.run/docs/route/action", "type": "html", "source": "remix:does", "path": "devour_data/docs/action---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsactionGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite action Watch the 📼 Remix Singles: Data Mutations with Form + action and Multiple Forms and Single Button Mutations A route action is a server-only function to handle data mutations and other actions. If a non-GET request is made to your route (DELETE, PATCH, POST, or PUT) then the action is called before the loaders. actions have the same API as loaders, the only difference is when they are called. This enables you to co-locate everything about a data set in a single route module: the data read, the component that renders the data, and the data writes: import type { ActionFunctionArgs } from \"@remix-run/node\"; // or cloudflare/deno import { json, redirect } from \"@remix-run/node\"; // or cloudflare/deno import { Form } from \"@remix-run/react\"; import { TodoList } from \"~/components/TodoList\"; import { fakeCreateTodo, fakeGetTodos } from \"~/utils/db\"; export async function action({ request, }: ActionFunctionArgs) { const body = await request.formData(); const todo = await fakeCreateTodo({ title: body.get(\"title\"), }); return redirect(`/todos/${todo.id}`); } export async function loader() { return json(await fakeGetTodos()); } export default function Todos() { const data = useLoaderData\u003ctypeof loader\u003e(); return ( \u003cdiv\u003e \u003cTodoList todos={data} /\u003e \u003cForm method=\"post\"\u003e \u003cinput type=\"text\" name=\"title\" /\u003e \u003cbutton type=\"submit\"\u003eCreate Todo\u003c/button\u003e \u003c/Form\u003e \u003c/div\u003e ); } When a POST is made to a URL, multiple routes in your route hierarchy will match the URL. Unlike a GET to loaders, where all of them are called to build the UI, only one action is called. The route called will be the deepest matching route, unless the deepest matching route is an \"index route\". In this case, it will post to the parent route of the index (because they share the same URL, the parent wins). If you want to post to an index route use ?index in the action: \u003cForm action=\"/accounts?index\" method=\"post\" /\u003e action url route action /accounts?index app/routes/accounts._index.tsx /accounts app/routes/accounts.tsx Also note that forms without an action prop (\u003cForm method=\"post\"\u003e) will automatically post to the same route within which they are rendered, so using the ?index param to disambiguate between parent and index routes is only useful if you're posting to an index route from somewhere besides the index route itself. If you're posting from the index route to itself, or from the parent route to itself, you don't need to define a \u003cForm action\u003e at all, omit it: \u003cForm method=\"post\"\u003e. See also: \u003cForm\u003e \u003cForm action\u003e ?index query param © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_961\\\":-5,\\\"_962\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":960},{\\\"_18\\\":222},\\\"docs/route/action.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"action\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#action\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/h1\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-success\\u003eWatch the \\u003ca href=\\\\\\\"https://www.youtube.com/playlist?list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6\\\\\\\"\\u003e📼 Remix Singles\\u003c/a\\u003e: \\u003ca href=\\\\\\\"https://www.youtube.com/watch?v=Iv25HAHaFDs\\u0026list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6\\\\\\\"\\u003eData Mutations with Form + action\\u003c/a\\u003e and \\u003ca href=\\\\\\\"https://www.youtube.com/watch?v=w2i-9cYxSdc\\u0026list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6\\\\\\\"\\u003eMultiple Forms and Single Button Mutations\\u003c/a\\u003e\\u003c/docs-success\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eA route \\u003ccode\\u003eaction\\u003c/code\\u003e is a server-only function to handle data mutations and other actions. If a non-\\u003ccode\\u003eGET\\u003c/code\\u003e request is made to your route (\\u003ccode\\u003eDELETE\\u003c/code\\u003e, \\u003ccode\\u003ePATCH\\u003c/code\\u003e, \\u003ccode\\u003ePOST\\u003c/code\\u003e, or \\u003ccode\\u003ePUT\\u003c/code\\u003e) then the action is called before the \\u003ca href=\\\\\\\"./loader\\\\\\\"\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003es.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003es have the same API as \\u003ccode\\u003eloader\\u003c/code\\u003es, the only difference is when they are called. This enables you to co-locate everything about a data set in a single route module: the data read, the component that renders the data, and the data writes:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eredirect\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eTodoList\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e~/components/TodoList\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efakeCreateTodo\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efakeGetTodos\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e~/utils/db\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etodo\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efakeCreateTodo\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e title: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etitle\\u003c/span\\u003e\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eredirect\\u003c/span\\u003e(`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/todos/\\u003c/span\\u003e${\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etodo\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e}`);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efakeGetTodos\\u003c/span\\u003e());\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eTodos\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eTodoList\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etodos\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etext\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etitle\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003eCreate Todo\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eWhen a \\u003ccode\\u003ePOST\\u003c/code\\u003e is made to a URL, multiple routes in your route hierarchy will match the URL. Unlike a \\u003ccode\\u003eGET\\u003c/code\\u003e to loaders, where all of them are called to build the UI, \\u003cem\\u003eonly one action is called\\u003c/em\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003eThe route called will be the deepest matching route, unless the deepest matching route is an \\\\\\\"index route\\\\\\\". In this case, it will post to the parent route of the index (because they share the same URL, the parent wins).\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you want to post to an index route use \\u003ccode\\u003e?index\\u003c/code\\u003e in the action: \\u003ccode\\u003e\\u0026#x3C;Form action=\\\\\\\"/accounts?index\\\\\\\" method=\\\\\\\"post\\\\\\\" /\\u003e\\u003c/code\\u003e\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eaction url\\u003c/th\\u003e\\\\n\\u003cth\\u003eroute action\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/accounts?index\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/accounts._index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/accounts\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/accounts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eAlso note that forms without an action prop (\\u003ccode\\u003e\\u0026#x3C;Form method=\\\\\\\"post\\\\\\\"\\u003e\\u003c/code\\u003e) will automatically post to the same route within which they are rendered, so using the \\u003ccode\\u003e?index\\u003c/code\\u003e param to disambiguate between parent and index routes is only useful if you're posting to an index route from somewhere besides the index route itself. If you're posting from the index route to itself, or from the parent route to itself, you don't need to define a \\u003ccode\\u003e\\u0026#x3C;Form action\\u003e\\u003c/code\\u003e at all, omit it: \\u003ccode\\u003e\\u0026#x3C;Form method=\\\\\\\"post\\\\\\\"\\u003e\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eSee also:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/form\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/form#action\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Form action\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../guides/index-query-param\\\\\\\"\\u003e\\u003ccode\\u003e?index\\u003c/code\\u003e query param\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\",\\\"docs/route/action\\\",\\\"headings\\\",[],[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#action\\\\\\": 1, "$\\": 1, "$rc": 3, "--base03": 2, "--base05": 1, "--base08": 22, "--base0a": 7, "--base0b": 11, "--base0d": 18, "--base0e": 33, "--base0f": 2, "-1\\\\\\": 1, "-5": 2, "/$": 1, "//": 2, "//v2": 2, "//www": 3, "/\u003e": 3, "/\\u003cspan": 3, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "/\\u003e\\u003c/code\\u003e\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eaction": 1, "/accounts": 4, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/components/form#action\\\\\\": 1, "/components/form\\\\\\": 1, "/guides/index-query-param\\\\\\": 1, "/loader\\\\\\": 1, "/todos/$": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 1, "1\\\\\\": 1, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 1, "220": 1, "221": 1, "222": 2, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "28\\\\\\": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "29\\\\\\": 1, "2\\\\\\": 1, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30\\\\\\": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "31\\\\\\": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "32\\\\\\": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "33\\\\\\": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 1, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 1, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "97": 1, "98": 1, "99": 1, "9\\\\\\": 1, "\u003c/div\u003e": 1, "\u003c/form\u003e": 1, "\u003cbutton": 1, "\u003cdiv\u003e": 1, "\u003cform": 6, "\u003cform\u003e": 1, "\u003cinput": 1, "\u003ctodolist": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 1, "\u003ecreate": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 4, "@remix-run/node\\": 1, "@remix-run/react": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 105, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ewhen": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 19, "\\n": 1, "\\u0026#x3c": 7, "\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eif": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003es": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003ethe": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003esee": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003c/span\\u003e": 2, "\\u003c/span\\u003e\\u003cspan": 1, "\\u003ca": 4, "\\u003ccode\\u003e": 2, "\\u003ccode\\u003e\\u0026#x3c": 4, "\\u003ccode\\u003eaction\\u003c/code\\u003e": 1, "\\u003ccode\\u003edelete\\u003c/code\\u003e": 1, "\\u003ccode\\u003eget\\u003c/code\\u003e": 1, "\\u003ccode\\u003eloader\\u003c/code\\u003es": 1, "\\u003ccode\\u003epatch\\u003c/code\\u003e": 1, "\\u003ccode\\u003epost\\u003c/code\\u003e": 2, "\\u003ccode\\u003eput\\u003c/code\\u003e": 1, "\\u003cem\\u003eonly": 1, "\\u003ch1": 1, "\\u003cspan": 76, "\\u003e": 24, "\\u003e//": 2, "\\u003e/todos/\\u003c/span\\u003e$": 1, "\\u003e=\\u003c/span\\u003e": 3, "\\u003e=\\u003c/span\\u003e\\\\\\": 4, "\\u003e=\\u003c/span\\u003e\\u003cspan": 1, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 2, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 5, "\\u003e\\u003c/code\\u003e": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/h1\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-success\\u003ewatch": 1, "\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003e": 1, "\\u003e\\u003ccode\\u003e\\u0026#x3c": 2, "\\u003e\\u003ccode\\u003e\\u003cspan": 1, "\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003es": 1, "\\u003e\\u003cpre": 1, "\\u003e\\u003cspan": 9, "\\u003eaction\\u003c/span\\u003e": 1, "\\u003eactionfunctionargs\\u003c/span\\u003e": 2, "\\u003easync\\u003c/span\\u003e": 2, "\\u003eawait\\u003c/span\\u003e": 3, "\\u003ebody\\u003c/span\\u003e": 2, "\\u003ebutton\\u003c/span\\u003e": 1, "\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003econst\\u003c/span\\u003e": 3, "\\u003ecreate": 1, "\\u003edata": 1, "\\u003edata\\u003c/span\\u003e": 1, "\\u003edata\\u003c/span\\u003e\\u003cspan": 1, "\\u003edefault\\u003c/span\\u003e": 1, "\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eexport\\u003c/span\\u003e": 3, "\\u003efakecreatetodo\\u003c/span\\u003e": 2, "\\u003efakegettodos\\u003c/span\\u003e": 2, "\\u003eform\\u003c/span\\u003e": 2, "\\u003eform\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eformdata\\u003c/span\\u003e": 1, "\\u003efrom\\u003c/span\\u003e": 5, "\\u003efunction\\u003c/span\\u003e": 3, "\\u003eget\\u003c/span\\u003e": 1, "\\u003eid\\u003c/span\\u003e": 1, "\\u003eimport\\u003c/span\\u003e": 5, "\\u003einput\\u003c/span\\u003e": 1, "\\u003ejson\\u003c/span\\u003e": 2, "\\u003eloader\\u003c/span\\u003e": 1, "\\u003eloader\\u003c/span\\u003e\\u003e": 1, "\\u003emethod\\u003c/span\\u003e\\u003cspan": 1, "\\u003emultiple": 1, "\\u003ename\\u003c/span\\u003e\\u003cspan": 1, "\\u003epost\\u003c/span\\u003e\\\\\\": 1, "\\u003eredirect\\u003c/span\\u003e": 2, "\\u003erequest\\u003c/span\\u003e": 2, "\\u003ereturn\\u003c/span\\u003e": 3, "\\u003esubmit\\u003c/span\\u003e\\\\\\": 1, "\\u003etext\\u003c/span\\u003e\\\\\\": 1, "\\u003etitle\\u003c/span\\u003e\\\\\\": 2, "\\u003etodo\\u003c/span\\u003e": 2, "\\u003etodolist\\u003c/span\\u003e": 2, "\\u003etodos\\u003c/span\\u003e": 1, "\\u003etodos\\u003c/span\\u003e\\u003cspan": 1, "\\u003etype\\u003c/span\\u003e": 1, "\\u003etype\\u003c/span\\u003e\\u003cspan": 2, "\\u003etypeof\\u003c/span\\u003e": 1, "\\u003euseloaderdata\\u003c/span\\u003e\\u0026#x3c": 1, "\\u003e~/components/todolist\\u003c/span\\u003e\\\\\\": 1, "\\u003e~/utils/db\\u003c/span\\u003e\\\\\\": 1, "\\u003e📼": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 152, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 1, "_958\\": 1, "_961\\": 1, "_962\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_index": 2, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 3, "accessibility\\": 1, "action": 15, "action=": 1, "action=\\\\\\": 1, "action\u003e": 2, "action\\": 1, "action\\\\\\": 1, "action\\u003c/a\\u003e": 1, "action\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/accounts": 1, "action\\u003e\\u003c/code\\u003e": 1, "action\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "actiondata\\": 1, "actionfunctionargs": 2, "actions": 3, "adapter": 3, "adapters": 3, "all": 5, "also": 3, "an": 9, "and": 19, "api": 6, "api@remix-run/dev": 2, "api\\": 1, "app": 2, "app/routes/accounts": 2, "approach": 1, "are": 6, "aria-hidden=\\\\\\": 1, "as": 5, "asked": 1, "asset": 3, "async": 2, "at": 3, "attrs\\": 1, "automatically": 2, "await": 3, "await\\": 1, "b=document": 1, "backend": 3, "basename": 1, "be": 3, "because": 2, "been": 2, "before": 3, "besides": 2, "between": 2, "body": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 3, "build": 2, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "button": 2, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "called": 9, "called\\u003c/em\\u003e": 1, "can": 1, "case": 2, "catch": 1, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 34, "cli": 5, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cloudflare/deno": 2, "cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "co-locate": 2, "code": 4, "codeblock-line\\\\\\": 33, "color": 96, "com/playlist": 1, "com/watch": 2, "community": 3, "community\\": 1, "component": 4, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 1, "const": 3, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 15, "css\\": 1, "d=c": 2, "data": 29, "data-code-block=\\\\\\": 1, "data-lang=\\\\\\": 2, "data-line-number=\\\\\\": 33, "data-line-numbers=\\\\\\": 2, "data=": 1, "data\\": 2, "deepest": 4, "default": 1, "defer": 2, "defer\\": 1, "deferred": 1, "define": 2, "delete": 1, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "development": 3, "difference": 2, "disabling": 3, "disambiguate": 2, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 1, "doc\\": 1, "docs/route/action": 1, "docs/route/action\\": 1, "docsactiongetting": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "document": 1, "don": 2, "done": 1, "e--": 1, "e=0": 1, "else": 2, "enables": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "everything": 3, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "export": 3, "extract": 2, "extract\\": 1, "f=a": 1, "fakecreatetodo": 2, "fakegettodos": 2, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "for": 6, "form": 19, "form\\": 1, "form\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "formdata": 1, "forms": 4, "found": 3, "frequently": 1, "from": 17, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 6, "future": 4, "get": 6, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "handle": 4, "handle\\": 1, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "have": 2, "headers": 2, "headers\\": 1, "headings\\": 1, "help": 1, "here": 1, "hierarchy": 2, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href=\\\\\\": 8, "html": 1, "html\\": 1, "https": 5, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 1, "icon-link\\\\\\": 1, "id": 1, "id=\\\\\\": 1, "if": 13, "import": 10, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 14, "inc": 1, "index": 22, "index\\\\\\": 1, "index\\u003c/code\\u003e": 3, "index\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/accounts": 1, "initial": 1, "insertbefore": 1, "integrating": 1, "interactions": 1, "into": 2, "introduction": 1, "is": 17, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 4, "iterative": 1, "itself": 6, "javascript": 2, "javascript\\": 1, "js": 7, "js\\": 1, "json": 5, "json\\": 1, "key": 4, "know": 1, "lazy": 3, "learning": 1, "let": 3, "licensed": 1, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "list=plxoynulbyuedg2wbfsz66b85eispy3fy6\\\\\\": 1, "livereload": 2, "livereload\\": 1, "loader": 3, "loader\u003e": 1, "loader\\": 1, "loaderdata\\": 1, "loaders": 4, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "made": 4, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "match": 2, "matching": 4, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "method=": 4, "method=\\\\\\": 3, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 8, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "most": 1, "multiple": 3, "mutations": 5, "mutations\\u003c/a\\u003e\\u003c/docs-success\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ea": 1, "name=": 1, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 3, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "non-\\u003ccode\\u003eget\\u003c/code\\u003e": 1, "non-get": 1, "not": 3, "note": 2, "null": 1, "number": 1, "of": 7, "omit": 2, "on": 2, "once": 1, "one": 3, "only": 5, "open": 1, "optimization": 2, "optimization\\": 1, "or": 9, "order\\": 1, "other": 5, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "param": 5, "param\\": 1, "param\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\": 1, "parent": 8, "parentnode": 2, "parse": 1, "patch": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "positions": 2, "post": 12, "post\\\\\\": 3, "postcss": 2, "postcss\\": 1, "posting": 4, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "prop": 2, "pull": 1, "put": 1, "query": 5, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "re": 4, "react": 8, "react-router-scroll-positions": 1, "read": 2, "readablestream": 1, "redirect": 4, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regular": 3, "related": 1, "released": 2, "remix": 12, "remix\\": 2, "removechild": 2, "removeitem": 1, "rendered": 2, "renders": 2, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 5, "resource": 3, "resources": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 3, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 42, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "route\\\\\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 9, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/route/action": 1, "run\\": 1, "running": 1, "runtimes": 3, "same": 6, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "see": 1, "server": 15, "server-only": 2, "server\\": 3, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 2, "share": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "simplifying": 1, "single": 7, "singles": 1, "singles\\u003c/a\\u003e": 1, "siteurl\\": 1, "slice": 1, "slug\\": 1, "so": 2, "somewhere": 2, "spa": 3, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 96, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "submit": 1, "support": 3, "support\\": 1, "tabindex=\\\\\\": 1, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "text": 1, "textencoderstream": 1, "thank": 1, "that": 4, "the": 53, "them": 2, "then": 2, "they": 6, "this": 6, "through": 1, "title": 4, "title\\": 1, "tls": 2, "tls\\": 1, "to": 40, "toc\\": 1, "todo": 2, "todo\u003c/button\u003e": 1, "todo\\u0026#x3c": 1, "todolist": 1, "todos": 1, "todos=": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 6, "true\\\\\\": 3, "try": 1, "ts": 2, "ts\\": 1, "tsx": 2, "tsx\\\\\\": 2, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003ealso": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/accounts\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/accounts": 1, "tutorial": 3, "type": 1, "type=": 2, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 4, "ui\\": 1, "under": 1, "unless": 2, "unlike": 2, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 7, "url\\u003c/th\\u003e\\\\n\\u003cth\\u003eroute": 1, "use": 2, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "useful": 2, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\u003ctypeof": 1, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 2, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "v=iv25hahafds\\u0026list=plxoynulbyuedg2wbfsz66b85eispy3fy6\\\\\\": 1, "v=w2i-9cyxsdc\\u0026list=plxoynulbyuedg2wbfsz66b85eispy3fy6\\\\\\": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 98, "variables": 2, "variables\\": 1, "view": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "want": 2, "watch": 1, "way": 1, "when": 4, "where": 2, "which": 2, "while": 1, "why": 1, "will": 10, "window": 11, "wins": 2, "with": 6, "within": 2, "without": 2, "writes": 4, "writes\\": 1, "you": 15, "your": 7, "youtube": 3, "||": 3, "~/components/todolist": 1, "~/utils/db": 1, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2, "📼": 1 }, "length": 5280 }, { "id": "4ca89b1a805f0e38ff38d813", "doc_id": "04a5fca92d57f145fcbd0c66", "title": "action", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/action.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/action.json", "content": "--- title: action use_cases: \u003e- forms, user input, data mutations, optimistic updates, form submissions, server actions, post requests tags: - actions - forms - mutations - post - validation - optimistic-updates - server version: '1.0' description: \u003e- Learn how to handle form submissions and data mutations in SolidJS with actions, including optimistic updates and server-side processing. --- The `action` function wraps an asynchronous function and returns an [action](/solid-router/concepts/actions). When an action is triggered, it creates a submission object that tracks its execution status. This state can be accessed with the [`useSubmission`](/solid-router/reference/data-apis/use-submission) and [`useSubmissions`](/solid-router/reference/data-apis/use-submissions) primitives. After an action completed successfully, all queries active in the same page are revalidated, unless revalidation is configured using [response helpers](/solid-router/concepts/actions#managing-navigation-and-revalidation). ## Import ```tsx import { action } from \"@solidjs/router\"; ``` ## Type ```tsx function action\u003cT extends Array\u003cany\u003e, U = void\u003e( fn: (...args: T) =\u003e Promise\u003cU\u003e, name?: string ): Action\u003cT, U\u003e; function action\u003cT extends Array\u003cany\u003e, U = void\u003e( fn: (...args: T) =\u003e Promise\u003cU\u003e, options?: { name?: string; onComplete?: (s: Submission\u003cT, U\u003e) =\u003e void } ): Action\u003cT, U\u003e; function action\u003cT extends Array\u003cany\u003e, U = void\u003e( fn: (...args: T) =\u003e Promise\u003cU\u003e, options: | string | { name?: string; onComplete?: (s: Submission\u003cT, U\u003e) =\u003e void } = {} ): Action\u003cT, U\u003e; ``` ## Parameters ### `handler` - **Type:** `(...args: T) =\u003e Promise\u003cU\u003e` - **Required:** Yes An asynchronous function that performs the action's logic. When the action is used with a [`\u003cform\u003e` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form), the function receives a [`FormData` object](https://developer.mozilla.org/en-US/docs/Web/API/FormData) as its first parameter. ### `options` - **Type:** `string | { name?: string; onComplete?: (s: Submission\u003cT, U\u003e) =\u003e void }` - **Required**: No A unique string used to identify the action in Server-Side Rendering (SSR) environments. This is required when using the action with a `\u003cform\u003e` element. Alternatively, a configuration object can be passed with the following properties. #### `name` - **Type:** `string` - **Required:** No The unique string to identify the action in SSR environments. Required for `\u003cform\u003e` usage. #### `onComplete` (optional): - **Type:** `(s: Submission\u003cT, U\u003e) =\u003e void` - **Required:** No A function that runs after the action completes. It receives a submission object as its parameter. ## Return value `action` returns an action with the following properties. ### `with` A method that wraps the original action and returns a new one. When this new action is triggered, the arguments passed to `with` are forwarded to the original action. If this new action is used with a `\u003cform\u003e`, the `FormData` object is passed as the last parameter, after any other forwarded parameters. ## Examples ### Form submission ```tsx import { action } from \"@solidjs/router\"; const addTodoAction = action(async (formData: FormData) =\u003e { // Adds a new todo to the server. }, \"addTodo\"); function TodoForm() { return ( \u003cform action={addTodoAction} method=\"post\"\u003e \u003cinput name=\"name\" /\u003e \u003cbutton\u003eAdd todo\u003c/button\u003e \u003c/form\u003e ); } ``` ### Passing additional arguments ```tsx import { action } from \"@solidjs/router\"; const addTodoAction = action(async (userId: number, formData: FormData) =\u003e { // ... Adds a new todo for a specific user. }, \"addTodo\"); function TodoForm() { const userId = 1; return ( \u003cform action={addTodoAction.with(userId)} method=\"post\"\u003e \u003cinput name=\"name\" /\u003e \u003cbutton\u003eAdd todo\u003c/button\u003e \u003c/form\u003e ); } ``` ### Triggering actions programmatically ```tsx import { action, useAction } from \"@solidjs/router\"; const markDoneAction = action(async (id: string) =\u003e { // ... Marks a todo as done on the server. }); function NotificationItem(props: { id: string }) { const markDone = useAction(markDoneAction); return \u003cbutton onClick={() =\u003e markDone(props.id)}\u003eMark as done\u003c/button\u003e; } ```", "term_freq": { "##": 5, "###": 6, "####": 2, "**": 7, "**required": 3, "**required**": 1, "**type": 4, "---": 2, "//": 3, "//developer": 2, "//github": 1, "/\u003e": 2, "/solid-router/concepts/actions": 1, "/solid-router/concepts/actions#managing-navigation-and-revalidation": 1, "/solid-router/reference/data-apis/use-submission": 1, "/solid-router/reference/data-apis/use-submissions": 1, "\u003c/form\u003e": 2, "\u003cbutton": 1, "\u003cbutton\u003eadd": 2, "\u003cform": 2, "\u003cform\u003e": 4, "\u003cinput": 2, "=\u003e": 12, "\u003e-": 2, "\u003emark": 1, "@solidjs/router": 4, "accessed": 1, "action": 25, "action\u003ct": 6, "action=": 2, "actions": 4, "active": 1, "additional": 1, "adds": 2, "addtodo": 2, "addtodoaction": 4, "after": 3, "all": 1, "alternatively": 1, "an": 6, "and": 5, "any": 1, "are": 2, "args": 4, "arguments": 2, "array\u003cany\u003e": 3, "as": 5, "async": 3, "asynchronous": 2, "be": 2, "can": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/data-apis/action": 1, "completed": 1, "completes": 1, "configuration": 1, "configured": 1, "const": 5, "creates": 1, "data": 2, "description": 1, "done": 1, "done\u003c/button\u003e": 1, "element": 2, "environments": 2, "examples": 1, "execution": 1, "extends": 3, "first": 1, "fn": 3, "following": 2, "for": 2, "form": 3, "formdata": 6, "forms": 2, "forwarded": 2, "from": 4, "function": 11, "github-document": 1, "handle": 1, "handler": 1, "helpers": 1, "how": 1, "https": 3, "id": 3, "identify": 2, "if": 1, "import": 5, "in": 4, "including": 1, "input": 1, "is": 7, "it": 2, "its": 3, "last": 1, "learn": 1, "logic": 1, "markdone": 2, "markdoneaction": 2, "marks": 1, "mdx": 1, "method": 1, "method=": 2, "mozilla": 2, "mutations": 3, "name": 7, "name=": 2, "new": 5, "no": 3, "notificationitem": 1, "number": 1, "object": 5, "on": 1, "onclick=": 1, "oncomplete": 4, "one": 1, "optimistic": 2, "optimistic-updates": 1, "optional": 1, "options": 3, "org/en-us/docs/web/api/formdata": 1, "org/en-us/docs/web/html/reference/elements/form": 1, "original": 2, "other": 1, "page": 1, "parameter": 3, "parameters": 2, "passed": 3, "passing": 1, "performs": 1, "post": 4, "primitives": 1, "processing": 1, "programmatically": 1, "promise\u003cu\u003e": 4, "properties": 2, "props": 2, "queries": 1, "receives": 2, "rendering": 1, "requests": 1, "required": 2, "response": 1, "return": 4, "returns": 3, "revalidated": 1, "revalidation": 1, "runs": 1, "same": 1, "server": 4, "server-side": 2, "solidjs": 1, "specific": 1, "ssr": 2, "state": 1, "status": 1, "string": 11, "submission": 3, "submission\u003ct": 4, "submissions": 2, "successfully": 1, "tags": 1, "that": 4, "the": 20, "this": 4, "title": 1, "to": 6, "todo": 3, "todo\u003c/button\u003e": 2, "todoform": 2, "tracks": 1, "triggered": 2, "triggering": 1, "tsx": 5, "type": 1, "u\u003e": 7, "unique": 2, "unless": 1, "updates": 2, "usage": 1, "use_cases": 1, "useaction": 2, "used": 3, "user": 2, "userid": 3, "usesubmission": 1, "usesubmissions": 1, "using": 2, "validation": 1, "value": 1, "version": 1, "void": 4, "void\u003e": 3, "when": 4, "with": 10, "wraps": 2, "yes": 1 }, "length": 508 }, { "id": "412aa8c391b3c573949bac2a", "doc_id": "ce221c5e8e07e9e26c341923", "title": "actions", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/actions.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/actions.json", "content": "--- title: Actions use_cases: \u003e- form submissions, data mutations, server communication, user input handling, api calls, crud operations tags: - actions - forms - data - api - server - submission - mutations version: '1.0' description: \u003e- Handle form submissions and server mutations with Solid Router actions. Build isomorphic data flows with progressive enhancement support. --- Many user interactions in an application involve changing data on the server. These **mutations** can be challenging to manage, as they require updates to the application's state and proper error handling. Actions simplify managing data mutations. Actions provide several benefits: - **Integrated state management:** Solid Router automatically tracks the execution state of an action, simplifying reactive UI feedback. - **Automatic data revalidation:** After an action successfully completes, Solid Router revalidates relevant [`queries`](/solid-router/data-fetching/queries), ensuring the UI reflects the latest data. - **Progressive enhancement:** When used with HTML forms, actions enable functionality even if JavaScript is not yet loaded. ## Defining actions Actions are defined by wrapping the data-mutation logic with the [`action` function](/solid-router/reference/data-apis/action). ```tsx import { action } from \"@solidjs/router\"; const createTicketAction = action(async (subject: string) =\u003e { const response = await fetch(\"https://my-api.com/support/tickets\", { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ subject }), }); if (!response.ok) { const errorData = await response.json(); return { ok: false, message: errorData.message }; } return { ok: true }; }, \"createTicket\"); ``` In this example, an action is defined that creates a support ticket using a remote API. ## Using actions Actions can be triggered in two ways: using a HTML [`\u003cform\u003e` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form) or programmatically using the [`useAction` primitive](/solid-router/reference/data-apis/use-action). The recommended approach is to use a `\u003cform\u003e` element. This ensures a robust user experience with progressive enhancement, since the form works even without JavaScript. For cases where a form is not suitable, the [`useAction` primitive](/solid-router/reference/data-apis/use-action) can be used to trigger the action programmatically. ### With the `\u003cform\u003e` element Solid Router extends the standard HTML `\u003cform\u003e` element to work with actions. Form submissions can be handled using action by passing an action to the `action` prop. Consider these points when using actions with `\u003cform\u003e`: 1. The `\u003cform\u003e` element **must** have `method=\"post\"`. 2. The action function will automatically receive the form's data as a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object as its first parameter. 3. For SSR environments, a unique name **must** be provided as the second parameter to the `action` function. This name is used by Solid Router to identify and serialize the action across the client and server. ```tsx import { action } from \"@solidjs/router\"; const submitFeedbackAction = action(async (formData: FormData) =\u003e { const message = formData.get(\"message\")?.toString(); // ... Sends the feedback to the server. }, \"submitFeedback\"); function FeedbackForm() { return ( \u003cform action={submitFeedbackAction} method=\"post\"\u003e \u003ctextarea name=\"message\" placeholder=\"Message\" /\u003e \u003cbutton type=\"submit\"\u003eSend feedback\u003c/button\u003e \u003c/form\u003e ); } ``` In this example, when the form is submitted, `submitFeedbackAction` will be triggered with the `FormData` containing the form values. :::tip[Uploading files] If a form that includes file inputs, the `\u003cform\u003e` element must have `enctype=\"multipart/form-data\"` to correctly send the file data. ```tsx \u003cform action={uploadFileAction} method=\"post\" enctype=\"multipart/form-data\"\u003e \u003cinput type=\"file\" name=\"myFile\" /\u003e \u003cbutton type=\"submit\"\u003eUpload\u003c/button\u003e \u003c/form\u003e ``` ::: #### Passing additional arguments Sometimes, an action needs data that isn't part of the form's inputs. These additional arguments can be passed using the `with` method. The `with` method creates a new action that wraps around the original action. When this new action is triggered, it forwards the arguments specified in the `with` method to the original action, followed by the `FormData` object. ```tsx import { action } from \"@solidjs/router\"; const updateProductAction = action( async (productId: string, formData: FormData) =\u003e { // ... Sends the updated fields to the server. return { ok: true }; }, \"updateProduct\" ); function EditProductForm(props: { productId: string }) { return ( \u003cform action={updateProductAction.with(props.productId)} method=\"post\"\u003e \u003cinput name=\"name\" placeholder=\"Product name\" /\u003e \u003cbutton type=\"submit\"\u003eSave\u003c/button\u003e \u003c/form\u003e ); } ``` In this example, `updateProductAction` receives `productId` (passed via `with`), and then the `formData` from the form. ### With the `useAction` primitive For scenarios where a `\u003cform\u003e` element is not suitable, the `useAction` primitive provides a way to trigger an action programmatically. The `useAction` primitive takes an action as its parameter and returns a function that, when called, triggers the action with the provided arguments. This approach requires client-side JavaScript and is not progressively enhanceable. ```tsx import { action, useAction } from \"@solidjs/router\"; const markNotificationReadAction = action(async (notificationId: string) =\u003e { // ... Marks a notification as read on the server. }); function NotificationItem(props: { id: string }) { const markRead = useAction(markNotificationReadAction); return \u003cbutton onClick={() =\u003e markRead(props.id)}\u003eMark as read\u003c/button\u003e; } ``` In this example, `markRead` is a function that can be called with arguments matching `markNotificationReadAction`. When the button is clicked, the action is triggered with the provided arguments. ## Tracking submission state When an action is triggered, it creates a **submission** object. This object is a snapshot of the action's execution, containing its input, current status (pending or complete), and its final result or error. To access this state, Solid Router provides the [`useSubmission`](/solid-router/reference/data-apis/use-submission) and [`useSubmissions`](/solid-router/reference/data-apis/use-submissions) primitives. The `useSubmission` primitive tracks the state of the _most recent_ submission for a specific action. This is ideal for most use cases, such as disabling a form's submit button while the action is pending or displaying a confirmation message upon success. ```tsx import { Show } from \"solid-js\"; import { action, useSubmission } from \"@solidjs/router\"; const updateSettingsAction = action(async (formData: FormData) =\u003e { // ... Sends the settings data to the server. }, \"updateSettings\"); function UserSettingsForm() { const submission = useSubmission(updateSettingsAction); return ( \u003cform action={updateSettingsAction} method=\"post\"\u003e \u003cinput name=\"email\" type=\"email\" placeholder=\"Enter your email\" /\u003e \u003cbutton disabled={submission.pending}\u003e {submission.pending ? \"Saving...\" : \"Save settings\"} \u003c/button\u003e \u003c/form\u003e ); } ``` In this example, the form's submit button is disabled while `submission.pending` is `true`. :::tip To track multiple submissions for a single action, such as in a multi-file uploader interface, the [`useSubmissions` primitive](/solid-router/reference/data-apis/use-submissions) can be used. ::: ## Handling errors An action can fail for various reasons. A robust application must handle these failures gracefully. Solid Router provides two mechanisms for an action to signal failure: throwing an `Error` or returning a value. Throwing an `Error` is a valid way to signal failure. Solid Router will catch the thrown error and make it available in the `submission.error` property. However, this approach has some drawbacks. The `submission.error` property is typed as `any`, which undermines type safety in the consuming component. It is also difficult to convey structured error information, such as validation messages for multiple form fields, using a simple `Error` instance. For these reasons, the recommended practice is to always `return` a descriptive object from an action to represent its outcome. The returned object is available in the `submission.result` property, which will be fully typed. This makes handling different outcomes in the UI simple and safe. ```tsx import { Show } from \"solid-js\"; import { action, useSubmission } from \"@solidjs/router\"; const verifyTwoFactorAction = action(async (formData: FormData) =\u003e { const code = formData.get(\"code\")?.toString(); if (!code || code.length !== 6) { return { ok: false, errors: { code: \"Enter the 6-digit code from the authenticator app.\" }, }; } // ... Verifies the code with the server and handles potential errors. return { ok: true }; }, \"verifyTwoFactor\"); function TwoFactorForm() { const submission = useSubmission(verifyTwoFactorAction); const errors = () =\u003e { const result = submission.result; if (result \u0026\u0026 !result.ok) { return result.errors; } }; return ( \u003cform action={verifyTwoFactorAction} method=\"post\"\u003e \u003cdiv\u003e \u003cinput name=\"code\" placeholder=\"6-digit code\" inputMode=\"numeric\" /\u003e \u003cShow when={errors()?.code}\u003e \u003cp\u003e{errors().code}\u003c/p\u003e \u003c/Show\u003e \u003c/div\u003e \u003cbutton type=\"submit\" disabled={submission.pending}\u003e {submission.pending ? \"Verifying...\" : \"Verify\"} \u003c/button\u003e \u003c/form\u003e ); } ``` In this example, the `errors` derived signal inspects `submission.result` to check for failures. If an `errors` object is found, its properties are used to conditionally render error messages next to the relevant form fields. :::caution[Always return a value] It is important that an action consistently returns a value from all of its possible code paths. Because, if an action returns `undefined` or `null`, Solid Router removes that submission from its internal list upon completion. This can lead to unexpected behavior. For example, consider an action that returns an error object on failure but returns nothing on success. If the action fails once, `useSubmission` will correctly report the error. However, if a subsequent submission succeeds, it will be removed from the list, and `useSubmission` will continue to report the previous stale error state. To prevent this, ensure every code path in an action returns a value, such as `{ ok: true }` to indicate a successful outcome. ::: ## Automatic data revalidation After server data changes, the application's can become stale. To solve this, Solid Router automatically revalidates all [queries](/solid-router/data-fetching/queries) used in the same page after a successful action. This ensures any component using that data is automatically updated with the freshest information. For example, if a page displays a list of registered devices and includes a form to register a new one, the list will automatically update after the form is submitted. ```tsx import { For } from \"solid-js\"; import { query, action, createAsync } from \"@solidjs/router\"; const getDevicesQuery = query(async () =\u003e { // ... Fetches the list of registered devices. }, \"devices\"); const registerDeviceAction = action(async (formData: FormData) =\u003e { // ... Registers a new device on the server. }, \"registerDevice\"); function DevicesPage() { // This query will automatically revalidate after registerDeviceAction completes. const devices = createAsync(() =\u003e getDevicesQuery()); return ( \u003cdiv\u003e \u003ch2\u003eRegistered devices\u003c/h2\u003e \u003cFor each={devices()}\u003e{(device) =\u003e \u003cp\u003e{device.name}\u003c/p\u003e}\u003c/For\u003e \u003ch3\u003eRegister new device\u003c/h3\u003e \u003cform action={registerDeviceAction} method=\"post\"\u003e \u003cinput name=\"name\" placeholder=\"Device name\" /\u003e \u003cbutton type=\"submit\"\u003eRegister device\u003c/button\u003e \u003c/form\u003e \u003c/div\u003e ); } ``` While this automatic behavior is convenient for most cases, more fine-grained control may be needed. The next section explains how to customize or even disable this behavior for specific actions. ## Managing navigation and revalidation While automatic revalidation is powerful, more control is often needed. It may be desirable to redirect the user to a different page, prevent revalidation entirely, or revalidate a specific set of queries. This is where response helpers come in. Response helpers are functions that create special [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) objects. When an action returns or throws one of these responses, Solid Router intercepts it and performs a specific task. ### Redirecting To navigate the user to a new page after an action completes, the [`redirect` helper](/solid-router/reference/response-helpers/redirect) can be used. It can also be used to revalidate specific queries upon redirection, which is useful for updating data that is displayed on the new page. ```tsx import { action, redirect } from \"@solidjs/router\"; import { useSession } from \"vinxi/http\"; const logoutAction = action(async () =\u003e { \"use server\"; const session = await useSession({ password: process.env.SESSION_SECRET as string, name: \"session\", }); if (session.data.sessionId) { await session.clear(); await db.session.delete({ id: sessionId }); } throw redirect(\"/\"); }, \"logout\"); ``` In this example, after a successful login, the `redirect` helper is used to navigate to the dashboard. It also revalidates the \"session\" query to ensure the UI reflects the user's authenticated state. ### Customizing revalidation To override the default revalidation behavior, the [`reload`](/solid-router/reference/response-helpers/reload) and [`json`](/solid-router/reference/response-helpers/json) helpers can be used. - `reload` is used when only revalidation needs to be customized. - `json` is used when revalidation needs to be controlled _and_ data needs to be returned from the action. Both helpers accept a `revalidate` option, which takes an array of query keys to revalidate. If an empty array (`[]`) is provided, revalidation is prevented altogether. ```tsx import { action, reload, json } from \"@solidjs/router\"; // Example 1: Revalidating a specific query const savePreferencesAction = action(async () =\u003e { // ... Saves the user preferences. // Only revalidate the 'userPreferences' query throw reload({ revalidate: [\"userPreferences\"] }); }); // Example 2: Disabling revalidation and returning data const logActivityAction = action(async () =\u003e { // ... Logs the activity to the server. // Return without revalidating any queries return json({ ok: true }, { revalidate: [] }); }); ``` :::tip[Throwing vs. Returning] A response helper can be either `return`ed or `throw`n. In TypeScript, `throw` can be more convenient, as it avoids potential type conflicts with an action's expected return value. ::: ## Optimistic UI Optimistic UI is a pattern where the user interface is updated immediately after a user performs an operation. This is done without waiting for the server to confirm the operation's success. This approach makes an application feel faster and more responsive. Actions can be combined with local state management to implement optimistic UI. The `useSubmission` primitive can be used to access the input of an action as it's being submitted. This input can be used to temporarily update the UI. ```tsx import { For, Show } from \"solid-js\"; import { query, action, createAsync, useSubmission } from \"@solidjs/router\"; const getCartQuery = query(async () =\u003e { // ... Fetches the current shopping cart items. }, \"cart\"); const addToCartAction = action(async (formData: FormData) =\u003e { // ... Adds a product to the cart. }, \"addToCart\"); function CartPage() { const cart = createAsync(() =\u003e getCartQuery()); const submission = useSubmission(addToCartAction); const optimisticCart = () =\u003e { const originalItems = cart() ?? []; if (submission.pending) { const formData = submission.input[0] as FormData; const productId = formData.get(\"productId\")?.toString(); const name = formData.get(\"name\")?.toString(); if (productId \u0026\u0026 name) { // Add the optimistic line item with a temporary identifier. return [...originalItems, { id: \"temp\", productId, name, quantity: 1 }]; } } return originalItems; }; return ( \u003cdiv\u003e \u003ch2\u003eYour cart\u003c/h2\u003e \u003cFor each={optimisticCart()}\u003e{(item) =\u003e \u003cp\u003e{item.name}\u003c/p\u003e}\u003c/For\u003e \u003ch3\u003eAdd item\u003c/h3\u003e \u003cform action={addToCartAction} method=\"post\"\u003e \u003cinput name=\"productId\" placeholder=\"Product ID\" /\u003e \u003cinput name=\"name\" placeholder=\"Product name\" /\u003e \u003cbutton type=\"submit\" disabled={submission.pending}\u003e {submission.pending ? \"Adding...\" : \"Add to cart\"} \u003c/button\u003e \u003c/form\u003e \u003c/div\u003e ); } ``` In this example, a derived signal `optimisticCart` is created. When an action is pending, it checks the `submission.input` and adds the new cart item to the list with a temporary ID. If the action fails, `submission.pending` becomes false, and `optimisticCart` will revert to showing the original list from `cart`. When the action succeeds, Solid Router automatically revalidates `getCartQuery` and updates the UI with the confirmed cart state. :::note For more advanced patterns, consider using [TanStack Query](https://tanstack.com/query/latest/docs/framework/solid/guides/optimistic-updates). It provides robust tools for managing server state, including cache-based optimistic updates. :::", "term_freq": { "##": 7, "###": 4, "####": 1, "\u0026\u0026": 2, "**": 3, "**automatic": 1, "**integrated": 1, "**must**": 2, "**mutations**": 1, "**progressive": 1, "**submission**": 1, "---": 2, "//": 17, "//developer": 3, "//github": 1, "//my-api": 1, "//tanstack": 1, "/\u003e": 8, "/solid-router/data-fetching/queries": 2, "/solid-router/reference/data-apis/action": 1, "/solid-router/reference/data-apis/use-action": 2, "/solid-router/reference/data-apis/use-submission": 1, "/solid-router/reference/data-apis/use-submissions": 2, "/solid-router/reference/response-helpers/json": 1, "/solid-router/reference/response-helpers/redirect": 1, "/solid-router/reference/response-helpers/reload": 1, "6-digit": 2, "\u003c/button\u003e": 3, "\u003c/div\u003e": 3, "\u003c/for\u003e": 2, "\u003c/form\u003e": 7, "\u003c/p\u003e": 3, "\u003c/show\u003e": 1, "\u003cbutton": 8, "\u003cdiv\u003e": 3, "\u003cfor": 2, "\u003cform": 7, "\u003cform\u003e": 8, "\u003ch2\u003eregistered": 1, "\u003ch2\u003eyour": 1, "\u003ch3\u003eadd": 1, "\u003ch3\u003eregister": 1, "\u003cinput": 7, "\u003cp\u003e": 3, "\u003cshow": 1, "\u003ctextarea": 1, "==": 1, "=\u003e": 20, "\u003e-": 2, "\u003emark": 1, "\u003eregister": 1, "\u003esave\u003c/button\u003e": 1, "\u003esend": 1, "\u003eupload\u003c/button\u003e": 1, "@solidjs/router": 10, "_and_": 1, "_most": 1, "accept": 1, "access": 2, "across": 1, "action": 63, "action=": 7, "actions": 15, "activity": 1, "add": 2, "adding": 1, "additional": 2, "adds": 2, "addtocart": 1, "addtocartaction": 3, "advanced": 1, "after": 8, "all": 2, "also": 3, "altogether": 1, "always": 2, "an": 29, "and": 22, "any": 3, "api": 3, "app": 1, "application": 5, "application/json": 1, "approach": 4, "are": 3, "arguments": 6, "around": 1, "array": 2, "as": 16, "async": 13, "authenticated": 1, "authenticator": 1, "automatic": 3, "automatically": 7, "available": 2, "avoids": 1, "await": 5, "be": 24, "because": 1, "become": 1, "becomes": 1, "behavior": 4, "being": 1, "benefits": 1, "body": 1, "both": 1, "build": 1, "but": 1, "button": 3, "by": 4, "cache-based": 1, "called": 2, "calls": 1, "can": 18, "cart": 9, "cart\u003c/h2\u003e": 1, "cartpage": 1, "cases": 3, "catch": 1, "caution": 1, "challenging": 1, "changes": 1, "changing": 1, "check": 1, "checks": 1, "clear": 1, "clicked": 1, "client": 1, "client-side": 1, "code": 13, "com/query/latest/docs/framework/solid/guides/optimistic-updates": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/concepts/actions": 1, "com/support/tickets": 1, "combined": 1, "come": 1, "communication": 1, "complete": 1, "completes": 3, "completion": 1, "component": 2, "conditionally": 1, "confirm": 1, "confirmation": 1, "confirmed": 1, "conflicts": 1, "consider": 3, "consistently": 1, "const": 31, "consuming": 1, "containing": 2, "content-type": 1, "continue": 1, "control": 2, "controlled": 1, "convenient": 2, "convey": 1, "correctly": 2, "create": 1, "createasync": 4, "created": 1, "creates": 3, "createticket": 1, "createticketaction": 1, "crud": 1, "current": 2, "customize": 1, "customized": 1, "customizing": 1, "dashboard": 1, "data": 18, "data-mutation": 1, "db": 1, "default": 1, "defined": 2, "defining": 1, "delete": 1, "derived": 2, "description": 1, "descriptive": 1, "desirable": 1, "device": 4, "device\u003c/button\u003e": 1, "device\u003c/h3\u003e": 1, "devices": 5, "devices\u003c/h2\u003e": 1, "devicespage": 1, "different": 2, "difficult": 1, "disable": 1, "disabled": 1, "disabled=": 3, "disabling": 2, "displayed": 1, "displaying": 1, "displays": 1, "done": 1, "drawbacks": 1, "each=": 2, "ed": 1, "editproductform": 1, "either": 1, "element": 7, "email": 3, "empty": 1, "enable": 1, "enctype=": 2, "enhanceable": 1, "enhancement": 3, "ensure": 2, "ensures": 2, "ensuring": 1, "enter": 2, "entirely": 1, "env": 1, "environments": 1, "error": 13, "errordata": 2, "errors": 9, "even": 3, "every": 1, "example": 12, "execution": 2, "expected": 1, "experience": 1, "explains": 1, "extends": 1, "fail": 1, "fails": 2, "failure": 3, "failures": 2, "false": 3, "faster": 1, "feedback": 2, "feedback\u003c/button\u003e": 1, "feedbackform": 1, "feel": 1, "fetch": 1, "fetches": 2, "fields": 3, "file": 3, "files": 1, "final": 1, "fine-grained": 1, "first": 1, "flows": 1, "followed": 1, "for": 21, "form": 17, "formdata": 22, "forms": 2, "forwards": 1, "found": 1, "freshest": 1, "from": 23, "fully": 1, "function": 12, "functionality": 1, "functions": 1, "get": 4, "getcartquery": 3, "getdevicesquery": 2, "github-document": 1, "gracefully": 1, "handle": 2, "handled": 1, "handles": 1, "handling": 4, "has": 1, "have": 2, "headers": 1, "helper": 3, "helpers": 4, "how": 1, "however": 2, "html": 3, "https": 6, "id": 6, "ideal": 1, "identifier": 1, "identify": 1, "if": 15, "immediately": 1, "implement": 1, "import": 15, "important": 1, "in": 20, "includes": 2, "including": 1, "indicate": 1, "information": 2, "input": 6, "inputmode=": 1, "inputs": 2, "inspects": 1, "instance": 1, "interactions": 1, "intercepts": 1, "interface": 2, "internal": 1, "involve": 1, "is": 43, "isn": 1, "isomorphic": 1, "it": 14, "item": 4, "item\u003c/h3\u003e": 1, "items": 1, "its": 8, "javascript": 3, "json": 6, "keys": 1, "latest": 1, "lead": 1, "length": 1, "line": 1, "list": 7, "loaded": 1, "local": 1, "logactivityaction": 1, "logic": 1, "login": 1, "logout": 1, "logoutaction": 1, "logs": 1, "make": 1, "makes": 2, "manage": 1, "management": 2, "managing": 3, "many": 1, "marknotificationreadaction": 3, "markread": 3, "marks": 1, "matching": 1, "may": 2, "mdx": 1, "mechanisms": 1, "message": 7, "messages": 2, "method": 4, "method=": 8, "more": 5, "most": 2, "mozilla": 3, "multi-file": 1, "multipart/form-data": 2, "multiple": 2, "must": 2, "mutations": 4, "myfile": 1, "name": 15, "name=": 8, "navigate": 2, "navigation": 1, "needed": 2, "needs": 4, "new": 8, "next": 2, "not": 4, "note": 1, "nothing": 1, "notification": 1, "notificationid": 1, "notificationitem": 1, "null": 1, "numeric": 1, "object": 8, "objects": 1, "of": 11, "often": 1, "ok": 9, "on": 6, "once": 1, "onclick=": 1, "one": 2, "only": 2, "operation": 2, "operations": 1, "optimistic": 5, "optimisticcart": 4, "option": 1, "or": 10, "org/en-us/docs/web/api/formdata": 1, "org/en-us/docs/web/api/response": 1, "org/en-us/docs/web/html/reference/elements/form": 1, "original": 3, "originalitems": 3, "outcome": 2, "outcomes": 1, "override": 1, "page": 5, "parameter": 3, "part": 1, "passed": 2, "passing": 2, "password": 1, "path": 1, "paths": 1, "pattern": 1, "patterns": 1, "pending": 12, "performs": 2, "placeholder=": 7, "points": 1, "possible": 1, "post": 9, "potential": 2, "powerful": 1, "practice": 1, "preferences": 1, "prevent": 2, "prevented": 1, "previous": 1, "primitive": 8, "primitives": 1, "process": 1, "product": 4, "productid": 9, "programmatically": 3, "progressive": 2, "progressively": 1, "prop": 1, "proper": 1, "properties": 1, "property": 3, "props": 4, "provide": 1, "provided": 4, "provides": 4, "quantity": 1, "queries": 5, "query": 10, "reactive": 1, "read": 1, "read\u003c/button\u003e": 1, "reasons": 2, "receive": 1, "receives": 1, "recent_": 1, "recommended": 2, "redirect": 5, "redirecting": 1, "redirection": 1, "reflects": 2, "register": 1, "registerdevice": 1, "registerdeviceaction": 3, "registered": 2, "registers": 1, "relevant": 2, "reload": 4, "remote": 1, "removed": 1, "removes": 1, "render": 1, "report": 2, "represent": 1, "require": 1, "requires": 1, "response": 7, "responses": 1, "responsive": 1, "result": 8, "return": 21, "returned": 2, "returning": 3, "returns": 7, "revalidate": 8, "revalidates": 4, "revalidating": 2, "revalidation": 11, "revert": 1, "robust": 3, "router": 12, "safe": 1, "safety": 1, "same": 1, "save": 1, "savepreferencesaction": 1, "saves": 1, "saving": 1, "scenarios": 1, "second": 1, "section": 1, "send": 1, "sends": 3, "serialize": 1, "server": 16, "session": 6, "session_secret": 1, "sessionid": 2, "set": 1, "settings": 2, "several": 1, "shopping": 1, "show": 3, "showing": 1, "signal": 4, "simple": 2, "simplify": 1, "simplifying": 1, "since": 1, "single": 1, "snapshot": 1, "solid": 12, "solid-js": 4, "solve": 1, "some": 1, "sometimes": 1, "special": 1, "specific": 6, "specified": 1, "ssr": 1, "stale": 2, "standard": 1, "state": 11, "status": 1, "string": 6, "stringify": 1, "structured": 1, "subject": 2, "submission": 24, "submissions": 4, "submit": 8, "submitfeedback": 1, "submitfeedbackaction": 3, "submitted": 3, "subsequent": 1, "succeeds": 2, "success": 3, "successful": 3, "successfully": 1, "such": 4, "suitable": 2, "support": 2, "tags": 1, "takes": 2, "tanstack": 1, "task": 1, "temp": 1, "temporarily": 1, "temporary": 2, "that": 12, "the": 119, "then": 1, "these": 6, "they": 1, "this": 28, "throw": 4, "throwing": 3, "thrown": 1, "throws": 1, "ticket": 1, "tip": 3, "title": 1, "to": 53, "tools": 1, "tostring": 4, "track": 1, "tracking": 1, "tracks": 2, "trigger": 2, "triggered": 5, "triggers": 1, "true": 6, "tsx": 11, "two": 2, "twofactorform": 1, "type": 2, "type=": 8, "typed": 2, "typescript": 1, "ui": 9, "undefined": 1, "undermines": 1, "unexpected": 1, "unique": 1, "update": 2, "updated": 3, "updateproduct": 1, "updateproductaction": 3, "updates": 3, "updatesettings": 1, "updatesettingsaction": 3, "updating": 1, "uploader": 1, "uploadfileaction": 1, "uploading": 1, "upon": 3, "use": 3, "use_cases": 1, "useaction": 7, "used": 14, "useful": 1, "user": 9, "userpreferences": 2, "usersettingsform": 1, "usesession": 2, "usesubmission": 11, "usesubmissions": 2, "using": 10, "valid": 1, "validation": 1, "value": 5, "values": 1, "various": 1, "verifies": 1, "verify": 1, "verifying": 1, "verifytwofactor": 1, "verifytwofactoraction": 3, "version": 1, "via": 1, "vinxi/http": 1, "vs": 1, "waiting": 1, "way": 2, "ways": 1, "when": 12, "when=": 1, "where": 4, "which": 4, "while": 4, "will": 10, "with": 25, "without": 3, "work": 1, "works": 1, "wrapping": 1, "wraps": 1, "yet": 1, "your": 1, "||": 1 }, "length": 2221 }, { "id": "adb1097aa4e028a9550d873b", "doc_id": "96b53c49f442358edc85e942", "title": "alternative-routers", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/alternative-routers.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/alternative-routers.json", "content": "--- title: Alternative routers use_cases: \u003e- single-page apps without server routing, legacy hash-based urls, testing router logic, client-only navigation tags: - hash-mode - memory-mode - client-side - testing - spa - routing version: '1.0' description: \u003e- Learn to use hash-based and memory routers in SolidJS for client-side navigation and testing without server interaction. --- While the default router uses the browser's `location.pathname` to determine the current route, you can use alternative routers to change this behavior. This includes: - [**Hash mode**](#hash-mode): Uses the hash portion of the URL to determine the current route. - [**Memory mode**](#memory-mode): Keeps the history of the router in memory, useful for testing. ## Hash mode Hash mode routing uses the hash portion of the URL to manage an application's state and navigation. Unlike the [default router](/solid-router/reference/components/router), the hash portion of the URL will not be handled by the server meaning this is a client-side only routing. To use hash mode, replace the `\u003cRouter /\u003e` component in the application with [`\u003cHashRouter /\u003e`](/solid-router/reference/components/hash-router). ```jsx del={3, 16} ins={4,17} import { render } from \"solid-js/web\"; import { Router HashRouter, Route } from \"@solidjs/router\"; const App = (props) =\u003e ( \u003c\u003e \u003ch1\u003eRoot header\u003c/h1\u003e {props.children} \u003c/\u003e ); render( () =\u003e \u003cRouter root={App}\u003e{/*... routes */}\u003c/Router\u003e, () =\u003e \u003cHashRouter root={App}\u003e{/*... routes */}\u003c/HashRouter\u003e, document.getElementById(\"app\") ); ``` ## Memory mode Unlike the default router and hash, the memory router does not interact with the browser's URL. This means that while the URL in the browser's address bar will change, the router will not navigate to the new route. This gives you the ability to control the router's state and history in memory which can be useful for testing purposes. To use memory mode, replace the `\u003cRouter /\u003e` component in the application with [`\u003cMemoryRouter /\u003e`](/solid-router/reference/components/memory-router): ```jsx del={3, 16} ins={4,17} import { render } from \"solid-js/web\"; import { Router MemoryRouter, Route } from \"@solidjs/router\"; const App = (props) =\u003e ( \u003c\u003e \u003ch1\u003eRoot header\u003c/h1\u003e {props.children} \u003c/\u003e ); render( () =\u003e \u003cRouter root={App}\u003e{/*... routes */}\u003c/Router\u003e, () =\u003e \u003cMemoryRouter root={App}\u003e{/*... routes */}\u003c/MemoryRouter\u003e, document.getElementById(\"app\") ); ```", "term_freq": { "##": 2, "#hash-mode": 1, "#memory-mode": 1, "**hash": 1, "**memory": 1, "*/": 4, "---": 2, "/*": 4, "//github": 1, "/\u003e": 4, "/solid-router/reference/components/hash-router": 1, "/solid-router/reference/components/memory-router": 1, "/solid-router/reference/components/router": 1, "16": 2, "17": 2, "\u003c/\u003e": 2, "\u003c/hashrouter\u003e": 1, "\u003c/memoryrouter\u003e": 1, "\u003c/router\u003e": 2, "\u003c\u003e": 2, "\u003ch1\u003eroot": 2, "\u003chashrouter": 2, "\u003cmemoryrouter": 2, "\u003crouter": 4, "=\u003e": 6, "\u003e-": 2, "@solidjs/router": 2, "ability": 1, "address": 1, "alternative": 2, "alternative-routers": 1, "an": 1, "and": 5, "app": 8, "application": 3, "apps": 1, "bar": 1, "be": 2, "behavior": 1, "browser": 3, "by": 1, "can": 2, "change": 2, "children": 2, "client-only": 1, "client-side": 3, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/concepts/alternative-routers": 1, "component": 2, "const": 2, "control": 1, "current": 2, "default": 3, "del=": 2, "description": 1, "determine": 2, "document": 2, "does": 1, "for": 3, "from": 4, "getelementbyid": 2, "github-document": 1, "gives": 1, "handled": 1, "hash": 7, "hash-based": 2, "hash-mode": 1, "hashrouter": 1, "header\u003c/h1\u003e": 2, "history": 2, "https": 1, "import": 4, "in": 6, "includes": 1, "ins=": 2, "interact": 1, "interaction": 1, "is": 1, "jsx": 2, "keeps": 1, "learn": 1, "legacy": 1, "location": 1, "logic": 1, "manage": 1, "mdx": 1, "meaning": 1, "means": 1, "memory": 6, "memory-mode": 1, "memoryrouter": 1, "mode": 5, "mode**": 2, "navigate": 1, "navigation": 3, "new": 1, "not": 3, "of": 4, "only": 1, "pathname": 1, "portion": 3, "props": 4, "purposes": 1, "render": 4, "replace": 2, "root=": 4, "route": 5, "router": 10, "routers": 3, "routes": 4, "routing": 4, "server": 3, "single-page": 1, "solid-js/web": 2, "solidjs": 1, "spa": 1, "state": 2, "tags": 1, "testing": 5, "that": 1, "the": 27, "this": 5, "title": 1, "to": 9, "unlike": 2, "url": 5, "urls": 1, "use": 4, "use_cases": 1, "useful": 2, "uses": 3, "version": 1, "which": 1, "while": 2, "will": 3, "with": 3, "without": 2, "you": 2 }, "length": 335 }, { "id": "9477956f81fbd0a08f068c59", "doc_id": "ec40cd4320aad0b03a3dca30", "title": "api-routes", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/building-your-application/api-routes.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/api-routes.json", "content": "--- title: API routes use_cases: \u003e- rest api, graphql endpoints, trpc setup, webhooks, oauth callbacks, pdf generation, third-party integrations tags: - api - rest - graphql - trpc - endpoints - server - http version: '1.0' description: \u003e- Create API routes in SolidStart for REST, GraphQL, or tRPC endpoints. Handle HTTP methods, sessions, and external integrations. --- While Server Functions can be a good way to write server-side code for data needed by your UI, sometimes you need to expose API routes. Some reasons for wanting API Routes include: - There are additional clients that want to share this logic. - Exposing a GraphQL or tRPC endpoint. - Exposing a public-facing REST API. - Writing webhooks or auth callback handlers for OAuth. - Having URLs not serving HTML, but other kinds of documents like PDFs or images. For these use cases, SolidStart provides a way to write these routes in a way that is easy to understand and maintain. API routes are just similar to other routes and follow the same filename conventions as [UI Routes](/solid-start/building-your-application/routing). The difference between API routes and UI routes is in what you should export from the file. UI routes export a default Solid component, while API Routes do not. Rather, they export functions that are named after the HTTP method that they handle. :::note API routes are prioritized over UI route alternatives. If you want to have them overlap at the same path remember to use `Accept` headers. Returning without a response in a `GET` route will fallback to UI route handling. ::: ## Writing an API route To write an API route, you can create a file in a directory. While you can name this directory anything, it is common to name it `api` to indicate that the routes in this directory are for handling API requests: ```tsx title=\"routes/api/test.ts\" export function GET() { // ... } export function POST() { // ... } export function PATCH() { // ... } export function DELETE() { // ... } ``` API routes get passed an `APIEvent` object as their first argument. This object contains: - `request`: [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) object representing the request sent by the client. - `params`: Object that contains the dynamic route parameters. For example, if the route is `/api/users/:id`, and the request is made to `/api/users/123`, then `params` will be `{ id: 123 }`. - `fetch`: An internal `fetch` function that can be used to make requests to other API routes without worrying about the `origin` of the URL. An API route is expected to return JSON or a `Response` object. In order to handle all methods, you can define a handler function that binds multiple methods to it: ```tsx title=\"routes/api/all.ts\" async function handler() { // ... } export const GET = handler; export const POST = handler; // ... ``` An example of an API route that returns products from a certain category and brand is shown below: ```tsx title=\"routes/api/product/[category]/[brand].ts\" import type { APIEvent } from \"@solidjs/start/server\"; import store from \"./store\"; export async function GET({ params }: APIEvent) { console.log(`Category: ${params.category}, Brand: ${params.brand}`); const products = await store.getProducts(params.category, params.brand); return products; } ``` ## Session management Since HTTP is a stateless protocol, you need to manage the state of the session on the server. For example, if you want to know who the user is, the most secure way of doing this is through the use of HTTP-only cookies. Cookies are a way to store data in the user's browser that persist in the browser between requests. The user's request is exposed through the `Request` object. Through parsing the [`Cookie`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cookie) header, the cookies can be accessed and any helpers from `vinxi/http` can be used to make that a bit easier. ```tsx import type { APIEvent } from \"@solidjs/start/server\"; import { getCookie } from \"vinxi/http\"; import store from \"./store\"; export async function GET(event: APIEvent) { const userId = getCookie(\"userId\"); if (!userId) { return new Response(\"Not logged in\", { status: 401 }); } const user = await store.getUser(event.params.userId); if (user.id !== userId) { return new Response(\"Not authorized\", { status: 403 }); } return user; } ``` In this example, you can see that the `userId` is read from the cookie and then used to look up the user in the store. For more information on how to use cookies for secure session management, read the [session documentation](/solid-start/advanced/session). ## Exposing a GraphQL API SolidStart makes it easy to [implement a GraphQL API](https://graphql.org/). GraphQL is a query language for APIs and a runtime for executing those queries by using a type system you define for your data. To implement a GraphQL API, you need to define a schema and resolvers. The `graphql` function takes a GraphQL schema and returns a function that can be used as an API route handler. First, to implement a GraphQL API, install the `graphql` library. Following that, you can implement your schema and resolvers in a file and then export a handler function that will be used as the API route: ```tsx title=\"routes/graphql.ts\" import { buildSchema, graphql } from \"graphql\"; import type { APIEvent } from \"@solidjs/start/server\"; // Define GraphQL Schema const schema = buildSchema(` type Message { message: String } type Query { hello(input: String): Message goodbye: String } `); // Define GraphQL Resolvers const rootValue = { hello: () =\u003e { return { message: \"Hello World\" }; }, goodbye: () =\u003e { return \"Goodbye\"; } }; // request handler const handler = async (event: APIEvent) =\u003e { // get request body const body = await new Response(event.request.body).json(); // pass query and save results const result = await graphql({ rootValue, schema, source: body.query }); // send query result return result; }; export const GET = handler; export const POST = handler; ``` ## Exposing a tRPC server route [tRPC](https://trpc.io/) is a modern TypeScript-first API framework that is designed to be easy to use and understand. To expose a tRPC server route, you need to write your router. Once you have written your router, you can put it in a separate file so that you can export the type for your client. ```tsx title=\"lib/router.ts\" import { initTRPC } from \"@trpc/server\"; import { wrap } from \"@decs/typeschema\"; import { string } from \"valibot\"; const t = initTRPC.create(); export const appRouter = t.router({ hello: t.procedure.input(wrap(string())).query(({ input }) =\u003e { return `hello ${input ?? \"world\"}`; }) }); export type AppRouter = typeof appRouter; ``` An example of a simple client that you can use to fetch data from your tRPC server is shown below: ```tsx title=\"lib/trpc.ts\" import { createTRPCProxyClient, httpBatchLink, loggerLink } from \"@trpc/client\"; import type { AppRouter } from \"./router\"; export const client = createTRPCProxyClient\u003cAppRouter\u003e({ links: [loggerLink(), httpBatchLink({ url: \"http://localhost:3000/api/trpc\" })] }); ``` Finally, you can use the `fetch` adapter to write an API route that acts as the tRPC server. ```tsx title=\"routes/api/trpc/[trpc].ts\" import { type APIEvent } from \"@solidjs/start/server\"; import { fetchRequestHandler } from \"@trpc/server/adapters/fetch\"; import { appRouter } from \"~/lib/router\"; const handler = (event: APIEvent) =\u003e fetchRequestHandler({ endpoint: \"/api/trpc\", req: event.request, router: appRouter, createContext: () =\u003e ({}) }); export const GET = handler; export const POST = handler; ``` To learn more about tRPC, you can read the [tRPC documentation](https://trpc.io/docs).", "term_freq": { "##": 4, "---": 2, "//": 12, "//developer": 2, "//github": 1, "//graphql": 1, "//localhost": 1, "//trpc": 2, "/api/trpc": 1, "/api/users/": 1, "/api/users/123": 1, "/router": 1, "/solid-start/advanced/session": 1, "/solid-start/building-your-application/routing": 1, "/store": 2, "123": 1, "3000/api/trpc": 1, "401": 1, "403": 1, "==": 1, "=\u003e": 6, "\u003e-": 2, "@decs/typeschema": 1, "@solidjs/start/server": 4, "@trpc/client": 1, "@trpc/server": 1, "@trpc/server/adapters/fetch": 1, "about": 2, "accept": 1, "accessed": 1, "acts": 1, "adapter": 1, "additional": 1, "after": 1, "all": 1, "alternatives": 1, "an": 10, "and": 15, "any": 1, "anything": 1, "api": 27, "api-routes": 1, "apievent": 9, "apis": 1, "approuter": 6, "are": 6, "argument": 1, "as": 5, "async": 4, "at": 1, "auth": 1, "authorized": 1, "await": 4, "be": 8, "below": 2, "between": 2, "binds": 1, "bit": 1, "body": 4, "brand": 5, "browser": 2, "buildschema": 2, "but": 1, "by": 3, "callback": 1, "callbacks": 1, "can": 15, "cases": 1, "category": 5, "certain": 1, "client": 4, "clients": 1, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/building-your-application/api-routes": 1, "common": 1, "component": 1, "console": 1, "const": 18, "contains": 2, "conventions": 1, "cookie": 2, "cookies": 4, "create": 3, "createcontext": 1, "createtrpcproxyclient": 1, "createtrpcproxyclient\u003capprouter\u003e": 1, "data": 4, "default": 1, "define": 5, "delete": 1, "description": 1, "designed": 1, "difference": 1, "directory": 3, "do": 1, "documentation": 2, "documents": 1, "doing": 1, "dynamic": 1, "easier": 1, "easy": 3, "endpoint": 2, "endpoints": 3, "event": 6, "example": 5, "executing": 1, "expected": 1, "export": 20, "expose": 2, "exposed": 1, "exposing": 4, "external": 1, "fallback": 1, "fetch": 4, "fetchrequesthandler": 2, "file": 4, "filename": 1, "finally": 1, "first": 2, "follow": 1, "following": 1, "for": 14, "framework": 1, "from": 20, "function": 12, "functions": 2, "generation": 1, "get": 9, "getcookie": 2, "getproducts": 1, "getuser": 1, "github-document": 1, "good": 1, "goodbye": 3, "graphql": 17, "handle": 3, "handler": 13, "handlers": 1, "handling": 2, "have": 2, "having": 1, "header": 1, "headers": 1, "hello": 5, "helpers": 1, "how": 1, "html": 1, "http": 5, "http-only": 1, "httpbatchlink": 2, "https": 6, "id": 3, "if": 5, "images": 1, "implement": 4, "import": 15, "in": 14, "include": 1, "indicate": 1, "information": 1, "inittrpc": 2, "input": 4, "install": 1, "integrations": 2, "internal": 1, "io/": 1, "io/docs": 1, "is": 16, "it": 5, "json": 2, "just": 1, "kinds": 1, "know": 1, "language": 1, "learn": 1, "lib/router": 1, "lib/trpc": 1, "library": 1, "like": 1, "links": 1, "log": 1, "logged": 1, "loggerlink": 2, "logic": 1, "look": 1, "made": 1, "maintain": 1, "make": 2, "makes": 1, "manage": 1, "management": 2, "mdx": 1, "message": 4, "method": 1, "methods": 3, "modern": 1, "more": 2, "most": 1, "mozilla": 2, "multiple": 1, "name": 2, "named": 1, "need": 4, "needed": 1, "new": 3, "not": 4, "note": 1, "oauth": 2, "object": 6, "of": 7, "on": 2, "once": 1, "or": 5, "order": 1, "org/": 1, "org/en-us/docs/web/api/request": 1, "org/en-us/docs/web/http/headers/cookie": 1, "origin": 1, "other": 3, "over": 1, "overlap": 1, "parameters": 1, "params": 8, "parsing": 1, "pass": 1, "passed": 1, "patch": 1, "path": 1, "pdf": 1, "pdfs": 1, "persist": 1, "post": 4, "prioritized": 1, "procedure": 1, "products": 3, "protocol": 1, "provides": 1, "public-facing": 1, "put": 1, "queries": 1, "query": 6, "rather": 1, "read": 3, "reasons": 1, "remember": 1, "representing": 1, "req": 1, "request": 10, "requests": 3, "resolvers": 3, "response": 5, "rest": 4, "result": 3, "results": 1, "return": 9, "returning": 1, "returns": 2, "rootvalue": 2, "route": 14, "router": 4, "routes": 16, "routes/api/all": 1, "routes/api/product/": 1, "routes/api/test": 1, "routes/api/trpc/": 1, "routes/graphql": 1, "runtime": 1, "same": 2, "save": 1, "schema": 6, "secure": 2, "see": 1, "send": 1, "sent": 1, "separate": 1, "server": 7, "server-side": 1, "serving": 1, "session": 4, "sessions": 1, "setup": 1, "share": 1, "should": 1, "shown": 2, "similar": 1, "simple": 1, "since": 1, "so": 1, "solid": 1, "solidstart": 3, "some": 1, "sometimes": 1, "source": 1, "state": 1, "stateless": 1, "status": 2, "store": 6, "string": 5, "system": 1, "tags": 1, "takes": 1, "that": 19, "the": 37, "their": 1, "them": 1, "then": 3, "there": 1, "these": 2, "they": 2, "third-party": 1, "this": 6, "those": 1, "through": 3, "title": 1, "title=": 7, "to": 35, "trpc": 12, "ts": 7, "tsx": 8, "type": 10, "typeof": 1, "typescript-first": 1, "ui": 6, "understand": 2, "up": 1, "url": 2, "urls": 1, "use": 7, "use_cases": 1, "used": 5, "user": 7, "userid": 6, "using": 1, "valibot": 1, "version": 1, "vinxi/http": 2, "want": 3, "wanting": 1, "way": 5, "webhooks": 2, "what": 1, "while": 3, "who": 1, "will": 3, "without": 2, "world": 2, "worrying": 1, "wrap": 2, "write": 5, "writing": 2, "written": 1, "you": 19, "your": 7, "~/lib/router": 1 }, "length": 1100 }, { "id": "ffc9900197d61058eee2cc41", "doc_id": "f0f790993228be6f44254e88", "title": "app-config", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/entrypoints/app-config.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/app-config.json", "content": "--- title: app.config.ts use_cases: 'initial setup, project configuration, build settings, deployment configuration' tags: - configuration - setup - app-config - defineconfig version: '1.0' description: \u003e- Configure your SolidStart app with app.config.ts. Central configuration file for Vite, Vinxi, and Nitro build settings. --- The `app.config.ts` is the root of every SolidStart app and the main point of configuration. This file exports a configuration for SolidStart, [Vinxi](https://vinxi.vercel.app/), [Vite](https://vitejs.dev) and [Nitro](https://nitro.build/). The easiest way to generate a configuration is to use the [`defineConfig`](/solid-start/reference/config/define-config) helper. Here [`defineConfig`](/solid-start/reference/config/define-config) is used to create a minimal configuration with default settings. ```tsx import { defineConfig } from \"@solidjs/start/config\"; export default defineConfig({}); ``` To see more configuration options, see [`defineConfig`](/solid-start/reference/config/define-config).", "term_freq": { "---": 2, "//github": 1, "//nitro": 1, "//vinxi": 1, "//vitejs": 1, "/solid-start/reference/config/define-config": 3, "\u003e-": 1, "@solidjs/start/config": 1, "and": 3, "app": 5, "app-config": 2, "app/": 1, "build": 2, "build/": 1, "central": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/entrypoints/app-config": 1, "config": 3, "configuration": 9, "configure": 1, "create": 1, "default": 2, "defineconfig": 6, "deployment": 1, "description": 1, "dev": 1, "easiest": 1, "every": 1, "export": 1, "exports": 1, "file": 2, "for": 2, "from": 1, "generate": 1, "github-document": 1, "helper": 1, "here": 1, "https": 4, "import": 1, "initial": 1, "is": 3, "main": 1, "mdx": 1, "minimal": 1, "more": 1, "nitro": 2, "of": 2, "options": 1, "point": 1, "project": 1, "root": 1, "see": 2, "settings": 3, "setup": 2, "solidstart": 3, "tags": 1, "the": 5, "this": 1, "title": 1, "to": 4, "ts": 3, "tsx": 1, "use": 1, "use_cases": 1, "used": 1, "vercel": 1, "version": 1, "vinxi": 2, "vite": 2, "way": 1, "with": 2, "your": 1 }, "length": 125 }, { "id": "9385428763295d87b7ba0d91", "doc_id": "d724c278e22c266a3588ade2", "title": "app", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/entrypoints/app.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/app.json", "content": "--- title: app.tsx use_cases: \u003e- routing setup, app structure, layout definition, navigation setup, entry point configuration tags: - routing - app - entry - layout - navigation - components version: '1.0' description: \u003e- Define your SolidStart app's entry point and routing structure. Set up navigation, layouts, and isomorphic application logic. --- The `App` component is the isomorphic (shared on server and browser) entry point into your application. This is where the code runs on both sides. This is like the classic entry point where you can define your router, and other top level components. ## Basic example (with routing) This is where routers setup navigation between the pages discovered by the [`FileRouter`](/solid-start/reference/routing/file-routes). ```tsx import { A, Router } from \"@solidjs/router\"; import { FileRoutes } from \"@solidjs/start/router\"; import { Suspense } from \"solid-js\"; export default function App() { return ( \u003cRouter root={(props) =\u003e ( \u003cA href=\"/\"\u003eIndex\u003c/A\u003e \u003cA href=\"/about\"\u003eAbout\u003c/A\u003e \u003cSuspense\u003e{props.children}\u003c/Suspense\u003e )} \u003e \u003cFileRoutes /\u003e \u003c/Router\u003e ); } ``` See a similar example in [StackBlitz](https://stackblitz.com/github/solidjs/solid-start/tree/main/examples/basic?file=src%2Fapp.tsx) ## Bare example (no routing) Since SolidStart does not come packaged with a router, you can simply return your template of choice: ```tsx export default function App() { return ( \u003cmain\u003e \u003ch1\u003eHello world!\u003c/h1\u003e \u003c/main\u003e ); } ``` See this example in [StackBlitz](https://stackblitz.com/github/solidjs/solid-start/tree/main/examples/bare?file=src%2Fapp.tsx)", "term_freq": { "##": 2, "---": 2, "//github": 1, "//stackblitz": 2, "/\u003e": 1, "/about": 1, "/solid-start/reference/routing/file-routes": 1, "\u003c/h1\u003e": 1, "\u003c/main\u003e": 1, "\u003c/router\u003e": 1, "\u003c/suspense\u003e": 1, "\u003ca": 2, "\u003cfileroutes": 1, "\u003ch1\u003ehello": 1, "\u003cmain\u003e": 1, "\u003crouter": 1, "\u003csuspense\u003e": 1, "=\u003e": 1, "\u003e-": 2, "\u003eabout\u003c/a\u003e": 1, "\u003eindex\u003c/a\u003e": 1, "@solidjs/router": 1, "@solidjs/start/router": 1, "and": 4, "app": 8, "application": 2, "bare": 1, "basic": 1, "between": 1, "both": 1, "browser": 1, "by": 1, "can": 2, "children": 1, "choice": 1, "classic": 1, "code": 1, "com/github/solidjs/solid-start/tree/main/examples/bare": 1, "com/github/solidjs/solid-start/tree/main/examples/basic": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/entrypoints/app": 1, "come": 1, "component": 1, "components": 2, "configuration": 1, "default": 2, "define": 2, "definition": 1, "description": 1, "discovered": 1, "does": 1, "entry": 5, "example": 4, "export": 2, "file=src%2fapp": 2, "filerouter": 1, "fileroutes": 1, "from": 3, "function": 2, "github-document": 1, "href=": 2, "https": 3, "import": 3, "in": 2, "into": 1, "is": 4, "isomorphic": 2, "layout": 2, "layouts": 1, "level": 1, "like": 1, "logic": 1, "mdx": 1, "navigation": 4, "no": 1, "not": 1, "of": 1, "on": 2, "other": 1, "packaged": 1, "pages": 1, "point": 4, "props": 2, "return": 3, "root=": 1, "router": 3, "routers": 1, "routing": 5, "runs": 1, "see": 2, "server": 1, "set": 1, "setup": 3, "shared": 1, "sides": 1, "similar": 1, "simply": 1, "since": 1, "solid-js": 1, "solidstart": 2, "stackblitz": 2, "structure": 2, "suspense": 1, "tags": 1, "template": 1, "the": 6, "this": 4, "title": 1, "top": 1, "tsx": 5, "up": 1, "use_cases": 1, "version": 1, "where": 3, "with": 2, "world": 1, "you": 2, "your": 4 }, "length": 201 }, { "id": "6aa8485f693dd1f2d4a56a39", "doc_id": "fee3fbf82a3ec907fd1b6bf3", "title": "Asset Imports | Remix", "url": "https://v2.remix.run/docs/file-conventions/asset-imports", "type": "html", "source": "remix:does", "path": "devour_data/docs/asset-imports---remix-fee3fbf8.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsAsset ImportsGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Asset URL Imports Any files inside the app folder can be imported into your modules. Remix will: Copy the file to your browser build directory Fingerprint the file for long-term caching Return the public URL to your module to be used while rendering It's most common for stylesheets but can be used for any file type with a defined loader. import type { LinksFunction } from \"@remix-run/node\"; // or cloudflare/deno import banner from \"./images/banner.jpg\"; import styles from \"./styles/app.css\"; export const links: LinksFunction = () =\u003e [ { rel: \"stylesheet\", href: styles }, ]; export default function Page() { return ( \u003cdiv\u003e \u003ch1\u003eSome Page\u003c/h1\u003e \u003cimg src={banner} /\u003e \u003c/div\u003e ); } © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_961\\\":-5,\\\"_962\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":960},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"docs/file-conventions/asset-imports.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"asset-url-imports\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#asset-url-imports\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eAsset URL Imports\\u003c/h1\\u003e\\\\n\\u003cp\\u003eAny files inside the \\u003ccode\\u003eapp\\u003c/code\\u003e folder can be imported into your modules. Remix will:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eCopy the file to your browser build directory\\u003c/li\\u003e\\\\n\\u003cli\\u003eFingerprint the file for long-term caching\\u003c/li\\u003e\\\\n\\u003cli\\u003eReturn the public URL to your module to be used while rendering\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eIt's most common for stylesheets but can be used for any file type with \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/main/packages/remix-dev/compiler/utils/loaders.ts\\\\\\\"\\u003ea defined loader\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinksFunction\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebanner\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./images/banner.jpg\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estyles\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./styles/app.css\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elinks\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinksFunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e { rel: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003estylesheet\\u003c/span\\u003e\\\\\\\", href: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estyles\\u003c/span\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e];\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ePage\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003eSome Page\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eimg\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esrc\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebanner\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\",\\\"docs/file-conventions/asset-imports\\\",\\\"headings\\\",[],[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#asset-url-imports\\\\\\": 1, "$\\": 1, "$rc": 3, "--base03": 1, "--base05": 1, "--base08": 10, "--base0a": 2, "--base0b": 4, "--base0d": 5, "--base0e": 14, "--base0f": 2, "-1\\\\\\": 1, "-5": 2, "/$": 1, "//": 1, "//github": 1, "//v2": 2, "/\u003e": 1, "/\\u003cspan": 2, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/images/banner": 2, "/styles/app": 2, "0===e": 1, "10": 44, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 1, "18": 1, "180": 1, "181": 2, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "1\\\\\\": 1, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 1, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 1, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 1, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "97": 1, "98": 1, "99": 1, "9\\\\\\": 1, "\u003c/div\u003e": 1, "\u003cdiv\u003e": 1, "\u003ch1\u003esome": 1, "\u003cimg": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 2, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 3, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 45, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 8, "\\n": 1, "\\u0026#x3c": 4, "\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003ecopy": 1, "\\u003c/span\\u003e": 2, "\\u003c/span\\u003e\\u003cspan": 1, "\\u003ca": 1, "\\u003ccode\\u003eapp\\u003c/code\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 26, "\\u003e": 14, "\\u003e//": 1, "\\u003e=\\u003c/span\\u003e": 1, "\\u003e=\\u003c/span\\u003e\\u003cspan": 1, "\\u003e=\\u003e\\u003c/span\\u003e": 1, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003easset": 1, "\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003e\\u003cspan": 1, "\\u003e\\u003cpre": 1, "\\u003e\\u003cspan": 6, "\\u003ea": 1, "\\u003ebanner\\u003c/span\\u003e": 1, "\\u003ebanner\\u003c/span\\u003e\\u003cspan": 1, "\\u003econst\\u003c/span\\u003e": 1, "\\u003edefault\\u003c/span\\u003e": 1, "\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eexport\\u003c/span\\u003e": 2, "\\u003efrom\\u003c/span\\u003e": 3, "\\u003efunction\\u003c/span\\u003e": 1, "\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eh1\\u003c/span\\u003e\\u003esome": 1, "\\u003eimg\\u003c/span\\u003e": 1, "\\u003eimport\\u003c/span\\u003e": 3, "\\u003elinks\\u003c/span\\u003e\\u003cspan": 1, "\\u003elinksfunction\\u003c/span\\u003e": 2, "\\u003epage\\u003c/span\\u003e": 1, "\\u003ereturn\\u003c/span\\u003e": 1, "\\u003esrc\\u003c/span\\u003e\\u003cspan": 1, "\\u003estyles\\u003c/span\\u003e": 2, "\\u003estylesheet\\u003c/span\\u003e\\\\\\": 1, "\\u003etype\\u003c/span\\u003e": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 32, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 152, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 1, "_958\\": 1, "_961\\": 1, "_962\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "all": 1, "an": 1, "and": 9, "any": 3, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 3, "approach": 1, "aria-hidden=\\\\\\": 1, "as": 3, "asked": 1, "asset": 5, "asset-url-imports\\\\\\": 1, "at": 1, "attrs\\": 1, "await\\": 1, "b=document": 1, "backend": 3, "banner": 2, "basename": 1, "be": 7, "been": 2, "before": 1, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 5, "build": 2, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 2, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "caching": 1, "caching\\u003c/li\\u003e\\\\n\\u003cli\\u003ereturn": 1, "can": 5, "catch": 1, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 18, "cli": 5, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cloudflare/deno": 1, "cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "code": 4, "codeblock-line\\\\\\": 17, "color": 39, "com/remix-run/remix/blob/main/packages/remix-dev/compiler/utils/loaders": 1, "common": 2, "community": 3, "community\\": 1, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 1, "const": 1, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "copy": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 16, "css\\": 1, "css\\u003c/span\\u003e\\\\\\": 1, "d=c": 2, "data": 16, "data-code-block=\\\\\\": 1, "data-lang=\\\\\\": 2, "data-line-number=\\\\\\": 17, "data-line-numbers=\\\\\\": 2, "data=": 1, "data\\": 2, "default": 1, "defer": 2, "defer\\": 1, "deferred": 1, "defined": 2, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "development": 3, "directory": 1, "directory\\u003c/li\\u003e\\\\n\\u003cli\\u003efingerprint": 1, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 1, "doc\\": 1, "docs/file-conventions/asset-imports": 1, "docs/file-conventions/asset-imports\\": 1, "docsasset": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "document": 1, "done": 1, "e--": 1, "e=0": 1, "else": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "everything": 1, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "export": 2, "extract": 2, "extract\\": 1, "f=a": 1, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 15, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 4, "files\\": 1, "fingerprint": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "folder": 2, "for": 12, "form": 11, "form\\": 1, "found": 3, "frequently": 1, "from": 9, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 2, "future": 4, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "handle": 2, "handle\\": 1, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "headers": 2, "headers\\": 1, "headings\\": 1, "help": 1, "here": 1, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href": 2, "href=\\\\\\": 2, "html": 1, "html\\": 1, "https": 3, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 1, "icon-link\\\\\\": 1, "id=\\\\\\": 1, "if": 6, "import": 8, "import\\\\\\": 1, "imported": 2, "imports": 6, "imports\\": 2, "imports\\u003c/h1\\u003e\\\\n\\u003cp\\u003eany": 1, "importsgetting": 1, "in": 6, "inc": 1, "index": 3, "initial": 1, "insertbefore": 1, "inside": 2, "integrating": 1, "interactions": 1, "into": 4, "introduction": 1, "is": 1, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 1, "iterative": 1, "javascript": 2, "javascript\\": 1, "jpg": 1, "jpg\\u003c/span\\u003e\\\\\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "key": 4, "know": 1, "lazy": 3, "learning": 1, "let": 3, "licensed": 1, "link": 2, "link\\": 1, "links": 5, "links\\": 2, "linksfunction": 2, "livereload": 2, "livereload\\": 1, "loader": 3, "loader\\": 1, "loader\\u003c/a\\u003e": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "long-term": 2, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 8, "module\\": 1, "moduleaction": 2, "modules": 8, "modules\\": 3, "most": 3, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 1, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 3, "null": 1, "number": 1, "of": 3, "on": 2, "once": 1, "one": 1, "open": 1, "optimization": 2, "optimization\\": 1, "or": 3, "order\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "page": 1, "page\u003c/h1\u003e": 1, "page\\u0026#x3c": 1, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "positions": 2, "postcss": 2, "postcss\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "public": 2, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "react": 8, "react-router-scroll-positions": 1, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regular": 3, "rel": 2, "related": 1, "released": 2, "remix": 12, "remix\\": 2, "removechild": 2, "removeitem": 1, "rendering": 1, "rendering\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eit": 1, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 2, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 12, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/file-conventions/asset-imports": 1, "run\\": 1, "running": 1, "runtimes": 3, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "server": 15, "server\\": 3, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "simplifying": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "spa": 3, "src=": 1, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 39, "styles": 2, "stylesheet": 1, "stylesheets": 2, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 3, "support\\": 1, "tabindex=\\\\\\": 1, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "the": 14, "this": 2, "through": 1, "title\\": 1, "tls": 2, "tls\\": 1, "to": 16, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 6, "true\\\\\\": 3, "try": 1, "ts": 2, "ts\\": 1, "ts\\\\\\": 1, "tsx\\\\\\": 2, "tutorial": 3, "type": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 2, "ui\\": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 4, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 4, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 41, "variables": 2, "variables\\": 1, "view": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "way": 1, "when": 1, "while": 3, "why": 1, "will": 4, "window": 11, "with": 6, "writes": 2, "writes\\": 1, "you": 5, "your": 9, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 4247 }, { "id": "7f6eb7fd2550e50c62e21ffe", "doc_id": "fee3fbf82a3ec907fd1b6bf3", "title": "Asset Imports | Remix", "url": "https://v2.remix.run/docs/file-conventions/asset-imports", "type": "html", "source": "remix:routes", "path": "devour_data/docs/asset-imports---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsAsset ImportsGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Asset URL Imports Any files inside the app folder can be imported into your modules. Remix will: Copy the file to your browser build directory Fingerprint the file for long-term caching Return the public URL to your module to be used while rendering It's most common for stylesheets but can be used for any file type with a defined loader. import type { LinksFunction } from \"@remix-run/node\"; // or cloudflare/deno import banner from \"./images/banner.jpg\"; import styles from \"./styles/app.css\"; export const links: LinksFunction = () =\u003e [ { rel: \"stylesheet\", href: styles }, ]; export default function Page() { return ( \u003cdiv\u003e \u003ch1\u003eSome Page\u003c/h1\u003e \u003cimg src={banner} /\u003e \u003c/div\u003e ); } © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_961\\\":-5,\\\"_962\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":960},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"docs/file-conventions/asset-imports.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"asset-url-imports\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#asset-url-imports\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eAsset URL Imports\\u003c/h1\\u003e\\\\n\\u003cp\\u003eAny files inside the \\u003ccode\\u003eapp\\u003c/code\\u003e folder can be imported into your modules. Remix will:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eCopy the file to your browser build directory\\u003c/li\\u003e\\\\n\\u003cli\\u003eFingerprint the file for long-term caching\\u003c/li\\u003e\\\\n\\u003cli\\u003eReturn the public URL to your module to be used while rendering\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eIt's most common for stylesheets but can be used for any file type with \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/main/packages/remix-dev/compiler/utils/loaders.ts\\\\\\\"\\u003ea defined loader\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinksFunction\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebanner\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./images/banner.jpg\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estyles\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./styles/app.css\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elinks\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinksFunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e { rel: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003estylesheet\\u003c/span\\u003e\\\\\\\", href: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estyles\\u003c/span\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e];\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ePage\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003eSome Page\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eimg\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esrc\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebanner\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\",\\\"docs/file-conventions/asset-imports\\\",\\\"headings\\\",[],[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#asset-url-imports\\\\\\": 1, "$\\": 1, "$rc": 3, "--base03": 1, "--base05": 1, "--base08": 10, "--base0a": 2, "--base0b": 4, "--base0d": 5, "--base0e": 14, "--base0f": 2, "-1\\\\\\": 1, "-5": 2, "/$": 1, "//": 1, "//github": 1, "//v2": 2, "/\u003e": 1, "/\\u003cspan": 2, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/images/banner": 2, "/styles/app": 2, "0===e": 1, "10": 44, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 1, "18": 1, "180": 1, "181": 2, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "1\\\\\\": 1, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 1, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 1, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 1, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "97": 1, "98": 1, "99": 1, "9\\\\\\": 1, "\u003c/div\u003e": 1, "\u003cdiv\u003e": 1, "\u003ch1\u003esome": 1, "\u003cimg": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 2, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 3, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 45, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 8, "\\n": 1, "\\u0026#x3c": 4, "\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003ecopy": 1, "\\u003c/span\\u003e": 2, "\\u003c/span\\u003e\\u003cspan": 1, "\\u003ca": 1, "\\u003ccode\\u003eapp\\u003c/code\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 26, "\\u003e": 14, "\\u003e//": 1, "\\u003e=\\u003c/span\\u003e": 1, "\\u003e=\\u003c/span\\u003e\\u003cspan": 1, "\\u003e=\\u003e\\u003c/span\\u003e": 1, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003easset": 1, "\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003e\\u003cspan": 1, "\\u003e\\u003cpre": 1, "\\u003e\\u003cspan": 6, "\\u003ea": 1, "\\u003ebanner\\u003c/span\\u003e": 1, "\\u003ebanner\\u003c/span\\u003e\\u003cspan": 1, "\\u003econst\\u003c/span\\u003e": 1, "\\u003edefault\\u003c/span\\u003e": 1, "\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eexport\\u003c/span\\u003e": 2, "\\u003efrom\\u003c/span\\u003e": 3, "\\u003efunction\\u003c/span\\u003e": 1, "\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eh1\\u003c/span\\u003e\\u003esome": 1, "\\u003eimg\\u003c/span\\u003e": 1, "\\u003eimport\\u003c/span\\u003e": 3, "\\u003elinks\\u003c/span\\u003e\\u003cspan": 1, "\\u003elinksfunction\\u003c/span\\u003e": 2, "\\u003epage\\u003c/span\\u003e": 1, "\\u003ereturn\\u003c/span\\u003e": 1, "\\u003esrc\\u003c/span\\u003e\\u003cspan": 1, "\\u003estyles\\u003c/span\\u003e": 2, "\\u003estylesheet\\u003c/span\\u003e\\\\\\": 1, "\\u003etype\\u003c/span\\u003e": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 32, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 152, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 1, "_958\\": 1, "_961\\": 1, "_962\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "all": 1, "an": 1, "and": 9, "any": 3, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 3, "approach": 1, "aria-hidden=\\\\\\": 1, "as": 3, "asked": 1, "asset": 5, "asset-url-imports\\\\\\": 1, "at": 1, "attrs\\": 1, "await\\": 1, "b=document": 1, "backend": 3, "banner": 2, "basename": 1, "be": 7, "been": 2, "before": 1, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 5, "build": 2, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 2, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "caching": 1, "caching\\u003c/li\\u003e\\\\n\\u003cli\\u003ereturn": 1, "can": 5, "catch": 1, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 18, "cli": 5, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cloudflare/deno": 1, "cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "code": 4, "codeblock-line\\\\\\": 17, "color": 39, "com/remix-run/remix/blob/main/packages/remix-dev/compiler/utils/loaders": 1, "common": 2, "community": 3, "community\\": 1, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 1, "const": 1, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "copy": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 16, "css\\": 1, "css\\u003c/span\\u003e\\\\\\": 1, "d=c": 2, "data": 16, "data-code-block=\\\\\\": 1, "data-lang=\\\\\\": 2, "data-line-number=\\\\\\": 17, "data-line-numbers=\\\\\\": 2, "data=": 1, "data\\": 2, "default": 1, "defer": 2, "defer\\": 1, "deferred": 1, "defined": 2, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "development": 3, "directory": 1, "directory\\u003c/li\\u003e\\\\n\\u003cli\\u003efingerprint": 1, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 1, "doc\\": 1, "docs/file-conventions/asset-imports": 1, "docs/file-conventions/asset-imports\\": 1, "docsasset": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "document": 1, "done": 1, "e--": 1, "e=0": 1, "else": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "everything": 1, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "export": 2, "extract": 2, "extract\\": 1, "f=a": 1, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 15, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 4, "files\\": 1, "fingerprint": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "folder": 2, "for": 12, "form": 11, "form\\": 1, "found": 3, "frequently": 1, "from": 9, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 2, "future": 4, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "handle": 2, "handle\\": 1, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "headers": 2, "headers\\": 1, "headings\\": 1, "help": 1, "here": 1, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href": 2, "href=\\\\\\": 2, "html": 1, "html\\": 1, "https": 3, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 1, "icon-link\\\\\\": 1, "id=\\\\\\": 1, "if": 6, "import": 8, "import\\\\\\": 1, "imported": 2, "imports": 6, "imports\\": 2, "imports\\u003c/h1\\u003e\\\\n\\u003cp\\u003eany": 1, "importsgetting": 1, "in": 6, "inc": 1, "index": 3, "initial": 1, "insertbefore": 1, "inside": 2, "integrating": 1, "interactions": 1, "into": 4, "introduction": 1, "is": 1, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 1, "iterative": 1, "javascript": 2, "javascript\\": 1, "jpg": 1, "jpg\\u003c/span\\u003e\\\\\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "key": 4, "know": 1, "lazy": 3, "learning": 1, "let": 3, "licensed": 1, "link": 2, "link\\": 1, "links": 5, "links\\": 2, "linksfunction": 2, "livereload": 2, "livereload\\": 1, "loader": 3, "loader\\": 1, "loader\\u003c/a\\u003e": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "long-term": 2, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 8, "module\\": 1, "moduleaction": 2, "modules": 8, "modules\\": 3, "most": 3, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 1, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 3, "null": 1, "number": 1, "of": 3, "on": 2, "once": 1, "one": 1, "open": 1, "optimization": 2, "optimization\\": 1, "or": 3, "order\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "page": 1, "page\u003c/h1\u003e": 1, "page\\u0026#x3c": 1, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "positions": 2, "postcss": 2, "postcss\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "public": 2, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "react": 8, "react-router-scroll-positions": 1, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regular": 3, "rel": 2, "related": 1, "released": 2, "remix": 12, "remix\\": 2, "removechild": 2, "removeitem": 1, "rendering": 1, "rendering\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eit": 1, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 2, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 12, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/file-conventions/asset-imports": 1, "run\\": 1, "running": 1, "runtimes": 3, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "server": 15, "server\\": 3, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "simplifying": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "spa": 3, "src=": 1, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 39, "styles": 2, "stylesheet": 1, "stylesheets": 2, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 3, "support\\": 1, "tabindex=\\\\\\": 1, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "the": 14, "this": 2, "through": 1, "title\\": 1, "tls": 2, "tls\\": 1, "to": 16, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 6, "true\\\\\\": 3, "try": 1, "ts": 2, "ts\\": 1, "ts\\\\\\": 1, "tsx\\\\\\": 2, "tutorial": 3, "type": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 2, "ui\\": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 4, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 4, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 41, "variables": 2, "variables\\": 1, "view": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "way": 1, "when": 1, "while": 3, "why": 1, "will": 4, "window": 11, "with": 6, "writes": 2, "writes\\": 1, "you": 5, "your": 9, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 4247 }, { "id": "d88608b90a756cbed085af4b", "doc_id": "2cc7f00810938f542dc05a19", "title": "attr", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/attr.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/attr.json", "content": "--- title: 'attr:*' use_cases: \u003e- web components, custom elements, forcing attributes, html attributes, dom properties tags: - attributes - web-components - dom - props - typescript - custom-elements version: '1.0' description: \u003e- Force props as HTML attributes instead of properties in SolidJS. Essential for Web Components and custom element attribute handling. --- Forces the prop to be treated as an attribute instead of a property. Useful for Web Components where you want to set attributes. ```tsx \u003cmy-element attr:status={props.status} /\u003e ``` :::note[Strong-Typing Custom Attributes] Type definitions are required when using TypeScript. See the[TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples. :::", "term_freq": { "---": 2, "//github": 1, "/\u003e": 1, "/configuration/typescript#forcing-properties-and-custom-attributes": 1, "\u003cmy-element": 1, "\u003e-": 2, "an": 1, "and": 1, "are": 1, "as": 2, "attr": 3, "attribute": 2, "attributes": 6, "be": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/jsx-attributes/attr": 1, "components": 3, "custom": 3, "custom-elements": 1, "definitions": 1, "description": 1, "dom": 2, "element": 1, "elements": 1, "essential": 1, "examples": 1, "for": 3, "force": 1, "forces": 1, "forcing": 1, "github-document": 1, "handling": 1, "html": 2, "https": 1, "in": 1, "instead": 2, "mdx": 1, "note": 1, "of": 2, "page": 1, "prop": 1, "properties": 2, "property": 1, "props": 3, "required": 1, "see": 1, "set": 1, "solidjs": 1, "status": 1, "status=": 1, "strong-typing": 1, "tags": 1, "the": 2, "title": 1, "to": 2, "treated": 1, "tsx": 1, "type": 1, "typescript": 3, "use_cases": 1, "useful": 1, "using": 1, "version": 1, "want": 1, "web": 3, "web-components": 1, "when": 1, "where": 1, "you": 1 }, "length": 98 }, { "id": "71868c4cd0dd3d8769cb948f", "doc_id": "6b7d98ddbd3dcfe6040e6bae", "title": "auth", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/advanced/auth.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/auth.json", "content": "--- title: Auth use_cases: \u003e- user authentication, protected routes, authorization checks, secure data access, login systems tags: - authentication - authorization - security - protected - login - users version: '1.0' description: \u003e- Implement authentication and protected routes in SolidStart. Secure sensitive resources and handle user authorization properly. --- Server functions can be used to protect sensitive resources like user data. ```tsx \"use server\" async function getPrivatePosts() { const user = await getUser() if(!user) { return null // or throw an error } return db.getPosts({ userId: user.id, private: true }) } ``` The `getUser` function can be [implemented using sessions](/solid-start/advanced/session). ## Protected Routes Routes can be protected by checking the user or session object during data fetching. This example uses [Solid Router](/solid-router). ```tsx const getPrivatePosts = query(async function() { \"use server\" const user = await getUser() if(!user) { throw redirect(\"/login\"); } return db.getPosts({ userId: user.id, private: true }) }) export default function Page() { const posts = createAsync(() =\u003e getPrivatePosts(), { deferStream: true }); } ``` Once the user hits this route, the router will attempt to fetch `getPrivatePosts` data. If the user is not signed in, `getPrivatePosts` will throw and the router will redirect to the login page. To prevent errors when opening the page directly, set `deferStream: true`. This would ensure `getPrivatePosts` resolves before the page loads since server-side redirects cannot occur after streaming has started.", "term_freq": { "##": 1, "---": 2, "//": 1, "//github": 1, "/login": 1, "/solid-router": 1, "/solid-start/advanced/session": 1, "=\u003e": 1, "\u003e-": 2, "access": 1, "after": 1, "an": 1, "and": 3, "async": 2, "attempt": 1, "auth": 2, "authentication": 3, "authorization": 3, "await": 2, "be": 3, "before": 1, "by": 1, "can": 3, "cannot": 1, "checking": 1, "checks": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/advanced/auth": 1, "const": 4, "createasync": 1, "data": 4, "db": 2, "default": 1, "deferstream": 2, "description": 1, "directly": 1, "during": 1, "ensure": 1, "error": 1, "errors": 1, "example": 1, "export": 1, "fetch": 1, "fetching": 1, "function": 4, "functions": 1, "getposts": 2, "getprivateposts": 6, "getuser": 3, "github-document": 1, "handle": 1, "has": 1, "hits": 1, "https": 1, "id": 2, "if": 3, "implement": 1, "implemented": 1, "in": 2, "is": 1, "like": 1, "loads": 1, "login": 3, "mdx": 1, "not": 1, "null": 1, "object": 1, "occur": 1, "once": 1, "opening": 1, "or": 2, "page": 4, "posts": 1, "prevent": 1, "private": 2, "properly": 1, "protect": 1, "protected": 5, "query": 1, "redirect": 2, "redirects": 1, "resolves": 1, "resources": 2, "return": 3, "route": 1, "router": 3, "routes": 4, "secure": 2, "security": 1, "sensitive": 2, "server": 3, "server-side": 1, "session": 1, "sessions": 1, "set": 1, "signed": 1, "since": 1, "solid": 1, "solidstart": 1, "started": 1, "streaming": 1, "systems": 1, "tags": 1, "the": 9, "this": 3, "throw": 3, "title": 1, "to": 4, "true": 4, "tsx": 2, "use": 2, "use_cases": 1, "used": 1, "user": 12, "userid": 2, "users": 1, "uses": 1, "using": 1, "version": 1, "when": 1, "will": 3, "would": 1 }, "length": 217 }, { "id": "9debfd3137f77cd9cb1baa43", "doc_id": "b6d63b32b22f3b1c68fd354a", "title": "aws-via-flightcontrol", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deployment-options/aws-via-flightcontrol.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/aws-via-flightcontrol.json", "content": "--- title: AWS via Flightcontrol order: 1 mainNavExclude: true use_cases: \u003e- aws deployment, automated deployments, continuous integration, github integration, cloud hosting tags: - aws - deployment - flightcontrol - automation - github - hosting version: '1.0' description: \u003e- Deploy Solid apps to AWS with Flightcontrol's automated platform featuring GitHub integration and continuous deployment. --- [Flightcontrol](https://www.flightcontrol.dev/) is a platform that fully automates deployments to Amazon Web Services (AWS). For more information on Flightcontrol's capabilities, you can [visit their docs](https://www.flightcontrol.dev/docs). ## Connecting to a git repository Flightcontrol offers a GitHub integration, leveraging its continuous development actions. To get started with Flightcontrol's GitHub integration, you'll first need to log in or sign up to the Flightcontrol platform. After you're logged in, simply link your GitHub account to Flightcontrol. Once connected, Flightcontrol will take care of the rest. It automatically detects any new pushes to your specified GitHub branches and builds your project. The build process uses the commands in your `package.json` file and adheres to the settings that you have configured in Flightcontrol. No additional setup is needed. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=h2Uk4xoB8fTpLOTOHIb6wQ\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=h2Uk4xoB8fTpLOTOHIb6wQ\u0026type=embed\" /\u003e ## Using the dashboard 1. In the Flightcontrol dashboard, create a new project and select the repository you wish to use as the source. 2. Choose the GUI as your configuration type. 3. Add your Solid site as a static site by clicking the \"Add a Static Site\" option. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=5bE5kc7N_kOSfyHtasalrg\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=5bE5kc7N_kOSfyHtasalrg\u0026type=embed\" /\u003e 5. Label your output directory as `dist`. 6. If your project requires environment variables, add them in the designated area: \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=HwJhZ7ZJ6sYkj883rwkgOA\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=HwJhZ7ZJ6sYkj883rwkgOA\u0026type=embed\" /\u003e 7. Finally, connect your AWS account to complete the setup. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=S5LOC3JVjl2zcynaHreL0g\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=S5LOC3JVjl2zcynaHreL0g\u0026type=embed\" /\u003e ## Using code 1. Navigate to your Flightcontrol dashboard and initiate a new project. Choose the repository you'd like to use as the source. 2. Opt for the `flightcontrol.json` as your configuration type. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=7XLTmlgp3VJa8tDKobokjA\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=7XLTmlgp3VJa8tDKobokjA\u0026type=embed\" /\u003e 3. Add a new file named `flightcontrol.json` at the root of your selected repository. Below is an example configuration: ```json frame=\"terminal\" { \"$schema\": \"https://app.flightcontrol.dev/schema.json\", \"environments\": [ { \"id\": \"production\", \"name\": \"Production\", \"region\": \"us-west-2\", \"source\": { \"branch\": \"main\" }, \"services\": [ { \"id\": \"my-static-solid\", \"buildType\": \"nixpacks\", \"name\": \"My static solid site\", \"type\": \"static\", \"domain\": \"solid.yourapp.com\", \"outputDirectory\": \"dist\", \"singlePageApp\": true } ] } ] } ```", "term_freq": { "##": 3, "$schema": 1, "---": 2, "//app": 11, "//github": 1, "//www": 2, "/\u003e": 5, "\u003ceraserlink": 5, "\u003e-": 2, "account": 2, "actions": 1, "add": 4, "additional": 1, "adheres": 1, "after": 1, "amazon": 1, "an": 1, "and": 5, "any": 1, "apps": 1, "area": 1, "as": 6, "at": 1, "automated": 2, "automates": 1, "automatically": 1, "automation": 1, "aws": 6, "aws-via-flightcontrol": 1, "below": 1, "branch": 1, "branches": 1, "build": 1, "builds": 1, "buildtype": 1, "by": 1, "can": 1, "capabilities": 1, "care": 1, "choose": 2, "clicking": 1, "cloud": 1, "code": 1, "com": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/deployment-options/aws-via-flightcontrol": 1, "commands": 1, "complete": 1, "configuration": 3, "configured": 1, "connect": 1, "connected": 1, "connecting": 1, "continuous": 3, "create": 1, "dashboard": 3, "deploy": 1, "deployment": 3, "deployments": 2, "description": 1, "designated": 1, "detects": 1, "dev/": 1, "dev/docs": 1, "dev/schema": 1, "development": 1, "directory": 1, "dist": 2, "docs": 1, "domain": 1, "elements=5be5kc7n_kosfyhtasalrg": 1, "elements=5be5kc7n_kosfyhtasalrg\u0026type=embed": 1, "elements=7xltmlgp3vja8tdkobokja": 1, "elements=7xltmlgp3vja8tdkobokja\u0026type=embed": 1, "elements=h2uk4xob8ftplotohib6wq": 1, "elements=h2uk4xob8ftplotohib6wq\u0026type=embed": 1, "elements=hwjhz7zj6sykj883rwkgoa": 1, "elements=hwjhz7zj6sykj883rwkgoa\u0026type=embed": 1, "elements=s5loc3jvjl2zcynahrel0g": 1, "elements=s5loc3jvjl2zcynahrel0g\u0026type=embed": 1, "environment": 1, "environments": 1, "eraser": 10, "example": 1, "featuring": 1, "file": 2, "finally": 1, "first": 1, "flightcontrol": 18, "for": 2, "frame=": 1, "fully": 1, "get": 1, "git": 1, "github": 7, "github-document": 1, "gui": 1, "have": 1, "hosting": 2, "href=": 5, "https": 14, "id": 2, "if": 1, "in": 6, "information": 1, "initiate": 1, "integration": 5, "io/workspace/w9y9pnvjwsqdcepnteoe": 5, "io/workspace/w9y9pnvjwsqdcepnteoe/preview": 5, "is": 3, "it": 1, "its": 1, "json": 5, "label": 1, "leveraging": 1, "like": 1, "link": 1, "ll": 1, "log": 1, "logged": 1, "main": 1, "mainnavexclude": 1, "mdx": 1, "more": 1, "my": 1, "my-static-solid": 1, "name": 2, "named": 1, "navigate": 1, "need": 1, "needed": 1, "new": 4, "nixpacks": 1, "no": 1, "of": 2, "offers": 1, "on": 1, "once": 1, "opt": 1, "option": 1, "or": 1, "order": 1, "output": 1, "outputdirectory": 1, "package": 1, "platform": 3, "preview=": 5, "process": 1, "production": 2, "project": 4, "pushes": 1, "re": 1, "region": 1, "repository": 4, "requires": 1, "rest": 1, "root": 1, "select": 1, "selected": 1, "services": 2, "settings": 1, "setup": 2, "sign": 1, "simply": 1, "singlepageapp": 1, "site": 4, "solid": 4, "source": 3, "specified": 1, "started": 1, "static": 4, "tags": 1, "take": 1, "terminal": 1, "that": 2, "the": 17, "their": 1, "them": 1, "title": 1, "to": 13, "true": 2, "type": 3, "up": 1, "us-west-2": 1, "use": 2, "use_cases": 1, "uses": 1, "using": 2, "variables": 1, "version": 1, "via": 1, "visit": 1, "web": 1, "will": 1, "wish": 1, "with": 2, "you": 6, "your": 12, "yourapp": 1 }, "length": 409 }, { "id": "3ce26946b7da22fdf45396c4", "doc_id": "bc495943c2738f3828e2e649", "title": "aws-via-sst", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deployment-options/aws-via-sst.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/aws-via-sst.json", "content": "--- title: AWS via SST order: 1 mainNavExclude: true use_cases: \u003e- serverless deployment, aws lambda, container deployment, cloud infrastructure, production deployment tags: - aws - sst - serverless - lambda - deployment - containers version: '1.0' description: \u003e- Deploy SolidStart apps to AWS Lambda or containers using SST framework with streamlined configuration and deployment. --- [SST](https://sst.dev/) is a framework for deploying applications to any cloud provider. It has a built-in way to deploy SolidStart apps to AWS Lambda. For additional details, you can [visit their docs](https://sst.dev/docs/). ## Quick start 1. [Create a SolidStart app](/solid-start/getting-started). 2. In your project, init SST. ```package-exec sst@latest init ``` 3. This will detect your SolidStart app and ask you to update your `app.config.ts`. ```ts title=\"app.config.ts\" server: { preset: \"aws-lambda-streaming\" } ``` 4. When you are ready, you can deploy your app using: ```package-exec sst@latest deploy --stage production ``` You can [read the full tutorial on the SST docs](https://sst.dev/docs/start/aws/solid). ## Deploy to a Container You can also deploy your SolidStart app to a [container](https://sst.dev/docs/start/aws/solid#containers) using SST.", "term_freq": { "##": 2, "---": 2, "--stage": 1, "//github": 1, "//sst": 4, "/solid-start/getting-started": 1, "\u003e-": 2, "additional": 1, "also": 1, "and": 2, "any": 1, "app": 6, "applications": 1, "apps": 2, "are": 1, "ask": 1, "aws": 5, "aws-lambda-streaming": 1, "aws-via-sst": 1, "built-in": 1, "can": 4, "cloud": 2, "com/solidjs/solid-docs/blob/head/src/routes/guides/deployment-options/aws-via-sst": 1, "config": 2, "configuration": 1, "container": 3, "containers": 2, "create": 1, "deploy": 6, "deploying": 1, "deployment": 5, "description": 1, "details": 1, "detect": 1, "dev/": 1, "dev/docs/": 1, "dev/docs/start/aws/solid": 1, "dev/docs/start/aws/solid#containers": 1, "docs": 2, "for": 2, "framework": 2, "full": 1, "github-document": 1, "has": 1, "https": 5, "in": 1, "infrastructure": 1, "init": 2, "is": 1, "it": 1, "lambda": 4, "mainnavexclude": 1, "mdx": 1, "on": 1, "or": 1, "order": 1, "package-exec": 2, "preset": 1, "production": 2, "project": 1, "provider": 1, "quick": 1, "read": 1, "ready": 1, "server": 1, "serverless": 2, "solidstart": 5, "sst": 7, "sst@latest": 2, "start": 1, "streamlined": 1, "tags": 1, "the": 2, "their": 1, "this": 1, "title": 1, "title=": 1, "to": 7, "true": 1, "ts": 3, "tutorial": 1, "update": 1, "use_cases": 1, "using": 3, "version": 1, "via": 1, "visit": 1, "way": 1, "when": 1, "will": 1, "with": 1, "you": 6, "your": 5 }, "length": 172 }, { "id": "42414aa991662e39510cdffc", "doc_id": "b4049256af08e2b53e24d3d4", "title": "base", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/reference/meta/base.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/base.json", "content": "--- title: Base order: 5 use_cases: \u003e- setting base url, relative urls, external resources, multi-page apps, cdn assets tags: - base - url - meta - head - routing version: '1.0' description: \u003e- Set the base URL for all relative URLs in your Solid app with the Base component. Essential for apps with complex routing or external resources. --- `Base` is a component that specifies the base URL for all relative URLs in the document. This provides a way to define the [`base`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) element of your document's `head`. ```tsx twoslash import { Base } from \"@solidjs/meta\"; \u003cBase target=\"_blank\" href=\"https://docs.solidjs.com/\" /\u003e; ``` ## Usage ### Adding `base` tag ```tsx twoslash import { MetaProvider, Base } from \"@solidjs/meta\"; export default function Root() { return ( \u003cMetaProvider\u003e \u003cBase target=\"_blank\" href=\"https://docs.solidjs.com/\" /\u003e \u003c/MetaProvider\u003e ); } ```", "term_freq": { "##": 1, "###": 1, "---": 2, "//developer": 1, "//docs": 2, "//github": 1, "/\u003e": 2, "\u003c/metaprovider\u003e": 1, "\u003cbase": 2, "\u003cmetaprovider\u003e": 1, "\u003e-": 2, "@solidjs/meta": 2, "_blank": 2, "adding": 1, "all": 2, "app": 1, "apps": 2, "assets": 1, "base": 12, "cdn": 1, "com/": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-meta/reference/meta/base": 1, "complex": 1, "component": 2, "default": 1, "define": 1, "description": 1, "document": 2, "element": 1, "essential": 1, "export": 1, "external": 2, "for": 3, "from": 2, "function": 1, "github-document": 1, "head": 2, "href=": 2, "https": 4, "import": 2, "in": 2, "is": 1, "mdx": 1, "meta": 1, "metaprovider": 1, "mozilla": 1, "multi-page": 1, "of": 1, "or": 1, "order": 1, "org/en-us/docs/web/html/element/base": 1, "provides": 1, "relative": 3, "resources": 2, "return": 1, "root": 1, "routing": 2, "set": 1, "setting": 1, "solid": 1, "solidjs": 2, "specifies": 1, "tag": 1, "tags": 1, "target=": 2, "that": 1, "the": 5, "this": 1, "title": 1, "to": 1, "tsx": 2, "twoslash": 2, "url": 4, "urls": 3, "usage": 1, "use_cases": 1, "version": 1, "way": 1, "with": 2, "your": 2 }, "length": 133 }, { "id": "2efc11de25fe376c10ed4f22", "doc_id": "6f674d87ba3b4a2ebc9587f1", "title": "basics", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/components/basics.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/basics.json", "content": "--- title: Basics order: 4 use_cases: \u003e- starting new projects, creating components, understanding component structure, building ui blocks, component organization tags: - components - basics - jsx - lifecycle - imports - structure version: '1.0' description: \u003e- Learn Solid component fundamentals: creating reusable UI blocks, component trees, lifecycles, and proper import/export patterns. --- Components are the building blocks of Solid applications. These units are reusable and can be combined to create more complex applications. Components are functions that return [JSX](/concepts/understanding-jsx) elements: ```tsx function MyComponent() { return \u003cdiv\u003eHello World\u003c/div\u003e; } ``` A component can be as simple as a single element or as complex as a full page. They can also be nested within each other to create more intricate applications: ```tsx function App() { return ( \u003cdiv\u003e \u003cMyComponent /\u003e \u003c/div\u003e ); } ``` :::note Component names must start with a capital letter to distinguish them from regular HTML elements. Otherwise, they won't be recognized as components. ::: ## Component trees A web page is displayed by rendering a component tree, which is a hierarchical structure of components. At the top of the tree is the primary application component, which is the root of the tree. Child components are nested within the primary component, and those components can have their own child components. This nesting can continue as needed. A simple application may have a component tree that looks like this: ```json App // primary application component └── MyComponent // child component ``` When an application grows, the component tree can become more complex. For example, a more complex application may have a component tree that looks like this: ```json App ├── Header ├── Sidebar ├── Content │ ├── Post │ │ ├── PostHeader │ │ ├── PostContent │ │ └── PostFooter │ ├── Post │ │ ├── PostHeader │ │ ├── PostContent │ │ └── PostFooter │ └── Post │ ├── ... └── Footer ``` In nesting components, you can create a hierarchy of components that can be reused throughout the application. This allows for a more modular approach to building applications, as components can be reused in different contexts. ## Component lifecycles Components have a lifecycle that defines how they are created, updated, and destroyed. A Solid component's lifecycle is different from other frameworks, as it is tied to the [concept of reactivity](/concepts/intro-to-reactivity). Where frameworks may re-run components on every state change, a Solid component's lifecycle is tied to its initial run. What this means is that a Solid component is only run once, when it is first rendered into the DOM. After that, the component is not re-run, even if the application's state changes. When the Solid component renders, it sets up a reactive system that monitors for state changes. When a state change occurs, the component will update the relevant areas without re-running the entire component. By bypassing the full component lifecycle on every state change, Solid has a more predictable behavior compared to frameworks that re-run functions on every update. Since the component's logic is not continuously visited, getting this setup right is important when working with Solid. ### Initialization \u0026 configuration When a component is first rendered into the DOM, the component function is executed. This is where you will set up the component's state and side-effects. This includes setting up [signals](/concepts/signals), [stores](/concepts/stores), [effects](/concepts/effects), and other reactive elements. Since the logic in the component function is not continuously visited, it is important to set up the component correctly from the outset. Each component instance is independent of other instances, meaning that each component has its own state and side-effects. Through establishing proper dependencies, you can ensure that the component is set up correctly. This allows for components to be reused in different contexts without affecting each other. ```tsx function MyComponent() { const [count, setCount] = createSignal(0); console.log(count()); return ( \u003cdiv\u003e \u003cp\u003eCount: {count()}\u003c/p\u003e \u003cbutton onClick={() =\u003e setCount((prev) =\u003e prev + 1)}\u003eIncrement\u003c/button\u003e \u003c/div\u003e ); } ``` When this component is rendered into the DOM, the function body is executed. This includes creating the `count` signal and executing the `console.log(count())` statement, which will log the current value of `count` to the console. In addition, the component's JSX is returned, which will be rendered into the DOM. After the component is rendered, the `console.log` statement will not be executed again, even if the component's state changes. However, because the component's JSX is reactive, each press of the button will update the DOM with the new value of `count`. In essence, Solid splits the concerns: 1. The initial setup logic, which is executed once when the component is rendered. 2. The reactive logic, which is executed when the component's state changes. ### Conditional rendering To display different content based on state or other criteria, you can use conditional rendering. Given that the component function is only executed once, conditional statements must be placed within the return statement. This design ensures that conditional paths are clear and immediately understood. ```tsx function MyComponent() { const [count, setCount] = createSignal(0); return ( \u003cdiv\u003e {count() \u003e 5 ? ( \u003cdiv\u003eCount limit reached\u003c/div\u003e ) : ( \u003c\u003e \u003cp\u003eCount: {count()}\u003c/p\u003e \u003cbutton onClick={() =\u003e setCount((prev) =\u003e prev + 1)}\u003e Increment \u003c/button\u003e \u003c/\u003e )} \u003c/div\u003e ); } ``` This example uses a [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator) to conditionally render different content based on the value of `count`. When `count` is greater than 5, the component will display `\"Count limit reached\"`. Otherwise, it will display the current count with an increment button. :::note To simplify conditional rendering, Solid provides built-in [control-flow](/concepts/control-flow/conditional-rendering) components like [`Show`](/concepts/control-flow/conditional-rendering#show), which create a more readable conditional rendering experience. ```tsx function MyComponent() { const [count, setCount] = createSignal(0) return ( \u003cdiv\u003e \u003cShow when={count() \u003e 5} fallback={ \u003c\u003e \u003cp\u003eCount: {count()}\u003c/p\u003e \u003cbutton onClick={() =\u003e setCount((prev) =\u003e prev+1)}\u003eIncrement\u003c/button\u003e \u003c/\u003e } \u003e \u003cdiv\u003eCount limit reached\u003c/div\u003e \u003c/Show\u003e \u003c/div\u003e ) } ``` ::: ## Importing and exporting For components to be reusable, they need to be exported from one module and imported into another. This allows for components to be shared and used where needed. ### Exporting components Once defined, a component can be [exported](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) to make it available for use in other parts of your application. There are two ways to export a component: [named exports](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#named_exports) and [default exports](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#default_exports). **Named export:** Named exports allow for multiple components to be exported from a single file. To export a component, you must use the `export` keyword before the function definition or specify the name of the component to export in curly braces (`{}`). ```typescript export function MyComponent() { return \u003cdiv\u003eHello World\u003c/div\u003e } // or function MyComponent() { return \u003cdiv\u003eHello World\u003c/div\u003e } export { MyComponent } ``` **Default export:** Default exports specify a single component to export from a file. This is done by using the `default` keyword. ```typescript // MyComponent.ts export default function MyComponent() { return \u003cdiv\u003eHello World\u003c/div\u003e } ``` ### Importing components To use a component in another file or component, it must be [imported](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import). To import a component, you must specify the path to the file containing the component and the name of the component to import. **Named import:** When importing a named export, you must specify the name of the component to import in curly braces (`{}`). ```tsx // App.ts import { MyComponent } from \"./MyComponent\"; function App() { return ( \u003cdiv\u003e \u003cMyComponent /\u003e \u003c/div\u003e ); } ``` This is the preferred way to import components, as it allows for better code readability and maintainability. Additionally, it allows for multiple components to be imported from the same file. ```tsx // App.ts import { MyComponent, MyOtherComponent } from \"./MyComponent\"; function App() { return ( \u003cdiv\u003e \u003cMyComponent /\u003e \u003cMyOtherComponent /\u003e \u003c/div\u003e ); } ``` **Default import:** To import a default export, you must specify the name of the component to import. ```tsx // App.ts import MyComponent from \"./MyComponent\"; function App() { return ( \u003cdiv\u003e \u003cMyComponent /\u003e \u003c/div\u003e ); } ``` ### Importing Solid and its utilities To use Solid, you must import the Solid library. The reactive primitives and utilities are exported from Solid's main module. ```tsx import { createSignal } from \"solid-js\"; ``` However, some of Solid's utilities are exported from their own modules. ```tsx import { createStore } from \"solid-js/store\"; ``` To see a full list of Solid's utilities, the Reference Tab in the sidebar provides the API Documentation.", "term_freq": { "##": 3, "###": 5, "**": 4, "**default": 2, "**named": 2, "---": 2, "//": 7, "//developer": 5, "//github": 1, "/\u003e": 5, "/concepts/control-flow/conditional-rendering": 1, "/concepts/control-flow/conditional-rendering#show": 1, "/concepts/effects": 1, "/concepts/intro-to-reactivity": 1, "/concepts/signals": 1, "/concepts/stores": 1, "/concepts/understanding-jsx": 1, "/mycomponent": 3, "\u003c/\u003e": 2, "\u003c/button\u003e": 1, "\u003c/div\u003e": 7, "\u003c/p\u003e": 3, "\u003c/show\u003e": 1, "\u003c\u003e": 2, "\u003cbutton": 3, "\u003cdiv\u003e": 7, "\u003cdiv\u003ecount": 2, "\u003cdiv\u003ehello": 4, "\u003cmycomponent": 4, "\u003cmyothercomponent": 1, "\u003cp\u003ecount": 3, "\u003cshow": 1, "=\u003e": 6, "\u003e-": 2, "\u003eincrement\u003c/button\u003e": 2, "addition": 1, "additionally": 1, "affecting": 1, "after": 2, "again": 1, "allow": 1, "allows": 5, "also": 1, "an": 2, "and": 17, "another": 2, "api": 1, "app": 9, "application": 8, "applications": 4, "approach": 1, "are": 9, "areas": 1, "as": 9, "at": 1, "available": 1, "based": 2, "basics": 3, "be": 17, "because": 1, "become": 1, "before": 1, "behavior": 1, "better": 1, "blocks": 3, "body": 1, "braces": 2, "building": 3, "built-in": 1, "button": 2, "by": 3, "bypassing": 1, "can": 12, "capital": 1, "change": 3, "changes": 4, "child": 3, "clear": 1, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/concepts/components/basics": 1, "combined": 1, "compared": 1, "complex": 4, "component": 54, "components": 23, "concept": 1, "concerns": 1, "conditional": 6, "conditionally": 1, "configuration": 1, "console": 4, "const": 3, "containing": 1, "content": 3, "contexts": 2, "continue": 1, "continuously": 2, "control-flow": 1, "correctly": 2, "count": 17, "create": 4, "created": 1, "createsignal": 4, "createstore": 1, "creating": 3, "criteria": 1, "curly": 2, "current": 2, "default": 5, "defined": 1, "defines": 1, "definition": 1, "dependencies": 1, "description": 1, "design": 1, "destroyed": 1, "different": 5, "display": 3, "displayed": 1, "distinguish": 1, "documentation": 1, "dom": 5, "done": 1, "each": 5, "effects": 1, "element": 1, "elements": 3, "ensure": 1, "ensures": 1, "entire": 1, "essence": 1, "establishing": 1, "even": 2, "every": 3, "example": 2, "executed": 6, "executing": 1, "experience": 1, "export": 12, "exported": 5, "exporting": 2, "exports": 4, "fallback=": 1, "file": 5, "first": 2, "footer": 1, "for": 10, "frameworks": 3, "from": 14, "full": 3, "function": 16, "functions": 2, "fundamentals": 1, "getting": 1, "github-document": 1, "given": 1, "greater": 1, "grows": 1, "has": 2, "have": 4, "header": 1, "hierarchical": 1, "hierarchy": 1, "how": 1, "however": 2, "html": 1, "https": 6, "if": 2, "immediately": 1, "import": 14, "import/export": 1, "important": 2, "imported": 3, "importing": 4, "imports": 1, "in": 11, "includes": 2, "increment": 2, "independent": 1, "initial": 2, "initialization": 1, "instance": 1, "instances": 1, "into": 5, "intricate": 1, "is": 32, "it": 9, "its": 3, "json": 2, "jsx": 4, "keyword": 2, "learn": 1, "letter": 1, "library": 1, "lifecycle": 5, "lifecycles": 2, "like": 3, "limit": 3, "list": 1, "log": 4, "logic": 4, "looks": 2, "main": 1, "maintainability": 1, "make": 1, "may": 3, "mdx": 1, "meaning": 1, "means": 1, "modular": 1, "module": 2, "modules": 1, "monitors": 1, "more": 7, "mozilla": 5, "multiple": 2, "must": 8, "mycomponent": 13, "myothercomponent": 1, "name": 4, "named": 3, "names": 1, "need": 1, "needed": 2, "nested": 2, "nesting": 2, "new": 2, "not": 4, "note": 2, "occurs": 1, "of": 18, "on": 5, "once": 4, "onclick=": 3, "one": 1, "only": 2, "operator": 1, "or": 5, "order": 1, "org/en-us/docs/web/javascript/reference/operators/conditional_operator": 1, "org/en-us/docs/web/javascript/reference/statements/export": 1, "org/en-us/docs/web/javascript/reference/statements/export#default_exports": 1, "org/en-us/docs/web/javascript/reference/statements/export#named_exports": 1, "org/en-us/docs/web/javascript/reference/statements/import": 1, "organization": 1, "other": 7, "otherwise": 2, "outset": 1, "own": 3, "page": 2, "parts": 1, "path": 1, "paths": 1, "patterns": 1, "placed": 1, "post": 3, "postcontent": 2, "postfooter": 2, "postheader": 2, "predictable": 1, "preferred": 1, "press": 1, "prev": 5, "prev+1": 1, "primary": 3, "primitives": 1, "projects": 1, "proper": 2, "provides": 2, "re-run": 3, "re-running": 1, "reached": 1, "reached\u003c/div\u003e": 2, "reactive": 5, "reactivity": 1, "readability": 1, "readable": 1, "recognized": 1, "reference": 1, "regular": 1, "relevant": 1, "render": 1, "rendered": 6, "rendering": 5, "renders": 1, "return": 13, "returned": 1, "reusable": 3, "reused": 3, "right": 1, "root": 1, "run": 2, "same": 1, "see": 1, "set": 3, "setcount": 6, "sets": 1, "setting": 1, "setup": 2, "shared": 1, "show": 1, "side-effects": 2, "sidebar": 2, "signal": 1, "signals": 1, "simple": 2, "simplify": 1, "since": 2, "single": 3, "solid": 16, "solid-js": 1, "solid-js/store": 1, "some": 1, "specify": 5, "splits": 1, "start": 1, "starting": 1, "state": 10, "statement": 3, "statements": 1, "stores": 1, "structure": 3, "system": 1, "tab": 1, "tags": 1, "ternary": 1, "than": 1, "that": 13, "the": 73, "their": 2, "them": 1, "there": 1, "these": 1, "they": 4, "this": 16, "those": 1, "through": 1, "throughout": 1, "tied": 2, "title": 1, "to": 33, "top": 1, "tree": 6, "trees": 2, "ts": 4, "tsx": 10, "two": 1, "typescript": 2, "ui": 2, "understanding": 1, "understood": 1, "units": 1, "up": 5, "update": 3, "updated": 1, "use": 5, "use_cases": 1, "used": 1, "uses": 1, "using": 1, "utilities": 4, "value": 3, "version": 1, "visited": 2, "way": 1, "ways": 1, "web": 1, "what": 1, "when": 11, "when=": 1, "where": 3, "which": 7, "will": 8, "with": 4, "within": 3, "without": 2, "won": 1, "working": 1, "world\u003c/div\u003e": 4, "you": 9, "your": 1, "│": 16, "└──": 5, "├──": 10 }, "length": 1292 }, { "id": "db642490bae652b22490d876", "doc_id": "35c7dd3c3cad02e34780262a", "title": "batch", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/batch.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/batch.json", "content": "--- title: batch use_cases: \u003e- performance optimization, multiple signal updates, reducing re-renders, bulk state changes, avoiding unnecessary recalculations tags: - performance - optimization - signals - batching - updates version: '1.0' description: \u003e- Batch multiple signal updates in SolidJS to improve performance by reducing recalculations. Essential for optimizing complex state changes. --- ```ts import { batch } from \"solid-js\" function batch\u003cT\u003e(fn: () =\u003e T): T ``` `batch` is a low-level API that batches updates together. More precisely, `batch(fn)` holds the execution of downstream computations during the `fn` block, executing them all together once the block `fn` returns. Thus, instead of a downstream computation executing after every dependency update, it will update just once at the end of the batch. Batching improves performance by avoiding unnecessary recalculation. Suppose you have a downstream memo `down` that depends on multiple upstream signals `up1`, `up2`, and `up3`: ```ts import { createSignal, createMemo, createEffect } from \"solid-js\" const [up1, setUp1] = createSignal(1) const [up2, setUp2] = createSignal(2) const [up3, setUp3] = createSignal(3) const down = createMemo(() =\u003e up1() + up2() + up3()) // For illustration, monitor when `down` gets recomputed: createEffect(() =\u003e console.log(down())) // outputs 6 ``` If you directly update all of the upstream signals outside of batch mode, then `down` will recompute every time. ```ts setUp1(4) // recomputes down, outputs 9 setUp2(5) // recomputes down, outputs 12 setUp3(6) // recomputes down, outputs 15 ``` If instead you update the upstream signals within a `batch`, then `down` will update only once at the end: ```ts batch(() =\u003e { setUp1(10) // doesn't update down yet setUp2(10) // doesn't update down yet setUp3(10) // doesn't update down yet }) // recomputes down, outputs 30 ``` The impact is even more dramatic if you have *m* downstream computations (memos, effects, etc.) that each depends on *n* upstream signals. Without batching, modifying all *n* upstream signals would cause *m n* updates to the downstream computations. With batching, modifying all *n* upstream signals would cause *m* updates to the downstream computations. Given that each update takes at least *n* time (just to read the upstream signals), this cost savings can be significant. Batching is also especially helpful when the downstream effects include DOM updates, which can be expensive. Solid uses `batch` internally to automatically batch updates for you in a few cases: * Within [`createEffect`](/reference/basic-reactivity/create-effect) and [`onMount`](/reference/lifecycle/on-mount) (unless they are outside a [root](/reference/reactive-utilities/create-root)) * Within the [setter of a store](/reference/store-utilities/create-store#setter) (which can update several properties at once) * Within array methods (e.g. `Array.prototype.splice`) of a [mutable store](/reference/store-utilities/create-mutable) (which can update several elements at once) These save you from having to use `batch` yourself in many cases. For the most part, automatic batching should be transparent to you, because accessing a signal or memo will cause it to update if it is out of date (as of Solid 1.4). For example: ```ts batch(() =\u003e { setUp1(11) // doesn't update down yet setUp2(11) // doesn't update down yet setUp3(11) // doesn't update down yet console.log(down()) // recomputes down, outputs 33 setUp1(12) // doesn't update down yet setUp2(12) // doesn't update down yet setUp3(12) // doesn't update down yet }) // recomputes down, outputs 36 ``` You can think of `batch(fn)` as setting a global \"batch mode\" variable, calling the function `fn`, and then restoring the global variable to its previous value. This means that you can nest `batch` calls, and they will form one big batch. It also means that, if `fn` is asynchronous, only the updates before the first `await` will be batched.", "term_freq": { "*m": 1, "*m*": 2, "*n*": 4, "---": 2, "//": 17, "//github": 1, "/reference/basic-reactivity/create-effect": 1, "/reference/lifecycle/on-mount": 1, "/reference/reactive-utilities/create-root": 1, "/reference/store-utilities/create-mutable": 1, "/reference/store-utilities/create-store#setter": 1, "10": 3, "11": 3, "12": 4, "15": 1, "30": 1, "33": 1, "36": 1, "=\u003e": 5, "\u003e-": 2, "accessing": 1, "after": 1, "all": 4, "also": 2, "and": 4, "api": 1, "are": 1, "array": 2, "as": 2, "asynchronous": 1, "at": 5, "automatic": 1, "automatically": 1, "avoiding": 2, "await": 1, "batch": 18, "batch\u003ct\u003e": 1, "batched": 1, "batches": 1, "batching": 6, "be": 4, "because": 1, "before": 1, "big": 1, "block": 2, "bulk": 1, "by": 2, "calling": 1, "calls": 1, "can": 6, "cases": 2, "cause": 3, "changes": 2, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/batch": 1, "complex": 1, "computation": 1, "computations": 4, "console": 2, "const": 4, "cost": 1, "createeffect": 3, "creatememo": 2, "createsignal": 4, "date": 1, "dependency": 1, "depends": 2, "description": 1, "directly": 1, "doesn": 9, "dom": 1, "down": 22, "downstream": 7, "dramatic": 1, "during": 1, "each": 2, "effects": 2, "elements": 1, "end": 2, "especially": 1, "essential": 1, "etc": 1, "even": 1, "every": 2, "example": 1, "executing": 2, "execution": 1, "expensive": 1, "few": 1, "first": 1, "fn": 7, "for": 5, "form": 1, "from": 3, "function": 2, "gets": 1, "github-document": 1, "given": 1, "global": 2, "have": 2, "having": 1, "helpful": 1, "holds": 1, "https": 1, "if": 5, "illustration": 1, "impact": 1, "import": 2, "improve": 1, "improves": 1, "in": 3, "include": 1, "instead": 2, "internally": 1, "is": 5, "it": 4, "its": 1, "just": 2, "least": 1, "log": 2, "low-level": 1, "many": 1, "mdx": 1, "means": 2, "memo": 2, "memos": 1, "methods": 1, "mode": 2, "modifying": 2, "monitor": 1, "more": 2, "most": 1, "multiple": 3, "mutable": 1, "n*": 1, "nest": 1, "of": 10, "on": 2, "once": 5, "one": 1, "only": 2, "onmount": 1, "optimization": 2, "optimizing": 1, "or": 1, "out": 1, "outputs": 7, "outside": 2, "part": 1, "performance": 4, "precisely": 1, "previous": 1, "properties": 1, "prototype": 1, "re-renders": 1, "read": 1, "recalculation": 1, "recalculations": 2, "recompute": 1, "recomputed": 1, "recomputes": 6, "reducing": 2, "restoring": 1, "returns": 1, "root": 1, "save": 1, "savings": 1, "setter": 1, "setting": 1, "setup1": 5, "setup2": 5, "setup3": 5, "several": 2, "should": 1, "signal": 3, "signals": 8, "significant": 1, "solid": 2, "solid-js": 2, "solidjs": 1, "splice": 1, "state": 2, "store": 2, "suppose": 1, "tags": 1, "takes": 1, "that": 6, "the": 19, "them": 1, "then": 3, "these": 1, "they": 2, "think": 1, "this": 2, "thus": 1, "time": 2, "title": 1, "to": 9, "together": 2, "transparent": 1, "ts": 5, "unless": 1, "unnecessary": 2, "up1": 3, "up2": 3, "up3": 3, "update": 18, "updates": 9, "upstream": 7, "use": 1, "use_cases": 1, "uses": 1, "value": 1, "variable": 2, "version": 1, "when": 2, "which": 3, "will": 6, "with": 1, "within": 4, "without": 1, "would": 2, "yet": 9, "you": 9, "yourself": 1 }, "length": 567 }, { "id": "41d5bf8da8ee3f92f166e8de", "doc_id": "fd9e8f5b126f3e53bf0d69e8", "title": "bool", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/bool.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/bool.json", "content": "--- title: 'bool:*' use_cases: \u003e- web components, custom elements, conditional attributes, boolean attributes, dynamic attribute presence tags: - attributes - web-components - boolean - conditional - dynamic version: '1.0' description: \u003e- Control attribute presence with bool:* directive in SolidJS. Add or remove attributes dynamically based on truthy/falsy values for web components. --- `bool:*` controls the presence of an attribute in an element. When the value is `truthy` it adds the `attribute` to the element. Alternatively, when the value is `falsy` it removes the `attribute` from the element. This attribute is most useful for Web Components. ```tsx \u003cmy-element bool:status={prop.value} /\u003e ``` ```tsx // Assuming `prop.value` is `truthy`, then it becomes \u003cmy-element status /\u003e // And when `falsy`, then it becomes \u003cmy-element /\u003e ``` :::note[Strong-Typing Custom Boolean Attributes] Type definitions are required when using TypeScript. See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples. :::", "term_freq": { "---": 2, "//": 2, "//github": 1, "/\u003e": 3, "/configuration/typescript#forcing-properties-and-custom-attributes": 1, "\u003cmy-element": 3, "\u003e-": 2, "add": 1, "adds": 1, "alternatively": 1, "an": 2, "and": 1, "are": 1, "assuming": 1, "attribute": 6, "attributes": 5, "based": 1, "becomes": 2, "bool": 5, "boolean": 3, "com/solidjs/solid-docs/blob/head/src/routes/reference/jsx-attributes/bool": 1, "components": 3, "conditional": 2, "control": 1, "controls": 1, "custom": 2, "definitions": 1, "description": 1, "directive": 1, "dynamic": 2, "dynamically": 1, "element": 3, "elements": 1, "examples": 1, "falsy": 2, "for": 3, "from": 1, "github-document": 1, "https": 1, "in": 2, "is": 4, "it": 4, "mdx": 1, "most": 1, "note": 1, "of": 1, "on": 1, "or": 1, "page": 1, "presence": 3, "prop": 2, "remove": 1, "removes": 1, "required": 1, "see": 1, "solidjs": 1, "status": 1, "status=": 1, "strong-typing": 1, "tags": 1, "the": 8, "then": 2, "this": 1, "title": 1, "to": 1, "truthy": 2, "truthy/falsy": 1, "tsx": 2, "type": 1, "typescript": 2, "use_cases": 1, "useful": 1, "using": 1, "value": 4, "values": 1, "version": 1, "web": 3, "web-components": 1, "when": 4, "with": 1 }, "length": 143 }, { "id": "3ab1a538ecebca7eb12852fc", "doc_id": "ddb677f6b517a0ef90c1e7c6", "title": "cache", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/cache.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/cache.json", "content": "--- title: cache isDeprecated: true use_cases: \u003e- api calls, data fetching, deduplication, preloading routes, caching responses, preventing waterfalls tags: - cache - deprecated - data-fetching - deduplication - preload version: '1.0' description: \u003e- Deprecated caching API for deduplicating requests and preloading data. Use query instead for better performance and invalidation. --- :::caution[Deprecation Warning] This API is deprecated since `v0.15.0` of Solid Router. Use [query](/solid-router/reference/data-apis/query) instead. It will be removed in an upcoming release. ::: `cache` is a [higher-order function](https://en.wikipedia.org/wiki/Higher-order_function) designed to create a new function with the same signature as the function passed to it. When this newly created function is called for the first time with a specific set of arguments, the original function is run, and its return value is stored in a cache and returned to the caller of the created function. The next time the created function is called with the same arguments (as long as the cache is still valid), it will return the cached value instead of re-executing the original function. :::note `cache` can be defined anywhere and then used inside your components with [`createAsync`](/solid-router/reference/data-apis/create-async). However, using `cache` directly in [`createResource`](/reference/basic-reactivity/create-resource) will not work since the fetcher is not reactive and will not invalidate properly. ::: ## Usage ```js const getUser = query( (id, options = {}) =\u003e fetch(`/api/users/${id}?summary=${options.summary || false}`).then((r) =\u003e r.json() ), \"usersById\" ); getUser(123); // Causes a GET request to /api/users/123?summary=false getUser(123); // Does not cause a GET request getUser(123, { summary: true }); // Causes a GET request to /api/users/123?summary=true setTimeout(() =\u003e getUser(123, { summary: true }), 999000); // Eventually causes another GET request to /api/users/123?summary=true ``` ### With preload functions Using it with a [preload function](/solid-router/reference/preload-functions/preload): ```js import { lazy } from \"solid-js\"; import { Route } from \"@solidjs/router\"; import { getUser } from ... // the cache function const User = lazy(() =\u003e import(\"./pages/users/[id].js\")); // preload function function preloadUser({params, location}) { void getUser(params.id) } // Pass it in the route definition \u003cRoute path=\"/users/:id\" component={User} preload={preloadUser} /\u003e; ``` ### Inside a route's component Using it inside a route's component: ```jsx // pages/users/[id].js import { getUser } from ... // the cache function export default function User(props) { const user = createAsync(() =\u003e getUser(props.params.id)); return \u003ch1\u003e{user().name}\u003c/h1\u003e; } ``` ## Cache function capabilities `cache` accomplishes the following: 1. Deduping on the server for the lifetime of the request. 2. Preloading the cache in the browser - this lasts 5 seconds. When a route is preloaded on hover or when preload is called when entering a route it will make sure to dedupe calls. 3. A reactive refetch mechanism based on key. This prevents routes that are not new from retriggering on action revalidation. 4. Serve as a back/forward cache for browser navigation for up to 5 minutes. Any user based navigation or link click bypasses it. Upon revalidation or new fetch the cache is updated. ## Cache keys To ensure that the cache keys are consistent and unique, arguments are deterministically serialized using JSON.stringify. Before serialization, key/value pairs in objects are sorted so that the order of properties does not affect the serialization. For instance, both `{ name: 'Ryan', awesome: true }` and `{ awesome: true, name: 'Ryan' }` will serialize to the same string so that they produce the same cache key. ## Return value The return value is a `CachedFunction`, a function that has the same signature as the function you passed to `cache`. This cached function stores the return value using the cache key. Under most circumstances, this temporarily prevents the passed function from running with the same arguments, even if the created function is called repeatedly. ## Arguments | argument | type | description | | -------- | ----------------------- | ------------------------------------------------------------------------- | | `fn` | `(...args: any) =\u003e any` | A function whose return value you'd like to be cached. | | `name`\\* | string | Any arbitrary string that you'd like to use as the rest of the cache key. | \\*Since the internal cache is shared by all the functions using `cache`, the string should be unique for each function passed to `cache`. If the same key is used with multiple functions, one function might return the cached result of the other. ## Methods ### `.key` and `.keyFor` Cached functions provide `.key` and `.keyFor`, are useful when retrieving the keys used in cases involving invalidation: ```ts let id = 5; getUser.key; // returns \"users\" getUser.keyFor(id); // returns \"users[5]\" ``` ### `revalidate` The cache can be revalidated using the `revalidate` method or the `revalidate` keys that are set on the response from the actions. If the entire key is passed, it will invalidate all entries for the cache (ie. `users` in the example above). If only a single entry needs to be invalidated, `keyFor` is provided. To revalidate everything in the cache, pass `undefined` as the key.", "term_freq": { "##": 6, "###": 4, "---": 2, "--------": 1, "-----------------------": 1, "-------------------------------------------------------------------------": 1, "//": 11, "//en": 1, "//github": 1, "/\u003e": 1, "/api/users/$": 1, "/api/users/123": 3, "/pages/users/": 1, "/reference/basic-reactivity/create-resource": 1, "/solid-router/reference/data-apis/create-async": 1, "/solid-router/reference/data-apis/query": 1, "/solid-router/reference/preload-functions/preload": 1, "/users/": 1, "123": 4, "15": 1, "999000": 1, "\u003c/h1\u003e": 1, "\u003ch1\u003e": 1, "\u003croute": 1, "=\u003e": 6, "\u003e-": 2, "@solidjs/router": 1, "\\*": 1, "\\*since": 1, "above": 1, "accomplishes": 1, "action": 1, "actions": 1, "affect": 1, "all": 2, "an": 1, "and": 10, "another": 1, "any": 4, "anywhere": 1, "api": 3, "arbitrary": 1, "are": 6, "args": 1, "argument": 1, "arguments": 5, "as": 7, "awesome": 2, "back/forward": 1, "based": 2, "be": 6, "before": 1, "better": 1, "both": 1, "browser": 2, "by": 1, "bypasses": 1, "cache": 27, "cached": 5, "cachedfunction": 1, "caching": 2, "called": 4, "caller": 1, "calls": 2, "can": 2, "capabilities": 1, "cases": 1, "cause": 1, "causes": 3, "caution": 1, "circumstances": 1, "click": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/data-apis/cache": 1, "component": 2, "component=": 1, "components": 1, "consistent": 1, "const": 3, "create": 1, "createasync": 2, "created": 4, "createresource": 1, "data": 2, "data-fetching": 1, "dedupe": 1, "deduping": 1, "deduplicating": 1, "deduplication": 2, "default": 1, "defined": 1, "definition": 1, "deprecated": 3, "deprecation": 1, "description": 2, "designed": 1, "deterministically": 1, "directly": 1, "does": 2, "each": 1, "ensure": 1, "entering": 1, "entire": 1, "entries": 1, "entry": 1, "even": 1, "eventually": 1, "everything": 1, "example": 1, "export": 1, "false": 1, "fetch": 2, "fetcher": 1, "fetching": 1, "first": 1, "fn": 1, "following": 1, "for": 9, "from": 7, "function": 23, "functions": 4, "get": 4, "getuser": 11, "github-document": 1, "has": 1, "higher-order": 1, "hover": 1, "however": 1, "https": 2, "id": 9, "ie": 1, "if": 4, "import": 5, "in": 9, "inside": 3, "instance": 1, "instead": 3, "internal": 1, "invalidate": 2, "invalidated": 1, "invalidation": 2, "involving": 1, "is": 17, "isdeprecated": 1, "it": 9, "its": 1, "js": 4, "json": 2, "jsx": 1, "key": 10, "key/value": 1, "keyfor": 4, "keys": 4, "lasts": 1, "lazy": 2, "let": 1, "lifetime": 1, "like": 2, "link": 1, "location": 1, "long": 1, "make": 1, "mdx": 1, "mechanism": 1, "method": 1, "methods": 1, "might": 1, "minutes": 1, "most": 1, "multiple": 1, "name": 4, "navigation": 2, "needs": 1, "new": 3, "newly": 1, "next": 1, "not": 6, "note": 1, "objects": 1, "of": 8, "on": 5, "one": 1, "only": 1, "options": 2, "or": 4, "order": 1, "org/wiki/higher-order_function": 1, "original": 2, "other": 1, "pages/users/": 1, "pairs": 1, "params": 3, "pass": 2, "passed": 5, "path=": 1, "performance": 1, "preload": 5, "preload=": 1, "preloaded": 1, "preloading": 3, "preloaduser": 2, "preventing": 1, "prevents": 2, "produce": 1, "properly": 1, "properties": 1, "props": 2, "provide": 1, "provided": 1, "query": 3, "re-executing": 1, "reactive": 2, "refetch": 1, "release": 1, "removed": 1, "repeatedly": 1, "request": 5, "requests": 1, "response": 1, "responses": 1, "rest": 1, "result": 1, "retrieving": 1, "retriggering": 1, "return": 8, "returned": 1, "returns": 2, "revalidate": 4, "revalidated": 1, "revalidation": 2, "route": 6, "router": 1, "routes": 2, "run": 1, "running": 1, "ryan": 2, "same": 7, "seconds": 1, "serialization": 2, "serialize": 1, "serialized": 1, "serve": 1, "server": 1, "set": 2, "settimeout": 1, "shared": 1, "should": 1, "signature": 2, "since": 2, "single": 1, "so": 2, "solid": 1, "solid-js": 1, "sorted": 1, "specific": 1, "still": 1, "stored": 1, "stores": 1, "string": 4, "stringify": 1, "summary": 3, "summary=$": 1, "summary=false": 1, "summary=true": 2, "sure": 1, "tags": 1, "temporarily": 1, "that": 7, "the": 55, "then": 2, "they": 1, "this": 6, "time": 2, "title": 1, "to": 16, "true": 5, "ts": 1, "type": 1, "undefined": 1, "under": 1, "unique": 2, "up": 1, "upcoming": 1, "updated": 1, "upon": 1, "usage": 1, "use": 3, "use_cases": 1, "used": 3, "useful": 1, "user": 6, "users": 3, "usersbyid": 1, "using": 7, "v0": 1, "valid": 1, "value": 6, "version": 1, "void": 1, "warning": 1, "waterfalls": 1, "when": 5, "whose": 1, "wikipedia": 1, "will": 7, "with": 8, "work": 1, "you": 3, "your": 1, "||": 1 }, "length": 770 }, { "id": "a5eefbdf64f7f7cadaeda8d3", "doc_id": "73229d38f5739dd0b21cb8f9", "title": "catch-all", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/catch-all.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/catch-all.json", "content": "--- title: Catch-all routes use_cases: \u003e- 404 pages, handling invalid urls, fallback routes, error boundaries, redirect unknown paths tags: - '404' - error-pages - fallback - routing - wildcards version: '1.0' description: \u003e- Create catch-all routes in SolidJS to handle 404 errors and redirect users from invalid URLs to proper fallback pages. --- Catch-all routes are used to match any URL that does not match any other route in the application. This is useful for displaying a 404 page or redirecting to a specific route when a user enters an invalid URL. To create a catch-all route, place a route with an asterisk (`*`) as the path at the end of the route list. Optionally, you can name the parameter to access the unmatched part of the URL. ```jsx import { Router, Route } from \"@solidjs/router\"; import Home from \"./Home\"; import About from \"./About\"; import NotFound from \"./NotFound\"; const App = () =\u003e ( \u003cRouter\u003e \u003cRoute path=\"/home\" component={Home} /\u003e \u003cRoute path=\"/about\" component={About} /\u003e \u003cRoute path=\"*404\" component={NotFound} /\u003e \u003c/Router\u003e ); ``` Now, if a user navigates to a URL that does not match `/home` or `/about`, the `NotFound` component will be rendered.", "term_freq": { "*404": 1, "---": 2, "//github": 1, "/\u003e": 3, "/about": 3, "/home": 3, "/notfound": 1, "404": 4, "\u003c/router\u003e": 1, "\u003croute": 3, "\u003crouter\u003e": 1, "=\u003e": 1, "\u003e-": 2, "@solidjs/router": 1, "about": 2, "access": 1, "an": 2, "and": 1, "any": 2, "app": 1, "application": 1, "are": 1, "as": 1, "asterisk": 1, "at": 1, "be": 1, "boundaries": 1, "can": 1, "catch-all": 5, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/concepts/catch-all": 1, "component": 1, "component=": 3, "const": 1, "create": 2, "description": 1, "displaying": 1, "does": 2, "end": 1, "enters": 1, "error": 1, "error-pages": 1, "errors": 1, "fallback": 3, "for": 1, "from": 5, "github-document": 1, "handle": 1, "handling": 1, "home": 2, "https": 1, "if": 1, "import": 4, "in": 2, "invalid": 3, "is": 1, "jsx": 1, "list": 1, "match": 3, "mdx": 1, "name": 1, "navigates": 1, "not": 2, "notfound": 3, "now": 1, "of": 2, "optionally": 1, "or": 2, "other": 1, "page": 1, "pages": 2, "parameter": 1, "part": 1, "path": 1, "path=": 3, "paths": 1, "place": 1, "proper": 1, "redirect": 2, "redirecting": 1, "rendered": 1, "route": 6, "router": 1, "routes": 4, "routing": 1, "solidjs": 1, "specific": 1, "tags": 1, "that": 2, "the": 8, "this": 1, "title": 1, "to": 7, "unknown": 1, "unmatched": 1, "url": 4, "urls": 2, "use_cases": 1, "used": 1, "useful": 1, "user": 2, "users": 1, "version": 1, "when": 1, "wildcards": 1, "will": 1, "with": 1, "you": 1 }, "length": 182 }, { "id": "3a85fb9472f9bb08a78f4dbb", "doc_id": "dfe5cc7f1b336733080b5f65", "title": "catch-error", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/catch-error.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/catch-error.json", "content": "--- title: catchError use_cases: \u003e- error handling, error boundaries, exception management, debugging, graceful error recovery tags: - errors - debugging - exceptions - handlers version: '1.0' description: \u003e- Wrap SolidJS code with error handlers to catch and handle exceptions gracefully. Create error boundaries for robust error management in components. --- :::note \u003cspan\u003eNew in v1.7.0\u003c/span\u003e ::: ```tsx import { catchError } from \"solid-js\" function catchError\u003cT\u003e(tryFn: () =\u003e T, onError: (err: any) =\u003e void): T ``` Wraps a `tryFn` with an error handler that fires if an error occurs below that point. Only the nearest scope error handlers execute. Rethrow to trigger up the line.", "term_freq": { "---": 2, "//github": 1, "0\u003c/span\u003e": 1, "\u003cspan\u003enew": 1, "=\u003e": 2, "\u003e-": 2, "an": 2, "and": 1, "any": 1, "below": 1, "boundaries": 2, "catch": 1, "catch-error": 1, "catcherror": 2, "catcherror\u003ct\u003e": 1, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/catch-error": 1, "components": 1, "create": 1, "debugging": 2, "description": 1, "err": 1, "error": 9, "errors": 1, "exception": 1, "exceptions": 2, "execute": 1, "fires": 1, "for": 1, "from": 1, "function": 1, "github-document": 1, "graceful": 1, "gracefully": 1, "handle": 1, "handler": 1, "handlers": 3, "handling": 1, "https": 1, "if": 1, "import": 1, "in": 2, "line": 1, "management": 2, "mdx": 1, "nearest": 1, "note": 1, "occurs": 1, "onerror": 1, "only": 1, "point": 1, "recovery": 1, "rethrow": 1, "robust": 1, "scope": 1, "solid-js": 1, "solidjs": 1, "tags": 1, "that": 2, "the": 2, "title": 1, "to": 2, "trigger": 1, "tryfn": 2, "tsx": 1, "up": 1, "use_cases": 1, "v1": 1, "version": 1, "void": 1, "with": 2, "wrap": 1, "wraps": 1 }, "length": 98 }, { "id": "2b6ec6fe5ddecbff992ff2f0", "doc_id": "425c440d86c454002f3af5ca", "title": "CHANGELOG.md | Remix", "url": "https://v2.remix.run/docs/start/changelog", "type": "html", "source": "remix:does", "path": "devour_data/docs/changelog.md---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsCHANGELOG.mdGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pagev2.17.0Minor ChangesChanges by Packagev2.16.8Patch Changesv2.16.7Patch Changesv2.16.6Patch Changesv2.16.5Patch Changesv2.16.4Patch Changesv2.16.3Security NoticePatch Changesv2.16.2Patch Changesv2.16.1Patch Changesv2.16.0Minor ChangesPatch ChangesUpdated Dependenciesv2.15.3Patch ChangesUpdated Dependenciesv2.15.2Patch ChangesUpdated Dependenciesv2.15.1Patch Changesv2.15.0Patch Changesv2.14.0Minor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.13.1Patch Changesv2.13.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.12.1Patch ChangesChanges by Packagev2.12.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.11.2Patch ChangesUpdated DependenciesChanges by Packagev2.11.1Patch ChangesChanges by Packagev2.11.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.10.3Patch ChangesUpdated DependenciesChanges by Packagev2.10.2Patch ChangesChanges by Packagev2.10.1Patch ChangesUpdated DependenciesChanges by Packagev2.10.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.9.2What's ChangedPatch ChangesUpdated DependenciesChanges by Packagev2.9.1Patch ChangesChanges by Packagev2.9.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.8.1Patch ChangesUpdated DependenciesChanges by Packagev2.8.0Minor ChangesPatch ChangesUpdated DependenciesChanges by Package2.7.2Patch Changes2.7.1Patch Changesv2.7.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.6.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.5.1Patch ChangesUpdated DependenciesChanges by Packagev2.5.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.4.1Patch ChangesUpdated DependenciesChanges by Packagev2.4.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.3.1Patch ChangesUpdated DependenciesChanges by Packagev2.3.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.2.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.1.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.0.1Patch ChangesChanges by Package 🔗v2.0.0Breaking ChangesNew FeaturesOther Notable ChangesUpdated DependenciesChanges by PackageOn this pagev2.17.0Minor ChangesChanges by Packagev2.16.8Patch Changesv2.16.7Patch Changesv2.16.6Patch Changesv2.16.5Patch Changesv2.16.4Patch Changesv2.16.3Security NoticePatch Changesv2.16.2Patch Changesv2.16.1Patch Changesv2.16.0Minor ChangesPatch ChangesUpdated Dependenciesv2.15.3Patch ChangesUpdated Dependenciesv2.15.2Patch ChangesUpdated Dependenciesv2.15.1Patch Changesv2.15.0Patch Changesv2.14.0Minor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.13.1Patch Changesv2.13.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.12.1Patch ChangesChanges by Packagev2.12.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.11.2Patch ChangesUpdated DependenciesChanges by Packagev2.11.1Patch ChangesChanges by Packagev2.11.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.10.3Patch ChangesUpdated DependenciesChanges by Packagev2.10.2Patch ChangesChanges by Packagev2.10.1Patch ChangesUpdated DependenciesChanges by Packagev2.10.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.9.2What's ChangedPatch ChangesUpdated DependenciesChanges by Packagev2.9.1Patch ChangesChanges by Packagev2.9.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.8.1Patch ChangesUpdated DependenciesChanges by Packagev2.8.0Minor ChangesPatch ChangesUpdated DependenciesChanges by Package2.7.2Patch Changes2.7.1Patch Changesv2.7.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.6.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.5.1Patch ChangesUpdated DependenciesChanges by Packagev2.5.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.4.1Patch ChangesUpdated DependenciesChanges by Packagev2.4.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.3.1Patch ChangesUpdated DependenciesChanges by Packagev2.3.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.2.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.1.0What's ChangedMinor ChangesPatch ChangesUpdated DependenciesChanges by Packagev2.0.1Patch ChangesChanges by Package 🔗v2.0.0Breaking ChangesNew FeaturesOther Notable ChangesUpdated DependenciesChanges by Package Remix Releases This page lists all releases/release notes for Remix back to v2.0.0. For releases prior to v2, please refer to the GitHub Releases Page. We manage release notes in this file instead of the paginated GitHub Releases Page for 2 reasons: Pagination in the GitHub UI means that you cannot easily search release notes for a large span of releases at once The paginated GitHub interface also cuts off longer releases notes without indication in list view, and you need to click into the detail view to see the full set of release notes Remix Releases v2.17.0 Minor Changes Changes by Package v2.16.8 Patch Changes v2.16.7 Patch Changes v2.16.6 Patch Changes v2.16.5 Patch Changes v2.16.4 Patch Changes v2.16.3 Security Notice Patch Changes v2.16.2 Patch Changes v2.16.1 Patch Changes v2.16.0 Minor Changes Patch Changes Updated Dependencies v2.15.3 Patch Changes Updated Dependencies v2.15.2 Patch Changes Updated Dependencies v2.15.1 Patch Changes v2.15.0 Patch Changes v2.14.0 Minor Changes Patch Changes Updated Dependencies Changes by Package v2.13.1 Patch Changes v2.13.0 What's Changed Stabilized APIs Minor Changes Patch Changes Updated Dependencies Changes by Package v2.12.1 Patch Changes Changes by Package v2.12.0 What's Changed Future Flag for Automatic Dependency Optimization (unstable) Improved Single Fetch Type Safety (unstable) Updates to Single Fetch Revalidation Behavior (unstable) Minor Changes Patch Changes Updated Dependencies Changes by Package v2.11.2 Patch Changes Updated Dependencies Changes by Package v2.11.1 Patch Changes Changes by Package v2.11.0 What's Changed Renamed unstable_fogOfWar future flag to unstable_lazyRouteDiscovery (unstable) Removed response stub in Single Fetch (unstable) Minor Changes Patch Changes Updated Dependencies Changes by Package v2.10.3 Patch Changes Updated Dependencies Changes by Package v2.10.2 Patch Changes Changes by Package v2.10.1 Patch Changes Updated Dependencies Changes by Package v2.10.0 What's Changed Lazy Route Discovery (a.k.a. \"Fog of War\") Minor Changes Patch Changes Updated Dependencies Changes by Package v2.9.2 What's Changed Updated Type-Safety for Single Fetch Patch Changes Updated Dependencies Changes by Package v2.9.1 Patch Changes Changes by Package v2.9.0 What's Changed Single Fetch (unstable) Undici Minor Changes Patch Changes Updated Dependencies Changes by Package v2.8.1 Patch Changes Updated Dependencies Changes by Package v2.8.0 Minor Changes Patch Changes Updated Dependencies Changes by Package 2.7.2 Patch Changes 2.7.1 Patch Changes v2.7.0 What's Changed Stabilized Vite Plugin New Layout Export Basename support Cloudflare Proxy as a Vite Plugin Minor Changes Patch Changes Updated Dependencies Changes by Package v2.6.0 What's Changed Unstable Vite Plugin updates Minor Changes Patch Changes Updated Dependencies Changes by Package v2.5.1 Patch Changes Updated Dependencies Changes by Package v2.5.0 What's Changed SPA Mode (unstable) Server Bundles (unstable) Minor Changes Patch Changes Updated Dependencies Changes by Package v2.4.1 Patch Changes Updated Dependencies Changes by Package v2.4.0 What's Changed Client Data future.v3_relativeSplatPath Vite Updates (Unstable) Minor Changes Patch Changes Updated Dependencies Changes by Package v2.3.1 Patch Changes Updated Dependencies Changes by Package v2.3.0 What's Changed Stabilized useBlocker unstable_flushSync API Minor Changes Patch Changes Updated Dependencies Changes by Package v2.2.0 What's Changed Vite! New Fetcher APIs Persistence Future Flag Minor Changes Patch Changes Updated Dependencies Changes by Package v2.1.0 What's Changed View Transitions Stable createRemixStub Minor Changes Patch Changes Updated Dependencies Changes by Package v2.0.1 Patch Changes Changes by Package 🔗 v2.0.0 Breaking Changes Upgraded Dependency Requirements Removed Future Flags Breaking Changes/API Removals With deprecation warnings Without deprecation warnings Breaking Type Changes New Features Other Notable Changes Updated Dependencies Changes by Package v2.17.0 Date: 2025-07-25 Minor Changes create-remix - Redirect users to create-react-router instead of create-remix (#10686, #10688) Remix v2 is in maintenance mode so we don't want new Remix apps to be created Changes by Package create-remix Full Changelog: v2.16.8...v2.17.0 v2.16.8 Date: 2025-05-29 Patch Changes create-remix - Update tar-fs (#10638) Full Changelog: v2.16.7...v2.16.8 v2.16.7 Date: 2025-05-19 Patch Changes @remix-run/dev - Update vite-node (#10611) Full Changelog: v2.16.6...v2.16.7 v2.16.6 Date: 2025-05-08 Patch Changes @remix-run/react - Upgrade turbo-stream to 2.4.1 (#9973) @remix-run/react - Fix window is not defined error in Single Fetch when server-rendering \u003cPrefetchPageLinks\u003e (#10601) @remix-run/serve - Remove redundant @remix-run/node/install import from remix-serve because it manually calls installGlobals separately (#10306) Full Changelog: v2.16.5...v2.16.6 v2.16.5 Date: 2025-04-09 Patch Changes @remix-run/node - Bump undici to version 6.21.2 to address a security advisory (#10562) Full Changelog: v2.16.4...v2.16.5 v2.16.4 Date: 2025-03-31 Patch Changes @remix-run/server-runtime - Bump cookie dependency from ^0.6.0 -\u003e ^0.7.2 to fix security advisory (#10547) Full Changelog: v2.16.3...v2.16.4 v2.16.3 Date: 2025-03-28 Security Notice Fixed a security vulnerability that allowed URL manipulation and potential cache pollution via the Host and X-Forwarded-Host headers due to inadequate port sanitization. Patch Changes @remix-run/express - Better validation of x-forwarded-host header to prevent potential security issues (#10553) Full Changelog: v2.16.2...v2.16.3 v2.16.2 Date: 2025-03-19 Patch Changes @remix-run/react - Fix shouldRevalidate behavior for clientLoader-only routes in ssr:true apps (#10527) @remix-run/server-runtime - Load ancestor pathless/index routes in lazy route discovery for upwards non-eager-discovery routing (#10535) Full Changelog: v2.16.1...v2.16.2 v2.16.1 Date: 2025-03-17 Patch Changes @remix-run/dev - Remove unused Vite file system watcher (#10510) @remix-run/dev - When future.v3_routeConfig is enabled, fix errors evaluating routes.ts when multiple copies of @remix-run/dev are present (#10524) @remix-run/dev - Fix Vite import analysis of @remix-run/react failing when the package is not marked as external (#10528) Full Changelog: v2.16.0...v2.16.1 v2.16.0 Date: 2025-02-27 Minor Changes @remix-run/dev - Add Vite v6 support (#10351) Patch Changes @remix-run/dev - Clean up vite-node dev server when build finishes (#10477) @remix-run/react - Don't apply Single Fetch revalidation de-optimization when in SPA mode since there is no server HTTP request (#10479) @remix-run/react - When using Lazy Route Discovery (future.v3_lazyRouteDiscovery), Remix will now detect manifest version mismatches after a new deploy and trigger a document reload to sync up any active client sessions with the newly deployed version (#10498) On navigations to undiscovered routes, this mismatch will trigger a document reload of the destination path On fetcher calls to undiscovered routes, this mismatch will trigger a document reload of the current path While performing Eager Route Discovery on rendered \u003cLink\u003e components, mismatches will result in a no-op Updated Dependencies react-router-dom@6.30.0 @remix-run/router@1.23.0 Full Changelog: v2.15.3...v2.16.0 v2.15.3 Date: 2025-01-30 Patch Changes @remix-run/react - Properly handle interrupted manifest requests in lazy route discovery (#10447) @remix-run/server-runtime - Avoid duplication of Set-Cookie headers if also returned from headers (#10424) @remix-run/server-runtime - Properly handle status codes that cannot have a body in single fetch responses (204, etc.) (#10410) Updated Dependencies react-router-dom@6.29.0 @remix-run/router@1.22.0 Full Changelog: v2.15.2...v2.15.3 v2.15.2 Date: 2024-12-20 Patch Changes @remix-run/dev - Allow suppression of future flag warnings by setting them to false (#10358) @remix-run/react - Throw unwrapped Single Fetch redirect to align with pre-Single Fetch behavior (#10317) Updated Dependencies react-router-dom@6.28.1 Full Changelog: v2.15.1...v2.15.2 v2.15.1 Date: 2024-12-09 Patch Changes create-remix - Move fs-extra from devDependencies to dependencies (#10300) Full Changelog: v2.15.0...v2.15.1 v2.15.0 Date: 2024-11-19 Patch Changes Stabilize the future.v3_routeConfig future flag, replacing future.unstable_routeConfig. This enables support for routes.ts to assist with the migration to React Router v7. (#10236) Note that if you had already enabled the future.unstable_routeConfig flag, your route config in app/routes.ts is no longer defined via the routes export and must now be defined via the default export. import { type RouteConfig } from \"@remix-run/route-config\"; -export const routes: RouteConfig = []; +export default [] satisfies RouteConfig; v2.14.0 Date: 2024-11-08 Minor Changes Deprecate SerializeFrom in favor of generics because it will be removed in React Router v7 (#10173) Add deprecation warning to @remix-run/eslint-config (#10174) Add support for routes.ts behind future.unstable_routeConfig flag to assist with the migration to React Router v7. (#10107) Config-based routing is the new default in React Router v7, configured via the routes.ts file in the app directory. Support for routes.ts and its related APIs in Remix are designed as a migration path to help minimize the number of changes required when moving your Remix project over to React Router v7. While some new packages have been introduced within the @remix-run scope, these new packages only exist to keep the code in routes.ts as similar as possible to the equivalent code for React Router v7. When the unstable_routeConfig future flag is enabled, Remix's built-in file system routing will be disabled and your project will opted into React Router v7's config-based routing. To enable the flag, in your vite.config.ts file: remix({ future: { unstable_routeConfig: true, }, }); A minimal routes.ts file to support Remix's built-in file system routing looks like this: // app/routes.ts import { flatRoutes } from \"@remix-run/fs-routes\"; import type { RouteConfig } from \"@remix-run/route-config\"; export const routes: RouteConfig = flatRoutes(); Log deprecation warnings for v3 future flags (#10126) Add @deprecated annotations to json/defer utilities Patch Changes @remix-run/react - Fix defaultShouldRevalidate value when using Single Fetch (#10139) @remix-run/server-runtime - Update externally-accessed resource routes warning to cover null usage as well (#10145) Updated Dependencies react-router-dom@6.28.0 @remix-run/router@1.21.0 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/fs-routes @remix-run/node @remix-run/react @remix-run/route-config @remix-run/routes-option-adapter @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.13.1...v2.14.0 v2.13.1 Date: 2024-10-11 Patch Changes @remix-run/dev - Revert future.v3_optimizeDeps back to future.unstable_optimizeDeps as it was not intended to stabilize in Remix v2 (#10099) Full Changelog: v2.13.0...v2.13.1 v2.13.0 Date: 2024-10-11 What's Changed Stabilized APIs This release stabilizes a handful of \"unstable\" APIs in preparation for the pending React Router v7 release (see these posts for more info): unstable_data → data (for use with Single Fetch) unstable_flushSync → flushSync (useSubmit, fetcher.load, fetcher.submit) unstable_viewTransition → viewTransition (\u003cLink\u003e, \u003cForm\u003e, useNavigate, useSubmit) future.unstable_optimizeDeps → future.v3_optimizeDeps (Docs) ⚠️ This flag was not intended to stabilize in Remix v2 and was reverted back to future.unstable_optimizeDeps in 2.13.1 future.unstable_lazyRouteDiscovery → future.v3_lazyRouteDiscovery (Docs) future.unstable_singleFetch → future.v3_singleFetch (Docs) Minor Changes Stabilize React Router APIs in Remix (#9980) Adopt stabilized React Router APIs internally Single Fetch: unstable_dataStrategy -\u003e dataStrategy Lazy Route Discovery: unstable_patchRoutesOnNavigation -\u003e patchRoutesOnNavigation Stabilize public-facing APIs Single Fetch: unstable_data() -\u003e data() unstable_viewTransition -\u003e viewTransition (Link, Form, navigate, submit) unstable_flushSync\u003e -\u003e \u003cLink viewTransition\u003e (Link, Form, navigate, submit, useFetcher) Stabilize future flags (#10072, #10092) future.unstable_lazyRouteDiscovery -\u003e future.v3_lazyRouteDiscovery future.unstable_optimizeDeps -\u003e future.v3_optimizeDeps future.unstable_singleFetch -\u003e future.v3_singleFetch Patch Changes @remix-run/dev - Stop passing request.signal as the renderToReadableStream signal to abort server rendering for cloudflare/deno runtimes because by the time that request is aborted, aborting the rendering is useless because there's no way for React to flush down the unresolved boundaries (#10047) This has been incorrect for some time, but only recently exposed due to a bug in how we were aborting requests when running via remix vite:dev because we were incorrectly aborting requests after successful renders - which was causing us to abort a completed React render, and try to close an already closed ReadableStream This has likely not shown up in any production scenarios because cloudflare/deno production runtimes are (correctly) not aborting the request.signal on successful renders The built-in entry.server files no longer pass a signal to renderToReadableStream because adding a timeout-based abort signal to the default behavior would constitute a breaking change Users can configure this abort behavior via their own entry.server via remix reveal entry.server, and the template entry.server files have been updated with an example approach for newly created Remix apps @remix-run/express - Fix adapter logic for aborting request.signal so we don't incorrectly abort on the close event for successful requests (#10046) @remix-run/react - Fix bug with clientLoader.hydrate in a layout route when hydrating with bubbled errors (#10063) Updated Dependencies react-router-dom@6.27.0 @remix-run/router@1.20.0 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.12.1...v2.13.0 v2.12.1 Date: 2024-09-19 Patch Changes @remix-run/dev - Properly abort request.signal during vite dev when the node response is closed (#9976) @remix-run/dev - CSS imports with ?inline, ?inline-css and ?raw are no longer incorrectly injected during SSR in development (#9910) @remix-run/server-runtime: Single Fetch: Fix types when loader, action, clientLoader, or clientAction return a mixture of bare objects, json(...), defer(...), and unstable_data(...). (#9999) @remix-run/node/@remix-run/cloudflare/@remix-run/deno - Single Fetch: Re-export interface Future through runtime packages so that pnpm doesn't complain about @remix-run/server-runtime not being a dependency (#9982) If you've already opted into Single Fetch, you can change your Single Fetch type augmentation in vite.config.ts to augment @remix-run/node (or cloudflare/deno) instead of @remix-run/server-runtime Changes by Package @remix-run/cloudflare @remix-run/deno @remix-run/dev @remix-run/node @remix-run/server-runtime Full Changelog: v2.12.0...v2.12.1 v2.12.0 Date: 2024-09-09 What's Changed Future Flag for Automatic Dependency Optimization (unstable) You can now opt-in to automatic dependency optimization during development by using the future.unstable_optimizeDeps future flag. For details, check out the docs at Guides \u003e Dependency optimization. For users who were previously working around this limitation, you no longer need to explicitly add routes to Vite's optimizeDeps.entries nor do you need to disable the remix-dot-server plugin. Improved Single Fetch Type Safety (unstable) If you were already using single-fetch types: Remove the \"@remix-run/react/future/single-fetch.d.ts\" override from tsconfig.json \u003e compilerOptions \u003e types Remove defineLoader, defineAction, defineClientLoader, defineClientAction helpers from your route modules Replace UIMatch_SingleFetch type helper with the original UIMatch Replace MetaArgs_SingleFetch type helper with the original MetaArgs Then you are ready for the new type safety setup: // vite.config.ts declare module \"@remix-run/server-runtime\" { interface Future { unstable_singleFetch: true; // 👈 enable _types_ for single-fetch } } export default defineConfig({ plugins: [ remix({ future: { unstable_singleFetch: true, // 👈 enable single-fetch }, }), ], }); For more information, see Guides \u003e Single Fetch in our docs. Updates to Single Fetch Revalidation Behavior (unstable) With Single Fetch, re-used routes will now revalidate by default on GET navigations. This is aimed at improving caching of Single Fetch calls in the simple case while still allowing users to opt-into the previous behavior for more advanced use cases. With this new behavior, requests do not need special query params for granular route revalidations out of the box - i.e., GET /a/b/c.data There are two conditions that will trigger granular revalidation and will exclude certain routes from the single fetch call: If a route opts out of revalidation via shouldRevalidate If a route defines a clientLoader If you call serverLoader() from your clientLoader, that will make a separate HTTP call for just that route loader - i.e., GET /a/b/c.data?_routes=routes/a for a clientLoader in routes/a.tsx When one or more routes are excluded from the Single Fetch call, the remaining routes that have loaders are included as query params. For example, when navigating to /a/b/c, if A was excluded, and the root route and routes/b had a loader but routes/c did not, the Single Fetch request would be GET /a/b/c.data?_routes=root,routes/b. For more information, see Guides \u003e Single Fetch in our docs. Minor Changes @remix-run/dev - New future.unstable_optimizeDeps flag for automatic dependency optimization (#9921) Patch Changes @remix-run/dev - Handle circular dependencies in modulepreload manifest generation (#9917) @remix-run/dev - Fix dest already exists build errors by only moving SSR assets to the client build directory when they're not already present on disk (#9901) @remix-run/react - Clarify wording in default HydrateFallback console warning (#9899) @remix-run/react - Remove hydration URL check that was originally added for React 17 hydration issues and we no longer support React 17 (#9890) Reverts the logic originally added in Remix v1.18.0 via #6409 This was added to resolve an issue that could arise when doing quick back/forward history navigations while JS was loading which would cause a mismatch between the server matches and client matches: #1757 This specific hydration issue would then cause this React v17 only looping issue: #1678 The URL comparison that we added in 1.18.0 turned out to be subject to false positives of it's own which could also put the user in looping scenarios Remix v2 upgraded it's minimal React version to v18 which eliminated the v17 hydration error loop React v18 handles this hydration error like any other error and does not result in a loop So we can remove our check and thus avoid the false-positive scenarios in which it may also trigger a loop @remix-run/react - Lazy Route Discovery: Sort /__manifest query parameters for better caching (#9888) @remix-run/react - Single Fetch: Improved type safety (#9893) @remix-run/react - Single Fetch: Fix revalidation behavior bugs (#9938) @remix-run/server-runtime - Do not render or try to include a body for 304 responses on document requests (#9955) @remix-run/server-runtime - Single Fetch: Do not try to encode a turbo-stream body into 304 responses (#9941) @remix-run/server-runtime - Single Fetch: Change content type on .data requests to text/x-script to allow Cloudflare compression (#9889) Updated Dependencies react-router-dom@6.26.2 @remix-run/router@1.19.2 Changes by Package @remix-run/dev @remix-run/react @remix-run/server-runtime Full Changelog: v2.11.2...v2.12.0 v2.11.2 Date: 2024-08-15 Patch Changes @remix-run/react - Fog of War: Simplify implementation now that React Router handles slug/splat edge cases and tracks previously discovered routes (see https://github.com/remix-run/react-router/pull/11883) (#9860) ⚠️ This changes the return signature of the internal /__manifest endpoint since we no longer need the notFoundPaths field @remix-run/react - Fog of War: Update to use renamed unstable_patchRoutesOnNavigation function in RR (see https://github.com/remix-run/react-router/pull/11888) (#9860) @remix-run/server-runtime - Single Fetch: Fix redirects when a basename is present (#9848) @remix-run/server-runtime - Single Fetch: Update turbo-stream to v2.3.0 (#9856) Stabilize object key order for serialized payloads Remove memory limitations payloads sizes Updated Dependencies react-router-dom@6.26.1 @remix-run/router@1.19.1 Changes by Package @remix-run/react @remix-run/server-runtime Full Changelog: v2.11.1...v2.11.2 v2.11.1 Date: 2024-08-05 Patch Changes @remix-run/react - Revert #9695, stop infinite reload (a7cffe57) Changes by Package @remix-run/react Full Changelog: v2.11.0...v2.11.1 v2.11.0 Date: 2024-08-01 What's Changed Renamed unstable_fogOfWar future flag to unstable_lazyRouteDiscovery (unstable) We found that the future.unstable_fogOfWar flag name could be a bit confusing without the proper context (notably, the blog post), so we've renamed the flag to future.unstable_lazyRouteDiscovery for clarity. If you had opted into this feature already, please update the name of the flag in your vite.config.ts file (or remix.config.js). Removed response stub in Single Fetch (unstable) The original Single Fetch approach was based on an assumption that an eventual middleware implementation would require something like the ResponseStub API so users could mutate status/headers in middleware before/after handlers as well as during handlers. As part of Single Fetch, we wanted to align how response headers would be merged between document and data requests. Thinking response was the future API, we aligned document requests to use the response stub that data requests were using, and we stopped using the headers() function. However, the realization/alignment between Michael and Ryan on the recent roadmap planning made us realize that the original assumption was incorrect. middleware won't need a response stub - as users can just mutate the Response they get from await next() directly. Removing that assumption, and still wanting to align how headers get merged between document and data requests, it makes more sense to stick with the current headers() API and align Single Fetch data requests to use that existing API. This was we don't need to introduce any new header-related APIs which will make the adoption of Single Fetch much easier. With this change: The headers() function will let you control header merging for both document and data requests In most cases, if you were returning json()/defer() without setting a custom status or headers, you can just remove those utility functions and return the raw data ❌ return json({ data: \"whatever\" }); ✅ return { data: \"whatever\" }; If you were returning a custom status or headers via json/defer: We've added a new API-compatible unstable_data utility that will let you send back status/headers alongside your raw data without having to encode it into a Response We will be removing both json and defer in the next major version, but both should still work in Single Fetch in v2 to allow for incremental adoption of the new behavior ⚠️ If you've already adopted Single Fetch in it's unstable state and converted to response stub, you'll need to move those changes back to leveraging the headers() API. Minor Changes @remix-run/dev - Fog of War: Rename future.unstable_fogOfWar to future.unstable_lazyRouteDiscovery for clarity (#9763) @remix-run/server-runtime - Add a new replace(url, init?) alternative to redirect(url, init?) that performs a history.replaceState instead of a history.pushState on client-side navigation redirects (#9764) @remix-run/server-runtime - Single Fetch: Add a new unstable_data() API as a replacement for json/defer when custom status/headers are needed (#9769) @remix-run/server-runtime - Single Fetch: Remove responseStub in favor of headers (#9769) Patch Changes @remix-run/dev - Handle absolute Vite base URLs (#9700) @remix-run/react - Change initial hydration route mismatch from a URL check to a matches check to be resistant to URL inconsistencies (#9695) @remix-run/react - Single Fetch: Ensure calls don't include any trailing slash from the pathname (i.e., /path/.data) (#9792) @remix-run/react - Single Fetch: Add undefined to the useRouteLoaderData type override (#9796) Updated Dependencies react-router-dom@6.26.0 @remix-run/router@1.19.0 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.10.3...v2.11.0 v2.10.3 Date: 2024-07-16 Patch Changes @remix-run/architect - Manually joining headers with semi-colons to avoid differences in Remix and node/undici Headers implementation (#9664) @remix-run/react - Log any errors encountered loading a route module prior to reloading the page (#8932) @remix-run/react - Single Fetch (unstable): Proxy request.signal through dataStrategy for loader calls to fix cancellation (#9738) @remix-run/react - Single Fetch (unstable): Adopt React Router's stabilized future.v7_skipActionErrorRevalidation under the hood (#9706) This stabilizes the shouldRevalidate parameter from unstable_actionStatus to actionStatus ⚠️ This might be a breaking change for your app if you have opted into single fetch and the unstable_actionStatus parameter Updated Dependencies react-router-dom@6.25.0 @remix-run/router@1.18.0 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.10.2...v2.10.3 v2.10.2 Date: 2024-07-04 Patch Changes @remix-run/react - Forward ref to Form (bdd04217) @remix-run/server-runtime - Fix bug with immutable headers on raw native fetch responses returned from loaders (#9693) Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.10.1...v2.10.2 v2.10.1 Date: 2024-07-03 Patch Changes @remix-run/react - Fog of War (unstable): Support route discovery from \u003cForm\u003e components (#9665) @remix-run/react - Fog of War (unstable): Don't discover links/forms with reloadDocument (#9686) Updated Dependencies react-router-dom@6.24.1 @remix-run/router@1.17.1 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.10.0...v2.10.1 v2.10.0 Date: 2024-06-25 What's Changed Lazy Route Discovery (a.k.a. \"Fog of War\") The \"Fog of War\" feature in Remix, now available through the future.unstable_fogOfWar flag, is an optimization to reduce the up front size of the Remix route manifest. In most scenarios the Remix route manifest isn't prohibitively large so as to impact initial perf metrics, but at scale we've found that some apps can generate large manifests that are expensive to download and execute on app startup. When Fog of War is enabled, Remix will only include the initially server-rendered routes in the manifest and then it will fetch manifest \"patches\" for outgoing links as the user navigates around. By default, to avoid waterfalls Remix fetches patches for all rendered links, so that in the ideal case they've already been patched in prior to being clicked. If a user clicks a link before this eager discovery completes, then a small waterfall will occur to first \"discover\" the route, and then navigate to the route. Enabling this flag should require no application code changes. For more information, please see the documentation. Minor Changes Add support for Lazy Route Discovery (a.k.a. Fog of War) (#9600, #9619) Patch Changes @remix-run/{dev|express|serve} - Upgrade express dependency to ^4.19.2 (#9184) @remix-run/react - Don't prefetch server loader data when clientLoader exists (#9580) @remix-run/react - Avoid hydration loops when Layout/ErrorBoundary renders also throw (#9566) @remix-run/react - Fix a hydration bug when using child routes and HydrateFallback components with a basename (#9584) @remix-run/{server-runtime|react} - Single Fetch: Update to turbo-stream@2.2.0 (#9562) @remix-run/server-runtime - Single Fetch: Properly handle thrown 4xx/5xx response stubs (#9501) @remix-run/server-runtime - Single Fetch: Change redirects to use a 202 status to avoid automatic caching (#9564) @remix-run/server-runtime - Single Fetch: Fix issues with returning or throwing a response stub from a resource route in single fetch (#9488) @remix-run/server-runtime - Single Fetch: Fix error when returning null from a resource route (#9488) Updated Dependencies react-router-dom@6.24.0 @remix-run/router@1.17.0 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.9.2...v2.10.0 v2.9.2 Date: 2024-05-10 What's Changed Updated Type-Safety for Single Fetch In 2.9.2 we've enhanced the type-safety when opting into the future.unstable_singleFetch feature. Previously, we added the response stub to LoaderFunctionArgs and used type overrides for inference on useLoaderData, etc., but we found that it wasn't quite enough. With this release we're introducing new functions to assist the type-inference when using single fetch - defineLoader/defineAction and their client-side counterparts defineClientLoader and nd defineClientAction. These are identity functions; they don't modify your loader or action at runtime. Rather, they exist solely for type-safety by providing types for args and by ensuring valid return types. export const loader = defineLoader(({ request }) =\u003e { // ^? Request return { a: 1, b: () =\u003e 2 }; // ^ type error: `b` is not serializable }); Note that defineLoader and defineAction are not technically necessary for defining loaders and actions if you aren't concerned with type-safety: // this totally works! and typechecking is happy too! export const loader = () =\u003e { return { a: 1 }; }; This means that you can opt-in to defineLoader incrementally, one loader at a time. Please see the Single Fetch docs for more information. Patch Changes @remix-run/dev - Vite: Fix dest already exists error when running remix vite:build (#9305) @remix-run/dev - Vite: Fix issue resolving critical CSS during development when route files are located outside of the app directory (#9194) @remix-run/dev - Vite: Remove @remix-run/node from Vite plugin's optimizeDeps.include list since it was unnecessary and resulted in Vite warnings when not depending on this package (#9287) @remix-run/dev - Vite: Clean up redundant ?client-route=1 imports in development (#9395) @remix-run/dev - Vite: Ensure Babel config files are not referenced when applying the react-refresh Babel transform within the Remix Vite plugin (#9241) @remix-run/react - Type-safety for single-fetch: defineLoader, defineClientLoader, defineAction, defineClientAction (#9372) @remix-run/react - Single Fetch: Add undefined to useActionData type override (#9322) @remix-run/react - Single Fetch: Allow a nonce to be set on single fetch stream transfer inline scripts via \u003cRemixServer\u003e (#9364) @remix-run/server-runtime - Single Fetch: Don't log thrown response stubs via handleError (#9369) @remix-run/server-runtime - Single Fetch: Automatically wrap resource route naked object returns in json() for back-compat in v2 (and log deprecation warning) (#9349) @remix-run/server-runtime - Single Fetch: Pass response stub to resource route handlers (#9349) Updated Dependencies react-router-dom@6.23.1 @remix-run/router@1.16.1 Changes by Package @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.9.1...v2.9.2 v2.9.1 Date: 2024-04-24 Patch Changes @remix-run/dev - Fix issue where consumers who had added Remix packages to Vite's ssr.noExternal option were being overridden by the Remix Vite plugin adding Remix packages to Vite's ssr.external option (#9301) @remix-run/react - Ignore future/*.d.ts files from TS build (#9299) Changes by Package @remix-run/dev @remix-run/react Full Changelog: v2.9.0...v2.9.1 v2.9.0 Date: 2024-04-23 What's Changed Single Fetch (unstable) 2.9.0 introduces a future.unstable_singleFetch flag to enable to Single Fetch behavior (RFC) in your Remix application. Please refer to the docs for the full detail but the high-level changes to be aware of include: Naked objects returned from loader/action functions are no longer automatically serialized to JSON responses Instead, they'll be streamed as-is via turbo-stream which allows direct serialization of more complex types such as Promise, Date, Map instances, and more You will need to modify your tsconfig.json's compilerOptions.types array to infer types properly when using Single Fetch The headers export is no longer used when Single Fetch is enabled in favor of a new response stub passed to your loader/action functions The json/defer/redirect utilities are deprecated when using Single Fetch (but still work mostly the same) Actions no longer automatically revalidate on 4xx/5xx responses - you can return a 2xx to opt-into revalidation or use shouldRevalidate [!IMPORTANT] Single Fetch requires using undici as your fetch polyfill, or using the built-in fetch on Node 20+, because it relies on APIs available there but not in the @remix-run/web-fetch polyfill. Please refer to the Undici section below for more details. If you are managing your own server and calling installGlobals(), you will need to call installGlobals({ nativeFetch: true }) to avoid runtime errors when using Single Fetch If you are using remix-serve, it will use undici automatically if Single Fetch is enabled Undici Remix 2.9.0 adds a new installGlobals({ nativeFetch: true }) flag to opt into using undici for the Web Fetch polyfills instead of the @remix-run/web-* packages. This change has a few primary benefits: It will allow us to stop maintaining our own web-std-io fork in future versions of Remix It should bring us more in-line with spec compliance ⚠️ It is possible that some non-spec-compliant bugs in our fork will be \"fixed\" by moving to undici, so beware of \"breaking bug fixes\" and keep an eye on any advanced fetch API interactions you're performing in your app ⚠️ In some cases, undici may have different behavior by design -- most notably, undici's garbage collection behavior differs and you are required to consume all fetch response bodies to avoid a memory leak in your app Because undici is the fetch implementation used by node internally, it should better prepare Remix apps to more smoothly drop the polyfill to use the built-in Node.js APIs on node 20+ Minor Changes New future.unstable_singleFetch flag (#8773, #9073, #9084, #9272) @remix-run/node - Add a new installGlobals({ nativeFetch: true }) flag to opt-into using undici as the fetch polyfill instead of @remix-run/web-* (#9106, #9111, #9198) @remix-run/server-runtime - Add ResponseStub header interface and deprecate the headers export when Single Fetch is enabled (#9142) Patch Changes create-remix - Allow . in repo name when using --template flag (#9026) @remix-run/dev - Improve getDependenciesToBundle resolution in monorepos (#8848) @remix-run/dev - Fix SPA mode when Single Fetch is enabled by using streaming entry.server (#9063) @remix-run/dev - Vite: added sourcemap support for transformed routes (#8970) @remix-run/dev - Update links printed to the console by the Remix CLI/Dev Server to point to updated docs locations (#9176) @remix-run/server-runtime - Handle redirects created by handleDataRequest (#9104) Updated Dependencies react-router-dom@6.23.0 @remix-run/router@1.16.0 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.8.1...v2.9.0 v2.8.1 Date: 2024-03-07 Patch Changes @remix-run/dev - Vite: Support reading from Vite config when running remix reveal and remix routes CLI commands (#8916) @remix-run/dev - Vite: Clean up redundant client route query strings on route JavaScript files in production builds (#8969) @remix-run/dev - Vite: Add vite commands to Remix CLI --help output (#8939) @remix-run/dev - Vite: Fix support for build.sourcemap option in Vite config (#8965) @remix-run/dev - Vite: Fix error when using Vite's server.fs.allow option without a client entry file (#8966) @remix-run/react - Strengthen the internal LayoutComponent type to accept limited children (#8910) Updated Dependencies react-router-dom@6.22.3 @remix-run/router@1.15.3 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.8.0...v2.8.1 v2.8.0 Date: 2024-02-28 Minor Changes @remix-run/dev - Vite: Pass resolved viteConfig to Remix Vite plugin's buildEnd hook (#8885) Patch Changes @remix-run/dev - Mark Layout as browser safe route export in esbuild compiler (#8842) @remix-run/dev - Vite: Silence build warnings when dependencies include \"use client\" directives (#8897) @remix-run/dev - Vite: Fix serverBundles issue where multiple browser manifests are generated (#8864) @remix-run/dev - Vite: Support custom build.assetsDir option (#8843) @remix-run/react - Fix the default root ErrorBoundary component so it leverages the user-provided Layout component (#8859) @remix-run/react - Fix the default root HydrateFallback component so it leverages any user-provided Layout component (#8892) Updated Dependencies react-router-dom@6.22.2 @remix-run/router@1.15.2 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.7.2...v2.8.0 2.7.2 Date: 2024-02-21 Patch Changes @remix-run/dev - Vite: Fix error when building projects with .css?url imports (#8829) 2.7.1 Date: 2024-02-20 Patch Changes @remix-run/cloudflare-pages - Fix breaking change and restore Cloudflare event context fields in getLoadContext argument for backwards compatibility (#8819) v2.7.0 Date: 2024-02-20 What's Changed Stabilized Vite Plugin We're excited to announce that support for Vite is now stable in Remix 2.7.0! Ever since the initial unstable release of Remix Vite, we’ve been hard at work refining and extending it over the past few months with help from all of our early adopters and community contributors. This also means that Vite-only features such as SPA Mode, Server Bundles, and basename support are now officially stable as well 😊. For more information, check out the blog post and the Vite docs. New Layout Export We've found that it's super common to create your own component in your root route to hold the shared layout/app shell between your Component/ErrorBoundary/HydrateFallback. This is so common (and can also cause some minor edge-case issues such as a FOUC on hydration) that we've incorporated this as a first-class API in 2.7.0. You can now export an optional Layout component from your root route which will be provided your route component, ErrorBoundary, or HydrateFallback as it's children. For more information, please see the Layout docs and the RFC. Basename support React Router has long supported a basename config that allows you to serve your app within a subpath such as http://localhost/myapp/* without having to include the /myapp segment in all of your route paths. This was originally omitted from Remix because v1 nested folders file-convention made it pretty easy to put your route files in a routes/myapp/ folder, giving you the same functionality. There has also been an open proposal from the community to add this functionality. Two things have since changed that made us reconsider the lack of basename support: We switched to a flat-file based convention in v2, and it gets far less ergonomic to have to prefix all of your route files with myapp. compared to the nested folder convention We moved to Vite which has it's own base config which is often (and easily) confused with the concept of a React Router basename (when in reality it's more aligned with the old Remix publicPath config) In 2.7.0 we've added support for a basename in the Vite plugin config. For more information, please check out the basename docs. Note: This is a Vite-only feature and is not available via the esbuild compiler. Cloudflare Proxy as a Vite Plugin ⚠️ This is a breaking change for projects relying on Cloudflare support from the unstable Vite plugin The Cloudflare preset (unstable_cloudflarePreset) as been removed and replaced with a new Vite plugin: import { unstable_vitePlugin as remix, - unstable_cloudflarePreset as cloudflare, + cloudflareDevProxyVitePlugin as remixCloudflareDevProxy, } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [ + remixCloudflareDevProxy(), + remix(), - remix({ - presets: [cloudflare()], - }), ], - ssr: { - resolve: { - externalConditions: [\"workerd\", \"worker\"], - }, - }, }); A few notes on the new plugin: remixCloudflareDevProxy must come before the remix plugin so that it can override Vite's dev server middleware to be compatible with Cloudflare's proxied environment Because it is a Vite plugin, remixCloudflareDevProxy can set ssr.resolve.externalConditions to be workerd-compatible for you remixCloudflareDevProxy accepts a getLoadContext function that replaces the old getRemixDevLoadContext If you were using a nightly version that required getBindingsProxy or getPlatformProxy, that is no longer required Any options you were passing to getBindingsProxy or getPlatformProxy should now be passed to remixCloudflareDevProxy instead This API also better aligns with future plans to support Cloudflare with a framework-agnostic Vite plugin that makes use of Vite's (experimental) Runtime API. Minor Changes @remix-run/react - Allow an optional Layout export from the root route (#8709) @remix-run/cloudflare-pages - Make getLoadContext optional for Cloudflare Pages (#8701) Defaults to (context) =\u003e ({ env: context }), which is what we used to have in all the templates This gives parity with the Cloudflare preset for the Remix Vite plugin and keeps our templates leaner @remix-run/dev - Vite: Cloudflare Proxy as a Vite plugin (#8749) ⚠️ This is a breaking change for projects relying on Cloudflare support from the unstable Vite plugin @remix-run/dev - Vite: Add a new basename option to the Vite plugin, allowing users to set the internal React Router basename in order to to serve their applications underneath a subpath (#8145) @remix-run/dev - Vite: Stabilize the Remix Vite plugin, Cloudflare preset, and all related types by removing all unstable_ / Unstable_ prefixes (#8713) While this is a breaking change for existing Remix Vite plugin consumers, now that the plugin has stabilized, there will no longer be any breaking changes outside of a major release. Thank you to all of our early adopters and community contributors for helping us get here! 🙏 @remix-run/dev - Vite: Stabilize \"SPA Mode\" by renaming the Remix vite plugin config from unstable_ssr -\u003e ssr (#8692) Patch Changes @remix-run/express - Use req.originalUrl instead of req.url so that Remix sees the full URL (#8145) Remix relies on the knowing the full URL to ensure that server and client code can function together, and does not support URL rewriting prior to the Remix handler @remix-run/react - Fix a bug with SPA mode when the root route had no children (#8747) @remix-run/server-runtime - Add a more specific error if a user returns a defer response from a resource route (#8726) @remix-run/dev - Always prepend DOCTYPE in SPA mode entry.server.tsx, can opt out via remix reveal (#8725) @remix-run/dev - Fix build issue in SPA mode when using a basename (#8720) @remix-run/dev - Fix type error in Remix config for synchronous routes function (#8745) @remix-run/dev - Vite: Fix issue where client route file requests fail if search params have been parsed and serialized before reaching the Remix Vite plugin (#8740) @remix-run/dev - Vite: Validate that the MDX Rollup plugin, if present, is placed before Remix in Vite config (#8690) @remix-run/dev - Vite: Fix issue resolving critical CSS during development when the current working directory differs from the project root (#8752) @remix-run/dev - Vite: Require version 5.1.0 to support .css?url imports (#8723) @remix-run/dev - Vite: Support Vite 5.1.0's .css?url imports (#8684) @remix-run/dev - Vite: Enable use of vite preview to preview Remix SPA applications (#8624) In the SPA template, npm run start has been renamed to npm run preview which uses vite preview instead of a standalone HTTP server such as http-server or serv-cli @remix-run/dev - Vite: Remove the ability to pass publicPath as an option to the Remix vite plugin (#8145) ⚠️ This is a breaking change for projects using the unstable Vite plugin with a publicPath This is already handled in Vite via the base config so we now set the Remix publicPath from the Vite base config @remix-run/dev - Vite: Enable HMR for .md and .mdx files (#8711) @remix-run/dev - Vite: reliably detect non-root routes in Windows (#8806) @remix-run/dev - Vite: Pass remixUserConfig to preset remixConfig hook (#8797) @remix-run/dev - Vite: Ensure CSS file URLs that are only referenced in the server build are available on the client (#8796) @remix-run/dev - Vite: fix server exports dead-code elimination for routes outside of app directory (#8795) Updated Dependencies react-router-dom@6.22.Y @remix-run/router@1.15.Y Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.6.0...v2.7.0 v2.6.0 Date: 2024-02-01 What's Changed Unstable Vite Plugin updates As we continue moving towards stabilizing the Vite plugin, we've introduced a few breaking changes to the unstable Vite plugin in this release. Please read the @remix-run/dev changes below closely and update your app accordingly if you've opted into using the Vite plugin. We've also removed the unstable_ prefix from the serverBundles option as we're now confident in the API (#8596). 🎉 And last, but certainly not least - we've added much anticipated Cloudflare support in #8531! To get started with Cloudflare, you can use the unstable-vite-cloudflare template: npx create-remix@latest --template remix-run/remix/templates/unstable-vite-cloudflare For more information, please refer to the docs at Future \u003e Vite \u003e Cloudflare and Future \u003e Vite \u003e Migrating \u003e Migrating Cloudflare Functions. Minor Changes @remix-run/server-runtime - Add future.v3_throwAbortReason flag to throw request.signal.reason when a request is aborted instead of an Error such as new Error(\"query() call aborted: GET /path\") (#8251) Patch Changes @remix-run/server-runtime - Unwrap thrown Response's from entry.server into ErrorResponse's and preserve the status code (#8577) @remix-run/dev - Vite: Add manifest option to Vite plugin to enable writing a .remix/manifest.json file to the build directory (#8575) ⚠️ This is a breaking change for consumers of the Vite plugin's \"server bundles\" feature The build/server/bundles.json file has been superseded by the more general build/.remix/manifest.json While the old server bundles manifest was always written to disk when generating server bundles, the build manifest file must be explicitly enabled via the manifest option @remix-run/dev - Vite: Rely on Vite plugin ordering (#8627) ⚠️ This is a breaking change for projects using the unstable Vite plugin The Remix plugin expects to process JavaScript or TypeScript files, so any transpilation from other languages must be done first. For example, that means putting the MDX plugin before the Remix plugin: import mdx from \"@mdx-js/rollup\"; import { unstable_vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [ + mdx(), remix() - mdx(), ], }); Previously, the Remix plugin misused enforce: \"post\" from Vite's plugin API to ensure that it ran last However, this caused other unforeseen issues Instead, we now rely on standard Vite semantics for plugin ordering The official Vite React SWC plugin also relies on plugin ordering for MDX @remix-run/dev - Vite: Remove interop with \u003cLiveReload /\u003e, rely on \u003cScripts /\u003e instead (#8636) ⚠️ This is a breaking change for projects using the unstable Vite plugin Vite provides a robust client-side runtime for development features like HMR, making the \u003cLiveReload /\u003e component obsolete In fact, having a separate dev scripts component was causing issues with script execution order To work around this, the Remix Vite plugin used to override \u003cLiveReload /\u003e into a bespoke implementation that was compatible with Vite Instead of all this indirection, now the Remix Vite plugin instructs the \u003cScripts /\u003e component to automatically include Vite's client-side runtime and other dev-only scripts To adopt this change, you can remove the LiveReload component from your root.tsx component: import { - LiveReload, Outlet, Scripts, } export default function App() { return ( \u003chtml\u003e \u003chead\u003e \u003c/head\u003e \u003cbody\u003e \u003cOutlet /\u003e \u003cScripts /\u003e - \u003cLiveReload /\u003e \u003c/body\u003e \u003c/html\u003e ) } @remix-run/dev - Vite: Only write Vite manifest files if build.manifest is enabled within the Vite config (#8599) ⚠️ This is a breaking change for consumers of Vite's manifest.json files To explicitly enable generation of Vite manifest files, you must set build.manifest to true in your Vite config: export default defineConfig({ build: { manifest: true }, // ... }); @remix-run/dev - Vite: Add new buildDirectory option with a default value of \"build\" (#8575) ⚠️ This is a breaking change for consumers of the Vite plugin that were using the assetsBuildDirectory and serverBuildDirectory options This replaces the old assetsBuildDirectory and serverBuildDirectory options which defaulted to \"build/client\" and \"build/server\" respectively The Remix Vite plugin now builds into a single directory containing client and server directories If you've customized your build output directories, you'll need to migrate to the new buildDirectory option, e.g.: import { unstable_vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [ remix({ - serverBuildDirectory: \"dist/server\", - assetsBuildDirectory: \"dist/client\", + buildDirectory: \"dist\", }) ], }); @remix-run/dev - Vite: Write Vite manifest files to build/.vite directory rather than being nested within build/client and build/server directories (#8599) ⚠️ This is a breaking change for consumers of Vite's manifest.json files Vite manifest files are now written to the Remix build directory Since all Vite manifests are now in the same directory, they're no longer named manifest.json Instead, they're named build/.vite/client-manifest.json and build/.vite/server-manifest.json, or build/.vite/server-{BUNDLE_ID}-manifest.json when using server bundles @remix-run/dev - Vite: Remove unstable prefix from serverBundles option (#8596) @remix-run/dev - Vite: Add --sourcemapClient and --sourcemapServer flags to remix vite:build (#8613) --sourcemapClient, --sourcemapClient=inline, or --sourcemapClient=hidden --sourcemapServer, --sourcemapServer=inline, or --sourcemapServer=hidden See https://vitejs.dev/config/build-options.html#build-sourcemap @remix-run/dev - Vite: Validate IDs returned from the serverBundles function to ensure they only contain alphanumeric characters, hyphens and underscores (#8598) @remix-run/dev - Vite: Fix \"could not fast refresh\" false alarm (#8580) HMR is already functioning correctly but was incorrectly logging that it \"could not fast refresh\" on internal client routes Now internal client routes correctly register Remix exports like meta for fast refresh, which removes the false alarm. @remix-run/dev - Vite: Cloudflare Pages support (#8531) @remix-run/dev - Vite: Add getRemixDevLoadContext option to Cloudflare preset (#8649) @remix-run/dev - Vite: Remove undocumented backwards compatibility layer for Vite v4 (#8581) @remix-run/dev - Vite: Add presets option to ease integration with different platforms and tools (#8514) @remix-run/dev - Vite: Add buildEnd hook (#8620) @remix-run/dev - Vite: Add mode field into generated server build (#8539) @remix-run/dev - Vite: Reduce network calls for route modules during HMR (#8591) @remix-run/dev - Vite: Export Unstable_ServerBundlesFunction and Unstable_VitePluginConfig types (#8654) Updated Dependencies react-router-dom@6.22.0 @remix-run/router@1.15.0 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.5.1...v2.6.0 v2.5.1 Date: 2024-01-18 Patch Changes create-remix - high-contrast fg/bg for header colors (#8503) bgWhite and whiteBright are the same color in many terminal colorthemes, which was causing it to render as illegible white-on-white @remix-run/dev - Add isSpaMode to @remix-run/dev/server-build virtual module (#8492) @remix-run/dev - SPA Mode: Automatically prepend \u003c!DOCTYPE html\u003e if not present to fix quirks mode warnings for SPA template (#8495) @remix-run/dev - Vite: Errors for server-only code point to new docs (#8488) @remix-run/dev - Vite: Fix HMR race condition when reading changed file contents (#8479) @remix-run/dev - Vite: Tree-shake unused route exports in the client build (#8468) @remix-run/dev - Vite: Performance profiling (#8493) Run remix vite:build --profile to generate a .cpuprofile that can be shared or uploaded to speedscope.app In dev, press p + enter to start a new profiling session or stop the current session If you need to profile dev server startup, run remix vite:dev --profile to initialize the dev server with a running profiling session For more, see the new Vite \u003e Performance docs @remix-run/dev - Vite: Improve performance of dev server requests by invalidating Remix's virtual modules on relevant file changes rather than on every request (#8164) @remix-run/react - Remove leftover unstable_ prefix from Blocker/BlockerFunction types (#8530) @remix-run/react - Only use active matches in \u003cMeta\u003e/\u003cLinks\u003e in SPA mode (#8538) Updated Dependencies react-router-dom@6.21.3 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.5.0...v2.5.1 v2.5.0 Date: 2024-01-11 What's Changed SPA Mode (unstable) SPA Mode (RFC) allows you to generate your Remix app as a standalone SPA served from a static index.html file. You can opt into SPA Mode by setting unstable_ssr: false in your Remix Vite plugin config: // vite.config.ts import { unstable_vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [remix({ unstable_ssr: false })], }); Development in SPA Mode is just like a normal Remix app, and still uses the Remix dev server for HMR/HDR: remix vite:dev Building in SPA Mode will generate an index.html file in your client assets directory: remix vite:build To run your SPA, you serve your client assets directory via an HTTP server: npx http-server build/client For more information, please refer to the SPA Mode docs. Server Bundles (unstable) This is an advanced feature designed for hosting provider integrations where you may want to split server code into multiple request handlers. When compiling your app into multiple server bundles, there will need to be a custom routing layer in front of your app directing requests to the correct bundle. This feature is currently unstable and only designed to gather early . You can control the server bundles generated by your Remix Vite build by setting the unstable_serverBundles option in your vite config: import { unstable_vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [ remix({ unstable_serverBundles: ({ branch }) =\u003e { const isAuthenticatedRoute = branch.some( (route) =\u003e route.id === \"routes/_authenticated\", ); return isAuthenticatedRoute ? \"authenticated\" : \"unauthenticated\"; }, }), ], }); Minor Changes Add unstable support for \"SPA Mode\" (#8457) Add unstable_serverBundles option to Vite plugin to support splitting server code into multiple request handlers (#8332) Patch Changes create-remix: Only update * versions for Remix dependencies (#8458) remix-serve: Don't try to load sourcemaps if they don't exist on disk (#8446) @remix-run/dev: Fix issue with isbot@4 released on 1/1/2024 (#8415) remix dev will now add \"isbot\": \"^4\" to package.json instead of using latest Update built-in entry.server files to work with both isbot@3 and isbot@4 for backwards-compatibility with Remix apps that have pinned isbot@3 Templates are updated to use isbot@4 moving forward via create-remix @remix-run/dev: Vite - Fix HMR issues when altering exports for non-rendered routes (#8157) @remix-run/dev: Vite - Default NODE_ENV to \"production\" when running remix vite:build command (#8405) @remix-run/dev: Vite - Remove Vite plugin config option serverBuildPath in favor of separate serverBuildDirectory and serverBuildFile options (#8332) @remix-run/dev: Vite - Loosen strict route exports restriction, reinstating support for non-Remix route exports (#8420) @remix-run/react: Vite - Fix type conflict with import.meta.hot from the existing Remix compiler (#8459) @remix-run/server-runtime: Updated cookie dependency to 0.6.0 to inherit support for the Partitioned attribute (#8375) Updated Dependencies react-router-dom@6.21.2 @remix-run/router@1.14.2 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.4.1...v2.5.0 v2.4.1 Date: 2023-12-22 Patch Changes @remix-run/dev: Vite - Remove unstable_viteServerBuildModuleId in favor of manually referencing virtual module name \"virtual:remix/server-build\" (#8264) ⚠️ This is a breaking change for projects using the unstable Vite plugin with a custom server This change was made to avoid issues where @remix-run/dev could be inadvertently required in your server's production dependencies. Instead, you should manually write the virtual module name \"virtual:remix/server-build\" when calling ssrLoadModule in development. -import { unstable_viteServerBuildModuleId } from \"@remix-run/dev\"; // ... app.all( \"*\", createRequestHandler({ build: vite - ? () =\u003e vite.ssrLoadModule(unstable_viteServerBuildModuleId) + ? () =\u003e vite.ssrLoadModule(\"virtual:remix/server-build\") : await import(\"./build/server/index.js\"), }) ); @remix-run/dev: Vite - Add vite:dev and vite:build commands to the Remix CLI (#8211) In order to handle upcoming Remix features where your plugin options can impact the number of Vite builds required, you should now run your Vite dev and build processes via the Remix CLI. { \"scripts\": { - \"dev\": \"vite dev\", - \"build\": \"vite build \u0026\u0026 vite build --ssr\" + \"dev\": \"remix vite:dev\", + \"build\": \"remix vite:build\" } } @remix-run/dev: Vite - Error messages when .server files are referenced by client (#8267) Previously, referencing a .server module from client code resulted in an error message like: The requested module '/app/models/answer.server.ts' does not provide an export named 'isDateType' This was confusing because answer.server.ts does provide the isDateType export, but Remix was replacing .server modules with empty modules (export {}) for the client build Now, Remix explicitly fails at compile time when a .server module is referenced from client code and includes dedicated error messages depending on whether the import occurs in a route or a non-route module The error messages also include links to relevant documentation @remix-run/dev: Vite - Preserve names for exports from .client modules (#8200) Unlike .server modules, the main idea is not to prevent code from leaking into the server build since the client build is already public Rather, the goal is to isolate the SSR render from client-only code Routes need to import code from .client modules without compilation failing and then rely on runtime checks or otherwise ensure that execution only happens within a client-only context (e.g. event handlers, useEffect) Replacing .client modules with empty modules would cause the build to fail as ESM named imports are statically analyzed So instead, we preserve the named export but replace each exported value with undefined That way, the import is valid at build time and standard runtime checks can be used to determine if the code is running on the server or client @remix-run/dev: Vite - Disable watch mode in Vite child compiler during build (#8342) @remix-run/dev: Vite - Show warning when source maps are enabled in production build (#8222) @remix-run/react: Propagate server loader errors through serverLoader in hydrating clientLoader's (#8304) @remix-run/react Re-export Response helpers (defer/json/redirect/redirectDocument) through @remix-run/react for use in clientLoader/clientAction (#8351) @remix-run/server-runtime: Add optional error to ServerRuntimeMetaArgs type to align with MetaArgs (#8238) create-remix: Switch to using @remix-run/web-fetch instead of node-fetch inside the create-remix CLI (#7345) remix-serve: Use node fileURLToPath to convert source map URL to path (#8321) Updated Dependencies react-router-dom@6.21.1 @remix-run/router@1.14.1 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.4.0...v2.4.1 v2.4.0 Date: 2023-12-13 What's Changed Client Data We're excited to land the Client Data RFC in this release! The final API differs slightly from the RFC, so please check out the docs for use-cases and final APIs: Client Data Guide clientLoader HydrateFallback clientAction While we still recommend server loaders/actions for the majority of your data needs in a Remix app - these provide some levers you can pull for more advanced use-cases such as: Skip the Hop: Query a data API directly from the browser, using loaders simply for SSR Fullstack State: Augment server data with client data for your full set of loader data One or the Other: Sometimes you use server loaders, sometimes you use client loaders, but not both on one route Client Cache: Cache server loader data in the client and avoid some server calls Migration: Ease your migration from React Router -\u003e Remix SPA -\u003e Remix SSR future.v3_relativeSplatPath We introduced a future.v3_relativeSplatPath flag to implement a breaking bug fix to relative routing when inside a splat route. For more information, please see the React Router 6.21.0 Release Notes and the useResolvedPath docs Vite Updates (Unstable) Remix now excludes modules within .server directories from client build. Remix now enforces strict route exports, and will will throw an error if you have unsupported exports in your route modules. Previously, the Remix compiler would allow any export from routes. While this was convenient, it was also a common source of bugs that were hard to track down because they only surfaced at runtime. For more information, please see the docs. Minor Changes Add support for clientLoader/clientAction/HydrateFallback route exports (#8173) Add a new future.v3_relativeSplatPath flag to implement a breaking bug fix to relative routing when inside a splat route (#8216) Deprecate DataFunctionArgs in favor of LoaderFunctionArgs/ActionFunctionArgs (#8173) This is aimed at keeping the types aligned across server/client loaders/actions now that clientLoader/clientActon functions have serverLoader/serverAction parameters which differentiate ClientLoaderFunctionArgs/ClientActionFunctionArgs Vite: Exclude modules within .server directories from client build (#8154) Vite: Strict route exports (#8171) Patch Changes @remix-run/server-runtime: Fix flash of unstyled content for non-Express custom servers in Vite dev (#8076) @remix-run/server-runtime: Pass request handler errors to vite.ssrFixStacktrace in Vite dev to ensure stack traces correctly map to the original source code (#8066) remix-serve: Fix source map loading when file has ?t=timestamp suffix (rebuilds) (#8174) @remix-run/dev: Change Vite build output paths to fix a conflict between how Vite and the Remix compiler each manage the public directory (#8077) ⚠️ This is a breaking change for projects using the unstable Vite plugin The server is now compiled into build/server rather than build, and the client is now compiled into build/client rather than public For more information on the changes and guidance on how to migrate your project, refer to the updated Remix Vite documentation @remix-run/dev: Upgrade Vite peer dependency range to v5 (#8172) @remix-run/dev: Support HMR for routes with handle export in Vite dev (#8022) @remix-run/dev: Fix flash of unstyled content for non-Express custom servers in Vite dev (#8076) @remix-run/dev: Bundle CSS imported in client entry file in Vite plugin (#8143) @remix-run/dev: Remove undocumented legacyCssImports option from Vite plugin due to issues with ?url imports of CSS files not being processed correctly in Vite (#8096) @remix-run/dev: Vite: fix access to default entry.{client,server}.tsx within pnpm workspaces on Windows (#8057) @remix-run/dev: Remove unstable_createViteServer and unstable_loadViteServerBuild which were only minimal wrappers around Vite's createServer and ssrLoadModule functions when using a custom server (#8120) ⚠️ This is a breaking change for projects using the unstable Vite plugin with a custom server Instead, we now provide unstable_viteServerBuildModuleId so that custom servers interact with Vite directly rather than via Remix APIs, for example: -import { - unstable_createViteServer, - unstable_loadViteServerBuild, -} from \"@remix-run/dev\"; +import { unstable_viteServerBuildModuleId } from \"@remix-run/dev\"; Creating the Vite server in middleware mode: const vite = process.env.NODE_ENV === \"production\" ? undefined - : await unstable_createViteServer(); + : await import(\"vite\").then(({ createServer }) =\u003e + createServer({ + server: { + middlewareMode: true, + }, + }) + ); Loading the Vite server build in the request handler: app.all( \"*\", createRequestHandler({ build: vite - ? () =\u003e unstable_loadViteServerBuild(vite) + ? () =\u003e vite.ssrLoadModule(unstable_viteServerBuildModuleId) : await import(\"./build/server/index.js\"), }) ); @remix-run/dev: Pass request handler errors to vite.ssrFixStacktrace in Vite dev to ensure stack traces correctly map to the original source code (#8066) @remix-run/dev: Vite: Preserve names for exports from .client imports (#8200) Unlike .server modules, the main idea is not to prevent code from leaking into the server build since the client build is already public Rather, the goal is to isolate the SSR render from client-only code Routes need to import code from .client modules without compilation failing and then rely on runtime checks to determine if the code is running on the server or client Replacing .client modules with empty modules would cause the build to fail as ESM named imports are statically analyzed So instead, we preserve the named export but replace each exported value with an empty object That way, the import is valid at build time and the standard runtime checks can be used to determine if then code is running on the server or client @remix-run/dev: Add @remix-run/node to Vite's optimizeDeps.include array (#8177) @remix-run/dev: Improve Vite plugin performance (#8121) Parallelize detection of route module exports Disable server.preTransformRequests in Vite child compiler since it's only used to process route modules @remix-run/dev: Remove automatic global Node polyfill installation from the built-in Vite dev server and instead allow explicit opt-in (#8119) ⚠️ This is a breaking change for projects using the unstable Vite plugin without a custom server If you're not using a custom server, you should call installGlobals in your Vite config instead. import { unstable_vitePlugin as remix } from \"@remix-run/dev\"; +import { installGlobals } from \"@remix-run/node\"; import { defineConfig } from \"vite\"; +installGlobals(); export default defineConfig({ plugins: [remix()], }); @remix-run/dev: Vite: Errors at build-time when client imports .server default export (#8184) Remix already stripped .server file code before ensuring that server code never makes it into the client That results in errors when client code tries to import server code, which is exactly what we want! But those errors were happening at runtime for default imports A better experience is to have those errors happen at build-time so that you guarantee that your users won't hit them @remix-run/dev: Fix request instanceof Request checks when using Vite dev server (#8062) Updated Dependencies react-router-dom@6.21.0 @remix-run/router@1.14.0 @remix-run/web-fetch@4.4.2 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.3.1...v2.4.0 v2.3.1 Date: 2023-11-22 Patch Changes @remix-run/dev: Support nonce prop on LiveReload component in Vite dev (#8014) @remix-run/dev: Ensure code-split JS files in the server build's assets directory aren't cleaned up after Vite build (#8042) @remix-run/dev: Fix redundant copying of assets from public directory in Vite build (#8039) This ensures that static assets aren't duplicated in the server build directory This also fixes an issue where the build would break if assetsBuildDirectory was deeply nested within the public directory Updated Dependencies react-router-dom@6.20.0 @remix-run/router@1.13.0 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.3.0...v2.3.1 v2.3.0 Date: 2023-11-16 What's Changed Stabilized useBlocker We've removed the unstable_ prefix from the useBlocker hook as it's been in use for enough time that we are confident in the API. We do not plan to remove the prefix from unstable_usePrompt due to differences in how browsers handle window.confirm that prevent React Router from guaranteeing consistent/correct behavior. unstable_flushSync API We've added a new unstable_flushSync option to the imperative APIs (useSubmit, useNavigate, fetcher.submit, fetcher.load) to let users opt-into synchronous DOM updates for pending/optimistic UI. function handleClick() { submit(data, { flushSync: true }); // Everything is flushed to the DOM so you can focus/scroll to your pending/optimistic UI setFocusAndOrScrollToNewlyAddedThing(); } Minor Changes Remove the unstable_ prefix from the useBlocker hook (#7882) Add unstable_flushSync option to useNavigate/useSubmit/fetcher.load/fetcher.submit to opt-out of React.startTransition and into ReactDOM.flushSync for state updates (#7996) Patch Changes @remix-run/react: Add missing modulepreload for the manifest (#7684) @remix-run/server-runtime: Updated cookie dependency from 0.4.1 to 0.5.0 to inherit support for Priority attribute in Chrome (#6770) @remix-run/dev: Fix FutureConfig type (#7895) Lots of small fixes for the unstable vite compiler: Support optional rendering of the LiveReload component in Vite dev (#7919) Support rendering of the LiveReload component after Scripts in Vite dev (#7919) Fix react-refresh/babel resolution for custom server with pnpm (#7904) Support JSX usage in .jsx files without manual React import in Vite (#7888) Fix Vite production builds when plugins that have different local state between development and production modes are present (e.g. @mdx-js/rollup) (#7911) Cache resolution of Remix Vite plugin options (#7908) Support Vite 5 (#7846) Allow process.env.NODE_ENV values other than \"development\" in Vite dev (#7980) Attach CSS from shared chunks to routes in Vite build (#7952) Let Vite handle serving files outside of project root via /@fs (#7913) This fixes errors when using default client entry or server entry in a pnpm project where those files may be outside of the project root, but within the workspace root By default, Vite prevents access to files outside the workspace root (when using workspaces) or outside of the project root (when not using workspaces) unless user explicitly opts into it via Vite's server.fs.allow Improve performance of LiveReload proxy in Vite dev (#7883) Deduplicate @remix-run/react (#7926) Pre-bundle Remix dependencies to avoid Remix router duplicates Our remix-react-proxy plugin does not process default client and server entry files since those come from within node_modules That means that before Vite pre-bundles dependencies (e.g. first time dev server is run) mismatching Remix routers cause Error: You must render this element inside a \u003cRemix\u003e element Fix React Fast Refresh error on load when using defer in Vite dev server (#7842) Handle multiple Set-Cookie headers in Vite dev server (#7843) Fix flash of unstyled content on initial page load in Vite dev when using a custom Express server (#7937) Populate process.env from .env files on the server in Vite dev (#7958) Emit assets that were only referenced in the server build into the client assets directory in Vite build (#7892, cherry-picked in 8cd31d65) Updated Dependencies react-router-dom@6.19.0 @remix-run/router@1.12.0 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.2.0...v2.3.0 v2.2.0 Date: 2023-10-31 What's Changed Vite! Remix 2.2.0 adds unstable support for Vite for Node-based apps! See our announcement blog post and the Future \u003e Vite page in the Remix docs for more details. You can try it out today with two new (unstable) templates: # minimal server npx create-remix@latest --template remix-run/remix/templates/unstable-vite # custom server (Express example) npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express New APIs in @remix-run/dev unstable_vitePlugin: The new Remix Vite plugin unstable_createViteServer: Creates a Vite server in middleware mode for interop with custom servers unstable_loadViteServerBuild: Allows your custom server to delegate SSR requests to Vite during development Changed APIs createRequestHandler: Now also allows the build argument to be a function that will be used to dynamically load new builds for each request during development Other Runtimes Deno support is untested, but should work through Deno's Node/npm interop CloudFlare support is not yet available New Fetcher APIs Per this RFC, we've introduced some new APIs that give you more granular control over your fetcher behaviors: You may now specify your own fetcher identifier via useFetcher({ key: string }), which allows you to access the same fetcher instance from different components in your application without prop-drilling Fetcher keys are now exposed on the fetchers returned from useFetchers so that they can be looked up by key Form and useSubmit now support optional navigate/fetcherKey props/params to allow kicking off a fetcher submission under the hood with an optionally user-specified key \u003cForm method=\"post\" navigate={false} fetcherKey=\"my-key\"\u003e submit(data, { method: \"post\", navigate: false, fetcherKey: \"my-key\" }) Invoking a fetcher in this way is ephemeral and stateless If you need to access the state of one of these fetchers, you will need to leverage useFetchers() or useFetcher({ key }) to look it up elsewhere Persistence Future Flag Per the same RFC as above, we've introduced a new future.v3_fetcherPersist flag that allows you to opt-into the new fetcher persistence/cleanup behavior. Instead of being immediately cleaned up on unmount, fetchers will persist until they return to an idle state. This makes pending/optimistic UI much easier in scenarios where the originating fetcher needs to unmount. This is sort of a long-standing bug fix as the useFetchers() API was always supposed to only reflect in-flight fetcher information for pending/optimistic UI -- it was not intended to reflect fetcher data or hang onto fetchers after they returned to an idle state Keep an eye out for the following specific behavioral changes when opting into this flag and check your app for compatibility: Fetchers that complete while still mounted will no longer appear in useFetchers() after completion - they served no purpose in there since you can access the data via useFetcher().data Fetchers that previously unmounted while in-flight will not be immediately aborted and will instead be cleaned up once they return to an idle state They will remain exposed via useFetchers while in-flight so you can still access pending/optimistic data after unmount If a fetcher is no longer mounted when it completes, then it's result will not be post processed - e.g., redirects will not be followed and errors will not bubble up in the UI However, if a fetcher was re-mounted elsewhere in the tree using the same key, then it's result will be processed, even if the originating fetcher was unmounted Minor Changes Unstable vite support (#7590) New fetcher key APIs and navigate/fetcherKey params for navigational APIs (#10960) New future.v3_fetcherPersist flag (#10962) Patch Changes @remix-run/express: Allow the Express adapter to work behind a proxy when using app.enable('trust proxy') (#7323) Previously, this used req.get('host') to construct the Remix Request, but that does not respect X-Forwarded-Host This now uses req.hostname which will respect X-Forwarded-Host @remix-run/react: Fix warning that could be inadvertently logged when using route files with no default export (#7745) create-remix: Support local tarballs with a .tgz extension which allows direct support for pnpm pack tarballs (#7649) create-remix: Default the Remix app version to the version of create-remix being used (#7670) This most notably enables easier usage of tags, e.g. npm create remix@nightly Updated Dependencies react-router-dom@6.18.0 @remix-run/router@1.11.0 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.1.0...v2.2.0 v2.1.0 Date: 2023-10-16 What's Changed View Transitions We're excited to release experimental support for the the View Transitions API in Remix! You can now trigger navigational DOM updates to be wrapped in document.startViewTransition to enable CSS animated transitions on SPA navigations in your application. The simplest approach to enabling a View Transition in your Remix app is via the new \u003cLink unstable_viewTransition\u003e prop. This will cause the navigation DOM update to be wrapped in document.startViewTransition which will enable transitions for the DOM update. Without any additional CSS styles, you'll get a basic cross-fade animation for your page. If you need to apply more fine-grained styles for your animations, you can leverage the unstable_useViewTransitionState hook which will tell you when a transition is in progress and you can use that to apply classes or styles: function ImageLink(to, src, alt) { const isTransitioning = unstable_useViewTransitionState(to); return ( \u003cLink to={to} unstable_viewTransition\u003e \u003cimg src={src} alt={alt} style={{ viewTransitionName: isTransitioning ? \"image-expand\" : \"\", }} /\u003e \u003c/Link\u003e ); } You can also use the \u003cNavLink unstable_viewTransition\u003e shorthand which will manage the hook usage for you and automatically add a transitioning class to the \u003ca\u003e during the transition: a.transitioning img { view-transition-name: \"image-expand\"; } \u003cNavLink to={to} unstable_viewTransition\u003e \u003cimg src={src} alt={alt} /\u003e \u003c/NavLink\u003e For an example usage of View Transitions, check out our fork of the Astro Records demo (which uses React Router but so does Remix 😉). For more information on using the View Transitions API, please refer to the Smooth and simple transitions with the View Transitions API guide from the Google Chrome team. Stable createRemixStub After real-world experience, we're confident in the createRemixStub API and ready to commit to it, so in 2.1.0 we've removed the unstable_ prefix. ⚠️ Please note that this did involve 1 small breaking change - the \u003cRemixStub remixConfigFuture\u003e prop has been renamed to \u003cRemixStub future\u003e to decouple the future prop from a specific file location. Minor Changes Added unstable support for the View Transition API (#10916) Stabilized the @remix-run/testing createRemixStub helper (#7647) Patch Changes Emulate types for JSON.parse(JSON.stringify(x)) in SerializeFrom (#7605) Notably, type fields that are only assignable to undefined after serialization are now omitted since JSON.stringify |\u003e JSON.parse will omit them. See test cases for examples This fixes type errors when upgrading to v2 from 1.19 Avoid mutating meta object when tagName is specified (#7594) Fix FOUC on subsequent client-side navigations to route.lazy routes (#7576) Export the proper Remix useMatches wrapper to fix UIMatch typings (#7551) @remix-run/cloudflare - sourcemap takes into account special chars in output file (#7574) @remix-run/express - Flush headers for text/event-stream responses (#7619) Updated Dependencies react-router-dom@6.17.0 @remix-run/router@1.10.0 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing Full Changelog: v2.0.1...v2.1.0 v2.0.1 Date: 2023-09-21 Patch Changes Fix types for MDX files when using pnpm (#7491) Update getDependenciesToBundle to handle ESM packages without main exports (#7272) Note that these packages must expose package.json in their exports field so that their path can be resolved Fix server builds where serverBuildPath extension is .cjs (#7180) Fix HMR for CJS projects using remix-serve and manual mode (remix dev --manual) (#7487) By explicitly busting the require cache, remix-serve now correctly re-imports new server changes in CJS ESM projects were already working correctly and are not affected by this. Fix error caused by partially written server build (#7470) Previously, it was possible to trigger a reimport of the app server code before the new server build had completely been written. Reimporting the partially written server build caused issues related to build.assets being undefined and crashing when reading build.assets.version Add second generic to UIMatch for handle field (#7464) Fix resource routes being loaded through route.lazy (#7498) Throw a semantically correct 405 ErrorResponse instead of just an Error when submitting to a route without an action (#7423) Update to latest version of @remix-run/web-fetch (#7477) Switch from crypto.randomBytes to crypto.webcrypto.getRandomValues for file session storage ID generation (#7203) Use native Blob class instead of polyfill (#7217) Changes by Package 🔗 @remix-run/dev @remix-run/node @remix-run/react @remix-run/serve Full Changelog: v2.0.0...v2.0.1 v2.0.0 Date: 2023-09-15 We're so excited to release Remix v2 to you and we really hope this upgrade is one of the smoothest framework upgrades you've ever experienced! That was our primary goal with v2 - something we aimed to achieve through a heavy use of deprecation warnings and Future Flags in Remix v1. If you are on the latest 1.x version and you've enabled all future flags and addressed all console warnings, then our hope is that you are 90% of the way to being upgraded for v2. There are always going to be a few things that we can't put behind a flag (like breaking type changes) or come up at the very last moment and don't have time to add as a warning or flag in 1.x. If you're not yet on the latest 1.x version we'd recommend first upgrading to that and resolving any flag/console warnings: \u003e npx upgrade-remix 1.19.3 Breaking Changes Below is a very concise list of the breaking changes in v2. For the most thorough discussion of breaking changes, please read the Upgrading to v2 guide. This document provides a comprehensive walkthrough of the breaking changes that come along with v2 - and instructions on how to adapt your application to handle them For additional details, you can refer to the Changes by Package section below Upgraded Dependency Requirements Remix v2 has upgraded it's minimum version support for React and Node and now officially requires: React 18 (#7121) For information on upgrading to React 18, please see the React upgrade guide Node 18 or later (#6939, #7292) For information on upgrading to Node 18, please see the Node v18 announcement Please refer to the Remix documentation for an overview of when we drop support for Node versions Removed Future Flags The following future flags were removed and their behavior is now the default - you can remove all of these from your remix.config.js file. v2_dev - New dev server with HMR+HDR (#7002) If you had configurations in future.v2_dev instead of just the boolean value (i.e., future.v2_dev.port), you can lift them into a root dev object in your remix.config.js v2_errorBoundary - Removed CatchBoundary in favor of a singular ErrorBoundary (#6906) v2_headers - Altered the logic for headers in nested route scenarios (#6979) v2_meta - Altered the return format of meta() (#6958) v2_normalizeFormMethod - Normalize formMethod APIs to uppercase (#6875) v2_routeConvention - Routes use a flat route convention by default now (#6969) Breaking Changes/API Removals With deprecation warnings The following lists other breaking changes/API removals which had deprecation warnings in Remix v1. If you're on the latest 1.19.3 release without any console warnings, then you're probably good to go on all of these! remix.config.js Renamed browserBuildDirectory to assetsBuildDirectory (#6900) Removed devServerBroadcastDelay (#7063) Renamed devServerPort to dev.port (000457e0) Note that if you are opting into this in a 1.x release, your config flag will be future.v2_dev.port, but on a stable 2.x release it will be dev.port Changed the default serverModuleFormat from cjs to esm (#6949) Removed serverBuildTarget (#6896) Changed serverBuildDirectory to serverBuildPath (#6897) Node built-ins are no longer polyfilled on the server by default, you must opt-into polyfills via serverNodeBuiltinsPolyfill (#6911 @remix-run/react Removed useTransition (#6870) Removed fetcher.type and flattened fetcher.submission (#6874) \u003cfetcher.Form method=\"get\"\u003e is now more accurately categorized as state:\"loading\" instead of state:\"submitting\" to better align with the underlying GET request Require camelCased versions of imagesrcset/imagesizes (#6936) Without deprecation warnings Unfortunately, we didn't manage to get a deprecation warning on every breaking change or API removal 🙃. Here's a list of remaining changes that you may need to look into to upgrade to v2: remix.config.js Node built-ins are no longer polyfilled in the browser by default, you must opt-into polyfills via browserNodeBuiltinsPolyfill (#7269) PostCSS/Tailwind will be enabled by default if config files exist in your app, you may disable this via the postcss and tailwind flags (#6909) @remix-run/cloudflare Remove createCloudflareKVSessionStorage (#6898) Drop @cloudflare/workers-types v2 \u0026 v3 support (#6925) @remix-run/dev Removed REMIX_DEV_HTTP_ORIGIN in favor of REMIX_DEV_ORIGIN (#6963) Removed REMIX_DEV_SERVER_WS_PORT in favor of dev.port or --port (#6965) Removed --no-restart/restart flag in favor of --manual/manual (#6962) Removed --scheme/scheme and --host/host in favor of REMIX_DEV_ORIGIN instead (#6962) Removed the codemod command (#6918) @remix-run/eslint-config Remove @remix-run/eslint-config/jest config (#6903) Remove magic imports ESLint warnings (#6902) @remix-run/netlify The @remix-run/netlify adapter has been removed in favor of the Netlify official adapters (#7058) @remix-run/node fetch is no longer polyfilled by default - apps must call installGlobals() to install the polyfills (#7009) fetch and related APIs are no longer exported from @remix-run/node - apps should use the versions in the global namespace (#7293) Apps must call sourceMapSupport.install() to setup source map support @remix-run/react Remove unstable_shouldReload in favor of shouldRevalidate (#6865) @remix-run/serve remix-serve picks an open port if 3000 is taken and PORT is not specified (#7278) Integrate manual mode (#7231) Remove undocumented createApp Node API (#7229) Preserve dynamic imports in remix-serve for external bundle (#7173) @remix-run/vercel The @remix-run/vercel adapter has been removed in favor of out of the box functionality provided by Vercel (#7035) create-remix Stop passing isTypeScript to remix.init script (#7099) remix Removed magic exports (#6895) Breaking Type Changes Removed V2_ prefixes from future.v2_meta types as they are now the default behavior (#6958) V2_MetaArgs -\u003e MetaArgs V2_MetaDescriptor -\u003e MetaDescriptor V2_MetaFunction -\u003e MetaFunction V2_MetaMatch -\u003e MetaMatch V2_MetaMatches -\u003e MetaMatches V2_ServerRuntimeMetaArgs -\u003e ServerRuntimeMetaArgs V2_ServerRuntimeMetaDescriptor -\u003e ServerRuntimeMetaDescriptor V2_ServerRuntimeMetaFunction -\u003e ServerRuntimeMetaFunction V2_ServerRuntimeMetaMatch -\u003e ServerRuntimeMetaMatch V2_ServerRuntimeMetaMatches -\u003e ServerRuntimeMetaMatches The following types were adjusted to prefer unknown over any and to align with underlying React Router types (#7319): Renamed the useMatches() return type from RouteMatch to UIMatch Renamed LoaderArgs/ActionArgs to LoaderFunctionArgs/ActionFunctionArgs AppData changed from any to unknown Location[\"state\"] (useLocation.state) changed from any to unknown UIMatch[\"data\"] (useMatches()[i].data) changed from any to unknown UIMatch[\"handle\"] (useMatches()[i].handle) changed from { [k: string]: any } to unknown Fetcher[\"data\"] (useFetcher().data) changed from any to unknown MetaMatch.handle (used in meta()) changed from any to unknown AppData/RouteHandle are no longer exported as they are just aliases for unknown New Features New create-remix CLI (#6887) Most notably, this removes the dropdown to choose your template/stack in favor of the --template flag and our ever-growing list of available templates Adds a new --overwrite flag (#7062) Supports the bun package manager (#7074) Detect built mode via build.mode (#6964) Support polyfilling node globals via serverNodeBuiltinsPolyfill.globals/browserNodeBuiltinsPolyfill.globals (#7269) New redirectDocument utility to redirect via a fresh document load (#7040, #6842) Add error to meta params so you can render error titles, etc. (#7105) unstable_createRemixStub now supports adding meta/links functions on stubbed Remix routes (#7186) unstable_createRemixStub no longer supports the element/errorElement properties on routes. You must use Component/ErrorBoundary to match what you would export from a Remix route module. Other Notable Changes Remix now uses React Router's route.lazy method internally to load route modules on navigations (#7133) Removed the @remix-run/node atob/btoa polyfills in favor of the built-in versions (#7206) Decouple the @remix-run/dev package from the contents of the @remix-run/css-bundle package (#6982) The contents of the @remix-run/css-bundle package are now entirely managed by the Remix compiler. Even though it's still recommended that your Remix dependencies all share the same version, this change ensures that there are no runtime errors when upgrading @remix-run/dev without upgrading @remix-run/css-bundle. remix-serve now picks an open port if 3000 is taken (#7278) If PORT env var is set, remix-serve will use that port Otherwise, remix-serve picks an open port (3000 unless that is already taken) Updated Dependencies react-router-dom@6.16.0 @remix-run/router@1.9.0 @remix-run/web-fetch@4.4.0 @remix-run/web-file@3.1.0 @remix-run/web-stream@1.1.0 Changes by Package create-remix @remix-run/architect @remix-run/cloudflare @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/css-bundle @remix-run/deno @remix-run/dev @remix-run/eslint-config @remix-run/express @remix-run/node @remix-run/react @remix-run/serve @remix-run/server-runtime @remix-run/testing © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_1371\\\":-5,\\\"_1372\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":1370},{\\\"_18\\\":954},\\\"CHANGELOG.md\\\",\\\"html\\\",\\\"\\u003c!-- markdownlint-disable no-duplicate-header no-emphasis-as-heading no-inline-html --\\u003e\\\\n\\u003ch1 id=\\\\\\\"remix-releases\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#remix-releases\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRemix Releases\\u003c/h1\\u003e\\\\n\\u003cp\\u003eThis page lists all releases/release notes for Remix back to \\u003ccode\\u003ev2.0.0\\u003c/code\\u003e. For releases prior to v2, please refer to the \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/releases\\\\\\\"\\u003eGitHub Releases Page\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWe manage release notes in this file instead of the paginated GitHub Releases Page for 2 reasons:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ePagination in the GitHub UI means that you cannot easily search release notes for a large span of releases at once\\u003c/li\\u003e\\\\n\\u003cli\\u003eThe paginated GitHub interface also cuts off longer releases notes without indication in list view, and you need to click into the detail view to see the full set of release notes\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cdetails\\u003e\\\\n \\u003csummary\\u003e \\u003c/summary\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#remix-releases\\\\\\\"\\u003eRemix Releases\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2170\\\\\\\"\\u003ev2.17.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2168\\\\\\\"\\u003ev2.16.8\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2167\\\\\\\"\\u003ev2.16.7\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-1\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2166\\\\\\\"\\u003ev2.16.6\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-2\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2165\\\\\\\"\\u003ev2.16.5\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-3\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2164\\\\\\\"\\u003ev2.16.4\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-4\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2163\\\\\\\"\\u003ev2.16.3\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#security-notice\\\\\\\"\\u003eSecurity Notice\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-5\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2162\\\\\\\"\\u003ev2.16.2\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-6\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2161\\\\\\\"\\u003ev2.16.1\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-7\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2160\\\\\\\"\\u003ev2.16.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-1\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-8\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2153\\\\\\\"\\u003ev2.15.3\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-9\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-1\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2152\\\\\\\"\\u003ev2.15.2\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-10\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-2\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2151\\\\\\\"\\u003ev2.15.1\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-11\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2150\\\\\\\"\\u003ev2.15.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-12\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2140\\\\\\\"\\u003ev2.14.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-2\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-13\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-3\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-1\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2131\\\\\\\"\\u003ev2.13.1\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-14\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2130\\\\\\\"\\u003ev2.13.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#whats-changed\\\\\\\"\\u003eWhat's Changed\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#stabilized-apis\\\\\\\"\\u003eStabilized APIs\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-3\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-15\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-4\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-2\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2121\\\\\\\"\\u003ev2.12.1\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-16\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-3\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2120\\\\\\\"\\u003ev2.12.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#whats-changed-1\\\\\\\"\\u003eWhat's Changed\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#future-flag-for-automatic-dependency-optimization-unstable\\\\\\\"\\u003eFuture Flag for Automatic Dependency Optimization (unstable)\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#improved-single-fetch-type-safety-unstable\\\\\\\"\\u003eImproved Single Fetch Type Safety (unstable)\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updates-to-single-fetch-revalidation-behavior-unstable\\\\\\\"\\u003eUpdates to Single Fetch Revalidation Behavior (unstable)\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-4\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-17\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-5\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-4\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2112\\\\\\\"\\u003ev2.11.2\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-18\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-6\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-5\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2111\\\\\\\"\\u003ev2.11.1\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-19\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-6\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2110\\\\\\\"\\u003ev2.11.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#whats-changed-2\\\\\\\"\\u003eWhat's Changed\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#renamed-unstable_fogofwar-future-flag-to-unstable_lazyroutediscovery-unstable\\\\\\\"\\u003eRenamed \\u003ccode\\u003eunstable_fogOfWar\\u003c/code\\u003e future flag to \\u003ccode\\u003eunstable_lazyRouteDiscovery\\u003c/code\\u003e (unstable)\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#removed-response-stub-in-single-fetch-unstable\\\\\\\"\\u003eRemoved \\u003ccode\\u003eresponse\\u003c/code\\u003e stub in Single Fetch (unstable)\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-5\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-20\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-7\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-7\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2103\\\\\\\"\\u003ev2.10.3\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-21\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-8\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-8\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2102\\\\\\\"\\u003ev2.10.2\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-22\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-9\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2101\\\\\\\"\\u003ev2.10.1\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-23\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-9\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-10\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v2100\\\\\\\"\\u003ev2.10.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#whats-changed-3\\\\\\\"\\u003eWhat's Changed\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#lazy-route-discovery-aka-fog-of-war\\\\\\\"\\u003eLazy Route Discovery (a.k.a. \\\\\\\"Fog of War\\\\\\\")\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-6\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-24\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-10\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-11\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v292\\\\\\\"\\u003ev2.9.2\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#whats-changed-4\\\\\\\"\\u003eWhat's Changed\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-type-safety-for-single-fetch\\\\\\\"\\u003eUpdated Type-Safety for Single Fetch\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-25\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-11\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-12\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v291\\\\\\\"\\u003ev2.9.1\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-26\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-13\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v290\\\\\\\"\\u003ev2.9.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#whats-changed-5\\\\\\\"\\u003eWhat's Changed\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#single-fetch-unstable\\\\\\\"\\u003eSingle Fetch (unstable)\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#undici\\\\\\\"\\u003eUndici\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-7\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-27\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-12\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-14\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v281\\\\\\\"\\u003ev2.8.1\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-28\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-13\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-15\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v280\\\\\\\"\\u003ev2.8.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-8\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-29\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-14\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-16\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#272\\\\\\\"\\u003e2.7.2\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-30\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#271\\\\\\\"\\u003e2.7.1\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-31\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v270\\\\\\\"\\u003ev2.7.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#whats-changed-6\\\\\\\"\\u003eWhat's Changed\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#stabilized-vite-plugin\\\\\\\"\\u003eStabilized Vite Plugin\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#new-layout-export\\\\\\\"\\u003eNew \\u003ccode\\u003eLayout\\u003c/code\\u003e Export\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#basename-support\\\\\\\"\\u003eBasename support\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#cloudflare-proxy-as-a-vite-plugin\\\\\\\"\\u003eCloudflare Proxy as a Vite Plugin\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-9\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-32\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-15\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-17\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v260\\\\\\\"\\u003ev2.6.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#whats-changed-7\\\\\\\"\\u003eWhat's Changed\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#unstable-vite-plugin-updates\\\\\\\"\\u003eUnstable Vite Plugin updates\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-10\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-33\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-16\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-18\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v251\\\\\\\"\\u003ev2.5.1\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-34\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-17\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-19\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v250\\\\\\\"\\u003ev2.5.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#whats-changed-8\\\\\\\"\\u003eWhat's Changed\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#spa-mode-unstable\\\\\\\"\\u003eSPA Mode (unstable)\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#server-bundles-unstable\\\\\\\"\\u003eServer Bundles (unstable)\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-11\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-35\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-18\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-20\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v241\\\\\\\"\\u003ev2.4.1\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-36\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-19\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-21\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v240\\\\\\\"\\u003ev2.4.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#whats-changed-9\\\\\\\"\\u003eWhat's Changed\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#client-data\\\\\\\"\\u003eClient Data\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#futurev3_relativesplatpath\\\\\\\"\\u003e\\u003ccode\\u003efuture.v3_relativeSplatPath\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#vite-updates-unstable\\\\\\\"\\u003eVite Updates (Unstable)\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-12\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-37\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-20\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-22\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v231\\\\\\\"\\u003ev2.3.1\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-38\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-21\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-23\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v230\\\\\\\"\\u003ev2.3.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#whats-changed-10\\\\\\\"\\u003eWhat's Changed\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#stabilized-useblocker\\\\\\\"\\u003eStabilized \\u003ccode\\u003euseBlocker\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#unstable_flushsync-api\\\\\\\"\\u003e\\u003ccode\\u003eunstable_flushSync\\u003c/code\\u003e API\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-13\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-39\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-22\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-24\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v220\\\\\\\"\\u003ev2.2.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#whats-changed-11\\\\\\\"\\u003eWhat's Changed\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#vite\\\\\\\"\\u003eVite!\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#new-fetcher-apis\\\\\\\"\\u003eNew Fetcher APIs\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#persistence-future-flag\\\\\\\"\\u003ePersistence Future Flag\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-14\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-40\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-23\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-25\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v210\\\\\\\"\\u003ev2.1.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#whats-changed-12\\\\\\\"\\u003eWhat's Changed\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#view-transitions\\\\\\\"\\u003eView Transitions\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#stable-createremixstub\\\\\\\"\\u003eStable \\u003ccode\\u003ecreateRemixStub\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#minor-changes-15\\\\\\\"\\u003eMinor Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-41\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-24\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-26\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v201\\\\\\\"\\u003ev2.0.1\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#patch-changes-42\\\\\\\"\\u003ePatch Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-\\\\\\\"\\u003eChanges by Package 🔗\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#v200\\\\\\\"\\u003ev2.0.0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#breaking-changes\\\\\\\"\\u003eBreaking Changes\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#upgraded-dependency-requirements\\\\\\\"\\u003eUpgraded Dependency Requirements\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#removed-future-flags\\\\\\\"\\u003eRemoved Future Flags\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#breaking-changesapi-removals\\\\\\\"\\u003eBreaking Changes/API Removals\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#with-deprecation-warnings\\\\\\\"\\u003eWith deprecation warnings\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#without-deprecation-warnings\\\\\\\"\\u003eWithout deprecation warnings\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#breaking-type-changes\\\\\\\"\\u003eBreaking Type Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#new-features\\\\\\\"\\u003eNew Features\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#other-notable-changes\\\\\\\"\\u003eOther Notable Changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#updated-dependencies-25\\\\\\\"\\u003eUpdated Dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"#changes-by-package-27\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/details\\u003e\\\\n\\u003c!--\\\\nTo add a new release, copy from this template:\\\\n\\\\n## v2.X.Y\\\\n\\\\nDate: YYYY-MM-DD\\\\n\\\\n### What's Changed\\\\n\\\\n#### Big New Feature 1\\\\n\\\\n#### Big New Feature 2\\\\n\\\\n### Minor Changes\\\\n\\\\n### Patch Changes\\\\n\\\\n### Updated Dependencies\\\\n\\\\n- [`react-router-dom@6.X.Y`](https://github.com/remix-run/react-router/releases/tag/react-router%406.X.Y)\\\\n- [`@remix-run/router@1.X.Y`](https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1XY)\\\\n\\\\n### Changes by Package\\\\n\\\\n- [`create-remix`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/create-remix/CHANGELOG.md#2XY)\\\\n- [`@remix-run/architect`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-architect/CHANGELOG.md#2XY)\\\\n- [`@remix-run/cloudflare`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-cloudflare/CHANGELOG.md#2XY)\\\\n- [`@remix-run/cloudflare-pages`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-cloudflare-pages/CHANGELOG.md#2XY)\\\\n- [`@remix-run/cloudflare-workers`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-cloudflare-workers/CHANGELOG.md#2XY)\\\\n- [`@remix-run/css-bundle`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-css-bundle/CHANGELOG.md#2XY)\\\\n- [`@remix-run/deno`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-deno/CHANGELOG.md#2XY)\\\\n- [`@remix-run/dev`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-dev/CHANGELOG.md#2XY)\\\\n- [`@remix-run/eslint-config`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-eslint-config/CHANGELOG.md#2XY)\\\\n- [`@remix-run/express`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-express/CHANGELOG.md#2XY)\\\\n- [`@remix-run/fs-routes`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-fs-routes/CHANGELOG.md#2XY)\\\\n- [`@remix-run/node`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-node/CHANGELOG.md#2XY)\\\\n- [`@remix-run/react`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-react/CHANGELOG.md#2XY)\\\\n- [`@remix-run/route-config`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-route-config/CHANGELOG.md#2XY)\\\\n- [`@remix-run/routes-option-adapter`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-routes-option-adapter/CHANGELOG.md#2XY)\\\\n- [`@remix-run/serve`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-serve/CHANGELOG.md#2XY)\\\\n- [`@remix-run/server-runtime`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-server-runtime/CHANGELOG.md#2XY)\\\\n- [`@remix-run/testing`](https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/remix-testing/CHANGELOG.md#2XY)\\\\n\\\\n**Full Changelog**: [`v2.X.Y...v2.X.Y`](https://github.com/remix-run/remix/compare/remix@2.X.Y...remix@2.X.Y)\\\\n\\\\n--\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2170\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2170\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.17.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2025-07-25\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e - Redirect users to \\u003ccode\\u003ecreate-react-router\\u003c/code\\u003e instead of \\u003ccode\\u003ecreate-remix\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10686\\\\\\\"\\u003e#10686\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10688\\\\\\\"\\u003e#10688\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRemix v2 is in maintenance mode so we don't want new Remix apps to be created\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.X.Y/packages/create-remix/CHANGELOG.md#2170\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.16.8...remix@2.17.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.16.8...v2.17.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2168\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2168\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.16.8\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2025-05-29\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e - Update \\u003ccode\\u003etar-fs\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10638\\\\\\\"\\u003e#10638\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.16.7...remix@2.16.8\\\\\\\"\\u003e\\u003ccode\\u003ev2.16.7...v2.16.8\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2167\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2167\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.16.7\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2025-05-19\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-1\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-1\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Update \\u003ccode\\u003evite-node\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10611\\\\\\\"\\u003e#10611\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.16.6...remix@2.16.7\\\\\\\"\\u003e\\u003ccode\\u003ev2.16.6...v2.16.7\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2166\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2166\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.16.6\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2025-05-08\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-2\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-2\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Upgrade \\u003ccode\\u003eturbo-stream\\u003c/code\\u003e to \\u003ccode\\u003e2.4.1\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9973\\\\\\\"\\u003e#9973\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Fix \\u003ccode\\u003ewindow is not defined\\u003c/code\\u003e error in Single Fetch when server-rendering \\u003ccode\\u003e\\u0026#x3C;PrefetchPageLinks\\u003e\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10601\\\\\\\"\\u003e#10601\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e - Remove redundant \\u003ccode\\u003e@remix-run/node/install\\u003c/code\\u003e import from \\u003ccode\\u003eremix-serve\\u003c/code\\u003e because it manually calls \\u003ccode\\u003einstallGlobals\\u003c/code\\u003e separately (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10306\\\\\\\"\\u003e#10306\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.16.5...remix@2.16.6\\\\\\\"\\u003e\\u003ccode\\u003ev2.16.5...v2.16.6\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2165\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2165\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.16.5\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2025-04-09\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-3\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-3\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e - Bump \\u003ccode\\u003eundici\\u003c/code\\u003e to version \\u003ccode\\u003e6.21.2\\u003c/code\\u003e to address a \\u003ca href=\\\\\\\"https://github.com/nodejs/undici/security/advisories/GHSA-c76h-2ccp-4975\\\\\\\"\\u003esecurity advisory\\u003c/a\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10562\\\\\\\"\\u003e#10562\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.16.4...remix@2.16.5\\\\\\\"\\u003e\\u003ccode\\u003ev2.16.4...v2.16.5\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2164\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2164\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.16.4\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2025-03-31\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-4\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-4\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Bump \\u003ccode\\u003ecookie\\u003c/code\\u003e dependency from \\u003ccode\\u003e^0.6.0 -\\u003e ^0.7.2\\u003c/code\\u003e to fix \\u003ca href=\\\\\\\"https://github.com/advisories/GHSA-pxg6-pf52-xh8x\\\\\\\"\\u003esecurity advisory\\u003c/a\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10547\\\\\\\"\\u003e#10547\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.16.3...remix@2.16.4\\\\\\\"\\u003e\\u003ccode\\u003ev2.16.3...v2.16.4\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2163\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2163\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.16.3\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2025-03-28\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"security-notice\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#security-notice\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSecurity Notice\\u003c/h3\\u003e\\\\n\\u003cp\\u003eFixed a security vulnerability that allowed URL manipulation and potential cache pollution via the \\u003ccode\\u003eHost\\u003c/code\\u003e and \\u003ccode\\u003eX-Forwarded-Host\\u003c/code\\u003e headers due to inadequate port sanitization.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-5\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-5\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e - Better validation of \\u003ccode\\u003ex-forwarded-host\\u003c/code\\u003e header to prevent potential security issues (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10553\\\\\\\"\\u003e#10553\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.16.2...remix@2.16.3\\\\\\\"\\u003e\\u003ccode\\u003ev2.16.2...v2.16.3\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2162\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2162\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.16.2\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2025-03-19\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-6\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-6\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Fix \\u003ccode\\u003eshouldRevalidate\\u003c/code\\u003e behavior for \\u003ccode\\u003eclientLoader\\u003c/code\\u003e-only routes in \\u003ccode\\u003essr:true\\u003c/code\\u003e apps (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10527\\\\\\\"\\u003e#10527\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Load ancestor pathless/index routes in lazy route discovery for upwards non-eager-discovery routing (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10535\\\\\\\"\\u003e#10535\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.16.1...remix@2.16.2\\\\\\\"\\u003e\\u003ccode\\u003ev2.16.1...v2.16.2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2161\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2161\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.16.1\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2025-03-17\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-7\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-7\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Remove unused Vite file system watcher (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10510\\\\\\\"\\u003e#10510\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - When \\u003ccode\\u003efuture.v3_routeConfig\\u003c/code\\u003e is enabled, fix errors evaluating \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e when multiple copies of \\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e are present (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10524\\\\\\\"\\u003e#10524\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Fix Vite import analysis of \\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e failing when the package is not marked as external (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10528\\\\\\\"\\u003e#10528\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.16.0...remix@2.16.1\\\\\\\"\\u003e\\u003ccode\\u003ev2.16.0...v2.16.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2160\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2160\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.16.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2025-02-27\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-1\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-1\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Add Vite v6 support (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10351\\\\\\\"\\u003e#10351\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-8\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-8\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Clean up vite-node dev server when build finishes (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10477\\\\\\\"\\u003e#10477\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Don't apply Single Fetch revalidation de-optimization when in SPA mode since there is no server HTTP request (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10479\\\\\\\"\\u003e#10479\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - When using Lazy Route Discovery (\\u003ccode\\u003efuture.v3_lazyRouteDiscovery\\u003c/code\\u003e), Remix will now detect manifest version mismatches after a new deploy and trigger a document reload to sync up any active client sessions with the newly deployed version (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10498\\\\\\\"\\u003e#10498\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eOn navigations to undiscovered routes, this mismatch will trigger a document reload of the destination path\\u003c/li\\u003e\\\\n\\u003cli\\u003eOn \\u003ccode\\u003efetcher\\u003c/code\\u003e calls to undiscovered routes, this mismatch will trigger a document reload of the current path\\u003c/li\\u003e\\\\n\\u003cli\\u003eWhile performing Eager Route Discovery on rendered \\u003ccode\\u003e\\u0026#x3C;Link\\u003e\\u003c/code\\u003e components, mismatches will result in a no-op\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.30.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.30.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.23.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.15.3...remix@2.16.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.15.3...v2.16.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2153\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2153\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.15.3\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2025-01-30\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-9\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-9\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Properly handle interrupted manifest requests in lazy route discovery (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10447\\\\\\\"\\u003e#10447\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Avoid duplication of \\u003ccode\\u003eSet-Cookie\\u003c/code\\u003e headers if also returned from \\u003ccode\\u003eheaders\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10424\\\\\\\"\\u003e#10424\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Properly handle status codes that cannot have a body in single fetch responses (204, etc.) (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10410\\\\\\\"\\u003e#10410\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-1\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-1\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.29.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.29.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.22.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.15.2...remix@2.15.3\\\\\\\"\\u003e\\u003ccode\\u003ev2.15.2...v2.15.3\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2152\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2152\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.15.2\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-12-20\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-10\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-10\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Allow suppression of future flag warnings by setting them to \\u003ccode\\u003efalse\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10358\\\\\\\"\\u003e#10358\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Throw unwrapped Single Fetch \\u003ccode\\u003eredirect\\u003c/code\\u003e to align with pre-Single Fetch behavior (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10317\\\\\\\"\\u003e#10317\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-2\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-2\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.28.1\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.28.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.15.1...remix@2.15.2\\\\\\\"\\u003e\\u003ccode\\u003ev2.15.1...v2.15.2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2151\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2151\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.15.1\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-12-09\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-11\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-11\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e - Move \\u003ccode\\u003efs-extra\\u003c/code\\u003e from \\u003ccode\\u003edevDependencies\\u003c/code\\u003e to \\u003ccode\\u003edependencies\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10300\\\\\\\"\\u003e#10300\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.15.0...remix@2.15.1\\\\\\\"\\u003e\\u003ccode\\u003ev2.15.0...v2.15.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2150\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2150\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.15.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-11-19\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-12\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-12\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eStabilize the \\u003ccode\\u003efuture.v3_routeConfig\\u003c/code\\u003e future flag, replacing \\u003ccode\\u003efuture.unstable_routeConfig\\u003c/code\\u003e. This enables support for \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e to assist with the migration to React Router v7. (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10236\\\\\\\"\\u003e#10236\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cp\\u003eNote that if you had already enabled the \\u003ccode\\u003efuture.unstable_routeConfig\\u003c/code\\u003e flag, your route config in \\u003ccode\\u003eapp/routes.ts\\u003c/code\\u003e is no longer defined via the \\u003ccode\\u003eroutes\\u003c/code\\u003e export and must now be defined via the default export.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003eimport { type RouteConfig } from \\\\\\\"@remix-run/route-config\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eexport const routes: RouteConfig = [];\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eexport default [] satisfies RouteConfig;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2140\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2140\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.14.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-11-08\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-2\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-2\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eDeprecate \\u003ccode\\u003eSerializeFrom\\u003c/code\\u003e in favor of generics because it will be removed in React Router v7 (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10173\\\\\\\"\\u003e#10173\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eAdd deprecation warning to \\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10174\\\\\\\"\\u003e#10174\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eAdd support for \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e behind \\u003ccode\\u003efuture.unstable_routeConfig\\u003c/code\\u003e flag to assist with the migration to React Router v7. (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10107\\\\\\\"\\u003e#10107\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cp\\u003eConfig-based routing is the new default in React Router v7, configured via the \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e file in the app directory. Support for \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e and its related APIs in Remix are designed as a migration path to help minimize the number of changes required when moving your Remix project over to React Router v7. While some new packages have been introduced within the \\u003ccode\\u003e@remix-run\\u003c/code\\u003e scope, these new packages only exist to keep the code in \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e as similar as possible to the equivalent code for React Router v7.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWhen the \\u003ccode\\u003eunstable_routeConfig\\u003c/code\\u003e future flag is enabled, Remix's built-in file system routing will be disabled and your project will opted into React Router v7's config-based routing.\\u003c/p\\u003e\\\\n\\u003cp\\u003eTo enable the flag, in your \\u003ccode\\u003evite.config.ts\\u003c/code\\u003e file:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e unstable_routeConfig: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eA minimal \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e file to support Remix's built-in file system routing looks like this:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// app/routes.ts\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eflatRoutes\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/fs-routes\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eRouteConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/route-config\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eroutes\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRouteConfig\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eflatRoutes\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eLog deprecation warnings for v3 future flags (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10126\\\\\\\"\\u003e#10126\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eAdd \\u003ccode\\u003e@deprecated\\u003c/code\\u003e annotations to \\u003ccode\\u003ejson\\u003c/code\\u003e/\\u003ccode\\u003edefer\\u003c/code\\u003e utilities\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-13\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-13\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Fix \\u003ccode\\u003edefaultShouldRevalidate\\u003c/code\\u003e value when using Single Fetch (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10139\\\\\\\"\\u003e#10139\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Update externally-accessed resource routes warning to cover \\u003ccode\\u003enull\\u003c/code\\u003e usage as well (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10145\\\\\\\"\\u003e#10145\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-3\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-3\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.28.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.28.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.21.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-1\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-1\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/create-remix/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-architect/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-cloudflare/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-cloudflare-pages/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-cloudflare-workers/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-css-bundle/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-deno/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-dev/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-eslint-config/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-express/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-fs-routes/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/fs-routes\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-node/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-react/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-route-config/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/route-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-routes-option-adapter/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/routes-option-adapter\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-serve/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-server-runtime/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.14.0/packages/remix-testing/CHANGELOG.md#2140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.13.1...remix@2.14.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.13.1...v2.14.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2131\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2131\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.13.1\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-10-11\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-14\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-14\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Revert \\u003ccode\\u003efuture.v3_optimizeDeps\\u003c/code\\u003e back to \\u003ccode\\u003efuture.unstable_optimizeDeps\\u003c/code\\u003e as it was not intended to stabilize in Remix v2 (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10099\\\\\\\"\\u003e#10099\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.13.0...remix@2.13.1\\\\\\\"\\u003e\\u003ccode\\u003ev2.13.0...v2.13.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2130\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2130\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.13.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-10-11\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"whats-changed\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#whats-changed\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhat's Changed\\u003c/h3\\u003e\\\\n\\u003ch4 id=\\\\\\\"stabilized-apis\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#stabilized-apis\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eStabilized APIs\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThis release stabilizes a handful of \\\\\\\"unstable\\\\\\\" APIs in preparation for the \\u003ca href=\\\\\\\"https://x.com/remix_run/status/1841926034868077009\\\\\\\"\\u003epending\\u003c/a\\u003e React Router v7 release (see \\u003ca href=\\\\\\\"https://remix.run/blog/merging-remix-and-react-router\\\\\\\"\\u003ethese\\u003c/a\\u003e \\u003ca href=\\\\\\\"https://remix.run/blog/incremental-path-to-react-19\\\\\\\"\\u003eposts\\u003c/a\\u003e for more info):\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_data\\u003c/code\\u003e → \\u003ccode\\u003edata\\u003c/code\\u003e (for use with Single Fetch)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_flushSync\\u003c/code\\u003e → \\u003ccode\\u003eflushSync\\u003c/code\\u003e (\\u003ccode\\u003euseSubmit\\u003c/code\\u003e, \\u003ccode\\u003efetcher.load\\u003c/code\\u003e, \\u003ccode\\u003efetcher.submit\\u003c/code\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_viewTransition\\u003c/code\\u003e → \\u003ccode\\u003eviewTransition\\u003c/code\\u003e (\\u003ccode\\u003e\\u0026#x3C;Link\\u003e\\u003c/code\\u003e, \\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e, \\u003ccode\\u003euseNavigate\\u003c/code\\u003e, \\u003ccode\\u003euseSubmit\\u003c/code\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cdel\\u003e\\u003ccode\\u003efuture.unstable_optimizeDeps\\u003c/code\\u003e → \\u003ccode\\u003efuture.v3_optimizeDeps\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://remix.run/docs/en/main/guides/dependency-optimization\\\\\\\"\\u003eDocs\\u003c/a\\u003e)\\u003c/del\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e⚠️ This flag was not intended to stabilize in Remix v2 and was reverted back to \\u003ccode\\u003efuture.unstable_optimizeDeps\\u003c/code\\u003e in \\u003ccode\\u003e2.13.1\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efuture.unstable_lazyRouteDiscovery\\u003c/code\\u003e → \\u003ccode\\u003efuture.v3_lazyRouteDiscovery\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://remix.run/docs/guides/lazy-route-discovery\\\\\\\"\\u003eDocs\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efuture.unstable_singleFetch\\u003c/code\\u003e → \\u003ccode\\u003efuture.v3_singleFetch\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://remix.run/docs/guides/single-fetch\\\\\\\"\\u003eDocs\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-3\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-3\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eStabilize React Router APIs in Remix (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9980\\\\\\\"\\u003e#9980\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eAdopt stabilized React Router APIs internally\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eSingle Fetch: \\u003ccode\\u003eunstable_dataStrategy\\u003c/code\\u003e -\\u003e \\u003ccode\\u003edataStrategy\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eLazy Route Discovery: \\u003ccode\\u003eunstable_patchRoutesOnNavigation\\u003c/code\\u003e -\\u003e \\u003ccode\\u003epatchRoutesOnNavigation\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eStabilize public-facing APIs\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eSingle Fetch: \\u003ccode\\u003eunstable_data()\\u003c/code\\u003e -\\u003e \\u003ccode\\u003edata()\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_viewTransition\\u003c/code\\u003e -\\u003e \\u003ccode\\u003eviewTransition\\u003c/code\\u003e (\\u003ccode\\u003eLink\\u003c/code\\u003e, \\u003ccode\\u003eForm\\u003c/code\\u003e, \\u003ccode\\u003enavigate\\u003c/code\\u003e, \\u003ccode\\u003esubmit\\u003c/code\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_flushSync\\u003e\\u003c/code\\u003e -\\u003e \\u003ccode\\u003e\\u0026#x3C;Link viewTransition\\u003e\\u003c/code\\u003e (\\u003ccode\\u003eLink\\u003c/code\\u003e, \\u003ccode\\u003eForm\\u003c/code\\u003e, \\u003ccode\\u003enavigate\\u003c/code\\u003e, \\u003ccode\\u003esubmit\\u003c/code\\u003e, \\u003ccode\\u003euseFetcher\\u003c/code\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eStabilize future flags (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10072\\\\\\\"\\u003e#10072\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10092\\\\\\\"\\u003e#10092\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efuture.unstable_lazyRouteDiscovery\\u003c/code\\u003e -\\u003e \\u003ccode\\u003efuture.v3_lazyRouteDiscovery\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efuture.unstable_optimizeDeps\\u003c/code\\u003e -\\u003e \\u003ccode\\u003efuture.v3_optimizeDeps\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efuture.unstable_singleFetch\\u003c/code\\u003e -\\u003e \\u003ccode\\u003efuture.v3_singleFetch\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-15\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-15\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Stop passing \\u003ccode\\u003erequest.signal\\u003c/code\\u003e as the \\u003ccode\\u003erenderToReadableStream\\u003c/code\\u003e \\u003ccode\\u003esignal\\u003c/code\\u003e to abort server rendering for cloudflare/deno runtimes because by the time that \\u003ccode\\u003erequest\\u003c/code\\u003e is aborted, aborting the rendering is useless because there's no way for React to flush down the unresolved boundaries (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10047\\\\\\\"\\u003e#10047\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eThis has been incorrect for some time, but only recently exposed due to a bug in how we were aborting requests when running via \\u003ccode\\u003eremix vite:dev\\u003c/code\\u003e because we were incorrectly aborting requests after successful renders - which was causing us to abort a completed React render, and try to close an already closed \\u003ccode\\u003eReadableStream\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eThis has likely not shown up in any production scenarios because cloudflare/deno production runtimes are (correctly) not aborting the \\u003ccode\\u003erequest.signal\\u003c/code\\u003e on successful renders\\u003c/li\\u003e\\\\n\\u003cli\\u003eThe built-in \\u003ccode\\u003eentry.server\\u003c/code\\u003e files no longer pass a \\u003ccode\\u003esignal\\u003c/code\\u003e to \\u003ccode\\u003erenderToReadableStream\\u003c/code\\u003e because adding a timeout-based abort signal to the default behavior would constitute a breaking change\\u003c/li\\u003e\\\\n\\u003cli\\u003eUsers can configure this abort behavior via their own \\u003ccode\\u003eentry.server\\u003c/code\\u003e via \\u003ccode\\u003eremix reveal entry.server\\u003c/code\\u003e, and the template entry.server files have been updated with an example approach for newly created Remix apps\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e - Fix adapter logic for aborting \\u003ccode\\u003erequest.signal\\u003c/code\\u003e so we don't incorrectly abort on the \\u003ccode\\u003eclose\\u003c/code\\u003e event for successful requests (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10046\\\\\\\"\\u003e#10046\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Fix bug with \\u003ccode\\u003eclientLoader.hydrate\\u003c/code\\u003e in a layout route when hydrating with bubbled errors (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/10063\\\\\\\"\\u003e#10063\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-4\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-4\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.27.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.27.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.20.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-2\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-2\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/create-remix/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/remix-architect/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/remix-cloudflare/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/remix-cloudflare-pages/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/remix-cloudflare-workers/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/remix-css-bundle/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/remix-deno/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/remix-dev/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/remix-eslint-config/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/remix-express/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/remix-node/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/remix-react/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/remix-serve/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/remix-server-runtime/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.13.0/packages/remix-testing/CHANGELOG.md#2130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.12.1...remix@2.13.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.12.1...v2.13.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2121\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2121\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.12.1\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-09-19\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-16\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-16\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Properly abort \\u003ccode\\u003erequest.signal\\u003c/code\\u003e during \\u003ccode\\u003evite dev\\u003c/code\\u003e when the node response is closed (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9976\\\\\\\"\\u003e#9976\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - CSS imports with \\u003ccode\\u003e?inline\\u003c/code\\u003e, \\u003ccode\\u003e?inline-css\\u003c/code\\u003e and \\u003ccode\\u003e?raw\\u003c/code\\u003e are no longer incorrectly injected during SSR in development (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9910\\\\\\\"\\u003e#9910\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e: Single Fetch: Fix types when \\u003ccode\\u003eloader\\u003c/code\\u003e, \\u003ccode\\u003eaction\\u003c/code\\u003e, \\u003ccode\\u003eclientLoader\\u003c/code\\u003e, or \\u003ccode\\u003eclientAction\\u003c/code\\u003e return a mixture of bare objects, \\u003ccode\\u003ejson(...)\\u003c/code\\u003e, \\u003ccode\\u003edefer(...)\\u003c/code\\u003e, and \\u003ccode\\u003eunstable_data(...)\\u003c/code\\u003e. (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9999\\\\\\\"\\u003e#9999\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e/\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e/\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e - Single Fetch: Re-export \\u003ccode\\u003einterface Future\\u003c/code\\u003e through runtime packages so that \\u003ccode\\u003epnpm\\u003c/code\\u003e doesn't complain about \\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e not being a dependency (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9982\\\\\\\"\\u003e#9982\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eIf you've already opted into Single Fetch, you can change your \\u003ca href=\\\\\\\"https://remix.run/docs/guides/single-fetch#enable-single-fetch-types\\\\\\\"\\u003eSingle Fetch type augmentation\\u003c/a\\u003e in \\u003ccode\\u003evite.config.ts\\u003c/code\\u003e to augment \\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e (or \\u003ccode\\u003ecloudflare\\u003c/code\\u003e/\\u003ccode\\u003edeno\\u003c/code\\u003e) instead of \\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-3\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-3\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.12.0/packages/remix-cloudflare/CHANGELOG.md#2121\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.12.0/packages/remix-deno/CHANGELOG.md#2121\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.12.0/packages/remix-dev/CHANGELOG.md#2121\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.12.0/packages/remix-node/CHANGELOG.md#2121\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.12.0/packages/remix-server-runtime/CHANGELOG.md#2121\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.12.0...remix@2.12.1\\\\\\\"\\u003e\\u003ccode\\u003ev2.12.0...v2.12.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2120\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2120\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.12.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-09-09\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"whats-changed-1\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#whats-changed-1\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhat's Changed\\u003c/h3\\u003e\\\\n\\u003ch4 id=\\\\\\\"future-flag-for-automatic-dependency-optimization-unstable\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#future-flag-for-automatic-dependency-optimization-unstable\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eFuture Flag for Automatic Dependency Optimization (unstable)\\u003c/h4\\u003e\\\\n\\u003cp\\u003eYou can now opt-in to automatic dependency optimization during development by using the \\u003ccode\\u003efuture.unstable_optimizeDeps\\u003c/code\\u003e future flag. For details, check out the docs at \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/guides/dependency-optimization\\\\\\\"\\u003eGuides \\u003e Dependency optimization\\u003c/a\\u003e. For users who were previously working around this limitation, you no longer need to explicitly add routes to Vite's \\u003ccode\\u003eoptimizeDeps.entries\\u003c/code\\u003e nor do you need to disable the \\u003ccode\\u003eremix-dot-server\\u003c/code\\u003e plugin.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"improved-single-fetch-type-safety-unstable\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#improved-single-fetch-type-safety-unstable\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eImproved Single Fetch Type Safety (unstable)\\u003c/h4\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eIf you were already using single-fetch types:\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRemove the \\u003ccode\\u003e\\\\\\\"@remix-run/react/future/single-fetch.d.ts\\\\\\\"\\u003c/code\\u003e override from \\u003ccode\\u003etsconfig.json\\u003c/code\\u003e \\u003e \\u003ccode\\u003ecompilerOptions\\u003c/code\\u003e \\u003e \\u003ccode\\u003etypes\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemove \\u003ccode\\u003edefineLoader\\u003c/code\\u003e, \\u003ccode\\u003edefineAction\\u003c/code\\u003e, \\u003ccode\\u003edefineClientLoader\\u003c/code\\u003e, \\u003ccode\\u003edefineClientAction\\u003c/code\\u003e helpers from your route modules\\u003c/li\\u003e\\\\n\\u003cli\\u003eReplace \\u003ccode\\u003eUIMatch_SingleFetch\\u003c/code\\u003e type helper with the original \\u003ccode\\u003eUIMatch\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eReplace \\u003ccode\\u003eMetaArgs_SingleFetch\\u003c/code\\u003e type helper with the original \\u003ccode\\u003eMetaArgs\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eThen you are ready for the new type safety setup:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// vite.config.ts\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edeclare\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003emodule\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/server-runtime\\u003c/span\\u003e\\\\\\\" {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003einterface\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eFuture\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eunstable_singleFetch\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003etrue\\u003c/span\\u003e; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// 👈 enable _types_ for single-fetch\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e plugins: [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e unstable_singleFetch: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// 👈 enable single-fetch\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e }),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e ],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eFor more information, see \\u003ca href=\\\\\\\"https://remix.run/docs/guides/single-fetch\\\\\\\"\\u003eGuides \\u003e Single Fetch\\u003c/a\\u003e in our docs.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"updates-to-single-fetch-revalidation-behavior-unstable\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updates-to-single-fetch-revalidation-behavior-unstable\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdates to Single Fetch Revalidation Behavior (unstable)\\u003c/h4\\u003e\\\\n\\u003cp\\u003eWith Single Fetch, re-used routes will now revalidate by default on \\u003ccode\\u003eGET\\u003c/code\\u003e navigations. This is aimed at improving caching of Single Fetch calls in the simple case while still allowing users to opt-into the previous behavior for more advanced use cases.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWith this new behavior, requests do not need special query params for granular route revalidations out of the box - i.e., \\u003ccode\\u003eGET /a/b/c.data\\u003c/code\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eThere are two conditions that will trigger granular revalidation and will exclude certain routes from the single fetch call:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eIf a route opts out of revalidation via \\u003ccode\\u003eshouldRevalidate\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eIf a route defines a \\u003ccode\\u003eclientLoader\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eIf you call \\u003ccode\\u003eserverLoader()\\u003c/code\\u003e from your \\u003ccode\\u003eclientLoader\\u003c/code\\u003e, that will make a separate HTTP call for just that route loader - i.e., \\u003ccode\\u003eGET /a/b/c.data?_routes=routes/a\\u003c/code\\u003e for a \\u003ccode\\u003eclientLoader\\u003c/code\\u003e in \\u003ccode\\u003eroutes/a.tsx\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eWhen one or more routes are excluded from the Single Fetch call, the remaining routes that have loaders are included as query params. For example, when navigating to \\u003ccode\\u003e/a/b/c\\u003c/code\\u003e, if A was excluded, and the \\u003ccode\\u003eroot\\u003c/code\\u003e route and \\u003ccode\\u003eroutes/b\\u003c/code\\u003e had a \\u003ccode\\u003eloader\\u003c/code\\u003e but \\u003ccode\\u003eroutes/c\\u003c/code\\u003e did not, the Single Fetch request would be \\u003ccode\\u003eGET /a/b/c.data?_routes=root,routes/b\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor more information, see \\u003ca href=\\\\\\\"https://remix.run/docs/guides/single-fetch\\\\\\\"\\u003eGuides \\u003e Single Fetch\\u003c/a\\u003e in our docs.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-4\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-4\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - New \\u003ccode\\u003efuture.unstable_optimizeDeps\\u003c/code\\u003e flag for automatic dependency optimization (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9921\\\\\\\"\\u003e#9921\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-17\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-17\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Handle circular dependencies in modulepreload manifest generation (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9917\\\\\\\"\\u003e#9917\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Fix \\u003ccode\\u003edest already exists\\u003c/code\\u003e build errors by only moving SSR assets to the client build directory when they're not already present on disk (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9901\\\\\\\"\\u003e#9901\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Clarify wording in default \\u003ccode\\u003eHydrateFallback\\u003c/code\\u003e console warning (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9899\\\\\\\"\\u003e#9899\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Remove hydration URL check that was originally added for React 17 hydration issues and we no longer support React 17 (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9890\\\\\\\"\\u003e#9890\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eReverts the logic originally added in Remix \\u003ccode\\u003ev1.18.0\\u003c/code\\u003e via \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6409\\\\\\\"\\u003e#6409\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eThis was added to resolve an issue that could arise when doing quick back/forward history navigations while JS was loading which would cause a mismatch between the server matches and client matches: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/issues/1757\\\\\\\"\\u003e#1757\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eThis specific hydration issue would then cause this React v17 only looping issue: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/issues/1678\\\\\\\"\\u003e#1678\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eThe URL comparison that we added in \\u003ccode\\u003e1.18.0\\u003c/code\\u003e turned out to be subject to false positives of it's own which could also put the user in looping scenarios\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemix v2 upgraded it's minimal React version to v18 which eliminated the v17 hydration error loop\\u003c/li\\u003e\\\\n\\u003cli\\u003eReact v18 handles this hydration error like any other error and does not result in a loop\\u003c/li\\u003e\\\\n\\u003cli\\u003eSo we can remove our check and thus avoid the false-positive scenarios in which it may also trigger a loop\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Lazy Route Discovery: Sort \\u003ccode\\u003e/__manifest\\u003c/code\\u003e query parameters for better caching (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9888\\\\\\\"\\u003e#9888\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Single Fetch: Improved type safety (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9893\\\\\\\"\\u003e#9893\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Single Fetch: Fix revalidation behavior bugs (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9938\\\\\\\"\\u003e#9938\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Do not render or try to include a body for 304 responses on document requests (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9955\\\\\\\"\\u003e#9955\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Single Fetch: Do not try to encode a \\u003ccode\\u003eturbo-stream\\u003c/code\\u003e body into 304 responses (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9941\\\\\\\"\\u003e#9941\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Single Fetch: Change content type on \\u003ccode\\u003e.data\\u003c/code\\u003e requests to \\u003ccode\\u003etext/x-script\\u003c/code\\u003e to allow Cloudflare compression (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9889\\\\\\\"\\u003e#9889\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-5\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-5\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.26.2\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.26.2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1192\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.19.2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-4\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-4\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.12.0/packages/remix-dev/CHANGELOG.md#2120\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.12.0/packages/remix-react/CHANGELOG.md#2120\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.12.0/packages/remix-server-runtime/CHANGELOG.md#2120\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.11.2...remix@2.12.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.11.2...v2.12.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2112\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2112\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.11.2\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-08-15\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-18\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-18\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Fog of War: Simplify implementation now that React Router handles slug/splat edge cases and tracks previously discovered routes (see \\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/pull/11883\\\\\\\"\\u003ehttps://github.com/remix-run/react-router/pull/11883\\u003c/a\\u003e) (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9860\\\\\\\"\\u003e#9860\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e⚠️ This changes the return signature of the internal \\u003ccode\\u003e/__manifest\\u003c/code\\u003e endpoint since we no longer need the \\u003ccode\\u003enotFoundPaths\\u003c/code\\u003e field\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Fog of War: Update to use renamed \\u003ccode\\u003eunstable_patchRoutesOnNavigation\\u003c/code\\u003e function in RR (see \\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/pull/11888\\\\\\\"\\u003ehttps://github.com/remix-run/react-router/pull/11888\\u003c/a\\u003e) (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9860\\\\\\\"\\u003e#9860\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Single Fetch: Fix redirects when a \\u003ccode\\u003ebasename\\u003c/code\\u003e is present (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9848\\\\\\\"\\u003e#9848\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Single Fetch: Update \\u003ccode\\u003eturbo-stream\\u003c/code\\u003e to \\u003ccode\\u003ev2.3.0\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9856\\\\\\\"\\u003e#9856\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eStabilize object key order for serialized payloads\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemove memory limitations payloads sizes\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-6\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-6\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.26.1\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.26.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1191\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.19.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-5\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-5\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.2/packages/remix-react/CHANGELOG.md#2112\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.2/packages/remix-server-runtime/CHANGELOG.md#2112\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.11.1...remix@2.11.2\\\\\\\"\\u003e\\u003ccode\\u003ev2.11.1...v2.11.2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2111\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2111\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.11.1\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-08-05\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-19\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-19\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Revert #9695, stop infinite reload (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/commit/a7cffe5733c8b7d0f29bd2d8606876c537d87101\\\\\\\"\\u003e\\u003ccode\\u003ea7cffe57\\u003c/code\\u003e\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-6\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-6\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.1/packages/remix-react/CHANGELOG.md#2111\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.11.0...remix@2.11.1\\\\\\\"\\u003e\\u003ccode\\u003ev2.11.0...v2.11.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2110\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2110\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.11.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-08-01\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"whats-changed-2\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#whats-changed-2\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhat's Changed\\u003c/h3\\u003e\\\\n\\u003ch4 id=\\\\\\\"renamed-unstable_fogofwar-future-flag-to-unstable_lazyroutediscovery-unstable\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#renamed-unstable_fogofwar-future-flag-to-unstable_lazyroutediscovery-unstable\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRenamed \\u003ccode\\u003eunstable_fogOfWar\\u003c/code\\u003e future flag to \\u003ccode\\u003eunstable_lazyRouteDiscovery\\u003c/code\\u003e (unstable)\\u003c/h4\\u003e\\\\n\\u003cp\\u003eWe found that the \\u003ccode\\u003efuture.unstable_fogOfWar\\u003c/code\\u003e flag name could be a bit confusing without the proper context (notably, the \\u003ca href=\\\\\\\"https://remix.run/blog/fog-of-war\\\\\\\"\\u003eblog post\\u003c/a\\u003e), so we've renamed the flag to \\u003ccode\\u003efuture.unstable_lazyRouteDiscovery\\u003c/code\\u003e for clarity. If you had opted into this feature already, please update the name of the flag in your \\u003ccode\\u003evite.config.ts\\u003c/code\\u003e file (or \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e).\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"removed-response-stub-in-single-fetch-unstable\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#removed-response-stub-in-single-fetch-unstable\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRemoved \\u003ccode\\u003eresponse\\u003c/code\\u003e stub in Single Fetch (unstable)\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThe original Single Fetch approach was based on an assumption that an eventual \\u003ccode\\u003emiddleware\\u003c/code\\u003e implementation would require something like the \\u003ccode\\u003eResponseStub\\u003c/code\\u003e API so users could mutate \\u003ccode\\u003estatus\\u003c/code\\u003e/\\u003ccode\\u003eheaders\\u003c/code\\u003e in \\u003ccode\\u003emiddleware\\u003c/code\\u003e before/after handlers as well as during handlers. As part of Single Fetch, we wanted to align how response headers would be merged between document and data requests. Thinking \\u003ccode\\u003eresponse\\u003c/code\\u003e was the future API, we aligned document requests to use the \\u003ccode\\u003eresponse\\u003c/code\\u003e stub that data requests were using, and we stopped using the \\u003ccode\\u003eheaders()\\u003c/code\\u003e function.\\u003c/p\\u003e\\\\n\\u003cp\\u003eHowever, the realization/alignment between Michael and Ryan on the recent \\u003ca href=\\\\\\\"https://www.youtube.com/watch?v=f5z_axCofW0\\\\\\\"\\u003eroadmap planning\\u003c/a\\u003e made us realize that the original assumption was incorrect. \\u003ccode\\u003emiddleware\\u003c/code\\u003e won't need a \\u003ccode\\u003eresponse\\u003c/code\\u003e stub - as users can just mutate the \\u003ccode\\u003eResponse\\u003c/code\\u003e they get from \\u003ccode\\u003eawait next()\\u003c/code\\u003e directly.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemoving that assumption, and still wanting to align how headers get merged between document and data requests, it makes more sense to stick with the current \\u003ccode\\u003eheaders()\\u003c/code\\u003e API and align Single Fetch data requests to use that existing API. This was we don't need to introduce any new header-related APIs which will make the adoption of Single Fetch much easier.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWith this change:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eThe \\u003ccode\\u003eheaders()\\u003c/code\\u003e function will let you control header merging for both document and data requests\\u003c/li\\u003e\\\\n\\u003cli\\u003eIn most cases, if you were returning \\u003ccode\\u003ejson()\\u003c/code\\u003e/\\u003ccode\\u003edefer()\\u003c/code\\u003e \\u003cem\\u003ewithout\\u003c/em\\u003e setting a custom \\u003ccode\\u003estatus\\u003c/code\\u003e or \\u003ccode\\u003eheaders\\u003c/code\\u003e, you can just remove those utility functions and return the raw data\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e❌ \\u003ccode\\u003ereturn json({ data: \\\\\\\"whatever\\\\\\\" });\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e✅ \\u003ccode\\u003ereturn { data: \\\\\\\"whatever\\\\\\\" };\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eIf you \\u003cem\\u003ewere\\u003c/em\\u003e returning a custom \\u003ccode\\u003estatus\\u003c/code\\u003e or \\u003ccode\\u003eheaders\\u003c/code\\u003e via \\u003ccode\\u003ejson\\u003c/code\\u003e/\\u003ccode\\u003edefer\\u003c/code\\u003e:\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eWe've added a new API-compatible \\u003ca href=\\\\\\\"https://remix.run/docs/utils/data\\\\\\\"\\u003e\\u003ccode\\u003eunstable_data\\u003c/code\\u003e\\u003c/a\\u003e utility that will let you send back \\u003ccode\\u003estatus\\u003c/code\\u003e/\\u003ccode\\u003eheaders\\u003c/code\\u003e alongside your raw data without having to encode it into a \\u003ccode\\u003eResponse\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eWe will be removing both \\u003ccode\\u003ejson\\u003c/code\\u003e and \\u003ccode\\u003edefer\\u003c/code\\u003e in the next major version, but both \\u003cem\\u003eshould\\u003c/em\\u003e still work in Single Fetch in v2 to allow for incremental adoption of the new behavior\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e⚠️ If you've already adopted Single Fetch in it's unstable state and converted to \\u003ccode\\u003eresponse\\u003c/code\\u003e stub, you'll need to move those changes back to leveraging the \\u003ccode\\u003eheaders()\\u003c/code\\u003e API.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-5\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-5\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Fog of War: Rename \\u003ccode\\u003efuture.unstable_fogOfWar\\u003c/code\\u003e to \\u003ccode\\u003efuture.unstable_lazyRouteDiscovery\\u003c/code\\u003e for clarity (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9763\\\\\\\"\\u003e#9763\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Add a new \\u003ccode\\u003ereplace(url, init?)\\u003c/code\\u003e alternative to \\u003ccode\\u003eredirect(url, init?)\\u003c/code\\u003e that performs a \\u003ccode\\u003ehistory.replaceState\\u003c/code\\u003e instead of a \\u003ccode\\u003ehistory.pushState\\u003c/code\\u003e on client-side navigation redirects (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9764\\\\\\\"\\u003e#9764\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Single Fetch: Add a new \\u003ccode\\u003eunstable_data()\\u003c/code\\u003e API as a replacement for \\u003ccode\\u003ejson\\u003c/code\\u003e/\\u003ccode\\u003edefer\\u003c/code\\u003e when custom \\u003ccode\\u003estatus\\u003c/code\\u003e/\\u003ccode\\u003eheaders\\u003c/code\\u003e are needed (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9769\\\\\\\"\\u003e#9769\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Single Fetch: Remove \\u003ccode\\u003eresponseStub\\u003c/code\\u003e in favor of \\u003ccode\\u003eheaders\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9769\\\\\\\"\\u003e#9769\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-20\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-20\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Handle absolute Vite base URLs (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9700\\\\\\\"\\u003e#9700\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Change initial hydration route mismatch from a URL check to a matches check to be resistant to URL inconsistencies (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9695\\\\\\\"\\u003e#9695\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Single Fetch: Ensure calls don't include any trailing slash from the pathname (i.e., \\u003ccode\\u003e/path/.data\\u003c/code\\u003e) (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9792\\\\\\\"\\u003e#9792\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Single Fetch: Add \\u003ccode\\u003eundefined\\u003c/code\\u003e to the \\u003ccode\\u003euseRouteLoaderData\\u003c/code\\u003e type override (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9796\\\\\\\"\\u003e#9796\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-7\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-7\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.26.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.26.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1190\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.19.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-7\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-7\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/create-remix/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/remix-architect/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/remix-cloudflare/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/remix-cloudflare-pages/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/remix-cloudflare-workers/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/remix-css-bundle/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/remix-deno/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/remix-dev/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/remix-eslint-config/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/remix-express/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/remix-node/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/remix-react/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/remix-serve/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/remix-server-runtime/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.11.0/packages/remix-testing/CHANGELOG.md#2110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.10.3...remix@2.11.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.10.3...v2.11.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2103\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2103\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.10.3\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-07-16\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-21\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-21\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e - Manually joining headers with semi-colons to avoid differences in Remix and node/undici Headers implementation (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9664\\\\\\\"\\u003e#9664\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Log any errors encountered loading a route module prior to reloading the page (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8932\\\\\\\"\\u003e#8932\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Single Fetch (unstable): Proxy \\u003ccode\\u003erequest.signal\\u003c/code\\u003e through \\u003ccode\\u003edataStrategy\\u003c/code\\u003e for \\u003ccode\\u003eloader\\u003c/code\\u003e calls to fix cancellation (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9738\\\\\\\"\\u003e#9738\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Single Fetch (unstable): Adopt React Router's stabilized \\u003ccode\\u003efuture.v7_skipActionErrorRevalidation\\u003c/code\\u003e under the hood (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9706\\\\\\\"\\u003e#9706\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eThis stabilizes the \\u003ccode\\u003eshouldRevalidate\\u003c/code\\u003e parameter from \\u003ccode\\u003eunstable_actionStatus\\u003c/code\\u003e to \\u003ccode\\u003eactionStatus\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e⚠️ This might be a breaking change for your app if you have opted into single fetch and the \\u003ccode\\u003eunstable_actionStatus\\u003c/code\\u003e parameter\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-8\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-8\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.25.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.25.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1180\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.18.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-8\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-8\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/create-remix/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/remix-architect/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/remix-cloudflare/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/remix-cloudflare-pages/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/remix-cloudflare-workers/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/remix-css-bundle/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/remix-deno/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/remix-dev/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/remix-eslint-config/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/remix-express/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/remix-node/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/remix-react/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/remix-serve/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/remix-server-runtime/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.3/packages/remix-testing/CHANGELOG.md#2103\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.10.2...remix@2.10.3\\\\\\\"\\u003e\\u003ccode\\u003ev2.10.2...v2.10.3\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2102\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2102\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.10.2\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-07-04\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-22\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-22\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Forward \\u003ccode\\u003eref\\u003c/code\\u003e to \\u003ccode\\u003eForm\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/commit/bdd04217713292307078a30dab9033926d48ede6\\\\\\\"\\u003e\\u003ccode\\u003ebdd04217\\u003c/code\\u003e\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Fix bug with \\u003ccode\\u003eimmutable\\u003c/code\\u003e headers on raw native \\u003ccode\\u003efetch\\u003c/code\\u003e responses returned from loaders (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9693\\\\\\\"\\u003e#9693\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-9\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-9\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/create-remix/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/remix-architect/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/remix-cloudflare/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/remix-cloudflare-pages/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/remix-cloudflare-workers/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/remix-css-bundle/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/remix-deno/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/remix-dev/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/remix-eslint-config/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/remix-express/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/remix-node/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/remix-react/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/remix-serve/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/remix-server-runtime/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.2/packages/remix-testing/CHANGELOG.md#2102\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.10.1...remix@2.10.2\\\\\\\"\\u003e\\u003ccode\\u003ev2.10.1...v2.10.2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2101\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2101\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.10.1\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-07-03\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-23\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-23\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Fog of War (unstable): Support route discovery from \\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e components (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9665\\\\\\\"\\u003e#9665\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Fog of War (unstable): Don't discover links/forms with \\u003ccode\\u003ereloadDocument\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9686\\\\\\\"\\u003e#9686\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-9\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-9\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.24.1\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.24.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1171\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.17.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-10\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-10\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/create-remix/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/remix-architect/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/remix-cloudflare/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/remix-cloudflare-pages/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/remix-cloudflare-workers/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/remix-css-bundle/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/remix-deno/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/remix-dev/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/remix-eslint-config/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/remix-express/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/remix-node/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/remix-react/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/remix-serve/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/remix-server-runtime/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.1/packages/remix-testing/CHANGELOG.md#2101\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.10.0...remix@2.10.1\\\\\\\"\\u003e\\u003ccode\\u003ev2.10.0...v2.10.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v2100\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v2100\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.10.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-06-25\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"whats-changed-3\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#whats-changed-3\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhat's Changed\\u003c/h3\\u003e\\\\n\\u003ch4 id=\\\\\\\"lazy-route-discovery-aka-fog-of-war\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#lazy-route-discovery-aka-fog-of-war\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eLazy Route Discovery (a.k.a. \\\\\\\"Fog of War\\\\\\\")\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThe \\\\\\\"Fog of War\\\\\\\" feature in Remix, now available through the \\u003ccode\\u003efuture.unstable_fogOfWar\\u003c/code\\u003e flag, is an optimization to reduce the up front size of the Remix route manifest. In most scenarios the Remix route manifest isn't prohibitively large so as to impact initial perf metrics, but at scale we've found that some apps can generate large manifests that are expensive to download and execute on app startup.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWhen Fog of War is enabled, Remix will only include the initially server-rendered routes in the manifest and then it will fetch manifest \\\\\\\"patches\\\\\\\" for outgoing links as the user navigates around. By default, to avoid waterfalls Remix fetches patches for all rendered links, so that in the ideal case they've already been patched in prior to being clicked. If a user clicks a link before this eager discovery completes, then a small waterfall will occur to first \\\\\\\"discover\\\\\\\" the route, and then navigate to the route.\\u003c/p\\u003e\\\\n\\u003cp\\u003eEnabling this flag should require no application code changes. For more information, please see the \\u003ca href=\\\\\\\"https://remix.run/docs/guides/fog-of-war\\\\\\\"\\u003edocumentation\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-6\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-6\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eAdd support for Lazy Route Discovery (a.k.a. Fog of War) (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9600\\\\\\\"\\u003e#9600\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9619\\\\\\\"\\u003e#9619\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-24\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-24\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/{dev|express|serve}\\u003c/code\\u003e - Upgrade \\u003ccode\\u003eexpress\\u003c/code\\u003e dependency to \\u003ccode\\u003e^4.19.2\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9184\\\\\\\"\\u003e#9184\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Don't prefetch server \\u003ccode\\u003eloader\\u003c/code\\u003e data when \\u003ccode\\u003eclientLoader\\u003c/code\\u003e exists (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9580\\\\\\\"\\u003e#9580\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Avoid hydration loops when \\u003ccode\\u003eLayout\\u003c/code\\u003e/\\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e renders also throw (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9566\\\\\\\"\\u003e#9566\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Fix a hydration bug when using child routes and \\u003ccode\\u003eHydrateFallback\\u003c/code\\u003e components with a \\u003ccode\\u003ebasename\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9584\\\\\\\"\\u003e#9584\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/{server-runtime|react}\\u003c/code\\u003e - Single Fetch: Update to \\u003ccode\\u003eturbo-stream@2.2.0\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9562\\\\\\\"\\u003e#9562\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Single Fetch: Properly handle thrown 4xx/5xx response stubs (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9501\\\\\\\"\\u003e#9501\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Single Fetch: Change redirects to use a 202 status to avoid automatic caching (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9564\\\\\\\"\\u003e#9564\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Single Fetch: Fix issues with returning or throwing a response stub from a resource route in single fetch (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9488\\\\\\\"\\u003e#9488\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Single Fetch: Fix error when returning \\u003ccode\\u003enull\\u003c/code\\u003e from a resource route (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9488\\\\\\\"\\u003e#9488\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-10\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-10\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.24.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.24.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#117\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.17.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-11\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-11\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/create-remix/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/remix-architect/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/remix-cloudflare/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/remix-cloudflare-pages/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/remix-cloudflare-workers/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/remix-css-bundle/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/remix-deno/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/remix-dev/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/remix-eslint-config/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/remix-express/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/remix-node/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/remix-react/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/remix-serve/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/remix-server-runtime/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.10.0/packages/remix-testing/CHANGELOG.md#2100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.9.2...remix@2.10.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.9.2...v2.10.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v292\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v292\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.9.2\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-05-10\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"whats-changed-4\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#whats-changed-4\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhat's Changed\\u003c/h3\\u003e\\\\n\\u003ch4 id=\\\\\\\"updated-type-safety-for-single-fetch\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-type-safety-for-single-fetch\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Type-Safety for Single Fetch\\u003c/h4\\u003e\\\\n\\u003cp\\u003eIn 2.9.2 we've enhanced the type-safety when opting into the \\u003ccode\\u003efuture.unstable_singleFetch\\u003c/code\\u003e feature. Previously, we added the \\u003ccode\\u003eresponse\\u003c/code\\u003e stub to \\u003ccode\\u003eLoaderFunctionArgs\\u003c/code\\u003e and used type overrides for inference on \\u003ccode\\u003euseLoaderData\\u003c/code\\u003e, etc., but we found that it wasn't quite enough.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWith this release we're introducing new functions to assist the type-inference when using single fetch - \\u003ccode\\u003edefineLoader\\u003c/code\\u003e/\\u003ccode\\u003edefineAction\\u003c/code\\u003e and their client-side counterparts \\u003ccode\\u003edefineClientLoader\\u003c/code\\u003e and nd \\u003ccode\\u003edefineClientAction\\u003c/code\\u003e. These are identity functions; they don't modify your loader or action at runtime. Rather, they exist solely for type-safety by providing types for args and by ensuring valid return types.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineLoader\\u003c/span\\u003e(({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e }) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ^? Request\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e { a: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e1\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eb\\u003c/span\\u003e: () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e2\\u003c/span\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ^ type error: `b` is not serializable\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNote that \\u003ccode\\u003edefineLoader\\u003c/code\\u003e and \\u003ccode\\u003edefineAction\\u003c/code\\u003e are not technically necessary for defining loaders and actions if you aren't concerned with type-safety:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// this totally works! and typechecking is happy too!\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e { a: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e1\\u003c/span\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThis means that you can opt-in to \\u003ccode\\u003edefineLoader\\u003c/code\\u003e incrementally, one loader at a time.\\u003c/p\\u003e\\\\n\\u003cp\\u003ePlease see the \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/guides/single-fetch\\\\\\\"\\u003eSingle Fetch docs\\u003c/a\\u003e for more information.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-25\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-25\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Fix \\u003ccode\\u003edest already exists\\u003c/code\\u003e error when running \\u003ccode\\u003eremix vite:build\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9305\\\\\\\"\\u003e#9305\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Fix issue resolving critical CSS during development when route files are located outside of the app directory (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9194\\\\\\\"\\u003e#9194\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Remove \\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e from Vite plugin's \\u003ccode\\u003eoptimizeDeps.include\\u003c/code\\u003e list since it was unnecessary and resulted in Vite warnings when not depending on this package (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9287\\\\\\\"\\u003e#9287\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Clean up redundant \\u003ccode\\u003e?client-route=1\\u003c/code\\u003e imports in development (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9395\\\\\\\"\\u003e#9395\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Ensure Babel config files are not referenced when applying the \\u003ccode\\u003ereact-refresh\\u003c/code\\u003e Babel transform within the Remix Vite plugin (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9241\\\\\\\"\\u003e#9241\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Type-safety for single-fetch: \\u003ccode\\u003edefineLoader\\u003c/code\\u003e, \\u003ccode\\u003edefineClientLoader\\u003c/code\\u003e, \\u003ccode\\u003edefineAction\\u003c/code\\u003e, \\u003ccode\\u003edefineClientAction\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9372\\\\\\\"\\u003e#9372\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Single Fetch: Add \\u003ccode\\u003eundefined\\u003c/code\\u003e to \\u003ccode\\u003euseActionData\\u003c/code\\u003e type override (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9322\\\\\\\"\\u003e#9322\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Single Fetch: Allow a \\u003ccode\\u003enonce\\u003c/code\\u003e to be set on single fetch stream transfer inline scripts via \\u003ccode\\u003e\\u0026#x3C;RemixServer\\u003e\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9364\\\\\\\"\\u003e#9364\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Single Fetch: Don't log thrown response stubs via \\u003ccode\\u003ehandleError\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9369\\\\\\\"\\u003e#9369\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Single Fetch: Automatically wrap resource route naked object returns in \\u003ccode\\u003ejson()\\u003c/code\\u003e for back-compat in v2 (and log deprecation warning) (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9349\\\\\\\"\\u003e#9349\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Single Fetch: Pass \\u003ccode\\u003eresponse\\u003c/code\\u003e stub to resource route handlers (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9349\\\\\\\"\\u003e#9349\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-11\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-11\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.23.1\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.23.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1161\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.16.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-12\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-12\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.2/packages/remix-cloudflare/CHANGELOG.md#292\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.2/packages/remix-cloudflare-pages/CHANGELOG.md#292\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.2/packages/remix-cloudflare-workers/CHANGELOG.md#292\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.2/packages/remix-css-bundle/CHANGELOG.md#292\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.2/packages/remix-deno/CHANGELOG.md#292\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.2/packages/remix-dev/CHANGELOG.md#292\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.2/packages/remix-eslint-config/CHANGELOG.md#292\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.2/packages/remix-express/CHANGELOG.md#292\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.2/packages/remix-node/CHANGELOG.md#292\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.2/packages/remix-react/CHANGELOG.md#292\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.2/packages/remix-serve/CHANGELOG.md#292\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.2/packages/remix-server-runtime/CHANGELOG.md#292\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.2/packages/remix-testing/CHANGELOG.md#292\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.9.1...remix@2.9.2\\\\\\\"\\u003e\\u003ccode\\u003ev2.9.1...v2.9.2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v291\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v291\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.9.1\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-04-24\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-26\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-26\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Fix issue where consumers who had added Remix packages to Vite's \\u003ccode\\u003essr.noExternal\\u003c/code\\u003e option were being overridden by the Remix Vite plugin adding Remix packages to Vite's \\u003ccode\\u003essr.external\\u003c/code\\u003e option (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9301\\\\\\\"\\u003e#9301\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Ignore \\u003ccode\\u003efuture/*.d.ts\\u003c/code\\u003e files from TS build (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9299\\\\\\\"\\u003e#9299\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-13\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-13\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.1/packages/remix-dev/CHANGELOG.md#291\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.1/packages/remix-react/CHANGELOG.md#291\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.9.0...remix@2.9.1\\\\\\\"\\u003e\\u003ccode\\u003ev2.9.0...v2.9.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v290\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v290\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.9.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-04-23\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"whats-changed-5\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#whats-changed-5\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhat's Changed\\u003c/h3\\u003e\\\\n\\u003ch4 id=\\\\\\\"single-fetch-unstable\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#single-fetch-unstable\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSingle Fetch (unstable)\\u003c/h4\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e2.9.0\\u003c/code\\u003e introduces a \\u003ccode\\u003efuture.unstable_singleFetch\\u003c/code\\u003e flag to enable to Single Fetch behavior (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/discussions/7640\\\\\\\"\\u003eRFC\\u003c/a\\u003e) in your Remix application. Please refer to the \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/guides/single-fetch\\\\\\\"\\u003edocs\\u003c/a\\u003e for the full detail but the high-level changes to be aware of include:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eNaked objects returned from \\u003ccode\\u003eloader\\u003c/code\\u003e/\\u003ccode\\u003eaction\\u003c/code\\u003e functions are no longer automatically serialized to JSON responses\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eInstead, they'll be streamed as-is via \\u003ca href=\\\\\\\"https://github.com/jacob-ebey/turbo-stream\\\\\\\"\\u003e\\u003ccode\\u003eturbo-stream\\u003c/code\\u003e\\u003c/a\\u003e which allows direct serialization of more complex types such as \\u003ccode\\u003ePromise\\u003c/code\\u003e, \\u003ccode\\u003eDate\\u003c/code\\u003e, \\u003ccode\\u003eMap\\u003c/code\\u003e instances, and more\\u003c/li\\u003e\\\\n\\u003cli\\u003eYou will need to modify your \\u003ccode\\u003etsconfig.json\\u003c/code\\u003e's \\u003ccode\\u003ecompilerOptions.types\\u003c/code\\u003e array to infer types properly when using Single Fetch\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eThe \\u003ccode\\u003eheaders\\u003c/code\\u003e export is no longer used when Single Fetch is enabled in favor of a new \\u003ccode\\u003eresponse\\u003c/code\\u003e stub passed to your \\u003ccode\\u003eloader\\u003c/code\\u003e/\\u003ccode\\u003eaction\\u003c/code\\u003e functions\\u003c/li\\u003e\\\\n\\u003cli\\u003eThe \\u003ccode\\u003ejson\\u003c/code\\u003e/\\u003ccode\\u003edefer\\u003c/code\\u003e/\\u003ccode\\u003eredirect\\u003c/code\\u003e utilities are deprecated when using Single Fetch (but still work \\u003cem\\u003emostly\\u003c/em\\u003e the same)\\u003c/li\\u003e\\\\n\\u003cli\\u003eActions no longer automatically revalidate on \\u003ccode\\u003e4xx\\u003c/code\\u003e/\\u003ccode\\u003e5xx\\u003c/code\\u003e responses - you can return a \\u003ccode\\u003e2xx\\u003c/code\\u003e to opt-into revalidation or use \\u003ccode\\u003eshouldRevalidate\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003e[!IMPORTANT]\\\\nSingle Fetch requires using \\u003ccode\\u003eundici\\u003c/code\\u003e as your fetch polyfill, or using the built-in fetch on Node 20+, because it relies on APIs available there but not in the \\u003ccode\\u003e@remix-run/web-fetch\\u003c/code\\u003e polyfill. Please refer to the \\u003ca href=\\\\\\\"#undici\\\\\\\"\\u003eUndici\\u003c/a\\u003e section below for more details.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eIf you are managing your own server and calling \\u003ccode\\u003einstallGlobals()\\u003c/code\\u003e, you will need to call \\u003ccode\\u003einstallGlobals({ nativeFetch: true })\\u003c/code\\u003e to avoid runtime errors when using Single Fetch\\u003c/li\\u003e\\\\n\\u003cli\\u003eIf you are using \\u003ccode\\u003eremix-serve\\u003c/code\\u003e, it will use \\u003ccode\\u003eundici\\u003c/code\\u003e automatically if Single Fetch is enabled\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003ch4 id=\\\\\\\"undici\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#undici\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUndici\\u003c/h4\\u003e\\\\n\\u003cp\\u003eRemix \\u003ccode\\u003e2.9.0\\u003c/code\\u003e adds a new \\u003ccode\\u003einstallGlobals({ nativeFetch: true })\\u003c/code\\u003e flag to opt into using \\u003ca href=\\\\\\\"https://github.com/nodejs/undici\\\\\\\"\\u003e\\u003ccode\\u003eundici\\u003c/code\\u003e\\u003c/a\\u003e for the \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\\\\\\\"\\u003eWeb Fetch\\u003c/a\\u003e polyfills instead of the \\u003ca href=\\\\\\\"https://github.com/remix-run/web-std-io\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/web-*\\u003c/code\\u003e packages\\u003c/a\\u003e. This change has a few primary benefits:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eIt will allow us to stop maintaining our own \\u003ca href=\\\\\\\"https://github.com/remix-run/web-std-io\\\\\\\"\\u003eweb-std-io fork\\u003c/a\\u003e in future versions of Remix\\u003c/li\\u003e\\\\n\\u003cli\\u003eIt should bring us more in-line with spec compliance\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e⚠️ It is possible that some non-spec-compliant bugs in our fork will be \\\\\\\"fixed\\\\\\\" by moving to \\u003ccode\\u003eundici\\u003c/code\\u003e, so beware of \\\\\\\"breaking bug fixes\\\\\\\" and keep an eye on any advanced \\u003ccode\\u003efetch\\u003c/code\\u003e API interactions you're performing in your app\\u003c/li\\u003e\\\\n\\u003cli\\u003e⚠️ In some cases, \\u003ccode\\u003eundici\\u003c/code\\u003e may have different behavior by design -- most notably, \\u003ccode\\u003eundici\\u003c/code\\u003e's garbage collection behavior differs and you are \\u003ca href=\\\\\\\"https://github.com/nodejs/undici?tab=readme-ov-file#garbage-collection\\\\\\\"\\u003erequired to consume all fetch response bodies\\u003c/a\\u003e to avoid a memory leak in your app\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eBecause \\u003ccode\\u003eundici\\u003c/code\\u003e is the fetch implementation used by \\u003ccode\\u003enode\\u003c/code\\u003e internally, it should better prepare Remix apps to more smoothly drop the polyfill to use the built-in Node.js APIs on \\u003ccode\\u003enode\\u003c/code\\u003e 20+\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-7\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-7\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eNew \\u003ccode\\u003efuture.unstable_singleFetch\\u003c/code\\u003e flag (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8773\\\\\\\"\\u003e#8773\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9073\\\\\\\"\\u003e#9073\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9084\\\\\\\"\\u003e#9084\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9272\\\\\\\"\\u003e#9272\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e - Add a new \\u003ccode\\u003einstallGlobals({ nativeFetch: true })\\u003c/code\\u003e flag to opt-into using \\u003ca href=\\\\\\\"https://github.com/nodejs/undici\\\\\\\"\\u003e\\u003ccode\\u003eundici\\u003c/code\\u003e\\u003c/a\\u003e as the fetch polyfill instead of \\u003ccode\\u003e@remix-run/web-*\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9106\\\\\\\"\\u003e#9106\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9111\\\\\\\"\\u003e#9111\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9198\\\\\\\"\\u003e#9198\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Add \\u003ccode\\u003eResponseStub\\u003c/code\\u003e header interface and deprecate the \\u003ccode\\u003eheaders\\u003c/code\\u003e export when Single Fetch is enabled (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9142\\\\\\\"\\u003e#9142\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-27\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-27\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e - Allow \\u003ccode\\u003e.\\u003c/code\\u003e in repo name when using \\u003ccode\\u003e--template\\u003c/code\\u003e flag (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9026\\\\\\\"\\u003e#9026\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Improve \\u003ccode\\u003egetDependenciesToBundle\\u003c/code\\u003e resolution in monorepos (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8848\\\\\\\"\\u003e#8848\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Fix SPA mode when Single Fetch is enabled by using streaming \\u003ccode\\u003eentry.server\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9063\\\\\\\"\\u003e#9063\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: added sourcemap support for transformed routes (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8970\\\\\\\"\\u003e#8970\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Update links printed to the console by the Remix CLI/Dev Server to point to updated docs locations (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9176\\\\\\\"\\u003e#9176\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Handle redirects created by \\u003ccode\\u003ehandleDataRequest\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/9104\\\\\\\"\\u003e#9104\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-12\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-12\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.23.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.23.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1160\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.16.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-14\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-14\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/create-remix/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/remix-architect/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/remix-cloudflare/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/remix-cloudflare-pages/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/remix-cloudflare-workers/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/remix-css-bundle/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/remix-deno/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/remix-dev/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/remix-eslint-config/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/remix-express/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/remix-node/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/remix-react/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/remix-serve/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/remix-server-runtime/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.9.0/packages/remix-testing/CHANGELOG.md#290\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.8.1...remix@2.9.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.8.1...v2.9.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v281\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v281\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.8.1\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-03-07\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-28\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-28\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Support reading from Vite config when running \\u003ccode\\u003eremix reveal\\u003c/code\\u003e and \\u003ccode\\u003eremix routes\\u003c/code\\u003e CLI commands (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8916\\\\\\\"\\u003e#8916\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Clean up redundant client route query strings on route JavaScript files in production builds (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8969\\\\\\\"\\u003e#8969\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Add vite commands to Remix CLI \\u003ccode\\u003e--help\\u003c/code\\u003e output (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8939\\\\\\\"\\u003e#8939\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Fix support for \\u003ccode\\u003ebuild.sourcemap\\u003c/code\\u003e option in Vite config (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8965\\\\\\\"\\u003e#8965\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Fix error when using Vite's \\u003ccode\\u003eserver.fs.allow\\u003c/code\\u003e option without a client entry file (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8966\\\\\\\"\\u003e#8966\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Strengthen the internal \\u003ccode\\u003eLayoutComponent\\u003c/code\\u003e type to accept limited children (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8910\\\\\\\"\\u003e#8910\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-13\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-13\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.22.3\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.22.3\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1153\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.15.3\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-15\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-15\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/create-remix/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-architect/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-cloudflare/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-cloudflare-pages/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-cloudflare-workers/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-css-bundle/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-deno/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-dev/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-eslint-config/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-express/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-node/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-react/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-serve/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-server-runtime/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-testing/CHANGELOG.md#281\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.8.0...remix@2.8.1\\\\\\\"\\u003e\\u003ccode\\u003ev2.8.0...v2.8.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v280\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v280\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.8.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-02-28\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-8\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-8\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Pass resolved \\u003ccode\\u003eviteConfig\\u003c/code\\u003e to Remix Vite plugin's \\u003ccode\\u003ebuildEnd\\u003c/code\\u003e hook (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8885\\\\\\\"\\u003e#8885\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-29\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-29\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Mark \\u003ccode\\u003eLayout\\u003c/code\\u003e as browser safe route export in \\u003ccode\\u003eesbuild\\u003c/code\\u003e compiler (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8842\\\\\\\"\\u003e#8842\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Silence build warnings when dependencies include \\u003ccode\\u003e\\\\\\\"use client\\\\\\\"\\u003c/code\\u003e directives (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8897\\\\\\\"\\u003e#8897\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Fix \\u003ccode\\u003eserverBundles\\u003c/code\\u003e issue where multiple browser manifests are generated (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8864\\\\\\\"\\u003e#8864\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Support custom \\u003ccode\\u003ebuild.assetsDir\\u003c/code\\u003e option (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8843\\\\\\\"\\u003e#8843\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Fix the default root \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e component so it leverages the user-provided \\u003ccode\\u003eLayout\\u003c/code\\u003e component (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8859\\\\\\\"\\u003e#8859\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Fix the default root \\u003ccode\\u003eHydrateFallback\\u003c/code\\u003e component so it leverages any user-provided \\u003ccode\\u003eLayout\\u003c/code\\u003e component (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8892\\\\\\\"\\u003e#8892\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-14\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-14\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.22.2\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.22.2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1152\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.15.2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-16\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-16\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/create-remix/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/remix-architect/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/remix-cloudflare/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/remix-cloudflare-pages/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/remix-cloudflare-workers/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/remix-css-bundle/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/remix-deno/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/remix-dev/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/remix-eslint-config/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/remix-express/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/remix-node/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/remix-react/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/remix-serve/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/remix-server-runtime/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.8.0/packages/remix-testing/CHANGELOG.md#280\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.7.2...remix@2.8.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.7.2...v2.8.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"272\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#272\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e2.7.2\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-02-21\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-30\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-30\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Fix error when building projects with \\u003ccode\\u003e.css?url\\u003c/code\\u003e imports (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8829\\\\\\\"\\u003e#8829\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2 id=\\\\\\\"271\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#271\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e2.7.1\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-02-20\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-31\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-31\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e - Fix breaking change and restore Cloudflare event context fields in \\u003ccode\\u003egetLoadContext\\u003c/code\\u003e argument for backwards compatibility (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8819\\\\\\\"\\u003e#8819\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2 id=\\\\\\\"v270\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v270\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.7.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-02-20\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"whats-changed-6\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#whats-changed-6\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhat's Changed\\u003c/h3\\u003e\\\\n\\u003ch4 id=\\\\\\\"stabilized-vite-plugin\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#stabilized-vite-plugin\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eStabilized Vite Plugin\\u003c/h4\\u003e\\\\n\\u003cp\\u003eWe're excited to announce that support for \\u003ca href=\\\\\\\"https://vitejs.dev/\\\\\\\"\\u003eVite\\u003c/a\\u003e is now stable in Remix \\u003ccode\\u003e2.7.0\\u003c/code\\u003e! Ever since the \\u003ca href=\\\\\\\"https://remix.run/blog/remix-heart-vite\\\\\\\"\\u003einitial unstable release of Remix Vite\\u003c/a\\u003e, we’ve been hard at work refining and extending it over the past few months with help from all of our early adopters and community contributors. This also means that Vite-only features such as \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/future/spa-mode\\\\\\\"\\u003eSPA Mode\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://remix.run/docs/future/server-bundles\\\\\\\"\\u003eServer Bundles\\u003c/a\\u003e, and \\u003ca href=\\\\\\\"https://remix.run/docs/en/dev/future/vite#basename\\\\\\\"\\u003e\\u003ccode\\u003ebasename\\u003c/code\\u003e support\\u003c/a\\u003e are now officially stable as well 😊.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor more information, check out the \\u003ca href=\\\\\\\"https://remix.run/blog/remix-vite-stable\\\\\\\"\\u003eblog post\\u003c/a\\u003e and the \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/future/vite\\\\\\\"\\u003eVite docs\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"new-layout-export\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#new-layout-export\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNew \\u003ccode\\u003eLayout\\u003c/code\\u003e Export\\u003c/h4\\u003e\\\\n\\u003cp\\u003eWe've found that it's \\u003cem\\u003esuper\\u003c/em\\u003e common to create your own component in your root route to hold the shared layout/app shell between your \\u003ccode\\u003eComponent\\u003c/code\\u003e/\\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e/\\u003ccode\\u003eHydrateFallback\\u003c/code\\u003e. This is so common (and can also cause some minor edge-case issues such as a FOUC on hydration) that we've incorporated this as a first-class API in \\u003ccode\\u003e2.7.0\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou can now export an optional \\u003ccode\\u003eLayout\\u003c/code\\u003e component from your root route which will be provided your route component, ErrorBoundary, or HydrateFallback as it's \\u003ccode\\u003echildren\\u003c/code\\u003e. For more information, please see the \\u003ca href=\\\\\\\"https://remix.run/docs/en/dev/file-conventions/root#layout-export\\\\\\\"\\u003e\\u003ccode\\u003eLayout\\u003c/code\\u003e docs\\u003c/a\\u003e and the \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/discussions/8702\\\\\\\"\\u003eRFC\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"basename-support\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#basename-support\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eBasename support\\u003c/h4\\u003e\\\\n\\u003cp\\u003eReact Router has long supported a \\u003ca href=\\\\\\\"https://reactrouter.com/v6/routers/create-browser-router#basename\\\\\\\"\\u003e\\u003ccode\\u003ebasename\\u003c/code\\u003e\\u003c/a\\u003e config that allows you to serve your app within a subpath such as \\u003ccode\\u003ehttp://localhost/myapp/*\\u003c/code\\u003e without having to include the \\u003ccode\\u003e/myapp\\u003c/code\\u003e segment in all of your route paths. This was originally omitted from Remix because v1 nested folders file-convention made it pretty easy to put your route files in a \\u003ccode\\u003eroutes/myapp/\\u003c/code\\u003e folder, giving you the same functionality. There has also been an \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/discussions/2891\\\\\\\"\\u003eopen proposal from the community\\u003c/a\\u003e to add this functionality.\\u003c/p\\u003e\\\\n\\u003cp\\u003eTwo things have since changed that made us reconsider the lack of \\u003ccode\\u003ebasename\\u003c/code\\u003e support:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eWe switched to a flat-file based convention in v2, and it gets far less ergonomic to have to prefix all of your route files with \\u003ccode\\u003emyapp.\\u003c/code\\u003e compared to the nested folder convention\\u003c/li\\u003e\\\\n\\u003cli\\u003eWe moved to Vite which has it's own \\u003ccode\\u003ebase\\u003c/code\\u003e config which is often (and easily) confused with the concept of a React Router \\u003ccode\\u003ebasename\\u003c/code\\u003e (when in reality it's more aligned with the old Remix \\u003ccode\\u003epublicPath\\u003c/code\\u003e config)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eIn \\u003ccode\\u003e2.7.0\\u003c/code\\u003e we've added support for a \\u003ccode\\u003ebasename\\u003c/code\\u003e in the Vite plugin config. For more information, please check out the \\u003ca href=\\\\\\\"https://remix.run/docs/en/dev/future/vite#basename\\\\\\\"\\u003e\\u003ccode\\u003ebasename\\u003c/code\\u003e docs\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cem\\u003eNote: This is a Vite-only feature and is not available via the \\u003ccode\\u003eesbuild\\u003c/code\\u003e compiler.\\u003c/em\\u003e\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"cloudflare-proxy-as-a-vite-plugin\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#cloudflare-proxy-as-a-vite-plugin\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eCloudflare Proxy as a Vite Plugin\\u003c/h4\\u003e\\\\n\\u003cp\\u003e⚠️ This is a breaking change for projects relying on Cloudflare support from the unstable Vite plugin\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe Cloudflare preset (\\u003ccode\\u003eunstable_cloudflarePreset\\u003c/code\\u003e) as been removed and replaced with a new Vite plugin:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e import {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e unstable_vitePlugin as remix,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e unstable_cloudflarePreset as cloudflare,\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e } from \\\\\\\"@remix-run/dev\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e import { defineConfig } from \\\\\\\"vite\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e export default defineConfig({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e plugins: [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e remixCloudflareDevProxy(),\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e remix(),\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e remix({\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e presets: [cloudflare()],\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e }),\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e ],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e ssr: {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e resolve: {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e externalConditions: [\\\\\\\"workerd\\\\\\\", \\\\\\\"worker\\\\\\\"],\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e },\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e },\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eA few notes on the new plugin:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremixCloudflareDevProxy\\u003c/code\\u003e must come \\u003cem\\u003ebefore\\u003c/em\\u003e the \\u003ccode\\u003eremix\\u003c/code\\u003e plugin so that it can override Vite's dev server middleware to be compatible with Cloudflare's proxied environment\\u003c/li\\u003e\\\\n\\u003cli\\u003eBecause it is a Vite plugin, \\u003ccode\\u003eremixCloudflareDevProxy\\u003c/code\\u003e can set \\u003ccode\\u003essr.resolve.externalConditions\\u003c/code\\u003e to be \\u003ccode\\u003eworkerd\\u003c/code\\u003e-compatible for you\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremixCloudflareDevProxy\\u003c/code\\u003e accepts a \\u003ccode\\u003egetLoadContext\\u003c/code\\u003e function that replaces the old \\u003ccode\\u003egetRemixDevLoadContext\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eIf you were using a \\u003ccode\\u003enightly\\u003c/code\\u003e version that required \\u003ccode\\u003egetBindingsProxy\\u003c/code\\u003e or \\u003ccode\\u003egetPlatformProxy\\u003c/code\\u003e, that is no longer required\\u003c/li\\u003e\\\\n\\u003cli\\u003eAny options you were passing to \\u003ccode\\u003egetBindingsProxy\\u003c/code\\u003e or \\u003ccode\\u003egetPlatformProxy\\u003c/code\\u003e should now be passed to \\u003ccode\\u003eremixCloudflareDevProxy\\u003c/code\\u003e instead\\u003c/li\\u003e\\\\n\\u003cli\\u003eThis API also better aligns with future plans to support Cloudflare with a framework-agnostic Vite plugin that makes use of Vite's (experimental) Runtime API.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-9\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-9\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Allow an optional \\u003ccode\\u003eLayout\\u003c/code\\u003e export from the root route (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8709\\\\\\\"\\u003e#8709\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e - Make \\u003ccode\\u003egetLoadContext\\u003c/code\\u003e optional for Cloudflare Pages (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8701\\\\\\\"\\u003e#8701\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eDefaults to \\u003ccode\\u003e(context) =\\u003e ({ env: context })\\u003c/code\\u003e, which is what we used to have in all the templates\\u003c/li\\u003e\\\\n\\u003cli\\u003eThis gives parity with the Cloudflare preset for the Remix Vite plugin and keeps our templates leaner\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Cloudflare Proxy as a Vite plugin (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8749\\\\\\\"\\u003e#8749\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003e⚠️ This is a breaking change for projects relying on Cloudflare support from the unstable Vite plugin\\u003c/strong\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Add a new \\u003ccode\\u003ebasename\\u003c/code\\u003e option to the Vite plugin, allowing users to set the internal React Router \\u003ca href=\\\\\\\"https://reactrouter.com/v6/routers/create-browser-router#basename\\\\\\\"\\u003e\\u003ccode\\u003ebasename\\u003c/code\\u003e\\u003c/a\\u003e in order to to serve their applications underneath a subpath (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8145\\\\\\\"\\u003e#8145\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Stabilize the Remix Vite plugin, Cloudflare preset, and all related types by removing all \\u003ccode\\u003eunstable_\\u003c/code\\u003e / \\u003ccode\\u003eUnstable_\\u003c/code\\u003e prefixes (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8713\\\\\\\"\\u003e#8713\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eWhile this is a breaking change for existing Remix Vite plugin consumers, now that the plugin has stabilized, there will no longer be any breaking changes outside of a major release. Thank you to all of our early adopters and community contributors for helping us get here! 🙏\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Stabilize \\\\\\\"SPA Mode\\\\\\\" by renaming the Remix vite plugin config from \\u003ccode\\u003eunstable_ssr -\\u003e ssr\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8692\\\\\\\"\\u003e#8692\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-32\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-32\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e - Use \\u003ccode\\u003ereq.originalUrl\\u003c/code\\u003e instead of \\u003ccode\\u003ereq.url\\u003c/code\\u003e so that Remix sees the full URL (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8145\\\\\\\"\\u003e#8145\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRemix relies on the knowing the full URL to ensure that server and client code can function together, and does not support URL rewriting prior to the Remix handler\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Fix a bug with SPA mode when the root route had no children (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8747\\\\\\\"\\u003e#8747\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Add a more specific error if a user returns a \\u003ccode\\u003edefer\\u003c/code\\u003e response from a resource route (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8726\\\\\\\"\\u003e#8726\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Always prepend \\u003ccode\\u003eDOCTYPE\\u003c/code\\u003e in SPA mode \\u003ccode\\u003eentry.server.tsx\\u003c/code\\u003e, can opt out via remix reveal (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8725\\\\\\\"\\u003e#8725\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Fix build issue in SPA mode when using a \\u003ccode\\u003ebasename\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8720\\\\\\\"\\u003e#8720\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Fix type error in Remix config for synchronous \\u003ccode\\u003eroutes\\u003c/code\\u003e function (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8745\\\\\\\"\\u003e#8745\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Fix issue where client route file requests fail if search params have been parsed and serialized before reaching the Remix Vite plugin (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8740\\\\\\\"\\u003e#8740\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Validate that the MDX Rollup plugin, if present, is placed before Remix in Vite config (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8690\\\\\\\"\\u003e#8690\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Fix issue resolving critical CSS during development when the current working directory differs from the project root (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8752\\\\\\\"\\u003e#8752\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Require version \\u003ccode\\u003e5.1.0\\u003c/code\\u003e to support \\u003ccode\\u003e.css?url\\u003c/code\\u003e imports (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8723\\\\\\\"\\u003e#8723\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Support Vite \\u003ccode\\u003e5.1.0\\u003c/code\\u003e's \\u003ccode\\u003e.css?url\\u003c/code\\u003e imports (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8684\\\\\\\"\\u003e#8684\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Enable use of \\u003ca href=\\\\\\\"https://main.vitejs.dev/guide/static-deploy.html#deploying-a-static-site\\\\\\\"\\u003e\\u003ccode\\u003evite preview\\u003c/code\\u003e\\u003c/a\\u003e to preview Remix SPA applications (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8624\\\\\\\"\\u003e#8624\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eIn the SPA template, \\u003ccode\\u003enpm run start\\u003c/code\\u003e has been renamed to \\u003ccode\\u003enpm run preview\\u003c/code\\u003e which uses \\u003ccode\\u003evite preview\\u003c/code\\u003e instead of a standalone HTTP server such as \\u003ccode\\u003ehttp-server\\u003c/code\\u003e or \\u003ccode\\u003eserv-cli\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Remove the ability to pass \\u003ccode\\u003epublicPath\\u003c/code\\u003e as an option to the Remix vite plugin (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8145\\\\\\\"\\u003e#8145\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003e⚠️ This is a breaking change for projects using the unstable Vite plugin with a \\u003ccode\\u003epublicPath\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eThis is already handled in Vite via the \\u003ca href=\\\\\\\"https://vitejs.dev/guide/build.html#public-base-path\\\\\\\"\\u003e\\u003ccode\\u003ebase\\u003c/code\\u003e\\u003c/a\\u003e config so we now set the Remix \\u003ccode\\u003epublicPath\\u003c/code\\u003e from the Vite \\u003ccode\\u003ebase\\u003c/code\\u003e config\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Enable HMR for \\u003ccode\\u003e.md\\u003c/code\\u003e and \\u003ccode\\u003e.mdx\\u003c/code\\u003e files (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8711\\\\\\\"\\u003e#8711\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: reliably detect non-root routes in Windows (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8806\\\\\\\"\\u003e#8806\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Pass \\u003ccode\\u003eremixUserConfig\\u003c/code\\u003e to preset \\u003ccode\\u003eremixConfig\\u003c/code\\u003e hook (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8797\\\\\\\"\\u003e#8797\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Ensure CSS file URLs that are only referenced in the server build are available on the client (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8796\\\\\\\"\\u003e#8796\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: fix server exports dead-code elimination for routes outside of app directory (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8795\\\\\\\"\\u003e#8795\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-15\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-15\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.22.1\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.22.Y\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1151\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.15.Y\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-17\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-17\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/create-remix/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/remix-architect/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/remix-cloudflare/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/remix-cloudflare-pages/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/remix-cloudflare-workers/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/remix-css-bundle/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/remix-deno/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/remix-dev/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/remix-eslint-config/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/remix-express/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/remix-node/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/remix-react/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/remix-serve/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/remix-server-runtime/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.7.0/packages/remix-testing/CHANGELOG.md#270\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.6.0...remix@2.7.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.6.0...v2.7.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v260\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v260\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.6.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-02-01\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"whats-changed-7\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#whats-changed-7\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhat's Changed\\u003c/h3\\u003e\\\\n\\u003ch4 id=\\\\\\\"unstable-vite-plugin-updates\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#unstable-vite-plugin-updates\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUnstable Vite Plugin updates\\u003c/h4\\u003e\\\\n\\u003cp\\u003eAs we continue moving towards stabilizing the Vite plugin, we've introduced a few breaking changes to the unstable Vite plugin in this release. Please read the \\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e changes below closely and update your app accordingly if you've opted into using the Vite plugin.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWe've also removed the \\u003ccode\\u003eunstable_\\u003c/code\\u003e prefix from the \\u003ccode\\u003eserverBundles\\u003c/code\\u003e option as we're now confident in the API (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8596\\\\\\\"\\u003e#8596\\u003c/a\\u003e).\\u003c/p\\u003e\\\\n\\u003cp\\u003e🎉 And last, but certainly not least - we've added much anticipated Cloudflare support in \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8531\\\\\\\"\\u003e#8531\\u003c/a\\u003e! To get started with Cloudflare, you can use the \\u003ccode\\u003eunstable-vite-cloudflare\\u003c/code\\u003e template:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpx\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecreate-remix@latest\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e--template\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eremix-run/remix/templates/unstable-vite-cloudflare\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eFor more information, please refer to the docs at \\u003ca href=\\\\\\\"https://remix.run/docs/future/vite#cloudflare\\\\\\\"\\u003eFuture \\u003e Vite \\u003e Cloudflare\\u003c/a\\u003e and \\u003ca href=\\\\\\\"https://remix.run/docs/future/vite#migrating-cloudflare-functions\\\\\\\"\\u003eFuture \\u003e Vite \\u003e Migrating \\u003e Migrating Cloudflare Functions\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-10\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-10\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Add \\u003ccode\\u003efuture.v3_throwAbortReason\\u003c/code\\u003e flag to throw \\u003ccode\\u003erequest.signal.reason\\u003c/code\\u003e when a request is aborted instead of an \\u003ccode\\u003eError\\u003c/code\\u003e such as \\u003ccode\\u003enew Error(\\\\\\\"query() call aborted: GET /path\\\\\\\")\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8251\\\\\\\"\\u003e#8251\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-33\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-33\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e - Unwrap thrown \\u003ccode\\u003eResponse\\u003c/code\\u003e's from \\u003ccode\\u003eentry.server\\u003c/code\\u003e into \\u003ccode\\u003eErrorResponse\\u003c/code\\u003e's and preserve the status code (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8577\\\\\\\"\\u003e#8577\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Add \\u003ccode\\u003emanifest\\u003c/code\\u003e option to Vite plugin to enable writing a \\u003ccode\\u003e.remix/manifest.json\\u003c/code\\u003e file to the build directory (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8575\\\\\\\"\\u003e#8575\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e⚠️ \\u003cstrong\\u003eThis is a breaking change for consumers of the Vite plugin's \\\\\\\"server bundles\\\\\\\" feature\\u003c/strong\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eThe \\u003ccode\\u003ebuild/server/bundles.json\\u003c/code\\u003e file has been superseded by the more general \\u003ccode\\u003ebuild/.remix/manifest.json\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eWhile the old server bundles manifest was always written to disk when generating server bundles, the build manifest file must be explicitly enabled via the \\u003ccode\\u003emanifest\\u003c/code\\u003e option\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Rely on Vite plugin ordering (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8627\\\\\\\"\\u003e#8627\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e⚠️ \\u003cstrong\\u003eThis is a breaking change for projects using the unstable Vite plugin\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eThe Remix plugin expects to process JavaScript or TypeScript files, so any transpilation from other languages must be done first.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eFor example, that means putting the MDX plugin \\u003cem\\u003ebefore\\u003c/em\\u003e the Remix plugin:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e import mdx from \\\\\\\"@mdx-js/rollup\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e import { unstable_vitePlugin as remix } from \\\\\\\"@remix-run/dev\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e import { defineConfig } from \\\\\\\"vite\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e export default defineConfig({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e plugins: [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e mdx(),\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e remix()\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e mdx(),\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e ],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003ePreviously, the Remix plugin misused \\u003ccode\\u003eenforce: \\\\\\\"post\\\\\\\"\\u003c/code\\u003e from Vite's plugin API to ensure that it ran last\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eHowever, this caused other unforeseen issues\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eInstead, we now rely on standard Vite semantics for plugin ordering\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eThe official \\u003ca href=\\\\\\\"https://github.com/vitejs/vite-plugin-react-swc/blob/main/src/index.ts#L97-L116\\\\\\\"\\u003eVite React SWC plugin\\u003c/a\\u003e also relies on plugin ordering for MDX\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Remove interop with \\u003ccode\\u003e\\u0026#x3C;LiveReload /\\u003e\\u003c/code\\u003e, rely on \\u003ccode\\u003e\\u0026#x3C;Scripts /\\u003e\\u003c/code\\u003e instead (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8636\\\\\\\"\\u003e#8636\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e⚠️ \\u003cstrong\\u003eThis is a breaking change for projects using the unstable Vite plugin\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eVite provides a robust client-side runtime for development features like HMR, making the \\u003ccode\\u003e\\u0026#x3C;LiveReload /\\u003e\\u003c/code\\u003e component obsolete\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eIn fact, having a separate dev scripts component was causing issues with script execution order\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eTo work around this, the Remix Vite plugin used to override \\u003ccode\\u003e\\u0026#x3C;LiveReload /\\u003e\\u003c/code\\u003e into a bespoke implementation that was compatible with Vite\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eInstead of all this indirection, now the Remix Vite plugin instructs the \\u003ccode\\u003e\\u0026#x3C;Scripts /\\u003e\\u003c/code\\u003e component to automatically include Vite's client-side runtime and other dev-only scripts\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eTo adopt this change, you can remove the LiveReload component from your \\u003ccode\\u003eroot.tsx\\u003c/code\\u003e component:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e import {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e LiveReload,\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e Outlet,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e Scripts,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e export default function App() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e return (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;html\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;head\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;/head\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;body\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;Outlet /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;Scripts /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e \\u0026#x3C;LiveReload /\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;/body\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;/html\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e )\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Only write Vite manifest files if \\u003ccode\\u003ebuild.manifest\\u003c/code\\u003e is enabled within the Vite config (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8599\\\\\\\"\\u003e#8599\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e⚠️ \\u003cstrong\\u003eThis is a breaking change for consumers of Vite's \\u003ccode\\u003emanifest.json\\u003c/code\\u003e files\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eTo explicitly enable generation of Vite manifest files, you must set \\u003ccode\\u003ebuild.manifest\\u003c/code\\u003e to \\u003ccode\\u003etrue\\u003c/code\\u003e in your Vite config:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e build: { manifest: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ...\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Add new \\u003ccode\\u003ebuildDirectory\\u003c/code\\u003e option with a default value of \\u003ccode\\u003e\\\\\\\"build\\\\\\\"\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8575\\\\\\\"\\u003e#8575\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e⚠️ \\u003cstrong\\u003eThis is a breaking change for consumers of the Vite plugin that were using the \\u003ccode\\u003eassetsBuildDirectory\\u003c/code\\u003e and \\u003ccode\\u003eserverBuildDirectory\\u003c/code\\u003e options\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eThis replaces the old \\u003ccode\\u003eassetsBuildDirectory\\u003c/code\\u003e and \\u003ccode\\u003eserverBuildDirectory\\u003c/code\\u003e options which defaulted to \\u003ccode\\u003e\\\\\\\"build/client\\\\\\\"\\u003c/code\\u003e and \\u003ccode\\u003e\\\\\\\"build/server\\\\\\\"\\u003c/code\\u003e respectively\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eThe Remix Vite plugin now builds into a single directory containing \\u003ccode\\u003eclient\\u003c/code\\u003e and \\u003ccode\\u003eserver\\u003c/code\\u003e directories\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eIf you've customized your build output directories, you'll need to migrate to the new \\u003ccode\\u003ebuildDirectory\\u003c/code\\u003e option, e.g.:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003eimport { unstable_vitePlugin as remix } from \\\\\\\"@remix-run/dev\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003eimport { defineConfig } from \\\\\\\"vite\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003eexport default defineConfig({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e plugins: [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e remix({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e serverBuildDirectory: \\\\\\\"dist/server\\\\\\\",\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e assetsBuildDirectory: \\\\\\\"dist/client\\\\\\\",\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e buildDirectory: \\\\\\\"dist\\\\\\\",\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e })\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e ],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Write Vite manifest files to \\u003ccode\\u003ebuild/.vite\\u003c/code\\u003e directory rather than being nested within \\u003ccode\\u003ebuild/client\\u003c/code\\u003e and \\u003ccode\\u003ebuild/server\\u003c/code\\u003e directories (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8599\\\\\\\"\\u003e#8599\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e⚠️ \\u003cstrong\\u003eThis is a breaking change for consumers of Vite's \\u003ccode\\u003emanifest.json\\u003c/code\\u003e files\\u003c/strong\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eVite manifest files are now written to the Remix build directory\\u003c/li\\u003e\\\\n\\u003cli\\u003eSince all Vite manifests are now in the same directory, they're no longer named \\u003ccode\\u003emanifest.json\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eInstead, they're named \\u003ccode\\u003ebuild/.vite/client-manifest.json\\u003c/code\\u003e and \\u003ccode\\u003ebuild/.vite/server-manifest.json\\u003c/code\\u003e, or \\u003ccode\\u003ebuild/.vite/server-{BUNDLE_ID}-manifest.json\\u003c/code\\u003e when using server bundles\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Remove \\u003ccode\\u003eunstable\\u003c/code\\u003e prefix from \\u003ccode\\u003eserverBundles\\u003c/code\\u003e option (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8596\\\\\\\"\\u003e#8596\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Add \\u003ccode\\u003e--sourcemapClient\\u003c/code\\u003e and \\u003ccode\\u003e--sourcemapServer\\u003c/code\\u003e flags to \\u003ccode\\u003eremix vite:build\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8613\\\\\\\"\\u003e#8613\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e--sourcemapClient\\u003c/code\\u003e, \\u003ccode\\u003e--sourcemapClient=inline\\u003c/code\\u003e, or \\u003ccode\\u003e--sourcemapClient=hidden\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e--sourcemapServer\\u003c/code\\u003e, \\u003ccode\\u003e--sourcemapServer=inline\\u003c/code\\u003e, or \\u003ccode\\u003e--sourcemapServer=hidden\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eSee \\u003ca href=\\\\\\\"https://vitejs.dev/config/build-options.html#build-sourcemap\\\\\\\"\\u003ehttps://vitejs.dev/config/build-options.html#build-sourcemap\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Validate IDs returned from the \\u003ccode\\u003eserverBundles\\u003c/code\\u003e function to ensure they only contain alphanumeric characters, hyphens and underscores (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8598\\\\\\\"\\u003e#8598\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Fix \\\\\\\"could not fast refresh\\\\\\\" false alarm (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8580\\\\\\\"\\u003e#8580\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eHMR is already functioning correctly but was incorrectly logging that it \\\\\\\"could not fast refresh\\\\\\\" on internal client routes\\u003c/li\\u003e\\\\n\\u003cli\\u003eNow internal client routes correctly register Remix exports like \\u003ccode\\u003emeta\\u003c/code\\u003e for fast refresh, which removes the false alarm.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Cloudflare Pages support (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8531\\\\\\\"\\u003e#8531\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Add \\u003ccode\\u003egetRemixDevLoadContext\\u003c/code\\u003e option to Cloudflare preset (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8649\\\\\\\"\\u003e#8649\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Remove undocumented backwards compatibility layer for Vite v4 (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8581\\\\\\\"\\u003e#8581\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Add \\u003ccode\\u003epresets\\u003c/code\\u003e option to ease integration with different platforms and tools (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8514\\\\\\\"\\u003e#8514\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Add \\u003ccode\\u003ebuildEnd\\u003c/code\\u003e hook (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8620\\\\\\\"\\u003e#8620\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Add \\u003ccode\\u003emode\\u003c/code\\u003e field into generated server build (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8539\\\\\\\"\\u003e#8539\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Reduce network calls for route modules during HMR (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8591\\\\\\\"\\u003e#8591\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Export \\u003ccode\\u003eUnstable_ServerBundlesFunction\\u003c/code\\u003e and \\u003ccode\\u003eUnstable_VitePluginConfig\\u003c/code\\u003e types (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8654\\\\\\\"\\u003e#8654\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-16\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-16\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.22.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.22.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1150\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.15.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-18\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-18\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/create-remix/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/remix-architect/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/remix-cloudflare/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/remix-cloudflare-pages/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/remix-cloudflare-workers/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/remix-css-bundle/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/remix-deno/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/remix-dev/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/remix-eslint-config/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/remix-express/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/remix-node/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/remix-react/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/remix-serve/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/remix-server-runtime/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.6.0/packages/remix-testing/CHANGELOG.md#260\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.5.1...remix@2.6.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.5.1...v2.6.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v251\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v251\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.5.1\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-01-18\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-34\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-34\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e - high-contrast fg/bg for header colors (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8503\\\\\\\"\\u003e#8503\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ebgWhite\\u003c/code\\u003e and \\u003ccode\\u003ewhiteBright\\u003c/code\\u003e are the same color in many terminal colorthemes, which was causing it to render as illegible white-on-white\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Add \\u003ccode\\u003eisSpaMode\\u003c/code\\u003e to \\u003ccode\\u003e@remix-run/dev/server-build\\u003c/code\\u003e virtual module (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8492\\\\\\\"\\u003e#8492\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - SPA Mode: Automatically prepend \\u003ccode\\u003e\\u0026#x3C;!DOCTYPE html\\u003e\\u003c/code\\u003e if not present to fix quirks mode warnings for SPA template (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8495\\\\\\\"\\u003e#8495\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Errors for server-only code point to new docs (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8488\\\\\\\"\\u003e#8488\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Fix HMR race condition when reading changed file contents (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8479\\\\\\\"\\u003e#8479\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Tree-shake unused route exports in the client build (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8468\\\\\\\"\\u003e#8468\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Performance profiling (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8493\\\\\\\"\\u003e#8493\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRun \\u003ccode\\u003eremix vite:build --profile\\u003c/code\\u003e to generate a \\u003ccode\\u003e.cpuprofile\\u003c/code\\u003e that can be shared or uploaded to speedscope.app\\u003c/li\\u003e\\\\n\\u003cli\\u003eIn dev, press \\u003ccode\\u003ep + enter\\u003c/code\\u003e to start a new profiling session or stop the current session\\u003c/li\\u003e\\\\n\\u003cli\\u003eIf you need to profile dev server startup, run \\u003ccode\\u003eremix vite:dev --profile\\u003c/code\\u003e to initialize the dev server with a running profiling session\\u003c/li\\u003e\\\\n\\u003cli\\u003eFor more, see the new \\u003ca href=\\\\\\\"https://remix.run/docs/future/vite#performance\\\\\\\"\\u003eVite \\u003e Performance\\u003c/a\\u003e docs\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e - Vite: Improve performance of dev server requests by invalidating Remix's virtual modules on relevant file changes rather than on every request (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8164\\\\\\\"\\u003e#8164\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Remove leftover \\u003ccode\\u003eunstable_\\u003c/code\\u003e prefix from \\u003ccode\\u003eBlocker\\u003c/code\\u003e/\\u003ccode\\u003eBlockerFunction\\u003c/code\\u003e types (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8530\\\\\\\"\\u003e#8530\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e - Only use active matches in \\u003ccode\\u003e\\u0026#x3C;Meta\\u003e\\u003c/code\\u003e/\\u003ccode\\u003e\\u0026#x3C;Links\\u003e\\u003c/code\\u003e in SPA mode (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8538\\\\\\\"\\u003e#8538\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-17\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-17\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.21.3\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.21.3\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-19\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-19\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/create-remix/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/remix-architect/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/remix-cloudflare/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/remix-cloudflare-pages/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/remix-cloudflare-workers/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/remix-css-bundle/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/remix-deno/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/remix-dev/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/remix-eslint-config/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/remix-express/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/remix-node/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/remix-react/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/remix-serve/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/remix-server-runtime/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.1/packages/remix-testing/CHANGELOG.md#251\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.5.0...remix@2.5.1\\\\\\\"\\u003e\\u003ccode\\u003ev2.5.0...v2.5.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v250\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v250\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.5.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2024-01-11\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"whats-changed-8\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#whats-changed-8\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhat's Changed\\u003c/h3\\u003e\\\\n\\u003ch4 id=\\\\\\\"spa-mode-unstable\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#spa-mode-unstable\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSPA Mode (unstable)\\u003c/h4\\u003e\\\\n\\u003cp\\u003eSPA Mode (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/discussions/7638\\\\\\\"\\u003eRFC\\u003c/a\\u003e) allows you to generate your Remix app as a standalone SPA served from a static \\u003ccode\\u003eindex.html\\u003c/code\\u003e file. You can opt into SPA Mode by setting \\u003ccode\\u003eunstable_ssr: false\\u003c/code\\u003e in your Remix Vite plugin config:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// vite.config.ts\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eunstable_vitePlugin\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eas\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e plugins: [\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({ unstable_ssr: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e })],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eDevelopment in SPA Mode is just like a normal Remix app, and still uses the Remix dev server for HMR/HDR:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-sh\\\\\\\"\\u003eremix vite:dev\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eBuilding in SPA Mode will generate an \\u003ccode\\u003eindex.html\\u003c/code\\u003e file in your client assets directory:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-sh\\\\\\\"\\u003eremix vite:build\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eTo run your SPA, you serve your client assets directory via an HTTP server:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-sh\\\\\\\"\\u003enpx http-server build/client\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eFor more information, please refer to the \\u003ca href=\\\\\\\"https://remix.run/future/spa-mode\\\\\\\"\\u003eSPA Mode docs\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"server-bundles-unstable\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#server-bundles-unstable\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eServer Bundles (unstable)\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThis is an advanced feature designed for hosting provider integrations where you may want to split server code into multiple request handlers. When compiling your app into multiple server bundles, there will need to be a custom routing layer in front of your app directing requests to the correct bundle. This feature is currently unstable and only designed to gather early .\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou can control the server bundles generated by your Remix Vite build by setting the \\u003ccode\\u003eunstable_serverBundles\\u003c/code\\u003e option in your vite config:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eunstable_vitePlugin\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eas\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e plugins: [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eunstable_serverBundles\\u003c/span\\u003e: ({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebranch\\u003c/span\\u003e }) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisAuthenticatedRoute\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebranch\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esome\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eroute\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eroute\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eroutes/_authenticated\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisAuthenticatedRoute\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eauthenticated\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eunauthenticated\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e }),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e ],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-11\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-11\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eAdd unstable support for \\\\\\\"SPA Mode\\\\\\\" (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8457\\\\\\\"\\u003e#8457\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eAdd \\u003ccode\\u003eunstable_serverBundles\\u003c/code\\u003e option to Vite plugin to support splitting server code into multiple request handlers (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8332\\\\\\\"\\u003e#8332\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-35\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-35\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e: Only update \\u003ccode\\u003e*\\u003c/code\\u003e versions for Remix dependencies (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8458\\\\\\\"\\u003e#8458\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremix-serve\\u003c/code\\u003e: Don't try to load sourcemaps if they don't exist on disk (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8446\\\\\\\"\\u003e#8446\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Fix issue with \\u003ccode\\u003eisbot@4\\u003c/code\\u003e released on 1/1/2024 (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8415\\\\\\\"\\u003e#8415\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremix dev\\u003c/code\\u003e will now add \\u003ccode\\u003e\\\\\\\"isbot\\\\\\\": \\\\\\\"^4\\\\\\\"\\u003c/code\\u003e to \\u003ccode\\u003epackage.json\\u003c/code\\u003e instead of using \\u003ccode\\u003elatest\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eUpdate built-in \\u003ccode\\u003eentry.server\\u003c/code\\u003e files to work with both \\u003ccode\\u003eisbot@3\\u003c/code\\u003e and \\u003ccode\\u003eisbot@4\\u003c/code\\u003e for backwards-compatibility with Remix apps that have pinned \\u003ccode\\u003eisbot@3\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eTemplates are updated to use \\u003ccode\\u003eisbot@4\\u003c/code\\u003e moving forward via \\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Vite - Fix HMR issues when altering exports for non-rendered routes (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8157\\\\\\\"\\u003e#8157\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Vite - Default \\u003ccode\\u003eNODE_ENV\\u003c/code\\u003e to \\u003ccode\\u003e\\\\\\\"production\\\\\\\"\\u003c/code\\u003e when running \\u003ccode\\u003eremix vite:build\\u003c/code\\u003e command (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8405\\\\\\\"\\u003e#8405\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Vite - Remove Vite plugin config option \\u003ccode\\u003eserverBuildPath\\u003c/code\\u003e in favor of separate \\u003ccode\\u003eserverBuildDirectory\\u003c/code\\u003e and \\u003ccode\\u003eserverBuildFile\\u003c/code\\u003e options (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8332\\\\\\\"\\u003e#8332\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Vite - Loosen strict route exports restriction, reinstating support for non-Remix route exports (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8420\\\\\\\"\\u003e#8420\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e: Vite - Fix type conflict with \\u003ccode\\u003eimport.meta.hot\\u003c/code\\u003e from the existing Remix compiler (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8459\\\\\\\"\\u003e#8459\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e: Updated \\u003ccode\\u003ecookie\\u003c/code\\u003e dependency to \\u003ca href=\\\\\\\"https://github.com/jshttp/cookie/blob/master/HISTORY.md#060--2023-11-06\\\\\\\"\\u003e\\u003ccode\\u003e0.6.0\\u003c/code\\u003e\\u003c/a\\u003e to inherit support for the \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/Privacy/Partitioned_cookies\\\\\\\"\\u003e\\u003ccode\\u003ePartitioned\\u003c/code\\u003e\\u003c/a\\u003e attribute (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8375\\\\\\\"\\u003e#8375\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-18\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-18\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.21.2\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.21.2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1142\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.14.2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-20\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-20\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/create-remix/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/remix-architect/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/remix-cloudflare/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/remix-cloudflare-pages/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/remix-cloudflare-workers/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/remix-css-bundle/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/remix-deno/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/remix-dev/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/remix-eslint-config/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/remix-express/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/remix-node/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/remix-react/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/remix-serve/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/remix-server-runtime/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.5.0/packages/remix-testing/CHANGELOG.md#250\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.4.1...remix@2.5.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.4.1...v2.5.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v241\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v241\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.4.1\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2023-12-22\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-36\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-36\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Vite - Remove \\u003ccode\\u003eunstable_viteServerBuildModuleId\\u003c/code\\u003e in favor of manually referencing virtual module name \\u003ccode\\u003e\\\\\\\"virtual:remix/server-build\\\\\\\"\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8264\\\\\\\"\\u003e#8264\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e⚠️ \\u003cstrong\\u003eThis is a breaking change for projects using the unstable Vite plugin with a custom server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eThis change was made to avoid issues where \\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e could be inadvertently required in your server's production dependencies.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eInstead, you should manually write the virtual module name \\u003ccode\\u003e\\\\\\\"virtual:remix/server-build\\\\\\\"\\u003c/code\\u003e when calling \\u003ccode\\u003essrLoadModule\\u003c/code\\u003e in development.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eimport { unstable_viteServerBuildModuleId } from \\\\\\\"@remix-run/dev\\\\\\\";\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e// ...\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003eapp.all(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\\\\\\"*\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e createRequestHandler({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e build: vite\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e ? () =\\u003e vite.ssrLoadModule(unstable_viteServerBuildModuleId)\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e ? () =\\u003e vite.ssrLoadModule(\\\\\\\"virtual:remix/server-build\\\\\\\")\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e : await import(\\\\\\\"./build/server/index.js\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e })\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e);\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Vite - Add \\u003ccode\\u003evite:dev\\u003c/code\\u003e and \\u003ccode\\u003evite:build\\u003c/code\\u003e commands to the Remix CLI (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8211\\\\\\\"\\u003e#8211\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eIn order to handle upcoming Remix features where your plugin options can impact the number of Vite builds required, you should now run your Vite \\u003ccode\\u003edev\\u003c/code\\u003e and \\u003ccode\\u003ebuild\\u003c/code\\u003e processes via the Remix CLI.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e{\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\\\\\\"scripts\\\\\\\": {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e \\\\\\\"dev\\\\\\\": \\\\\\\"vite dev\\\\\\\",\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e \\\\\\\"build\\\\\\\": \\\\\\\"vite build \\u0026#x26;\\u0026#x26; vite build --ssr\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\\\\\\"dev\\\\\\\": \\\\\\\"remix vite:dev\\\\\\\",\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\\\\\\"build\\\\\\\": \\\\\\\"remix vite:build\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Vite - Error messages when \\u003ccode\\u003e.server\\u003c/code\\u003e files are referenced by client (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8267\\\\\\\"\\u003e#8267\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ePreviously, referencing a \\u003ccode\\u003e.server\\u003c/code\\u003e module from client code resulted in an error message like:\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eThe requested module '/app/models/answer.server.ts' does not provide an export named 'isDateType'\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eThis was confusing because \\u003ccode\\u003eanswer.server.ts\\u003c/code\\u003e \\u003cem\\u003edoes\\u003c/em\\u003e provide the \\u003ccode\\u003eisDateType\\u003c/code\\u003e export, but Remix was replacing \\u003ccode\\u003e.server\\u003c/code\\u003e modules with empty modules (\\u003ccode\\u003eexport {}\\u003c/code\\u003e) for the client build\\u003c/li\\u003e\\\\n\\u003cli\\u003eNow, Remix explicitly fails at compile time when a \\u003ccode\\u003e.server\\u003c/code\\u003e module is referenced from client code and includes dedicated error messages depending on whether the import occurs in a route or a non-route module\\u003c/li\\u003e\\\\n\\u003cli\\u003eThe error messages also include links to relevant documentation\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Vite - Preserve names for exports from \\u003ccode\\u003e.client\\u003c/code\\u003e modules (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8200\\\\\\\"\\u003e#8200\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eUnlike \\u003ccode\\u003e.server\\u003c/code\\u003e modules, the main idea is not to prevent code from leaking into the server build since the client build is already public\\u003c/li\\u003e\\\\n\\u003cli\\u003eRather, the goal is to isolate the SSR render from client-only code\\u003c/li\\u003e\\\\n\\u003cli\\u003eRoutes need to import code from \\u003ccode\\u003e.client\\u003c/code\\u003e modules without compilation failing and then rely on runtime checks or otherwise ensure that execution only happens within a client-only context (e.g. event handlers, \\u003ccode\\u003euseEffect\\u003c/code\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eReplacing \\u003ccode\\u003e.client\\u003c/code\\u003e modules with empty modules would cause the build to fail as ESM named imports are statically analyzed\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eSo instead, we preserve the named export but replace each exported value with \\u003ccode\\u003eundefined\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eThat way, the import is valid at build time and standard runtime checks can be used to determine if the code is running on the server or client\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Vite - Disable watch mode in Vite child compiler during build (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8342\\\\\\\"\\u003e#8342\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Vite - Show warning when source maps are enabled in production build (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8222\\\\\\\"\\u003e#8222\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e: Propagate server \\u003ccode\\u003eloader\\u003c/code\\u003e errors through \\u003ccode\\u003eserverLoader\\u003c/code\\u003e in hydrating \\u003ccode\\u003eclientLoader\\u003c/code\\u003e's (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8304\\\\\\\"\\u003e#8304\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e Re-export \\u003ccode\\u003eResponse\\u003c/code\\u003e helpers (\\u003ccode\\u003edefer\\u003c/code\\u003e/\\u003ccode\\u003ejson\\u003c/code\\u003e/\\u003ccode\\u003eredirect\\u003c/code\\u003e/\\u003ccode\\u003eredirectDocument\\u003c/code\\u003e) through \\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e for use in \\u003ccode\\u003eclientLoader\\u003c/code\\u003e/\\u003ccode\\u003eclientAction\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8351\\\\\\\"\\u003e#8351\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e: Add optional \\u003ccode\\u003eerror\\u003c/code\\u003e to \\u003ccode\\u003eServerRuntimeMetaArgs\\u003c/code\\u003e type to align with \\u003ccode\\u003eMetaArgs\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8238\\\\\\\"\\u003e#8238\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e: Switch to using \\u003ccode\\u003e@remix-run/web-fetch\\u003c/code\\u003e instead of \\u003ccode\\u003enode-fetch\\u003c/code\\u003e inside the \\u003ccode\\u003ecreate-remix\\u003c/code\\u003e CLI (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7345\\\\\\\"\\u003e#7345\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003eremix-serve\\u003c/code\\u003e: Use node \\u003ccode\\u003efileURLToPath\\u003c/code\\u003e to convert source map URL to path (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8321\\\\\\\"\\u003e#8321\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-19\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-19\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.21.1\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.21.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1141\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.14.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-21\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-21\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/create-remix/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/remix-architect/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/remix-cloudflare/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/remix-cloudflare-pages/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/remix-cloudflare-workers/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/remix-css-bundle/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/remix-deno/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/remix-dev/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/remix-eslint-config/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/remix-express/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/remix-node/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/remix-react/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/remix-serve/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/remix-server-runtime/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.1/packages/remix-testing/CHANGELOG.md#241\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.4.0...remix@2.4.1\\\\\\\"\\u003e\\u003ccode\\u003ev2.4.0...v2.4.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v240\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v240\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.4.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2023-12-13\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"whats-changed-9\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#whats-changed-9\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhat's Changed\\u003c/h3\\u003e\\\\n\\u003ch4 id=\\\\\\\"client-data\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#client-data\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eClient Data\\u003c/h4\\u003e\\\\n\\u003cp\\u003eWe're excited to land the \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/discussions/7634\\\\\\\"\\u003eClient Data RFC\\u003c/a\\u003e in this release! The final API differs slightly from the RFC, so please check out the docs for use-cases and final APIs:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://remix.run/guides/client-data\\\\\\\"\\u003eClient Data Guide\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://remix.run/route/client-loader\\\\\\\"\\u003e\\u003ccode\\u003eclientLoader\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://remix.run/route/hydrate-fallback\\\\\\\"\\u003e\\u003ccode\\u003eHydrateFallback\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://remix.run/route/client-action\\\\\\\"\\u003e\\u003ccode\\u003eclientAction\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eWhile we still recommend server loaders/actions for the majority of your data needs in a Remix app - these provide some levers you can pull for more advanced use-cases such as:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eSkip the Hop:\\u003c/strong\\u003e Query a data API directly from the browser, using loaders simply for SSR\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eFullstack State:\\u003c/strong\\u003e Augment server data with client data for your full set of loader data\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eOne or the Other:\\u003c/strong\\u003e Sometimes you use server loaders, sometimes you use client loaders, but not both on one route\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eClient Cache:\\u003c/strong\\u003e Cache server loader data in the client and avoid some server calls\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eMigration:\\u003c/strong\\u003e Ease your migration from React Router -\\u003e Remix SPA -\\u003e Remix SSR\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch4 id=\\\\\\\"futurev3_relativesplatpath\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#futurev3_relativesplatpath\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003efuture.v3_relativeSplatPath\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cp\\u003eWe introduced a \\u003ccode\\u003efuture.v3_relativeSplatPath\\u003c/code\\u003e flag to implement a breaking bug fix to relative routing when inside a splat route. For more information, please see the React Router \\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#futurev7_relativesplatpath\\\\\\\"\\u003e\\u003ccode\\u003e6.21.0\\u003c/code\\u003e Release Notes\\u003c/a\\u003e and the \\u003ca href=\\\\\\\"https://remix.run/hooks/use-resolved-path#splat-paths\\\\\\\"\\u003e\\u003ccode\\u003euseResolvedPath\\u003c/code\\u003e docs\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"vite-updates-unstable\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#vite-updates-unstable\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eVite Updates (Unstable)\\u003c/h4\\u003e\\\\n\\u003cp\\u003eRemix now excludes modules within \\u003ccode\\u003e.server\\u003c/code\\u003e directories from client build.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix now enforces strict route exports, and will will throw an error if you have unsupported exports in your route modules. Previously, the Remix compiler would allow any export from routes. While this was convenient, it was also a common source of bugs that were hard to track down because they only surfaced at runtime. For more information, please see \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/future/vite#strict-route-exports\\\\\\\"\\u003ethe docs\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-12\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-12\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eAdd support for \\u003ccode\\u003eclientLoader\\u003c/code\\u003e/\\u003ccode\\u003eclientAction\\u003c/code\\u003e/\\u003ccode\\u003eHydrateFallback\\u003c/code\\u003e route exports (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8173\\\\\\\"\\u003e#8173\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eAdd a new \\u003ccode\\u003efuture.v3_relativeSplatPath\\u003c/code\\u003e flag to implement a breaking bug fix to relative routing when inside a splat route (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8216\\\\\\\"\\u003e#8216\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eDeprecate \\u003ccode\\u003eDataFunctionArgs\\u003c/code\\u003e in favor of \\u003ccode\\u003eLoaderFunctionArgs\\u003c/code\\u003e/\\u003ccode\\u003eActionFunctionArgs\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8173\\\\\\\"\\u003e#8173\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eThis is aimed at keeping the types aligned across server/client loaders/actions now that \\u003ccode\\u003eclientLoader\\u003c/code\\u003e/\\u003ccode\\u003eclientActon\\u003c/code\\u003e functions have \\u003ccode\\u003eserverLoader\\u003c/code\\u003e/\\u003ccode\\u003eserverAction\\u003c/code\\u003e parameters which differentiate \\u003ccode\\u003eClientLoaderFunctionArgs\\u003c/code\\u003e/\\u003ccode\\u003eClientActionFunctionArgs\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eVite: Exclude modules within \\u003ccode\\u003e.server\\u003c/code\\u003e directories from client build (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8154\\\\\\\"\\u003e#8154\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eVite: Strict route exports (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8171\\\\\\\"\\u003e#8171\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-37\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-37\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e: Fix flash of unstyled content for non-Express custom servers in Vite dev (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8076\\\\\\\"\\u003e#8076\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e: Pass request handler errors to \\u003ccode\\u003evite.ssrFixStacktrace\\u003c/code\\u003e in Vite dev to ensure stack traces correctly map to the original source code (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8066\\\\\\\"\\u003e#8066\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003eremix-serve\\u003c/code\\u003e: Fix source map loading when file has \\u003ccode\\u003e?t=timestamp\\u003c/code\\u003e suffix (rebuilds) (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8174\\\\\\\"\\u003e#8174\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Change Vite build output paths to fix a conflict between how Vite and the Remix compiler each manage the \\u003ccode\\u003epublic\\u003c/code\\u003e directory (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8077\\\\\\\"\\u003e#8077\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e⚠️ \\u003cstrong\\u003eThis is a breaking change for projects using the unstable Vite plugin\\u003c/strong\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eThe server is now compiled into \\u003ccode\\u003ebuild/server\\u003c/code\\u003e rather than \\u003ccode\\u003ebuild\\u003c/code\\u003e, and the client is now compiled into \\u003ccode\\u003ebuild/client\\u003c/code\\u003e rather than \\u003ccode\\u003epublic\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eFor more information on the changes and guidance on how to migrate your project, refer to the updated \\u003ca href=\\\\\\\"https://remix.run/future/vite\\\\\\\"\\u003eRemix Vite documentation\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Upgrade Vite peer dependency range to v5 (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8172\\\\\\\"\\u003e#8172\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Support HMR for routes with \\u003ccode\\u003ehandle\\u003c/code\\u003e export in Vite dev (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8022\\\\\\\"\\u003e#8022\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Fix flash of unstyled content for non-Express custom servers in Vite dev (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8076\\\\\\\"\\u003e#8076\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Bundle CSS imported in client entry file in Vite plugin (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8143\\\\\\\"\\u003e#8143\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Remove undocumented \\u003ccode\\u003elegacyCssImports\\u003c/code\\u003e option from Vite plugin due to issues with \\u003ccode\\u003e?url\\u003c/code\\u003e imports of CSS files not being processed correctly in Vite (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8096\\\\\\\"\\u003e#8096\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Vite: fix access to default \\u003ccode\\u003eentry.{client,server}.tsx\\u003c/code\\u003e within \\u003ccode\\u003epnpm\\u003c/code\\u003e workspaces on Windows (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8057\\\\\\\"\\u003e#8057\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Remove \\u003ccode\\u003eunstable_createViteServer\\u003c/code\\u003e and \\u003ccode\\u003eunstable_loadViteServerBuild\\u003c/code\\u003e which were only minimal wrappers around Vite's \\u003ccode\\u003ecreateServer\\u003c/code\\u003e and \\u003ccode\\u003essrLoadModule\\u003c/code\\u003e functions when using a custom server (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8120\\\\\\\"\\u003e#8120\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e⚠️ \\u003cstrong\\u003eThis is a breaking change for projects using the unstable Vite plugin with a custom server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eInstead, we now provide \\u003ccode\\u003eunstable_viteServerBuildModuleId\\u003c/code\\u003e so that custom servers interact with Vite directly rather than via Remix APIs, for example:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eimport {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e unstable_createViteServer,\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e unstable_loadViteServerBuild,\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e} from \\\\\\\"@remix-run/dev\\\\\\\";\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eimport { unstable_viteServerBuildModuleId } from \\\\\\\"@remix-run/dev\\\\\\\";\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eCreating the Vite server in middleware mode:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003econst vite =\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e process.env.NODE_ENV === \\\\\\\"production\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e ? undefined\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e : await unstable_createViteServer();\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e : await import(\\\\\\\"vite\\\\\\\").then(({ createServer }) =\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e createServer({\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e server: {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e middlewareMode: true,\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e },\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e })\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e );\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eLoading the Vite server build in the request handler:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003eapp.all(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\\\\\\"*\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e createRequestHandler({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e build: vite\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e ? () =\\u003e unstable_loadViteServerBuild(vite)\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e ? () =\\u003e vite.ssrLoadModule(unstable_viteServerBuildModuleId)\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e : await import(\\\\\\\"./build/server/index.js\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e })\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e);\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Pass request handler errors to \\u003ccode\\u003evite.ssrFixStacktrace\\u003c/code\\u003e in Vite dev to ensure stack traces correctly map to the original source code (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8066\\\\\\\"\\u003e#8066\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Vite: Preserve names for exports from \\u003ccode\\u003e.client\\u003c/code\\u003e imports (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8200\\\\\\\"\\u003e#8200\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eUnlike \\u003ccode\\u003e.server\\u003c/code\\u003e modules, the main idea is not to prevent code from leaking into the server build since the client build is already public\\u003c/li\\u003e\\\\n\\u003cli\\u003eRather, the goal is to isolate the SSR render from client-only code\\u003c/li\\u003e\\\\n\\u003cli\\u003eRoutes need to import code from \\u003ccode\\u003e.client\\u003c/code\\u003e modules without compilation failing and then rely on runtime checks to determine if the code is running on the server or client\\u003c/li\\u003e\\\\n\\u003cli\\u003eReplacing \\u003ccode\\u003e.client\\u003c/code\\u003e modules with empty modules would cause the build to fail as ESM named imports are statically analyzed\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eSo instead, we preserve the named export but replace each exported value with an empty object\\u003c/li\\u003e\\\\n\\u003cli\\u003eThat way, the import is valid at build time and the standard runtime checks can be used to determine if then code is running on the server or client\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Add \\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e to Vite's \\u003ccode\\u003eoptimizeDeps.include\\u003c/code\\u003e array (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8177\\\\\\\"\\u003e#8177\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Improve Vite plugin performance (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8121\\\\\\\"\\u003e#8121\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eParallelize detection of route module exports\\u003c/li\\u003e\\\\n\\u003cli\\u003eDisable \\u003ccode\\u003eserver.preTransformRequests\\u003c/code\\u003e in Vite child compiler since it's only used to process route modules\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Remove automatic global Node polyfill installation from the built-in Vite dev server and instead allow explicit opt-in (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8119\\\\\\\"\\u003e#8119\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e⚠️ \\u003cstrong\\u003eThis is a breaking change for projects using the unstable Vite plugin without a custom server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eIf you're not using a custom server, you should call \\u003ccode\\u003einstallGlobals\\u003c/code\\u003e in your Vite config instead.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003eimport { unstable_vitePlugin as remix } from \\\\\\\"@remix-run/dev\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eimport { installGlobals } from \\\\\\\"@remix-run/node\\\\\\\";\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003eimport { defineConfig } from \\\\\\\"vite\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003einstallGlobals();\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003eexport default defineConfig({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e plugins: [remix()],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Vite: Errors at build-time when client imports .server default export (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8184\\\\\\\"\\u003e#8184\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRemix already stripped .server file code before ensuring that server code never makes it into the client\\u003c/li\\u003e\\\\n\\u003cli\\u003eThat results in errors when client code tries to import server code, which is exactly what we want!\\u003c/li\\u003e\\\\n\\u003cli\\u003eBut those errors were happening at runtime for default imports\\u003c/li\\u003e\\\\n\\u003cli\\u003eA better experience is to have those errors happen at build-time so that you guarantee that your users won't hit them\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Fix \\u003ccode\\u003erequest instanceof Request\\u003c/code\\u003e checks when using Vite dev server (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8062\\\\\\\"\\u003e#8062\\u003c/a\\u003e)\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-20\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-20\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.21.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.21.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1140\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.14.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/web-std-io/releases/tag/%40remix-run%2Fweb-fetch%404.4.2\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/web-fetch@4.4.2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-22\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-22\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/create-remix/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/remix-architect/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/remix-cloudflare/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/remix-cloudflare-pages/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/remix-cloudflare-workers/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/remix-css-bundle/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/remix-deno/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/remix-dev/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/remix-eslint-config/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/remix-express/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/remix-node/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/remix-react/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/remix-serve/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/remix-server-runtime/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.4.0/packages/remix-testing/CHANGELOG.md#240\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.3.1...remix@2.4.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.3.1...v2.4.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v231\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v231\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.3.1\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2023-11-22\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-38\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-38\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Support \\u003ccode\\u003enonce\\u003c/code\\u003e prop on \\u003ccode\\u003eLiveReload\\u003c/code\\u003e component in Vite dev (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8014\\\\\\\"\\u003e#8014\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Ensure code-split JS files in the server build's assets directory aren't cleaned up after Vite build (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8042\\\\\\\"\\u003e#8042\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Fix redundant copying of assets from \\u003ccode\\u003epublic\\u003c/code\\u003e directory in Vite build (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/8039\\\\\\\"\\u003e#8039\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eThis ensures that static assets aren't duplicated in the server build directory\\u003c/li\\u003e\\\\n\\u003cli\\u003eThis also fixes an issue where the build would break if \\u003ccode\\u003eassetsBuildDirectory\\u003c/code\\u003e was deeply nested within the \\u003ccode\\u003epublic\\u003c/code\\u003e directory\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-21\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-21\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.20.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.20.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1130\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.13.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-23\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-23\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/create-remix/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/remix-architect/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/remix-cloudflare/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/remix-cloudflare-pages/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/remix-cloudflare-workers/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/remix-css-bundle/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/remix-deno/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/remix-dev/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/remix-eslint-config/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/remix-express/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/remix-node/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/remix-react/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/remix-serve/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/remix-server-runtime/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.1/packages/remix-testing/CHANGELOG.md#231\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.3.0...remix@2.3.1\\\\\\\"\\u003e\\u003ccode\\u003ev2.3.0...v2.3.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v230\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v230\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.3.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2023-11-16\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"whats-changed-10\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#whats-changed-10\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhat's Changed\\u003c/h3\\u003e\\\\n\\u003ch4 id=\\\\\\\"stabilized-useblocker\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#stabilized-useblocker\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eStabilized \\u003ccode\\u003euseBlocker\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cp\\u003eWe've removed the \\u003ccode\\u003eunstable_\\u003c/code\\u003e prefix from the \\u003ca href=\\\\\\\"https://remix.run/hooks/use-blocker\\\\\\\"\\u003e\\u003ccode\\u003euseBlocker\\u003c/code\\u003e\\u003c/a\\u003e hook as it's been in use for enough time that we are confident in the API. We do not plan to remove the prefix from \\u003ca href=\\\\\\\"https://remix.run/hooks/use-prompt\\\\\\\"\\u003e\\u003ccode\\u003eunstable_usePrompt\\u003c/code\\u003e\\u003c/a\\u003e due to differences in how browsers handle \\u003ccode\\u003ewindow.confirm\\u003c/code\\u003e that prevent React Router from guaranteeing consistent/correct behavior.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"unstable_flushsync-api\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#unstable_flushsync-api\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eunstable_flushSync\\u003c/code\\u003e API\\u003c/h4\\u003e\\\\n\\u003cp\\u003eWe've added a new \\u003ccode\\u003eunstable_flushSync\\u003c/code\\u003e option to the imperative APIs (\\u003ccode\\u003euseSubmit\\u003c/code\\u003e, \\u003ccode\\u003euseNavigate\\u003c/code\\u003e, \\u003ccode\\u003efetcher.submit\\u003c/code\\u003e, \\u003ccode\\u003efetcher.load\\u003c/code\\u003e) to let users opt-into synchronous DOM updates for pending/optimistic UI.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehandleClick\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esubmit\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e, { flushSync: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// Everything is flushed to the DOM so you can focus/scroll to your pending/optimistic UI\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetFocusAndOrScrollToNewlyAddedThing\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-13\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-13\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRemove the \\u003ccode\\u003eunstable_\\u003c/code\\u003e prefix from the \\u003ca href=\\\\\\\"https://reactrouter.com/v6/hooks/use-blocker\\\\\\\"\\u003e\\u003ccode\\u003euseBlocker\\u003c/code\\u003e\\u003c/a\\u003e hook (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7882\\\\\\\"\\u003e#7882\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eAdd \\u003ccode\\u003eunstable_flushSync\\u003c/code\\u003e option to \\u003ccode\\u003euseNavigate\\u003c/code\\u003e/\\u003ccode\\u003euseSubmit\\u003c/code\\u003e/\\u003ccode\\u003efetcher.load\\u003c/code\\u003e/\\u003ccode\\u003efetcher.submit\\u003c/code\\u003e to opt-out of \\u003ccode\\u003eReact.startTransition\\u003c/code\\u003e and into \\u003ccode\\u003eReactDOM.flushSync\\u003c/code\\u003e for state updates (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7996\\\\\\\"\\u003e#7996\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-39\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-39\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e: Add missing \\u003ccode\\u003emodulepreload\\u003c/code\\u003e for the manifest (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7684\\\\\\\"\\u003e#7684\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e: Updated \\u003ccode\\u003ecookie\\u003c/code\\u003e dependency from \\u003ccode\\u003e0.4.1\\u003c/code\\u003e to \\u003ca href=\\\\\\\"https://github.com/jshttp/cookie/blob/v0.5.0/HISTORY.md#050--2022-04-11\\\\\\\"\\u003e\\u003ccode\\u003e0.5.0\\u003c/code\\u003e\\u003c/a\\u003e to inherit support for \\u003ccode\\u003ePriority\\u003c/code\\u003e attribute in Chrome (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6770\\\\\\\"\\u003e#6770\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e: Fix \\u003ccode\\u003eFutureConfig\\u003c/code\\u003e type (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7895\\\\\\\"\\u003e#7895\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cem\\u003eLots\\u003c/em\\u003e of small fixes for the unstable \\u003ccode\\u003evite\\u003c/code\\u003e compiler:\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eSupport optional rendering of the \\u003ccode\\u003eLiveReload\\u003c/code\\u003e component in Vite dev (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7919\\\\\\\"\\u003e#7919\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eSupport rendering of the \\u003ccode\\u003eLiveReload\\u003c/code\\u003e component after \\u003ccode\\u003eScripts\\u003c/code\\u003e in Vite dev (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7919\\\\\\\"\\u003e#7919\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eFix \\u003ccode\\u003ereact-refresh/babel\\u003c/code\\u003e resolution for custom server with \\u003ccode\\u003epnpm\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7904\\\\\\\"\\u003e#7904\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eSupport JSX usage in \\u003ccode\\u003e.jsx\\u003c/code\\u003e files without manual \\u003ccode\\u003eReact\\u003c/code\\u003e import in Vite (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7888\\\\\\\"\\u003e#7888\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eFix Vite production builds when plugins that have different local state between \\u003ccode\\u003edevelopment\\u003c/code\\u003e and \\u003ccode\\u003eproduction\\u003c/code\\u003e modes are present (e.g. \\u003ccode\\u003e@mdx-js/rollup\\u003c/code\\u003e) (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7911\\\\\\\"\\u003e#7911\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eCache resolution of Remix Vite plugin options (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7908\\\\\\\"\\u003e#7908\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eSupport Vite 5 (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7846\\\\\\\"\\u003e#7846\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eAllow \\u003ccode\\u003eprocess.env.NODE_ENV\\u003c/code\\u003e values other than \\u003ccode\\u003e\\\\\\\"development\\\\\\\"\\u003c/code\\u003e in Vite dev (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7980\\\\\\\"\\u003e#7980\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eAttach CSS from shared chunks to routes in Vite build (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7952\\\\\\\"\\u003e#7952\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eLet Vite handle serving files outside of project root via \\u003ccode\\u003e/@fs\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7913\\\\\\\"\\u003e#7913\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eThis fixes errors when using default client entry or server entry in a pnpm project where those files may be outside of the project root, but within the workspace root\\u003c/li\\u003e\\\\n\\u003cli\\u003eBy default, Vite prevents access to files outside the workspace root (when using workspaces) or outside of the project root (when not using workspaces) unless user explicitly opts into it via Vite's \\u003ccode\\u003eserver.fs.allow\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eImprove performance of LiveReload proxy in Vite dev (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7883\\\\\\\"\\u003e#7883\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eDeduplicate \\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7926\\\\\\\"\\u003e#7926\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ePre-bundle Remix dependencies to avoid Remix router duplicates\\u003c/li\\u003e\\\\n\\u003cli\\u003eOur \\u003ccode\\u003eremix-react-proxy\\u003c/code\\u003e plugin does not process default client and server entry files since those come from within \\u003ccode\\u003enode_modules\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eThat means that before Vite pre-bundles dependencies (e.g. first time dev server is run) mismatching Remix routers cause \\u003ccode\\u003eError: You must render this element inside a \\u0026#x3C;Remix\\u003e element\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eFix React Fast Refresh error on load when using \\u003ccode\\u003edefer\\u003c/code\\u003e in Vite dev server (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7842\\\\\\\"\\u003e#7842\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eHandle multiple \\u003ccode\\u003eSet-Cookie\\u003c/code\\u003e headers in Vite dev server (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7843\\\\\\\"\\u003e#7843\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eFix flash of unstyled content on initial page load in Vite dev when using a custom Express server (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7937\\\\\\\"\\u003e#7937\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003ePopulate \\u003ccode\\u003eprocess.env\\u003c/code\\u003e from \\u003ccode\\u003e.env\\u003c/code\\u003e files on the server in Vite dev (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7958\\\\\\\"\\u003e#7958\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eEmit assets that were only referenced in the server build into the client assets directory in Vite build (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7892\\\\\\\"\\u003e#7892\\u003c/a\\u003e, cherry-picked in \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/commit/8cd31d6543ef4c765220fc64dca9bcc9c61ee9eb\\\\\\\"\\u003e\\u003ccode\\u003e8cd31d65\\u003c/code\\u003e\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-22\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-22\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.19.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.19.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1120\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.12.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-24\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-24\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/create-remix/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/remix-architect/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/remix-cloudflare/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/remix-cloudflare-pages/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/remix-cloudflare-workers/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/remix-css-bundle/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/remix-deno/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/remix-dev/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/remix-eslint-config/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/remix-express/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/remix-node/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/remix-react/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/remix-serve/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/remix-server-runtime/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.3.0/packages/remix-testing/CHANGELOG.md#230\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.2.0...remix@2.3.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.2.0...v2.3.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v220\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v220\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.2.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2023-10-31\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"whats-changed-11\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#whats-changed-11\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhat's Changed\\u003c/h3\\u003e\\\\n\\u003ch4 id=\\\\\\\"vite\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#vite\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eVite!\\u003c/h4\\u003e\\\\n\\u003cp\\u003eRemix \\u003ccode\\u003e2.2.0\\u003c/code\\u003e adds unstable support for Vite for Node-based apps! See our \\u003ca href=\\\\\\\"https://remix.run/blog/remix-heart-vite\\\\\\\"\\u003eannouncement blog post\\u003c/a\\u003e and the \\u003ca href=\\\\\\\"https://remix.run/docs/en/2.2.0/future/vite\\\\\\\"\\u003e\\u003cem\\u003eFuture \\u003e Vite\\u003c/em\\u003e page in the Remix docs\\u003c/a\\u003e for more details.\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou can try it out today with two new (unstable) templates:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e# minimal server\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpx\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecreate-remix@latest\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e--template\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eremix-run/remix/templates/unstable-vite\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e# custom server (Express example)\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpx\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecreate-remix@latest\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e--template\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eremix-run/remix/templates/unstable-vite-express\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eNew APIs in \\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/strong\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_vitePlugin\\u003c/code\\u003e: The new Remix Vite plugin\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_createViteServer\\u003c/code\\u003e: Creates a Vite server in middleware mode for interop with custom servers\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_loadViteServerBuild\\u003c/code\\u003e: Allows your custom server to delegate SSR requests to Vite during development\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eChanged APIs\\u003c/strong\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ecreateRequestHandler\\u003c/code\\u003e: Now also allows the \\u003ccode\\u003ebuild\\u003c/code\\u003e argument to be a function that will be used to dynamically load new builds for each request during development\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eOther Runtimes\\u003c/strong\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eDeno support is untested, but should work through Deno's Node/\\u003ccode\\u003enpm\\u003c/code\\u003e interop\\u003c/li\\u003e\\\\n\\u003cli\\u003eCloudFlare support is not yet available\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch4 id=\\\\\\\"new-fetcher-apis\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#new-fetcher-apis\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNew Fetcher APIs\\u003c/h4\\u003e\\\\n\\u003cp\\u003ePer this \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/discussions/7698\\\\\\\"\\u003eRFC\\u003c/a\\u003e, we've introduced some new APIs that give you more granular control over your fetcher behaviors:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eYou may now specify your own fetcher identifier via \\u003ccode\\u003euseFetcher({ key: string })\\u003c/code\\u003e, which allows you to access the same fetcher instance from different components in your application without prop-drilling\\u003c/li\\u003e\\\\n\\u003cli\\u003eFetcher keys are now exposed on the fetchers returned from \\u003ccode\\u003euseFetchers\\u003c/code\\u003e so that they can be looked up by \\u003ccode\\u003ekey\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eForm\\u003c/code\\u003e and \\u003ccode\\u003euseSubmit\\u003c/code\\u003e now support optional \\u003ccode\\u003enavigate\\u003c/code\\u003e/\\u003ccode\\u003efetcherKey\\u003c/code\\u003e props/params to allow kicking off a fetcher submission under the hood with an optionally user-specified \\u003ccode\\u003ekey\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e\\u0026#x3C;Form method=\\\\\\\"post\\\\\\\" navigate={false} fetcherKey=\\\\\\\"my-key\\\\\\\"\\u003e\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003esubmit(data, { method: \\\\\\\"post\\\\\\\", navigate: false, fetcherKey: \\\\\\\"my-key\\\\\\\" })\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eInvoking a fetcher in this way is ephemeral and stateless\\u003c/li\\u003e\\\\n\\u003cli\\u003eIf you need to access the state of one of these fetchers, you will need to leverage \\u003ccode\\u003euseFetchers()\\u003c/code\\u003e or \\u003ccode\\u003euseFetcher({ key })\\u003c/code\\u003e to look it up elsewhere\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch4 id=\\\\\\\"persistence-future-flag\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#persistence-future-flag\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePersistence Future Flag\\u003c/h4\\u003e\\\\n\\u003cp\\u003ePer the same \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/discussions/7698\\\\\\\"\\u003eRFC\\u003c/a\\u003e as above, we've introduced a new \\u003ccode\\u003efuture.v3_fetcherPersist\\u003c/code\\u003e flag that allows you to opt-into the new fetcher persistence/cleanup behavior. Instead of being immediately cleaned up on unmount, fetchers will persist until they return to an \\u003ccode\\u003eidle\\u003c/code\\u003e state. This makes pending/optimistic UI \\u003cem\\u003emuch\\u003c/em\\u003e easier in scenarios where the originating fetcher needs to unmount.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eThis is sort of a long-standing bug fix as the \\u003ccode\\u003euseFetchers()\\u003c/code\\u003e API was always supposed to only reflect \\u003cstrong\\u003ein-flight\\u003c/strong\\u003e fetcher information for pending/optimistic UI -- it was not intended to reflect fetcher data or hang onto fetchers after they returned to an \\u003ccode\\u003eidle\\u003c/code\\u003e state\\u003c/li\\u003e\\\\n\\u003cli\\u003eKeep an eye out for the following specific behavioral changes when opting into this flag and check your app for compatibility:\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eFetchers that complete \\u003cem\\u003ewhile still mounted\\u003c/em\\u003e will no longer appear in \\u003ccode\\u003euseFetchers()\\u003c/code\\u003e after completion - they served no purpose in there since you can access the data via \\u003ccode\\u003euseFetcher().data\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eFetchers that previously unmounted \\u003cem\\u003ewhile in-flight\\u003c/em\\u003e will not be immediately aborted and will instead be cleaned up once they return to an \\u003ccode\\u003eidle\\u003c/code\\u003e state\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eThey will remain exposed via \\u003ccode\\u003euseFetchers\\u003c/code\\u003e while in-flight so you can still access pending/optimistic data after unmount\\u003c/li\\u003e\\\\n\\u003cli\\u003eIf a fetcher is no longer mounted when it completes, then it's result will not be post processed - e.g., redirects will not be followed and errors will not bubble up in the UI\\u003c/li\\u003e\\\\n\\u003cli\\u003eHowever, if a fetcher was re-mounted elsewhere in the tree using the same \\u003ccode\\u003ekey\\u003c/code\\u003e, then it's result will be processed, even if the originating fetcher was unmounted\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-14\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-14\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eUnstable \\u003ccode\\u003evite\\u003c/code\\u003e support (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7590\\\\\\\"\\u003e#7590\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eNew fetcher \\u003ccode\\u003ekey\\u003c/code\\u003e APIs and \\u003ccode\\u003enavigate\\u003c/code\\u003e/\\u003ccode\\u003efetcherKey\\u003c/code\\u003e params for navigational APIs (\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/pull/10960\\\\\\\"\\u003e#10960\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eNew \\u003ccode\\u003efuture.v3_fetcherPersist\\u003c/code\\u003e flag (\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/pull/10962\\\\\\\"\\u003e#10962\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-40\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-40\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e: Allow the Express adapter to work behind a proxy when using \\u003ccode\\u003eapp.enable('trust proxy')\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7323\\\\\\\"\\u003e#7323\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ePreviously, this used \\u003ccode\\u003ereq.get('host')\\u003c/code\\u003e to construct the Remix \\u003ccode\\u003eRequest\\u003c/code\\u003e, but that does not respect \\u003ccode\\u003eX-Forwarded-Host\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eThis now uses \\u003ccode\\u003ereq.hostname\\u003c/code\\u003e which will respect \\u003ccode\\u003eX-Forwarded-Host\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e: Fix warning that could be inadvertently logged when using route files with no \\u003ccode\\u003edefault\\u003c/code\\u003e export (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7745\\\\\\\"\\u003e#7745\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e: Support local tarballs with a \\u003ccode\\u003e.tgz\\u003c/code\\u003e extension which allows direct support for \\u003ca href=\\\\\\\"https://pnpm.io/cli/pack\\\\\\\"\\u003e\\u003ccode\\u003epnpm pack\\u003c/code\\u003e tarballs\\u003c/a\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7649\\\\\\\"\\u003e#7649\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e: Default the Remix app version to the version of \\u003ccode\\u003ecreate-remix\\u003c/code\\u003e being used (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7670\\\\\\\"\\u003e#7670\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eThis most notably enables easier usage of tags, e.g. \\u003ccode\\u003enpm create remix@nightly\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-23\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-23\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.18.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.18.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1110\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.11.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-25\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-25\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/create-remix/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/remix-architect/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/remix-cloudflare/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/remix-cloudflare-pages/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/remix-cloudflare-workers/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/remix-css-bundle/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/remix-deno/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/remix-dev/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/remix-eslint-config/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/remix-express/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/remix-node/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/remix-react/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/remix-serve/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/remix-server-runtime/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.2.0/packages/remix-testing/CHANGELOG.md#220\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.1.0...remix@2.2.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.1.0...v2.2.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v210\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v210\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.1.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2023-10-16\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"whats-changed-12\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#whats-changed-12\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhat's Changed\\u003c/h3\\u003e\\\\n\\u003ch4 id=\\\\\\\"view-transitions\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#view-transitions\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eView Transitions\\u003c/h4\\u003e\\\\n\\u003cp\\u003eWe're excited to release experimental support for the the \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition\\\\\\\"\\u003eView Transitions API\\u003c/a\\u003e in Remix! You can now trigger navigational DOM updates to be wrapped in \\u003ccode\\u003edocument.startViewTransition\\u003c/code\\u003e to enable CSS animated transitions on SPA navigations in your application.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe simplest approach to enabling a View Transition in your Remix app is via the new \\u003ca href=\\\\\\\"https://remix.run/docs/components/link#unstable_viewtransition\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Link unstable_viewTransition\\u003e\\u003c/code\\u003e\\u003c/a\\u003e prop. This will cause the navigation DOM update to be wrapped in \\u003ccode\\u003edocument.startViewTransition\\u003c/code\\u003e which will enable transitions for the DOM update. Without any additional CSS styles, you'll get a basic cross-fade animation for your page.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you need to apply more fine-grained styles for your animations, you can leverage the \\u003ca href=\\\\\\\"https://remix.run/docs/hooks/use-view-transition-state\\\\\\\"\\u003e\\u003ccode\\u003eunstable_useViewTransitionState\\u003c/code\\u003e\\u003c/a\\u003e hook which will tell you when a transition is in progress and you can use that to apply classes or styles:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"jsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"jsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eImageLink\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eto\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esrc\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ealt\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisTransitioning\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eunstable_useViewTransitionState\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eto\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLink\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eto\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eto\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eunstable_viewTransition\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eimg\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esrc\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esrc\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ealt\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ealt\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003estyle\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e{\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e viewTransitionName: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisTransitioning\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eimage-expand\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eYou can also use the \\u003ca href=\\\\\\\"https://remix.run/docs/components/nav-link#unstable_viewtransition\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;NavLink unstable_viewTransition\\u003e\\u003c/code\\u003e\\u003c/a\\u003e shorthand which will manage the hook usage for you and automatically add a \\u003ccode\\u003etransitioning\\u003c/code\\u003e class to the \\u003ccode\\u003e\\u0026#x3C;a\\u003e\\u003c/code\\u003e during the transition:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"css\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"css\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ea\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etransitioning\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eimg\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e view-transition-name: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eimage-expand\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"jsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"jsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eNavLink\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eto\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eto\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eunstable_viewTransition\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eimg\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esrc\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esrc\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ealt\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ealt\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eNavLink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eFor an example usage of View Transitions, check out \\u003ca href=\\\\\\\"https://github.com/brophdawg11/react-router-records\\\\\\\"\\u003eour fork\\u003c/a\\u003e of the \\u003ca href=\\\\\\\"https://github.com/Charca/astro-records\\\\\\\"\\u003eAstro Records\\u003c/a\\u003e demo (which uses React Router but so does Remix 😉).\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor more information on using the View Transitions API, please refer to the \\u003ca href=\\\\\\\"https://developer.chrome.com/docs/web-platform/view-transitions/\\\\\\\"\\u003eSmooth and simple transitions with the View Transitions API\\u003c/a\\u003e guide from the Google Chrome team.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"stable-createremixstub\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#stable-createremixstub\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eStable \\u003ccode\\u003ecreateRemixStub\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cp\\u003eAfter real-world experience, we're confident in the \\u003ca href=\\\\\\\"https://remix.run/docs/utils/create-remix-stub\\\\\\\"\\u003e\\u003ccode\\u003ecreateRemixStub\\u003c/code\\u003e\\u003c/a\\u003e API and ready to commit to it, so in \\u003ccode\\u003e2.1.0\\u003c/code\\u003e we've removed the \\u003ccode\\u003eunstable_\\u003c/code\\u003e prefix.\\u003c/p\\u003e\\\\n\\u003cp\\u003e⚠️ Please note that this did involve 1 \\u003cem\\u003esmall\\u003c/em\\u003e breaking change - the \\u003ccode\\u003e\\u0026#x3C;RemixStub remixConfigFuture\\u003e\\u003c/code\\u003e prop has been renamed to \\u003ccode\\u003e\\u0026#x3C;RemixStub future\\u003e\\u003c/code\\u003e to decouple the \\u003ccode\\u003efuture\\u003c/code\\u003e prop from a specific file location.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"minor-changes-15\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#minor-changes-15\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMinor Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eAdded unstable support for the View Transition API (\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/pull/10916\\\\\\\"\\u003e#10916\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eStabilized the \\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e \\u003ccode\\u003ecreateRemixStub\\u003c/code\\u003e helper (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7647\\\\\\\"\\u003e#7647\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-41\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-41\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eEmulate types for \\u003ccode\\u003eJSON.parse(JSON.stringify(x))\\u003c/code\\u003e in \\u003ccode\\u003eSerializeFrom\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7605\\\\\\\"\\u003e#7605\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eNotably, type fields that are only assignable to \\u003ccode\\u003eundefined\\u003c/code\\u003e after serialization are now omitted since \\u003ccode\\u003eJSON.stringify |\\u003e JSON.parse\\u003c/code\\u003e will omit them. See test cases for examples\\u003c/li\\u003e\\\\n\\u003cli\\u003eThis fixes type errors when upgrading to v2 from 1.19\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eAvoid mutating \\u003ccode\\u003emeta\\u003c/code\\u003e object when \\u003ccode\\u003etagName\\u003c/code\\u003e is specified (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7594\\\\\\\"\\u003e#7594\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eFix FOUC on subsequent client-side navigations to \\u003ccode\\u003eroute.lazy\\u003c/code\\u003e routes (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7576\\\\\\\"\\u003e#7576\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eExport the proper Remix \\u003ccode\\u003euseMatches\\u003c/code\\u003e wrapper to fix \\u003ccode\\u003eUIMatch\\u003c/code\\u003e typings (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7551\\\\\\\"\\u003e#7551\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e - sourcemap takes into account special chars in output file (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7574\\\\\\\"\\u003e#7574\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e - Flush headers for \\u003ccode\\u003etext/event-stream\\u003c/code\\u003e responses (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7619\\\\\\\"\\u003e#7619\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-24\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-24\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.17.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.17.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1100\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.10.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-26\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-26\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/create-remix/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/remix-architect/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/remix-cloudflare/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/remix-cloudflare-pages/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/remix-cloudflare-workers/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/remix-css-bundle/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/remix-deno/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/remix-dev/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/remix-eslint-config/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/remix-express/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/remix-node/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/remix-react/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/remix-serve/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/remix-server-runtime/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.1.0/packages/remix-testing/CHANGELOG.md#210\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.0.1...remix@2.1.0\\\\\\\"\\u003e\\u003ccode\\u003ev2.0.1...v2.1.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v201\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v201\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.0.1\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2023-09-21\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"patch-changes-42\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#patch-changes-42\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePatch Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eFix types for MDX files when using pnpm (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7491\\\\\\\"\\u003e#7491\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eUpdate \\u003ccode\\u003egetDependenciesToBundle\\u003c/code\\u003e to handle ESM packages without main exports (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7272\\\\\\\"\\u003e#7272\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eNote that these packages must expose \\u003ccode\\u003epackage.json\\u003c/code\\u003e in their \\u003ccode\\u003eexports\\u003c/code\\u003e field so that their path can be resolved\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eFix server builds where \\u003ccode\\u003eserverBuildPath\\u003c/code\\u003e extension is \\u003ccode\\u003e.cjs\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7180\\\\\\\"\\u003e#7180\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eFix HMR for CJS projects using \\u003ccode\\u003eremix-serve\\u003c/code\\u003e and manual mode (\\u003ccode\\u003eremix dev --manual\\u003c/code\\u003e) (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7487\\\\\\\"\\u003e#7487\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eBy explicitly busting the \\u003ccode\\u003erequire\\u003c/code\\u003e cache, \\u003ccode\\u003eremix-serve\\u003c/code\\u003e now correctly re-imports new server changes in CJS\\u003c/li\\u003e\\\\n\\u003cli\\u003eESM projects were already working correctly and are not affected by this.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eFix error caused by partially written server build (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7470\\\\\\\"\\u003e#7470\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ePreviously, it was possible to trigger a reimport of the app server code before the new server build had completely been written. Reimporting the partially written server build caused issues related to \\u003ccode\\u003ebuild.assets\\u003c/code\\u003e being undefined and crashing when reading \\u003ccode\\u003ebuild.assets.version\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eAdd second generic to \\u003ccode\\u003eUIMatch\\u003c/code\\u003e for \\u003ccode\\u003ehandle\\u003c/code\\u003e field (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7464\\\\\\\"\\u003e#7464\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eFix resource routes being loaded through \\u003ccode\\u003eroute.lazy\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7498\\\\\\\"\\u003e#7498\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eThrow a semantically correct 405 \\u003ccode\\u003eErrorResponse\\u003c/code\\u003e instead of just an \\u003ccode\\u003eError\\u003c/code\\u003e when submitting to a route without an \\u003ccode\\u003eaction\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7423\\\\\\\"\\u003e#7423\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eUpdate to latest version of \\u003ccode\\u003e@remix-run/web-fetch\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7477\\\\\\\"\\u003e#7477\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eSwitch from \\u003ccode\\u003ecrypto.randomBytes\\u003c/code\\u003e to \\u003ccode\\u003ecrypto.webcrypto.getRandomValues\\u003c/code\\u003e for file session storage ID generation (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7203\\\\\\\"\\u003e#7203\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eUse native \\u003ccode\\u003eBlob\\u003c/code\\u003e class instead of polyfill (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7217\\\\\\\"\\u003e#7217\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package 🔗\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.1/packages/remix-dev/CHANGELOG.md#201\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.1/packages/remix-node/CHANGELOG.md#201\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.1/packages/remix-react/CHANGELOG.md#201\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.1/packages/remix-serve/CHANGELOG.md#201\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFull Changelog\\u003c/strong\\u003e: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/compare/remix@2.0.0...remix@2.0.1\\\\\\\"\\u003e\\u003ccode\\u003ev2.0.0...v2.0.1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v200\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v200\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2.0.0\\u003c/h2\\u003e\\\\n\\u003cp\\u003eDate: 2023-09-15\\u003c/p\\u003e\\\\n\\u003cp\\u003eWe're \\u003cem\\u003e\\u003cstrong\\u003eso\\u003c/strong\\u003e\\u003c/em\\u003e excited to release Remix v2 to you and we really hope this upgrade is one of the smoothest framework upgrades you've ever experienced! That was our primary goal with v2 - something we aimed to achieve through a heavy use of deprecation warnings and \\u003ca href=\\\\\\\"https://remix.run/blog/future-flags\\\\\\\"\\u003eFuture Flags\\u003c/a\\u003e in Remix v1.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you are on the latest \\u003ccode\\u003e1.x\\u003c/code\\u003e version and you've enabled all future flags and addressed all console warnings, then our hope is that you are 90% of the way to being upgraded for v2. There are always going to be a few things that we \\u003cem\\u003ecan't\\u003c/em\\u003e put behind a flag (like breaking type changes) or come up at the very last moment and don't have time to add as a warning or flag in \\u003ccode\\u003e1.x\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you're \\u003cem\\u003enot\\u003c/em\\u003e yet on the latest 1.x version we'd recommend first upgrading to that and resolving any flag/console warnings:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-sh\\\\\\\"\\u003e\\u003e npx upgrade-remix 1.19.3\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch3 id=\\\\\\\"breaking-changes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#breaking-changes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eBreaking Changes\\u003c/h3\\u003e\\\\n\\u003cp\\u003eBelow is a \\u003cem\\u003every concise\\u003c/em\\u003e list of the breaking changes in v2.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eFor the most thorough discussion of breaking changes, please read the \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2\\\\\\\"\\u003e\\u003cstrong\\u003eUpgrading to v2\\u003c/strong\\u003e\\u003c/a\\u003e guide. This document provides a comprehensive walkthrough of the breaking changes that come along with v2 - and instructions on how to adapt your application to handle them\\u003c/li\\u003e\\\\n\\u003cli\\u003eFor additional details, you can refer to the \\u003ca href=\\\\\\\"#changes-by-package\\\\\\\"\\u003eChanges by Package\\u003c/a\\u003e section below\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch4 id=\\\\\\\"upgraded-dependency-requirements\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#upgraded-dependency-requirements\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpgraded Dependency Requirements\\u003c/h4\\u003e\\\\n\\u003cp\\u003eRemix v2 has upgraded it's minimum version support for React and Node and now officially requires:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eReact 18 (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7121\\\\\\\"\\u003e#7121\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eFor information on upgrading to React 18, please see the React \\u003ca href=\\\\\\\"https://react.dev/blog/2022/03/08/react-18-upgrade-guide\\\\\\\"\\u003eupgrade guide\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eNode 18 or later (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6939\\\\\\\"\\u003e#6939\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7292\\\\\\\"\\u003e#7292\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eFor information on upgrading to Node 18, please see the Node \\u003ca href=\\\\\\\"https://nodejs.org/en/blog/announcements/v18-release-announce\\\\\\\"\\u003ev18 announcement\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ePlease refer to the \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/other-api/node#version-support\\\\\\\"\\u003eRemix documentation\\u003c/a\\u003e for an overview of when we drop support for Node versions\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch4 id=\\\\\\\"removed-future-flags\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#removed-future-flags\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRemoved Future Flags\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThe following future flags were removed and their behavior is now the default - you can remove all of these from your \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e file.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#remix-dev\\\\\\\"\\u003e\\u003ccode\\u003ev2_dev\\u003c/code\\u003e\\u003c/a\\u003e - New dev server with HMR+HDR (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7002\\\\\\\"\\u003e#7002\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eIf you had configurations in \\u003ccode\\u003efuture.v2_dev\\u003c/code\\u003e instead of just the boolean value (i.e., \\u003ccode\\u003efuture.v2_dev.port\\u003c/code\\u003e), you can lift them into a root \\u003ccode\\u003edev\\u003c/code\\u003e object in your \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#catchboundary-and-errorboundary\\\\\\\"\\u003e\\u003ccode\\u003ev2_errorBoundary\\u003c/code\\u003e\\u003c/a\\u003e - Removed \\u003ccode\\u003eCatchBoundary\\u003c/code\\u003e in favor of a singular \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6906\\\\\\\"\\u003e#6906\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#route-headers\\\\\\\"\\u003e\\u003ccode\\u003ev2_headers\\u003c/code\\u003e\\u003c/a\\u003e - Altered the logic for \\u003ccode\\u003eheaders\\u003c/code\\u003e in nested route scenarios (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6979\\\\\\\"\\u003e#6979\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#route-meta\\\\\\\"\\u003e\\u003ccode\\u003ev2_meta\\u003c/code\\u003e\\u003c/a\\u003e - Altered the return format of \\u003ccode\\u003emeta()\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6958\\\\\\\"\\u003e#6958\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#formmethod\\\\\\\"\\u003e\\u003ccode\\u003ev2_normalizeFormMethod\\u003c/code\\u003e\\u003c/a\\u003e - Normalize \\u003ccode\\u003eformMethod\\u003c/code\\u003e APIs to uppercase (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6875\\\\\\\"\\u003e#6875\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#file-system-route-convention\\\\\\\"\\u003e\\u003ccode\\u003ev2_routeConvention\\u003c/code\\u003e\\u003c/a\\u003e - Routes use a flat route convention by default now (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6969\\\\\\\"\\u003e#6969\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch4 id=\\\\\\\"breaking-changesapi-removals\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#breaking-changesapi-removals\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eBreaking Changes/API Removals\\u003c/h4\\u003e\\\\n\\u003ch5 id=\\\\\\\"with-deprecation-warnings\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#with-deprecation-warnings\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWith deprecation warnings\\u003c/h5\\u003e\\\\n\\u003cp\\u003eThe following lists other breaking changes/API removals which had deprecation warnings in Remix v1. If you're on the latest \\u003ccode\\u003e1.19.3\\u003c/code\\u003e release without any console warnings, then you're probably good to go on all of these!\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremix.config.js\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRenamed \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#browserbuilddirectory\\\\\\\"\\u003e\\u003ccode\\u003ebrowserBuildDirectory\\u003c/code\\u003e\\u003c/a\\u003e to \\u003ccode\\u003eassetsBuildDirectory\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6900\\\\\\\"\\u003e#6900\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemoved \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#devserverbroadcastdelay\\\\\\\"\\u003e\\u003ccode\\u003edevServerBroadcastDelay\\u003c/code\\u003e\\u003c/a\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7063\\\\\\\"\\u003e#7063\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eRenamed \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#devserverport\\\\\\\"\\u003e\\u003ccode\\u003edevServerPort\\u003c/code\\u003e\\u003c/a\\u003e to \\u003ccode\\u003edev.port\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/commit/000457e0ae025d9b94e721af254c319e83438923\\\\\\\"\\u003e\\u003ccode\\u003e000457e0\\u003c/code\\u003e\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eNote that if you are opting into this in a \\u003ccode\\u003e1.x\\u003c/code\\u003e release, your config flag will be \\u003ccode\\u003efuture.v2_dev.port\\u003c/code\\u003e, but on a stable \\u003ccode\\u003e2.x\\u003c/code\\u003e release it will be \\u003ccode\\u003edev.port\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eChanged the default \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#servermoduleformat\\\\\\\"\\u003e\\u003ccode\\u003eserverModuleFormat\\u003c/code\\u003e\\u003c/a\\u003e from \\u003ccode\\u003ecjs\\u003c/code\\u003e to \\u003ccode\\u003eesm\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6949\\\\\\\"\\u003e#6949\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemoved \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#serverbuildtarget\\\\\\\"\\u003e\\u003ccode\\u003eserverBuildTarget\\u003c/code\\u003e\\u003c/a\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6896\\\\\\\"\\u003e#6896\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eChanged \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#serverbuilddirectory\\\\\\\"\\u003e\\u003ccode\\u003eserverBuildDirectory\\u003c/code\\u003e\\u003c/a\\u003e to \\u003ccode\\u003eserverBuildPath\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6897\\\\\\\"\\u003e#6897\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eNode built-ins are no longer polyfilled on the server by default, you must opt-into polyfills via \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#servernodebuiltinspolyfill\\\\\\\"\\u003e\\u003ccode\\u003eserverNodeBuiltinsPolyfill\\u003c/code\\u003e\\u003c/a\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6911\\\\\\\"\\u003e#6911\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRemoved \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#usetransition\\\\\\\"\\u003e\\u003ccode\\u003euseTransition\\u003c/code\\u003e\\u003c/a\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6870\\\\\\\"\\u003e#6870\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemoved \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#usefetcher\\\\\\\"\\u003e\\u003ccode\\u003efetcher.type\\u003c/code\\u003e\\u003c/a\\u003e and flattened \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#usefetcher\\\\\\\"\\u003e\\u003ccode\\u003efetcher.submission\\u003c/code\\u003e\\u003c/a\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6874\\\\\\\"\\u003e#6874\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e\\u0026#x3C;fetcher.Form method=\\\\\\\"get\\\\\\\"\\u003e\\u003c/code\\u003e is now more accurately categorized as \\u003ccode\\u003estate:\\\\\\\"loading\\\\\\\"\\u003c/code\\u003e instead of \\u003ccode\\u003estate:\\\\\\\"submitting\\\\\\\"\\u003c/code\\u003e to better align with the underlying GET request\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eRequire camelCased versions of \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#links-imagesizes-and-imagesrcset\\\\\\\"\\u003e\\u003ccode\\u003eimagesrcset\\u003c/code\\u003e/\\u003ccode\\u003eimagesizes\\u003c/code\\u003e\\u003c/a\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6936\\\\\\\"\\u003e#6936\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch5 id=\\\\\\\"without-deprecation-warnings\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#without-deprecation-warnings\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWithout deprecation warnings\\u003c/h5\\u003e\\\\n\\u003cp\\u003eUnfortunately, we didn't manage to get a deprecation warning on \\u003cem\\u003eevery\\u003c/em\\u003e breaking change or API removal 🙃. Here's a list of remaining changes that you may need to look into to upgrade to v2:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremix.config.js\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eNode built-ins are no longer polyfilled in the browser by default, you must opt-into polyfills via \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#browsernodebuiltinspolyfill\\\\\\\"\\u003e\\u003ccode\\u003ebrowserNodeBuiltinsPolyfill\\u003c/code\\u003e\\u003c/a\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7269\\\\\\\"\\u003e#7269\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003ePostCSS/Tailwind will be enabled by default if config files exist in your app, you may disable this via the \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#built-in-postcsstailwind-support\\\\\\\"\\u003e\\u003ccode\\u003epostcss\\u003c/code\\u003e and \\u003ccode\\u003etailwind\\u003c/code\\u003e\\u003c/a\\u003e flags (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6909\\\\\\\"\\u003e#6909\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRemove \\u003ccode\\u003ecreateCloudflareKVSessionStorage\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6898\\\\\\\"\\u003e#6898\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eDrop \\u003ccode\\u003e@cloudflare/workers-types\\u003c/code\\u003e v2 \\u0026#x26; v3 support (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6925\\\\\\\"\\u003e#6925\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRemoved \\u003ccode\\u003eREMIX_DEV_HTTP_ORIGIN\\u003c/code\\u003e in favor of \\u003ccode\\u003eREMIX_DEV_ORIGIN\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6963\\\\\\\"\\u003e#6963\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemoved \\u003ccode\\u003eREMIX_DEV_SERVER_WS_PORT\\u003c/code\\u003e in favor of \\u003ccode\\u003edev.port\\u003c/code\\u003e or \\u003ccode\\u003e--port\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6965\\\\\\\"\\u003e#6965\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemoved \\u003ccode\\u003e--no-restart\\u003c/code\\u003e/\\u003ccode\\u003erestart\\u003c/code\\u003e flag in favor of \\u003ccode\\u003e--manual\\u003c/code\\u003e/\\u003ccode\\u003emanual\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6962\\\\\\\"\\u003e#6962\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemoved \\u003ccode\\u003e--scheme\\u003c/code\\u003e/\\u003ccode\\u003escheme\\u003c/code\\u003e and \\u003ccode\\u003e--host\\u003c/code\\u003e/\\u003ccode\\u003ehost\\u003c/code\\u003e in favor of \\u003ccode\\u003eREMIX_DEV_ORIGIN\\u003c/code\\u003e instead (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6962\\\\\\\"\\u003e#6962\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemoved the \\u003ccode\\u003ecodemod\\u003c/code\\u003e command (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6918\\\\\\\"\\u003e#6918\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRemove \\u003ccode\\u003e@remix-run/eslint-config/jest\\u003c/code\\u003e config (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6903\\\\\\\"\\u003e#6903\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemove magic imports ESLint warnings (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6902\\\\\\\"\\u003e#6902\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/netlify\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eThe \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#netlify-adapter\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/netlify\\u003c/code\\u003e\\u003c/a\\u003e adapter has been removed in favor of the Netlify official adapters (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7058\\\\\\\"\\u003e#7058\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efetch\\u003c/code\\u003e is no longer polyfilled by default - apps must call \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#installglobals\\\\\\\"\\u003e\\u003ccode\\u003einstallGlobals()\\u003c/code\\u003e\\u003c/a\\u003e to install the polyfills (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7009\\\\\\\"\\u003e#7009\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efetch\\u003c/code\\u003e and related APIs are no longer exported from \\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e - apps should use the versions in the global namespace (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7293\\\\\\\"\\u003e#7293\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eApps must call \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#source-map-support\\\\\\\"\\u003e\\u003ccode\\u003esourceMapSupport.install()\\u003c/code\\u003e\\u003c/a\\u003e to setup source map support\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRemove \\u003ccode\\u003eunstable_shouldReload\\u003c/code\\u003e in favor of \\u003ccode\\u003eshouldRevalidate\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6865\\\\\\\"\\u003e#6865\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremix-serve\\u003c/code\\u003e picks an open port if 3000 is taken and \\u003ccode\\u003ePORT\\u003c/code\\u003e is not specified (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7278\\\\\\\"\\u003e#7278\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eIntegrate \\u003ccode\\u003emanual\\u003c/code\\u003e mode (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7231\\\\\\\"\\u003e#7231\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemove undocumented \\u003ccode\\u003ecreateApp\\u003c/code\\u003e Node API (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7229\\\\\\\"\\u003e#7229\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003ePreserve dynamic imports in remix-serve for external bundle (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7173\\\\\\\"\\u003e#7173\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/vercel\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eThe \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/start/v2#vercel-adapter\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/vercel\\u003c/code\\u003e\\u003c/a\\u003e adapter has been removed in favor of out of the box functionality provided by Vercel (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7035\\\\\\\"\\u003e#7035\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eStop passing \\u003ccode\\u003eisTypeScript\\u003c/code\\u003e to \\u003ccode\\u003eremix.init\\u003c/code\\u003e script (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7099\\\\\\\"\\u003e#7099\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremix\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRemoved magic exports (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6895\\\\\\\"\\u003e#6895\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch5 id=\\\\\\\"breaking-type-changes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#breaking-type-changes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eBreaking Type Changes\\u003c/h5\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRemoved \\u003ccode\\u003eV2_\\u003c/code\\u003e prefixes from \\u003ccode\\u003efuture.v2_meta\\u003c/code\\u003e types as they are now the default behavior (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6958\\\\\\\"\\u003e#6958\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eV2_MetaArgs\\u003c/code\\u003e -\\u003e \\u003ccode\\u003eMetaArgs\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eV2_MetaDescriptor\\u003c/code\\u003e -\\u003e \\u003ccode\\u003eMetaDescriptor\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eV2_MetaFunction\\u003c/code\\u003e -\\u003e \\u003ccode\\u003eMetaFunction\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eV2_MetaMatch\\u003c/code\\u003e -\\u003e \\u003ccode\\u003eMetaMatch\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eV2_MetaMatches\\u003c/code\\u003e -\\u003e \\u003ccode\\u003eMetaMatches\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eV2_ServerRuntimeMetaArgs\\u003c/code\\u003e -\\u003e \\u003ccode\\u003eServerRuntimeMetaArgs\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eV2_ServerRuntimeMetaDescriptor\\u003c/code\\u003e -\\u003e \\u003ccode\\u003eServerRuntimeMetaDescriptor\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eV2_ServerRuntimeMetaFunction\\u003c/code\\u003e -\\u003e \\u003ccode\\u003eServerRuntimeMetaFunction\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eV2_ServerRuntimeMetaMatch\\u003c/code\\u003e -\\u003e \\u003ccode\\u003eServerRuntimeMetaMatch\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eV2_ServerRuntimeMetaMatches\\u003c/code\\u003e -\\u003e \\u003ccode\\u003eServerRuntimeMetaMatches\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eThe following types were adjusted to prefer \\u003ccode\\u003eunknown\\u003c/code\\u003e over \\u003ccode\\u003eany\\u003c/code\\u003e and to align with underlying React Router types (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7319\\\\\\\"\\u003e#7319\\u003c/a\\u003e):\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRenamed the \\u003ccode\\u003euseMatches()\\u003c/code\\u003e return type from \\u003ccode\\u003eRouteMatch\\u003c/code\\u003e to \\u003ccode\\u003eUIMatch\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eRenamed \\u003ccode\\u003eLoaderArgs\\u003c/code\\u003e/\\u003ccode\\u003eActionArgs\\u003c/code\\u003e to \\u003ccode\\u003eLoaderFunctionArgs\\u003c/code\\u003e/\\u003ccode\\u003eActionFunctionArgs\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eAppData\\u003c/code\\u003e changed from \\u003ccode\\u003eany\\u003c/code\\u003e to \\u003ccode\\u003eunknown\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eLocation[\\\\\\\"state\\\\\\\"]\\u003c/code\\u003e (\\u003ccode\\u003euseLocation.state\\u003c/code\\u003e) changed from \\u003ccode\\u003eany\\u003c/code\\u003e to \\u003ccode\\u003eunknown\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eUIMatch[\\\\\\\"data\\\\\\\"]\\u003c/code\\u003e (\\u003ccode\\u003euseMatches()[i].data\\u003c/code\\u003e) changed from \\u003ccode\\u003eany\\u003c/code\\u003e to \\u003ccode\\u003eunknown\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eUIMatch[\\\\\\\"handle\\\\\\\"]\\u003c/code\\u003e (\\u003ccode\\u003euseMatches()[i].handle\\u003c/code\\u003e) changed from \\u003ccode\\u003e{ [k: string]: any }\\u003c/code\\u003e to \\u003ccode\\u003eunknown\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eFetcher[\\\\\\\"data\\\\\\\"]\\u003c/code\\u003e (\\u003ccode\\u003euseFetcher().data\\u003c/code\\u003e) changed from \\u003ccode\\u003eany\\u003c/code\\u003e to \\u003ccode\\u003eunknown\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eMetaMatch.handle\\u003c/code\\u003e (used in \\u003ccode\\u003emeta()\\u003c/code\\u003e) changed from \\u003ccode\\u003eany\\u003c/code\\u003e to \\u003ccode\\u003eunknown\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eAppData\\u003c/code\\u003e/\\u003ccode\\u003eRouteHandle\\u003c/code\\u003e are no longer exported as they are just aliases for \\u003ccode\\u003eunknown\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"new-features\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#new-features\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNew Features\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eNew \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/other-api/create-remix\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e CLI (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6887\\\\\\\"\\u003e#6887\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eMost notably, this removes the dropdown to choose your template/stack in favor of the \\u003ccode\\u003e--template\\u003c/code\\u003e flag and our ever-growing list of \\u003ca href=\\\\\\\"https://remix.run/docs/en/main/guides/templates\\\\\\\"\\u003eavailable templates\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eAdds a new \\u003ccode\\u003e--overwrite\\u003c/code\\u003e flag (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7062\\\\\\\"\\u003e#7062\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eSupports the \\u003ccode\\u003ebun\\u003c/code\\u003e package manager (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7074\\\\\\\"\\u003e#7074\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eDetect built mode via \\u003ccode\\u003ebuild.mode\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6964\\\\\\\"\\u003e#6964\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eSupport polyfilling node globals via \\u003ccode\\u003eserverNodeBuiltinsPolyfill.globals\\u003c/code\\u003e/\\u003ccode\\u003ebrowserNodeBuiltinsPolyfill.globals\\u003c/code\\u003e (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7269\\\\\\\"\\u003e#7269\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eNew \\u003ccode\\u003eredirectDocument\\u003c/code\\u003e utility to redirect via a fresh document load (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7040\\\\\\\"\\u003e#7040\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6842\\\\\\\"\\u003e#6842\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eAdd \\u003ccode\\u003eerror\\u003c/code\\u003e to \\u003ccode\\u003emeta\\u003c/code\\u003e params so you can render error titles, etc. (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7105\\\\\\\"\\u003e#7105\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_createRemixStub\\u003c/code\\u003e now supports adding \\u003ccode\\u003emeta\\u003c/code\\u003e/\\u003ccode\\u003elinks\\u003c/code\\u003e functions on stubbed Remix routes (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7186\\\\\\\"\\u003e#7186\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_createRemixStub\\u003c/code\\u003e no longer supports the \\u003ccode\\u003eelement\\u003c/code\\u003e/\\u003ccode\\u003eerrorElement\\u003c/code\\u003e properties on routes. You must use \\u003ccode\\u003eComponent\\u003c/code\\u003e/\\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e to match what you would export from a Remix route module.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"other-notable-changes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#other-notable-changes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eOther Notable Changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRemix now uses React Router's \\u003ccode\\u003eroute.lazy\\u003c/code\\u003e method internally to load route modules on navigations (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7133\\\\\\\"\\u003e#7133\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemoved the \\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e \\u003ccode\\u003eatob\\u003c/code\\u003e/\\u003ccode\\u003ebtoa\\u003c/code\\u003e polyfills in favor of the built-in versions (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7206\\\\\\\"\\u003e#7206\\u003c/a\\u003e)\\u003c/li\\u003e\\\\n\\u003cli\\u003eDecouple the \\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e package from the contents of the \\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e package (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/6982\\\\\\\"\\u003e#6982\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eThe contents of the \\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e package are now entirely managed by the Remix compiler. Even though it's still recommended that your Remix dependencies all share the same version, this change ensures that there are no runtime errors when upgrading \\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e without upgrading \\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremix-serve\\u003c/code\\u003e now picks an open port if 3000 is taken (\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/pull/7278\\\\\\\"\\u003e#7278\\u003c/a\\u003e)\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eIf \\u003ccode\\u003ePORT\\u003c/code\\u003e env var is set, \\u003ccode\\u003eremix-serve\\u003c/code\\u003e will use that port\\u003c/li\\u003e\\\\n\\u003cli\\u003eOtherwise, \\u003ccode\\u003eremix-serve\\u003c/code\\u003e picks an open port (3000 unless that is already taken)\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"updated-dependencies-25\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updated-dependencies-25\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdated Dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/releases/tag/react-router%406.16.0\\\\\\\"\\u003e\\u003ccode\\u003ereact-router-dom@6.16.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#190\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/router@1.9.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/web-std-io/releases/tag/%40remix-run%2Fweb-fetch%404.4.0\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/web-fetch@4.4.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/web-std-io/releases/tag/%40remix-run%2Fweb-file%403.1.0\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/web-file@3.1.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/web-std-io/releases/tag/%40remix-run%2Fweb-stream%401.1.0\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/web-stream@1.1.0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"changes-by-package-27\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changes-by-package-27\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanges by Package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/create-remix/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/remix-architect/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/remix-cloudflare/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/remix-cloudflare-pages/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/remix-cloudflare-workers/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/remix-css-bundle/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/remix-deno/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/remix-dev/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/remix-eslint-config/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/remix-express/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/remix-node/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/remix-react/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/remix-serve/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/remix-server-runtime/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/remix%402.0.0/packages/remix-testing/CHANGELOG.md#200\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\",\\\"CHANGELOG\\\",\\\"headings\\\",[960,965,969,972,975,978,981,983,986,988,991,993,996,998,1001,1004,1006,1009,1011,1014,1016,1019,1021,1023,1026,1029,1031,1033,1036,1038,1040,1043,1045,1048,1050,1053,1055,1057,1059,1061,1064,1066,1069,1072,1074,1076,1078,1080,1083,1085,1087,1090,1092,1094,1096,1098,1100,1103,1105,1107,1109,1112,1114,1116,1119,1121,1123,1125,1127,1129,1132,1134,1136,1138,1141,1143,1145,1148,1150,1152,1154,1157,1159,1161,1163,1165,1167,1170,1172,1174,1176,1178,1181,1183,1185,1188,1190,1192,1194,1196,1198,1201,1203,1205,1207,1210,1212,1214,1216,1218,1221,1223,1226,1228,1231,1233,1235,1237,1239,1241,1244,1246,1248,1250,1252,1254,1257,1259,1261,1263,1266,1268,1270,1272,1274,1276,1279,1281,1283,1285,1288,1290,1292,1294,1296,1298,1301,1303,1305,1307,1310,1312,1314,1316,1318,1320,1323,1325,1327,1329,1331,1333,1336,1338,1340,1342,1344,1346,1349,1351,1354,1357,1360,1363,1366,1368],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"v2.17.0\\\",\\\"v2170\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":968},\\\"h3\\\",\\\"Minor Changes\\\",\\\"minor-changes\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":971},\\\"Changes by Package\\\",\\\"changes-by-package\\\",{\\\"_961\\\":962,\\\"_955\\\":973,\\\"_24\\\":974},\\\"v2.16.8\\\",\\\"v2168\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":977},\\\"Patch Changes\\\",\\\"patch-changes\\\",{\\\"_961\\\":962,\\\"_955\\\":979,\\\"_24\\\":980},\\\"v2.16.7\\\",\\\"v2167\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":982},\\\"patch-changes-1\\\",{\\\"_961\\\":962,\\\"_955\\\":984,\\\"_24\\\":985},\\\"v2.16.6\\\",\\\"v2166\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":987},\\\"patch-changes-2\\\",{\\\"_961\\\":962,\\\"_955\\\":989,\\\"_24\\\":990},\\\"v2.16.5\\\",\\\"v2165\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":992},\\\"patch-changes-3\\\",{\\\"_961\\\":962,\\\"_955\\\":994,\\\"_24\\\":995},\\\"v2.16.4\\\",\\\"v2164\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":997},\\\"patch-changes-4\\\",{\\\"_961\\\":962,\\\"_955\\\":999,\\\"_24\\\":1000},\\\"v2.16.3\\\",\\\"v2163\\\",{\\\"_961\\\":966,\\\"_955\\\":1002,\\\"_24\\\":1003},\\\"Security Notice\\\",\\\"security-notice\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1005},\\\"patch-changes-5\\\",{\\\"_961\\\":962,\\\"_955\\\":1007,\\\"_24\\\":1008},\\\"v2.16.2\\\",\\\"v2162\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1010},\\\"patch-changes-6\\\",{\\\"_961\\\":962,\\\"_955\\\":1012,\\\"_24\\\":1013},\\\"v2.16.1\\\",\\\"v2161\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1015},\\\"patch-changes-7\\\",{\\\"_961\\\":962,\\\"_955\\\":1017,\\\"_24\\\":1018},\\\"v2.16.0\\\",\\\"v2160\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1020},\\\"minor-changes-1\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1022},\\\"patch-changes-8\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1025},\\\"Updated Dependencies\\\",\\\"updated-dependencies\\\",{\\\"_961\\\":962,\\\"_955\\\":1027,\\\"_24\\\":1028},\\\"v2.15.3\\\",\\\"v2153\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1030},\\\"patch-changes-9\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1032},\\\"updated-dependencies-1\\\",{\\\"_961\\\":962,\\\"_955\\\":1034,\\\"_24\\\":1035},\\\"v2.15.2\\\",\\\"v2152\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1037},\\\"patch-changes-10\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1039},\\\"updated-dependencies-2\\\",{\\\"_961\\\":962,\\\"_955\\\":1041,\\\"_24\\\":1042},\\\"v2.15.1\\\",\\\"v2151\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1044},\\\"patch-changes-11\\\",{\\\"_961\\\":962,\\\"_955\\\":1046,\\\"_24\\\":1047},\\\"v2.15.0\\\",\\\"v2150\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1049},\\\"patch-changes-12\\\",{\\\"_961\\\":962,\\\"_955\\\":1051,\\\"_24\\\":1052},\\\"v2.14.0\\\",\\\"v2140\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1054},\\\"minor-changes-2\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1056},\\\"patch-changes-13\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1058},\\\"updated-dependencies-3\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1060},\\\"changes-by-package-1\\\",{\\\"_961\\\":962,\\\"_955\\\":1062,\\\"_24\\\":1063},\\\"v2.13.1\\\",\\\"v2131\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1065},\\\"patch-changes-14\\\",{\\\"_961\\\":962,\\\"_955\\\":1067,\\\"_24\\\":1068},\\\"v2.13.0\\\",\\\"v2130\\\",{\\\"_961\\\":966,\\\"_955\\\":1070,\\\"_24\\\":1071},\\\"What's Changed\\\",\\\"whats-changed\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1073},\\\"minor-changes-3\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1075},\\\"patch-changes-15\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1077},\\\"updated-dependencies-4\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1079},\\\"changes-by-package-2\\\",{\\\"_961\\\":962,\\\"_955\\\":1081,\\\"_24\\\":1082},\\\"v2.12.1\\\",\\\"v2121\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1084},\\\"patch-changes-16\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1086},\\\"changes-by-package-3\\\",{\\\"_961\\\":962,\\\"_955\\\":1088,\\\"_24\\\":1089},\\\"v2.12.0\\\",\\\"v2120\\\",{\\\"_961\\\":966,\\\"_955\\\":1070,\\\"_24\\\":1091},\\\"whats-changed-1\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1093},\\\"minor-changes-4\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1095},\\\"patch-changes-17\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1097},\\\"updated-dependencies-5\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1099},\\\"changes-by-package-4\\\",{\\\"_961\\\":962,\\\"_955\\\":1101,\\\"_24\\\":1102},\\\"v2.11.2\\\",\\\"v2112\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1104},\\\"patch-changes-18\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1106},\\\"updated-dependencies-6\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1108},\\\"changes-by-package-5\\\",{\\\"_961\\\":962,\\\"_955\\\":1110,\\\"_24\\\":1111},\\\"v2.11.1\\\",\\\"v2111\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1113},\\\"patch-changes-19\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1115},\\\"changes-by-package-6\\\",{\\\"_961\\\":962,\\\"_955\\\":1117,\\\"_24\\\":1118},\\\"v2.11.0\\\",\\\"v2110\\\",{\\\"_961\\\":966,\\\"_955\\\":1070,\\\"_24\\\":1120},\\\"whats-changed-2\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1122},\\\"minor-changes-5\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1124},\\\"patch-changes-20\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1126},\\\"updated-dependencies-7\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1128},\\\"changes-by-package-7\\\",{\\\"_961\\\":962,\\\"_955\\\":1130,\\\"_24\\\":1131},\\\"v2.10.3\\\",\\\"v2103\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1133},\\\"patch-changes-21\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1135},\\\"updated-dependencies-8\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1137},\\\"changes-by-package-8\\\",{\\\"_961\\\":962,\\\"_955\\\":1139,\\\"_24\\\":1140},\\\"v2.10.2\\\",\\\"v2102\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1142},\\\"patch-changes-22\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1144},\\\"changes-by-package-9\\\",{\\\"_961\\\":962,\\\"_955\\\":1146,\\\"_24\\\":1147},\\\"v2.10.1\\\",\\\"v2101\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1149},\\\"patch-changes-23\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1151},\\\"updated-dependencies-9\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1153},\\\"changes-by-package-10\\\",{\\\"_961\\\":962,\\\"_955\\\":1155,\\\"_24\\\":1156},\\\"v2.10.0\\\",\\\"v2100\\\",{\\\"_961\\\":966,\\\"_955\\\":1070,\\\"_24\\\":1158},\\\"whats-changed-3\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1160},\\\"minor-changes-6\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1162},\\\"patch-changes-24\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1164},\\\"updated-dependencies-10\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1166},\\\"changes-by-package-11\\\",{\\\"_961\\\":962,\\\"_955\\\":1168,\\\"_24\\\":1169},\\\"v2.9.2\\\",\\\"v292\\\",{\\\"_961\\\":966,\\\"_955\\\":1070,\\\"_24\\\":1171},\\\"whats-changed-4\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1173},\\\"patch-changes-25\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1175},\\\"updated-dependencies-11\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1177},\\\"changes-by-package-12\\\",{\\\"_961\\\":962,\\\"_955\\\":1179,\\\"_24\\\":1180},\\\"v2.9.1\\\",\\\"v291\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1182},\\\"patch-changes-26\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1184},\\\"changes-by-package-13\\\",{\\\"_961\\\":962,\\\"_955\\\":1186,\\\"_24\\\":1187},\\\"v2.9.0\\\",\\\"v290\\\",{\\\"_961\\\":966,\\\"_955\\\":1070,\\\"_24\\\":1189},\\\"whats-changed-5\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1191},\\\"minor-changes-7\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1193},\\\"patch-changes-27\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1195},\\\"updated-dependencies-12\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1197},\\\"changes-by-package-14\\\",{\\\"_961\\\":962,\\\"_955\\\":1199,\\\"_24\\\":1200},\\\"v2.8.1\\\",\\\"v281\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1202},\\\"patch-changes-28\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1204},\\\"updated-dependencies-13\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1206},\\\"changes-by-package-15\\\",{\\\"_961\\\":962,\\\"_955\\\":1208,\\\"_24\\\":1209},\\\"v2.8.0\\\",\\\"v280\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1211},\\\"minor-changes-8\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1213},\\\"patch-changes-29\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1215},\\\"updated-dependencies-14\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1217},\\\"changes-by-package-16\\\",{\\\"_961\\\":962,\\\"_955\\\":1219,\\\"_24\\\":1220},\\\"2.7.2\\\",\\\"272\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1222},\\\"patch-changes-30\\\",{\\\"_961\\\":962,\\\"_955\\\":1224,\\\"_24\\\":1225},\\\"2.7.1\\\",\\\"271\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1227},\\\"patch-changes-31\\\",{\\\"_961\\\":962,\\\"_955\\\":1229,\\\"_24\\\":1230},\\\"v2.7.0\\\",\\\"v270\\\",{\\\"_961\\\":966,\\\"_955\\\":1070,\\\"_24\\\":1232},\\\"whats-changed-6\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1234},\\\"minor-changes-9\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1236},\\\"patch-changes-32\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1238},\\\"updated-dependencies-15\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1240},\\\"changes-by-package-17\\\",{\\\"_961\\\":962,\\\"_955\\\":1242,\\\"_24\\\":1243},\\\"v2.6.0\\\",\\\"v260\\\",{\\\"_961\\\":966,\\\"_955\\\":1070,\\\"_24\\\":1245},\\\"whats-changed-7\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1247},\\\"minor-changes-10\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1249},\\\"patch-changes-33\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1251},\\\"updated-dependencies-16\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1253},\\\"changes-by-package-18\\\",{\\\"_961\\\":962,\\\"_955\\\":1255,\\\"_24\\\":1256},\\\"v2.5.1\\\",\\\"v251\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1258},\\\"patch-changes-34\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1260},\\\"updated-dependencies-17\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1262},\\\"changes-by-package-19\\\",{\\\"_961\\\":962,\\\"_955\\\":1264,\\\"_24\\\":1265},\\\"v2.5.0\\\",\\\"v250\\\",{\\\"_961\\\":966,\\\"_955\\\":1070,\\\"_24\\\":1267},\\\"whats-changed-8\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1269},\\\"minor-changes-11\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1271},\\\"patch-changes-35\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1273},\\\"updated-dependencies-18\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1275},\\\"changes-by-package-20\\\",{\\\"_961\\\":962,\\\"_955\\\":1277,\\\"_24\\\":1278},\\\"v2.4.1\\\",\\\"v241\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1280},\\\"patch-changes-36\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1282},\\\"updated-dependencies-19\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1284},\\\"changes-by-package-21\\\",{\\\"_961\\\":962,\\\"_955\\\":1286,\\\"_24\\\":1287},\\\"v2.4.0\\\",\\\"v240\\\",{\\\"_961\\\":966,\\\"_955\\\":1070,\\\"_24\\\":1289},\\\"whats-changed-9\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1291},\\\"minor-changes-12\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1293},\\\"patch-changes-37\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1295},\\\"updated-dependencies-20\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1297},\\\"changes-by-package-22\\\",{\\\"_961\\\":962,\\\"_955\\\":1299,\\\"_24\\\":1300},\\\"v2.3.1\\\",\\\"v231\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1302},\\\"patch-changes-38\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1304},\\\"updated-dependencies-21\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1306},\\\"changes-by-package-23\\\",{\\\"_961\\\":962,\\\"_955\\\":1308,\\\"_24\\\":1309},\\\"v2.3.0\\\",\\\"v230\\\",{\\\"_961\\\":966,\\\"_955\\\":1070,\\\"_24\\\":1311},\\\"whats-changed-10\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1313},\\\"minor-changes-13\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1315},\\\"patch-changes-39\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1317},\\\"updated-dependencies-22\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1319},\\\"changes-by-package-24\\\",{\\\"_961\\\":962,\\\"_955\\\":1321,\\\"_24\\\":1322},\\\"v2.2.0\\\",\\\"v220\\\",{\\\"_961\\\":966,\\\"_955\\\":1070,\\\"_24\\\":1324},\\\"whats-changed-11\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1326},\\\"minor-changes-14\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1328},\\\"patch-changes-40\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1330},\\\"updated-dependencies-23\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1332},\\\"changes-by-package-25\\\",{\\\"_961\\\":962,\\\"_955\\\":1334,\\\"_24\\\":1335},\\\"v2.1.0\\\",\\\"v210\\\",{\\\"_961\\\":966,\\\"_955\\\":1070,\\\"_24\\\":1337},\\\"whats-changed-12\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":1339},\\\"minor-changes-15\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1341},\\\"patch-changes-41\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1343},\\\"updated-dependencies-24\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1345},\\\"changes-by-package-26\\\",{\\\"_961\\\":962,\\\"_955\\\":1347,\\\"_24\\\":1348},\\\"v2.0.1\\\",\\\"v201\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":1350},\\\"patch-changes-42\\\",{\\\"_961\\\":966,\\\"_955\\\":1352,\\\"_24\\\":1353},\\\"Changes by Package 🔗\\\",\\\"changes-by-package-\\\",{\\\"_961\\\":962,\\\"_955\\\":1355,\\\"_24\\\":1356},\\\"v2.0.0\\\",\\\"v200\\\",{\\\"_961\\\":966,\\\"_955\\\":1358,\\\"_24\\\":1359},\\\"Breaking Changes\\\",\\\"breaking-changes\\\",{\\\"_961\\\":966,\\\"_955\\\":1361,\\\"_24\\\":1362},\\\"New Features\\\",\\\"new-features\\\",{\\\"_961\\\":966,\\\"_955\\\":1364,\\\"_24\\\":1365},\\\"Other Notable Changes\\\",\\\"other-notable-changes\\\",{\\\"_961\\\":966,\\\"_955\\\":1024,\\\"_24\\\":1367},\\\"updated-dependencies-25\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":1369},\\\"changes-by-package-27\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#10046": 1, "#10047": 1, "#10063": 1, "#10072": 1, "#10092": 1, "#10099": 1, "#10107": 1, "#10126": 1, "#10139": 1, "#10145": 1, "#10173": 1, "#10174": 1, "#10236": 1, "#10300": 1, "#10306": 1, "#10317": 1, "#10351": 1, "#10358": 1, "#10410": 1, "#10424": 1, "#10447": 1, "#10477": 1, "#10479": 1, "#10498": 1, "#10510": 1, "#10524": 1, "#10527": 1, "#10528": 1, "#10535": 1, "#10547": 1, "#10553": 1, "#10562": 1, "#10601": 1, "#10611": 1, "#10638": 1, "#10686": 1, "#10688": 1, "#10916": 1, "#10960": 1, "#10962": 1, "#1678": 1, "#1757": 1, "#271\\\\\\": 2, "#272\\\\\\": 2, "#6409": 1, "#6770": 1, "#6842": 1, "#6865": 1, "#6870": 1, "#6874": 1, "#6875": 1, "#6887": 1, "#6895": 1, "#6896": 1, "#6897": 1, "#6898": 1, "#6900": 1, "#6902": 1, "#6903": 1, "#6906": 1, "#6909": 1, "#6911": 1, "#6918": 1, "#6925": 1, "#6936": 1, "#6939": 1, "#6949": 1, "#6958": 2, "#6962": 2, "#6963": 1, "#6964": 1, "#6965": 1, "#6969": 1, "#6979": 1, "#6982": 1, "#7002": 1, "#7009": 1, "#7035": 1, "#7040": 1, "#7058": 1, "#7062": 1, "#7063": 1, "#7074": 1, "#7099": 1, "#7105": 1, "#7121": 1, "#7133": 1, "#7173": 1, "#7180": 1, "#7186": 1, "#7203": 1, "#7206": 1, "#7217": 1, "#7229": 1, "#7231": 1, "#7269": 2, "#7272": 1, "#7278": 2, "#7292": 1, "#7293": 1, "#7319": 1, "#7323": 1, "#7345": 1, "#7423": 1, "#7464": 1, "#7470": 1, "#7477": 1, "#7487": 1, "#7491": 1, "#7498": 1, "#7551": 1, "#7574": 1, "#7576": 1, "#7590": 1, "#7594": 1, "#7605": 1, "#7619": 1, "#7647": 1, "#7649": 1, "#7670": 1, "#7684": 1, "#7745": 1, "#7842": 1, "#7843": 1, "#7846": 1, "#7882": 1, "#7883": 1, "#7888": 1, "#7892": 1, "#7895": 1, "#7904": 1, "#7908": 1, "#7911": 1, "#7913": 1, "#7919": 2, "#7926": 1, "#7937": 1, "#7952": 1, "#7958": 1, "#7980": 1, "#7996": 1, "#8014": 1, "#8022": 1, "#8039": 1, "#8042": 1, "#8057": 1, "#8062": 1, "#8066": 2, "#8076": 2, "#8077": 1, "#8096": 1, "#8119": 1, "#8120": 1, "#8121": 1, "#8143": 1, "#8145": 3, "#8154": 1, "#8157": 1, "#8164": 1, "#8171": 1, "#8172": 1, "#8173": 2, "#8174": 1, "#8177": 1, "#8184": 1, "#8200": 2, "#8211": 1, "#8216": 1, "#8222": 1, "#8238": 1, "#8251": 1, "#8264": 1, "#8267": 1, "#8304": 1, "#8321": 1, "#8332": 2, "#8342": 1, "#8351": 1, "#8375": 1, "#8405": 1, "#8415": 1, "#8420": 1, "#8446": 1, "#8457": 1, "#8458": 1, "#8459": 1, "#8468": 1, "#8479": 1, "#8488": 1, "#8492": 1, "#8493": 1, "#8495": 1, "#8503": 1, "#8514": 1, "#8530": 1, "#8531": 2, "#8538": 1, "#8539": 1, "#8575": 2, "#8577": 1, "#8580": 1, "#8581": 1, "#8591": 1, "#8596": 2, "#8598": 1, "#8599": 2, "#8613": 1, "#8620": 1, "#8624": 1, "#8627": 1, "#8636": 1, "#8649": 1, "#8654": 1, "#8684": 1, "#8690": 1, "#8692": 1, "#8701": 1, "#8709": 1, "#8711": 1, "#8713": 1, "#8720": 1, "#8723": 1, "#8725": 1, "#8726": 1, "#8740": 1, "#8745": 1, "#8747": 1, "#8749": 1, "#8752": 1, "#8773": 1, "#8795": 1, "#8796": 1, "#8797": 1, "#8806": 1, "#8819": 1, "#8829": 1, "#8842": 1, "#8843": 1, "#8848": 1, "#8859": 1, "#8864": 1, "#8885": 1, "#8892": 1, "#8897": 1, "#8910": 1, "#8916": 1, "#8932": 1, "#8939": 1, "#8965": 1, "#8966": 1, "#8969": 1, "#8970": 1, "#9026": 1, "#9063": 1, "#9073": 1, "#9084": 1, "#9104": 1, "#9106": 1, "#9111": 1, "#9142": 1, "#9176": 1, "#9184": 1, "#9194": 1, "#9198": 1, "#9241": 1, "#9272": 1, "#9287": 1, "#9299": 1, "#9301": 1, "#9305": 1, "#9322": 1, "#9349": 2, "#9364": 1, "#9369": 1, "#9372": 1, "#9395": 1, "#9488": 2, "#9501": 1, "#9562": 1, "#9564": 1, "#9566": 1, "#9580": 1, "#9584": 1, "#9600": 1, "#9619": 1, "#9664": 1, "#9665": 1, "#9686": 1, "#9693": 1, "#9695": 3, "#9700": 1, "#9706": 1, "#9738": 1, "#9763": 1, "#9764": 1, "#9769": 2, "#9792": 1, "#9796": 1, "#9848": 1, "#9856": 1, "#9860": 2, "#9888": 1, "#9889": 1, "#9890": 1, "#9893": 1, "#9899": 1, "#9901": 1, "#9910": 1, "#9917": 1, "#9921": 1, "#9938": 1, "#9941": 1, "#9955": 1, "#9973": 1, "#9976": 1, "#9980": 1, "#9982": 1, "#9999": 1, "#basename-support\\\\\\": 2, "#breaking-changes\\\\\\": 2, "#breaking-changesapi-removals\\\\\\": 2, "#breaking-type-changes\\\\\\": 2, "#changes-by-package-10\\\\\\": 2, "#changes-by-package-11\\\\\\": 2, "#changes-by-package-12\\\\\\": 2, "#changes-by-package-13\\\\\\": 2, "#changes-by-package-14\\\\\\": 2, "#changes-by-package-15\\\\\\": 2, "#changes-by-package-16\\\\\\": 2, "#changes-by-package-17\\\\\\": 2, "#changes-by-package-18\\\\\\": 2, "#changes-by-package-19\\\\\\": 2, "#changes-by-package-1\\\\\\": 2, "#changes-by-package-20\\\\\\": 2, "#changes-by-package-21\\\\\\": 2, "#changes-by-package-22\\\\\\": 2, "#changes-by-package-23\\\\\\": 2, "#changes-by-package-24\\\\\\": 2, "#changes-by-package-25\\\\\\": 2, "#changes-by-package-26\\\\\\": 2, "#changes-by-package-27\\\\\\": 2, "#changes-by-package-2\\\\\\": 2, "#changes-by-package-3\\\\\\": 2, "#changes-by-package-4\\\\\\": 2, "#changes-by-package-5\\\\\\": 2, "#changes-by-package-6\\\\\\": 2, "#changes-by-package-7\\\\\\": 2, "#changes-by-package-8\\\\\\": 2, "#changes-by-package-9\\\\\\": 2, "#changes-by-package-\\\\\\": 2, "#changes-by-package\\\\\\": 3, "#client-data\\\\\\": 2, "#cloudflare-proxy-as-a-vite-plugin\\\\\\": 2, "#future-flag-for-automatic-dependency-optimization-unstable\\\\\\": 2, "#futurev3_relativesplatpath\\\\\\": 2, "#improved-single-fetch-type-safety-unstable\\\\\\": 2, "#lazy-route-discovery-aka-fog-of-war\\\\\\": 2, "#minor-changes-10\\\\\\": 2, "#minor-changes-11\\\\\\": 2, "#minor-changes-12\\\\\\": 2, "#minor-changes-13\\\\\\": 2, "#minor-changes-14\\\\\\": 2, "#minor-changes-15\\\\\\": 2, "#minor-changes-1\\\\\\": 2, "#minor-changes-2\\\\\\": 2, "#minor-changes-3\\\\\\": 2, "#minor-changes-4\\\\\\": 2, "#minor-changes-5\\\\\\": 2, "#minor-changes-6\\\\\\": 2, "#minor-changes-7\\\\\\": 2, "#minor-changes-8\\\\\\": 2, "#minor-changes-9\\\\\\": 2, "#minor-changes\\\\\\": 2, "#new-features\\\\\\": 2, "#new-fetcher-apis\\\\\\": 2, "#new-layout-export\\\\\\": 2, "#other-notable-changes\\\\\\": 2, "#patch-changes-10\\\\\\": 2, "#patch-changes-11\\\\\\": 2, "#patch-changes-12\\\\\\": 2, "#patch-changes-13\\\\\\": 2, "#patch-changes-14\\\\\\": 2, "#patch-changes-15\\\\\\": 2, "#patch-changes-16\\\\\\": 2, "#patch-changes-17\\\\\\": 2, "#patch-changes-18\\\\\\": 2, "#patch-changes-19\\\\\\": 2, "#patch-changes-1\\\\\\": 2, "#patch-changes-20\\\\\\": 2, "#patch-changes-21\\\\\\": 2, "#patch-changes-22\\\\\\": 2, "#patch-changes-23\\\\\\": 2, "#patch-changes-24\\\\\\": 2, "#patch-changes-25\\\\\\": 2, "#patch-changes-26\\\\\\": 2, "#patch-changes-27\\\\\\": 2, "#patch-changes-28\\\\\\": 2, "#patch-changes-29\\\\\\": 2, "#patch-changes-2\\\\\\": 2, "#patch-changes-30\\\\\\": 2, "#patch-changes-31\\\\\\": 2, "#patch-changes-32\\\\\\": 2, "#patch-changes-33\\\\\\": 2, "#patch-changes-34\\\\\\": 2, "#patch-changes-35\\\\\\": 2, "#patch-changes-36\\\\\\": 2, "#patch-changes-37\\\\\\": 2, "#patch-changes-38\\\\\\": 2, "#patch-changes-39\\\\\\": 2, "#patch-changes-3\\\\\\": 2, "#patch-changes-40\\\\\\": 2, "#patch-changes-41\\\\\\": 2, "#patch-changes-42\\\\\\": 2, "#patch-changes-4\\\\\\": 2, "#patch-changes-5\\\\\\": 2, "#patch-changes-6\\\\\\": 2, "#patch-changes-7\\\\\\": 2, "#patch-changes-8\\\\\\": 2, "#patch-changes-9\\\\\\": 2, "#patch-changes\\\\\\": 2, "#persistence-future-flag\\\\\\": 2, "#remix-releases\\\\\\": 2, "#removed-future-flags\\\\\\": 2, "#removed-response-stub-in-single-fetch-unstable\\\\\\": 2, "#renamed-unstable_fogofwar-future-flag-to-unstable_lazyroutediscovery-unstable\\\\\\": 2, "#security-notice\\\\\\": 2, "#server-bundles-unstable\\\\\\": 2, "#single-fetch-unstable\\\\\\": 2, "#spa-mode-unstable\\\\\\": 2, "#stabilized-apis\\\\\\": 2, "#stabilized-useblocker\\\\\\": 2, "#stabilized-vite-plugin\\\\\\": 2, "#stable-createremixstub\\\\\\": 2, "#undici\\\\\\": 3, "#unstable-vite-plugin-updates\\\\\\": 2, "#unstable_flushsync-api\\\\\\": 2, "#updated-dependencies-10\\\\\\": 2, "#updated-dependencies-11\\\\\\": 2, "#updated-dependencies-12\\\\\\": 2, "#updated-dependencies-13\\\\\\": 2, "#updated-dependencies-14\\\\\\": 2, "#updated-dependencies-15\\\\\\": 2, "#updated-dependencies-16\\\\\\": 2, "#updated-dependencies-17\\\\\\": 2, "#updated-dependencies-18\\\\\\": 2, "#updated-dependencies-19\\\\\\": 2, "#updated-dependencies-1\\\\\\": 2, "#updated-dependencies-20\\\\\\": 2, "#updated-dependencies-21\\\\\\": 2, "#updated-dependencies-22\\\\\\": 2, "#updated-dependencies-23\\\\\\": 2, "#updated-dependencies-24\\\\\\": 2, "#updated-dependencies-25\\\\\\": 2, "#updated-dependencies-2\\\\\\": 2, "#updated-dependencies-3\\\\\\": 2, "#updated-dependencies-4\\\\\\": 2, "#updated-dependencies-5\\\\\\": 2, "#updated-dependencies-6\\\\\\": 2, "#updated-dependencies-7\\\\\\": 2, "#updated-dependencies-8\\\\\\": 2, "#updated-dependencies-9\\\\\\": 2, "#updated-dependencies\\\\\\": 2, "#updated-type-safety-for-single-fetch\\\\\\": 2, "#updates-to-single-fetch-revalidation-behavior-unstable\\\\\\": 2, "#upgraded-dependency-requirements\\\\\\": 2, "#v200\\\\\\": 2, "#v201\\\\\\": 2, "#v2100\\\\\\": 2, "#v2101\\\\\\": 2, "#v2102\\\\\\": 2, "#v2103\\\\\\": 2, "#v210\\\\\\": 2, "#v2110\\\\\\": 2, "#v2111\\\\\\": 2, "#v2112\\\\\\": 2, "#v2120\\\\\\": 2, "#v2121\\\\\\": 2, "#v2130\\\\\\": 2, "#v2131\\\\\\": 2, "#v2140\\\\\\": 2, "#v2150\\\\\\": 2, "#v2151\\\\\\": 2, "#v2152\\\\\\": 2, "#v2153\\\\\\": 2, "#v2160\\\\\\": 2, "#v2161\\\\\\": 2, "#v2162\\\\\\": 2, "#v2163\\\\\\": 2, "#v2164\\\\\\": 2, "#v2165\\\\\\": 2, "#v2166\\\\\\": 2, "#v2167\\\\\\": 2, "#v2168\\\\\\": 2, "#v2170\\\\\\": 2, "#v220\\\\\\": 2, "#v230\\\\\\": 2, "#v231\\\\\\": 2, "#v240\\\\\\": 2, "#v241\\\\\\": 2, "#v250\\\\\\": 2, "#v251\\\\\\": 2, "#v260\\\\\\": 2, "#v270\\\\\\": 2, "#v280\\\\\\": 2, "#v281\\\\\\": 2, "#v290\\\\\\": 2, "#v291\\\\\\": 2, "#v292\\\\\\": 2, "#view-transitions\\\\\\": 2, "#vite-updates-unstable\\\\\\": 2, "#vite\\\\\\": 2, "#whats-changed-10\\\\\\": 2, "#whats-changed-11\\\\\\": 2, "#whats-changed-12\\\\\\": 2, "#whats-changed-1\\\\\\": 2, "#whats-changed-2\\\\\\": 2, "#whats-changed-3\\\\\\": 2, "#whats-changed-4\\\\\\": 2, "#whats-changed-5\\\\\\": 2, "#whats-changed-6\\\\\\": 2, "#whats-changed-7\\\\\\": 2, "#whats-changed-8\\\\\\": 2, "#whats-changed-9\\\\\\": 2, "#whats-changed\\\\\\": 2, "#with-deprecation-warnings\\\\\\": 2, "#without-deprecation-warnings\\\\\\": 2, "$\\": 1, "$rc": 3, "\u0026\u0026": 1, "*\\\\\\": 2, "+export": 1, "+import": 2, "+installglobals": 1, "--": 5, "--\\\\nto": 1, "--\\u003e\\\\n\\u003ch1": 1, "--base03": 12, "--base05": 25, "--base08": 61, "--base09": 8, "--base0a": 13, "--base0b": 41, "--base0c": 1, "--base0d": 35, "--base0e": 54, "--base0f": 14, "--help": 1, "--host/host": 1, "--manual": 1, "--manual/manual": 1, "--manual\\u003c/code\\u003e": 1, "--no-restart/restart": 1, "--overwrite": 1, "--port": 1, "--profile": 2, "--profile\\u003c/code\\u003e": 2, "--scheme/scheme": 1, "--sourcemapclient": 2, "--sourcemapclient=hidden": 1, "--sourcemapclient=inline": 1, "--sourcemapserver": 2, "--sourcemapserver=hidden": 1, "--sourcemapserver=inline": 1, "--ssr": 1, "--ssr\\\\\\": 1, "--template": 5, "-1\\\\\\": 210, "-5": 2, "-\u003e": 22, "-\\u003e": 22, "-export": 1, "-import": 2, "-manifest": 2, "/$": 1, "//": 11, "//developer": 4, "//github": 833, "//localhost/myapp/*": 1, "//localhost/myapp/*\\u003c/code\\u003e": 1, "//main": 1, "//nodejs": 1, "//pnpm": 1, "//react": 1, "//reactrouter": 3, "//remix": 69, "//v2": 2, "//vitejs": 5, "//www": 1, "//x": 1, "/\u003e": 10, "/@fs": 1, "/\\u003cspan": 2, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "/\\u003e\\u003c/code\\u003e": 5, "/\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "/__manifest": 2, "/a/b/c": 7, "/app/models/answer": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/body\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "/build/server/index": 4, "/defer": 1, "/head\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "/html\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "/myapp": 1, "/path": 1, "/path/": 1, "/path\\\\\\": 1, "0/future/vite\\\\\\": 1, "0/history": 1, "0/packages/create-remix/changelog": 14, "0/packages/remix-architect/changelog": 14, "0/packages/remix-cloudflare-pages/changelog": 14, "0/packages/remix-cloudflare-workers/changelog": 14, "0/packages/remix-cloudflare/changelog": 15, "0/packages/remix-css-bundle/changelog": 14, "0/packages/remix-deno/changelog": 15, "0/packages/remix-dev/changelog": 16, "0/packages/remix-eslint-config/changelog": 14, "0/packages/remix-express/changelog": 14, "0/packages/remix-fs-routes/changelog": 1, "0/packages/remix-node/changelog": 15, "0/packages/remix-react/changelog": 15, "0/packages/remix-route-config/changelog": 1, "0/packages/remix-routes-option-adapter/changelog": 1, "0/packages/remix-serve/changelog": 14, "0/packages/remix-server-runtime/changelog": 16, "0/packages/remix-testing/changelog": 14, "000457e0": 1, "0===e": 1, "0\\": 18, "0\\\\\\": 34, "0\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 18, "0\\u003c/code\\u003e": 15, "0\\u003c/code\\u003e\\u003c/a\\u003e": 2, "0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 12, "0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003efull": 2, "0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 19, "0\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2": 16, "0\\u003c/h2\\u003e\\\\n\\u003cp\\u003edate": 18, "0breaking": 2, "0minor": 8, "0patch": 2, "0what": 24, "1/1/2024": 2, "1/packages/create-remix/changelog": 5, "1/packages/remix-architect/changelog": 5, "1/packages/remix-cloudflare-pages/changelog": 5, "1/packages/remix-cloudflare-workers/changelog": 5, "1/packages/remix-cloudflare/changelog": 5, "1/packages/remix-css-bundle/changelog": 5, "1/packages/remix-deno/changelog": 5, "1/packages/remix-dev/changelog": 7, "1/packages/remix-eslint-config/changelog": 5, "1/packages/remix-express/changelog": 5, "1/packages/remix-node/changelog": 6, "1/packages/remix-react/changelog": 8, "1/packages/remix-serve/changelog": 6, "1/packages/remix-server-runtime/changelog": 5, "1/packages/remix-testing/changelog": 5, "10": 157, "100": 1, "1000": 1, "1001": 1, "1002": 1, "1003": 1, "1004": 1, "1005": 1, "1006": 1, "1007": 1, "1008": 1, "1009": 1, "101": 1, "1010": 1, "1011": 1, "1012": 1, "1013": 1, "1014": 1, "1015": 1, "1016": 1, "1017": 1, "1018": 1, "1019": 1, "102": 1, "1020": 1, "1021": 1, "1022": 1, "1023": 1, "1024": 26, "1025": 1, "1026": 1, "1027": 1, "1028": 1, "1029": 1, "103": 1, "1030": 1, "1031": 1, "1032": 1, "1033": 1, "1034": 1, "1035": 1, "1036": 1, "1037": 1, "1038": 1, "1039": 1, "104": 1, "1040": 1, "1041": 1, "1042": 1, "1043": 1, "1044": 1, "1045": 1, "1046": 1, "1047": 1, "1048": 1, "1049": 1, "105": 1, "1050": 1, "1051": 1, "1052": 1, "1053": 1, "1054": 1, "1055": 1, "1056": 1, "1057": 1, "1058": 1, "1059": 1, "106": 1, "1060": 1, "1061": 1, "1062": 1, "1063": 1, "1064": 1, "1065": 1, "1066": 1, "1067": 1, "1068": 1, "1069": 1, "107": 1, "1070": 13, "1071": 1, "1072": 1, "1073": 1, "1074": 1, "1075": 1, "1076": 1, "1077": 1, "1078": 1, "1079": 1, "108": 1, "1080": 1, "1081": 1, "1082": 1, "1083": 1, "1084": 1, "1085": 1, "1086": 1, "1087": 1, "1088": 1, "1089": 1, "109": 1, "1090": 1, "1091": 1, "1092": 1, "1093": 1, "1094": 1, "1095": 1, "1096": 1, "1097": 1, "1098": 1, "1099": 1, "10\\\\\\": 9, "11": 59, "110": 1, "1100": 1, "1101": 1, "1102": 1, "1103": 1, "1104": 1, "1105": 1, "1106": 1, "1107": 1, "1108": 1, "1109": 1, "111": 3, "1110": 1, "1111": 1, "1112": 1, "1113": 1, "1114": 1, "1115": 1, "1116": 1, "1117": 1, "1118": 1, "1119": 1, "112": 1, "1120": 1, "1121": 1, "1122": 1, "1123": 1, "1124": 1, "1125": 1, "1126": 1, "1127": 1, "1128": 1, "1129": 1, "113": 1, "1130": 1, "1131": 1, "1132": 1, "1133": 1, "1134": 1, "1135": 1, "1136": 1, "1137": 1, "1138": 1, "1139": 1, "114": 1, "1140": 1, "1141": 1, "1142": 1, "1143": 1, "1144": 1, "1145": 1, "1146": 1, "1147": 1, "1148": 1, "1149": 1, "115": 1, "1150": 1, "1151": 1, "1152": 1, "1153": 1, "1154": 1, "1155": 1, "1156": 1, "1157": 1, "1158": 1, "1159": 1, "116": 1, "1160": 1, "1161": 1, "1162": 1, "1163": 1, "1164": 1, "1165": 1, "1166": 1, "1167": 1, "1168": 1, "1169": 1, "117": 1, "1170": 1, "1171": 1, "1172": 1, "1173": 1, "1174": 1, "1175": 1, "1176": 1, "1177": 1, "1178": 1, "1179": 1, "118": 2, "1180": 1, "1181": 1, "1182": 1, "1183": 1, "1184": 1, "1185": 1, "1186": 1, "1187": 1, "1188": 1, "1189": 1, "119": 1, "1190": 1, "1191": 1, "1192": 1, "1193": 1, "1194": 1, "1195": 1, "1196": 1, "1197": 1, "1198": 1, "1199": 1, "11\\\\\\": 9, "12": 37, "120": 1, "1200": 1, "1201": 1, "1202": 1, "1203": 1, "1204": 1, "1205": 1, "1206": 1, "1207": 1, "1208": 1, "1209": 1, "121": 1, "1210": 1, "1211": 1, "1212": 1, "1213": 1, "1214": 1, "1215": 1, "1216": 1, "1217": 1, "1218": 1, "1219": 1, "122": 1, "1220": 1, "1221": 1, "1222": 1, "1223": 1, "1224": 1, "1225": 1, "1226": 1, "1227": 1, "1228": 1, "1229": 1, "123": 1, "1230": 1, "1231": 1, "1232": 1, "1233": 1, "1234": 1, "1235": 1, "1236": 1, "1237": 1, "1238": 1, "1239": 1, "124": 1, "1240": 1, "1241": 1, "1242": 1, "1243": 1, "1244": 1, "1245": 1, "1246": 1, "1247": 1, "1248": 1, "1249": 1, "125": 1, "1250": 1, "1251": 1, "1252": 1, "1253": 1, "1254": 1, "1255": 1, "1256": 1, "1257": 1, "1258": 1, "1259": 1, "126": 1, "1260": 1, "1261": 1, "1262": 1, "1263": 1, "1264": 1, "1265": 1, "1266": 1, "1267": 1, "1268": 1, "1269": 1, "127": 1, "1270": 1, "1271": 1, "1272": 1, "1273": 1, "1274": 1, "1275": 1, "1276": 1, "1277": 1, "1278": 1, "1279": 1, "128": 1, "1280": 1, "1281": 1, "1282": 1, "1283": 1, "1284": 1, "1285": 1, "1286": 1, "1287": 1, "1288": 1, "1289": 1, "129": 1, "1290": 1, "1291": 1, "1292": 1, "1293": 1, "1294": 1, "1295": 1, "1296": 1, "1297": 1, "1298": 1, "1299": 1, "12\\\\\\": 7, "13": 45, "130": 1, "1300": 1, "1301": 1, "1302": 1, "1303": 1, "1304": 1, "1305": 1, "1306": 1, "1307": 1, "1308": 1, "1309": 1, "131": 1, "1310": 1, "1311": 1, "1312": 1, "1313": 1, "1314": 1, "1315": 1, "1316": 1, "1317": 1, "1318": 1, "1319": 1, "132": 2, "1320": 1, "1321": 1, "1322": 1, "1323": 1, "1324": 1, "1325": 1, "1326": 1, "1327": 1, "1328": 1, "1329": 1, "133": 1, "1330": 1, "1331": 1, "1332": 1, "1333": 1, "1334": 1, "1335": 1, "1336": 1, "1337": 1, "1338": 1, "1339": 1, "134": 1, "1340": 1, "1341": 1, "1342": 1, "1343": 1, "1344": 1, "1345": 1, "1346": 1, "1347": 1, "1348": 1, "1349": 1, "135": 1, "1350": 1, "1351": 1, "1352": 1, "1353": 1, "1354": 1, "1355": 1, "1356": 1, "1357": 1, "1358": 1, "1359": 1, "136": 1, "1360": 1, "1361": 1, "1362": 1, "1363": 1, "1364": 1, "1365": 1, "1366": 1, "1367": 1, "1368": 1, "1369": 1, "137": 1, "1370": 1, "138": 1, "139": 1, "13\\\\\\": 6, "14": 35, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 5, "15": 58, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 4, "16": 124, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 4, "17": 22, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 3, "18": 18, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 2, "19": 17, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 2, "19\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eavoid": 1, "1\\": 13, "1\\\\\\": 42, "1\\\\n\\\\n####": 1, "1\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 13, "1\\u003c/code\\u003e": 2, "1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 4, "1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003efull": 1, "1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 4, "1\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2": 12, "1\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efuture": 1, "1\\u003c/h2\\u003e\\\\n\\u003cp\\u003edate": 13, "1patch": 26, "2/packages/create-remix/changelog": 1, "2/packages/remix-architect/changelog": 1, "2/packages/remix-cloudflare-pages/changelog": 2, "2/packages/remix-cloudflare-workers/changelog": 2, "2/packages/remix-cloudflare/changelog": 2, "2/packages/remix-css-bundle/changelog": 2, "2/packages/remix-deno/changelog": 2, "2/packages/remix-dev/changelog": 2, "2/packages/remix-eslint-config/changelog": 2, "2/packages/remix-express/changelog": 2, "2/packages/remix-node/changelog": 2, "2/packages/remix-react/changelog": 3, "2/packages/remix-serve/changelog": 2, "2/packages/remix-server-runtime/changelog": 3, "2/packages/remix-testing/changelog": 2, "20": 5, "20+": 3, "20+\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "200": 1, "201": 1, "202": 3, "2023-09-15": 1, "2023-09-15\\u003c/p\\u003e\\\\n\\u003cp\\u003ewe": 1, "2023-09-21": 1, "2023-09-21\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2023-10-16": 1, "2023-10-16\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2023-10-31": 1, "2023-10-31\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2023-11-16": 1, "2023-11-16\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2023-11-22": 1, "2023-11-22\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2023-12-13": 1, "2023-12-13\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2023-12-22": 1, "2023-12-22\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-01-11": 1, "2024-01-11\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-01-18": 1, "2024-01-18\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-02-01": 1, "2024-02-01\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-02-20": 2, "2024-02-20\\u003c/p\\u003e\\\\n\\u003ch3": 2, "2024-02-21": 1, "2024-02-21\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-02-28": 1, "2024-02-28\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-03-07": 1, "2024-03-07\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-04-23": 1, "2024-04-23\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-04-24": 1, "2024-04-24\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-05-10": 1, "2024-05-10\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-06-25": 1, "2024-06-25\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-07-03": 1, "2024-07-03\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-07-04": 1, "2024-07-04\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-07-16": 1, "2024-07-16\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-08-01": 1, "2024-08-01\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-08-05": 1, "2024-08-05\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-08-15": 1, "2024-08-15\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-09-09": 1, "2024-09-09\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-09-19": 1, "2024-09-19\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-10-11": 2, "2024-10-11\\u003c/p\\u003e\\\\n\\u003ch3": 2, "2024-11-08": 1, "2024-11-08\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-11-19": 1, "2024-11-19\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-12-09": 1, "2024-12-09\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2024-12-20": 1, "2024-12-20\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2025-01-30": 1, "2025-01-30\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2025-02-27": 1, "2025-02-27\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2025-03-17": 1, "2025-03-17\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2025-03-19": 1, "2025-03-19\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2025-03-28": 1, "2025-03-28\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2025-03-31": 1, "2025-03-31\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2025-04-09": 1, "2025-04-09\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2025-05-08": 1, "2025-05-08\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2025-05-19": 1, "2025-05-19\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2025-05-29": 1, "2025-05-29\\u003c/p\\u003e\\\\n\\u003ch3": 1, "2025-07-25": 1, "2025-07-25\\u003c/p\\u003e\\\\n\\u003ch3": 1, "203": 1, "204": 3, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 1, "21": 21, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 1, "22": 14, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 9, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "24": 6, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 4, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "26": 9, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "27": 3, "270": 1, "271": 1, "271\\": 1, "271\\\\\\": 1, "272": 1, "272\\": 1, "272\\\\\\": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 7, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 4, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\": 6, "2\\\\\\": 33, "2\\\\n\\\\n###": 1, "2\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 6, "2\\u003c/code\\u003e": 3, "2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 4, "2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 3, "2\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2": 5, "2\\u003c/h2\\u003e\\\\n\\u003cp\\u003edate": 6, "2patch": 10, "2what": 2, "2xx": 1, "3/packages/create-remix/changelog": 1, "3/packages/remix-architect/changelog": 1, "3/packages/remix-cloudflare-pages/changelog": 1, "3/packages/remix-cloudflare-workers/changelog": 1, "3/packages/remix-cloudflare/changelog": 1, "3/packages/remix-css-bundle/changelog": 1, "3/packages/remix-deno/changelog": 1, "3/packages/remix-dev/changelog": 1, "3/packages/remix-eslint-config/changelog": 1, "3/packages/remix-express/changelog": 1, "3/packages/remix-node/changelog": 1, "3/packages/remix-react/changelog": 1, "3/packages/remix-serve/changelog": 1, "3/packages/remix-server-runtime/changelog": 1, "3/packages/remix-testing/changelog": 1, "30": 4, "300": 1, "3000": 6, "301": 1, "302": 1, "303": 1, "304": 5, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\": 3, "3\\\\\\": 29, "3\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch3": 1, "3\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 3, "3\\u003c/code\\u003e": 1, "3\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 2, "3\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "3\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2": 3, "3\\u003c/h2\\u003e\\\\n\\u003cp\\u003edate": 3, "3patch": 4, "3security": 2, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 3, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\": 1, "4\\\\\\": 23, "4\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "4\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2": 1, "4\\u003c/h2\\u003e\\\\n\\u003cp\\u003edate": 1, "4patch": 2, "4xx/5xx": 3, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\": 1, "5\\\\\\": 20, "5\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "5\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2": 1, "5\\u003c/h2\\u003e\\\\n\\u003cp\\u003edate": 1, "5m": 3, "5patch": 2, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\": 1, "6\\\\\\": 14, "6\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "6\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2": 1, "6\\u003c/h2\\u003e\\\\n\\u003cp\\u003edate": 1, "6patch": 2, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\": 1, "7\\\\\\": 14, "7\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "7\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2": 1, "7\\u003c/h2\\u003e\\\\n\\u003cp\\u003edate": 1, "7patch": 2, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\": 1, "8\\\\\\": 13, "8\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "8\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2": 1, "8\\u003c/h2\\u003e\\\\n\\u003cp\\u003edate": 1, "8cd31d65": 1, "8patch": 2, "90": 1, "90%": 2, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 2, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 45, "963": 1, "964": 1, "965": 1, "966": 131, "967": 16, "968": 1, "969": 1, "97": 1, "970": 28, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "976": 43, "977": 1, "978": 1, "979": 1, "98": 1, "980": 1, "981": 1, "982": 1, "983": 1, "984": 1, "985": 1, "986": 1, "987": 1, "988": 1, "989": 1, "99": 1, "990": 1, "991": 1, "992": 1, "993": 1, "994": 1, "995": 1, "996": 1, "997": 1, "998": 1, "999": 1, "9\\\\\\": 11, "\u003c/body\u003e": 1, "\u003c/head\u003e": 1, "\u003c/html\u003e": 1, "\u003c/link\u003e": 1, "\u003c/navlink\u003e": 1, "\u003ca\u003e": 1, "\u003cbody\u003e": 1, "\u003cfetcher": 1, "\u003cform": 1, "\u003cform\u003e": 2, "\u003chead\u003e": 1, "\u003chtml\u003e": 1, "\u003cimg": 2, "\u003clink": 3, "\u003clink\u003e": 2, "\u003clivereload": 4, "\u003cmeta\u003e/\u003clinks\u003e": 1, "\u003cnavlink": 2, "\u003coutlet": 1, "\u003cprefetchpagelinks\u003e": 1, "\u003cremix\u003e": 1, "\u003cremixserver\u003e": 1, "\u003cremixstub": 2, "\u003cscripts": 3, "===": 4, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 12, "=\\\\n\\u003c/span\\u003e\\u003cspan": 1, "=\\u003e": 5, "=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "@cloudflare/workers-types": 1, "@deprecated": 1, "@mdx-js/rollup": 2, "@mdx-js/rollup\\\\\\": 1, "@remix-run": 1, "@remix-run/": 3, "@remix-run/architect": 23, "@remix-run/cloudflare": 26, "@remix-run/cloudflare-pages": 25, "@remix-run/cloudflare-workers": 23, "@remix-run/css-bundle": 26, "@remix-run/deno": 24, "@remix-run/dev": 155, "@remix-run/dev/server-build": 1, "@remix-run/dev\\\\\\": 7, "@remix-run/eslint-config": 25, "@remix-run/eslint-config/jest": 1, "@remix-run/express": 28, "@remix-run/fs-routes": 3, "@remix-run/netlify": 2, "@remix-run/node": 36, "@remix-run/node/@remix-run/cloudflare/@remix-run/deno": 1, "@remix-run/node/install": 1, "@remix-run/node\\": 1, "@remix-run/node\\\\\\": 1, "@remix-run/react": 78, "@remix-run/react/future/single-fetch": 2, "@remix-run/route-config": 4, "@remix-run/route-config\\\\\\": 1, "@remix-run/router@1": 25, "@remix-run/routes-option-adapter": 2, "@remix-run/serve": 28, "@remix-run/serve\\": 1, "@remix-run/server-runtime": 61, "@remix-run/testing": 26, "@remix-run/testing\\": 1, "@remix-run/vercel": 2, "@remix-run/web-*": 2, "@remix-run/web-fetch": 3, "@remix-run/web-fetch@4": 2, "@remix-run/web-file@3": 1, "@remix-run/web-stream@1": 1, "\\\\\\": 367, "\\\\n-": 18, "\\\\n\\\\n##": 1, "\\\\n\\\\n###": 1, "\\\\n\\\\n**full": 1, "\\\\n\\\\n--\\u003e\\\\n\\u003ch2": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 7, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003elog": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003epreviously": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ea": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003edevelopment": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003efor": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enote": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 99, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e\\u0026#x3c": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ebgwhite\\u003c/code\\u003e": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efuture": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremix": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ethe": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_createremixstub\\u003c/code\\u003e": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ev2_metaargs\\u003c/code\\u003e": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003e⚠️": 2, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eadopt": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eby": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003edefaults": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003efetchers": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003efor": 2, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eif": 3, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ein": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003emost": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003enotably": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003enote": 2, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eon": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003epre-bundle": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003epreviously": 2, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eremix": 2, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eremove": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003erenamed": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ereverts": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003erun": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003estabilize": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003esupport": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ethe": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ethis": 6, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ewe": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ewhile": 1, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e⚠️": 1, "\\\\nsingle": 1, "\\n": 1, "\\u0026#x26": 3, "\\u0026#x3c": 14, "\\u003c": 1, "\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 5, "\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 6, "\\u003c/code\\u003e": 55, "\\u003c/code\\u003e/\\u003ccode\\u003edefer": 1, "\\u003c/code\\u003e\\u003c/a\\u003e": 2, "\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eif": 1, "\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003ethis": 1, "\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_viewtransition\\u003c/code\\u003e": 1, "\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003einvoking": 1, "\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e✅": 1, "\\u003c/del\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e⚠️": 1, "\\u003c/em\\u003e\\u003c/p\\u003e\\\\n\\u003ch4": 1, "\\u003c/h4\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e2": 1, "\\u003c/h4\\u003e\\\\n\\u003cp\\u003eremix": 2, "\\u003c/h4\\u003e\\\\n\\u003cp\\u003espa": 1, "\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethe": 2, "\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003c/h4\\u003e\\\\n\\u003cp\\u003ewe": 1, "\\u003c/h4\\u003e\\\\n\\u003cp\\u003ewith": 1, "\\u003c/h4\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\u003c/h4\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eif": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003estabilize": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 3, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch5": 2, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eremove": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eremoved": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eremove": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/netlify\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ethe": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efetch\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremix-serve\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/vercel\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ethe": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003estop": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremix-serve\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremix\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eremoved": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003edetect": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003efix": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2": 2, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 35, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch4": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003efull": 10, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003ein": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 4, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 45, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e/\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e/\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e": 29, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e": 26, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e": 2, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efetch\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efuture": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremix-serve\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_createremixstub\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_flushsync\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_flushsync\\u003e\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_viewtransition\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cdel\\u003e\\u003ccode\\u003efuture": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cem\\u003elots\\u003c/em\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eactions": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eadd": 4, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eallow": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eapps": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eattach": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003ebut": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003ecache": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003echanged": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003edecouple": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003ededuplicate": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003edeprecate": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003edrop": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eemit": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eexport": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003efix": 6, "\\u003c/li\\u003e\\\\n\\u003cli\\u003ehandle": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eintegrate": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003elet": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003enew": 3, "\\u003c/li\\u003e\\\\n\\u003cli\\u003enode": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003epopulate": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003epostcss/tailwind": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003epreserve": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eremove": 2, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eremoved": 8, "\\u003c/li\\u003e\\\\n\\u003cli\\u003erenamed": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003ereplacing": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003estabilized": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003esupport": 4, "\\u003c/li\\u003e\\\\n\\u003cli\\u003esupports": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eswitch": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003ethrow": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eupdate": 2, "\\u003c/li\\u003e\\\\n\\u003cli\\u003euse": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003evite": 1, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 3, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 20, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e": 2, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e": 2, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003eremix-serve\\u003c/code\\u003e": 2, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eadd": 2, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003efor": 1, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003einstead": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 24, "\\u003c/p\\u003e\\\\n\\u003ch3": 8, "\\u003c/p\\u003e\\\\n\\u003ch4": 8, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cem\\u003enote": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003econfig-based": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eenabling": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efor": 3, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ehowever": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eif": 3, "\\u003c/p\\u003e\\\\n\\u003cp\\u003enote": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eplease": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eremoving": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eto": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003etwo": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewe": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewhen": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewith": 3, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eyou": 3, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e⚠️": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e🎉": 1, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 4, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003ein": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e⚠️": 7, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 2, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e--sourcemapclient\\u003c/code\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremix": 2, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremixcloudflaredevproxy\\u003c/code\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_data\\u003c/code\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eskip": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eadd": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003efor": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ehmr": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eif": 2, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eit": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003enaked": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003epagination": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eparallelize": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003epreviously": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ereact": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eremix": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ethe": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ethis": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eunlike": 2, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ewe": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eyou": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e⚠️": 3, "\\u003c/span\\u003e": 11, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2": 1, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ecreating": 1, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eloading": 1, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 46, "\\u003c/span\\u003e\\u003cspan": 6, "\\u003c/strong\\u003e": 5, "\\u003c/summary\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003ca": 482, "\\u003ccode\\u003e": 35, "\\u003ccode\\u003e*\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--help\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--host\\u003c/code\\u003e/\\u003ccode\\u003ehost\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--manual\\u003c/code\\u003e/\\u003ccode\\u003emanual\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--no-restart\\u003c/code\\u003e/\\u003ccode\\u003erestart\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--overwrite\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--port\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--scheme\\u003c/code\\u003e/\\u003ccode\\u003escheme\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--sourcemapclient=hidden\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e--sourcemapserver\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--sourcemapclient=inline\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--sourcemapclient\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--sourcemapserver=hidden\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003esee": 1, "\\u003ccode\\u003e--sourcemapserver=inline\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--sourcemapserver\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--template\\u003c/code\\u003e": 2, "\\u003ccode\\u003e/@fs\\u003c/code\\u003e": 1, "\\u003ccode\\u003e/__manifest\\u003c/code\\u003e": 2, "\\u003ccode\\u003e/a/b/c\\u003c/code\\u003e": 1, "\\u003ccode\\u003e/myapp\\u003c/code\\u003e": 1, "\\u003ccode\\u003e/path/": 1, "\\u003ccode\\u003e0": 1, "\\u003ccode\\u003e1": 5, "\\u003ccode\\u003e2": 9, "\\u003ccode\\u003e2xx\\u003c/code\\u003e": 1, "\\u003ccode\\u003e4xx\\u003c/code\\u003e/\\u003ccode\\u003e5xx\\u003c/code\\u003e": 1, "\\u003ccode\\u003e5": 2, "\\u003ccode\\u003e6": 1, "\\u003ccode\\u003e@cloudflare/workers-types\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@deprecated\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@mdx-js/rollup\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e": 3, "\\u003ccode\\u003e@remix-run/dev/server-build\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 5, "\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/strong\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_viteplugin\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/eslint-config/jest\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/node/install\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e": 5, "\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e": 3, "\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/web-*\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/web-fetch\\u003c/code\\u003e": 3, "\\u003ccode\\u003e@remix-run\\u003c/code\\u003e": 1, "\\u003ccode\\u003e\\\\\\": 10, "\\u003ccode\\u003e\\u0026#x3c": 17, "\\u003ccode\\u003e^0": 1, "\\u003ccode\\u003e^4": 1, "\\u003ccode\\u003eaction\\u003c/code\\u003e": 2, "\\u003ccode\\u003eactionstatus\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e⚠️": 1, "\\u003ccode\\u003eanswer": 1, "\\u003ccode\\u003eany\\u003c/code\\u003e": 6, "\\u003ccode\\u003eapp": 1, "\\u003ccode\\u003eapp/routes": 1, "\\u003ccode\\u003eassetsbuilddirectory\\u003c/code\\u003e": 4, "\\u003ccode\\u003eatob\\u003c/code\\u003e/\\u003ccode\\u003ebtoa\\u003c/code\\u003e": 1, "\\u003ccode\\u003eawait": 1, "\\u003ccode\\u003ebase\\u003c/code\\u003e": 2, "\\u003ccode\\u003ebasename\\u003c/code\\u003e": 7, "\\u003ccode\\u003eblob\\u003c/code\\u003e": 1, "\\u003ccode\\u003eblocker\\u003c/code\\u003e/\\u003ccode\\u003eblockerfunction\\u003c/code\\u003e": 1, "\\u003ccode\\u003ebuild": 7, "\\u003ccode\\u003ebuild/": 5, "\\u003ccode\\u003ebuild/client\\u003c/code\\u003e": 2, "\\u003ccode\\u003ebuild/server/bundles": 1, "\\u003ccode\\u003ebuild/server\\u003c/code\\u003e": 2, "\\u003ccode\\u003ebuild\\u003c/code\\u003e": 3, "\\u003ccode\\u003ebuilddirectory\\u003c/code\\u003e": 2, "\\u003ccode\\u003ebuildend\\u003c/code\\u003e": 2, "\\u003ccode\\u003ebun\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecatchboundary\\u003c/code\\u003e": 1, "\\u003ccode\\u003echildren\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecjs\\u003c/code\\u003e": 1, "\\u003ccode\\u003eclient\\u003c/code\\u003e": 1, "\\u003ccode\\u003eclientaction\\u003c/code\\u003e": 1, "\\u003ccode\\u003eclientloader": 1, "\\u003ccode\\u003eclientloader\\u003c/code\\u003e": 5, "\\u003ccode\\u003eclientloader\\u003c/code\\u003e-only": 1, "\\u003ccode\\u003eclientloader\\u003c/code\\u003e/\\u003ccode\\u003eclientaction\\u003c/code\\u003e": 1, "\\u003ccode\\u003eclientloader\\u003c/code\\u003e/\\u003ccode\\u003eclientaction\\u003c/code\\u003e/\\u003ccode\\u003ehydratefallback\\u003c/code\\u003e": 1, "\\u003ccode\\u003eclientloader\\u003c/code\\u003e/\\u003ccode\\u003eclientacton\\u003c/code\\u003e": 1, "\\u003ccode\\u003eclientloader\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eif": 1, "\\u003ccode\\u003eclientloaderfunctionargs\\u003c/code\\u003e/\\u003ccode\\u003eclientactionfunctionargs\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003evite": 1, "\\u003ccode\\u003eclose\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecloudflare\\u003c/code\\u003e/\\u003ccode\\u003edeno\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecodemod\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecompileroptions": 1, "\\u003ccode\\u003ecompileroptions\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecomponent\\u003c/code\\u003e/\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecomponent\\u003c/code\\u003e/\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e/\\u003ccode\\u003ehydratefallback\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecookie\\u003c/code\\u003e": 3, "\\u003ccode\\u003ecreate-react-router\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e": 3, "\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecreateapp\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecreatecloudflarekvsessionstorage\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecreateremixstub\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecreateremixstub\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003ccode\\u003ecreateremixstub\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cp\\u003eafter": 1, "\\u003ccode\\u003ecreateserver\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecrypto": 2, "\\u003ccode\\u003edata": 1, "\\u003ccode\\u003edata\\u003c/code\\u003e": 1, "\\u003ccode\\u003edatafunctionargs\\u003c/code\\u003e": 1, "\\u003ccode\\u003edatastrategy\\u003c/code\\u003e": 1, "\\u003ccode\\u003edatastrategy\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003elazy": 1, "\\u003ccode\\u003edate\\u003c/code\\u003e": 1, "\\u003ccode\\u003edefault\\u003c/code\\u003e": 1, "\\u003ccode\\u003edefaultshouldrevalidate\\u003c/code\\u003e": 1, "\\u003ccode\\u003edefer": 1, "\\u003ccode\\u003edefer\\u003c/code\\u003e": 3, "\\u003ccode\\u003edefer\\u003c/code\\u003e/\\u003ccode\\u003ejson\\u003c/code\\u003e/\\u003ccode\\u003eredirect\\u003c/code\\u003e/\\u003ccode\\u003eredirectdocument\\u003c/code\\u003e": 1, "\\u003ccode\\u003edefineaction\\u003c/code\\u003e": 3, "\\u003ccode\\u003edefineclientaction\\u003c/code\\u003e": 3, "\\u003ccode\\u003edefineclientloader\\u003c/code\\u003e": 3, "\\u003ccode\\u003edefineloader\\u003c/code\\u003e": 4, "\\u003ccode\\u003edefineloader\\u003c/code\\u003e/\\u003ccode\\u003edefineaction\\u003c/code\\u003e": 1, "\\u003ccode\\u003edependencies\\u003c/code\\u003e": 1, "\\u003ccode\\u003edest": 2, "\\u003ccode\\u003edev": 3, "\\u003ccode\\u003edev\\u003c/code\\u003e": 2, "\\u003ccode\\u003edevdependencies\\u003c/code\\u003e": 1, "\\u003ccode\\u003edevelopment\\u003c/code\\u003e": 1, "\\u003ccode\\u003edoctype\\u003c/code\\u003e": 1, "\\u003ccode\\u003edocument": 2, "\\u003ccode\\u003eelement\\u003c/code\\u003e/\\u003ccode\\u003eerrorelement\\u003c/code\\u003e": 1, "\\u003ccode\\u003eenforce": 1, "\\u003ccode\\u003eentry": 7, "\\u003ccode\\u003eerror": 1, "\\u003ccode\\u003eerror\\u003c/code\\u003e": 4, "\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e": 2, "\\u003ccode\\u003eerrorresponse\\u003c/code\\u003e": 2, "\\u003ccode\\u003eesbuild\\u003c/code\\u003e": 2, "\\u003ccode\\u003eesm\\u003c/code\\u003e": 1, "\\u003ccode\\u003eexport": 1, "\\u003ccode\\u003eexports\\u003c/code\\u003e": 1, "\\u003ccode\\u003eexpress\\u003c/code\\u003e": 1, "\\u003ccode\\u003efalse\\u003c/code\\u003e": 1, "\\u003ccode\\u003efetch\\u003c/code\\u003e": 2, "\\u003ccode\\u003efetcher": 4, "\\u003ccode\\u003efetcher\\u003c/code\\u003e": 1, "\\u003ccode\\u003efileurltopath\\u003c/code\\u003e": 1, "\\u003ccode\\u003eflushsync\\u003c/code\\u003e": 1, "\\u003ccode\\u003eform\\u003c/code\\u003e": 3, "\\u003ccode\\u003eformmethod\\u003c/code\\u003e": 1, "\\u003ccode\\u003efs-extra\\u003c/code\\u003e": 1, "\\u003ccode\\u003efuture": 35, "\\u003ccode\\u003efuture/*": 1, "\\u003ccode\\u003efuture\\u003c/code\\u003e": 1, "\\u003ccode\\u003efutureconfig\\u003c/code\\u003e": 1, "\\u003ccode\\u003eget": 3, "\\u003ccode\\u003eget\\u003c/code\\u003e": 1, "\\u003ccode\\u003egetbindingsproxy\\u003c/code\\u003e": 2, "\\u003ccode\\u003egetdependenciestobundle\\u003c/code\\u003e": 2, "\\u003ccode\\u003egetloadcontext\\u003c/code\\u003e": 3, "\\u003ccode\\u003egetplatformproxy\\u003c/code\\u003e": 2, "\\u003ccode\\u003egetremixdevloadcontext\\u003c/code\\u003e": 1, "\\u003ccode\\u003egetremixdevloadcontext\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eif": 1, "\\u003ccode\\u003ehandle\\u003c/code\\u003e": 2, "\\u003ccode\\u003ehandledatarequest\\u003c/code\\u003e": 1, "\\u003ccode\\u003ehandleerror\\u003c/code\\u003e": 1, "\\u003ccode\\u003eheaders": 4, "\\u003ccode\\u003eheaders\\u003c/code\\u003e": 7, "\\u003ccode\\u003ehistory": 2, "\\u003ccode\\u003ehost\\u003c/code\\u003e": 1, "\\u003ccode\\u003ehttp": 1, "\\u003ccode\\u003ehttp-server\\u003c/code\\u003e": 1, "\\u003ccode\\u003ehydratefallback\\u003c/code\\u003e": 3, "\\u003ccode\\u003eidle\\u003c/code\\u003e": 3, "\\u003ccode\\u003eimmutable\\u003c/code\\u003e": 1, "\\u003ccode\\u003eimport": 1, "\\u003ccode\\u003eindex": 2, "\\u003ccode\\u003einstallglobals": 4, "\\u003ccode\\u003einstallglobals\\u003c/code\\u003e": 2, "\\u003ccode\\u003einterface": 1, "\\u003ccode\\u003eisbot@3\\u003c/code\\u003e": 1, "\\u003ccode\\u003eisbot@3\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003etemplates": 1, "\\u003ccode\\u003eisbot@4\\u003c/code\\u003e": 3, "\\u003ccode\\u003eisdatetype\\u003c/code\\u003e": 1, "\\u003ccode\\u003eisspamode\\u003c/code\\u003e": 1, "\\u003ccode\\u003eistypescript\\u003c/code\\u003e": 1, "\\u003ccode\\u003ejson": 5, "\\u003ccode\\u003ejson\\u003c/code\\u003e": 1, "\\u003ccode\\u003ejson\\u003c/code\\u003e/\\u003ccode\\u003edefer\\u003c/code\\u003e": 3, "\\u003ccode\\u003ejson\\u003c/code\\u003e/\\u003ccode\\u003edefer\\u003c/code\\u003e/\\u003ccode\\u003eredirect\\u003c/code\\u003e": 1, "\\u003ccode\\u003ekey\\u003c/code\\u003e": 2, "\\u003ccode\\u003ekey\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e\\u0026#x3c": 1, "\\u003ccode\\u003ekey\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eform\\u003c/code\\u003e": 1, "\\u003ccode\\u003elatest\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eupdate": 1, "\\u003ccode\\u003elayout\\u003c/code\\u003e": 7, "\\u003ccode\\u003elayout\\u003c/code\\u003e/\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e": 1, "\\u003ccode\\u003elayoutcomponent\\u003c/code\\u003e": 1, "\\u003ccode\\u003elegacycssimports\\u003c/code\\u003e": 1, "\\u003ccode\\u003elink\\u003c/code\\u003e": 2, "\\u003ccode\\u003elivereload\\u003c/code\\u003e": 3, "\\u003ccode\\u003eloader\\u003c/code\\u003e": 5, "\\u003ccode\\u003eloader\\u003c/code\\u003e/\\u003ccode\\u003eaction\\u003c/code\\u003e": 2, "\\u003ccode\\u003eloaderargs\\u003c/code\\u003e/\\u003ccode\\u003eactionargs\\u003c/code\\u003e": 1, "\\u003ccode\\u003eloaderfunctionargs\\u003c/code\\u003e": 1, "\\u003ccode\\u003eloaderfunctionargs\\u003c/code\\u003e/\\u003ccode\\u003eactionfunctionargs\\u003c/code\\u003e": 1, "\\u003ccode\\u003eloaderfunctionargs\\u003c/code\\u003e/\\u003ccode\\u003eactionfunctionargs\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eappdata\\u003c/code\\u003e": 1, "\\u003ccode\\u003emanifest": 3, "\\u003ccode\\u003emanifest\\u003c/code\\u003e": 2, "\\u003ccode\\u003emanual\\u003c/code\\u003e": 1, "\\u003ccode\\u003emap\\u003c/code\\u003e": 1, "\\u003ccode\\u003emeta": 2, "\\u003ccode\\u003emeta\\u003c/code\\u003e": 3, "\\u003ccode\\u003emeta\\u003c/code\\u003e/\\u003ccode\\u003elinks\\u003c/code\\u003e": 1, "\\u003ccode\\u003emetaargs\\u003c/code\\u003e": 1, "\\u003ccode\\u003emetaargs\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003ethen": 1, "\\u003ccode\\u003emetaargs\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ev2_metadescriptor\\u003c/code\\u003e": 1, "\\u003ccode\\u003emetaargs_singlefetch\\u003c/code\\u003e": 1, "\\u003ccode\\u003emetadescriptor\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ev2_metafunction\\u003c/code\\u003e": 1, "\\u003ccode\\u003emetafunction\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ev2_metamatch\\u003c/code\\u003e": 1, "\\u003ccode\\u003emetamatch\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ev2_metamatches\\u003c/code\\u003e": 1, "\\u003ccode\\u003emetamatches\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ev2_serverruntimemetaargs\\u003c/code\\u003e": 1, "\\u003ccode\\u003emiddleware\\u003c/code\\u003e": 3, "\\u003ccode\\u003emode\\u003c/code\\u003e": 1, "\\u003ccode\\u003emodulepreload\\u003c/code\\u003e": 1, "\\u003ccode\\u003emyapp": 1, "\\u003ccode\\u003enavigate\\u003c/code\\u003e": 2, "\\u003ccode\\u003enavigate\\u003c/code\\u003e/\\u003ccode\\u003efetcherkey\\u003c/code\\u003e": 2, "\\u003ccode\\u003enew": 1, "\\u003ccode\\u003enightly\\u003c/code\\u003e": 1, "\\u003ccode\\u003enode-fetch\\u003c/code\\u003e": 1, "\\u003ccode\\u003enode\\u003c/code\\u003e": 2, "\\u003ccode\\u003enode_env\\u003c/code\\u003e": 1, "\\u003ccode\\u003enode_modules\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ethat": 1, "\\u003ccode\\u003enonce\\u003c/code\\u003e": 2, "\\u003ccode\\u003enotfoundpaths\\u003c/code\\u003e": 1, "\\u003ccode\\u003enpm": 3, "\\u003ccode\\u003enull\\u003c/code\\u003e": 2, "\\u003ccode\\u003eoptimizedeps": 3, "\\u003ccode\\u003ep": 1, "\\u003ccode\\u003epackage": 2, "\\u003ccode\\u003epatchroutesonnavigation\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003estabilize": 1, "\\u003ccode\\u003epnpm\\u003c/code\\u003e": 3, "\\u003ccode\\u003eport\\u003c/code\\u003e": 2, "\\u003ccode\\u003epresets\\u003c/code\\u003e": 1, "\\u003ccode\\u003epriority\\u003c/code\\u003e": 1, "\\u003ccode\\u003eprocess": 2, "\\u003ccode\\u003eproduction\\u003c/code\\u003e": 1, "\\u003ccode\\u003epromise\\u003c/code\\u003e": 1, "\\u003ccode\\u003epublic\\u003c/code\\u003e": 3, "\\u003ccode\\u003epublic\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003efor": 1, "\\u003ccode\\u003epublicpath\\u003c/code\\u003e": 3, "\\u003ccode\\u003epublicpath\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ethis": 1, "\\u003ccode\\u003ereact": 1, "\\u003ccode\\u003ereact-refresh/babel\\u003c/code\\u003e": 1, "\\u003ccode\\u003ereact-refresh\\u003c/code\\u003e": 1, "\\u003ccode\\u003ereact\\u003c/code\\u003e": 1, "\\u003ccode\\u003ereactdom": 1, "\\u003ccode\\u003ereadablestream\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ethis": 1, "\\u003ccode\\u003eredirect": 1, "\\u003ccode\\u003eredirect\\u003c/code\\u003e": 1, "\\u003ccode\\u003eredirectdocument\\u003c/code\\u003e": 1, "\\u003ccode\\u003eref\\u003c/code\\u003e": 1, "\\u003ccode\\u003ereloaddocument\\u003c/code\\u003e": 1, "\\u003ccode\\u003eremix": 14, "\\u003ccode\\u003eremix-dot-server\\u003c/code\\u003e": 1, "\\u003ccode\\u003eremix-react-proxy\\u003c/code\\u003e": 1, "\\u003ccode\\u003eremix-serve\\u003c/code\\u003e": 6, "\\u003ccode\\u003eremix\\u003c/code\\u003e": 1, "\\u003ccode\\u003eremix_dev_http_origin\\u003c/code\\u003e": 1, "\\u003ccode\\u003eremix_dev_origin\\u003c/code\\u003e": 2, "\\u003ccode\\u003eremix_dev_server_ws_port\\u003c/code\\u003e": 1, "\\u003ccode\\u003eremixcloudflaredevproxy\\u003c/code\\u003e": 2, "\\u003ccode\\u003eremixconfig\\u003c/code\\u003e": 1, "\\u003ccode\\u003eremixuserconfig\\u003c/code\\u003e": 1, "\\u003ccode\\u003erendertoreadablestream\\u003c/code\\u003e": 2, "\\u003ccode\\u003ereplace": 1, "\\u003ccode\\u003ereq": 4, "\\u003ccode\\u003erequest": 7, "\\u003ccode\\u003erequest\\u003c/code\\u003e": 2, "\\u003ccode\\u003erequire\\u003c/code\\u003e": 1, "\\u003ccode\\u003eresponse\\u003c/code\\u003e": 12, "\\u003ccode\\u003eresponse\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003ewe": 1, "\\u003ccode\\u003eresponsestub\\u003c/code\\u003e": 3, "\\u003ccode\\u003ereturn": 2, "\\u003ccode\\u003eroot": 1, "\\u003ccode\\u003eroot\\u003c/code\\u003e": 1, "\\u003ccode\\u003eroute": 3, "\\u003ccode\\u003eroutematch\\u003c/code\\u003e": 1, "\\u003ccode\\u003eroutes": 7, "\\u003ccode\\u003eroutes/a": 1, "\\u003ccode\\u003eroutes/b\\u003c/code\\u003e": 1, "\\u003ccode\\u003eroutes/c\\u003c/code\\u003e": 1, "\\u003ccode\\u003eroutes/myapp/\\u003c/code\\u003e": 1, "\\u003ccode\\u003eroutes\\u003c/code\\u003e": 2, "\\u003ccode\\u003escripts\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserializefrom\\u003c/code\\u003e": 2, "\\u003ccode\\u003eserv-cli\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserver": 3, "\\u003ccode\\u003eserver\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserverbuilddirectory\\u003c/code\\u003e": 3, "\\u003ccode\\u003eserverbuildfile\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserverbuildpath\\u003c/code\\u003e": 3, "\\u003ccode\\u003eserverbundles\\u003c/code\\u003e": 4, "\\u003ccode\\u003eserverloader": 1, "\\u003ccode\\u003eserverloader\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserverloader\\u003c/code\\u003e/\\u003ccode\\u003eserveraction\\u003c/code\\u003e": 1, "\\u003ccode\\u003eservernodebuiltinspolyfill": 1, "\\u003ccode\\u003eserverruntimemetaargs\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserverruntimemetaargs\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ev2_serverruntimemetadescriptor\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserverruntimemetadescriptor\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ev2_serverruntimemetafunction\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserverruntimemetafunction\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ev2_serverruntimemetamatch\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserverruntimemetamatch\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ev2_serverruntimemetamatches\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserverruntimemetamatches\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003ethe": 1, "\\u003ccode\\u003eset-cookie\\u003c/code\\u003e": 2, "\\u003ccode\\u003eshouldrevalidate\\u003c/code\\u003e": 3, "\\u003ccode\\u003eshouldrevalidate\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003e": 1, "\\u003ccode\\u003eshouldrevalidate\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eif": 1, "\\u003ccode\\u003esignal\\u003c/code\\u003e": 2, "\\u003ccode\\u003essr": 4, "\\u003ccode\\u003essrloadmodule\\u003c/code\\u003e": 2, "\\u003ccode\\u003estate": 2, "\\u003ccode\\u003estatus\\u003c/code\\u003e": 2, "\\u003ccode\\u003estatus\\u003c/code\\u003e/\\u003ccode\\u003eheaders\\u003c/code\\u003e": 3, "\\u003ccode\\u003esubmit\\u003c/code\\u003e": 2, "\\u003ccode\\u003etagname\\u003c/code\\u003e": 1, "\\u003ccode\\u003etailwind\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003ccode\\u003etar-fs\\u003c/code\\u003e": 1, "\\u003ccode\\u003etext/event-stream\\u003c/code\\u003e": 1, "\\u003ccode\\u003etext/x-script\\u003c/code\\u003e": 1, "\\u003ccode\\u003etransitioning\\u003c/code\\u003e": 1, "\\u003ccode\\u003etrue\\u003c/code\\u003e": 1, "\\u003ccode\\u003etsconfig": 2, "\\u003ccode\\u003eturbo-stream@2": 1, "\\u003ccode\\u003eturbo-stream\\u003c/code\\u003e": 3, "\\u003ccode\\u003etypes\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eremove": 1, "\\u003ccode\\u003euimatch\\u003c/code\\u003e": 2, "\\u003ccode\\u003euimatch\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003erenamed": 1, "\\u003ccode\\u003euimatch\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ereplace": 1, "\\u003ccode\\u003euimatch_singlefetch\\u003c/code\\u003e": 1, "\\u003ccode\\u003eundefined\\u003c/code\\u003e": 3, "\\u003ccode\\u003eundefined\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ethat": 1, "\\u003ccode\\u003eundici\\u003c/code\\u003e": 7, "\\u003ccode\\u003eunknown\\u003c/code\\u003e": 1, "\\u003ccode\\u003eunknown\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "\\u003ccode\\u003eunknown\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eappdata\\u003c/code\\u003e/\\u003ccode\\u003eroutehandle\\u003c/code\\u003e": 1, "\\u003ccode\\u003eunknown\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efetcher": 1, "\\u003ccode\\u003eunknown\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003elocation": 1, "\\u003ccode\\u003eunknown\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003emetamatch": 1, "\\u003ccode\\u003eunknown\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003euimatch": 2, "\\u003ccode\\u003eunstable-vite-cloudflare\\u003c/code\\u003e": 1, "\\u003ccode\\u003eunstable\\u003c/code\\u003e": 1, "\\u003ccode\\u003eunstable_\\u003c/code\\u003e": 7, "\\u003ccode\\u003eunstable_actionstatus\\u003c/code\\u003e": 2, "\\u003ccode\\u003eunstable_cloudflarepreset\\u003c/code\\u003e": 1, "\\u003ccode\\u003eunstable_createviteserver\\u003c/code\\u003e": 1, "\\u003ccode\\u003eunstable_data": 3, "\\u003ccode\\u003eunstable_datastrategy\\u003c/code\\u003e": 1, "\\u003ccode\\u003eunstable_flushsync\\u003c/code\\u003e": 2, "\\u003ccode\\u003eunstable_fogofwar\\u003c/code\\u003e": 2, "\\u003ccode\\u003eunstable_lazyroutediscovery\\u003c/code\\u003e": 2, "\\u003ccode\\u003eunstable_loadviteserverbuild\\u003c/code\\u003e": 1, "\\u003ccode\\u003eunstable_patchroutesonnavigation\\u003c/code\\u003e": 2, "\\u003ccode\\u003eunstable_routeconfig\\u003c/code\\u003e": 1, "\\u003ccode\\u003eunstable_serverbundles\\u003c/code\\u003e": 2, "\\u003ccode\\u003eunstable_serverbundlesfunction\\u003c/code\\u003e": 1, "\\u003ccode\\u003eunstable_shouldreload\\u003c/code\\u003e": 1, "\\u003ccode\\u003eunstable_ssr": 2, "\\u003ccode\\u003eunstable_vitepluginconfig\\u003c/code\\u003e": 1, "\\u003ccode\\u003eunstable_viteserverbuildmoduleid\\u003c/code\\u003e": 2, "\\u003ccode\\u003euseactiondata\\u003c/code\\u003e": 1, "\\u003ccode\\u003euseblocker\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003ccode\\u003euseblocker\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cp\\u003ewe": 1, "\\u003ccode\\u003euseeffect\\u003c/code\\u003e": 1, "\\u003ccode\\u003eusefetcher": 4, "\\u003ccode\\u003eusefetcher\\u003c/code\\u003e": 1, "\\u003ccode\\u003eusefetchers": 3, "\\u003ccode\\u003eusefetchers\\u003c/code\\u003e": 2, "\\u003ccode\\u003euseloaderdata\\u003c/code\\u003e": 1, "\\u003ccode\\u003euselocation": 1, "\\u003ccode\\u003eusematches": 3, "\\u003ccode\\u003eusematches\\u003c/code\\u003e": 1, "\\u003ccode\\u003eusenavigate\\u003c/code\\u003e": 2, "\\u003ccode\\u003eusenavigate\\u003c/code\\u003e/\\u003ccode\\u003eusesubmit\\u003c/code\\u003e/\\u003ccode\\u003efetcher": 1, "\\u003ccode\\u003euserouteloaderdata\\u003c/code\\u003e": 1, "\\u003ccode\\u003eusesubmit\\u003c/code\\u003e": 4, "\\u003ccode\\u003ev1": 1, "\\u003ccode\\u003ev2": 2, "\\u003ccode\\u003ev2_\\u003c/code\\u003e": 1, "\\u003ccode\\u003eviewtransition\\u003c/code\\u003e": 2, "\\u003ccode\\u003evite": 9, "\\u003ccode\\u003evite-node\\u003c/code\\u003e": 1, "\\u003ccode\\u003evite\\u003c/code\\u003e": 2, "\\u003ccode\\u003eviteconfig\\u003c/code\\u003e": 1, "\\u003ccode\\u003ewhitebright\\u003c/code\\u003e": 1, "\\u003ccode\\u003ewindow": 2, "\\u003ccode\\u003eworkerd\\u003c/code\\u003e-compatible": 1, "\\u003ccode\\u003ex-forwarded-host\\u003c/code\\u003e": 2, "\\u003ccode\\u003ex-forwarded-host\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e": 1, "\\u003ccode\\u003ex-forwarded-host\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ethis": 1, "\\u003cem\\u003e\\u003cstrong\\u003eso\\u003c/strong\\u003e\\u003c/em\\u003e": 1, "\\u003cem\\u003ebefore\\u003c/em\\u003e": 2, "\\u003cem\\u003ecan": 1, "\\u003cem\\u003edoes\\u003c/em\\u003e": 1, "\\u003cem\\u003eevery\\u003c/em\\u003e": 1, "\\u003cem\\u003emostly\\u003c/em\\u003e": 1, "\\u003cem\\u003emuch\\u003c/em\\u003e": 1, "\\u003cem\\u003enot\\u003c/em\\u003e": 1, "\\u003cem\\u003eshould\\u003c/em\\u003e": 1, "\\u003cem\\u003esmall\\u003c/em\\u003e": 1, "\\u003cem\\u003esuper\\u003c/em\\u003e": 1, "\\u003cem\\u003every": 1, "\\u003cem\\u003ewere\\u003c/em\\u003e": 1, "\\u003cem\\u003ewhile": 2, "\\u003cem\\u003ewithout\\u003c/em\\u003e": 1, "\\u003cspan": 137, "\\u003cstrong\\u003ein-flight\\u003c/strong\\u003e": 1, "\\u003cstrong\\u003ethis": 10, "\\u003csummary\\u003e": 1, "\\u003e": 185, "\\u003e#": 2, "\\u003e#10046\\u003c/a\\u003e": 1, "\\u003e#10047\\u003c/a\\u003e": 1, "\\u003e#10063\\u003c/a\\u003e": 1, "\\u003e#10072\\u003c/a\\u003e": 1, "\\u003e#10092\\u003c/a\\u003e": 1, "\\u003e#10099\\u003c/a\\u003e": 1, "\\u003e#10107\\u003c/a\\u003e": 1, "\\u003e#10126\\u003c/a\\u003e": 1, "\\u003e#10139\\u003c/a\\u003e": 1, "\\u003e#10145\\u003c/a\\u003e": 1, "\\u003e#10173\\u003c/a\\u003e": 1, "\\u003e#10174\\u003c/a\\u003e": 1, "\\u003e#10236\\u003c/a\\u003e": 1, "\\u003e#10300\\u003c/a\\u003e": 1, "\\u003e#10306\\u003c/a\\u003e": 1, "\\u003e#10317\\u003c/a\\u003e": 1, "\\u003e#10351\\u003c/a\\u003e": 1, "\\u003e#10358\\u003c/a\\u003e": 1, "\\u003e#10410\\u003c/a\\u003e": 1, "\\u003e#10424\\u003c/a\\u003e": 1, "\\u003e#10447\\u003c/a\\u003e": 1, "\\u003e#10477\\u003c/a\\u003e": 1, "\\u003e#10479\\u003c/a\\u003e": 1, "\\u003e#10498\\u003c/a\\u003e": 1, "\\u003e#10510\\u003c/a\\u003e": 1, "\\u003e#10524\\u003c/a\\u003e": 1, "\\u003e#10527\\u003c/a\\u003e": 1, "\\u003e#10528\\u003c/a\\u003e": 1, "\\u003e#10535\\u003c/a\\u003e": 1, "\\u003e#10547\\u003c/a\\u003e": 1, "\\u003e#10553\\u003c/a\\u003e": 1, "\\u003e#10562\\u003c/a\\u003e": 1, "\\u003e#10601\\u003c/a\\u003e": 1, "\\u003e#10611\\u003c/a\\u003e": 1, "\\u003e#10638\\u003c/a\\u003e": 1, "\\u003e#10686\\u003c/a\\u003e": 1, "\\u003e#10688\\u003c/a\\u003e": 1, "\\u003e#10916\\u003c/a\\u003e": 1, "\\u003e#10960\\u003c/a\\u003e": 1, "\\u003e#10962\\u003c/a\\u003e": 1, "\\u003e#1678\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ethe": 1, "\\u003e#1757\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ethis": 1, "\\u003e#6409\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ethis": 1, "\\u003e#6770\\u003c/a\\u003e": 1, "\\u003e#6842\\u003c/a\\u003e": 1, "\\u003e#6865\\u003c/a\\u003e": 1, "\\u003e#6870\\u003c/a\\u003e": 1, "\\u003e#6874\\u003c/a\\u003e": 1, "\\u003e#6875\\u003c/a\\u003e": 1, "\\u003e#6887\\u003c/a\\u003e": 1, "\\u003e#6895\\u003c/a\\u003e": 1, "\\u003e#6896\\u003c/a\\u003e": 1, "\\u003e#6897\\u003c/a\\u003e": 1, "\\u003e#6898\\u003c/a\\u003e": 1, "\\u003e#6900\\u003c/a\\u003e": 1, "\\u003e#6902\\u003c/a\\u003e": 1, "\\u003e#6903\\u003c/a\\u003e": 1, "\\u003e#6906\\u003c/a\\u003e": 1, "\\u003e#6909\\u003c/a\\u003e": 1, "\\u003e#6911\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eremoved": 1, "\\u003e#6918\\u003c/a\\u003e": 1, "\\u003e#6925\\u003c/a\\u003e": 1, "\\u003e#6936\\u003c/a\\u003e": 1, "\\u003e#6939\\u003c/a\\u003e": 1, "\\u003e#6949\\u003c/a\\u003e": 1, "\\u003e#6958\\u003c/a\\u003e": 2, "\\u003e#6962\\u003c/a\\u003e": 2, "\\u003e#6963\\u003c/a\\u003e": 1, "\\u003e#6964\\u003c/a\\u003e": 1, "\\u003e#6965\\u003c/a\\u003e": 1, "\\u003e#6969\\u003c/a\\u003e": 1, "\\u003e#6979\\u003c/a\\u003e": 1, "\\u003e#6982\\u003c/a\\u003e": 1, "\\u003e#7002\\u003c/a\\u003e": 1, "\\u003e#7009\\u003c/a\\u003e": 1, "\\u003e#7035\\u003c/a\\u003e": 1, "\\u003e#7040\\u003c/a\\u003e": 1, "\\u003e#7058\\u003c/a\\u003e": 1, "\\u003e#7062\\u003c/a\\u003e": 1, "\\u003e#7063\\u003c/a\\u003e": 1, "\\u003e#7074\\u003c/a\\u003e": 1, "\\u003e#7099\\u003c/a\\u003e": 1, "\\u003e#7105\\u003c/a\\u003e": 1, "\\u003e#7121\\u003c/a\\u003e": 1, "\\u003e#7133\\u003c/a\\u003e": 1, "\\u003e#7173\\u003c/a\\u003e": 1, "\\u003e#7180\\u003c/a\\u003e": 1, "\\u003e#7186\\u003c/a\\u003e": 1, "\\u003e#7203\\u003c/a\\u003e": 1, "\\u003e#7206\\u003c/a\\u003e": 1, "\\u003e#7217\\u003c/a\\u003e": 1, "\\u003e#7229\\u003c/a\\u003e": 1, "\\u003e#7231\\u003c/a\\u003e": 1, "\\u003e#7269\\u003c/a\\u003e": 2, "\\u003e#7272\\u003c/a\\u003e": 1, "\\u003e#7278\\u003c/a\\u003e": 2, "\\u003e#7292\\u003c/a\\u003e": 1, "\\u003e#7293\\u003c/a\\u003e": 1, "\\u003e#7319\\u003c/a\\u003e": 1, "\\u003e#7323\\u003c/a\\u003e": 1, "\\u003e#7345\\u003c/a\\u003e": 1, "\\u003e#7423\\u003c/a\\u003e": 1, "\\u003e#7464\\u003c/a\\u003e": 1, "\\u003e#7470\\u003c/a\\u003e": 1, "\\u003e#7477\\u003c/a\\u003e": 1, "\\u003e#7487\\u003c/a\\u003e": 1, "\\u003e#7491\\u003c/a\\u003e": 1, "\\u003e#7498\\u003c/a\\u003e": 1, "\\u003e#7551\\u003c/a\\u003e": 1, "\\u003e#7574\\u003c/a\\u003e": 1, "\\u003e#7576\\u003c/a\\u003e": 1, "\\u003e#7590\\u003c/a\\u003e": 1, "\\u003e#7594\\u003c/a\\u003e": 1, "\\u003e#7605\\u003c/a\\u003e": 1, "\\u003e#7619\\u003c/a\\u003e": 1, "\\u003e#7647\\u003c/a\\u003e": 1, "\\u003e#7649\\u003c/a\\u003e": 1, "\\u003e#7670\\u003c/a\\u003e": 1, "\\u003e#7684\\u003c/a\\u003e": 1, "\\u003e#7745\\u003c/a\\u003e": 1, "\\u003e#7842\\u003c/a\\u003e": 1, "\\u003e#7843\\u003c/a\\u003e": 1, "\\u003e#7846\\u003c/a\\u003e": 1, "\\u003e#7882\\u003c/a\\u003e": 1, "\\u003e#7883\\u003c/a\\u003e": 1, "\\u003e#7888\\u003c/a\\u003e": 1, "\\u003e#7892\\u003c/a\\u003e": 1, "\\u003e#7895\\u003c/a\\u003e": 1, "\\u003e#7904\\u003c/a\\u003e": 1, "\\u003e#7908\\u003c/a\\u003e": 1, "\\u003e#7911\\u003c/a\\u003e": 1, "\\u003e#7913\\u003c/a\\u003e": 1, "\\u003e#7919\\u003c/a\\u003e": 2, "\\u003e#7926\\u003c/a\\u003e": 1, "\\u003e#7937\\u003c/a\\u003e": 1, "\\u003e#7952\\u003c/a\\u003e": 1, "\\u003e#7958\\u003c/a\\u003e": 1, "\\u003e#7980\\u003c/a\\u003e": 1, "\\u003e#7996\\u003c/a\\u003e": 1, "\\u003e#8014\\u003c/a\\u003e": 1, "\\u003e#8022\\u003c/a\\u003e": 1, "\\u003e#8039\\u003c/a\\u003e": 1, "\\u003e#8042\\u003c/a\\u003e": 1, "\\u003e#8057\\u003c/a\\u003e": 1, "\\u003e#8062\\u003c/a\\u003e": 1, "\\u003e#8066\\u003c/a\\u003e": 2, "\\u003e#8076\\u003c/a\\u003e": 2, "\\u003e#8077\\u003c/a\\u003e": 1, "\\u003e#8096\\u003c/a\\u003e": 1, "\\u003e#8119\\u003c/a\\u003e": 1, "\\u003e#8120\\u003c/a\\u003e": 1, "\\u003e#8121\\u003c/a\\u003e": 1, "\\u003e#8143\\u003c/a\\u003e": 1, "\\u003e#8145\\u003c/a\\u003e": 3, "\\u003e#8154\\u003c/a\\u003e": 1, "\\u003e#8157\\u003c/a\\u003e": 1, "\\u003e#8164\\u003c/a\\u003e": 1, "\\u003e#8171\\u003c/a\\u003e": 1, "\\u003e#8172\\u003c/a\\u003e": 1, "\\u003e#8173\\u003c/a\\u003e": 2, "\\u003e#8174\\u003c/a\\u003e": 1, "\\u003e#8177\\u003c/a\\u003e": 1, "\\u003e#8184\\u003c/a\\u003e": 1, "\\u003e#8200\\u003c/a\\u003e": 2, "\\u003e#8211\\u003c/a\\u003e": 1, "\\u003e#8216\\u003c/a\\u003e": 1, "\\u003e#8222\\u003c/a\\u003e": 1, "\\u003e#8238\\u003c/a\\u003e": 1, "\\u003e#8251\\u003c/a\\u003e": 1, "\\u003e#8264\\u003c/a\\u003e": 1, "\\u003e#8267\\u003c/a\\u003e": 1, "\\u003e#8304\\u003c/a\\u003e": 1, "\\u003e#8321\\u003c/a\\u003e": 1, "\\u003e#8332\\u003c/a\\u003e": 2, "\\u003e#8342\\u003c/a\\u003e": 1, "\\u003e#8351\\u003c/a\\u003e": 1, "\\u003e#8375\\u003c/a\\u003e": 1, "\\u003e#8405\\u003c/a\\u003e": 1, "\\u003e#8415\\u003c/a\\u003e": 1, "\\u003e#8420\\u003c/a\\u003e": 1, "\\u003e#8446\\u003c/a\\u003e": 1, "\\u003e#8457\\u003c/a\\u003e": 1, "\\u003e#8458\\u003c/a\\u003e": 1, "\\u003e#8459\\u003c/a\\u003e": 1, "\\u003e#8468\\u003c/a\\u003e": 1, "\\u003e#8479\\u003c/a\\u003e": 1, "\\u003e#8488\\u003c/a\\u003e": 1, "\\u003e#8492\\u003c/a\\u003e": 1, "\\u003e#8493\\u003c/a\\u003e": 1, "\\u003e#8495\\u003c/a\\u003e": 1, "\\u003e#8503\\u003c/a\\u003e": 1, "\\u003e#8514\\u003c/a\\u003e": 1, "\\u003e#8530\\u003c/a\\u003e": 1, "\\u003e#8531\\u003c/a\\u003e": 2, "\\u003e#8538\\u003c/a\\u003e": 1, "\\u003e#8539\\u003c/a\\u003e": 1, "\\u003e#8575\\u003c/a\\u003e": 2, "\\u003e#8577\\u003c/a\\u003e": 1, "\\u003e#8580\\u003c/a\\u003e": 1, "\\u003e#8581\\u003c/a\\u003e": 1, "\\u003e#8591\\u003c/a\\u003e": 1, "\\u003e#8596\\u003c/a\\u003e": 2, "\\u003e#8598\\u003c/a\\u003e": 1, "\\u003e#8599\\u003c/a\\u003e": 2, "\\u003e#8613\\u003c/a\\u003e": 1, "\\u003e#8620\\u003c/a\\u003e": 1, "\\u003e#8624\\u003c/a\\u003e": 1, "\\u003e#8627\\u003c/a\\u003e": 1, "\\u003e#8636\\u003c/a\\u003e": 1, "\\u003e#8649\\u003c/a\\u003e": 1, "\\u003e#8654\\u003c/a\\u003e": 1, "\\u003e#8684\\u003c/a\\u003e": 1, "\\u003e#8690\\u003c/a\\u003e": 1, "\\u003e#8692\\u003c/a\\u003e": 1, "\\u003e#8701\\u003c/a\\u003e": 1, "\\u003e#8709\\u003c/a\\u003e": 1, "\\u003e#8711\\u003c/a\\u003e": 1, "\\u003e#8713\\u003c/a\\u003e": 1, "\\u003e#8720\\u003c/a\\u003e": 1, "\\u003e#8723\\u003c/a\\u003e": 1, "\\u003e#8725\\u003c/a\\u003e": 1, "\\u003e#8726\\u003c/a\\u003e": 1, "\\u003e#8740\\u003c/a\\u003e": 1, "\\u003e#8745\\u003c/a\\u003e": 1, "\\u003e#8747\\u003c/a\\u003e": 1, "\\u003e#8749\\u003c/a\\u003e": 1, "\\u003e#8752\\u003c/a\\u003e": 1, "\\u003e#8773\\u003c/a\\u003e": 1, "\\u003e#8795\\u003c/a\\u003e": 1, "\\u003e#8796\\u003c/a\\u003e": 1, "\\u003e#8797\\u003c/a\\u003e": 1, "\\u003e#8806\\u003c/a\\u003e": 1, "\\u003e#8819\\u003c/a\\u003e": 1, "\\u003e#8829\\u003c/a\\u003e": 1, "\\u003e#8842\\u003c/a\\u003e": 1, "\\u003e#8843\\u003c/a\\u003e": 1, "\\u003e#8848\\u003c/a\\u003e": 1, "\\u003e#8859\\u003c/a\\u003e": 1, "\\u003e#8864\\u003c/a\\u003e": 1, "\\u003e#8885\\u003c/a\\u003e": 1, "\\u003e#8892\\u003c/a\\u003e": 1, "\\u003e#8897\\u003c/a\\u003e": 1, "\\u003e#8910\\u003c/a\\u003e": 1, "\\u003e#8916\\u003c/a\\u003e": 1, "\\u003e#8932\\u003c/a\\u003e": 1, "\\u003e#8939\\u003c/a\\u003e": 1, "\\u003e#8965\\u003c/a\\u003e": 1, "\\u003e#8966\\u003c/a\\u003e": 1, "\\u003e#8969\\u003c/a\\u003e": 1, "\\u003e#8970\\u003c/a\\u003e": 1, "\\u003e#9026\\u003c/a\\u003e": 1, "\\u003e#9063\\u003c/a\\u003e": 1, "\\u003e#9073\\u003c/a\\u003e": 1, "\\u003e#9084\\u003c/a\\u003e": 1, "\\u003e#9104\\u003c/a\\u003e": 1, "\\u003e#9106\\u003c/a\\u003e": 1, "\\u003e#9111\\u003c/a\\u003e": 1, "\\u003e#9142\\u003c/a\\u003e": 1, "\\u003e#9176\\u003c/a\\u003e": 1, "\\u003e#9184\\u003c/a\\u003e": 1, "\\u003e#9194\\u003c/a\\u003e": 1, "\\u003e#9198\\u003c/a\\u003e": 1, "\\u003e#9241\\u003c/a\\u003e": 1, "\\u003e#9272\\u003c/a\\u003e": 1, "\\u003e#9287\\u003c/a\\u003e": 1, "\\u003e#9299\\u003c/a\\u003e": 1, "\\u003e#9301\\u003c/a\\u003e": 1, "\\u003e#9305\\u003c/a\\u003e": 1, "\\u003e#9322\\u003c/a\\u003e": 1, "\\u003e#9349\\u003c/a\\u003e": 2, "\\u003e#9364\\u003c/a\\u003e": 1, "\\u003e#9369\\u003c/a\\u003e": 1, "\\u003e#9372\\u003c/a\\u003e": 1, "\\u003e#9395\\u003c/a\\u003e": 1, "\\u003e#9488\\u003c/a\\u003e": 2, "\\u003e#9501\\u003c/a\\u003e": 1, "\\u003e#9562\\u003c/a\\u003e": 1, "\\u003e#9564\\u003c/a\\u003e": 1, "\\u003e#9566\\u003c/a\\u003e": 1, "\\u003e#9580\\u003c/a\\u003e": 1, "\\u003e#9584\\u003c/a\\u003e": 1, "\\u003e#9600\\u003c/a\\u003e": 1, "\\u003e#9619\\u003c/a\\u003e": 1, "\\u003e#9664\\u003c/a\\u003e": 1, "\\u003e#9665\\u003c/a\\u003e": 1, "\\u003e#9686\\u003c/a\\u003e": 1, "\\u003e#9693\\u003c/a\\u003e": 1, "\\u003e#9695\\u003c/a\\u003e": 1, "\\u003e#9700\\u003c/a\\u003e": 1, "\\u003e#9706\\u003c/a\\u003e": 1, "\\u003e#9738\\u003c/a\\u003e": 1, "\\u003e#9763\\u003c/a\\u003e": 1, "\\u003e#9764\\u003c/a\\u003e": 1, "\\u003e#9769\\u003c/a\\u003e": 2, "\\u003e#9792\\u003c/a\\u003e": 1, "\\u003e#9796\\u003c/a\\u003e": 1, "\\u003e#9848\\u003c/a\\u003e": 1, "\\u003e#9856\\u003c/a\\u003e": 1, "\\u003e#9860\\u003c/a\\u003e": 2, "\\u003e#9888\\u003c/a\\u003e": 1, "\\u003e#9889\\u003c/a\\u003e": 1, "\\u003e#9890\\u003c/a\\u003e": 1, "\\u003e#9893\\u003c/a\\u003e": 1, "\\u003e#9899\\u003c/a\\u003e": 1, "\\u003e#9901\\u003c/a\\u003e": 1, "\\u003e#9910\\u003c/a\\u003e": 1, "\\u003e#9917\\u003c/a\\u003e": 1, "\\u003e#9921\\u003c/a\\u003e": 1, "\\u003e#9938\\u003c/a\\u003e": 1, "\\u003e#9941\\u003c/a\\u003e": 1, "\\u003e#9955\\u003c/a\\u003e": 1, "\\u003e#9973\\u003c/a\\u003e": 1, "\\u003e#9976\\u003c/a\\u003e": 1, "\\u003e#9980\\u003c/a\\u003e": 1, "\\u003e#9982\\u003c/a\\u003e": 1, "\\u003e#9999\\u003c/a\\u003e": 1, "\\u003e+\\u003cspan": 20, "\\u003e--template\\u003c/span\\u003e": 3, "\\u003e-\\u003cspan": 25, "\\u003e//": 11, "\\u003e1\\u003c/span\\u003e": 2, "\\u003e2": 2, "\\u003e2\\u003c/span\\u003e": 1, "\\u003e===\\u003c/span\\u003e": 1, "\\u003e=\\u003c/span\\u003e": 5, "\\u003e=\\u003c/span\\u003e\\u003cspan": 7, "\\u003e=\\u003e\\u003c/span\\u003e": 5, "\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\": 2, "\\u003e@remix-run/fs-routes\\u003c/span\\u003e\\\\\\": 1, "\\u003e@remix-run/route-config\\u003c/span\\u003e\\\\\\": 1, "\\u003e@remix-run/server-runtime\\u003c/span\\u003e\\\\\\": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 16, "\\u003e\\u0026#x3c": 2, "\\u003e\\u003c/code\\u003e": 1, "\\u003e\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003esubmit": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e2": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003efuture": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eunstable_flushsync\\u003c/code\\u003e": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebasename": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebreaking": 3, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003echanges": 29, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eclient": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ecloudflare": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003efuture": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eimproved": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003elazy": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eminor": 16, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003enew": 3, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eother": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003epatch": 43, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003epersistence": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eremix": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eremoved": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003erenamed": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003esecurity": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserver": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003esingle": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003espa": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003estabilized": 3, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003estable": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eundici\\u003c/h4\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eunstable": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eupdated": 27, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eupdates": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eupgraded": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev2": 43, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eview": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003evite": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ewhat": 13, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ewith": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ewithout": 1, "\\u003e\\u003ca": 210, "\\u003e\\u003ccode\\u003e0": 2, "\\u003e\\u003ccode\\u003e000457e0\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003e6": 1, "\\u003e\\u003ccode\\u003e8cd31d65\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 21, "\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 22, "\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 22, "\\u003e\\u003ccode\\u003e@remix-run/cloudflare\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 23, "\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 22, "\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 23, "\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 26, "\\u003e\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 22, "\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 22, "\\u003e\\u003ccode\\u003e@remix-run/fs-routes\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003e@remix-run/netlify\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 24, "\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003efull": 2, "\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 25, "\\u003e\\u003ccode\\u003e@remix-run/route-config\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003e@remix-run/router@1": 24, "\\u003e\\u003ccode\\u003e@remix-run/routes-option-adapter\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003efull": 1, "\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 22, "\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003efull": 3, "\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 22, "\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\": 1, "\\u003e\\u003ccode\\u003e@remix-run/testing\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003efull": 21, "\\u003e\\u003ccode\\u003e@remix-run/vercel\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003e@remix-run/web-*\\u003c/code\\u003e": 1, "\\u003e\\u003ccode\\u003e@remix-run/web-fetch@4": 2, "\\u003e\\u003ccode\\u003e@remix-run/web-file@3": 1, "\\u003e\\u003ccode\\u003e@remix-run/web-stream@1": 1, "\\u003e\\u003ccode\\u003e\\u0026#x3c": 2, "\\u003e\\u003ccode\\u003e\\u003cspan": 25, "\\u003e\\u003ccode\\u003ea7cffe57\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003ebase\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003ebasename\\u003c/code\\u003e": 2, "\\u003e\\u003ccode\\u003ebasename\\u003c/code\\u003e\\u003c/a\\u003e": 2, "\\u003e\\u003ccode\\u003ebdd04217\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003ebrowserbuilddirectory\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003ebrowsernodebuiltinspolyfill\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eclientaction\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003ewhile": 1, "\\u003e\\u003ccode\\u003eclientloader\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003efull": 1, "\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 21, "\\u003e\\u003ccode\\u003ecreateremixstub\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003edevserverbroadcastdelay\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003edevserverport\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003efetcher": 2, "\\u003e\\u003ccode\\u003efuture": 1, "\\u003e\\u003ccode\\u003ehydratefallback\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eimagesrcset\\u003c/code\\u003e/\\u003ccode\\u003eimagesizes\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003einstallglobals": 1, "\\u003e\\u003ccode\\u003elayout\\u003c/code\\u003e": 1, "\\u003e\\u003ccode\\u003epartitioned\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003epnpm": 1, "\\u003e\\u003ccode\\u003epostcss\\u003c/code\\u003e": 1, "\\u003e\\u003ccode\\u003ereact-router-dom@6": 26, "\\u003e\\u003ccode\\u003eserverbuilddirectory\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eserverbuildtarget\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eservermoduleformat\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eservernodebuiltinspolyfill\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003esourcemapsupport": 1, "\\u003e\\u003ccode\\u003eturbo-stream\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eundici\\u003c/code\\u003e\\u003c/a\\u003e": 2, "\\u003e\\u003ccode\\u003eunstable_data\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eunstable_flushsync\\u003c/code\\u003e": 1, "\\u003e\\u003ccode\\u003eunstable_useprompt\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eunstable_useviewtransitionstate\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003euseblocker\\u003c/code\\u003e\\u003c/a\\u003e": 2, "\\u003e\\u003ccode\\u003euseresolvedpath\\u003c/code\\u003e": 1, "\\u003e\\u003ccode\\u003eusetransition\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003ev2": 41, "\\u003e\\u003ccode\\u003ev2_dev\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003ev2_errorboundary\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003ev2_headers\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003ev2_meta\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003ev2_normalizeformmethod\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003ev2_routeconvention\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003evite": 1, "\\u003e\\u003cem\\u003efuture": 1, "\\u003e\\u003cpre": 25, "\\u003e\\u003cspan": 237, "\\u003e\\u003cstrong\\u003eupgrading": 1, "\\u003e\\u003e": 1, "\\u003ea\\u003c/span\\u003e": 1, "\\u003ealt\\u003c/span\\u003e": 1, "\\u003ealt\\u003c/span\\u003e\\u003cspan": 4, "\\u003eannouncement": 1, "\\u003eapp": 2, "\\u003eas\\u003c/span\\u003e": 2, "\\u003eastro": 1, "\\u003eauthenticated\\u003c/span\\u003e\\\\\\": 1, "\\u003eavailable": 1, "\\u003eb\\u003c/span\\u003e": 1, "\\u003ebasename": 1, "\\u003eblog": 2, "\\u003ebranch\\u003c/span\\u003e": 2, "\\u003ebreaking": 3, "\\u003echanges": 30, "\\u003eclient": 3, "\\u003ecloudflare": 1, "\\u003econst": 1, "\\u003econst\\u003c/span\\u003e": 5, "\\u003ecreate-remix@latest\\u003c/span\\u003e": 3, "\\u003edata\\u003c/span\\u003e": 1, "\\u003edeclare\\u003c/span\\u003e": 1, "\\u003edefault\\u003c/span\\u003e": 4, "\\u003edefineconfig\\u003c/span\\u003e": 6, "\\u003edefineloader\\u003c/span\\u003e": 1, "\\u003edocs\\u003c/a\\u003e": 4, "\\u003edocumentation\\u003c/a\\u003e": 1, "\\u003eexport": 4, "\\u003eexport\\u003c/span\\u003e": 7, "\\u003efalse\\u003c/span\\u003e": 1, "\\u003eflatroutes\\u003c/span\\u003e": 2, "\\u003efrom\\u003c/span\\u003e": 6, "\\u003efunction\\u003c/span\\u003e": 2, "\\u003efuture": 4, "\\u003efuture\\u003c/span\\u003e": 1, "\\u003egithub": 1, "\\u003eguides": 3, "\\u003ehandleclick\\u003c/span\\u003e": 1, "\\u003ehttps": 3, "\\u003eid\\u003c/span\\u003e": 1, "\\u003eimage-expand\\u003c/span\\u003e\\\\\\": 2, "\\u003eimagelink\\u003c/span\\u003e": 1, "\\u003eimg\\u003c/span\\u003e": 2, "\\u003eimg\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eimport": 9, "\\u003eimport\\u003c/span\\u003e": 6, "\\u003eimproved": 1, "\\u003einitial": 1, "\\u003einstallglobals": 1, "\\u003einterface\\u003c/span\\u003e": 1, "\\u003eisauthenticatedroute\\u003c/span\\u003e": 2, "\\u003eistransitioning\\u003c/span\\u003e": 2, "\\u003elazy": 1, "\\u003elink\\u003c/span\\u003e": 1, "\\u003elink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eloader\\u003c/span\\u003e": 2, "\\u003eminor": 16, "\\u003emodule\\u003c/span\\u003e": 1, "\\u003enavlink\\u003c/span\\u003e": 1, "\\u003enavlink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003efor": 1, "\\u003enew": 3, "\\u003enpx": 1, "\\u003enpx\\u003c/span\\u003e": 3, "\\u003eopen": 1, "\\u003eother": 1, "\\u003eour": 1, "\\u003epatch": 43, "\\u003epending\\u003c/a\\u003e": 1, "\\u003epersistence": 1, "\\u003eposts\\u003c/a\\u003e": 1, "\\u003eremix": 5, "\\u003eremix-run/remix/templates/unstable-vite-cloudflare\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003efor": 1, "\\u003eremix-run/remix/templates/unstable-vite-express\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003enew": 1, "\\u003eremix-run/remix/templates/unstable-vite\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eremix\\u003c/span\\u003e": 6, "\\u003eremoved": 2, "\\u003erenamed": 1, "\\u003erequest\\u003c/span\\u003e": 1, "\\u003erequired": 1, "\\u003ereturn\\u003c/span\\u003e": 4, "\\u003erfc\\u003c/a\\u003e": 5, "\\u003eroadmap": 1, "\\u003eroute\\u003c/span\\u003e": 2, "\\u003erouteconfig\\u003c/span\\u003e": 2, "\\u003eroutes/_authenticated\\u003c/span\\u003e\\\\\\": 1, "\\u003eroutes\\u003c/span\\u003e\\u003cspan": 1, "\\u003esecurity": 3, "\\u003eserver": 2, "\\u003esetfocusandorscrolltonewlyaddedthing\\u003c/span\\u003e": 1, "\\u003esingle": 3, "\\u003esmooth": 1, "\\u003esome\\u003c/span\\u003e": 1, "\\u003espa": 3, "\\u003esrc\\u003c/span\\u003e": 1, "\\u003esrc\\u003c/span\\u003e\\u003cspan": 4, "\\u003estabilized": 3, "\\u003estable": 1, "\\u003estyle\\u003c/span\\u003e\\u003cspan": 1, "\\u003esubmit\\u003c/span\\u003e": 1, "\\u003ethe": 1, "\\u003ethese\\u003c/a\\u003e": 1, "\\u003eto\\u003c/span\\u003e": 2, "\\u003eto\\u003c/span\\u003e\\u003cspan": 4, "\\u003etransitioning\\u003c/span\\u003e": 1, "\\u003etrue\\u003c/span\\u003e": 5, "\\u003etype\\u003c/span\\u003e": 1, "\\u003eunauthenticated\\u003c/span\\u003e\\\\\\": 1, "\\u003eundici\\u003c/a\\u003e": 1, "\\u003eundici\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003eunstable": 1, "\\u003eunstable_serverbundles\\u003c/span\\u003e": 1, "\\u003eunstable_singlefetch\\u003c/span\\u003e\\u003cspan": 1, "\\u003eunstable_useviewtransitionstate\\u003c/span\\u003e": 1, "\\u003eunstable_viewtransition\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eunstable_viteplugin\\u003c/span\\u003e": 2, "\\u003eupdated": 27, "\\u003eupdates": 1, "\\u003eupgrade": 1, "\\u003eupgraded": 1, "\\u003ev18": 1, "\\u003ev2": 43, "\\u003eview": 2, "\\u003evite": 5, "\\u003evite\\u003c/a\\u003e": 1, "\\u003evite\\u003c/span\\u003e\\\\\\": 2, "\\u003eweb": 1, "\\u003eweb-std-io": 1, "\\u003ewhat": 13, "\\u003ewith": 1, "\\u003ewithout": 1, "^0": 3, "^4": 2, "^4\\\\\\": 1, "_-b4drxahv": 1, "_11\\": 1, "_1371\\": 1, "_1372\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 328, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 177, "_958\\": 1, "_961\\": 176, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "_routes=root": 2, "_routes=routes/a": 1, "_routes=routes/a\\u003c/code\\u003e": 1, "_types_": 2, "a7cffe57": 1, "a=a": 1, "a=document": 1, "a\\u003e\\u003c/code\\u003e": 1, "ability": 2, "abort": 12, "aborted": 8, "aborting": 10, "about": 3, "above": 2, "absolute": 2, "accept": 2, "accepts": 2, "access": 12, "accessibility\\": 1, "accordingly": 2, "account": 2, "accurately": 2, "achieve": 2, "across": 2, "action": 4, "action\\": 1, "actiondata\\": 1, "actions": 3, "actionstatus": 1, "active": 4, "adapt": 2, "adapter": 11, "adapters": 5, "add": 68, "added": 23, "adding": 6, "additional": 4, "address": 2, "addressed": 2, "adds": 5, "adjusted": 2, "adopt": 5, "adopted": 2, "adopters": 4, "adoption": 4, "advanced": 8, "advisory": 2, "advisory\\u003c/a\\u003e": 2, "affected": 2, "after": 17, "aimed": 6, "alarm": 4, "aliases": 2, "align": 14, "aligned": 6, "aligns": 2, "all": 39, "allow": 25, "allow\\u003c/code\\u003e": 1, "allow\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eimprove": 1, "allowed": 2, "allowing": 4, "allows": 16, "along": 2, "alongside": 2, "alphanumeric": 2, "already": 34, "also": 32, "alt": 3, "alt=": 2, "altered": 4, "altering": 2, "alternative": 2, "always": 8, "an": 65, "analysis": 2, "analyzed": 2, "analyzed\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eso": 2, "ancestor": 2, "and": 289, "animated": 2, "animation": 2, "animations": 2, "annotations": 2, "announce": 2, "announcement": 2, "announcement\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eplease": 1, "answer": 1, "anticipated": 2, "any": 37, "api": 50, "api-compatible": 2, "api@remix-run/dev": 2, "api\\": 1, "api\\u003c/a\\u003e": 2, "api\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "api\\u003c/h4\\u003e\\\\n\\u003cp\\u003ewe": 1, "apis": 38, "apis\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003esingle": 1, "apis\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "apis\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "apis\\u003c/h4\\u003e\\\\n\\u003cp\\u003eper": 1, "apis\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethis": 1, "apis\\u003c/strong\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ecreaterequesthandler\\u003c/code\\u003e": 1, "app": 44, "app/routes": 3, "app\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003ebecause": 1, "app\\u003c/li\\u003e\\\\n\\u003cli\\u003ein": 1, "app\\u003c/li\\u003e\\\\n\\u003cli\\u003e⚠️": 1, "appdata": 1, "appdata/routehandle": 1, "appear": 2, "application": 10, "applications": 4, "apply": 6, "applying": 2, "approach": 7, "apps": 18, "apps\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e": 1, "are": 98, "aren": 6, "args": 2, "argument": 4, "aria-hidden=\\\\\\": 210, "arise": 2, "around": 8, "array": 4, "as": 108, "as-is": 2, "asked": 1, "asset": 3, "assets": 19, "assets\\u003c/code\\u003e": 1, "assetsbuilddirectory": 6, "assetsdir": 1, "assetsdir\\u003c/code\\u003e": 1, "assignable": 2, "assist": 6, "assumption": 6, "astro": 1, "at": 35, "atob/btoa": 1, "attach": 1, "attribute": 4, "attrs\\": 1, "augment": 4, "augmentation": 1, "augmentation\\u003c/a\\u003e": 1, "authenticated": 1, "automatic": 12, "automatically": 14, "available": 10, "available\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch4": 1, "avoid": 23, "await": 9, "await\\": 1, "aware": 2, "b=document": 1, "babel": 4, "back": 10, "back-compat": 2, "back/forward": 2, "backend": 3, "backwards": 4, "backwards-compatibility": 2, "bare": 2, "base": 5, "based": 4, "basename": 14, "basename-support\\\\\\": 1, "basic": 2, "bdd04217": 1, "be": 89, "because": 24, "been": 32, "before": 15, "before/after": 2, "behavior": 33, "behavior\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e⚠️": 1, "behavioral": 2, "behaviors": 2, "behind": 6, "being": 20, "below": 6, "below\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch4": 1, "benefits": 2, "bespoke": 2, "better": 12, "between": 14, "beware": 2, "bgwhite": 1, "big": 2, "bit": 2, "blob": 1, "blocker/blockerfunction": 1, "blog": 4, "bodies": 1, "bodies\\u003c/a\\u003e": 1, "body": 6, "body\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "boolean": 2, "both": 10, "boundaries": 2, "box": 4, "branch": 2, "breadcrumbs": 3, "break": 3, "breaking": 65, "breaking-changes\\": 1, "breaking-changes\\\\\\": 1, "breaking-changesapi-removals\\\\\\": 1, "breaking-type-changes\\\\\\": 1, "breeze": 1, "bring": 2, "browser": 11, "browserbuilddirectory": 1, "browsernodebuiltinspolyfill": 1, "browsers": 2, "bubble": 2, "bubbled": 2, "bug": 18, "bugs": 6, "build": 110, "build-time": 4, "build/": 5, "build/client": 4, "build/client\\\\\\": 1, "build/client\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003efor": 1, "build/server": 3, "build/server/bundles": 1, "build/server\\\\\\": 1, "build\\\\\\": 4, "build\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eto": 1, "build\\u003c/code\\u003e": 4, "build\\u003c/li\\u003e\\\\n\\u003cli\\u003enow": 1, "builddirectory": 4, "buildend": 2, "building": 3, "builds": 12, "built": 3, "built-in": 16, "built-ins": 4, "bump": 4, "bun": 1, "bundle": 6, "bundle_id": 2, "bundles": 17, "bundles\\": 1, "bundles\\\\\\": 1, "bundles\\u003c/a\\u003e": 1, "bundles\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "bundling": 2, "bundling\\": 1, "busting": 2, "but": 39, "by": 247, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "cache": 9, "caching": 6, "call": 18, "calling": 4, "calls": 13, "calls\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003emigration": 1, "camelcased": 2, "can": 78, "cancellation": 2, "cannot": 4, "case": 4, "cases": 10, "catch": 1, "catchboundary": 1, "categorized": 2, "cause": 14, "caused": 6, "causing": 6, "certain": 2, "certainly": 2, "change": 57, "change\\u003c/li\\u003e\\\\n\\u003cli\\u003eusers": 1, "changed": 45, "changed\\": 1, "changed\\\\n\\\\n####": 1, "changed\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 13, "changed\\u003c/h3\\u003e\\\\n\\u003ch4": 13, "changedminor": 24, "changedpatch": 2, "changelog": 45, "changelog**": 1, "changelog\\": 2, "changelog\\u003c/strong\\u003e": 41, "changes": 220, "changes-by-package-10\\": 1, "changes-by-package-10\\\\\\": 1, "changes-by-package-11\\": 1, "changes-by-package-11\\\\\\": 1, "changes-by-package-12\\": 1, "changes-by-package-12\\\\\\": 1, "changes-by-package-13\\": 1, "changes-by-package-13\\\\\\": 1, "changes-by-package-14\\": 1, "changes-by-package-14\\\\\\": 1, "changes-by-package-15\\": 1, "changes-by-package-15\\\\\\": 1, "changes-by-package-16\\": 1, "changes-by-package-16\\\\\\": 1, "changes-by-package-17\\": 1, "changes-by-package-17\\\\\\": 1, "changes-by-package-18\\": 1, "changes-by-package-18\\\\\\": 1, "changes-by-package-19\\": 1, "changes-by-package-19\\\\\\": 1, "changes-by-package-1\\": 1, "changes-by-package-1\\\\\\": 1, "changes-by-package-20\\": 1, "changes-by-package-20\\\\\\": 1, "changes-by-package-21\\": 1, "changes-by-package-21\\\\\\": 1, "changes-by-package-22\\": 1, "changes-by-package-22\\\\\\": 1, "changes-by-package-23\\": 1, "changes-by-package-23\\\\\\": 1, "changes-by-package-24\\": 1, "changes-by-package-24\\\\\\": 1, "changes-by-package-25\\": 1, "changes-by-package-25\\\\\\": 1, "changes-by-package-26\\": 1, "changes-by-package-26\\\\\\": 1, "changes-by-package-27\\": 1, "changes-by-package-27\\\\\\": 1, "changes-by-package-2\\": 1, "changes-by-package-2\\\\\\": 1, "changes-by-package-3\\": 1, "changes-by-package-3\\\\\\": 1, "changes-by-package-4\\": 1, "changes-by-package-4\\\\\\": 1, "changes-by-package-5\\": 1, "changes-by-package-5\\\\\\": 1, "changes-by-package-6\\": 1, "changes-by-package-6\\\\\\": 1, "changes-by-package-7\\": 1, "changes-by-package-7\\\\\\": 1, "changes-by-package-8\\": 1, "changes-by-package-8\\\\\\": 1, "changes-by-package-9\\": 1, "changes-by-package-9\\\\\\": 1, "changes-by-package-\\": 1, "changes-by-package-\\\\\\": 1, "changes-by-package\\": 1, "changes-by-package\\\\\\": 1, "changes/api": 6, "changes2": 2, "changes\\": 4, "changes\\\\n\\\\n###": 2, "changes\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 13, "changes\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 47, "changes\\u003c/h3\\u003e\\\\n\\u003cp\\u003ebelow": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e": 2, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003edeprecate": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003estabilize": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/architect\\u003c/code\\u003e": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 19, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e": 3, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e": 10, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/server-runtime\\u003c/code\\u003e": 2, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e": 6, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eadd": 3, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eadded": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eemulate": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003efix": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003enew": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eremix": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eremove": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003estabilize": 1, "changes\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eunstable": 1, "changes\\u003c/h5\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eremoved": 1, "changeschanges": 12, "changesnew": 2, "changespatch": 30, "changesupdated": 52, "changesv2": 24, "characters": 2, "chars": 2, "check": 20, "checks": 10, "cherry-picked": 2, "child": 6, "children": 5, "children\\": 1, "choose": 2, "chrome": 5, "chunks": 2, "circular": 2, "cjs": 5, "cjs\\u003c/code\\u003e": 1, "cjs\\u003c/li\\u003e\\\\n\\u003cli\\u003eesm": 1, "clarify": 2, "clarity": 4, "class": 4, "class=\\\\\\": 430, "classes": 2, "clean": 6, "cleaned": 6, "cli": 17, "cli/dev": 2, "cli\\": 1, "click": 2, "clicked": 2, "clicks": 2, "client": 93, "client-data\\\\\\": 1, "client-only": 6, "client-q2ogymm2": 1, "client-route=1": 1, "client-route=1\\u003c/code\\u003e": 1, "client-side": 10, "client\\": 2, "client\\\\\\": 1, "client\\u003c/code\\u003e": 6, "client\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 2, "client\\u003c/li\\u003e\\\\n\\u003cli\\u003ereplacing": 1, "client\\u003c/li\\u003e\\\\n\\u003cli\\u003ethat": 1, "clientaction": 4, "clientaction\\": 1, "clientloader": 10, "clientloader-only": 1, "clientloader/clientaction": 1, "clientloader/clientaction/hydratefallback": 1, "clientloader/clientacton": 1, "clientloader\\": 1, "clientloaderfunctionargs/clientactionfunctionargs": 1, "close": 4, "closed": 4, "closely": 2, "cloudflare": 40, "cloudflare-proxy-as-a-vite-plugin\\\\\\": 1, "cloudflare/deno": 5, "cloudflare\\u003c/a\\u003e": 1, "cloudflaredevproxyviteplugin": 2, "code": 54, "code-split": 2, "code\\u003c/li\\u003e\\\\n\\u003cli\\u003eroutes": 2, "codeblock-line\\\\\\": 216, "codemod": 1, "codes": 2, "collection": 2, "color": 266, "colors": 2, "colorthemes": 2, "com/advisories/ghsa-pxg6-pf52-xh8x\\\\\\": 1, "com/brophdawg11/react-router-records\\\\\\": 1, "com/charca/astro-records\\\\\\": 1, "com/docs/web-platform/view-transitions/\\\\\\": 1, "com/jacob-ebey/turbo-stream\\\\\\": 1, "com/jshttp/cookie/blob/master/history": 1, "com/jshttp/cookie/blob/v0": 1, "com/nodejs/undici": 1, "com/nodejs/undici/security/advisories/ghsa-c76h-2ccp-4975\\\\\\": 1, "com/nodejs/undici\\\\\\": 2, "com/remix-run/react-router/blob/main/changelog": 1, "com/remix-run/react-router/blob/main/packages/router/changelog": 25, "com/remix-run/react-router/pull/10916\\\\\\": 1, "com/remix-run/react-router/pull/10960\\\\\\": 1, "com/remix-run/react-router/pull/10962\\\\\\": 1, "com/remix-run/react-router/pull/11883": 1, "com/remix-run/react-router/pull/11883\\\\\\": 1, "com/remix-run/react-router/pull/11883\\u003c/a\\u003e": 1, "com/remix-run/react-router/pull/11888": 1, "com/remix-run/react-router/pull/11888\\\\\\": 1, "com/remix-run/react-router/pull/11888\\u003c/a\\u003e": 1, "com/remix-run/react-router/releases/tag/react-router%406": 27, "com/remix-run/remix/blob/remix%402": 367, "com/remix-run/remix/commit/000457e0ae025d9b94e721af254c319e83438923\\\\\\": 1, "com/remix-run/remix/commit/8cd31d6543ef4c765220fc64dca9bcc9c61ee9eb\\\\\\": 1, "com/remix-run/remix/commit/a7cffe5733c8b7d0f29bd2d8606876c537d87101\\\\\\": 1, "com/remix-run/remix/commit/bdd04217713292307078a30dab9033926d48ede6\\\\\\": 1, "com/remix-run/remix/compare/remix@2": 42, "com/remix-run/remix/discussions/2891\\\\\\": 1, "com/remix-run/remix/discussions/7634\\\\\\": 1, "com/remix-run/remix/discussions/7638\\\\\\": 1, "com/remix-run/remix/discussions/7640\\\\\\": 1, "com/remix-run/remix/discussions/7698\\\\\\": 2, "com/remix-run/remix/discussions/8702\\\\\\": 1, "com/remix-run/remix/issues/1678\\\\\\": 1, "com/remix-run/remix/issues/1757\\\\\\": 1, "com/remix-run/remix/pull/10046\\\\\\": 1, "com/remix-run/remix/pull/10047\\\\\\": 1, "com/remix-run/remix/pull/10063\\\\\\": 1, "com/remix-run/remix/pull/10072\\\\\\": 1, "com/remix-run/remix/pull/10092\\\\\\": 1, "com/remix-run/remix/pull/10099\\\\\\": 1, "com/remix-run/remix/pull/10107\\\\\\": 1, "com/remix-run/remix/pull/10126\\\\\\": 1, "com/remix-run/remix/pull/10139\\\\\\": 1, "com/remix-run/remix/pull/10145\\\\\\": 1, "com/remix-run/remix/pull/10173\\\\\\": 1, "com/remix-run/remix/pull/10174\\\\\\": 1, "com/remix-run/remix/pull/10236\\\\\\": 1, "com/remix-run/remix/pull/10300\\\\\\": 1, "com/remix-run/remix/pull/10306\\\\\\": 1, "com/remix-run/remix/pull/10317\\\\\\": 1, "com/remix-run/remix/pull/10351\\\\\\": 1, "com/remix-run/remix/pull/10358\\\\\\": 1, "com/remix-run/remix/pull/10410\\\\\\": 1, "com/remix-run/remix/pull/10424\\\\\\": 1, "com/remix-run/remix/pull/10447\\\\\\": 1, "com/remix-run/remix/pull/10477\\\\\\": 1, "com/remix-run/remix/pull/10479\\\\\\": 1, "com/remix-run/remix/pull/10498\\\\\\": 1, "com/remix-run/remix/pull/10510\\\\\\": 1, "com/remix-run/remix/pull/10524\\\\\\": 1, "com/remix-run/remix/pull/10527\\\\\\": 1, "com/remix-run/remix/pull/10528\\\\\\": 1, "com/remix-run/remix/pull/10535\\\\\\": 1, "com/remix-run/remix/pull/10547\\\\\\": 1, "com/remix-run/remix/pull/10553\\\\\\": 1, "com/remix-run/remix/pull/10562\\\\\\": 1, "com/remix-run/remix/pull/10601\\\\\\": 1, "com/remix-run/remix/pull/10611\\\\\\": 1, "com/remix-run/remix/pull/10638\\\\\\": 1, "com/remix-run/remix/pull/10686\\\\\\": 1, "com/remix-run/remix/pull/10688\\\\\\": 1, "com/remix-run/remix/pull/6409\\\\\\": 1, "com/remix-run/remix/pull/6770\\\\\\": 1, "com/remix-run/remix/pull/6842\\\\\\": 1, "com/remix-run/remix/pull/6865\\\\\\": 1, "com/remix-run/remix/pull/6870\\\\\\": 1, "com/remix-run/remix/pull/6874\\\\\\": 1, "com/remix-run/remix/pull/6875\\\\\\": 1, "com/remix-run/remix/pull/6887\\\\\\": 1, "com/remix-run/remix/pull/6895\\\\\\": 1, "com/remix-run/remix/pull/6896\\\\\\": 1, "com/remix-run/remix/pull/6897\\\\\\": 1, "com/remix-run/remix/pull/6898\\\\\\": 1, "com/remix-run/remix/pull/6900\\\\\\": 1, "com/remix-run/remix/pull/6902\\\\\\": 1, "com/remix-run/remix/pull/6903\\\\\\": 1, "com/remix-run/remix/pull/6906\\\\\\": 1, "com/remix-run/remix/pull/6909\\\\\\": 1, "com/remix-run/remix/pull/6911\\\\\\": 1, "com/remix-run/remix/pull/6918\\\\\\": 1, "com/remix-run/remix/pull/6925\\\\\\": 1, "com/remix-run/remix/pull/6936\\\\\\": 1, "com/remix-run/remix/pull/6939\\\\\\": 1, "com/remix-run/remix/pull/6949\\\\\\": 1, "com/remix-run/remix/pull/6958\\\\\\": 2, "com/remix-run/remix/pull/6962\\\\\\": 2, "com/remix-run/remix/pull/6963\\\\\\": 1, "com/remix-run/remix/pull/6964\\\\\\": 1, "com/remix-run/remix/pull/6965\\\\\\": 1, "com/remix-run/remix/pull/6969\\\\\\": 1, "com/remix-run/remix/pull/6979\\\\\\": 1, "com/remix-run/remix/pull/6982\\\\\\": 1, "com/remix-run/remix/pull/7002\\\\\\": 1, "com/remix-run/remix/pull/7009\\\\\\": 1, "com/remix-run/remix/pull/7035\\\\\\": 1, "com/remix-run/remix/pull/7040\\\\\\": 1, "com/remix-run/remix/pull/7058\\\\\\": 1, "com/remix-run/remix/pull/7062\\\\\\": 1, "com/remix-run/remix/pull/7063\\\\\\": 1, "com/remix-run/remix/pull/7074\\\\\\": 1, "com/remix-run/remix/pull/7099\\\\\\": 1, "com/remix-run/remix/pull/7105\\\\\\": 1, "com/remix-run/remix/pull/7121\\\\\\": 1, "com/remix-run/remix/pull/7133\\\\\\": 1, "com/remix-run/remix/pull/7173\\\\\\": 1, "com/remix-run/remix/pull/7180\\\\\\": 1, "com/remix-run/remix/pull/7186\\\\\\": 1, "com/remix-run/remix/pull/7203\\\\\\": 1, "com/remix-run/remix/pull/7206\\\\\\": 1, "com/remix-run/remix/pull/7217\\\\\\": 1, "com/remix-run/remix/pull/7229\\\\\\": 1, "com/remix-run/remix/pull/7231\\\\\\": 1, "com/remix-run/remix/pull/7269\\\\\\": 2, "com/remix-run/remix/pull/7272\\\\\\": 1, "com/remix-run/remix/pull/7278\\\\\\": 2, "com/remix-run/remix/pull/7292\\\\\\": 1, "com/remix-run/remix/pull/7293\\\\\\": 1, "com/remix-run/remix/pull/7319\\\\\\": 1, "com/remix-run/remix/pull/7323\\\\\\": 1, "com/remix-run/remix/pull/7345\\\\\\": 1, "com/remix-run/remix/pull/7423\\\\\\": 1, "com/remix-run/remix/pull/7464\\\\\\": 1, "com/remix-run/remix/pull/7470\\\\\\": 1, "com/remix-run/remix/pull/7477\\\\\\": 1, "com/remix-run/remix/pull/7487\\\\\\": 1, "com/remix-run/remix/pull/7491\\\\\\": 1, "com/remix-run/remix/pull/7498\\\\\\": 1, "com/remix-run/remix/pull/7551\\\\\\": 1, "com/remix-run/remix/pull/7574\\\\\\": 1, "com/remix-run/remix/pull/7576\\\\\\": 1, "com/remix-run/remix/pull/7590\\\\\\": 1, "com/remix-run/remix/pull/7594\\\\\\": 1, "com/remix-run/remix/pull/7605\\\\\\": 1, "com/remix-run/remix/pull/7619\\\\\\": 1, "com/remix-run/remix/pull/7647\\\\\\": 1, "com/remix-run/remix/pull/7649\\\\\\": 1, "com/remix-run/remix/pull/7670\\\\\\": 1, "com/remix-run/remix/pull/7684\\\\\\": 1, "com/remix-run/remix/pull/7745\\\\\\": 1, "com/remix-run/remix/pull/7842\\\\\\": 1, "com/remix-run/remix/pull/7843\\\\\\": 1, "com/remix-run/remix/pull/7846\\\\\\": 1, "com/remix-run/remix/pull/7882\\\\\\": 1, "com/remix-run/remix/pull/7883\\\\\\": 1, "com/remix-run/remix/pull/7888\\\\\\": 1, "com/remix-run/remix/pull/7892\\\\\\": 1, "com/remix-run/remix/pull/7895\\\\\\": 1, "com/remix-run/remix/pull/7904\\\\\\": 1, "com/remix-run/remix/pull/7908\\\\\\": 1, "com/remix-run/remix/pull/7911\\\\\\": 1, "com/remix-run/remix/pull/7913\\\\\\": 1, "com/remix-run/remix/pull/7919\\\\\\": 2, "com/remix-run/remix/pull/7926\\\\\\": 1, "com/remix-run/remix/pull/7937\\\\\\": 1, "com/remix-run/remix/pull/7952\\\\\\": 1, "com/remix-run/remix/pull/7958\\\\\\": 1, "com/remix-run/remix/pull/7980\\\\\\": 1, "com/remix-run/remix/pull/7996\\\\\\": 1, "com/remix-run/remix/pull/8014\\\\\\": 1, "com/remix-run/remix/pull/8022\\\\\\": 1, "com/remix-run/remix/pull/8039\\\\\\": 1, "com/remix-run/remix/pull/8042\\\\\\": 1, "com/remix-run/remix/pull/8057\\\\\\": 1, "com/remix-run/remix/pull/8062\\\\\\": 1, "com/remix-run/remix/pull/8066\\\\\\": 2, "com/remix-run/remix/pull/8076\\\\\\": 2, "com/remix-run/remix/pull/8077\\\\\\": 1, "com/remix-run/remix/pull/8096\\\\\\": 1, "com/remix-run/remix/pull/8119\\\\\\": 1, "com/remix-run/remix/pull/8120\\\\\\": 1, "com/remix-run/remix/pull/8121\\\\\\": 1, "com/remix-run/remix/pull/8143\\\\\\": 1, "com/remix-run/remix/pull/8145\\\\\\": 3, "com/remix-run/remix/pull/8154\\\\\\": 1, "com/remix-run/remix/pull/8157\\\\\\": 1, "com/remix-run/remix/pull/8164\\\\\\": 1, "com/remix-run/remix/pull/8171\\\\\\": 1, "com/remix-run/remix/pull/8172\\\\\\": 1, "com/remix-run/remix/pull/8173\\\\\\": 2, "com/remix-run/remix/pull/8174\\\\\\": 1, "com/remix-run/remix/pull/8177\\\\\\": 1, "com/remix-run/remix/pull/8184\\\\\\": 1, "com/remix-run/remix/pull/8200\\\\\\": 2, "com/remix-run/remix/pull/8211\\\\\\": 1, "com/remix-run/remix/pull/8216\\\\\\": 1, "com/remix-run/remix/pull/8222\\\\\\": 1, "com/remix-run/remix/pull/8238\\\\\\": 1, "com/remix-run/remix/pull/8251\\\\\\": 1, "com/remix-run/remix/pull/8264\\\\\\": 1, "com/remix-run/remix/pull/8267\\\\\\": 1, "com/remix-run/remix/pull/8304\\\\\\": 1, "com/remix-run/remix/pull/8321\\\\\\": 1, "com/remix-run/remix/pull/8332\\\\\\": 2, "com/remix-run/remix/pull/8342\\\\\\": 1, "com/remix-run/remix/pull/8351\\\\\\": 1, "com/remix-run/remix/pull/8375\\\\\\": 1, "com/remix-run/remix/pull/8405\\\\\\": 1, "com/remix-run/remix/pull/8415\\\\\\": 1, "com/remix-run/remix/pull/8420\\\\\\": 1, "com/remix-run/remix/pull/8446\\\\\\": 1, "com/remix-run/remix/pull/8457\\\\\\": 1, "com/remix-run/remix/pull/8458\\\\\\": 1, "com/remix-run/remix/pull/8459\\\\\\": 1, "com/remix-run/remix/pull/8468\\\\\\": 1, "com/remix-run/remix/pull/8479\\\\\\": 1, "com/remix-run/remix/pull/8488\\\\\\": 1, "com/remix-run/remix/pull/8492\\\\\\": 1, "com/remix-run/remix/pull/8493\\\\\\": 1, "com/remix-run/remix/pull/8495\\\\\\": 1, "com/remix-run/remix/pull/8503\\\\\\": 1, "com/remix-run/remix/pull/8514\\\\\\": 1, "com/remix-run/remix/pull/8530\\\\\\": 1, "com/remix-run/remix/pull/8531\\\\\\": 2, "com/remix-run/remix/pull/8538\\\\\\": 1, "com/remix-run/remix/pull/8539\\\\\\": 1, "com/remix-run/remix/pull/8575\\\\\\": 2, "com/remix-run/remix/pull/8577\\\\\\": 1, "com/remix-run/remix/pull/8580\\\\\\": 1, "com/remix-run/remix/pull/8581\\\\\\": 1, "com/remix-run/remix/pull/8591\\\\\\": 1, "com/remix-run/remix/pull/8596\\\\\\": 2, "com/remix-run/remix/pull/8598\\\\\\": 1, "com/remix-run/remix/pull/8599\\\\\\": 2, "com/remix-run/remix/pull/8613\\\\\\": 1, "com/remix-run/remix/pull/8620\\\\\\": 1, "com/remix-run/remix/pull/8624\\\\\\": 1, "com/remix-run/remix/pull/8627\\\\\\": 1, "com/remix-run/remix/pull/8636\\\\\\": 1, "com/remix-run/remix/pull/8649\\\\\\": 1, "com/remix-run/remix/pull/8654\\\\\\": 1, "com/remix-run/remix/pull/8684\\\\\\": 1, "com/remix-run/remix/pull/8690\\\\\\": 1, "com/remix-run/remix/pull/8692\\\\\\": 1, "com/remix-run/remix/pull/8701\\\\\\": 1, "com/remix-run/remix/pull/8709\\\\\\": 1, "com/remix-run/remix/pull/8711\\\\\\": 1, "com/remix-run/remix/pull/8713\\\\\\": 1, "com/remix-run/remix/pull/8720\\\\\\": 1, "com/remix-run/remix/pull/8723\\\\\\": 1, "com/remix-run/remix/pull/8725\\\\\\": 1, "com/remix-run/remix/pull/8726\\\\\\": 1, "com/remix-run/remix/pull/8740\\\\\\": 1, "com/remix-run/remix/pull/8745\\\\\\": 1, "com/remix-run/remix/pull/8747\\\\\\": 1, "com/remix-run/remix/pull/8749\\\\\\": 1, "com/remix-run/remix/pull/8752\\\\\\": 1, "com/remix-run/remix/pull/8773\\\\\\": 1, "com/remix-run/remix/pull/8795\\\\\\": 1, "com/remix-run/remix/pull/8796\\\\\\": 1, "com/remix-run/remix/pull/8797\\\\\\": 1, "com/remix-run/remix/pull/8806\\\\\\": 1, "com/remix-run/remix/pull/8819\\\\\\": 1, "com/remix-run/remix/pull/8829\\\\\\": 1, "com/remix-run/remix/pull/8842\\\\\\": 1, "com/remix-run/remix/pull/8843\\\\\\": 1, "com/remix-run/remix/pull/8848\\\\\\": 1, "com/remix-run/remix/pull/8859\\\\\\": 1, "com/remix-run/remix/pull/8864\\\\\\": 1, "com/remix-run/remix/pull/8885\\\\\\": 1, "com/remix-run/remix/pull/8892\\\\\\": 1, "com/remix-run/remix/pull/8897\\\\\\": 1, "com/remix-run/remix/pull/8910\\\\\\": 1, "com/remix-run/remix/pull/8916\\\\\\": 1, "com/remix-run/remix/pull/8932\\\\\\": 1, "com/remix-run/remix/pull/8939\\\\\\": 1, "com/remix-run/remix/pull/8965\\\\\\": 1, "com/remix-run/remix/pull/8966\\\\\\": 1, "com/remix-run/remix/pull/8969\\\\\\": 1, "com/remix-run/remix/pull/8970\\\\\\": 1, "com/remix-run/remix/pull/9026\\\\\\": 1, "com/remix-run/remix/pull/9063\\\\\\": 1, "com/remix-run/remix/pull/9073\\\\\\": 1, "com/remix-run/remix/pull/9084\\\\\\": 1, "com/remix-run/remix/pull/9104\\\\\\": 1, "com/remix-run/remix/pull/9106\\\\\\": 1, "com/remix-run/remix/pull/9111\\\\\\": 1, "com/remix-run/remix/pull/9142\\\\\\": 1, "com/remix-run/remix/pull/9176\\\\\\": 1, "com/remix-run/remix/pull/9184\\\\\\": 1, "com/remix-run/remix/pull/9194\\\\\\": 1, "com/remix-run/remix/pull/9198\\\\\\": 1, "com/remix-run/remix/pull/9241\\\\\\": 1, "com/remix-run/remix/pull/9272\\\\\\": 1, "com/remix-run/remix/pull/9287\\\\\\": 1, "com/remix-run/remix/pull/9299\\\\\\": 1, "com/remix-run/remix/pull/9301\\\\\\": 1, "com/remix-run/remix/pull/9305\\\\\\": 1, "com/remix-run/remix/pull/9322\\\\\\": 1, "com/remix-run/remix/pull/9349\\\\\\": 2, "com/remix-run/remix/pull/9364\\\\\\": 1, "com/remix-run/remix/pull/9369\\\\\\": 1, "com/remix-run/remix/pull/9372\\\\\\": 1, "com/remix-run/remix/pull/9395\\\\\\": 1, "com/remix-run/remix/pull/9488\\\\\\": 2, "com/remix-run/remix/pull/9501\\\\\\": 1, "com/remix-run/remix/pull/9562\\\\\\": 1, "com/remix-run/remix/pull/9564\\\\\\": 1, "com/remix-run/remix/pull/9566\\\\\\": 1, "com/remix-run/remix/pull/9580\\\\\\": 1, "com/remix-run/remix/pull/9584\\\\\\": 1, "com/remix-run/remix/pull/9600\\\\\\": 1, "com/remix-run/remix/pull/9619\\\\\\": 1, "com/remix-run/remix/pull/9664\\\\\\": 1, "com/remix-run/remix/pull/9665\\\\\\": 1, "com/remix-run/remix/pull/9686\\\\\\": 1, "com/remix-run/remix/pull/9693\\\\\\": 1, "com/remix-run/remix/pull/9695\\\\\\": 1, "com/remix-run/remix/pull/9700\\\\\\": 1, "com/remix-run/remix/pull/9706\\\\\\": 1, "com/remix-run/remix/pull/9738\\\\\\": 1, "com/remix-run/remix/pull/9763\\\\\\": 1, "com/remix-run/remix/pull/9764\\\\\\": 1, "com/remix-run/remix/pull/9769\\\\\\": 2, "com/remix-run/remix/pull/9792\\\\\\": 1, "com/remix-run/remix/pull/9796\\\\\\": 1, "com/remix-run/remix/pull/9848\\\\\\": 1, "com/remix-run/remix/pull/9856\\\\\\": 1, "com/remix-run/remix/pull/9860\\\\\\": 2, "com/remix-run/remix/pull/9888\\\\\\": 1, "com/remix-run/remix/pull/9889\\\\\\": 1, "com/remix-run/remix/pull/9890\\\\\\": 1, "com/remix-run/remix/pull/9893\\\\\\": 1, "com/remix-run/remix/pull/9899\\\\\\": 1, "com/remix-run/remix/pull/9901\\\\\\": 1, "com/remix-run/remix/pull/9910\\\\\\": 1, "com/remix-run/remix/pull/9917\\\\\\": 1, "com/remix-run/remix/pull/9921\\\\\\": 1, "com/remix-run/remix/pull/9938\\\\\\": 1, "com/remix-run/remix/pull/9941\\\\\\": 1, "com/remix-run/remix/pull/9955\\\\\\": 1, "com/remix-run/remix/pull/9973\\\\\\": 1, "com/remix-run/remix/pull/9976\\\\\\": 1, "com/remix-run/remix/pull/9980\\\\\\": 1, "com/remix-run/remix/pull/9982\\\\\\": 1, "com/remix-run/remix/pull/9999\\\\\\": 1, "com/remix-run/remix/releases\\\\\\": 1, "com/remix-run/web-std-io/releases/tag/%40remix-run%2fweb-fetch%404": 2, "com/remix-run/web-std-io/releases/tag/%40remix-run%2fweb-file%403": 1, "com/remix-run/web-std-io/releases/tag/%40remix-run%2fweb-stream%401": 1, "com/remix-run/web-std-io\\\\\\": 2, "com/remix_run/status/1841926034868077009\\\\\\": 1, "com/v6/hooks/use-blocker\\\\\\": 1, "com/v6/routers/create-browser-router#basename\\\\\\": 2, "com/vitejs/vite-plugin-react-swc/blob/main/src/index": 1, "com/watch": 1, "come": 8, "command": 4, "commands": 6, "commit": 2, "common": 6, "community": 8, "community\\": 1, "community\\u003c/a\\u003e": 1, "compared": 2, "comparison": 2, "compatibility": 6, "compatible": 4, "compilation": 4, "compile": 2, "compiled": 4, "compiler": 18, "compileroptions": 2, "compiling": 2, "complain": 2, "complete": 2, "completed": 2, "completely": 2, "completes": 4, "completion": 2, "complex": 2, "compliance": 1, "compliance\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e⚠️": 1, "component": 32, "component/errorboundary": 1, "component/errorboundary/hydratefallback": 1, "component\\": 1, "components": 9, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "comprehensive": 2, "compression": 2, "concept": 2, "concerned": 2, "concise": 1, "concise\\u003c/em\\u003e": 1, "concurrency": 3, "condition": 2, "conditions": 2, "confident": 6, "config": 66, "config-based": 3, "config\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "configuration": 2, "configuration\\": 1, "configurations": 2, "configure": 2, "configured": 2, "confirm": 1, "confirm\\u003c/code\\u003e": 1, "conflict": 4, "confused": 2, "confusing": 4, "consistent/correct": 2, "console": 9, "const": 8, "constitute": 2, "constraints": 2, "constraints\\": 1, "construct": 2, "consume": 2, "consumers": 12, "contain": 2, "containing": 2, "content": 8, "contents": 6, "context": 10, "continue": 2, "contributing": 3, "contributing\\": 1, "contributors": 4, "control": 6, "controller": 2, "convenient": 2, "convention": 5, "convention\\u003c/li\\u003e\\\\n\\u003cli\\u003ewe": 1, "conventions": 2, "conventions\\": 1, "convert": 2, "converted": 2, "cookie": 3, "cookies\\": 1, "copies": 2, "copy": 1, "copying": 2, "correct": 4, "correctly": 16, "could": 16, "counterparts": 2, "cover": 2, "cpuprofile": 1, "cpuprofile\\u003c/code\\u003e": 1, "crashing": 2, "create": 4, "create-react-router": 1, "create-remix": 41, "create-remix@latest": 3, "createapp": 1, "createcloudflarekvsessionstorage": 1, "created": 5, "created\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "createremixstub": 6, "createremixstub\\": 1, "createrequesthandler": 5, "creates": 2, "createserver": 5, "creating": 1, "critical": 4, "cross-fade": 2, "crypto": 2, "css": 39, "css\\": 1, "css\\\\\\": 2, "current": 8, "currently": 2, "custom": 36, "customized": 2, "cuts": 2, "d=c": 2, "data": 75, "data-code-block=\\\\\\": 25, "data-lang=\\\\\\": 50, "data-line-number=\\\\\\": 215, "data-line-numbers=\\\\\\": 50, "data-nonumber=\\\\\\": 2, "data=": 1, "data\\": 2, "data\\\\\\": 2, "data\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e❌": 1, "data\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "data\\u003c/code\\u003e": 4, "data\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003efetchers": 1, "data\\u003c/code\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ethere": 1, "data\\u003c/h4\\u003e\\\\n\\u003cp\\u003ewe": 1, "data\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eone": 1, "datafunctionargs": 1, "datastrategy": 2, "date": 46, "de-optimization": 2, "dead-code": 2, "declare": 1, "decouple": 3, "dedicated": 2, "deduplicate": 1, "deeply": 2, "default": 67, "defaulted": 2, "defaults": 1, "defaultshouldrevalidate": 1, "defer": 6, "defer/json/redirect/redirectdocument": 1, "defer\\": 1, "deferred": 1, "defineaction": 3, "defineclientaction": 3, "defineclientloader": 3, "defineconfig": 22, "defined": 5, "defined\\u003c/code\\u003e": 1, "defineloader": 5, "defineloader/defineaction": 1, "defines": 2, "defining": 2, "delegate": 2, "demo": 2, "deno": 3, "dependencies": 67, "dependencies\\": 1, "dependencies\\\\n\\\\n-": 1, "dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 3, "dependencies\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 23, "dependencies\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 26, "dependencieschanges": 46, "dependenciesv2": 6, "dependency": 29, "depending": 4, "deploy": 2, "deployed": 2, "deployment": 4, "deployment\\": 2, "deprecate": 4, "deprecated": 2, "deprecation": 20, "description\\": 1, "design": 2, "designed": 6, "dest": 2, "destination": 2, "detail": 4, "details": 8, "detect": 5, "detection": 2, "determine": 6, "dev": 73, "dev-only": 2, "dev/\\\\\\": 1, "dev/blog/2022/03/08/react-18-upgrade-guide\\\\\\": 1, "dev/config/build-options": 3, "dev/guide/build": 1, "dev/guide/static-deploy": 1, "dev\\\\\\": 4, "dev\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003ebuilding": 1, "dev\\u003c/code\\u003e": 4, "devdependencies": 1, "development": 22, "development\\\\\\": 1, "development\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003echanged": 1, "development\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eother": 1, "devserverbroadcastdelay": 1, "devserverport": 1, "dev|express|serve": 2, "did": 4, "didn": 2, "diff\\\\\\": 22, "differences": 4, "different": 8, "differentiate": 2, "differs": 6, "direct": 4, "directing": 2, "directives": 2, "directly": 6, "directories": 9, "directories\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eif": 1, "directory": 33, "directory\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "directory\\u003c/li\\u003e\\\\n\\u003cli\\u003esince": 1, "directory\\u003c/li\\u003e\\\\n\\u003cli\\u003ethis": 1, "disable": 7, "disabled": 2, "disabling": 3, "discordreact": 1, "discover": 3, "discover\\\\\\": 1, "discovered": 2, "discovery": 24, "discovery\\": 1, "discussion": 5, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "disk": 6, "dist": 1, "dist/client": 1, "dist/client\\\\\\": 1, "dist/server": 1, "dist/server\\\\\\": 1, "dist\\\\\\": 1, "do": 11, "doc\\": 1, "docs": 27, "docs\\u003c/a\\u003e": 7, "docs\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch4": 1, "docs\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "docsblogresourcesreact": 1, "docschangelog": 1, "docsdocsblogresourcesview": 1, "doctype": 3, "document": 23, "documentation": 4, "documentation\\u003c/a\\u003e": 1, "documentation\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "documentation\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "does": 13, "doesn": 2, "doing": 2, "dom": 10, "don": 24, "done": 3, "down": 4, "download": 2, "drop": 5, "dropdown": 2, "due": 8, "duplicated": 2, "duplicates": 1, "duplicates\\u003c/li\\u003e\\\\n\\u003cli\\u003eour": 1, "duplication": 2, "during": 22, "dynamic": 2, "dynamically": 2, "e--": 1, "e=0": 1, "each": 8, "eager": 4, "early": 6, "ease": 4, "easier": 6, "easily": 4, "easy": 2, "edge": 2, "edge-case": 2, "element": 3, "element/errorelement": 1, "element\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003efix": 1, "eliminated": 2, "elimination": 2, "else": 2, "elsewhere": 3, "elsewhere\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch4": 1, "emit": 1, "empty": 8, "emulate": 1, "enable": 22, "enabled": 25, "enabled\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003ch4": 1, "enables": 4, "enabling": 3, "encode": 4, "encountered": 2, "endpoint": 2, "enforce": 1, "enforces": 2, "enhanced": 2, "enhancement": 2, "enhancement\\": 1, "enough": 4, "enqueue": 1, "ensure": 20, "ensures": 4, "ensuring": 4, "enter": 1, "enter\\u003c/code\\u003e": 1, "entirely": 2, "entries": 1, "entries\\u003c/code\\u003e": 1, "entry": 27, "env": 10, "env\\u003c/code\\u003e": 2, "environment": 4, "environment\\u003c/li\\u003e\\\\n\\u003cli\\u003ebecause": 1, "ephemeral": 2, "equivalent": 2, "ergonomic": 2, "error": 51, "errorboundary": 6, "errorboundary\\": 1, "errorresponse": 2, "errors": 34, "errors\\": 1, "esbuild": 2, "eslint": 2, "esm": 8, "etc": 6, "evaluating": 2, "even": 4, "event": 6, "eventual": 2, "ever": 4, "ever-growing": 2, "every": 3, "everything": 3, "exactly": 2, "example": 12, "examples": 2, "examples\\u003c/li\\u003e\\\\n\\u003cli\\u003ethis": 1, "excited": 8, "exclude": 4, "excluded": 4, "excludes": 2, "execute": 2, "execution": 6, "execution\\": 1, "exist": 8, "existing": 6, "exists": 4, "exists\\u003c/code\\u003e": 2, "expects": 2, "expensive": 2, "experience": 4, "experienced": 2, "experimental": 4, "explanation": 2, "explanation\\": 1, "explicit": 2, "explicitly": 12, "export": 53, "export\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "export\\u003c/h4\\u003e\\\\n\\u003cp\\u003ewe": 1, "exported": 8, "exports": 30, "exports\\u003c/li\\u003e\\\\n\\u003cli\\u003edisable": 1, "expose": 2, "exposed": 6, "express": 7, "extending": 2, "extension": 4, "external": 5, "external\\u003c/code\\u003e": 1, "externalconditions": 3, "externalconditions\\u003c/code\\u003e": 1, "externally-accessed": 2, "extract": 2, "extract\\": 1, "eye": 4, "f=a": 1, "fact": 2, "fail": 6, "failing": 6, "fails": 2, "false": 16, "false-positive": 2, "false\\\\\\": 2, "false\\u003c/code\\u003e": 1, "faqs": 2, "faqs\\": 1, "far": 2, "fast": 8, "favor": 32, "feature": 15, "feature\\u003c/strong\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ethe": 1, "features": 9, "features\\": 1, "features\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "features\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003enew": 1, "featuresother": 2, "fetch": 157, "fetch\\": 1, "fetch\\u003c/a\\u003e": 3, "fetch\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "fetch\\u003c/h4\\u003e\\\\n\\u003cp\\u003ein": 1, "fetch\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003ethe": 1, "fetch\\u003c/li\\u003e\\\\n\\u003cli\\u003eif": 1, "fetcher": 42, "fetcher\\": 1, "fetcherkey": 2, "fetcherkey=": 1, "fetcherkey=\\\\\\": 1, "fetchers": 10, "fetches": 2, "few": 10, "fg/bg": 2, "field": 7, "field\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e": 1, "fields": 4, "file": 59, "file-convention": 2, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 58, "files\\": 1, "files\\u003c/strong\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003evite": 1, "files\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eto": 1, "fileurltopath": 1, "final": 4, "fine-grained": 2, "finishes": 2, "first": 8, "first-class": 2, "firstchild": 2, "fix": 116, "fixed": 2, "fixed\\\\\\": 1, "fixes": 9, "fixes\\\\\\": 1, "flag": 72, "flag/console": 2, "flag\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "flag\\u003c/h4\\u003e\\\\n\\u003cp\\u003eper": 1, "flags": 17, "flags\\": 1, "flags\\u003c/a\\u003e": 1, "flags\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "flags\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethe": 1, "flash": 6, "flat": 2, "flat-file": 2, "flatroutes": 2, "flattened": 2, "flow": 2, "flow\\": 1, "flush": 4, "flushed": 2, "flushsync": 4, "flushsync\\u003c/code\\u003e": 1, "focus/scroll": 2, "fog": 20, "folder": 4, "folders": 2, "followed": 2, "following": 8, "for": 336, "fork": 4, "fork\\u003c/a\\u003e": 2, "form": 18, "form\\": 1, "form\\u003e\\u003c/code\\u003e": 2, "format": 2, "formmethod": 1, "forward": 4, "fouc": 4, "found": 11, "framework": 2, "framework-agnostic": 2, "frequently": 1, "fresh": 2, "from": 217, "front": 4, "frontend": 2, "frontend\\": 1, "fs": 4, "fs-extra": 1, "full": 51, "fullstack": 4, "function": 21, "functionality": 6, "functioning": 2, "functions": 16, "functions\\u003c/a\\u003e": 1, "functions\\u003c/li\\u003e\\\\n\\u003cli\\u003ethe": 1, "future": 94, "future-flag-for-automatic-dependency-optimization-unstable\\\\\\": 1, "future/*": 1, "future\u003e": 1, "future\\u003c/code\\u003e": 1, "future\\u003e\\u003c/code\\u003e": 1, "futureconfig": 1, "futurev3_relativesplatpath\\\\\\": 1, "garbage": 2, "gather": 2, "general": 2, "generate": 8, "generated": 6, "generating": 2, "generation": 6, "generic": 2, "generics": 2, "get": 27, "get\\\\\\": 1, "getbindingsproxy": 2, "getdependenciestobundle": 2, "getelementbyid": 2, "getitem": 1, "getloadcontext": 3, "getplatformproxy": 2, "getrandomvalues": 1, "getrandomvalues\\u003c/code\\u003e": 1, "getremixdevloadcontext": 2, "gets": 2, "getting": 2, "github": 7, "githubchat": 1, "give": 2, "gives": 2, "giving": 2, "global": 4, "globals": 3, "globals/browsernodebuiltinspolyfill": 1, "globals\\u003c/code\\u003e": 1, "globals\\u003c/code\\u003e/\\u003ccode\\u003ebrowsernodebuiltinspolyfill": 1, "go": 2, "goal": 6, "going": 2, "good": 2, "google": 2, "gotchas": 2, "gotchas\\": 1, "granular": 6, "guarantee": 2, "guaranteeing": 2, "guidance": 2, "guide": 9, "guide\\": 1, "guide\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003enode": 1, "guide\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "guides": 3, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "h3\\": 1, "had": 16, "handful": 2, "handle": 30, "handle\\": 1, "handle\\\\\\": 1, "handle\\u003c/code\\u003e": 2, "handleclick": 1, "handled": 2, "handledatarequest": 1, "handleerror": 1, "handler": 7, "handler\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e": 1, "handlers": 12, "handles": 4, "handling": 4, "handling\\": 2, "hang": 2, "happen": 2, "happening": 2, "happens": 2, "happy": 2, "hard": 4, "has": 30, "hascontent\\": 1, "have": 32, "having": 6, "head\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "header": 8, "header-related": 2, "headers": 31, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "heavy": 2, "help": 5, "helper": 6, "helpers": 4, "helping": 2, "here": 5, "high-contrast": 2, "high-level": 2, "history": 8, "hit": 2, "hmr": 15, "hmr+hdr": 2, "hmr/hdr": 2, "hold": 2, "hood": 4, "hook": 14, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "hop": 2, "hope": 4, "host": 3, "host\\": 1, "hosting": 2, "hostname": 1, "hostname\\u003c/code\\u003e": 1, "hot": 4, "hot\\u003c/code\\u003e": 1, "how": 15, "however": 3, "href=\\\\\\": 1315, "html": 3, "html#build-sourcemap": 1, "html#build-sourcemap\\\\\\": 1, "html#build-sourcemap\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "html#deploying-a-static-site\\\\\\": 1, "html#public-base-path\\\\\\": 1, "html\u003e": 1, "html\\": 1, "html\\u003c/code\\u003e": 2, "html\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "html\\u003e\\u003c/code\\u003e": 1, "http": 9, "http-server": 3, "https": 919, "hydrate": 1, "hydrate\\u003c/code\\u003e": 1, "hydratefallback": 8, "hydratefallback\\": 1, "hydrating": 4, "hydration": 18, "hyphens": 2, "icon": 210, "icon-link\\\\\\": 210, "id": 3, "id=\\\\\\": 210, "idea": 4, "ideal": 2, "identifier": 2, "identity": 2, "idle": 3, "ids": 2, "if": 83, "ignore": 2, "illegible": 2, "image-expand": 2, "imagelink": 1, "imagesrcset/imagesizes": 1, "img": 1, "immediately": 4, "immutable": 1, "impact": 4, "imperative": 2, "implement": 4, "implementation": 10, "import": 53, "import\\\\\\": 1, "important": 2, "imported": 2, "imports": 29, "imports\\": 2, "imports\\u003c/li\\u003e\\\\n\\u003cli\\u003ea": 1, "improve": 7, "improved": 4, "improved-single-fetch-type-safety-unstable\\\\\\": 1, "improving": 2, "in": 419, "in-flight": 4, "in-flight\\u003c/em\\u003e": 1, "in-line": 2, "inadequate": 2, "inadvertently": 4, "inc": 1, "include": 18, "include\\u003c/code\\u003e": 2, "included": 2, "includes": 2, "inconsistencies": 2, "incorporated": 2, "incorrect": 4, "incorrectly": 8, "incremental": 2, "incrementally": 2, "index": 5, "indication": 2, "indirection": 2, "infer": 2, "inference": 2, "infinite": 2, "info": 2, "information": 32, "inherit": 4, "init": 5, "init\\u003c/code\\u003e": 1, "initial": 8, "initialize": 2, "initially": 2, "injected": 2, "inline": 3, "inline-css": 1, "inline-css\\u003c/code\\u003e": 1, "inline\\u003c/code\\u003e": 1, "insertbefore": 1, "inside": 8, "install": 4, "installation": 2, "installglobals": 9, "instance": 2, "instanceof": 2, "instances": 2, "instead": 53, "instead\\u003c/li\\u003e\\\\n\\u003cli\\u003ethis": 1, "instructions": 2, "instructs": 2, "integrate": 1, "integrating": 1, "integration": 2, "integrations": 2, "intended": 6, "interact": 2, "interactions": 3, "interface": 6, "internal": 10, "internally": 5, "internally\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003esingle": 1, "interop": 5, "interop\\u003c/li\\u003e\\\\n\\u003cli\\u003ecloudflare": 1, "interrupted": 2, "into": 64, "introduce": 2, "introduced": 10, "introduces": 2, "introducing": 2, "introduction": 1, "invalidating": 2, "invoking": 1, "involve": 2, "io/cli/pack\\\\\\": 1, "is": 187, "isauthenticatedroute": 2, "isbot": 1, "isbot@3": 2, "isbot@4": 3, "isbot\\\\\\": 1, "isdatetype": 3, "isn": 2, "isolate": 4, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 2, "issue": 22, "issues": 19, "issues\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003einstead": 1, "istransitioning": 2, "istypescript": 1, "it": 94, "iterative": 1, "its": 2, "javascript": 6, "javascript\\": 1, "javascript\\\\\\": 4, "joining": 2, "js": 20, "js\\": 1, "js\\\\\\": 2, "js\\u003c/code\\u003e": 2, "js\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003enode": 1, "js\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003erenamed": 1, "js\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "json": 30, "json/defer": 3, "json/defer/redirect": 1, "json\\": 1, "json\\u003c/code\\u003e": 11, "json\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003einstead": 1, "json\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ewhile": 1, "jsx": 3, "jsx\\\\\\": 4, "jsx\\u003c/code\\u003e": 1, "just": 14, "keep": 5, "keeping": 2, "keeps": 2, "key": 14, "keys": 2, "kicking": 2, "know": 1, "knowing": 2, "lack": 2, "land": 2, "language-sh\\\\\\": 4, "languages": 2, "large": 6, "last": 5, "last\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003ehowever": 1, "later": 2, "latest": 9, "layer": 4, "layout": 10, "layout/app": 2, "layout/errorboundary": 1, "layoutcomponent": 1, "lazy": 19, "lazy-route-discovery-aka-fog-of-war\\\\\\": 1, "lazy\\u003c/code\\u003e": 3, "leak": 2, "leaking": 4, "leaner": 1, "leaner\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "learning": 1, "least": 2, "leftover": 2, "legacycssimports": 1, "less": 2, "let": 10, "leverage": 4, "leverages": 4, "leveraging": 2, "levers": 2, "licensed": 1, "lift": 2, "like": 16, "likely": 2, "limitation": 2, "limitations": 2, "limited": 2, "link": 8, "link\\": 1, "link\\u003e\\u003c/code\\u003e": 2, "links": 12, "links/forms": 2, "links\\": 2, "links\\u003e\\u003c/code\\u003e": 1, "list": 10, "lists": 4, "livereload": 15, "livereload\\": 1, "ll": 8, "load": 16, "load/fetcher": 1, "load\\u003c/code\\u003e": 2, "load\\u003c/code\\u003e/\\u003ccode\\u003efetcher": 1, "loaded": 2, "loader": 19, "loader/action": 2, "loader\\": 1, "loaderargs/actionargs": 1, "loaderdata\\": 1, "loaderfunctionargs": 1, "loaderfunctionargs/actionfunctionargs": 2, "loaders": 12, "loaders/actions": 4, "loading": 11, "loading\\": 1, "loading\\\\\\": 1, "local": 7, "localhost\\": 1, "located": 2, "location": 3, "locations": 2, "log": 7, "logged": 2, "logging": 2, "logic": 6, "long": 2, "long-standing": 2, "longer": 42, "look": 4, "looked": 2, "looks": 2, "loop": 3, "loop\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e": 1, "loop\\u003c/li\\u003e\\\\n\\u003cli\\u003ereact": 1, "loop\\u003c/li\\u003e\\\\n\\u003cli\\u003eso": 1, "looping": 4, "loops": 2, "loosen": 2, "lots": 1, "made": 8, "magic": 4, "main": 6, "maintaining": 2, "maintenance": 2, "major": 4, "majority": 2, "make": 6, "makes": 9, "making": 2, "manage": 8, "managed": 2, "management": 4, "management\\": 2, "manager": 2, "managing": 2, "manifest": 37, "manifest\\u003c/code\\u003e": 2, "manifests": 6, "manipulation": 2, "manual": 8, "manually": 8, "many": 2, "map": 11, "maps": 2, "mark": 2, "markdownlint-disable": 1, "marked": 2, "match": 2, "matches": 8, "math": 1, "may": 14, "md": 2, "md#050--2022-04-11\\\\\\": 1, "md#060--2023-11-06\\\\\\": 1, "md#1100\\\\\\": 1, "md#1110\\\\\\": 1, "md#1120\\\\\\": 1, "md#1130\\\\\\": 1, "md#1140\\\\\\": 1, "md#1141\\\\\\": 1, "md#1142\\\\\\": 1, "md#1150\\\\\\": 1, "md#1151\\\\\\": 1, "md#1152\\\\\\": 1, "md#1153\\\\\\": 1, "md#1160\\\\\\": 1, "md#1161\\\\\\": 1, "md#1171\\\\\\": 1, "md#117\\\\\\": 1, "md#1180\\\\\\": 1, "md#1190\\\\\\": 1, "md#1191\\\\\\": 1, "md#1192\\\\\\": 1, "md#1200\\\\\\": 1, "md#1210\\\\\\": 1, "md#1220\\\\\\": 1, "md#1230\\\\\\": 1, "md#190\\\\\\": 1, "md#1xy": 1, "md#200\\\\\\": 15, "md#201\\\\\\": 4, "md#2100\\\\\\": 15, "md#2101\\\\\\": 15, "md#2102\\\\\\": 15, "md#2103\\\\\\": 15, "md#210\\\\\\": 15, "md#2110\\\\\\": 15, "md#2111\\\\\\": 1, "md#2112\\\\\\": 2, "md#2120\\\\\\": 3, "md#2121\\\\\\": 5, "md#2130\\\\\\": 15, "md#2140\\\\\\": 18, "md#2170\\\\\\": 1, "md#220\\\\\\": 15, "md#230\\\\\\": 15, "md#231\\\\\\": 15, "md#240\\\\\\": 15, "md#241\\\\\\": 15, "md#250\\\\\\": 15, "md#251\\\\\\": 15, "md#260\\\\\\": 15, "md#270\\\\\\": 15, "md#280\\\\\\": 15, "md#281\\\\\\": 15, "md#290\\\\\\": 15, "md#291\\\\\\": 2, "md#292\\\\\\": 13, "md#2xy": 18, "md#futurev7_relativesplatpath\\\\\\": 1, "md\\": 152, "md\\u003c/code\\u003e": 1, "mdgetting": 1, "mdx": 17, "mdx\\": 1, "mdx\\u003c/code\\u003e": 1, "mdx\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "means": 10, "memory": 4, "menu\\": 1, "merged": 4, "merging": 2, "message": 2, "messages": 6, "meta": 11, "meta/links": 1, "meta\\": 2, "meta\\u003e\\u003c/code\\u003e/\\u003ccode\\u003e\\u0026#x3c": 1, "metaargs": 3, "metaargs_singlefetch": 1, "metadescriptor": 1, "metafunction": 1, "metamatch": 2, "metamatches": 1, "method": 4, "method=": 2, "method=\\\\\\": 2, "metrics": 2, "michael": 2, "middleware": 9, "middlewaremode": 2, "might": 2, "migrate": 4, "migrating": 8, "migration": 9, "minimal": 8, "minimize": 2, "minimum": 2, "minor": 36, "minor-changes-10\\": 1, "minor-changes-10\\\\\\": 1, "minor-changes-11\\": 1, "minor-changes-11\\\\\\": 1, "minor-changes-12\\": 1, "minor-changes-12\\\\\\": 1, "minor-changes-13\\": 1, "minor-changes-13\\\\\\": 1, "minor-changes-14\\": 1, "minor-changes-14\\\\\\": 1, "minor-changes-15\\": 1, "minor-changes-15\\\\\\": 1, "minor-changes-1\\": 1, "minor-changes-1\\\\\\": 1, "minor-changes-2\\": 1, "minor-changes-2\\\\\\": 1, "minor-changes-3\\": 1, "minor-changes-3\\\\\\": 1, "minor-changes-4\\": 1, "minor-changes-4\\\\\\": 1, "minor-changes-5\\": 1, "minor-changes-5\\\\\\": 1, "minor-changes-6\\": 1, "minor-changes-6\\\\\\": 1, "minor-changes-7\\": 1, "minor-changes-7\\\\\\": 1, "minor-changes-8\\": 1, "minor-changes-8\\\\\\": 1, "minor-changes-9\\": 1, "minor-changes-9\\\\\\": 1, "minor-changes\\": 1, "minor-changes\\\\\\": 1, "mismatch": 8, "mismatches": 4, "mismatching": 2, "missing": 2, "misused": 2, "mitedit": 1, "mixture": 2, "mode": 52, "mode\\": 1, "mode\\\\\\": 2, "mode\\u003c/a\\u003e": 1, "mode\\u003c/code\\u003e": 1, "modes": 2, "modify": 4, "module": 26, "module\\": 1, "module\\u003c/li\\u003e\\\\n\\u003cli\\u003ethe": 1, "moduleaction": 2, "modulepreload": 3, "modules": 42, "modules\\": 3, "modules\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "modules\\u003c/li\\u003e\\\\n\\u003cli\\u003ereplace": 1, "moment": 2, "monorepos": 2, "months": 2, "more": 61, "more\\u003c/li\\u003e\\\\n\\u003cli\\u003eyou": 1, "most": 12, "mostly": 1, "mounted": 3, "mounted\\u003c/em\\u003e": 1, "move": 4, "moved": 2, "moving": 10, "mozilla": 3, "much": 5, "multiple": 12, "must": 24, "mutate": 4, "mutating": 2, "my-key": 2, "my-key\\\\\\": 2, "myapp": 1, "naked": 3, "name": 10, "named": 14, "names": 4, "namespace": 2, "naming": 2, "naming\\": 1, "native": 4, "nativefetch": 6, "navigate": 6, "navigate/fetcherkey": 2, "navigate=": 2, "navigates": 2, "navigating": 2, "navigation": 4, "navigational": 4, "navigations": 12, "navlink": 3, "navlink\\": 1, "nd": 2, "necessary": 2, "need": 39, "needed": 2, "needs": 4, "nested": 10, "netlify": 2, "network": 5, "never": 2, "new": 95, "new-features\\": 1, "new-features\\\\\\": 1, "new-fetcher-apis\\\\\\": 1, "new-layout-export\\\\\\": 1, "new\\": 1, "newly": 4, "next": 4, "nextsibling": 2, "nightly": 1, "no": 54, "no-duplicate-header": 1, "no-emphasis-as-heading": 1, "no-inline-html": 1, "no-op": 1, "no-op\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "node": 27, "node-based": 2, "node-fetch": 1, "node/\\u003ccode\\u003enpm\\u003c/code\\u003e": 1, "node/npm": 1, "node/undici": 2, "node_env": 4, "node_env\\u003c/code\\u003e": 1, "node_modules": 1, "nodetype": 1, "noexternal": 1, "noexternal\\u003c/code\\u003e": 1, "noindex\\": 1, "non-eager-discovery": 2, "non-express": 4, "non-remix": 2, "non-rendered": 2, "non-root": 2, "non-route": 2, "non-spec-compliant": 2, "nonce": 2, "nor": 2, "normal": 2, "normalize": 2, "not": 88, "notable": 7, "notably": 9, "note": 7, "notes": 12, "notes\\u003c/a\\u003e": 1, "notes\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cdetails\\u003e\\\\n": 1, "notfoundpaths": 1, "notice": 2, "notice\\": 1, "notice\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "notice\\u003c/h3\\u003e\\\\n\\u003cp\\u003efixed": 1, "noticepatch": 2, "now": 88, "npm": 3, "npx": 6, "null": 3, "number": 5, "object": 9, "object\\u003c/li\\u003e\\\\n\\u003cli\\u003ethat": 1, "objects": 4, "obsolete": 1, "obsolete\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003ein": 1, "occur": 2, "occurs": 2, "of": 269, "off": 4, "official": 4, "officially": 4, "often": 2, "old": 8, "omit": 2, "omitted": 4, "on": 141, "once": 4, "once\\u003c/li\\u003e\\\\n\\u003cli\\u003ethe": 1, "one": 12, "only": 36, "onto": 2, "open": 8, "opt": 6, "opt-in": 6, "opt-into": 14, "opt-out": 2, "opted": 10, "optimization": 13, "optimization\\": 1, "optimization\\u003c/a\\u003e": 1, "optimizedeps": 3, "opting": 6, "option": 41, "option\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "optional": 12, "optionally": 2, "options": 11, "options\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003ethis": 1, "opts": 4, "or": 75, "order": 7, "order\\": 1, "order\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eto": 1, "ordering": 5, "ordering\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003ethe": 1, "org/en-us/docs/web/api/fetch_api\\\\\\": 1, "org/en-us/docs/web/api/viewtransition\\\\\\": 1, "org/en-us/docs/web/privacy/partitioned_cookies\\\\\\": 1, "org/en/blog/announcements/v18-release-announce\\\\\\": 1, "original": 12, "originally": 6, "originalurl": 1, "originalurl\\u003c/code\\u003e": 1, "originating": 4, "other": 21, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "other-notable-changes\\": 1, "other-notable-changes\\\\\\": 1, "otherwise": 3, "our": 26, "out": 25, "outgoing": 2, "outlet": 5, "outlet\\": 1, "output": 8, "outside": 14, "over": 8, "overridden": 2, "override": 10, "overrides": 2, "overview": 2, "own": 14, "pack": 1, "pack\\u003c/code\\u003e": 1, "package": 79, "package2": 2, "package\\": 1, "package\\\\n\\\\n-": 1, "package\\u003c/a\\u003e": 1, "package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/details\\u003e\\\\n\\u003c": 1, "package\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 27, "package\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 28, "packageon": 1, "packages": 15, "packages\\u003c/a\\u003e": 1, "packagev2": 52, "page": 13, "page\\u003c/a\\u003e": 1, "pages": 4, "pagev2": 2, "paginated": 4, "pagination": 1, "parallelize": 1, "param": 2, "param\\": 1, "parameter": 3, "parameter\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "parameters": 4, "params": 10, "parentnode": 2, "parity": 2, "parse": 4, "parse\\u003c/code\\u003e": 1, "parsed": 2, "part": 2, "partially": 4, "partitioned": 1, "pass": 14, "passed": 4, "passing": 6, "past": 2, "patch": 88, "patch-changes-10\\": 1, "patch-changes-10\\\\\\": 1, "patch-changes-11\\": 1, "patch-changes-11\\\\\\": 1, "patch-changes-12\\": 1, "patch-changes-12\\\\\\": 1, "patch-changes-13\\": 1, "patch-changes-13\\\\\\": 1, "patch-changes-14\\": 1, "patch-changes-14\\\\\\": 1, "patch-changes-15\\": 1, "patch-changes-15\\\\\\": 1, "patch-changes-16\\": 1, "patch-changes-16\\\\\\": 1, "patch-changes-17\\": 1, "patch-changes-17\\\\\\": 1, "patch-changes-18\\": 1, "patch-changes-18\\\\\\": 1, "patch-changes-19\\": 1, "patch-changes-19\\\\\\": 1, "patch-changes-1\\": 1, "patch-changes-1\\\\\\": 1, "patch-changes-20\\": 1, "patch-changes-20\\\\\\": 1, "patch-changes-21\\": 1, "patch-changes-21\\\\\\": 1, "patch-changes-22\\": 1, "patch-changes-22\\\\\\": 1, "patch-changes-23\\": 1, "patch-changes-23\\\\\\": 1, "patch-changes-24\\": 1, "patch-changes-24\\\\\\": 1, "patch-changes-25\\": 1, "patch-changes-25\\\\\\": 1, "patch-changes-26\\": 1, "patch-changes-26\\\\\\": 1, "patch-changes-27\\": 1, "patch-changes-27\\\\\\": 1, "patch-changes-28\\": 1, "patch-changes-28\\\\\\": 1, "patch-changes-29\\": 1, "patch-changes-29\\\\\\": 1, "patch-changes-2\\": 1, "patch-changes-2\\\\\\": 1, "patch-changes-30\\": 1, "patch-changes-30\\\\\\": 1, "patch-changes-31\\": 1, "patch-changes-31\\\\\\": 1, "patch-changes-32\\": 1, "patch-changes-32\\\\\\": 1, "patch-changes-33\\": 1, "patch-changes-33\\\\\\": 1, "patch-changes-34\\": 1, "patch-changes-34\\\\\\": 1, "patch-changes-35\\": 1, "patch-changes-35\\\\\\": 1, "patch-changes-36\\": 1, "patch-changes-36\\\\\\": 1, "patch-changes-37\\": 1, "patch-changes-37\\\\\\": 1, "patch-changes-38\\": 1, "patch-changes-38\\\\\\": 1, "patch-changes-39\\": 1, "patch-changes-39\\\\\\": 1, "patch-changes-3\\": 1, "patch-changes-3\\\\\\": 1, "patch-changes-40\\": 1, "patch-changes-40\\\\\\": 1, "patch-changes-41\\": 1, "patch-changes-41\\\\\\": 1, "patch-changes-42\\": 1, "patch-changes-42\\\\\\": 1, "patch-changes-4\\": 1, "patch-changes-4\\\\\\": 1, "patch-changes-5\\": 1, "patch-changes-5\\\\\\": 1, "patch-changes-6\\": 1, "patch-changes-6\\\\\\": 1, "patch-changes-7\\": 1, "patch-changes-7\\\\\\": 1, "patch-changes-8\\": 1, "patch-changes-8\\\\\\": 1, "patch-changes-9\\": 1, "patch-changes-9\\\\\\": 1, "patch-changes\\": 1, "patch-changes\\\\\\": 1, "patched": 2, "patches": 3, "patches\\\\\\": 1, "patchroutesonnavigation": 1, "path": 8, "path\\u003c/li\\u003e\\\\n\\u003cli\\u003eon": 1, "path\\u003c/li\\u003e\\\\n\\u003cli\\u003ewhile": 1, "pathless/index": 2, "pathname": 2, "paths": 4, "payloads": 3, "payloads\\u003c/li\\u003e\\\\n\\u003cli\\u003eremove": 1, "peer": 2, "pending": 4, "pending/optimistic": 10, "per": 2, "perf": 2, "performance": 11, "performance\\": 1, "performance\\u003c/a\\u003e": 1, "performing": 4, "performs": 2, "persist": 2, "persistence": 2, "persistence-future-flag\\\\\\": 1, "persistence/cleanup": 2, "picks": 6, "pinned": 2, "pipethrough": 1, "placed": 2, "plan": 2, "planning": 1, "planning\\u003c/a\\u003e": 1, "plans": 2, "platforms": 2, "please": 38, "plugin": 117, "plugin\\u003c/a\\u003e": 1, "plugin\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "plugin\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "plugin\\u003c/h4\\u003e\\\\n\\u003cp\\u003ewe": 1, "plugin\\u003c/h4\\u003e\\\\n\\u003cp\\u003e⚠️": 1, "plugin\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_createviteserver\\u003c/code\\u003e": 1, "plugin\\u003c/p\\u003e\\\\n\\u003cp\\u003ethe": 1, "plugin\\u003c/strong\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "plugin\\u003c/strong\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ethe": 1, "plugin\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003ethe": 1, "plugin\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003evite": 1, "plugins": 16, "pnpm": 8, "point": 4, "pollution": 2, "polyfill": 12, "polyfilled": 6, "polyfilling": 2, "polyfills": 10, "populate": 1, "port": 16, "port\\u003c/code\\u003e": 4, "port\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003echanged": 1, "port\\u003c/li\\u003e\\\\n\\u003cli\\u003eotherwise": 1, "positions": 2, "positives": 2, "possible": 6, "post": 8, "post\\\\\\": 3, "post\\u003c/a\\u003e": 3, "postcss": 3, "postcss/tailwind": 1, "postcss\\": 1, "posts": 1, "potential": 4, "pre-bundle": 1, "pre-bundles": 2, "pre-single": 2, "prefer": 2, "prefetch": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "prefetchpagelinks\\u003e\\u003c/code\\u003e": 1, "prefix": 16, "prefixes": 4, "preparation": 2, "prepare": 2, "prepend": 4, "present": 12, "preserve": 11, "preset": 10, "presets": 5, "presets\\": 1, "press": 2, "pretransformrequests": 1, "pretransformrequests\\u003c/code\\u003e": 1, "pretty": 2, "prevent": 8, "prevents": 2, "preview": 5, "preview\\u003c/code\\u003e": 2, "preview\\u003c/code\\u003e\\u003c/a\\u003e": 1, "previous": 2, "previously": 14, "previoussibling": 1, "primary": 5, "printed": 2, "prior": 8, "priority": 1, "probably": 2, "process": 10, "processed": 6, "processes": 2, "production": 15, "production\\\\\\": 2, "profile": 2, "profiling": 6, "progress": 2, "progressive": 3, "prohibitively": 2, "project": 17, "projects": 24, "promise": 1, "prop": 8, "prop-drilling": 1, "prop-drilling\\u003c/li\\u003e\\\\n\\u003cli\\u003efetcher": 1, "propagate": 2, "proper": 4, "properly": 10, "properties": 2, "proposal": 2, "props/params": 2, "provide": 8, "provided": 4, "provider": 2, "provides": 4, "providing": 2, "proxied": 2, "proxy": 14, "public": 6, "public-facing": 2, "public\\u003c/li\\u003e\\\\n\\u003cli\\u003erather": 2, "publicpath": 4, "pull": 3, "purpose": 2, "pushstate": 1, "pushstate\\u003c/code\\u003e": 1, "put": 6, "putting": 2, "query": 15, "questions": 1, "quick": 3, "quickest": 1, "quickly": 1, "quirks": 2, "quite": 2, "race": 2, "ran": 2, "random": 1, "randombytes": 1, "randombytes\\u003c/code\\u003e": 1, "range": 2, "rather": 14, "raw": 7, "raw\\u003c/code\\u003e": 1, "re": 30, "re-export": 4, "re-imports": 2, "re-mounted": 2, "re-used": 2, "reaching": 2, "react": 75, "react-refresh": 1, "react-refresh/babel": 1, "react-router-dom@6": 27, "react-router-scroll-positions": 1, "reactdom": 1, "read": 4, "readablestream": 2, "reading": 6, "ready": 4, "real-world": 2, "reality": 2, "realization/alignment": 2, "realize": 2, "really": 2, "reason": 1, "reason\\u003c/code\\u003e": 1, "reasons": 2, "rebuilds": 2, "recent": 2, "recently": 2, "recommend": 4, "recommended": 2, "reconsider": 2, "records": 1, "records\\u003c/a\\u003e": 1, "redirect": 8, "redirect\\": 1, "redirectdocument": 3, "redirectdocument\\": 1, "redirects": 10, "reduce": 4, "redundant": 8, "ref": 1, "refer": 18, "referenced": 10, "referencing": 4, "refining": 2, "reflect": 4, "refresh": 6, "refresh\\\\\\": 2, "register": 2, "regular": 3, "reimport": 2, "reimporting": 2, "reinstating": 2, "related": 9, "relative": 4, "release": 33, "released": 4, "releases": 12, "releases/release": 2, "releases\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "releases\\u003c/h1\\u003e\\\\n\\u003cp\\u003ethis": 1, "relevant": 4, "reliably": 2, "relies": 6, "reload": 8, "reloaddocument": 1, "reloading": 2, "rely": 10, "relying": 4, "remain": 2, "remaining": 4, "remix": 256, "remix-dot-server": 1, "remix-react-proxy": 1, "remix-releases\\\\\\": 1, "remix-run/remix/templates/unstable-vite": 1, "remix-run/remix/templates/unstable-vite-cloudflare": 1, "remix-run/remix/templates/unstable-vite-express": 1, "remix-serve": 13, "remix/manifest": 4, "remix/server-build": 3, "remix/server-build\\\\\\": 3, "remix@2": 42, "remix@nightly": 1, "remix@nightly\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "remix\\": 2, "remix\\u003c/li\\u003e\\\\n\\u003cli\\u003eit": 1, "remix\\u003e": 1, "remix_dev_http_origin": 1, "remix_dev_origin": 2, "remix_dev_server_ws_port": 1, "remixcloudflaredevproxy": 8, "remixconfig": 1, "remixconfigfuture\u003e": 1, "remixconfigfuture\\u003e\\u003c/code\\u003e": 1, "remixserver\\u003e\\u003c/code\\u003e": 1, "remixstub": 2, "remixuserconfig": 1, "removal": 2, "removals": 4, "removals\\u003c/a\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "removals\\u003c/h4\\u003e\\\\n\\u003ch5": 1, "remove": 49, "removechild": 2, "removed": 34, "removed-future-flags\\\\\\": 1, "removed-response-stub-in-single-fetch-unstable\\\\\\": 1, "removeitem": 1, "removes": 4, "removing": 5, "rename": 2, "renamed": 14, "renamed-unstable_fogofwar-future-flag-to-unstable_lazyroutediscovery-unstable\\\\\\": 1, "renaming": 2, "render": 14, "rendered": 4, "rendering": 8, "renders": 5, "renders\\u003c/li\\u003e\\\\n\\u003cli\\u003ethe": 1, "rendertoreadablestream": 2, "replace": 9, "replace\\": 1, "replaced": 2, "replacement": 4, "replacement\\": 1, "replaces": 4, "replacestate": 2, "replacestate\\u003c/code\\u003e": 1, "replacing": 6, "repo": 2, "req": 4, "request": 34, "request\\u003c/code\\u003e": 1, "request\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003erequire": 1, "request\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "requested": 2, "requests": 33, "requests\\u003c/li\\u003e\\\\n\\u003cli\\u003ein": 1, "require": 8, "required": 10, "required\\u003c/li\\u003e\\\\n\\u003cli\\u003eany": 1, "requirements": 2, "requirements\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "requirements\\u003c/h4\\u003e\\\\n\\u003cp\\u003eremix": 1, "requires": 4, "resistant": 2, "resolution": 6, "resolve": 6, "resolved": 3, "resolved\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003efix": 1, "resolving": 6, "resource": 17, "resources": 1, "respect": 4, "respectively": 1, "respectively\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003ethe": 1, "response": 27, "responses": 13, "responses\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003einstead": 1, "responsestub": 3, "restore": 2, "restorekey": 2, "restriction": 2, "resubmissions": 2, "resubmissions\\": 1, "result": 8, "resulted": 4, "results": 2, "return": 26, "returned": 12, "returning": 8, "returns": 4, "revalidate": 4, "revalidation": 14, "revalidations": 2, "reveal": 5, "reveal\\u003c/code\\u003e": 1, "revert": 4, "reverted": 2, "reverts": 1, "rewriting": 2, "rfc": 8, "rfc\\u003c/a\\u003e": 1, "roadmap": 1, "robust": 2, "rocking": 1, "rolling": 1, "rollup": 2, "root": 30, "root\\": 1, "root\\u003c/li\\u003e\\\\n\\u003cli\\u003eby": 1, "route": 140, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "route\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eclient": 1, "routeconfig": 8, "routediscovery": 1, "routematch": 1, "router": 51, "router\\": 2, "routers": 2, "routes": 73, "routes/_authenticated": 1, "routes/a": 1, "routes/b": 2, "routes/b\\u003c/code\\u003e": 1, "routes/c": 1, "routes/docs": 3, "routes/docs\\": 1, "routes/myapp/": 1, "routes\\": 2, "routes\\u003c/code\\u003e": 1, "routes\\u003c/li\\u003e\\\\n\\u003cli\\u003enow": 1, "routing": 16, "rr": 2, "run": 13, "run/blog/fog-of-war\\\\\\": 1, "run/blog/future-flags\\\\\\": 1, "run/blog/incremental-path-to-react-19\\\\\\": 1, "run/blog/merging-remix-and-react-router\\\\\\": 1, "run/blog/remix-heart-vite\\\\\\": 2, "run/blog/remix-vite-stable\\\\\\": 1, "run/docs/components/link#unstable_viewtransition\\\\\\": 1, "run/docs/components/nav-link#unstable_viewtransition\\\\\\": 1, "run/docs/en/2": 1, "run/docs/en/dev/file-conventions/root#layout-export\\\\\\": 1, "run/docs/en/dev/future/vite#basename\\\\\\": 2, "run/docs/en/main/future/spa-mode\\\\\\": 1, "run/docs/en/main/future/vite#strict-route-exports\\\\\\": 1, "run/docs/en/main/future/vite\\\\\\": 1, "run/docs/en/main/guides/dependency-optimization\\\\\\": 2, "run/docs/en/main/guides/single-fetch\\\\\\": 2, "run/docs/en/main/guides/templates\\\\\\": 1, "run/docs/en/main/other-api/create-remix\\\\\\": 1, "run/docs/en/main/other-api/node#version-support\\\\\\": 1, "run/docs/en/main/start/v2#browserbuilddirectory\\\\\\": 1, "run/docs/en/main/start/v2#browsernodebuiltinspolyfill\\\\\\": 1, "run/docs/en/main/start/v2#built-in-postcsstailwind-support\\\\\\": 1, "run/docs/en/main/start/v2#catchboundary-and-errorboundary\\\\\\": 1, "run/docs/en/main/start/v2#devserverbroadcastdelay\\\\\\": 1, "run/docs/en/main/start/v2#devserverport\\\\\\": 1, "run/docs/en/main/start/v2#file-system-route-convention\\\\\\": 1, "run/docs/en/main/start/v2#formmethod\\\\\\": 1, "run/docs/en/main/start/v2#installglobals\\\\\\": 1, "run/docs/en/main/start/v2#links-imagesizes-and-imagesrcset\\\\\\": 1, "run/docs/en/main/start/v2#netlify-adapter\\\\\\": 1, "run/docs/en/main/start/v2#remix-dev\\\\\\": 1, "run/docs/en/main/start/v2#route-headers\\\\\\": 1, "run/docs/en/main/start/v2#route-meta\\\\\\": 1, "run/docs/en/main/start/v2#serverbuilddirectory\\\\\\": 1, "run/docs/en/main/start/v2#serverbuildtarget\\\\\\": 1, "run/docs/en/main/start/v2#servermoduleformat\\\\\\": 1, "run/docs/en/main/start/v2#servernodebuiltinspolyfill\\\\\\": 1, "run/docs/en/main/start/v2#source-map-support\\\\\\": 1, "run/docs/en/main/start/v2#usefetcher\\\\\\": 2, "run/docs/en/main/start/v2#usetransition\\\\\\": 1, "run/docs/en/main/start/v2#vercel-adapter\\\\\\": 1, "run/docs/en/main/start/v2\\\\\\": 1, "run/docs/future/server-bundles\\\\\\": 1, "run/docs/future/vite#cloudflare\\\\\\": 1, "run/docs/future/vite#migrating-cloudflare-functions\\\\\\": 1, "run/docs/future/vite#performance\\\\\\": 1, "run/docs/guides/fog-of-war\\\\\\": 1, "run/docs/guides/lazy-route-discovery\\\\\\": 1, "run/docs/guides/single-fetch#enable-single-fetch-types\\\\\\": 1, "run/docs/guides/single-fetch\\\\\\": 3, "run/docs/hooks/use-view-transition-state\\\\\\": 1, "run/docs/start/changelog": 1, "run/docs/utils/create-remix-stub\\\\\\": 1, "run/docs/utils/data\\\\\\": 1, "run/future/spa-mode\\\\\\": 1, "run/future/vite\\\\\\": 1, "run/guides/client-data\\\\\\": 1, "run/hooks/use-blocker\\\\\\": 1, "run/hooks/use-prompt\\\\\\": 1, "run/hooks/use-resolved-path#splat-paths\\\\\\": 1, "run/route/client-action\\\\\\": 1, "run/route/client-loader\\\\\\": 1, "run/route/hydrate-fallback\\\\\\": 1, "run\\": 1, "running": 17, "runtime": 26, "runtimes": 8, "runtimes\\u003c/strong\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003edeno": 1, "ryan": 2, "safe": 2, "safety": 8, "same": 16, "sanitization": 2, "satisfies": 2, "scale": 2, "scenarios": 11, "scenarios\\u003c/li\\u003e\\\\n\\u003cli\\u003eremix": 1, "scope": 2, "script": 4, "scripts": 14, "scripts\\": 1, "scripts\\\\\\": 1, "scripts\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eto": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "search": 4, "second": 2, "section": 4, "security": 9, "security-notice\\": 1, "security-notice\\\\\\": 1, "see": 33, "sees": 2, "segment": 2, "semantically": 2, "semantics": 2, "semi-colons": 2, "send": 2, "sense": 2, "separate": 6, "separately": 2, "serializable": 1, "serializable\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "serialization": 4, "serialized": 6, "serializefrom": 2, "serv-cli": 1, "serve": 6, "served": 4, "server": 194, "server-bundles-unstable\\\\\\": 1, "server-only": 2, "server-rendered": 2, "server-rendering": 2, "server-runtime|react": 2, "server/client": 2, "server\\": 3, "server\\u003c/code\\u003e": 14, "server\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eif": 1, "server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003einstead": 1, "server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003ethis": 1, "serverbuilddirectory": 6, "serverbuildfile": 1, "serverbuildpath": 3, "serverbuildtarget": 1, "serverbundles": 4, "serverloader": 2, "serverloader/serveraction": 1, "servermoduleformat": 1, "servernodebuiltinspolyfill": 2, "serverruntimemetaargs": 2, "serverruntimemetadescriptor": 1, "serverruntimemetafunction": 1, "serverruntimemetamatch": 1, "serverruntimemetamatches": 1, "servers": 7, "servers\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_loadviteserverbuild\\u003c/code\\u003e": 1, "serving": 2, "session": 6, "session\\u003c/li\\u003e\\\\n\\u003cli\\u003efor": 1, "session\\u003c/li\\u003e\\\\n\\u003cli\\u003eif": 1, "sessions": 4, "sessions\\": 1, "sessionstorage": 2, "set": 16, "set-cookie": 2, "setfocusandorscrolltonewlyaddedthing": 1, "setting": 8, "setup": 4, "share": 2, "shared": 6, "shell": 2, "shellscript\\\\\\": 4, "shopify": 1, "shorthand": 2, "should": 19, "shouldrevalidate": 7, "shouldrevalidate\\": 1, "show": 2, "shown": 2, "signal": 11, "signal\\u003c/code\\u003e": 5, "signature": 2, "silence": 2, "similar": 2, "simple": 4, "simplest": 2, "simplify": 2, "simplifying": 1, "simply": 2, "since": 23, "single": 140, "single-fetch": 6, "single-fetch-unstable\\\\\\": 1, "single-fetch\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "singular": 2, "siteurl\\": 1, "size": 2, "sizes": 1, "sizes\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "skip": 1, "slash": 2, "slice": 1, "slightly": 2, "slug/splat": 2, "slug\\": 1, "small": 5, "smooth": 1, "smoothest": 2, "smoothly": 2, "so": 54, "solely": 2, "some": 19, "something": 4, "sometimes": 4, "sort": 4, "source": 14, "sourcemap": 5, "sourcemap\\u003c/code\\u003e": 1, "sourcemaps": 2, "sourcemapsupport": 1, "spa": 46, "spa-mode-unstable\\\\\\": 1, "span": 2, "spec": 2, "special": 4, "specific": 8, "specified": 4, "specify": 2, "speedscope": 2, "splat": 4, "split": 2, "splitting": 2, "src": 3, "src=": 2, "ssr": 20, "ssr\\u003c/code\\u003e": 1, "ssr\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch4": 1, "ssr\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003efullstack": 1, "ssrfixstacktrace": 2, "ssrfixstacktrace\\u003c/code\\u003e": 2, "ssrloadmodule": 8, "stabilize": 13, "stabilized": 13, "stabilized-apis\\\\\\": 1, "stabilized-useblocker\\\\\\": 1, "stabilized-vite-plugin\\\\\\": 1, "stabilizes": 4, "stabilizing": 2, "stable": 8, "stable-createremixstub\\\\\\": 1, "stack": 4, "stages": 1, "standalone": 4, "standard": 6, "start": 7, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "start\\u003c/code\\u003e": 1, "started": 2, "started\\": 1, "startedquick": 2, "starttransition": 1, "starttransition\\u003c/code\\u003e": 1, "startup": 4, "startviewtransition": 2, "startviewtransition\\u003c/code\\u003e": 2, "state": 24, "state\\\\\\": 1, "state\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ethey": 1, "state\\u003c/code\\u003e": 1, "state\\u003c/li\\u003e\\\\n\\u003cli\\u003ekeep": 1, "stateless": 1, "stateless\\u003c/li\\u003e\\\\n\\u003cli\\u003eif": 1, "static": 4, "statically": 4, "status": 8, "status/headers": 3, "stick": 2, "still": 18, "stop": 9, "stopped": 2, "storage": 2, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 4, "streamcontroller": 3, "streamed": 2, "streaming": 4, "streaming\\": 1, "strengthen": 2, "strict": 6, "string": 4, "stringify": 4, "strings": 2, "stripped": 2, "stub": 18, "stubbed": 2, "stubs": 4, "style=": 1, "style=\\\\\\": 264, "styles": 6, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "subject": 2, "submission": 3, "submission\\u003c/code\\u003e\\u003c/a\\u003e": 1, "submit": 7, "submit\\u003c/code\\u003e": 3, "submitting": 3, "submitting\\\\\\": 1, "subpath": 4, "subsequent": 2, "successful": 6, "such": 14, "suffix": 2, "super": 1, "superseded": 2, "support": 98, "support\\": 1, "support\\u003c/a\\u003e": 1, "support\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "support\\u003c/h4\\u003e\\\\n\\u003cp\\u003ereact": 1, "support\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/react\\u003c/code\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eremove": 1, "supported": 2, "supports": 5, "supposed": 2, "suppression": 2, "surfaced": 2, "swc": 2, "switch": 3, "switched": 2, "sync": 2, "synchronous": 4, "system": 6, "t=timestamp": 1, "t=timestamp\\u003c/code\\u003e": 1, "t\\u003c/em\\u003e": 1, "tab=readme-ov-file#garbage-collection\\\\\\": 1, "tabindex=\\\\\\": 210, "tagname": 1, "tags": 2, "tailwind": 3, "tailwind\\": 1, "taken": 6, "takes": 2, "tar-fs": 1, "tarballs": 3, "tarballs\\u003c/a\\u003e": 1, "team": 2, "technical": 3, "technically": 2, "technologies\\": 1, "tell": 2, "template": 9, "template/stack": 2, "templates": 12, "templates\\": 1, "templates\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eadds": 1, "templates\\u003c/li\\u003e\\\\n\\u003cli\\u003ethis": 1, "terminal": 2, "test": 2, "text/event-stream": 1, "text/x-script": 1, "textencoderstream": 1, "tgz": 1, "tgz\\u003c/code\\u003e": 1, "than": 12, "thank": 3, "that": 182, "the": 818, "their": 12, "them": 8, "them\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "them\\u003c/li\\u003e\\\\n\\u003cli\\u003efor": 1, "then": 25, "there": 19, "these": 15, "they": 37, "things": 4, "thinking": 2, "this": 150, "thorough": 2, "those": 12, "though": 2, "through": 17, "throw": 9, "throwing": 2, "thrown": 6, "thus": 2, "time": 18, "timeout-based": 2, "title\\": 1, "titles": 2, "tls": 2, "tls\\": 1, "to": 721, "to=": 2, "toc\\": 1, "today": 2, "together": 2, "too": 2, "tools": 2, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "totally": 2, "towards": 2, "traces": 4, "track": 2, "tracks": 2, "trailing": 2, "transfer": 2, "transform": 2, "transformed": 2, "transition": 8, "transitioning": 2, "transitions": 16, "transitions\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "transitions\\u003c/h4\\u003e\\\\n\\u003cp\\u003ewe": 1, "transpilation": 2, "tree": 2, "tree-shake": 2, "tries": 2, "trigger": 14, "true": 21, "true\\\\\\": 258, "true\\u003c/code\\u003e": 1, "trust": 2, "try": 11, "ts": 23, "ts#l97-l116\\\\\\": 1, "ts\\": 1, "ts\\\\\\": 1, "ts\\u003c/code\\u003e": 13, "ts\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "tsconfig": 2, "tsx": 4, "tsx\\u003c/code\\u003e": 3, "tsx\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003ewhen": 1, "turbo-stream": 4, "turbo-stream@2": 1, "turned": 2, "tutorial": 3, "two": 5, "type": 50, "type-inference": 2, "type-safety": 12, "type\\u003c/code\\u003e\\u003c/a\\u003e": 1, "typechecking": 2, "typeof": 1, "types": 32, "types\\u003c/code\\u003e": 1, "typescript": 4, "typescript\\": 1, "typescript\\\\\\": 14, "typings": 2, "ui": 12, "ui\\": 1, "ui\\u003c/li\\u003e\\\\n\\u003cli\\u003ehowever": 1, "ui\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "uimatch": 6, "uimatch_singlefetch": 1, "unauthenticated": 1, "undefined": 7, "undefined\\\\n\\u003c/span\\u003e\\u003cspan": 1, "under": 5, "underlying": 4, "underneath": 2, "underscores": 2, "undici": 12, "undici\\\\\\": 1, "undiscovered": 4, "undocumented": 6, "unforeseen": 2, "unfortunately": 1, "unknown": 8, "unless": 4, "unlike": 2, "unmount": 5, "unmount\\u003c/li\\u003e\\\\n\\u003cli\\u003eif": 1, "unmounted": 3, "unmounted\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "unnecessary": 2, "unresolved": 2, "unstable": 85, "unstable-vite-cloudflare": 1, "unstable-vite-plugin-updates\\\\\\": 1, "unstable\\\\\\": 1, "unstable_": 7, "unstable_actionstatus": 2, "unstable_cloudflarepreset": 3, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_createremixstub": 2, "unstable_createviteserver": 6, "unstable_data": 5, "unstable_datastrategy": 1, "unstable_flushsync": 5, "unstable_flushsync-api\\\\\\": 1, "unstable_flushsync\u003e": 1, "unstable_fogofwar": 5, "unstable_fogofwar\\u003c/code\\u003e": 3, "unstable_lazyroutediscovery": 6, "unstable_lazyroutediscovery\\u003c/code\\u003e": 4, "unstable_loadviteserverbuild": 6, "unstable_optimizedeps": 7, "unstable_optimizedeps\\u003c/code\\u003e": 6, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_patchroutesonnavigation": 2, "unstable_routeconfig": 6, "unstable_routeconfig\\u003c/code\\u003e": 3, "unstable_serverbundles": 3, "unstable_serverbundlesfunction": 1, "unstable_shouldreload": 1, "unstable_singlefetch": 8, "unstable_singlefetch\\u003c/code\\u003e": 5, "unstable_ssr": 4, "unstable_subresourceintegrity": 1, "unstable_useprompt": 3, "unstable_useprompt\\": 1, "unstable_useviewtransitionstate": 2, "unstable_viewtransition": 2, "unstable_viewtransition\u003e": 4, "unstable_viewtransition\\u003e\\u003c/code\\u003e\\u003c/a\\u003e": 2, "unstable_viteplugin": 11, "unstable_vitepluginconfig": 1, "unstable_viteserverbuildmoduleid": 10, "unstyled": 6, "unsupported": 2, "untested": 2, "until": 2, "unused": 4, "unwrap": 2, "unwrapped": 2, "up": 26, "upcoming": 2, "update": 27, "updated": 68, "updated-dependencies-10\\": 1, "updated-dependencies-10\\\\\\": 1, "updated-dependencies-11\\": 1, "updated-dependencies-11\\\\\\": 1, "updated-dependencies-12\\": 1, "updated-dependencies-12\\\\\\": 1, "updated-dependencies-13\\": 1, "updated-dependencies-13\\\\\\": 1, "updated-dependencies-14\\": 1, "updated-dependencies-14\\\\\\": 1, "updated-dependencies-15\\": 1, "updated-dependencies-15\\\\\\": 1, "updated-dependencies-16\\": 1, "updated-dependencies-16\\\\\\": 1, "updated-dependencies-17\\": 1, "updated-dependencies-17\\\\\\": 1, "updated-dependencies-18\\": 1, "updated-dependencies-18\\\\\\": 1, "updated-dependencies-19\\": 1, "updated-dependencies-19\\\\\\": 1, "updated-dependencies-1\\": 1, "updated-dependencies-1\\\\\\": 1, "updated-dependencies-20\\": 1, "updated-dependencies-20\\\\\\": 1, "updated-dependencies-21\\": 1, "updated-dependencies-21\\\\\\": 1, "updated-dependencies-22\\": 1, "updated-dependencies-22\\\\\\": 1, "updated-dependencies-23\\": 1, "updated-dependencies-23\\\\\\": 1, "updated-dependencies-24\\": 1, "updated-dependencies-24\\\\\\": 1, "updated-dependencies-25\\": 1, "updated-dependencies-25\\\\\\": 1, "updated-dependencies-2\\": 1, "updated-dependencies-2\\\\\\": 1, "updated-dependencies-3\\": 1, "updated-dependencies-3\\\\\\": 1, "updated-dependencies-4\\": 1, "updated-dependencies-4\\\\\\": 1, "updated-dependencies-5\\": 1, "updated-dependencies-5\\\\\\": 1, "updated-dependencies-6\\": 1, "updated-dependencies-6\\\\\\": 1, "updated-dependencies-7\\": 1, "updated-dependencies-7\\\\\\": 1, "updated-dependencies-8\\": 1, "updated-dependencies-8\\\\\\": 1, "updated-dependencies-9\\": 1, "updated-dependencies-9\\\\\\": 1, "updated-dependencies\\": 1, "updated-dependencies\\\\\\": 1, "updated-type-safety-for-single-fetch\\\\\\": 1, "updates": 14, "updates-to-single-fetch-revalidation-behavior-unstable\\\\\\": 1, "updates\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "updates\\u003c/h4\\u003e\\\\n\\u003cp\\u003eas": 1, "upgrade": 11, "upgrade-remix": 2, "upgraded": 8, "upgraded-dependency-requirements\\\\\\": 1, "upgrades": 2, "upgrading": 16, "uploaded": 2, "uploads": 2, "uploads\\": 1, "uppercase": 2, "upwards": 2, "url": 27, "url\\u003c/code\\u003e": 5, "urls": 4, "us": 12, "usage": 10, "use": 57, "use-cases": 4, "useactiondata": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 6, "useblocker\\": 1, "used": 24, "useeffect": 1, "usefetcher": 7, "usefetcher\\": 1, "usefetchers": 7, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useless": 2, "useloaderdata": 3, "useloaderdata\\": 1, "uselocation": 3, "uselocation\\": 1, "usematches": 6, "usematches\\": 1, "usenavigate": 4, "usenavigate/usesubmit/fetcher": 1, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 10, "user-provided": 4, "user-specified": 2, "useresolvedpath": 3, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata": 1, "userouteloaderdata\\": 1, "users": 17, "uses": 10, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 6, "usesubmit\\": 1, "usetransition": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 96, "utilities": 3, "utilities\\": 1, "utilities\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "utilitiescookies": 2, "utility": 6, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v1": 7, "v17": 4, "v18": 5, "v2": 294, "v200\\": 1, "v200\\\\\\": 1, "v201\\": 1, "v201\\\\\\": 1, "v2100\\": 1, "v2100\\\\\\": 1, "v2101\\": 1, "v2101\\\\\\": 1, "v2102\\": 1, "v2102\\\\\\": 1, "v2103\\": 1, "v2103\\\\\\": 1, "v210\\": 1, "v210\\\\\\": 1, "v2110\\": 1, "v2110\\\\\\": 1, "v2111\\": 1, "v2111\\\\\\": 1, "v2112\\": 1, "v2112\\\\\\": 1, "v2120\\": 1, "v2120\\\\\\": 1, "v2121\\": 1, "v2121\\\\\\": 1, "v2130\\": 1, "v2130\\\\\\": 1, "v2131\\": 1, "v2131\\\\\\": 1, "v2140\\": 1, "v2140\\\\\\": 1, "v2150\\": 1, "v2150\\\\\\": 1, "v2151\\": 1, "v2151\\\\\\": 1, "v2152\\": 1, "v2152\\\\\\": 1, "v2153\\": 1, "v2153\\\\\\": 1, "v2160\\": 1, "v2160\\\\\\": 1, "v2161\\": 1, "v2161\\\\\\": 1, "v2162\\": 1, "v2162\\\\\\": 1, "v2163\\": 1, "v2163\\\\\\": 1, "v2164\\": 1, "v2164\\\\\\": 1, "v2165\\": 1, "v2165\\\\\\": 1, "v2166\\": 1, "v2166\\\\\\": 1, "v2167\\": 1, "v2167\\\\\\": 1, "v2168\\": 1, "v2168\\\\\\": 1, "v2170\\": 1, "v2170\\\\\\": 1, "v220\\": 1, "v220\\\\\\": 1, "v230\\": 1, "v230\\\\\\": 1, "v231\\": 1, "v231\\\\\\": 1, "v240\\": 1, "v240\\\\\\": 1, "v241\\": 1, "v241\\\\\\": 1, "v250\\": 1, "v250\\\\\\": 1, "v251\\": 1, "v251\\\\\\": 1, "v260\\": 1, "v260\\\\\\": 1, "v270\\": 1, "v270\\\\\\": 1, "v280\\": 1, "v280\\\\\\": 1, "v281\\": 1, "v281\\\\\\": 1, "v290\\": 1, "v290\\\\\\": 1, "v291\\": 1, "v291\\\\\\": 1, "v292\\": 1, "v292\\\\\\": 1, "v2\\": 1, "v2\\u003c/strong\\u003e\\u003c/a\\u003e": 1, "v2_": 1, "v2_dev": 6, "v2_dev\\u003c/code\\u003e": 1, "v2_errorboundary": 1, "v2_headers": 1, "v2_meta": 2, "v2_meta\\u003c/code\\u003e": 1, "v2_metaargs": 1, "v2_metadescriptor": 1, "v2_metafunction": 1, "v2_metamatch": 1, "v2_metamatches": 1, "v2_normalizeformmethod": 1, "v2_routeconvention": 1, "v2_serverruntimemetaargs": 1, "v2_serverruntimemetadescriptor": 1, "v2_serverruntimemetafunction": 1, "v2_serverruntimemetamatch": 1, "v2_serverruntimemetamatches": 1, "v3": 4, "v3_fetcherpersist": 2, "v3_fetcherpersist\\u003c/code\\u003e": 2, "v3_lazyroutediscovery": 3, "v3_lazyroutediscovery\\u003c/code\\u003e": 2, "v3_lazyroutediscovery\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efuture": 1, "v3_optimizedeps": 3, "v3_optimizedeps\\u003c/code\\u003e": 2, "v3_optimizedeps\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003efuture": 1, "v3_relativesplatpath": 4, "v3_relativesplatpath\\u003c/code\\u003e": 2, "v3_relativesplatpath\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "v3_relativesplatpath\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cp\\u003ewe": 1, "v3_routeconfig": 2, "v3_routeconfig\\u003c/code\\u003e": 2, "v3_singlefetch": 2, "v3_singlefetch\\u003c/code\\u003e": 1, "v3_singlefetch\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "v3_throwabortreason": 1, "v3_throwabortreason\\u003c/code\\u003e": 1, "v4": 2, "v5": 2, "v6": 2, "v7": 18, "v7_skipactionerrorrevalidation": 1, "v7_skipactionerrorrevalidation\\u003c/code\\u003e": 1, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "v=f5z_axcofw0\\\\\\": 1, "valid": 6, "validate": 4, "validation": 4, "validation\\": 1, "value": 10, "values": 2, "vanilla": 3, "var": 268, "variables": 2, "variables\\": 1, "ve": 44, "vercel": 2, "version": 29, "version\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eadd": 1, "versions": 11, "versions\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch4": 1, "very": 3, "via": 66, "view": 19, "view-transition-name": 2, "view-transitions\\\\\\": 1, "viewtransition": 2, "viewtransition\u003e": 1, "viewtransition\\u003e\\u003c/code\\u003e": 1, "viewtransitionname": 2, "virtual": 14, "vite": 478, "vite-node": 3, "vite-only": 4, "vite-updates-unstable\\\\\\": 1, "vite/client-manifest": 2, "vite/server-": 2, "vite/server-manifest": 2, "vite\\": 1, "vite\\\\\\": 6, "vite\\\\n\\u003c/span\\u003e\\u003cspan": 2, "vite\\u003c/a\\u003e": 1, "vite\\u003c/code\\u003e": 1, "vite\\u003c/em\\u003e": 1, "vite\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003einstead": 1, "viteconfig": 1, "vitejs": 1, "vs": 6, "vulnerability": 2, "walk": 1, "walkthrough": 2, "want": 6, "wanted": 2, "wanting": 2, "war": 17, "war\\\\\\": 3, "warning": 16, "warnings": 26, "warnings\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 2, "warnings\\u003c/h5\\u003e\\\\n\\u003cp\\u003ethe": 1, "warnings\\u003c/h5\\u003e\\\\n\\u003cp\\u003eunfortunately": 1, "was": 62, "wasn": 2, "watch": 2, "watcher": 2, "waterfall": 2, "waterfalls": 2, "way": 11, "we": 103, "web": 1, "web-std-io": 1, "webcrypto": 2, "well": 6, "were": 35, "we’ve": 2, "what": 34, "whatever": 2, "whatever\\\\\\": 2, "whats-changed-10\\": 1, "whats-changed-10\\\\\\": 1, "whats-changed-11\\": 1, "whats-changed-11\\\\\\": 1, "whats-changed-12\\": 1, "whats-changed-12\\\\\\": 1, "whats-changed-1\\": 1, "whats-changed-1\\\\\\": 1, "whats-changed-2\\": 1, "whats-changed-2\\\\\\": 1, "whats-changed-3\\": 1, "whats-changed-3\\\\\\": 1, "whats-changed-4\\": 1, "whats-changed-4\\\\\\": 1, "whats-changed-5\\": 1, "whats-changed-5\\\\\\": 1, "whats-changed-6\\": 1, "whats-changed-6\\\\\\": 1, "whats-changed-7\\": 1, "whats-changed-7\\\\\\": 1, "whats-changed-8\\": 1, "whats-changed-8\\\\\\": 1, "whats-changed-9\\": 1, "whats-changed-9\\\\\\": 1, "whats-changed\\": 1, "whats-changed\\\\\\": 1, "when": 162, "where": 20, "whether": 2, "which": 52, "while": 17, "white-on-white": 1, "white-on-white\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1, "whitebright": 1, "who": 4, "why": 1, "will": 104, "window": 13, "windows": 4, "with": 142, "with-deprecation-warnings\\\\\\": 1, "within": 24, "without": 33, "without-deprecation-warnings\\\\\\": 1, "won": 4, "wording": 2, "work": 14, "worker": 1, "worker\\\\\\": 1, "workerd": 1, "workerd-compatible": 1, "workerd\\\\\\": 1, "working": 6, "works": 2, "workspace": 4, "workspaces": 6, "would": 22, "wrap": 2, "wrapped": 4, "wrapper": 2, "wrappers": 2, "write": 6, "writes": 2, "writes\\": 1, "writing": 2, "written": 10, "x-forwarded-host": 4, "x\\u003c/code\\u003e": 4, "y/packages/create-remix/changelog": 2, "y/packages/remix-architect/changelog": 1, "y/packages/remix-cloudflare-pages/changelog": 1, "y/packages/remix-cloudflare-workers/changelog": 1, "y/packages/remix-cloudflare/changelog": 1, "y/packages/remix-css-bundle/changelog": 1, "y/packages/remix-deno/changelog": 1, "y/packages/remix-dev/changelog": 1, "y/packages/remix-eslint-config/changelog": 1, "y/packages/remix-express/changelog": 1, "y/packages/remix-fs-routes/changelog": 1, "y/packages/remix-node/changelog": 1, "y/packages/remix-react/changelog": 1, "y/packages/remix-route-config/changelog": 1, "y/packages/remix-routes-option-adapter/changelog": 1, "y/packages/remix-serve/changelog": 1, "y/packages/remix-server-runtime/changelog": 1, "y/packages/remix-testing/changelog": 1, "y\\\\n\\\\ndate": 1, "y\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "y\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "yet": 4, "you": 189, "you\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eremixcloudflaredevproxy\\u003c/code\\u003e": 1, "your": 137, "youtube": 1, "yyyy-mm-dd\\\\n\\\\n###": 1, "|\u003e": 1, "|\\u003e": 1, "||": 3, "©": 1, "•docs": 1, "→": 12, "⚠️": 20, "✅": 1, "❌": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2, "🎉": 1, "👈": 4, "🔗": 2, "🔗\\": 1, "🔗\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "🔗\\u003c/h3\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "🔗v2": 2, "😉": 2, "😊": 2, "🙃": 2, "🙏": 1, "🙏\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e@remix-run/dev\\u003c/code\\u003e": 1 }, "length": 42955 }, { "id": "82e149ce20ba4a910fe46c87", "doc_id": "7a74e6c4aa1011a07330ddab", "title": "children", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/component-apis/children.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/children.json", "content": "--- title: children use_cases: \u003e- resolving component children, normalizing JSX children, slot-like helpers, interacting with child content in library components tags: - components - children - jsx - utilities version: \"1.0\" description: \u003e- Resolve and normalize a component's `children` prop into a stable accessor. Useful when you need to read or transform children imperatively inside a component. --- `children` normalizes a component's `children` prop into a stable accessor that returns resolved JSX elements. It accepts functions, arrays, fragments, and nested structures. ## Import ```ts import { children } from \"solid-js\"; ``` ## Type ```ts function children(fn: Accessor\u003cJSX.Element\u003e): ChildrenReturn; type ChildrenReturn = Accessor\u003cResolvedChildren\u003e \u0026 { toArray: () =\u003e ResolvedChildren[]; }; ``` ## Parameters ### `fn` - **Type:** `() =\u003e JSX.Element` - **Required:** Yes An accessor that returns the `children` value (typically `props.children`). ## Return value - **Type:** `ChildrenReturn` The function returns a callable accessor. Calling it yields the resolved children, either a single element or an array. ## Helpers ### `toArray()` - **Type:** `() =\u003e ResolvedChildren[]` - **Description:** Returns a flattened array of resolved child elements. This method is exposed on the returned accessor and is useful for iteration or index-based logic. ## Examples ### Basic usage ```tsx function Wrapper(props) { const resolved = children(() =\u003e props.children); return \u003cdiv\u003e{resolved()}\u003c/div\u003e; } // Usage \u003cWrapper\u003e \u003cspan\u003eone\u003c/span\u003e \u003cspan\u003etwo\u003c/span\u003e \u003c/Wrapper\u003e; ``` ### `.toArray()` example ```tsx function List(props) { const resolved = children(() =\u003e props.children); const items = resolved.toArray(); return ( \u003cul\u003e {items.map((child) =\u003e ( \u003cli\u003e{child}\u003c/li\u003e ))} \u003c/ul\u003e ); } // Usage \u003cList\u003e \u003cspan\u003eone\u003c/span\u003e \u003cspan\u003etwo\u003c/span\u003e \u003c/List\u003e; ``` \u003e [!NOTE] \u003e `children` resolves the current value of `props.children`. \u003e If `props.children` is reactive, the resolved accessor reflects updates. ### Working with function-as-children If `children` is a function, the helper evaluates it and returns its rendered result. ```tsx function Slot(props) { const resolved = children(() =\u003e props.children); return \u003cdiv\u003e{resolved()}\u003c/div\u003e; } // Usage \u003cSlot\u003e{() =\u003e \u003cspan\u003edynamic\u003c/span\u003e}\u003c/Slot\u003e; ```", "term_freq": { "##": 6, "###": 5, "**": 5, "**description": 1, "**required": 1, "**type": 3, "---": 2, "//": 3, "//github": 1, "\u003c/div\u003e": 2, "\u003c/li\u003e": 1, "\u003c/list\u003e": 1, "\u003c/slot\u003e": 1, "\u003c/ul\u003e": 1, "\u003c/wrapper\u003e": 1, "\u003cdiv\u003e": 2, "\u003cli\u003e": 1, "\u003clist\u003e": 1, "\u003cslot\u003e": 1, "\u003cspan\u003edynamic\u003c/span\u003e": 1, "\u003cspan\u003eone\u003c/span\u003e": 2, "\u003cspan\u003etwo\u003c/span\u003e": 2, "\u003cul\u003e": 1, "\u003cwrapper\u003e": 1, "=\u003e": 8, "\u003e-": 2, "accepts": 1, "accessor": 6, "accessor\u003cjsx": 1, "accessor\u003cresolvedchildren\u003e": 1, "an": 2, "and": 4, "array": 2, "arrays": 1, "basic": 1, "callable": 1, "calling": 1, "child": 4, "children": 24, "childrenreturn": 3, "com/solidjs/solid-docs/blob/head/src/routes/reference/component-apis/children": 1, "component": 4, "components": 2, "const": 4, "content": 1, "current": 1, "description": 1, "either": 1, "element": 2, "element\u003e": 1, "elements": 2, "evaluates": 1, "example": 1, "examples": 1, "exposed": 1, "flattened": 1, "fn": 2, "for": 1, "fragments": 1, "from": 1, "function": 6, "function-as-children": 1, "functions": 1, "github-document": 1, "helper": 1, "helpers": 2, "https": 1, "if": 2, "imperatively": 1, "import": 2, "in": 1, "index-based": 1, "inside": 1, "interacting": 1, "into": 2, "is": 4, "it": 3, "items": 2, "iteration": 1, "its": 1, "jsx": 4, "library": 1, "list": 1, "logic": 1, "map": 1, "mdx": 1, "method": 1, "need": 1, "nested": 1, "normalize": 1, "normalizes": 1, "normalizing": 1, "note": 1, "of": 2, "on": 1, "or": 3, "parameters": 1, "prop": 2, "props": 9, "reactive": 1, "read": 1, "reflects": 1, "rendered": 1, "resolve": 1, "resolved": 10, "resolvedchildren": 2, "resolves": 1, "resolving": 1, "result": 1, "return": 4, "returned": 1, "returns": 5, "single": 1, "slot": 1, "slot-like": 1, "solid-js": 1, "stable": 2, "structures": 1, "tags": 1, "that": 2, "the": 7, "this": 1, "title": 1, "to": 1, "toarray": 4, "transform": 1, "ts": 2, "tsx": 3, "type": 2, "typically": 1, "updates": 1, "usage": 4, "use_cases": 1, "useful": 2, "utilities": 1, "value": 3, "version": 1, "when": 1, "with": 2, "working": 1, "wrapper": 1, "yes": 1, "yields": 1, "you": 1 }, "length": 291 }, { "id": "4b0b6924d4f4ca444d886f88", "doc_id": "97931f2f8fe801afbe8adab8", "title": "class-style", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/components/class-style.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/class-style.json", "content": "--- title: Class and style order: 2 use_cases: \u003e- styling components, dynamic theming, conditional styling, css integration, responsive design, ui customization tags: - styling - css - classes - themes - dynamic - ui version: '1.0' description: \u003e- Style Solid components with CSS classes and inline styles. Learn dynamic styling, classList usage, and theme implementation. --- Similar to HTML, Solid uses `class` and `style` attributes to style elements via [CSS (Cascading Style Sheets)](https://developer.mozilla.org/en-US/docs/Glossary/CSS). - **Class attribute**: Enables styling one or more elements through CSS rules. - **Style attribute**: Inline styles that style single elements. ## Inline styling The `style` attribute allows you to style a single element and define CSS variables dynamically during runtime. To use it, you can pass either a string or an object. ```tsx // String \u003cdiv style=\"color: red;\"\u003eThis is a red div\u003c/div\u003e // Object \u003cdiv style={{ color: \"red\" }}\u003eThis is a red div\u003c/div\u003e ``` When using an object, the keys represent the CSS property names, and the values represent the CSS property values. The keys must be in dash-case, and the values must be strings. \u003cEraserLink href=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=PgkKTGxuuOtDiQ_1KDA5dw\" preview=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=PgkKTGxuuOtDiQ_1KDA5dw\u0026type=embed\" /\u003e While inline styles are useful for rapid prototyping, they are not recommended for production use. This is because they are not reusable, and they can be difficult to maintain over time. ## Classes The `class` attribute allows you to style one or more elements through CSS rules. This provides a more structured approach to styling, as it allows you to reuse styles across multiple elements. Classes are defined in CSS files. You can import these files using the `import` statement at the top of your component file. The CSS file's contents will be inserted into a style tag in the document head. ```jsx import \"./Card.css\"; function Card() { // ... } ``` ### Dynamic styling Dynamic styling provides a way to change the appearance of a component based on state or other factors like user inputs. This is useful for creating components that can adapt to different scenarios without having to create multiple versions of the same component: ```tsx const [theme, setTheme] = createSignal(\"light\"); \u003cdiv class={theme() === \"light\" ? \"light-theme\" : \"dark-theme\"}\u003e This div's theme is determined dynamically! \u003c/div\u003e; ``` [Props](/concepts/components/props) are another way to change styles. By passing props to components, you can adapt styles based on the component's usage or the data it receives: ```tsx function ThemedButton(props) { return ( \u003cbutton class={props.theme}\u003e {props.theme === \"light\" ? \"Light Button\" : \"Dark Button\"} \u003c/button\u003e ); } ``` ### `classList` When you want to apply multiple classes to an element, you can use the [`classList` attribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). To use it, you can pass either a string or an object where the keys represent the class names and the values represent a boolean expression. When the value is `true`, the class is applied; when `false`, it is removed. ```tsx const [current, setCurrent] = createSignal(\"foo\"); \u003cbutton classList={{ \"selected\" : current() === \"foo\" }} onClick={() =\u003e setCurrent(\"foo\")} \u003e foo \u003c/button\u003e; ``` `classList` is often more efficient than `class` when handling multiple conditional classes. This is because `classList` selectively toggles only the classes that require alteration, while `class` will be re-evaluated each time. For a single conditional class, using `class` might be simpler but as the number of conditional classes increases, `classList` offers a more readable and declarative approach. :::note While it is possible, mixing `class` and `classList` can introduce unexpected errors. If both are reactive when the `class` value changes, Solid will set the entire `class` attribute. This will remove any classes set by `classList`. To avoid this, the `class` attribute should be set to a static string or nothing. Alternatively, `class` can be set to a static computed value (e.g. `class={baseClass()}`), but then it must be put before any `classList` attributes. Additionally, since `classList` is a pseudo-attribute, it doesn't work in prop spreads like `\u003cdiv {...props} /\u003e` or in `\u003cDynamic\u003e`. ::: For a guide on how to style your components, see [Styling Your Components](/guides/styling-your-components), where we cover the different ways to style your components using libraries such as [Tailwind CSS](https://tailwindcss.com/).", "term_freq": { "##": 2, "###": 2, "**class": 1, "**style": 1, "---": 2, "//": 3, "//app": 2, "//developer": 2, "//github": 1, "//tailwindcss": 1, "/\u003e": 2, "/card": 1, "/concepts/components/props": 1, "/guides/styling-your-components": 1, "\u003c/button\u003e": 2, "\u003c/div\u003e": 1, "\u003cbutton": 2, "\u003cdiv": 4, "\u003cdynamic\u003e": 1, "\u003ceraserlink": 1, "===": 3, "=\u003e": 1, "\u003e-": 2, "\u003ethis": 2, "across": 1, "adapt": 2, "additionally": 1, "allows": 3, "alteration": 1, "alternatively": 1, "an": 4, "and": 11, "another": 1, "any": 2, "appearance": 1, "applied": 1, "apply": 1, "approach": 2, "are": 6, "as": 3, "at": 1, "attribute": 5, "attribute**": 2, "attributes": 2, "avoid": 1, "baseclass": 1, "based": 2, "be": 9, "because": 2, "before": 1, "boolean": 1, "both": 1, "but": 2, "button": 2, "by": 2, "can": 9, "card": 1, "cascading": 1, "change": 2, "changes": 1, "class": 14, "class-style": 1, "class=": 3, "classes": 9, "classlist": 10, "classlist=": 1, "color": 2, "com/": 1, "com/solidjs/solid-docs/blob/head/src/routes/concepts/components/class-style": 1, "component": 4, "components": 7, "computed": 1, "conditional": 4, "const": 2, "contents": 1, "cover": 1, "create": 1, "createsignal": 2, "creating": 1, "css": 13, "current": 2, "customization": 1, "dark": 1, "dark-theme": 1, "dash-case": 1, "data": 1, "declarative": 1, "define": 1, "defined": 1, "description": 1, "design": 1, "determined": 1, "different": 2, "difficult": 1, "div": 1, "div\u003c/div\u003e": 2, "document": 1, "doesn": 1, "during": 1, "dynamic": 5, "dynamically": 2, "each": 1, "efficient": 1, "either": 2, "element": 2, "elements": 5, "elements=pgkktgxuuotdiq_1kda5dw": 1, "elements=pgkktgxuuotdiq_1kda5dw\u0026type=embed": 1, "enables": 1, "entire": 1, "eraser": 2, "errors": 1, "expression": 1, "factors": 1, "false": 1, "file": 2, "files": 2, "foo": 4, "for": 5, "function": 2, "github-document": 1, "guide": 1, "handling": 1, "having": 1, "head": 1, "how": 1, "href=": 1, "html": 1, "https": 6, "if": 1, "implementation": 1, "import": 3, "in": 5, "increases": 1, "inline": 4, "inputs": 1, "inserted": 1, "integration": 1, "into": 1, "introduce": 1, "io/workspace/madvfw5oryupjowslyk9": 1, "io/workspace/madvfw5oryupjowslyk9/preview": 1, "is": 12, "it": 8, "jsx": 1, "keys": 3, "learn": 1, "libraries": 1, "light": 4, "light-theme": 1, "like": 2, "maintain": 1, "mdx": 1, "might": 1, "mixing": 1, "more": 5, "mozilla": 2, "multiple": 4, "must": 3, "names": 2, "not": 2, "note": 1, "nothing": 1, "number": 1, "object": 4, "of": 4, "offers": 1, "often": 1, "on": 3, "onclick=": 1, "one": 2, "only": 1, "or": 8, "order": 1, "org/en-us/docs/glossary/css": 1, "org/en-us/docs/web/api/element/classlist": 1, "other": 1, "over": 1, "pass": 2, "passing": 1, "possible": 1, "preview=": 1, "production": 1, "prop": 1, "property": 2, "props": 6, "prototyping": 1, "provides": 2, "pseudo-attribute": 1, "put": 1, "rapid": 1, "re-evaluated": 1, "reactive": 1, "readable": 1, "receives": 1, "recommended": 1, "red": 4, "remove": 1, "removed": 1, "represent": 4, "require": 1, "responsive": 1, "return": 1, "reusable": 1, "reuse": 1, "rules": 2, "runtime": 1, "same": 1, "scenarios": 1, "see": 1, "selected": 1, "selectively": 1, "set": 4, "setcurrent": 2, "settheme": 1, "sheets": 1, "should": 1, "similar": 1, "simpler": 1, "since": 1, "single": 3, "solid": 3, "spreads": 1, "state": 1, "statement": 1, "static": 2, "string": 4, "strings": 1, "structured": 1, "style": 12, "style=": 2, "styles": 6, "styling": 10, "such": 1, "tag": 1, "tags": 1, "tailwind": 1, "than": 1, "that": 3, "the": 28, "theme": 6, "themedbutton": 1, "themes": 1, "theming": 1, "then": 1, "these": 1, "they": 3, "this": 7, "through": 2, "time": 2, "title": 1, "to": 21, "toggles": 1, "top": 1, "true": 1, "tsx": 4, "ui": 2, "unexpected": 1, "usage": 2, "use": 4, "use_cases": 1, "useful": 2, "user": 1, "uses": 1, "using": 4, "value": 3, "values": 4, "variables": 1, "version": 1, "versions": 1, "via": 1, "want": 1, "way": 2, "ways": 1, "we": 1, "when": 6, "where": 2, "while": 3, "will": 4, "with": 1, "without": 1, "work": 1, "you": 9, "your": 4 }, "length": 661 }, { "id": "6ff0a470f8f3c013e2d6e51f", "doc_id": "188e1c80ccd45df452ba3d65", "title": "classlist", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/classlist.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/classlist.json", "content": "--- title: classList order: 1 use_cases: \u003e- styling components, dynamic classes, conditional styles, toggling classes, reactive styling tags: - styling - css - classes - reactive - conditional - dom version: '1.0' description: \u003e- Manage element classes dynamically in SolidJS with class and classList attributes. Toggle multiple classes reactively based on application state. --- Solid offers two attributes to set the class of an element: `class` and `classList`. First, `class` can be set like other attributes. For example: ```tsx // Two static classes \u003cdiv class=\"active editing\" /\u003e // One dynamic class, deleting class attribute if it's not needed \u003cdiv class={state.active ? 'active' : undefined} /\u003e // Two dynamic classes \u003cdiv class={`${state.active ? 'active' : ''} ${state.currentId === row.id ? 'editing' : ''}`} /\u003e ``` :::note Note that \u003ccode\u003eclassName\u003c/code\u003e was deprecated in Solid 1.4 in favor of {\" \"} \u003ccode\u003eclass\u003c/code\u003e. ::: Alternatively, the `classList` pseudo-attribute lets you specify an object, where each key is a class and the value is treated as a boolean representing whether to include that class. For example (matching the last example): ```tsx \u003cdiv classList={{ active: state.active, editing: state.currentId === row.id, }} /\u003e ``` This example compiles to a render effect that dynamically calls [element.classList.toggle](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle) to turn each class on or off, only when the corresponding boolean changes. For example, when `state.active` becomes true [false], the element gains [loses] the `active` class. The value passed into `classList` can be any expression (including a signal getter) that evaluates to an appropriate object. Some examples: ```tsx // Dynamic class name and value \u003cdiv classList={{ [className()]: classOn() }} /\u003e // Signal class list const [classes, setClasses] = createSignal({}) setClasses((c) =\u003e ({ ...c, active: true })) \u003cdiv classList={classes()} /\u003e ``` While possible, mixing `class` and `classList` in Solid can lead to unexpected behavior. The safest approach is to use a static string (or nothing) for `class` and keep `classList` reactive. You can also use a static computed value for class, such as `class={baseClass()}`, however you must make sure it comes before any `classList` pseudo-attributes. If both `class` and `classList` are reactive, changes to `class` will overwrite the entire `class` attribute, potentially undoing any updates made by `classList`. Because classList is a compile-time pseudo-attribute, it does not work in a prop spread like `\u003cdiv {...props} /\u003e` or in `\u003cDynamic\u003e`.", "term_freq": { "---": 2, "//": 5, "//developer": 1, "//github": 1, "/\u003e": 7, "\u003ccode\u003eclass\u003c/code\u003e": 1, "\u003ccode\u003eclassname\u003c/code\u003e": 1, "\u003cdiv": 7, "\u003cdynamic\u003e": 1, "===": 2, "=\u003e": 1, "\u003e-": 2, "active": 10, "also": 1, "alternatively": 1, "an": 3, "and": 7, "any": 3, "application": 1, "approach": 1, "appropriate": 1, "are": 1, "as": 2, "attribute": 2, "attributes": 3, "baseclass": 1, "based": 1, "be": 2, "because": 1, "becomes": 1, "before": 1, "behavior": 1, "boolean": 2, "both": 1, "by": 1, "calls": 1, "can": 4, "changes": 2, "class": 18, "class=": 4, "classes": 9, "classlist": 13, "classlist=": 3, "classname": 1, "classon": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/jsx-attributes/classlist": 1, "comes": 1, "compile-time": 1, "compiles": 1, "components": 1, "computed": 1, "conditional": 2, "const": 1, "corresponding": 1, "createsignal": 1, "css": 1, "currentid": 2, "deleting": 1, "deprecated": 1, "description": 1, "does": 1, "dom": 1, "dynamic": 4, "dynamically": 2, "each": 2, "editing": 3, "effect": 1, "element": 4, "entire": 1, "evaluates": 1, "example": 5, "examples": 1, "expression": 1, "false": 1, "favor": 1, "first": 1, "for": 5, "gains": 1, "getter": 1, "github-document": 1, "however": 1, "https": 2, "id": 2, "if": 2, "in": 6, "include": 1, "including": 1, "into": 1, "is": 4, "it": 3, "keep": 1, "key": 1, "last": 1, "lead": 1, "lets": 1, "like": 2, "list": 1, "loses": 1, "made": 1, "make": 1, "manage": 1, "matching": 1, "mdx": 1, "mixing": 1, "mozilla": 1, "multiple": 1, "must": 1, "name": 1, "needed": 1, "not": 2, "note": 2, "nothing": 1, "object": 2, "of": 2, "off": 1, "offers": 1, "on": 2, "one": 1, "only": 1, "or": 3, "order": 1, "org/en-us/docs/web/api/domtokenlist/toggle": 1, "other": 1, "overwrite": 1, "passed": 1, "possible": 1, "potentially": 1, "prop": 1, "props": 1, "pseudo-attribute": 2, "pseudo-attributes": 1, "reactive": 4, "reactively": 1, "render": 1, "representing": 1, "row": 2, "safest": 1, "set": 2, "setclasses": 2, "signal": 2, "solid": 3, "solidjs": 1, "some": 1, "specify": 1, "spread": 1, "state": 7, "static": 3, "string": 1, "styles": 1, "styling": 3, "such": 1, "sure": 1, "tags": 1, "that": 4, "the": 10, "this": 1, "title": 1, "to": 8, "toggle": 2, "toggling": 1, "treated": 1, "true": 2, "tsx": 3, "turn": 1, "two": 3, "undefined": 1, "undoing": 1, "unexpected": 1, "updates": 1, "use": 2, "use_cases": 1, "value": 4, "version": 1, "was": 1, "when": 2, "where": 1, "whether": 1, "while": 1, "will": 1, "with": 1, "work": 1, "you": 3 }, "length": 365 }, { "id": "f5be8cb571e8153de2d21f27", "doc_id": "8414a590cdd87be2921f828e", "title": "client modules | Remix", "url": "https://v2.remix.run/docs/file-conventions/-client", "type": "html", "source": "remix:does", "path": "devour_data/docs/client-modules---remix-8414a590.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docs.client modulesGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite .client modules While uncommon, you may have a file or dependency that uses module side effects in the browser. You can use *.client.ts on file names or nest files within .client directories to force them out of server bundles. // this would break the server export const supportsVibrationAPI = \"vibrate\" in window.navigator; Note that values exported from this module will all be undefined on the server, so the only places to use them are in useEffect and user events like click handlers. import { supportsVibrationAPI } from \"./feature-check.client.ts\"; console.log(supportsVibrationAPI); // server: undefined // client: true | false .client directories are only supported when using Remix Vite. The Classic Remix Compiler only supports .client files. Refer to the Route Module section in the sidebar for more information.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_961\\\":-5,\\\"_962\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":960},{\\\"_18\\\":168,\\\"_169\\\":10},\\\"docs/file-conventions/-client.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"client-modules\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#client-modules\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003e.client\\u003c/code\\u003e modules\\u003c/h1\\u003e\\\\n\\u003cp\\u003eWhile uncommon, you may have a file or dependency that uses module side effects in the browser. You can use \\u003ccode\\u003e*.client.ts\\u003c/code\\u003e on file names or nest files within \\u003ccode\\u003e.client\\u003c/code\\u003e directories to force them out of server bundles.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"feature-check.client.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"feature-check.client.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// this would break the server\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esupportsVibrationAPI\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evibrate\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ein\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ewindow\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigator\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNote that values exported from this module will all be \\u003ccode\\u003eundefined\\u003c/code\\u003e on the server, so the only places to use them are in \\u003ca href=\\\\\\\"https://react.dev/reference/react/useEffect\\\\\\\"\\u003e\\u003ccode\\u003euseEffect\\u003c/code\\u003e\\u003c/a\\u003e and user events like click handlers.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esupportsVibrationAPI\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./feature-check.client.ts\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econsole\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elog\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esupportsVibrationAPI\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// server: undefined\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// client: true | false\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003e\\u003ccode\\u003e.client\\u003c/code\\u003e directories are only supported when using \\u003ca href=\\\\\\\"../guides/vite\\\\\\\"\\u003eRemix Vite\\u003c/a\\u003e. The \\u003ca href=\\\\\\\"../guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\\"\\u003eClassic Remix Compiler\\u003c/a\\u003e only supports \\u003ccode\\u003e.client\\u003c/code\\u003e files.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eRefer to the Route Module section in the sidebar for more information.\\u003c/p\\u003e\\\",\\\"docs/file-conventions/-client\\\",\\\"headings\\\",[],[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#client-modules\\\\\\": 1, "$\\": 1, "$rc": 3, "--base03": 3, "--base05": 2, "--base08": 6, "--base0b": 2, "--base0d": 1, "--base0e": 6, "-1\\\\\\": 1, "-5": 2, "/$": 1, "//": 3, "//react": 1, "//v2": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/feature-check": 2, "/guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\": 1, "/guides/vite\\\\\\": 1, "0===e": 1, "10": 44, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 2, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "1\\\\\\": 2, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 2, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 2, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 1, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "97": 1, "98": 1, "99": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 25, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enote": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\n": 1, "\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003erefer": 1, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 2, "\\u003ca": 3, "\\u003ccode\\u003e": 2, "\\u003ccode\\u003e*": 1, "\\u003ccode\\u003eundefined\\u003c/code\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 12, "\\u003e": 2, "\\u003e//": 3, "\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003e": 1, "\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003e\\u003cspan": 2, "\\u003e\\u003ccode\\u003euseeffect\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003cpre": 2, "\\u003e\\u003cspan": 7, "\\u003eclassic": 1, "\\u003econsole\\u003c/span\\u003e": 1, "\\u003econst\\u003c/span\\u003e": 1, "\\u003eexport\\u003c/span\\u003e": 1, "\\u003efrom\\u003c/span\\u003e": 1, "\\u003eimport\\u003c/span\\u003e": 1, "\\u003ein\\u003c/span\\u003e": 1, "\\u003elog\\u003c/span\\u003e": 1, "\\u003enavigator\\u003c/span\\u003e": 1, "\\u003eremix": 1, "\\u003esupportsvibrationapi\\u003c/span\\u003e": 3, "\\u003evibrate\\u003c/span\\u003e\\\\\\": 1, "\\u003ewindow\\u003c/span\\u003e": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 32, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 152, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 1, "_958\\": 1, "_961\\": 1, "_962\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "all": 3, "an": 1, "and": 11, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 2, "approach": 1, "are": 4, "aria-hidden=\\\\\\": 1, "as": 3, "asked": 1, "asset": 3, "at": 1, "attrs\\": 1, "await\\": 1, "b=document": 1, "backend": 3, "basename": 1, "be": 3, "been": 2, "before": 1, "breadcrumbs": 3, "break": 3, "breeze": 1, "browser": 5, "built": 1, "bundles": 4, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "can": 3, "catch": 1, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 9, "classic": 1, "cli": 5, "cli\\": 1, "click": 2, "client": 26, "client-modules\\\\\\": 1, "client-q2ogymm2": 1, "client\\": 2, "client\\u003c/code\\u003e": 4, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "code": 4, "codeblock-line\\\\\\": 8, "color": 20, "community": 3, "community\\": 1, "compiler": 1, "compiler\\u003c/a\\u003e": 1, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 2, "const": 1, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 15, "css\\": 1, "d=c": 2, "data": 16, "data-code-block=\\\\\\": 2, "data-filename=\\\\\\": 2, "data-lang=\\\\\\": 4, "data-line-number=\\\\\\": 8, "data-line-numbers=\\\\\\": 4, "data=": 1, "data\\": 2, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 5, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "dev/reference/react/useeffect\\\\\\": 1, "development": 3, "directories": 4, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 1, "doc\\": 1, "docs": 1, "docs/file-conventions/-client": 1, "docs/file-conventions/-client\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "document": 1, "done": 1, "e--": 1, "e=0": 1, "effects": 2, "else": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "events": 2, "everything": 1, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "export": 1, "exported": 2, "extract": 2, "extract\\": 1, "f=a": 1, "false": 4, "false\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003e\\u003ccode\\u003e": 1, "faqs": 2, "faqs\\": 1, "feature-check": 2, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 13, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 6, "files\\": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "for": 8, "force": 2, "form": 11, "form\\": 1, "found": 3, "frequently": 1, "from": 9, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 1, "future": 4, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "handle": 2, "handle\\": 1, "handlers": 2, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "have": 2, "headers": 2, "headers\\": 1, "headings\\": 1, "help": 1, "here": 1, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href=\\\\\\": 4, "html": 1, "html\\": 1, "https": 3, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 1, "icon-link\\\\\\": 1, "id=\\\\\\": 1, "if": 6, "import": 6, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 13, "inc": 1, "index": 3, "information": 2, "initial": 1, "insertbefore": 1, "integrating": 1, "interactions": 1, "into": 2, "introduction": 1, "is": 1, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "iterative": 1, "javascript": 2, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "key": 4, "know": 1, "lazy": 3, "learning": 1, "let": 3, "licensed": 1, "like": 2, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "log": 1, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "math": 1, "may": 2, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 12, "module\\": 1, "moduleaction": 2, "modules": 8, "modules\\": 3, "modules\\u003c/h1\\u003e\\\\n\\u003cp\\u003ewhile": 1, "modulesgetting": 1, "more": 2, "most": 1, "names": 2, "naming": 2, "naming\\": 1, "navigator": 1, "navlink": 2, "navlink\\": 1, "need": 1, "nest": 2, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 3, "note": 1, "null": 1, "number": 1, "of": 5, "on": 6, "once": 1, "one": 1, "only": 6, "open": 1, "optimization": 2, "optimization\\": 1, "or": 5, "order\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 3, "outlet": 2, "outlet\\": 1, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "places": 2, "positions": 2, "postcss": 2, "postcss\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "react": 8, "react-router-scroll-positions": 1, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "refer": 1, "regular": 3, "related": 1, "released": 2, "remix": 13, "remix\\": 2, "removechild": 2, "removeitem": 1, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 14, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/file-conventions/-client": 1, "run\\": 1, "running": 1, "runtimes": 3, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "section": 2, "server": 22, "server\\": 3, "server\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "side": 2, "sidebar": 2, "simplifying": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "so": 2, "spa": 3, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 20, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 3, "support\\": 1, "supported": 2, "supports": 2, "supportsvibrationapi": 3, "tabindex=\\\\\\": 1, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 4, "the": 20, "them": 4, "this": 6, "through": 1, "title\\": 1, "tls": 2, "tls\\": 1, "to": 16, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 8, "true\\\\\\": 5, "try": 1, "ts": 4, "ts\\": 1, "ts\\\\\\": 2, "ts\\u003c/code\\u003e": 1, "ts\\u003c/span\\u003e\\\\\\": 1, "tutorial": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "typescript\\\\\\": 4, "ui": 2, "ui\\": 1, "uncommon": 2, "undefined": 2, "undefined\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "use": 4, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "useeffect": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 2, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "uses": 2, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 2, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "values": 2, "vanilla": 3, "var": 22, "variables": 2, "variables\\": 1, "vibrate": 1, "view": 2, "vite": 6, "vite\\": 1, "vite\\u003c/a\\u003e": 1, "vs": 6, "walk": 1, "way": 1, "when": 3, "while": 2, "why": 1, "will": 4, "window": 12, "with": 4, "within": 2, "would": 2, "writes": 2, "writes\\": 1, "you": 9, "your": 3, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 4159 }, { "id": "92c345a41b4e29eded9d2c8d", "doc_id": "8414a590cdd87be2921f828e", "title": "client modules | Remix", "url": "https://v2.remix.run/docs/file-conventions/-client", "type": "html", "source": "remix:routes", "path": "devour_data/docs/client-modules---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docs.client modulesGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite .client modules While uncommon, you may have a file or dependency that uses module side effects in the browser. You can use *.client.ts on file names or nest files within .client directories to force them out of server bundles. // this would break the server export const supportsVibrationAPI = \"vibrate\" in window.navigator; Note that values exported from this module will all be undefined on the server, so the only places to use them are in useEffect and user events like click handlers. import { supportsVibrationAPI } from \"./feature-check.client.ts\"; console.log(supportsVibrationAPI); // server: undefined // client: true | false .client directories are only supported when using Remix Vite. The Classic Remix Compiler only supports .client files. Refer to the Route Module section in the sidebar for more information.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_961\\\":-5,\\\"_962\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":960},{\\\"_18\\\":168,\\\"_169\\\":10},\\\"docs/file-conventions/-client.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"client-modules\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#client-modules\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003e.client\\u003c/code\\u003e modules\\u003c/h1\\u003e\\\\n\\u003cp\\u003eWhile uncommon, you may have a file or dependency that uses module side effects in the browser. You can use \\u003ccode\\u003e*.client.ts\\u003c/code\\u003e on file names or nest files within \\u003ccode\\u003e.client\\u003c/code\\u003e directories to force them out of server bundles.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"feature-check.client.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"feature-check.client.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// this would break the server\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esupportsVibrationAPI\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evibrate\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ein\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ewindow\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigator\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNote that values exported from this module will all be \\u003ccode\\u003eundefined\\u003c/code\\u003e on the server, so the only places to use them are in \\u003ca href=\\\\\\\"https://react.dev/reference/react/useEffect\\\\\\\"\\u003e\\u003ccode\\u003euseEffect\\u003c/code\\u003e\\u003c/a\\u003e and user events like click handlers.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esupportsVibrationAPI\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./feature-check.client.ts\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econsole\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elog\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esupportsVibrationAPI\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// server: undefined\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// client: true | false\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003e\\u003ccode\\u003e.client\\u003c/code\\u003e directories are only supported when using \\u003ca href=\\\\\\\"../guides/vite\\\\\\\"\\u003eRemix Vite\\u003c/a\\u003e. The \\u003ca href=\\\\\\\"../guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\\"\\u003eClassic Remix Compiler\\u003c/a\\u003e only supports \\u003ccode\\u003e.client\\u003c/code\\u003e files.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eRefer to the Route Module section in the sidebar for more information.\\u003c/p\\u003e\\\",\\\"docs/file-conventions/-client\\\",\\\"headings\\\",[],[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#client-modules\\\\\\": 1, "$\\": 1, "$rc": 3, "--base03": 3, "--base05": 2, "--base08": 6, "--base0b": 2, "--base0d": 1, "--base0e": 6, "-1\\\\\\": 1, "-5": 2, "/$": 1, "//": 3, "//react": 1, "//v2": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/feature-check": 2, "/guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\": 1, "/guides/vite\\\\\\": 1, "0===e": 1, "10": 44, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 2, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "1\\\\\\": 2, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 2, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 2, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 1, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "97": 1, "98": 1, "99": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 25, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enote": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\n": 1, "\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003erefer": 1, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 2, "\\u003ca": 3, "\\u003ccode\\u003e": 2, "\\u003ccode\\u003e*": 1, "\\u003ccode\\u003eundefined\\u003c/code\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 12, "\\u003e": 2, "\\u003e//": 3, "\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003e": 1, "\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003e\\u003cspan": 2, "\\u003e\\u003ccode\\u003euseeffect\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003cpre": 2, "\\u003e\\u003cspan": 7, "\\u003eclassic": 1, "\\u003econsole\\u003c/span\\u003e": 1, "\\u003econst\\u003c/span\\u003e": 1, "\\u003eexport\\u003c/span\\u003e": 1, "\\u003efrom\\u003c/span\\u003e": 1, "\\u003eimport\\u003c/span\\u003e": 1, "\\u003ein\\u003c/span\\u003e": 1, "\\u003elog\\u003c/span\\u003e": 1, "\\u003enavigator\\u003c/span\\u003e": 1, "\\u003eremix": 1, "\\u003esupportsvibrationapi\\u003c/span\\u003e": 3, "\\u003evibrate\\u003c/span\\u003e\\\\\\": 1, "\\u003ewindow\\u003c/span\\u003e": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 32, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 152, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 1, "_958\\": 1, "_961\\": 1, "_962\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "all": 3, "an": 1, "and": 11, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 2, "approach": 1, "are": 4, "aria-hidden=\\\\\\": 1, "as": 3, "asked": 1, "asset": 3, "at": 1, "attrs\\": 1, "await\\": 1, "b=document": 1, "backend": 3, "basename": 1, "be": 3, "been": 2, "before": 1, "breadcrumbs": 3, "break": 3, "breeze": 1, "browser": 5, "built": 1, "bundles": 4, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "can": 3, "catch": 1, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 9, "classic": 1, "cli": 5, "cli\\": 1, "click": 2, "client": 26, "client-modules\\\\\\": 1, "client-q2ogymm2": 1, "client\\": 2, "client\\u003c/code\\u003e": 4, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "code": 4, "codeblock-line\\\\\\": 8, "color": 20, "community": 3, "community\\": 1, "compiler": 1, "compiler\\u003c/a\\u003e": 1, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 2, "const": 1, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 15, "css\\": 1, "d=c": 2, "data": 16, "data-code-block=\\\\\\": 2, "data-filename=\\\\\\": 2, "data-lang=\\\\\\": 4, "data-line-number=\\\\\\": 8, "data-line-numbers=\\\\\\": 4, "data=": 1, "data\\": 2, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 5, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "dev/reference/react/useeffect\\\\\\": 1, "development": 3, "directories": 4, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 1, "doc\\": 1, "docs": 1, "docs/file-conventions/-client": 1, "docs/file-conventions/-client\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "document": 1, "done": 1, "e--": 1, "e=0": 1, "effects": 2, "else": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "events": 2, "everything": 1, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "export": 1, "exported": 2, "extract": 2, "extract\\": 1, "f=a": 1, "false": 4, "false\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003e\\u003ccode\\u003e": 1, "faqs": 2, "faqs\\": 1, "feature-check": 2, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 13, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 6, "files\\": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "for": 8, "force": 2, "form": 11, "form\\": 1, "found": 3, "frequently": 1, "from": 9, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 1, "future": 4, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "handle": 2, "handle\\": 1, "handlers": 2, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "have": 2, "headers": 2, "headers\\": 1, "headings\\": 1, "help": 1, "here": 1, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href=\\\\\\": 4, "html": 1, "html\\": 1, "https": 3, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 1, "icon-link\\\\\\": 1, "id=\\\\\\": 1, "if": 6, "import": 6, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 13, "inc": 1, "index": 3, "information": 2, "initial": 1, "insertbefore": 1, "integrating": 1, "interactions": 1, "into": 2, "introduction": 1, "is": 1, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "iterative": 1, "javascript": 2, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "key": 4, "know": 1, "lazy": 3, "learning": 1, "let": 3, "licensed": 1, "like": 2, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "log": 1, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "math": 1, "may": 2, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 12, "module\\": 1, "moduleaction": 2, "modules": 8, "modules\\": 3, "modules\\u003c/h1\\u003e\\\\n\\u003cp\\u003ewhile": 1, "modulesgetting": 1, "more": 2, "most": 1, "names": 2, "naming": 2, "naming\\": 1, "navigator": 1, "navlink": 2, "navlink\\": 1, "need": 1, "nest": 2, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 3, "note": 1, "null": 1, "number": 1, "of": 5, "on": 6, "once": 1, "one": 1, "only": 6, "open": 1, "optimization": 2, "optimization\\": 1, "or": 5, "order\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 3, "outlet": 2, "outlet\\": 1, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "places": 2, "positions": 2, "postcss": 2, "postcss\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "react": 8, "react-router-scroll-positions": 1, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "refer": 1, "regular": 3, "related": 1, "released": 2, "remix": 13, "remix\\": 2, "removechild": 2, "removeitem": 1, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 14, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/file-conventions/-client": 1, "run\\": 1, "running": 1, "runtimes": 3, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "section": 2, "server": 22, "server\\": 3, "server\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "side": 2, "sidebar": 2, "simplifying": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "so": 2, "spa": 3, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 20, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 3, "support\\": 1, "supported": 2, "supports": 2, "supportsvibrationapi": 3, "tabindex=\\\\\\": 1, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 4, "the": 20, "them": 4, "this": 6, "through": 1, "title\\": 1, "tls": 2, "tls\\": 1, "to": 16, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 8, "true\\\\\\": 5, "try": 1, "ts": 4, "ts\\": 1, "ts\\\\\\": 2, "ts\\u003c/code\\u003e": 1, "ts\\u003c/span\\u003e\\\\\\": 1, "tutorial": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "typescript\\\\\\": 4, "ui": 2, "ui\\": 1, "uncommon": 2, "undefined": 2, "undefined\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "use": 4, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "useeffect": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 2, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "uses": 2, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 2, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "values": 2, "vanilla": 3, "var": 22, "variables": 2, "variables\\": 1, "vibrate": 1, "view": 2, "vite": 6, "vite\\": 1, "vite\\u003c/a\\u003e": 1, "vs": 6, "walk": 1, "way": 1, "when": 3, "while": 2, "why": 1, "will": 4, "window": 12, "with": 4, "within": 2, "would": 2, "writes": 2, "writes\\": 1, "you": 9, "your": 3, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 4159 }, { "id": "3c657279f4a7c8b1c89aa195", "doc_id": "171471127719bfb211fa8d96", "title": "client-only", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/client/client-only.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/client-only.json", "content": "--- title: clientOnly use_cases: \u003e- browser apis, window access, document manipulation, third-party widgets, maps, charts, avoiding ssr issues tags: - client-only - browser - ssr - rendering - components version: '1.0' description: \u003e- Render components exclusively on the client side in SolidStart. Handle browser APIs and bypass SSR for specific components. --- The `clientOnly` function allows components or pages to render exclusively on the client side, bypassing server-side rendering (_SSR_). This is useful for code that relies on the browser-specific APIs, such as `window` or `document`. ## How to Use `clientOnly` in Components 1. **Isolate Client-Only Logic**: Create a separate file for the component that depends on browser-specific features, such as DOM or browser APIs. ```tsx title=\"ClientOnlyComponent\" export default function ClientOnlyComponent() { const location = document.location.href; return \u003cdiv\u003eCurrent URL: {location}\u003c/div\u003e; } ``` 2. **Import with `clientOnly`**: Use `clientOnly` to dynamically import the isolated component in your parent component or page. ```tsx title=\"IsomorphicComponent.tsx\" import { clientOnly } from \"@solidjs/start\"; const ClientOnlyComp = clientOnly(() =\u003e import(\"./ClientOnlyComponent\")); export default function IsomorphicComponent() { return \u003cClientOnlyComp /\u003e; } ``` 3. **Add a Fallback (Optional)**: Provide a `fallback` prop to display content while the client-only component is loading. ```tsx \u003cClientOnlyComp fallback={\u003cdiv\u003eLoading...\u003c/div\u003e} /\u003e ``` ## Disabling SSR for Entire Pages To disable SSR for an entire page, apply `clientOnly` at the page level. This ensures the page renders only on the client. ```tsx title=\"routes/page.tsx\" import { clientOnly } from \"@solidjs/start\"; export default clientOnly(async () =\u003e ({ default: Page }), { lazy: true }); function Page() { // This code runs only on the client return \u003cdiv\u003eClient-only page content\u003c/div\u003e; } ``` ## Parameters | Argument | Type | Description | | --------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | | `fn` | `() =\u003e Promise\u003c{ default: () =\u003e JSX.Element }\u003e` | A function that dynamically imports a component to be rendered only on the client side. | | `options` | `{ lazy?: boolean }` | An optional object to configure loading behavior. Set `lazy: false` for eager loading | | `props` | `Record\u003cstring, any\u003e \u0026 { fallback?: JSX.Element }` | Props passed to the component, including an optional `fallback` for rendering while the component loads. |", "term_freq": { "##": 3, "**": 2, "**add": 1, "**import": 1, "**isolate": 1, "---": 2, "---------": 1, "--------------------------------------------------": 1, "--------------------------------------------------------------------------------------------------------": 1, "//": 1, "//github": 1, "/\u003e": 2, "/clientonlycomponent": 1, "\u003c/div\u003e": 2, "\u003cclientonlycomp": 2, "\u003cdiv\u003eclient-only": 1, "\u003cdiv\u003ecurrent": 1, "\u003cdiv\u003eloading": 1, "=\u003e": 4, "\u003e-": 2, "@solidjs/start": 2, "_ssr_": 1, "access": 1, "allows": 1, "an": 3, "and": 1, "any\u003e": 1, "apis": 4, "apply": 1, "argument": 1, "as": 2, "async": 1, "at": 1, "avoiding": 1, "be": 1, "behavior": 1, "boolean": 1, "browser": 4, "browser-specific": 2, "bypass": 1, "bypassing": 1, "charts": 1, "client": 5, "client-only": 4, "clientonly": 10, "clientonlycomp": 1, "clientonlycomponent": 2, "code": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/client/client-only": 1, "component": 7, "components": 5, "configure": 1, "const": 2, "content": 1, "content\u003c/div\u003e": 1, "create": 1, "default": 5, "depends": 1, "description": 2, "disable": 1, "disabling": 1, "display": 1, "document": 3, "dom": 1, "dynamically": 2, "eager": 1, "element": 2, "ensures": 1, "entire": 2, "exclusively": 2, "export": 3, "fallback": 4, "fallback=": 1, "false": 1, "features": 1, "file": 1, "fn": 1, "for": 7, "from": 2, "function": 5, "github-document": 1, "handle": 1, "how": 1, "href": 1, "https": 1, "import": 4, "imports": 1, "in": 3, "including": 1, "is": 2, "isolated": 1, "isomorphiccomponent": 2, "issues": 1, "jsx": 2, "lazy": 3, "level": 1, "loading": 3, "loads": 1, "location": 3, "logic**": 1, "manipulation": 1, "maps": 1, "mdx": 1, "object": 1, "on": 7, "only": 3, "optional": 3, "options": 1, "or": 4, "page": 7, "pages": 2, "parameters": 1, "parent": 1, "passed": 1, "promise\u003c": 1, "prop": 1, "props": 2, "provide": 1, "record\u003cstring": 1, "relies": 1, "render": 2, "rendered": 1, "rendering": 3, "renders": 1, "return": 3, "routes/page": 1, "runs": 1, "separate": 1, "server-side": 1, "set": 1, "side": 3, "solidstart": 1, "specific": 1, "ssr": 5, "such": 2, "tags": 1, "that": 3, "the": 14, "third-party": 1, "this": 3, "title": 1, "title=": 3, "to": 8, "true": 1, "tsx": 6, "type": 1, "url": 1, "use": 2, "use_cases": 1, "useful": 1, "version": 1, "while": 2, "widgets": 1, "window": 2, "with": 1, "your": 1 }, "length": 315 }, { "id": "e593ef1ce41e013266b459c2", "doc_id": "8bfa814e4f3d1b5a5ea8a5be", "title": "client-setup", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/getting-started/client-setup.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/client-setup.json", "content": "--- title: Client setup order: 2 use_cases: \u003e- seo, meta tags, document head management, social media tags, page titles, canonical urls tags: - meta - seo - head - client - tags version: '1.0' description: \u003e- Manage document head tags in Solid apps. Add titles, meta tags, and links dynamically for better SEO and social media sharing. --- You can inject a tag into the `\u003chead /\u003e` by rendering one of the head tag components when necessary. No special requirements are needed on the client side. ```js import { MetaProvider, Title, Link, Meta } from \"@solidjs/meta\"; const App = () =\u003e ( \u003cMetaProvider\u003e \u003cdiv class=\"Home\"\u003e \u003cTitle\u003eTitle of page\u003c/Title\u003e \u003cLink rel=\"canonical\" href=\"http://solidjs.com/\" /\u003e \u003cMeta name=\"example\" content=\"whatever\" /\u003e // ... \u003c/div\u003e \u003c/MetaProvider\u003e ); ```", "term_freq": { "---": 2, "//": 1, "//github": 1, "//solidjs": 1, "/\u003e": 3, "\u003c/div\u003e": 1, "\u003c/metaprovider\u003e": 1, "\u003cdiv": 1, "\u003chead": 1, "\u003clink": 1, "\u003cmeta": 1, "\u003cmetaprovider\u003e": 1, "\u003ctitle\u003etitle": 1, "=\u003e": 1, "\u003e-": 2, "@solidjs/meta": 1, "add": 1, "and": 2, "app": 1, "apps": 1, "are": 1, "better": 1, "by": 1, "can": 1, "canonical": 2, "class=": 1, "client": 3, "client-setup": 1, "com/": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-meta/getting-started/client-setup": 1, "components": 1, "const": 1, "content=": 1, "description": 1, "document": 2, "dynamically": 1, "example": 1, "for": 1, "from": 1, "github-document": 1, "head": 4, "home": 1, "href=": 1, "http": 1, "https": 1, "import": 1, "in": 1, "inject": 1, "into": 1, "js": 1, "link": 1, "links": 1, "manage": 1, "management": 1, "mdx": 1, "media": 2, "meta": 4, "metaprovider": 1, "name=": 1, "necessary": 1, "needed": 1, "no": 1, "of": 2, "on": 1, "one": 1, "order": 1, "page": 1, "page\u003c/title\u003e": 1, "rel=": 1, "rendering": 1, "requirements": 1, "seo": 3, "setup": 1, "sharing": 1, "side": 1, "social": 2, "solid": 1, "special": 1, "tag": 2, "tags": 6, "the": 3, "title": 2, "titles": 2, "urls": 1, "use_cases": 1, "version": 1, "whatever": 1, "when": 1, "you": 1 }, "length": 119 }, { "id": "077ddea097a0708ef851e220", "doc_id": "6995fc9d245372926f6bc20d", "title": "clientAction | Remix", "url": "https://v2.remix.run/docs/route/client-action", "type": "html", "source": "remix:does", "path": "devour_data/docs/clientaction---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsclientActionGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageArgumentsparamsrequestserverActionOn this pageArgumentsparamsrequestserverActionclientAction In addition to (or in place of) your action, you may define a clientAction function that will execute on the client. Each route can define a clientAction function that handles mutations: export const clientAction = async ({ request, params, serverAction, }: ClientActionFunctionArgs) =\u003e { invalidateClientSideCache(); const data = await serverAction(); return data; }; This function is only ever run on the client and can be used in a few ways: Instead of a server action for full-client routes To use alongside a clientLoader cache by invalidating the cache on mutations To facilitate a migration from React Router Arguments params This function receives the same params argument as an action. request This function receives the same request argument as an action. serverAction serverAction is an asynchronous function that makes the fetch call to the server action for this route. See also: Client Data Guide clientLoader © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_976\\\":-5,\\\"_977\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":975},{\\\"_18\\\":228},\\\"docs/route/client-action.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"clientaction\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#clientaction\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eclientAction\\u003c/code\\u003e\\u003c/h1\\u003e\\\\n\\u003cp\\u003eIn addition to (or in place of) your \\u003ca href=\\\\\\\"./action\\\\\\\"\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e, you may define a \\u003ccode\\u003eclientAction\\u003c/code\\u003e function that will execute on the client.\\u003c/p\\u003e\\\\n\\u003cp\\u003eEach route can define a \\u003ccode\\u003eclientAction\\u003c/code\\u003e function that handles mutations:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eclientAction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e ({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eserverAction\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eClientActionFunctionArgs\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003einvalidateClientSideCache\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eserverAction\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThis function is only ever run on the client and can be used in a few ways:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eInstead of a server \\u003ccode\\u003eaction\\u003c/code\\u003e for full-client routes\\u003c/li\\u003e\\\\n\\u003cli\\u003eTo use alongside a \\u003ccode\\u003eclientLoader\\u003c/code\\u003e cache by invalidating the cache on mutations\\u003c/li\\u003e\\\\n\\u003cli\\u003eTo facilitate a migration from React Router\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2 id=\\\\\\\"arguments\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#arguments\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eArguments\\u003c/h2\\u003e\\\\n\\u003ch3 id=\\\\\\\"params\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#params\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eparams\\u003c/code\\u003e\\u003c/h3\\u003e\\\\n\\u003cp\\u003eThis function receives the same \\u003ca href=\\\\\\\"./loader#params\\\\\\\"\\u003e\\u003ccode\\u003eparams\\u003c/code\\u003e\\u003c/a\\u003e argument as an \\u003ca href=\\\\\\\"./action\\\\\\\"\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"request\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#request\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003erequest\\u003c/code\\u003e\\u003c/h3\\u003e\\\\n\\u003cp\\u003eThis function receives the same \\u003ca href=\\\\\\\"./loader#request\\\\\\\"\\u003e\\u003ccode\\u003erequest\\u003c/code\\u003e\\u003c/a\\u003e argument as an \\u003ca href=\\\\\\\"./action\\\\\\\"\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"serveraction\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#serveraction\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eserverAction\\u003c/code\\u003e\\u003c/h3\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003eserverAction\\u003c/code\\u003e is an asynchronous function that makes the \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\\\\\\\"\\u003efetch\\u003c/a\\u003e call to the server \\u003ccode\\u003eaction\\u003c/code\\u003e for this route.\\u003c/p\\u003e\\\\n\\u003cp\\u003eSee also:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../guides/client-data\\\\\\\"\\u003eClient Data Guide\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"./client-loader\\\\\\\"\\u003eclientLoader\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\",\\\"docs/route/client-action\\\",\\\"headings\\\",[960,965,969,972],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Arguments\\\",\\\"arguments\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":968},\\\"h3\\\",\\\"\\u003ccode\\u003eparams\\u003c/code\\u003e\\\",\\\"params\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":971},\\\"\\u003ccode\\u003erequest\\u003c/code\\u003e\\\",\\\"request\\\",{\\\"_961\\\":966,\\\"_955\\\":973,\\\"_24\\\":974},\\\"\\u003ccode\\u003eserverAction\\u003c/code\\u003e\\\",\\\"serveraction\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#arguments\\\\\\": 1, "#clientaction\\\\\\": 1, "#params\\\\\\": 1, "#request\\\\\\": 1, "#serveraction\\\\\\": 1, "$\\": 1, "$rc": 3, "--base05": 1, "--base08": 5, "--base0a": 3, "--base0d": 4, "--base0e": 7, "-1\\\\\\": 5, "-5": 2, "/$": 1, "//developer": 1, "//v2": 2, "/action\\\\\\": 3, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/client-loader\\\\\\": 1, "/guides/client-data\\\\\\": 1, "/loader#params\\\\\\": 1, "/loader#request\\\\\\": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "1\\\\\\": 1, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 2, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 1, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 1, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 1, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 1, "963": 1, "964": 1, "965": 1, "966": 3, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "98": 1, "99": 1, "9\\\\\\": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 2, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 22, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 8, "\\n": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003c/p\\u003e\\\\n\\u003ch3": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eeach": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003esee": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003einstead": 1, "\\u003c/span\\u003e": 1, "\\u003ca": 6, "\\u003ccode\\u003eaction\\u003c/code\\u003e": 2, "\\u003ccode\\u003eclientaction\\u003c/code\\u003e": 2, "\\u003ccode\\u003eclientloader\\u003c/code\\u003e": 1, "\\u003ccode\\u003eparams\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003erequest\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003eserveraction\\u003c/code\\u003e\\": 1, "\\u003ch1": 1, "\\u003cspan": 18, "\\u003e": 9, "\\u003e=\\u003c/span\\u003e": 2, "\\u003e=\\u003e\\u003c/span\\u003e": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eclientaction\\u003c/code\\u003e\\u003c/h1\\u003e\\\\n\\u003cp\\u003ein": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eparams\\u003c/code\\u003e\\u003c/h3\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003erequest\\u003c/code\\u003e\\u003c/h3\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eserveraction\\u003c/code\\u003e\\u003c/h3\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003eserveraction\\u003c/code\\u003e": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003earguments\\u003c/h2\\u003e\\\\n\\u003ch3": 1, "\\u003e\\u003ca": 5, "\\u003e\\u003ccode\\u003e\\u003cspan": 1, "\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e": 3, "\\u003e\\u003ccode\\u003eparams\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003erequest\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003cpre": 1, "\\u003e\\u003cspan": 6, "\\u003easync\\u003c/span\\u003e": 1, "\\u003eawait\\u003c/span\\u003e": 1, "\\u003eclient": 1, "\\u003eclientaction\\u003c/span\\u003e": 1, "\\u003eclientactionfunctionargs\\u003c/span\\u003e": 1, "\\u003eclientloader\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\": 1, "\\u003econst\\u003c/span\\u003e": 2, "\\u003edata\\u003c/span\\u003e": 2, "\\u003eexport\\u003c/span\\u003e": 1, "\\u003efetch\\u003c/a\\u003e": 1, "\\u003einvalidateclientsidecache\\u003c/span\\u003e": 1, "\\u003eparams\\u003c/span\\u003e": 1, "\\u003erequest\\u003c/span\\u003e": 1, "\\u003ereturn\\u003c/span\\u003e": 1, "\\u003eserveraction\\u003c/span\\u003e": 2, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 156, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 5, "_958\\": 1, "_961\\": 4, "_976\\": 1, "_977\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "action": 5, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "addition": 2, "all": 1, "alongside": 2, "also": 2, "an": 7, "and": 11, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 2, "approach": 1, "argument": 4, "arguments": 1, "arguments\\": 2, "arguments\\\\\\": 1, "aria-hidden=\\\\\\": 5, "as": 7, "asked": 1, "asset": 3, "async": 1, "asynchronous": 2, "at": 1, "attrs\\": 1, "await": 1, "await\\": 1, "b=document": 1, "backend": 3, "basename": 1, "be": 3, "been": 2, "before": 1, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 3, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "by": 2, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "cache": 4, "call": 2, "can": 5, "catch": 1, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 14, "cli": 5, "cli\\": 1, "client": 17, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 6, "clientaction\\": 1, "clientaction\\\\\\": 1, "clientactionfunctionargs": 1, "clientloader": 4, "clientloader\\": 1, "close": 1, "code": 4, "codeblock-line\\\\\\": 9, "color": 20, "community": 3, "community\\": 1, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 1, "const": 2, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 15, "css\\": 1, "d=c": 2, "data": 20, "data-code-block=\\\\\\": 1, "data-lang=\\\\\\": 2, "data-line-number=\\\\\\": 9, "data-line-numbers=\\\\\\": 2, "data=": 1, "data\\": 2, "defer": 2, "defer\\": 1, "deferred": 1, "define": 4, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "development": 3, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 1, "doc\\": 1, "docs/route/client-action": 1, "docs/route/client-action\\": 1, "docsblogresourcesreact": 1, "docsclientactiongetting": 1, "docsdocsblogresourcesview": 1, "document": 1, "done": 1, "e--": 1, "e=0": 1, "each": 1, "else": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "ever": 2, "everything": 1, "examples": 1, "execute": 2, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "export": 1, "extract": 2, "extract\\": 1, "f=a": 1, "facilitate": 2, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 3, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "few": 2, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "for": 10, "form": 11, "form\\": 1, "found": 3, "frequently": 1, "from": 8, "frontend": 2, "frontend\\": 1, "full-client": 2, "fullstack": 3, "function": 13, "future": 4, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "gotchas": 2, "gotchas\\": 1, "guide": 4, "guide\\": 1, "guide\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "h3\\": 1, "handle": 2, "handle\\": 1, "handles": 2, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 1, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href=\\\\\\": 13, "html": 1, "html\\": 1, "https": 3, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 5, "icon-link\\\\\\": 5, "id=\\\\\\": 5, "if": 6, "import": 5, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 11, "inc": 1, "index": 3, "initial": 1, "insertbefore": 1, "instead": 1, "integrating": 1, "interactions": 1, "into": 2, "introduction": 1, "invalidateclientsidecache": 1, "invalidating": 2, "is": 5, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "iterative": 1, "javascript": 2, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "key": 4, "know": 1, "lazy": 3, "learning": 1, "let": 3, "licensed": 1, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "makes": 3, "management": 4, "management\\": 2, "manual": 3, "math": 1, "may": 2, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "migrating": 4, "migration": 2, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 6, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "most": 1, "mozilla": 1, "mutations": 3, "mutations\\u003c/li\\u003e\\\\n\\u003cli\\u003eto": 1, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 1, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 3, "null": 1, "number": 1, "of": 7, "on": 9, "once": 1, "one": 1, "only": 2, "open": 1, "optimization": 2, "optimization\\": 1, "or": 3, "order\\": 1, "org/en-us/docs/web/api/fetch_api\\\\\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "pageargumentsparamsrequestserveractionclientaction": 1, "pageargumentsparamsrequestserveractionon": 1, "param": 2, "param\\": 1, "params": 3, "params\\": 1, "params\\\\\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "place": 2, "positions": 2, "postcss": 2, "postcss\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "react": 10, "react-router-scroll-positions": 1, "readablestream": 1, "receives": 4, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regular": 3, "related": 1, "released": 2, "remix": 10, "remix\\": 2, "removechild": 2, "removeitem": 1, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 4, "request\\": 1, "request\\\\\\": 1, "resource": 3, "resources": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 1, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 16, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 8, "router\\": 2, "router\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2": 1, "routes": 6, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "routes\\u003c/li\\u003e\\\\n\\u003cli\\u003eto": 1, "run": 2, "run/docs/route/client-action": 1, "run\\": 1, "running": 1, "runtimes": 3, "same": 4, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "see": 1, "server": 19, "server\\": 3, "serveraction": 4, "serveraction\\": 1, "serveraction\\\\\\": 1, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "simplifying": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "spa": 3, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 20, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 3, "support\\": 1, "tabindex=\\\\\\": 5, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 6, "the": 20, "this": 9, "through": 1, "title\\": 1, "tls": 2, "tls\\": 1, "to": 16, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 6, "true\\\\\\": 7, "try": 1, "ts": 2, "ts\\": 1, "tsx\\\\\\": 2, "tutorial": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 2, "ui\\": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "use": 2, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 2, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 22, "variables": 2, "variables\\": 1, "view": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "way": 1, "ways": 2, "when": 1, "while": 1, "why": 1, "will": 4, "window": 11, "with": 4, "writes": 2, "writes\\": 1, "you": 7, "your": 5, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 4264 }, { "id": "d239308525c24afc5af850bf", "doc_id": "a99d6a20537dd20d89a2bc91", "title": "cloudflare", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deployment-options/cloudflare.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/cloudflare.json", "content": "--- title: Cloudflare order: 2 mainNavExclude: true use_cases: \u003e- static site hosting, jamstack deployment, edge deployment, cdn hosting, web publishing tags: - cloudflare - pages - deployment - wrangler - hosting - jamstack version: '1.0' description: \u003e- Deploy Solid apps to Cloudflare Pages for fast, global edge hosting with built-in CDN and simple Git integration setup. --- [Cloudflare Pages](https://pages.cloudflare.com/) is a JAMstack platform for frontend developers, where JAMstack stands for JavaScript, APIs, and Markup. For additional details and features, you can [visit the Cloudflare website](https://pages.cloudflare.com/). ## Using the Cloudflare's web interface 1. Navigate to the [Cloudflare login page](https://dash.cloudflare.com/login) and log in or sign up. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=UE1AFe5oESDQkepKNaMxtA\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=UE1AFe5oESDQkepKNaMxtA\u0026type=embed\" /\u003e 2. After logging in, find \"Pages\" in the left-hand navigation bar. Add a new project by clicking \"Create a project,\" then choose \"Connect to Git.\" \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=XcbVyX2a69kSAP1m1220Ug\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=XcbVyX2a69kSAP1m1220Ug\u0026type=embed\" /\u003e 3. You'll have the option to install Cloudflare Pages on all your repositories or select ones. Choose the repository that contains your Solid project. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=SsbGUghc_Vwlvxefe1xAFg\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=SsbGUghc_Vwlvxefe1xAFg\u0026type=embed\" /\u003e 4. Configure your build settings: - The project name will default to the repository name, but you can change it if you wish. - In the \"build command\" field, enter `npm run build` . - For the \"build output directory\" field, use `dist` . - Add an environment variable `NODE_VERSION` and set its value to the version of Node.js you're using. **Note:** This step is crucial because Cloudflare Pages uses a version of Node.js older than v13, which may not fully support Vite, the bundler used in Solid projects. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=1HpIQUkxqNl9j3JlXIUvTg\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=1HpIQUkxqNl9j3JlXIUvTg\u0026type=embed\" /\u003e 5. Once you've configured the settings, click \"Save and Deploy.\" In a few minutes, your Solid project will be live on Cloudflare Pages, accessible via a URL formatted as `project_name.pages.dev`. ## Using the Wrangler CLI Wrangler is a command-line tool for building Cloudflare Workers. Here are the steps to deploy your Solid project using Wrangler. 1. Use your package manager of choice to install the Wrangler command-line tool: ```package-install-global wrangler ``` 2. Open your terminal and run the following command to log in: ```bash frame=\"none\" wrangler login ``` 3. Build your project using the following command: ```package-run build ``` 4. Deploy using Wrangler: ```bash wrangler pages deploy dist ``` After running these commands, your project should be live. While the terminal may provide a link, it's more reliable to check your Cloudflare Pages dashboard for the deployed URL, which usually follows the format `project-name.pages.dev`.", "term_freq": { "##": 2, "**": 1, "**note": 1, "---": 2, "//app": 8, "//dash": 1, "//github": 1, "//pages": 2, "/\u003e": 4, "\u003ceraserlink": 4, "\u003e-": 2, "accessible": 1, "add": 2, "additional": 1, "after": 2, "all": 1, "an": 1, "and": 7, "apis": 1, "apps": 1, "are": 1, "as": 1, "bar": 1, "bash": 2, "be": 2, "because": 1, "build": 6, "building": 1, "built-in": 1, "bundler": 1, "but": 1, "by": 1, "can": 2, "cdn": 2, "change": 1, "check": 1, "choice": 1, "choose": 2, "cli": 1, "click": 1, "clicking": 1, "cloudflare": 16, "com/": 2, "com/login": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/deployment-options/cloudflare": 1, "command": 3, "command-line": 2, "commands": 1, "configure": 1, "configured": 1, "connect": 1, "contains": 1, "create": 1, "crucial": 1, "dashboard": 1, "default": 1, "deploy": 5, "deployed": 1, "deployment": 3, "description": 1, "details": 1, "dev": 2, "developers": 1, "directory": 1, "dist": 2, "edge": 2, "elements=1hpiqukxqnl9j3jlxiuvtg": 1, "elements=1hpiqukxqnl9j3jlxiuvtg\u0026type=embed": 1, "elements=ssbgughc_vwlvxefe1xafg": 1, "elements=ssbgughc_vwlvxefe1xafg\u0026type=embed": 1, "elements=ue1afe5oesdqkepknamxta": 1, "elements=ue1afe5oesdqkepknamxta\u0026type=embed": 1, "elements=xcbvyx2a69ksap1m1220ug": 1, "elements=xcbvyx2a69ksap1m1220ug\u0026type=embed": 1, "enter": 1, "environment": 1, "eraser": 8, "fast": 1, "features": 1, "few": 1, "field": 2, "find": 1, "following": 2, "follows": 1, "for": 7, "format": 1, "formatted": 1, "frame=": 1, "frontend": 1, "fully": 1, "git": 2, "github-document": 1, "global": 1, "have": 1, "here": 1, "hosting": 4, "href=": 4, "https": 12, "if": 1, "in": 7, "install": 2, "integration": 1, "interface": 1, "io/workspace/w9y9pnvjwsqdcepnteoe": 4, "io/workspace/w9y9pnvjwsqdcepnteoe/preview": 4, "is": 3, "it": 2, "its": 1, "jamstack": 4, "javascript": 1, "js": 2, "left-hand": 1, "link": 1, "live": 2, "ll": 1, "log": 2, "logging": 1, "login": 2, "mainnavexclude": 1, "manager": 1, "markup": 1, "may": 2, "mdx": 1, "minutes": 1, "more": 1, "name": 2, "navigate": 1, "navigation": 1, "new": 1, "node": 2, "node_version": 1, "none": 1, "not": 1, "npm": 1, "of": 3, "older": 1, "on": 2, "once": 1, "ones": 1, "open": 1, "option": 1, "or": 2, "order": 1, "output": 1, "package": 1, "package-install-global": 1, "package-run": 1, "page": 1, "pages": 11, "platform": 1, "preview=": 4, "project": 8, "project-name": 1, "project_name": 1, "projects": 1, "provide": 1, "publishing": 1, "re": 1, "reliable": 1, "repositories": 1, "repository": 2, "run": 2, "running": 1, "save": 1, "select": 1, "set": 1, "settings": 2, "setup": 1, "should": 1, "sign": 1, "simple": 1, "site": 1, "solid": 5, "stands": 1, "static": 1, "step": 1, "steps": 1, "support": 1, "tags": 1, "terminal": 2, "than": 1, "that": 1, "the": 21, "then": 1, "these": 1, "this": 1, "title": 1, "to": 10, "tool": 2, "true": 1, "up": 1, "url": 2, "use": 2, "use_cases": 1, "used": 1, "uses": 1, "using": 6, "usually": 1, "v13": 1, "value": 1, "variable": 1, "ve": 1, "version": 3, "via": 1, "visit": 1, "vite": 1, "web": 2, "website": 1, "where": 1, "which": 2, "while": 1, "will": 2, "wish": 1, "with": 1, "workers": 1, "wrangler": 9, "you": 6, "your": 10 }, "length": 436 }, { "id": "389123821ad46c8ae5ac048a", "doc_id": "555644e24e6823db6807ce4a", "title": "Community | Remix", "url": "https://v2.remix.run/docs/start/community", "type": "html", "source": "remix:does", "path": "devour_data/docs/community---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsCommunityGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Community We work hard to keep the Remix community a friendly place where people want to hang out, help, and be helped. We're all here just trying to build great websites and make the web better. To that end, please keep in mind our code of conduct. Remix Discord — A great place to have conversations, ask and answer questions, all about Remix. GitHub Discussions — This is the best place to propose changes to Remix. The team uses it to gauge interest and understand use cases. Remix Twitter — Tips, updates, and news about Remix from the team. Examples — Dozens of Remix examples from the team and community. Remix Conf — A yearly conference all about Remix with talks primarily from the community. Remix Mailing List — Not-so-regular email from the Remix team letting you know what the team is up to. Meetups — There are Remix Meetups all over the world with thousands of members. Some online, some in person, and some a hybrid of the two. Remix Guide — A wonderful community site that gathers everything that's going on in the Remix ecosystem: online courses, blog posts, app templates, events, and more. Moulton — Community Remix newsletter Releases on GitHub — Not a bad idea to subscribe to Remix releases, so you know what's coming. © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_961\\\":-5,\\\"_962\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":960},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"docs/start/community.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"community\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#community\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eCommunity\\u003c/h1\\u003e\\\\n\\u003cp\\u003eWe work hard to keep the Remix community a friendly place where people want to hang out, help, and be helped. We're all here just trying to build great websites and make the web better.\\u003c/p\\u003e\\\\n\\u003cp\\u003eTo that end, please keep in mind \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/main/CODE_OF_CONDUCT.md\\\\\\\"\\u003eour code of conduct\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ca href=\\\\\\\"https://rmx.as/discord\\\\\\\"\\u003eRemix Discord\\u003c/a\\u003e — A great place to have conversations, ask and answer questions, all about Remix.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/discussions\\\\\\\"\\u003eGitHub Discussions\\u003c/a\\u003e — This is the best place to propose changes to Remix. The team uses it to gauge interest and understand use cases.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ca href=\\\\\\\"https://twitter.com/remix_run\\\\\\\"\\u003eRemix Twitter\\u003c/a\\u003e — Tips, updates, and news about Remix from the team.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/examples\\\\\\\"\\u003eExamples\\u003c/a\\u003e — Dozens of Remix examples from the team and community.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ca href=\\\\\\\"/conf\\\\\\\"\\u003eRemix Conf\\u003c/a\\u003e — A yearly conference all about Remix with talks primarily from the community.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ca href=\\\\\\\"https://remix.run/newsletter\\\\\\\"\\u003eRemix Mailing List\\u003c/a\\u003e — Not-so-regular email from the Remix team letting you know what the team is up to.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ca href=\\\\\\\"https://rmx.as/meetup\\\\\\\"\\u003eMeetups\\u003c/a\\u003e — There are Remix Meetups all over the world with thousands of members. Some online, some in person, and some a hybrid of the two.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ca href=\\\\\\\"https://remix.guide\\\\\\\"\\u003eRemix Guide\\u003c/a\\u003e — A wonderful community site that gathers everything that's going on in the Remix ecosystem: online courses, blog posts, app templates, events, and more.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ca href=\\\\\\\"https://www.readmoulton.com\\\\\\\"\\u003eMoulton\\u003c/a\\u003e — Community Remix newsletter\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ca href=\\\\\\\"https://github.com/remix-run/remix/releases\\\\\\\"\\u003eReleases on GitHub\\u003c/a\\u003e — Not a bad idea to subscribe to Remix releases, so you know what's coming.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\",\\\"docs/start/community\\\",\\\"headings\\\",[],[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#community\\\\\\": 1, "$\\": 1, "$rc": 3, "-1\\\\\\": 1, "-5": 2, "/$": 1, "//github": 4, "//remix": 2, "//rmx": 2, "//twitter": 1, "//v2": 2, "//www": 1, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/conf\\\\\\": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 2, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 2, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 4, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "97": 1, "98": 1, "99": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 1, "\\n": 1, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ca": 8, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eto": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ca": 1, "\\u003ca": 1, "\\u003ch1": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ecommunity\\u003c/h1\\u003e\\\\n\\u003cp\\u003ewe": 1, "\\u003e\\u003ca": 1, "\\u003e\\u003cspan": 1, "\\u003eexamples\\u003c/a\\u003e": 1, "\\u003egithub": 1, "\\u003emeetups\\u003c/a\\u003e": 1, "\\u003emoulton\\u003c/a\\u003e": 1, "\\u003eour": 1, "\\u003ereleases": 1, "\\u003eremix": 5, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 28, "_22\\": 152, "_24\\": 152, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 9, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 1, "_958\\": 1, "_961\\": 1, "_962\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 7, "accessibility\\": 1, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "all": 9, "an": 1, "and": 25, "answer": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 4, "approach": 1, "are": 2, "aria-hidden=\\\\\\": 1, "as": 3, "as/discord\\\\\\": 1, "as/meetup\\\\\\": 1, "ask": 2, "asked": 1, "asset": 3, "at": 1, "attrs\\": 1, "await\\": 1, "b=document": 1, "backend": 3, "bad": 2, "basename": 1, "be": 3, "been": 2, "before": 1, "best": 2, "better": 2, "blog": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 3, "build": 2, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "can": 1, "cases": 2, "catch": 1, "changelog": 2, "changelog\\": 1, "changes": 2, "children\\": 1, "class=\\\\\\": 1, "cli": 5, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "code": 6, "com/remix-run/examples\\\\\\": 1, "com/remix-run/remix/blob/main/code_of_conduct": 1, "com/remix-run/remix/discussions\\\\\\": 1, "com/remix-run/remix/releases\\\\\\": 1, "com/remix_run\\\\\\": 1, "com\\\\\\": 1, "coming": 2, "community": 15, "community\\": 1, "community\\\\\\": 1, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "conduct": 1, "conduct\\u003c/a\\u003e": 1, "conf": 1, "conf\\u003c/a\\u003e": 1, "conference": 2, "config": 3, "configuration": 2, "configuration\\": 1, "console": 1, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "conversations": 2, "cookies\\": 1, "courses": 2, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 15, "css\\": 1, "d=c": 2, "data": 16, "data=": 1, "data\\": 2, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "development": 3, "disabling": 3, "discord": 1, "discord\\u003c/a\\u003e": 1, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "discussions": 1, "discussions\\u003c/a\\u003e": 1, "do": 1, "doc\\": 1, "docs/start/community": 1, "docs/start/community\\": 1, "docsblogresourcesreact": 1, "docscommunitygetting": 1, "docsdocsblogresourcesview": 1, "document": 1, "done": 1, "dozens": 2, "e--": 1, "e=0": 1, "ecosystem": 2, "else": 2, "email": 2, "end": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "events": 2, "everything": 3, "examples": 4, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "extract": 2, "extract\\": 1, "f=a": 1, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "for": 6, "form": 11, "form\\": 1, "found": 3, "frequently": 1, "friendly": 2, "from": 14, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 1, "future": 4, "gathers": 2, "gauge": 2, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "github": 2, "github\\u003c/a\\u003e": 1, "githubchat": 1, "going": 2, "gotchas": 2, "gotchas\\": 1, "great": 4, "guide": 4, "guide\\": 1, "guide\\\\\\": 1, "guide\\u003c/a\\u003e": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "handle": 2, "handle\\": 1, "handling": 4, "handling\\": 2, "hang": 2, "hard": 2, "has": 2, "hascontent\\": 1, "have": 2, "headers": 2, "headers\\": 1, "headings\\": 1, "help": 3, "helped": 2, "here": 3, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href=\\\\\\": 12, "html": 1, "html\\": 1, "https": 12, "hybrid": 2, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 1, "icon-link\\\\\\": 1, "id=\\\\\\": 1, "idea": 2, "if": 6, "import": 5, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 12, "inc": 1, "index": 3, "initial": 1, "insertbefore": 1, "integrating": 1, "interactions": 1, "interest": 2, "into": 2, "introduction": 1, "is": 5, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 2, "iterative": 1, "javascript": 2, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "just": 2, "keep": 4, "key": 4, "know": 5, "lazy": 3, "learning": 1, "let": 3, "letting": 2, "licensed": 1, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "list": 1, "list\\u003c/a\\u003e": 1, "livereload": 2, "livereload\\": 1, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "mailing": 2, "make": 2, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "math": 1, "md\\": 152, "md\\\\\\": 1, "mdx": 3, "mdx\\": 1, "meetups": 3, "members": 2, "menu\\": 1, "meta": 4, "meta\\": 2, "migrating": 4, "mind": 2, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 6, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "more": 2, "most": 1, "moulton": 1, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 1, "network": 3, "new": 2, "new\\": 1, "news": 2, "newsletter": 1, "newsletter\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003ca": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 5, "not-so-regular": 2, "null": 1, "number": 1, "of": 11, "on": 6, "once": 1, "one": 1, "online": 4, "open": 1, "optimization": 2, "optimization\\": 1, "or": 1, "order\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "our": 1, "out": 3, "outlet": 2, "outlet\\": 1, "over": 2, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "people": 2, "performance": 2, "performance\\": 1, "person": 2, "pipethrough": 1, "place": 6, "please": 2, "positions": 2, "postcss": 2, "postcss\\": 1, "posts": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primarily": 2, "primary": 1, "progressive": 3, "project": 1, "propose": 2, "pull": 1, "query": 3, "questions": 3, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "re": 2, "react": 8, "react-router-scroll-positions": 1, "readablestream": 1, "readmoulton": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regular": 3, "related": 1, "released": 2, "releases": 3, "remix": 37, "remix\\": 2, "removechild": 2, "removeitem": 1, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 12, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/start/community": 1, "run/newsletter\\\\\\": 1, "run\\": 1, "running": 1, "runtimes": 3, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "server": 15, "server\\": 3, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "simplifying": 1, "single": 3, "site": 2, "siteurl\\": 1, "slice": 1, "slug\\": 1, "so": 2, "some": 6, "spa": 3, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "subscribe": 2, "support": 3, "support\\": 1, "tabindex=\\\\\\": 1, "tailwind": 2, "tailwind\\": 1, "talks": 2, "team": 10, "technical": 3, "technologies\\": 1, "templates": 7, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 6, "the": 30, "there": 2, "this": 4, "thousands": 2, "through": 1, "tips": 2, "title\\": 1, "tls": 2, "tls\\": 1, "to": 31, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 6, "true\\\\\\": 1, "try": 1, "trying": 2, "ts": 2, "ts\\": 1, "tutorial": 3, "twitter": 1, "twitter\\u003c/a\\u003e": 1, "two": 2, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 2, "ui\\": 1, "under": 1, "understand": 2, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 2, "updates": 2, "upgrading": 3, "uploads": 2, "uploads\\": 1, "use": 2, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "uses": 2, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 2, "variables": 2, "variables\\": 1, "view": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "want": 2, "way": 1, "we": 3, "web": 2, "websites": 2, "what": 4, "when": 1, "where": 2, "while": 1, "why": 1, "will": 2, "window": 11, "with": 8, "wonderful": 2, "work": 2, "world": 2, "writes": 2, "writes\\": 1, "yearly": 2, "you": 9, "your": 3, "||": 3, "©": 1, "—": 20, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 4179 }, { "id": "8876fa6b124561d33edbc5fd", "doc_id": "95a23241d0d2704a48261618", "title": "complex-state-management", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/complex-state-management.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/complex-state-management.json", "content": "--- title: Complex state management order: 5 use_cases: \u003e- scaling applications, multiple components, backend communication, state synchronization, prop drilling, shared state tags: - stores - state - context - scaling - components - management version: '1.0' description: \u003e- Master complex state management in Solid using stores and context to build scalable, maintainable applications efficiently. --- As applications grow and start to involve many components, more intricate user interactions, and possibly communication with backend services, you may find that staying organized with more [basic state management methods](/guides/state-management) can become difficult to maintain. Consider this example: ```jsx import { For, createSignal, Show, createMemo } from \"solid-js\" const App = () =\u003e { const [tasks, setTasks] = createSignal([]) const [numberOfTasks, setNumberOfTasks] = createSignal(tasks.length) const completedTasks = createMemo(() =\u003e tasks().filter((task) =\u003e task.completed)) let input const addTask = (text) =\u003e { setTasks([...tasks(), { id: tasks().length, text, completed: false }]) setNumberOfTasks(numberOfTasks() + 1) } const toggleTask = (id) =\u003e { setTasks( tasks().map((task) =\u003e task.id !== id ? task : { ...task, completed: !task.completed } ) ) } return ( \u003c\u003e \u003ch1\u003eMy list\u003c/h1\u003e \u003cspan\u003eYou have {numberOfTasks()} task(s) today!\u003c/span\u003e \u003cdiv\u003e \u003cinput ref={input} /\u003e \u003cbutton onClick={(e) =\u003e { if (!input.value.trim()) return addTask(input.value) input.value = \"\" }} \u003e Add Task \u003c/button\u003e \u003c/div\u003e \u003cFor each={tasks()}\u003e {(task) =\u003e { const { id, text } = task console.log(`Creating ${text}`) return ( \u003cdiv\u003e \u003cinput type=\"checkbox\" checked={task.completed} onChange={[toggleTask, id]} /\u003e \u003cspan style={{ \"text-decoration\": task.completed ? \"line-through\" : \"none\", }} \u003e {text} \u003c/span\u003e \u003c/div\u003e ) }} \u003c/For\u003e \u003c/\u003e ) } export default App ``` There are several challenges to managing state in this way: - Increased verbosity with the multiple `createSignal` calls for `tasks`, `numberOfTasks`, as well as a `createMemo` function for `completedTasks`. Additionally, with each state update, there requires manual updates to other related states which risks the application becoming out of sync. - While Solid is optimized, this components design leads to frequent recalculations, such as updating `completedTasks` with every toggle action, which can negatively impact performance. In addition, the dependence on the component's logic on the current state for `numberOfTasks` and `completedTasks` can complicate code understanding. As an application like this scales, managing state in this manner becomes even more complex. Introducing other dependent state variables would require updates across the _entire_ component which would likely introduce more errors. This would likely make it more difficult to separate specific functionalities into distinct, reusable components without transferring a substantial portion of state management logic, as well. ## Introducing stores Through recreating this list using Stores, you will see how stores can improve the readability and management of your code. If you're new to the concept of stores, see the [stores section](/concepts/stores). ## Creating a store To reduce the amount of signals that were used in the original example, you can do the following using a store: ```jsx import { createStore } from \"solid-js/store\" const App = () =\u003e { const [state, setState] = createStore({ tasks: [], numberOfTasks: 0, }) } export default App ``` Through using a store, you no longer need to keep track of separate signals for `tasks`, `numberOfTasks`, and `completedTasks`. ## Accessing state values Once you have created your store, the values can be accessed directly through the first value returned by the `createStore` function: ```jsx import { createStore } from \"solid-js/store\" const App = () =\u003e { const [state, setState] = createStore({ tasks: [], numberOfTasks: 0, }) return ( \u003c\u003e \u003ch1\u003eMy Task List for Today\u003c/h1\u003e \u003cspan\u003eYou have {state.numberOfTasks} task(s) for today!\u003c/span\u003e \u003c/\u003e ) } export default App ``` Through `state.numberOfTasks`, the display will now show the store's value held in the `numberOfTasks` property. ## Making changes to the store When you want to modify your store, you use the second element returned by the `createStore` function. This element allows you to make modifications to the store, letting you both add new properties and update existing ones. However, because properties within a store are created lazily, setting a property in the component function body without creating a tracking scope will **not** update the value. To create the signal so it reactively updates, you have to access the property within a tracking scope, such as using a [`createEffect`](/reference/basic-reactivity/create-effect): ```jsx // not reactive setState(\"numberOfTasks\", state.tasks.length) // reactive createEffect(() =\u003e { setState(\"numberOfTasks\", state.tasks.length) }) ``` ### Adding to an array To add an element to an array, in this case the new task, you can append to the next index of the array through `state.tasks.length`. By pinpointing the `tasks` key in combination with the upcoming position, the new task is added to the end of the array. ```jsx const addTask = (text) =\u003e { setState(\"tasks\", state.tasks.length, { id: state.tasks.length, text, completed: false, }) } ``` The setter in stores follow [path syntax](/concepts/stores#path-syntax-flexibility): `setStore(\"key\", value)`. In the `addTask` function the `tasks` array is appended through `setState(\"tasks\", state.tasks.length, { id: state.tasks.length, text, completed: false })`, an example of this in action. #### Mutating state with `produce` In situations where you need to make multiple `setState` calls and target multiple properties, you can simplify your code and improve readability by using Solid's [`produce`](/concepts/stores#store-updates-with-produce) utility function. Something such as toggle function: ```jsx const toggleTask = (id) =\u003e { const currentCompletedStatus = state.tasks[id].completed setState( \"tasks\", (task) =\u003e task.id === id, \"completed\", !currentCompletedStatus ) } ``` Can be simplified using `produce`: ```jsx import { produce } from \"solid-js/store\" const toggleTask = (id) =\u003e { setState( \"tasks\", (task) =\u003e task.id === id, produce((task) =\u003e { task.completed = !task.completed }) ) } // You can also rewrite the `addTask` function through produce const addTask = (text) =\u003e { setState( \"tasks\", produce((task) =\u003e { task.push({ id: state.tasks.length, text, completed: false }) }) ) } ``` Read about some of the other [advantages to using `produce`](/concepts/stores#store-updates-with-produce). :::note Another benefit to working with `produce` is that it offers a way to modify a store without having to make multiple `setStore` calls. ```jsx // without produce batch(() =\u003e { setState(0, \"text\", \"I'm updated text\") setState(0, \"completed\", true) }) // with produce setState( 0, produce((task) =\u003e { task.text = \"I'm updated text\"; task.completed = true; }) ) ``` ::: The updated example: ```jsx import { For, createEffect, Show } from \"solid-js\" import { createStore, produce } from \"solid-js/store\" const App = () =\u003e { let input // lets you target the input value const [state, setState] = createStore({ tasks: [], numberOfTasks: 0, }) const addTask = (text) =\u003e { setState(\"tasks\", state.tasks.length, { id: state.tasks.length, text, completed: false, }) } const toggleTask = (id) =\u003e { setState( \"tasks\", (task) =\u003e task.id === id, produce((task) =\u003e { task.completed = !task.completed }) ) } createEffect(() =\u003e { setState(\"numberOfTasks\", state.tasks.length) }) return ( \u003c\u003e \u003cdiv\u003e \u003ch1\u003eMy Task List for Today\u003c/h1\u003e \u003cspan\u003eYou have {state.numberOfTasks} task(s) for today!\u003c/span\u003e \u003c/div\u003e \u003cinput ref={input} /\u003e \u003cbutton onClick={(e) =\u003e { if (!input.value.trim()) return addTask(input.value) input.value = \"\" }} \u003e Add Task \u003c/button\u003e \u003cFor each={state.tasks}\u003e {(task) =\u003e { const { id, text } = task return ( \u003cdiv\u003e \u003cinput type=\"checkbox\" checked={task.completed} onChange={() =\u003e toggleTask(task.id)} /\u003e \u003cspan\u003e{text}\u003c/span\u003e \u003c/div\u003e ) }} \u003c/For\u003e \u003c/\u003e ) } export default App ``` ## State sharing As applications grow and become more complex, sharing state between components can become a challenge. Passing state and functions from parent to child components, especially across multiple levels, is commonly referred to as \"prop drilling\". Prop drilling can lead to verbose, hard-to-maintain code, and can make the data flow in an application more difficult to follow. To solve this problem and allow for a more scalable and maintainable codebase, Solid provides [context](/concepts/context). To use this, you need to create a context. This context will have a default value and can be consumed by any _descendant_ component. ```jsx import { createContext } from \"solid-js\" const TaskContext = createContext() ``` Your components will be wrapped with the `Provider` from the context, and passed with the values that you wish to share. ```jsx import { createStore } from \"solid-js/store\" const TaskApp = () =\u003e { const [state, setState] = createStore({ tasks: [], numberOfTasks: 0, }) return ( \u003cTaskContext.Provider value={{ state, setState }}\u003e {/* Your components */} \u003c/TaskContext.Provider\u003e ) } ``` In any descendent component, you can consume the context values using `useContext`: ```jsx import { useContext } from \"solid-js\" const TaskList = () =\u003e { const { state, setState } = useContext(TaskContext) // Now you can use the shared state and functions } ``` For a deeper dive, please refer to our dedicated [page on context](/concepts/context).", "term_freq": { "##": 5, "###": 1, "####": 1, "**not**": 1, "*/": 1, "---": 2, "/*": 1, "//": 7, "//github": 1, "/\u003e": 4, "/concepts/context": 2, "/concepts/stores": 1, "/concepts/stores#path-syntax-flexibility": 1, "/concepts/stores#store-updates-with-produce": 2, "/guides/state-management": 1, "/reference/basic-reactivity/create-effect": 1, "\u003c/\u003e": 3, "\u003c/button\u003e": 2, "\u003c/div\u003e": 4, "\u003c/for\u003e": 2, "\u003c/span\u003e": 5, "\u003c/taskcontext": 1, "\u003c\u003e": 3, "\u003cbutton": 2, "\u003cdiv\u003e": 4, "\u003cfor": 2, "\u003ch1\u003emy": 3, "\u003cinput": 4, "\u003cspan": 1, "\u003cspan\u003e": 1, "\u003cspan\u003eyou": 3, "\u003ctaskcontext": 1, "==": 1, "===": 3, "=\u003e": 32, "\u003e-": 2, "_descendant_": 1, "_entire_": 1, "about": 1, "access": 1, "accessed": 1, "accessing": 1, "across": 2, "action": 2, "add": 4, "added": 1, "adding": 1, "addition": 1, "additionally": 1, "addtask": 8, "advantages": 1, "allow": 1, "allows": 1, "also": 1, "amount": 1, "an": 6, "and": 17, "another": 1, "any": 2, "app": 8, "append": 1, "appended": 1, "application": 3, "applications": 4, "are": 2, "array": 5, "as": 10, "backend": 2, "basic": 1, "batch": 1, "be": 4, "because": 1, "become": 3, "becomes": 1, "becoming": 1, "benefit": 1, "between": 1, "body": 1, "both": 1, "build": 1, "by": 5, "calls": 3, "can": 16, "case": 1, "challenge": 1, "challenges": 1, "changes": 1, "checkbox": 2, "checked=": 2, "child": 1, "code": 4, "codebase": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/complex-state-management": 1, "combination": 1, "commonly": 1, "communication": 2, "completed": 19, "completedtasks": 5, "complex": 4, "complex-state-management": 1, "complicate": 1, "component": 5, "components": 9, "concept": 1, "consider": 1, "console": 1, "const": 26, "consume": 1, "consumed": 1, "context": 8, "create": 2, "createcontext": 2, "created": 2, "createeffect": 4, "creatememo": 3, "createsignal": 4, "createstore": 10, "creating": 3, "current": 1, "currentcompletedstatus": 2, "data": 1, "dedicated": 1, "deeper": 1, "default": 5, "dependence": 1, "dependent": 1, "descendent": 1, "description": 1, "design": 1, "difficult": 3, "directly": 1, "display": 1, "distinct": 1, "dive": 1, "do": 1, "drilling": 3, "each": 1, "each=": 2, "efficiently": 1, "element": 3, "end": 1, "errors": 1, "especially": 1, "even": 1, "every": 1, "example": 4, "existing": 1, "export": 4, "false": 5, "filter": 1, "find": 1, "first": 1, "flow": 1, "follow": 2, "following": 1, "for": 12, "frequent": 1, "from": 11, "function": 8, "functionalities": 1, "functions": 2, "github-document": 1, "grow": 2, "hard-to-maintain": 1, "have": 6, "having": 1, "held": 1, "how": 1, "however": 1, "https": 1, "id": 22, "if": 3, "impact": 1, "import": 9, "improve": 2, "in": 15, "increased": 1, "index": 1, "input": 11, "interactions": 1, "into": 1, "intricate": 1, "introduce": 1, "introducing": 2, "involve": 1, "is": 5, "it": 3, "jsx": 12, "keep": 1, "key": 2, "lazily": 1, "lead": 1, "leads": 1, "length": 13, "let": 2, "lets": 1, "letting": 1, "levels": 1, "like": 1, "likely": 2, "line-through": 1, "list": 3, "list\u003c/h1\u003e": 1, "log": 1, "logic": 2, "longer": 1, "maintain": 1, "maintainable": 2, "make": 5, "making": 1, "management": 6, "managing": 2, "manner": 1, "manual": 1, "many": 1, "map": 1, "master": 1, "may": 1, "mdx": 1, "methods": 1, "modifications": 1, "modify": 2, "more": 8, "multiple": 6, "mutating": 1, "need": 3, "negatively": 1, "new": 4, "next": 1, "no": 1, "none": 1, "not": 1, "note": 1, "now": 2, "numberoftasks": 17, "of": 10, "offers": 1, "on": 3, "once": 1, "onchange=": 2, "onclick=": 2, "ones": 1, "optimized": 1, "order": 1, "organized": 1, "original": 1, "other": 3, "our": 1, "out": 1, "page": 1, "parent": 1, "passed": 1, "passing": 1, "path": 1, "performance": 1, "pinpointing": 1, "please": 1, "portion": 1, "position": 1, "possibly": 1, "problem": 1, "produce": 14, "prop": 3, "properties": 3, "property": 3, "provider": 2, "provider\u003e": 1, "provides": 1, "push": 1, "re": 1, "reactive": 2, "reactively": 1, "read": 1, "readability": 2, "recalculations": 1, "recreating": 1, "reduce": 1, "ref=": 2, "refer": 1, "referred": 1, "related": 1, "require": 1, "requires": 1, "return": 8, "returned": 2, "reusable": 1, "rewrite": 1, "risks": 1, "scalable": 2, "scales": 1, "scaling": 2, "scope": 2, "second": 1, "section": 1, "see": 2, "separate": 2, "services": 1, "setnumberoftasks": 2, "setstate": 20, "setstore": 2, "settasks": 3, "setter": 1, "setting": 1, "several": 1, "share": 1, "shared": 2, "sharing": 2, "show": 3, "signal": 1, "signals": 2, "simplified": 1, "simplify": 1, "situations": 1, "so": 1, "solid": 4, "solid-js": 4, "solid-js/store": 5, "solve": 1, "some": 1, "something": 1, "specific": 1, "start": 1, "state": 40, "states": 1, "staying": 1, "store": 10, "stores": 8, "style=": 1, "substantial": 1, "such": 3, "sync": 1, "synchronization": 1, "syntax": 1, "tags": 1, "target": 2, "task": 41, "taskapp": 1, "taskcontext": 2, "tasklist": 1, "tasks": 35, "text": 18, "text-decoration": 1, "that": 4, "the": 47, "there": 2, "this": 13, "through": 7, "title": 1, "to": 35, "today": 3, "today\u003c/h1\u003e": 2, "toggle": 2, "toggletask": 6, "track": 1, "tracking": 2, "transferring": 1, "trim": 2, "true": 2, "type=": 2, "understanding": 1, "upcoming": 1, "update": 3, "updated": 3, "updates": 3, "updating": 1, "use": 3, "use_cases": 1, "usecontext": 3, "used": 1, "user": 1, "using": 9, "utility": 1, "value": 12, "value=": 1, "values": 4, "variables": 1, "verbose": 1, "verbosity": 1, "version": 1, "want": 1, "way": 2, "well": 2, "were": 1, "when": 1, "where": 1, "which": 3, "while": 1, "will": 5, "wish": 1, "with": 11, "within": 2, "without": 4, "working": 1, "would": 3, "wrapped": 1, "you": 20, "your": 6 }, "length": 1286 }, { "id": "e1c1d9040daa52dbeb9b64df", "doc_id": "1853b1634bbb3ba177d3aef8", "title": "component", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/getting-started/component.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/component.json", "content": "--- title: Component routing use_cases: \u003e- defining routes, jsx routing, template-based routing, initial setup, basic navigation tags: - jsx - components - routing - setup - templates version: '1.0' description: \u003e- Define routes using JSX components in SolidJS Router for intuitive, template-based routing in your applications. --- In Solid Router, routes can be defined directly in an application's template using JSX. This is the most common way to define routes in Solid Router. To define routes using JSX, the [`Route`](/solid-router/reference/components/route) is added to the [`\u003cRouter\u003e`](/solid-router/reference/components/router) component for each path you want to define: ```jsx import { render } from \"solid-js/web\"; import { Router, Route } from \"@solidjs/router\"; import Home from \"./routes/Home\"; render( () =\u003e ( \u003cRouter\u003e \u003cRoute path=\"/\" component={Home} /\u003e \u003c/Router\u003e ), document.getElementById(\"app\") ); ``` The Route component takes a `path` prop, which is the path to match, and a `component` prop, where you pass the component (or element) to render when the path matches. In the example above, the `Home` page is rendered when the user navigates to the root path `/`. To apply multiple routes to the router, add additional `Route` components to the `Router`: ```jsx import { render } from \"solid-js/web\"; import { Router, Route } from \"@solidjs/router\"; import Home from \"./routes/index.jsx\"; import About from \"./routes/about.jsx\"; render( () =\u003e ( \u003cRouter\u003e \u003cRoute path=\"/\" component={Home} /\u003e \u003cRoute path=\"/hello-world\" component={() =\u003e \u003ch1\u003eHello World!\u003c/h1\u003e} /\u003e \u003cRoute path=\"/about\" component={About} /\u003e \u003c/Router\u003e ), document.getElementById(\"app\") ); ``` This example defines three routes: the root path (`/`) which renders the `Home` page, the path `/hello-world` which renders an `h1` element, and the path `/about` which renders the `About` component.", "term_freq": { "---": 2, "//github": 1, "/\u003e": 4, "/about": 2, "/hello-world": 2, "/routes/about": 1, "/routes/home": 1, "/routes/index": 1, "/solid-router/reference/components/route": 1, "/solid-router/reference/components/router": 1, "\u003c/h1\u003e": 1, "\u003c/router\u003e": 2, "\u003ch1\u003ehello": 1, "\u003croute": 4, "\u003crouter\u003e": 3, "=\u003e": 3, "\u003e-": 2, "@solidjs/router": 2, "about": 3, "above": 1, "add": 1, "added": 1, "additional": 1, "an": 2, "and": 2, "app": 2, "application": 1, "applications": 1, "apply": 1, "basic": 1, "be": 1, "can": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/getting-started/component": 1, "common": 1, "component": 7, "component=": 4, "components": 3, "define": 4, "defined": 1, "defines": 1, "defining": 1, "description": 1, "directly": 1, "document": 2, "each": 1, "element": 2, "example": 2, "for": 2, "from": 7, "getelementbyid": 2, "github-document": 1, "h1": 1, "home": 6, "https": 1, "import": 7, "in": 6, "initial": 1, "intuitive": 1, "is": 4, "jsx": 9, "match": 1, "matches": 1, "mdx": 1, "most": 1, "multiple": 1, "navigates": 1, "navigation": 1, "or": 1, "page": 2, "pass": 1, "path": 8, "path=": 4, "prop": 2, "render": 5, "rendered": 1, "renders": 3, "root": 2, "route": 5, "router": 7, "routes": 7, "routing": 5, "setup": 2, "solid": 2, "solid-js/web": 2, "solidjs": 1, "tags": 1, "takes": 1, "template": 1, "template-based": 2, "templates": 1, "the": 18, "this": 2, "three": 1, "title": 1, "to": 10, "use_cases": 1, "user": 1, "using": 3, "version": 1, "want": 1, "way": 1, "when": 2, "where": 1, "which": 4, "world": 1, "you": 2, "your": 1 }, "length": 257 }, { "id": "727a30c7c297ff7a36e63799", "doc_id": "de43c7c4aa2396d5bd9aca68", "title": "conditional-rendering", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/control-flow/conditional-rendering.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/conditional-rendering.json", "content": "--- title: Conditional rendering order: 1 use_cases: \u003e- showing/hiding content, loading states, error displays, user permissions, dynamic ui, feature toggles tags: - conditional - rendering - show - switch - match - ui version: '1.0' description: \u003e- Conditionally render UI elements in Solid using Show, Switch, and Match components for clean, readable conditional logic. --- Conditional rendering is the process of displaying different UI elements based on certain conditions. This is a common pattern in UI development, and is often used to show or hide elements based on user input, data, or other conditions. Solid offers dedicated components to handle conditional rendering in a more straightforward and readable way. ## Show `\u003cShow\u003e` renders its children when a condition is evaluated to be true. Similar to the [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) in JavaScript, it uses control logic flow within JSX to determine what to render. `\u003cShow\u003e` has a `when` property that is used to determine whether or not to render its children. When there is a change in the state or props it depends on, this property is re-evaluated. This property can be a boolean value, or a function that returns a boolean value. ```jsx import { Show } from \"solid-js\" \u003cShow when={data.loading}\u003e \u003cdiv\u003eLoading...\u003c/div\u003e \u003c/Show\u003e ``` `\u003cShow\u003e` has the `fallback` property that can be used to specify the content to be rendered when the condition evaluates to false. This property can return a JSX element. ```jsx import { Show } from \"solid-js\" \u003cShow when={!data.loading} fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e \u003ch1\u003eHi, I am {data().name}.\u003c/h1\u003e \u003c/Show\u003e ``` If there are multiple conditions that need to be handled, `\u003cShow\u003e` can be nested to handle each condition. ```jsx import { Show } from \"solid-js\" \u003cShow when={data.loading}\u003e \u003cdiv\u003eLoading...\u003c/div\u003e \u003cShow when={data.error}\u003e \u003cdiv\u003eError: {data.error}\u003c/div\u003e \u003c/Show\u003e \u003c/Show\u003e ``` ## Switch and Match When there are multiple conditions that need to be handled, it can be difficult to manage the logic flow with nested `\u003cShow\u003e` components. Solid has the `\u003cSwitch\u003e` and `\u003cMatch\u003e` components for this purpose. Similar to JavaScript's [switch/case](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) structure, `\u003cSwitch\u003e` wraps multiple `\u003cMatch\u003e` components so that each condition is evaluated _in sequence_. The first `\u003cMatch\u003e` component that evaluates to true will have its children rendered, and the rest will be ignored. ```jsx import { Switch, Match } from \"solid-js\" \u003cSwitch\u003e \u003cMatch when={condition1}\u003e \u003cp\u003eOutcome 1\u003c/p\u003e \u003c/Match\u003e \u003cMatch when={condition2}\u003e \u003cp\u003eOutcome 2\u003c/p\u003e \u003c/Match\u003e \u003c/Switch\u003e ``` Similar to `\u003cShow\u003e`, each `\u003cMatch\u003e` component has a `when` property that is used to determine whether or not to render its children. An optional `fallback` property can also be passed to `\u003cSwitch\u003e` to specify the content be rendered when none of the `\u003cMatch\u003e` components evaluate to true. ```jsx import { Switch, Match } from \"solid-js\" \u003cSwitch fallback={\u003cp\u003eFallback content\u003c/p\u003e}\u003e \u003cMatch when={condition1}\u003e \u003cp\u003eOutcome 1\u003c/p\u003e \u003c/Match\u003e \u003cMatch when={condition2}\u003e \u003cp\u003eOutcome 2\u003c/p\u003e \u003c/Match\u003e \u003c/Switch\u003e ```", "term_freq": { "##": 2, "---": 2, "//developer": 2, "//github": 1, "1\u003c/p\u003e": 2, "2\u003c/p\u003e": 2, "\u003c/div\u003e": 4, "\u003c/h1\u003e": 1, "\u003c/match\u003e": 4, "\u003c/show\u003e": 4, "\u003c/switch\u003e": 2, "\u003cdiv\u003eerror": 1, "\u003cdiv\u003eloading": 3, "\u003ch1\u003ehi": 1, "\u003cmatch": 4, "\u003cmatch\u003e": 5, "\u003cp\u003efallback": 1, "\u003cp\u003eoutcome": 4, "\u003cshow": 4, "\u003cshow\u003e": 6, "\u003cswitch": 1, "\u003cswitch\u003e": 4, "\u003e-": 2, "_in": 1, "also": 1, "am": 1, "an": 1, "and": 6, "are": 2, "based": 2, "be": 11, "boolean": 2, "can": 6, "certain": 1, "change": 1, "children": 4, "clean": 1, "com/solidjs/solid-docs/blob/head/src/routes/concepts/control-flow/conditional-rendering": 1, "common": 1, "component": 2, "components": 6, "condition": 4, "condition1": 2, "condition2": 2, "conditional": 5, "conditional-rendering": 1, "conditionally": 1, "conditions": 4, "content": 3, "content\u003c/p\u003e": 1, "control": 1, "data": 7, "dedicated": 1, "depends": 1, "description": 1, "determine": 3, "development": 1, "different": 1, "difficult": 1, "displaying": 1, "displays": 1, "dynamic": 1, "each": 3, "element": 1, "elements": 3, "error": 3, "evaluate": 1, "evaluated": 2, "evaluates": 2, "fallback": 2, "fallback=": 2, "false": 1, "feature": 1, "first": 1, "flow": 2, "for": 2, "from": 5, "function": 1, "github-document": 1, "handle": 2, "handled": 2, "has": 4, "have": 1, "hide": 1, "https": 3, "if": 1, "ignored": 1, "import": 5, "in": 5, "input": 1, "is": 9, "it": 3, "its": 4, "javascript": 2, "jsx": 7, "loading": 4, "logic": 3, "manage": 1, "match": 5, "mdx": 1, "more": 1, "mozilla": 2, "multiple": 3, "name": 1, "need": 2, "nested": 2, "none": 1, "not": 2, "of": 2, "offers": 1, "often": 1, "on": 3, "operator": 1, "optional": 1, "or": 6, "order": 1, "org/en-us/docs/web/javascript/reference/operators/conditional_operator": 1, "org/en-us/docs/web/javascript/reference/statements/switch": 1, "other": 1, "passed": 1, "pattern": 1, "permissions": 1, "process": 1, "property": 7, "props": 1, "purpose": 1, "re-evaluated": 1, "readable": 2, "render": 4, "rendered": 3, "rendering": 4, "renders": 1, "rest": 1, "return": 1, "returns": 1, "sequence_": 1, "show": 7, "showing/hiding": 1, "similar": 3, "so": 1, "solid": 3, "solid-js": 5, "specify": 2, "state": 1, "states": 1, "straightforward": 1, "structure": 1, "switch": 5, "switch/case": 1, "tags": 1, "ternary": 1, "that": 8, "the": 12, "there": 3, "this": 5, "title": 1, "to": 23, "toggles": 1, "true": 3, "ui": 5, "use_cases": 1, "used": 4, "user": 2, "uses": 1, "using": 1, "value": 2, "version": 1, "way": 1, "what": 1, "when": 7, "when=": 8, "whether": 2, "will": 2, "with": 1, "within": 1, "wraps": 1 }, "length": 449 }, { "id": "65f31db1d74c91e4e67f578d", "doc_id": "77c820358b816857eedaa7b8", "title": "config", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/getting-started/config.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/config.json", "content": "--- title: Config-based routing use_cases: \u003e- centralized routing, lazy loading, config-based setup, dynamic imports, performance optimization tags: - config - lazy-loading - routing - performance - setup version: '1.0' description: \u003e- Configure SolidJS routes with config objects for centralized routing, lazy loading, and optimized performance. --- Solid Router supports config-based routing, which offers the same capabilities as [component routing](/solid-router/getting-started/component). The decision to use config-based routing over component routing depends largely on personal preference. To define a single route, a route definition object can be passed to the [`\u003cRouter\u003e`](/solid-router/reference/components/router) component: ```jsx import { lazy } from \"solid-js\"; import { render } from \"solid-js/web\"; import { Router } from \"@solidjs/router\"; const routes = { path: \"/\", component: lazy(() =\u003e import(\"/routes/index.js\")), } render(() =\u003e \u003cRouter\u003e{routes}\u003c/Router\u003e, document.getElementById(\"app\")); ``` In the route definition object, a `path` property must be provided to define the path to match and a `component` property that specifies the component (or element) to render when the path matches. To define multiple routes, an array of route definition objects can be passed to the `\u003cRouter\u003e` component: ```jsx import { lazy } from \"solid-js\"; import { render } from \"solid-js/web\"; import { Router } from \"@solidjs/router\"; const routes = [ { path: \"/\", component: lazy(() =\u003e import(\"/routes/index.js\")), }, { path: \"/hello-world\", component: () =\u003e \u003ch1\u003eHello, World!\u003c/h1\u003e }, { path: \"/about\", component: lazy(() =\u003e import(\"/routes/about.js\")), } ] render(() =\u003e \u003cRouter\u003e{routes}\u003c/Router\u003e, document.getElementById(\"app\")); ``` Each path in the array of route definition objects will be matched against the current URL, and the corresponding component will be rendered when a match is found. In the example above, the root path (`/`) renders the `Home` page, the path `/hello-world` renders an `h1` element, and the path `/about` renders the `About` component. :::note[Lazy Loading] When using configuration-based routing, it is best practice to use the [`lazy`](/reference/component-apis/lazy) component to load components asynchronously. This will help improve the performance of your application by only loading the components when they are needed. ```jsx import { lazy } from \"solid-js\"; import { render } from \"solid-js/web\"; import { Router } from \"@solidjs/router\"; const routes = [ { path: \"/\", component: lazy(() =\u003e import(\"/routes/index.js\")), }, { path: \"/hello-world\", component: () =\u003e \u003ch1\u003eHello, World!\u003c/h1\u003e }, { path: \"/about\", component: lazy(() =\u003e import(\"/routes/about.js\")), } ] render(() =\u003e \u003cRouter\u003e{routes}\u003c/Router\u003e, document.getElementById(\"app\")); ``` To learn more about lazy loading, see the page on [lazy loading components](/solid-router/advanced-concepts/lazy-loading). :::", "term_freq": { "---": 2, "//github": 1, "/about": 3, "/hello-world": 3, "/reference/component-apis/lazy": 1, "/routes/about": 2, "/routes/index": 3, "/solid-router/advanced-concepts/lazy-loading": 1, "/solid-router/getting-started/component": 1, "/solid-router/reference/components/router": 1, "\u003c/h1\u003e": 2, "\u003c/router\u003e": 3, "\u003ch1\u003ehello": 2, "\u003crouter\u003e": 5, "=\u003e": 10, "\u003e-": 2, "@solidjs/router": 3, "about": 2, "above": 1, "against": 1, "an": 2, "and": 4, "app": 3, "application": 1, "are": 1, "array": 2, "as": 1, "asynchronously": 1, "be": 5, "best": 1, "by": 1, "can": 2, "capabilities": 1, "centralized": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/getting-started/config": 1, "component": 16, "components": 3, "config": 3, "config-based": 4, "configuration-based": 1, "configure": 1, "const": 3, "corresponding": 1, "current": 1, "decision": 1, "define": 3, "definition": 4, "depends": 1, "description": 1, "document": 3, "dynamic": 1, "each": 1, "element": 2, "example": 1, "for": 1, "found": 1, "from": 9, "getelementbyid": 3, "github-document": 1, "h1": 1, "help": 1, "home": 1, "https": 1, "import": 14, "imports": 1, "improve": 1, "in": 3, "is": 2, "it": 1, "js": 5, "jsx": 3, "largely": 1, "lazy": 14, "lazy-loading": 1, "learn": 1, "load": 1, "loading": 6, "match": 2, "matched": 1, "matches": 1, "mdx": 1, "more": 1, "multiple": 1, "must": 1, "needed": 1, "note": 1, "object": 2, "objects": 3, "of": 3, "offers": 1, "on": 2, "only": 1, "optimization": 1, "optimized": 1, "or": 1, "over": 1, "page": 2, "passed": 2, "path": 14, "performance": 4, "personal": 1, "practice": 1, "preference": 1, "property": 2, "provided": 1, "render": 7, "rendered": 1, "renders": 3, "root": 1, "route": 5, "router": 4, "routes": 8, "routing": 9, "same": 1, "see": 1, "setup": 2, "single": 1, "solid": 1, "solid-js": 3, "solid-js/web": 3, "solidjs": 1, "specifies": 1, "supports": 1, "tags": 1, "that": 1, "the": 21, "they": 1, "this": 1, "title": 1, "to": 11, "url": 1, "use": 2, "use_cases": 1, "using": 1, "version": 1, "when": 4, "which": 1, "will": 3, "with": 1, "world": 2, "your": 1 }, "length": 363 }, { "id": "bae838575fec6143a617186d", "doc_id": "a1106259a76b0a6721eca654", "title": "context", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/context.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/context.json", "content": "--- title: Context order: 5 use_cases: \u003e- global state management, avoiding prop drilling, theme providers, authentication state, shared data across components tags: - context - state - global - providers - sharing - management version: '1.0' description: \u003e- Share data across component trees with Solid's Context API. Avoid prop drilling and manage global application state effectively. --- Context provides a way to pass data through the component tree without having to pass props down manually at every level. ## When to use context When you have a large [component tree](/concepts/components/basics#component-trees) that requires state to be shared, context can be used. Context can be employed to avoid [prop drilling](/concepts/components/props#prop-drilling), which is the practice of passing props through intermediate elements without using them directly. If you want to avoid passing some props through a few layers, when applicable, adjusting your component hierarchy may be an easier solution. [Signals](/concepts/signals) are often the simplest solution since they can be imported directly into the components that need them. Context, however, is designed to share data that is global to an application or for information that is regularly accessed by multiple components in an application's component tree. This offers a way to access state across an application without passing props through intermediate layers or importing them directly into components. ## Creating context Context is created using the [`createContext`](/reference/component-apis/create-context) function. This function has a `Provider` property that wraps the component tree you want to provide context to. ```jsx tab title=\"/context/create.js\" import { createContext } from \"solid-js\"; export const MyContext = createContext(); ``` ```jsx tab title=\"/context/component.jsx\" import { MyContext } from \"./create\"; export function Provider (props) { return ( \u003cMyContext.Provider\u003e {props.children} \u003c/MyContext.Provider\u003e ) }; ``` ## Providing context to children To pass a value to the `Provider`, you use the `value` prop which can take in any value, including [signals](#updating-context-values). Once a value is passed to the `Provider`, it is available to all components that are descendants of the `Provider`. When passing a single value, it can be directly passed to the `value` prop: ```jsx title=\"/context/component.jsx\" import { createContext, useContext } from \"solid-js\"; import { MyContext } from \"./create\"; const Provider = (props) =\u003e ( \u003cMyContext.Provider value=\"new value\"\u003e{props.children}\u003c/MyContext.Provider\u003e ); ``` :::tip[Complex Types] When passing multiple values (as an `array` or `object`), it is recommended to use a [store](/reference/component-apis/create-context#usage). ::: ## Consuming context Once the values are available to all the components in the context's component tree, they can be accessed using the [`useContext`](/reference/component-apis/use-context) utility. This utility takes in the context object and returns the value(s) passed to the `Provider`: ```jsx title=\"/context/component.jsx\" import { createContext, useContext } from \"solid-js\"; import { MyContext } from \"./create\"; const Provider = (props) =\u003e ( \u003cMyContext.Provider value=\"new value\"\u003e {props.children} \u003c/MyContext.Provider\u003e ); const Child = () =\u003e { const value = useContext(MyContext); return ( \u003cspan\u003e {value} \u003c/span\u003e ); }; export const App = () =\u003e ( \u003cProvider\u003e \u003cChild /\u003e \u003c/Provider\u003e ); ``` ## Customizing Context Utilities When an application contains multiple context objects, it can be difficult to keep track of which context object is being used. To solve this issue, you can create a custom utility to create a more readable way to access the context values. For example, when wrapping a component tree, you may want to create a custom `Provider` component that can be used to wrap the component tree. This also provides you with the option of re-using the `Provider` component in other parts of your application, if needed. ```jsx import { createSignal, createContext, useContext } from \"solid-js\"; import { CounterContext } from \"~/context/counter\"; export function CounterProvider(props) { return ( \u003cCounterContext.Provider value={props.count ?? 0}\u003e {props.children} \u003c/CounterContext.Provider\u003e ); } ``` Now if you had to access the Provider in different areas of your application, you can simply import the `CounterProvider` component and wrap the component tree: ```jsx import { CounterProvider } from \"./counterProvider\"; export function App() { return ( \u003cCounterProvider count={1}\u003e \u003ch1\u003eWelcome to Counter\u003c/h1\u003e \u003cNestedComponents /\u003e \u003c/CounterProvider\u003e ); } ``` Similarly, you can create a custom utility to access the context values. Instead of importing `useContext` and passing in the context object on each component that you're using it in, creating a customized utility can make it easier to access the values you need: ```jsx export function useCounter() { return useContext(CounterContext); } ``` The `useCounter()` utility in this example can now be imported into any component that needs to access the context values: ```jsx import { useCounter } from \"./counter\"; export function CounterProvider(props) { const count = useCounter(); return ( \u003c\u003e \u003cdiv\u003e{count()}\u003c/div\u003e \u003c/\u003e ); } ``` ## Updating Context Values [Signals](/concepts/signals) offer a way to synchronize and manage data shared across your components using context. You can pass a signal directly to the `value` prop of the `Provider` component, and any changes to the signal will be reflected in all components that consume the context. ```jsx tab title=\"App.jsx\" import { CounterProvider } from \"./Context\"; import { Child } from \"./Child\"; export function App() { return ( \u003cCounterProvider count={1}\u003e \u003ch1\u003eWelcome to Counter App\u003c/h1\u003e \u003cChild /\u003e \u003c/CounterProvider\u003e ) } ``` ```jsx tab title=\"Context.jsx\" import { createSignal, useContext } from \"solid-js\"; export function CounterProvider(props) { const [count, setCount] = createSignal(props.initialCount || 0); const counter = [ count, { increment() { setCount(prev =\u003e prev + 1); }, decrement() { setCount(prev =\u003e prev - 1); } } ]; return ( \u003cCounterContext.Provider value={counter}\u003e {props.children} \u003c/CounterContext.Provider\u003e ); } export function useCounter() { return useContext(CounterContext); } ``` ```tsx tab title=\"Child.jsx\" // /context/counter-component.tsx import { useCounter } from \"./Context\"; export function Child(props) { const [count, { increment, decrement }] = useCounter(); return ( \u003c\u003e \u003cdiv\u003e{count()}\u003c/div\u003e \u003cbutton onClick={increment}\u003e+\u003c/button\u003e \u003cbutton onClick={decrement}\u003e-\u003c/button\u003e \u003c/\u003e ); }; ``` This offers a way to manage state across your components without having to pass props through intermediate elements. ## Debugging with context `createContext` takes in an _optional_ default value and it is possible it can return `undefined` if not provided. When working with TypeScript, this can introduce type issues that make it difficult to determine why your component is not rendering as expected. To solve this issue, a default value can be specified when creating a context object, or errors can be handled manually through the use of a custom `useMyContext` utility: ```tsx title=\"/context/counter-component.tsx\" import { useContext } from \"solid-js\"; function useMyContext() { const value = useContext(MyContext); if (!value) { throw new Error(\"Missing context Provider\"); } return value; } function Child() { const value = useMyContext(); return \u003cdiv\u003e{value}\u003c/div\u003e; } ``` ## Common issues with `createContext` and `useContext` If no default value is passed to `createContext`, it is possible for `useContext` to return `undefined`. :::note[More on default values] Read more about default values in the [`createContext`](/reference/component-apis/create-context) entry. ::: Because of this, if an initial value was not passed to `createContext`, the TS type signature of `useContext` will indicate that the value returned might be `undefined` (as mentioned above). This can be quite annoying when you want to use the context inside a component, and particularly when immediately destructuring the context. Additionally, if you use `useContext` and it returns `undefined` (which is often, but not always, the result of a bug), the error message thrown at runtime can be confusing. The most common solution for it is to wrap all uses of `useContext` in a function that will explicitly throw a helpful error if the context is `undefined`. This also serves to narrow the type returned, so TS doesn't complain. As an example: ```ts title=\"/context/counter-component.tsx\" function useCounterContext() { const context = useContext(CounterContext) if (!context) { throw new Error(\"can't find CounterContext\") } return context } ```", "term_freq": { "##": 8, "#updating-context-values": 1, "---": 2, "//": 1, "//github": 1, "/\u003e": 3, "/child": 1, "/concepts/components/basics#component-trees": 1, "/concepts/components/props#prop-drilling": 1, "/concepts/signals": 2, "/context": 2, "/context/component": 3, "/context/counter-component": 3, "/context/create": 1, "/counter": 1, "/counterprovider": 1, "/create": 3, "/reference/component-apis/create-context": 2, "/reference/component-apis/create-context#usage": 1, "/reference/component-apis/use-context": 1, "\u003c/\u003e": 2, "\u003c/countercontext": 2, "\u003c/counterprovider\u003e": 2, "\u003c/div\u003e": 3, "\u003c/mycontext": 3, "\u003c/provider\u003e": 1, "\u003c/span\u003e": 1, "\u003c\u003e": 2, "\u003cbutton": 2, "\u003cchild": 2, "\u003ccountercontext": 2, "\u003ccounterprovider": 2, "\u003cdiv\u003e": 3, "\u003ch1\u003ewelcome": 2, "\u003cmycontext": 3, "\u003cnestedcomponents": 1, "\u003cprovider\u003e": 1, "\u003cspan\u003e": 1, "=\u003e": 6, "\u003e+\u003c/button\u003e": 1, "\u003e-": 2, "\u003e-\u003c/button\u003e": 1, "_optional_": 1, "about": 1, "above": 1, "access": 6, "accessed": 2, "across": 5, "additionally": 1, "adjusting": 1, "all": 4, "also": 2, "always": 1, "an": 9, "and": 10, "annoying": 1, "any": 3, "api": 1, "app": 4, "app\u003c/h1\u003e": 1, "applicable": 1, "application": 7, "are": 3, "areas": 1, "array": 1, "as": 4, "at": 2, "authentication": 1, "available": 2, "avoid": 3, "avoiding": 1, "be": 16, "because": 1, "being": 1, "bug": 1, "but": 1, "by": 1, "can": 21, "changes": 1, "child": 5, "children": 6, "com/solidjs/solid-docs/blob/head/src/routes/concepts/context": 1, "common": 2, "complain": 1, "complex": 1, "component": 18, "components": 9, "confusing": 1, "const": 13, "consume": 1, "consuming": 1, "contains": 1, "context": 36, "count": 7, "count=": 2, "counter": 3, "counter\u003c/h1\u003e": 1, "countercontext": 5, "counterprovider": 6, "create": 4, "createcontext": 11, "created": 1, "createsignal": 3, "creating": 3, "custom": 4, "customized": 1, "customizing": 1, "data": 5, "debugging": 1, "decrement": 3, "default": 5, "descendants": 1, "description": 1, "designed": 1, "destructuring": 1, "determine": 1, "different": 1, "difficult": 2, "directly": 5, "doesn": 1, "down": 1, "drilling": 3, "each": 1, "easier": 2, "effectively": 1, "elements": 2, "employed": 1, "entry": 1, "error": 4, "errors": 1, "every": 1, "example": 3, "expected": 1, "explicitly": 1, "export": 11, "few": 1, "find": 1, "for": 4, "from": 15, "function": 15, "github-document": 1, "global": 4, "had": 1, "handled": 1, "has": 1, "have": 1, "having": 2, "helpful": 1, "hierarchy": 1, "however": 1, "https": 1, "if": 10, "immediately": 1, "import": 16, "imported": 2, "importing": 2, "in": 13, "including": 1, "increment": 3, "indicate": 1, "information": 1, "initial": 1, "initialcount": 1, "inside": 1, "instead": 1, "intermediate": 3, "into": 3, "introduce": 1, "is": 16, "issue": 2, "issues": 2, "it": 12, "js": 1, "jsx": 16, "keep": 1, "large": 1, "layers": 2, "level": 1, "make": 2, "manage": 3, "management": 2, "manually": 2, "may": 2, "mdx": 1, "mentioned": 1, "message": 1, "might": 1, "missing": 1, "more": 3, "most": 1, "multiple": 3, "mycontext": 6, "narrow": 1, "need": 2, "needed": 1, "needs": 1, "new": 4, "no": 1, "not": 4, "note": 1, "now": 2, "object": 5, "objects": 1, "of": 13, "offer": 1, "offers": 2, "often": 2, "on": 2, "once": 2, "onclick=": 2, "option": 1, "or": 4, "order": 1, "other": 1, "particularly": 1, "parts": 1, "pass": 5, "passed": 5, "passing": 6, "possible": 2, "practice": 1, "prev": 4, "prop": 6, "property": 1, "props": 19, "provide": 1, "provided": 1, "provider": 17, "provider\u003e": 6, "providers": 2, "provides": 2, "providing": 1, "quite": 1, "re": 1, "re-using": 1, "read": 1, "readable": 1, "recommended": 1, "reflected": 1, "regularly": 1, "rendering": 1, "requires": 1, "result": 1, "return": 15, "returned": 2, "returns": 2, "runtime": 1, "serves": 1, "setcount": 3, "share": 2, "shared": 3, "sharing": 1, "signal": 2, "signals": 3, "signature": 1, "similarly": 1, "simplest": 1, "simply": 1, "since": 1, "single": 1, "so": 1, "solid": 1, "solid-js": 6, "solution": 3, "solve": 2, "some": 1, "specified": 1, "state": 7, "store": 1, "synchronize": 1, "tab": 5, "tags": 1, "take": 1, "takes": 2, "that": 13, "the": 45, "them": 3, "theme": 1, "they": 2, "this": 12, "through": 6, "throw": 3, "thrown": 1, "tip": 1, "title": 1, "title=": 9, "to": 45, "track": 1, "tree": 8, "trees": 1, "ts": 3, "tsx": 5, "type": 3, "types": 1, "typescript": 1, "undefined": 5, "updating": 1, "use": 6, "use_cases": 1, "usecontext": 17, "usecounter": 7, "usecountercontext": 1, "used": 3, "usemycontext": 3, "uses": 1, "using": 5, "utilities": 1, "utility": 7, "value": 22, "value=": 4, "values": 9, "version": 1, "want": 4, "was": 1, "way": 5, "when": 11, "which": 4, "why": 1, "will": 3, "with": 5, "without": 4, "working": 1, "wrap": 3, "wrapping": 1, "wraps": 1, "you": 15, "your": 6, "||": 1, "~/context/counter": 1 }, "length": 1158 }, { "id": "12c4c58f6de8fe9806a0ef6c", "doc_id": "03c5eba9f9f780f0971bb43c", "title": "CONTRIBUTING", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/CONTRIBUTING.md", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/contributing.json", "content": "# CONTRIBUTION GUIDE Thank you for helping us make this project great and being a part of the Solid community! We welcome contributions from anyone, regardless of your skill level. We are happy to help with guidance on PRs, technical writing, and turning features into realities. \u003e **New to contributing?** \u003e Take a look at [this GitHub guide](https://docs.github.com/en/get-started/start-your-journey/hello-world) to learn how to use Git and GitHub to contribute to open-source. If you're new to Solid, we ask that you check out our [Writing Guide](https://github.com/solidjs/solid-docs-next/blob/main/WRITING.md). ## Types of contributions There are many ways to contribute to the Solid's documentation! The Solid Docs website is built on Solid! Maintaining it requires not only written content and Solid code maintenance, but it also needs to address accessibility (a11y), CSS, UI, and UX concerns. We also aim to make our documentation available in several languages, so we need help translating the entire site. You can help out by leaving review comments on [PRs](https://github.com/solidjs/solid-docs-next/pulls) and adding ideas in existing GitHub [issues ](https://github.com/solidjs/solid-docs-next/issues) and [discussions](https://github.com/solidjs/solid-docs-next/discussions). Every PR, especially translation PRs, will need reviewers. Reviewing PRs and leaving comments, suggestions, or even saying \"Looks good!\" can be a great way to get started on contributing alongside our Docs team. It's also a great way to learn more about Solid! We encourage you to: - File an issue - Start a discussion - Make a PR - Look at our existing issues - Review existing PRs ## File an issue Issues are a great way to keep track of tasks, enhancements, and bugs for our projects. They're typically the first step to making a change. After an issue has been considered by the community, we often reach out to community members to encourage them to submit PRs based on existing issues. We encourage larger contributions to the docs after you participate in Issues and Discussions, as unsolicited material may not fit into our existing plans. \u003e While you're more than welcome to mention a bug that you've encountered on our Discord, we ask that you also report it as an issue! ### Writing an issue Helpful issues generally include: - Clear, descriptive titles - Links to relevant pages/files - Explanations as to why (or _for whom_) this is a problem - _Option_: proposed solutions ### Examples of helpful new issues - An explanation is confusing (with a reason why) - a code example is wrong (with or without a proposed fix) - accessibility (a11y) issues discovered - missing content - request for an example on how to implement a specific feature (e.g. responsive nav bar). ### Issue labels We use labels as a way to organize and categorize our issues. Here are some common labels that you will see: - `a11y` - related to anything accessibility. - `bug` - when something isn't working. - `good first issue` - a good place to start for newcomers - `help wanted` - when we are looking for assistance on an issue - `i18n` - anything to do with internationalization and translation ## Start a discussion Discussions are a place within this repository where we can have open-ended conversations. It's the perfect place for Q\u0026A, sharing ideas, community engagement, and connecting with other members. Feel free to start a [new discussion](https://github.com/solidjs/solid-docs-next/discussions) on any topic related to our docs! ### Examples of helpful discussions - Is a page in the right section of the docs? - Notice the colors are too bold? Too muted? - Is the site navigation clear and helpful? - Any suggestions of content that you think could be helpful adding ## Make a PR (Pull Request) \u003e If you've never submitted a pull request on GitHub before, check out [this overview on how to open a PR](https://opensource.guide/how-to-contribute/#opening-a-pull-request). PRs are the heart of collaboration on GitHub. When you open a pull request, you are putting forward your suggested changes, inviting us to review it, and requesting for these changes to be merged into our main branch. Here's how to effectively contribute via a PR: - **Understand the Scope**: Before creating a PR, ensure it addresses an existing issue. Remember to link your PR to the issue it solves for easy tracking and understanding. - **Singular Focus**: Each PR should address a single issue or enhancement. Want to propose a larger change? Reach out to us on [Discord](https://discord.com/invite/solidjs) and let's discuss the best way forward! - **Drafts for Early Feedback**: If you're seeking early feedback but aren't quite finished with your changes, consider creating a draft PR. Simply prefix your PR title with `**[Draft]**`. This way, you can get input on your work-in-progress. - **Quality over Quantity**: Strive for the quality of your contribution rather than the quantity. A well-thought-out, cleanly coded, and thoroughly tested PR is much more valuable than a hastily done large one. Contributing via PRs not only enhances the project, but also allows you to be a part of the active community, sharing ideas, learning, and growing with the project. \u003e Existing PRs and Issues need reviewing, triaging, and feedback, too! You can make valuable contributions by commenting, suggesting, testing, researching, brainstorming and generally helping in all areas! ### Writing a PR \u003e Need help making a PR? [Join us on Discord](https://discord.com/invite/solidjs), we'll be more than happy to help you out! Contributions to the documentation site are made by editing the docs repository. You can do this directly on GitHub.com or by creating a copy of the repository locally, making your changes there, and contributing back to our repository. #### Examples of helpful PRs - PRs addressing an existing fix. - Unsolicited PRs addressing typos, broken links, and other minor problems. - Translating an entry. ### Edit this page via GitHub Every page on [docs.solidjs.com](https://docs.solidjs.com/) has an **Edit this page** link at the bottom. You can click on that button to edit the source code for that page in **GitHub**. After you make your changes, click **Commit changes**. This will automatically create a [fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) of the docs in your GitHub account with the changes. Once you have committed your edits within your fork, follow the prompts to create a **pull request** and submit your changes for review. Every pull request needs to be reviewed by our contributors and approved by a maintainer. ### Translating Though it is not a hard requirement, we'd deeply appreciate if you could recommend a native speaker to review your newly added translations. This ensures translations can also adhere to our review-based system for Pull Requests. #### Adding support to a new language 1. Create a dictionary file in `src/i18n/dictionaries/{locale}/ui.ts`. The name should follow our locale convention. - language (ISO 639-1 - set 1): https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes - country code(optional) (ISO 3166-1 alpha-2): https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 - E.g.: Canadian French would be: `fr-ca` 2. Add the `import` and language information to the objects in the barrel file: `./src/i18n/dictionaries/index.ts`. So it will be identified by the routing system, and an entry its added to the language dropdown. 3. Add the language to the `array` in `./scripts/collections/index.mjs` so internal files are created. 4. Add the important UI translations to `./src/i18n/dictionaries/{locale}/ui.ts` 5. Add at least the index page `./src/routes/{locale}/index.mdx`, so others and yourself could see things in action. #### Adding translations to a supported language To translate a new entry to an existing language, go to `src/routes/{locale}` and add the entry following the exact same structure as the default. \u003e [!NOTE] \u003e We can't accept half translated entries because there is not a way of tracking if an entry is not fully translated. Please, make sure you have the time to do the whole entry in your PR. ### Open a PR Once you have made your changes using your preferred method, you're ready to create a 'pull request'. This will let the Solid docs team know you have some changes you would like to propose. At this point, we can give you feedback and possibly request changes. [Read more about making a pull request in GitHub's docs.](https://docs.github.com/en/get-started/exploring-projects-on-github/contributing-to-a-project#making-a-pull-request) Please include a clear title. The description will have some pre-filled questions that we would like you to answer. Every pull request generates a preview of the site, including your proposed changes, using **Netlify** for anyone to see. Use the **Deploy Preview** link in your pull request to review and share your changes. The docs site will be automatically updated whenever pull requests are merged. ## Helpful information ### Forks On GitHub, you will need a 'fork' of this repository to work on. This is your own copy of the code base where you can make changes. You can read more about forks in [GitHub's documentation](https://docs.github.com/en/get-started/exploring-projects-on-github/contributing-to-a-project). Not sure how to get started with GitHub, forks, pull requests, or want a refresher? You can watch this video series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github). #### Creating a fork To create your copy, click the `Fork` button at the top right of any page in this repository. #### Maintaining a fork When you first create your fork, it will be an exact copy of this repository. Over time, our docs will change as they are updated, but your fork won’t automatically stay up-to-date. Here are some ways to keep your fork in sync with this repo: ##### Update through GitHub UI 1. Navigate to your fork on GitHub 2. Click `Sync fork` and then `Update branch` ##### Update from your command line In the terminal on your computer: 1. Make sure you're on the main branch and then run `git checkout main` 2. Fetch and merge the updates: `git pull upstream main` 3. Push the updates back to your fork on GitHub: `git push origin main` ##### Using the GitHub app 1. Go to the [\"pull\" GitHub app page](https://github.com/apps/pull) 2. Click `Install` 3. Follow the instructions to select ## Next Steps: - [Read the docs](https://docs.solidjs.com) - [Fork the docs](https://github.com/solidjs/solid-docs-next/fork) - [Raise an issue](https://github.com/solidjs/solid-docs-next/issues/new) - [Discuss the docs](https://discord.com/invite/solidjs)", "term_freq": { "##": 6, "###": 9, "####": 5, "#####": 3, "**": 3, "**commit": 1, "**deploy": 1, "**drafts": 1, "**edit": 1, "**github**": 1, "**netlify**": 1, "**new": 1, "**pull": 1, "**quality": 1, "**singular": 1, "**understand": 1, "//discord": 3, "//docs": 6, "//egghead": 1, "//en": 2, "//github": 9, "//opensource": 1, "/index": 1, "/scripts/collections/index": 1, "/src/i18n/dictionaries/": 1, "/src/i18n/dictionaries/index": 1, "/src/routes/": 1, "/ui": 2, "3166-1": 1, "639-1": 1, "_for": 1, "_option_": 1, "a11y": 3, "about": 3, "accept": 1, "accessibility": 3, "account": 1, "action": 1, "active": 1, "add": 5, "added": 2, "adding": 4, "address": 2, "addresses": 1, "addressing": 2, "adhere": 1, "after": 3, "aim": 1, "all": 1, "allows": 1, "alongside": 1, "alpha-2": 1, "also": 6, "an": 18, "and": 35, "answer": 1, "any": 3, "anyone": 2, "anything": 2, "app": 2, "appreciate": 1, "approved": 1, "are": 14, "areas": 1, "aren": 1, "array": 1, "as": 6, "ask": 2, "assistance": 1, "at": 6, "automatically": 3, "available": 1, "back": 2, "bar": 1, "barrel": 1, "base": 1, "based": 1, "be": 10, "because": 1, "been": 1, "before": 2, "being": 1, "best": 1, "bold": 1, "bottom": 1, "brainstorming": 1, "branch": 3, "broken": 1, "bug": 2, "bugs": 1, "built": 1, "but": 4, "button": 2, "by": 8, "can": 13, "canadian": 1, "categorize": 1, "change": 3, "changes": 13, "changes**": 1, "check": 2, "checkout": 1, "cleanly": 1, "clear": 3, "click": 5, "code": 5, "coded": 1, "collaboration": 1, "colors": 1, "com": 3, "com/": 1, "com/apps/pull": 1, "com/en/get-started/exploring-projects-on-github/contributing-to-a-project": 1, "com/en/get-started/exploring-projects-on-github/contributing-to-a-project#making-a-pull-request": 1, "com/en/get-started/start-your-journey/hello-world": 1, "com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks": 1, "com/invite/solidjs": 3, "com/solidjs/solid-docs-next/blob/main/writing": 1, "com/solidjs/solid-docs-next/discussions": 2, "com/solidjs/solid-docs-next/fork": 1, "com/solidjs/solid-docs-next/issues": 1, "com/solidjs/solid-docs-next/issues/new": 1, "com/solidjs/solid-docs-next/pulls": 1, "com/solidjs/solid-docs/blob/head/contributing": 1, "command": 1, "commenting": 1, "comments": 2, "committed": 1, "common": 1, "community": 5, "computer": 1, "concerns": 1, "confusing": 1, "connecting": 1, "consider": 1, "considered": 1, "content": 3, "contribute": 4, "contributing": 5, "contribution": 2, "contributions": 5, "contributors": 1, "convention": 1, "conversations": 1, "copy": 4, "could": 3, "country": 1, "create": 6, "created": 1, "creating": 4, "css": 1, "deeply": 1, "default": 1, "description": 1, "descriptive": 1, "dictionary": 1, "directly": 1, "discord": 1, "discovered": 1, "discuss": 1, "discussion": 3, "discussions": 3, "do": 3, "docs": 14, "documentation": 4, "done": 1, "draft": 2, "dropdown": 1, "each": 1, "early": 2, "easy": 1, "edit": 2, "editing": 1, "edits": 1, "effectively": 1, "encountered": 1, "encourage": 3, "engagement": 1, "enhancement": 1, "enhancements": 1, "enhances": 1, "ensure": 1, "ensures": 1, "entire": 1, "entries": 1, "entry": 6, "especially": 1, "even": 1, "every": 4, "exact": 2, "example": 2, "examples": 3, "existing": 9, "explanation": 1, "explanations": 1, "feature": 1, "features": 1, "feedback": 3, "feedback**": 1, "feel": 1, "fetch": 1, "file": 4, "files": 1, "finished": 1, "first": 3, "fit": 1, "fix": 2, "focus**": 1, "follow": 3, "following": 1, "for": 14, "fork": 11, "forks": 3, "forward": 2, "fr-ca": 1, "free": 1, "french": 1, "from": 2, "fully": 1, "generally": 2, "generates": 1, "get": 3, "git": 4, "github": 22, "github-document": 1, "give": 1, "go": 2, "good": 3, "great": 4, "growing": 1, "guidance": 1, "guide": 3, "guide/how-to-contribute/#opening-a-pull-request": 1, "half": 1, "happy": 2, "hard": 1, "has": 2, "hastily": 1, "have": 6, "heart": 1, "help": 6, "helpful": 7, "helping": 2, "here": 3, "how": 5, "https": 22, "i18n": 1, "ideas": 3, "identified": 1, "if": 5, "implement": 1, "import": 1, "important": 1, "in": 18, "include": 2, "including": 1, "index": 1, "information": 2, "input": 1, "install": 1, "instructions": 1, "internal": 1, "internationalization": 1, "into": 3, "inviting": 1, "io/courses/how-to-contribute-to-an-open-source-project-on-github": 1, "is": 11, "isn": 1, "iso": 2, "issue": 12, "issues": 9, "it": 11, "its": 1, "keep": 2, "know": 1, "labels": 3, "language": 7, "languages": 1, "large": 1, "larger": 2, "learn": 2, "learning": 1, "least": 1, "leaving": 2, "let": 2, "level": 1, "like": 2, "line": 1, "link": 3, "links": 2, "ll": 1, "locale": 5, "locally": 1, "look": 2, "looking": 1, "looks": 1, "made": 2, "main": 5, "maintainer": 1, "maintaining": 2, "maintenance": 1, "make": 9, "making": 4, "many": 1, "material": 1, "may": 1, "md": 2, "mdx": 1, "members": 2, "mention": 1, "merge": 1, "merged": 2, "method": 1, "minor": 1, "missing": 1, "mjs": 1, "more": 6, "much": 1, "muted": 1, "name": 1, "native": 1, "nav": 1, "navigate": 1, "navigation": 1, "need": 5, "needs": 2, "never": 1, "new": 4, "newcomers": 1, "newly": 1, "next": 1, "not": 7, "note": 1, "notice": 1, "objects": 1, "of": 20, "often": 1, "on": 25, "once": 2, "one": 1, "only": 2, "open": 4, "open-ended": 1, "open-source": 1, "optional": 1, "or": 6, "org/wiki/iso_3166-1_alpha-2": 1, "org/wiki/list_of_iso_639_language_codes": 1, "organize": 1, "origin": 1, "other": 2, "others": 1, "our": 15, "out": 6, "over": 2, "overview": 1, "own": 1, "page": 7, "page**": 1, "pages/files": 1, "part": 2, "participate": 1, "perfect": 1, "place": 3, "plans": 1, "please": 2, "point": 1, "possibly": 1, "pr": 15, "pre-filled": 1, "preferred": 1, "prefix": 1, "preview": 1, "preview**": 1, "problem": 1, "problems": 1, "project": 4, "projects": 1, "prompts": 1, "propose": 2, "proposed": 3, "prs": 11, "pull": 13, "push": 2, "putting": 1, "q\u0026a": 1, "quality": 1, "quantity": 1, "quantity**": 1, "questions": 1, "quite": 1, "rather": 1, "re": 6, "reach": 2, "read": 1, "ready": 1, "realities": 1, "reason": 1, "recommend": 1, "refresher": 1, "regardless": 1, "related": 2, "relevant": 1, "remember": 1, "repo": 1, "report": 1, "repository": 7, "request": 10, "request**": 1, "requesting": 1, "requests": 3, "requirement": 1, "requires": 1, "researching": 1, "responsive": 1, "review": 6, "review-based": 1, "reviewed": 1, "reviewers": 1, "reviewing": 2, "right": 2, "routing": 1, "run": 1, "same": 1, "saying": 1, "scope**": 1, "section": 1, "see": 3, "seeking": 1, "select": 1, "series": 1, "set": 1, "several": 1, "share": 1, "sharing": 2, "should": 2, "simply": 1, "single": 1, "site": 5, "skill": 1, "so": 4, "solid": 8, "solidjs": 3, "solutions": 1, "solves": 1, "some": 4, "something": 1, "source": 2, "speaker": 1, "specific": 1, "src/i18n/dictionaries/": 1, "src/routes/": 1, "start": 4, "started": 2, "stay": 1, "step": 1, "steps": 1, "strive": 1, "structure": 1, "submit": 2, "submitted": 1, "suggested": 1, "suggesting": 1, "suggestions": 2, "support": 1, "supported": 1, "sure": 3, "sync": 2, "system": 2, "take": 1, "tasks": 1, "team": 2, "technical": 1, "terminal": 1, "tested": 1, "testing": 1, "than": 4, "thank": 1, "that": 8, "the": 62, "them": 1, "then": 2, "there": 3, "these": 1, "they": 2, "things": 1, "think": 1, "this": 17, "thoroughly": 1, "though": 1, "through": 1, "time": 2, "title": 2, "titles": 1, "to": 72, "too": 3, "top": 1, "topic": 1, "track": 1, "tracking": 2, "translate": 1, "translated": 2, "translating": 3, "translation": 2, "translations": 4, "triaging": 1, "ts": 3, "turning": 1, "types": 1, "typically": 1, "typos": 1, "ui": 3, "understanding": 1, "unsolicited": 2, "up-to-date": 1, "update": 3, "updated": 2, "updates": 2, "upstream": 1, "us": 4, "use": 3, "using": 3, "ux": 1, "valuable": 2, "ve": 2, "via": 3, "video": 1, "want": 2, "wanted": 1, "watch": 1, "way": 7, "ways": 2, "we": 17, "website": 1, "welcome": 2, "well-thought-out": 1, "when": 4, "whenever": 1, "where": 2, "while": 1, "whole": 1, "whom_": 1, "why": 2, "wikipedia": 2, "will": 10, "with": 11, "within": 2, "without": 1, "won’t": 1, "work": 1, "work-in-progress": 1, "working": 1, "would": 3, "writing": 3, "written": 1, "wrong": 1, "you": 37, "your": 29, "yourself": 1, "": 5, "discord": 2, "discuss": 1, "discussions": 1, "docs": 1, "fork": 2, "how": 1, "issues": 1, "join": 1, "new": 1, "prs": 1, "raise": 1, "read": 2, "this": 2, "writing": 1 }, "length": 1623 }, { "id": "ed52d8d816f54b96e5489d0a", "doc_id": "ad3277f87472a764a5eb7075", "title": "create-async-store", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/create-async-store.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-async-store.json", "content": "--- title: createAsyncStore use_cases: \u003e- large datasets, reactive stores, model data, fine-grained updates, complex state tags: - async - stores - reactive - data-fetching - state version: '1.0' description: \u003e- Create deeply reactive stores from async data sources for fine-grained updates on large datasets and complex model structures. --- The `createAsyncStore` primitive manages asynchronous data fetching by tracking the result of a promise-returning function in a [store](/concepts/stores). The main difference from [createAsync](/solid-router/reference/data-apis/create-async) is its use of reconciliation: when new data arrives, it intelligently merges with the existing store, updating only changed fields while preserving unchanged state. ## Import ```tsx import { createAsyncStore } from \"@solidjs/router\"; ``` ## Type ```tsx function createAsyncStore\u003cT\u003e( fn: (prev: T) =\u003e Promise\u003cT\u003e, options: { name?: string; initialValue: T; deferStream?: boolean; reconcile?: ReconcileOptions; } ): AccessorWithLatest\u003cT\u003e; function createAsyncStore\u003cT\u003e( fn: (prev: T | undefined) =\u003e Promise\u003cT\u003e, options?: { name?: string; initialValue?: T; deferStream?: boolean; reconcile?: ReconcileOptions; } ): AccessorWithLatest\u003cT | undefined\u003e; ``` ## Parameters ### `fetcher` - **Type:** `(prev: T | undefined) =\u003e Promise\u003cT\u003e` - **Required:** Yes An asynchronous function or a function that returns a `Promise`. The resolved value of this `Promise` is what `createAsyncStore` tracks. This function is reactive and will automatically re-execute if any of its dependencies change. ### `options` - **Type:** `{ name?: string; initialValue?: T; deferStream?: boolean; reconcile?: ReconcileOptions; }` - **Required:** No An object for configuring the primitive. It has the following properties. #### `name` - **Type:** `string` - **Required:** No A name for the resource, used for identification in debugging tools like [Solid Debugger](https://github.com/thetarnav/solid-devtools). #### `initialValue` - **Type:** `T` - **Required:** No The initial value of the returned store before the fetcher resolves. #### `deferStream` - **Type:** `boolean` - **Required:** No If `true`, [streaming](/solid-router/data-fetching/streaming) will be deferred until the resource has resolved. #### `reconcile` - **Type:** `ReconcileOptions` - **Required:** No [Options](/reference/store-utilities/reconcile#options) passed directly to the `reconcile` function. It controls how new data is merged with the existing store. ## Return value `createAsyncStore` returns a derived signal that contains the resolved value of the fetcher as a store. While the fetcher is executing for the first time, unless an `initialValue` is specified, the store's value is `undefined`. ## Examples ### Basic usage ```tsx import { For, createSignal } from \"solid-js\"; import { createAsyncStore, query } from \"@solidjs/router\"; const getNotificationsQuery = query(async (unreadOnly: boolean) =\u003e { // ... Fetches the list of notifications from the server. }, \"notifications\"); function Notifications() { const [unreadOnly, setUnreadOnly] = createSignal(false); const notifications = createAsyncStore(() =\u003e getNotificationsQuery(unreadOnly()) ); return ( \u003cdiv\u003e \u003cbutton onClick={() =\u003e setUnreadOnly(!unreadOnly())}\u003e Toggle unread \u003c/button\u003e \u003cul\u003e \u003cFor each={notifications()}\u003e {(notification) =\u003e ( \u003cli\u003e \u003cdiv\u003e{notification.message}\u003c/div\u003e \u003cdiv\u003e{notification.user.name}\u003c/div\u003e \u003c/li\u003e )} \u003c/For\u003e \u003c/ul\u003e \u003c/div\u003e ); } ```", "term_freq": { "##": 5, "###": 3, "####": 4, "**": 12, "**required": 6, "**type": 6, "---": 2, "//": 1, "//github": 2, "/concepts/stores": 1, "/reference/store-utilities/reconcile#options": 1, "/solid-router/data-fetching/streaming": 1, "/solid-router/reference/data-apis/create-async": 1, "\u003c/button\u003e": 1, "\u003c/div\u003e": 3, "\u003c/for\u003e": 1, "\u003c/li\u003e": 1, "\u003c/ul\u003e": 1, "\u003cbutton": 1, "\u003cdiv\u003e": 3, "\u003cfor": 1, "\u003cli\u003e": 1, "\u003cul\u003e": 1, "=\u003e": 7, "\u003e-": 2, "@solidjs/router": 2, "accessorwithlatest\u003ct": 1, "accessorwithlatest\u003ct\u003e": 1, "an": 3, "and": 2, "any": 1, "arrives": 1, "as": 1, "async": 3, "asynchronous": 2, "automatically": 1, "basic": 1, "be": 1, "before": 1, "boolean": 5, "by": 1, "change": 1, "changed": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/data-apis/create-async-store": 1, "com/thetarnav/solid-devtools": 1, "complex": 2, "configuring": 1, "const": 3, "contains": 1, "controls": 1, "create": 1, "create-async-store": 1, "createasync": 1, "createasyncstore": 7, "createasyncstore\u003ct\u003e": 2, "createsignal": 2, "data": 5, "data-fetching": 1, "datasets": 2, "debugger": 1, "debugging": 1, "deeply": 1, "deferred": 1, "deferstream": 4, "dependencies": 1, "derived": 1, "description": 1, "difference": 1, "directly": 1, "each=": 1, "examples": 1, "executing": 1, "existing": 2, "false": 1, "fetcher": 4, "fetches": 1, "fetching": 1, "fields": 1, "fine-grained": 2, "first": 1, "fn": 2, "following": 1, "for": 6, "from": 6, "function": 8, "getnotificationsquery": 2, "github-document": 1, "has": 2, "how": 1, "https": 2, "identification": 1, "if": 2, "import": 4, "in": 2, "initial": 1, "initialvalue": 5, "intelligently": 1, "is": 7, "it": 3, "its": 2, "large": 2, "like": 1, "list": 1, "main": 1, "manages": 1, "mdx": 1, "merged": 1, "merges": 1, "message": 1, "model": 2, "name": 6, "new": 2, "no": 5, "notification": 3, "notifications": 5, "object": 1, "of": 7, "on": 1, "onclick=": 1, "only": 1, "options": 4, "or": 1, "parameters": 1, "passed": 1, "preserving": 1, "prev": 3, "primitive": 2, "promise": 2, "promise-returning": 1, "promise\u003ct\u003e": 3, "properties": 1, "query": 2, "re-execute": 1, "reactive": 4, "reconcile": 5, "reconcileoptions": 4, "reconciliation": 1, "resolved": 3, "resolves": 1, "resource": 2, "result": 1, "return": 2, "returned": 1, "returns": 2, "server": 1, "setunreadonly": 2, "signal": 1, "solid": 1, "solid-js": 1, "sources": 1, "specified": 1, "state": 3, "store": 6, "stores": 3, "streaming": 1, "string": 4, "structures": 1, "tags": 1, "that": 2, "the": 21, "this": 2, "time": 1, "title": 1, "to": 1, "toggle": 1, "tools": 1, "tracking": 1, "tracks": 1, "true": 1, "tsx": 3, "type": 1, "unchanged": 1, "undefined": 3, "undefined\u003e": 1, "unless": 1, "unread": 1, "unreadonly": 4, "until": 1, "updates": 2, "updating": 1, "usage": 1, "use": 1, "use_cases": 1, "used": 1, "user": 1, "value": 5, "version": 1, "what": 1, "when": 1, "while": 2, "will": 2, "with": 2, "yes": 1 }, "length": 409 }, { "id": "89d0eab4113f646c5cf217c9", "doc_id": "d541b637f76c855844cdf477", "title": "create-async", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/create-async.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-async.json", "content": "--- title: createAsync use_cases: \u003e- data fetching, async operations, suspense boundaries, loading states, api calls, ssr data tags: - async - suspense - data-fetching - loading - promises - ssr version: \"1.0\" description: \u003e- Transform promises into reactive signals with createAsync. Handle async data with Suspense and automatic loading states. --- The `createAsync` primitive manages asynchronous data fetching by tracking the result of a promise-returning function. :::note `createAsync` is currently a thin wrapper over `createResource`. While `createResource` offers similar functionality, **`createAsync` is the recommended primitive for most asynchronous data fetching**. It is intended to be the standard async primitive in a future Solid 2.0 release. ::: ## Import ```tsx import { createAsync } from \"@solidjs/router\"; ``` ## Type ```tsx function createAsync\u003cT\u003e( fn: (prev: T) =\u003e Promise\u003cT\u003e, options: { name?: string; initialValue: T; deferStream?: boolean; } ): AccessorWithLatest\u003cT\u003e; function createAsync\u003cT\u003e( fn: (prev: T | undefined) =\u003e Promise\u003cT\u003e, options?: { name?: string; initialValue?: T; deferStream?: boolean; } ): AccessorWithLatest\u003cT | undefined\u003e; ``` ## Parameters ### `fetcher` - **Type:** `(prev: T | undefined) =\u003e Promise\u003cT\u003e` - **Required:** Yes An asynchronous function or a function that returns a `Promise`. The resolved value of this `Promise` is what `createAsync` tracks. This function is reactive and will automatically re-execute if any of its dependencies change. ### `options` - **Type:** `{ name?: string; initialValue?: T; deferStream?: boolean; }` - **Required:** No An object for configuring the primitive. It has the following properties: #### `name` - **Type:** `string` - **Required:** No A name for the resource, used for identification in debugging tools like [Solid Debugger](https://github.com/thetarnav/solid-devtools). #### `initialValue` - **Type:** `T` - **Required:** No The initial value of the returned signal before the fetcher finishes executing. #### `deferStream` - **Type:** `boolean` - **Required:** No If `true`, [streaming](/solid-router/data-fetching/streaming) will be deferred until the fetcher finishes executing. ## Return value `createAsync` returns a derived signal that contains the resolved value of the fetcher. While the fetcher is executing for the first time, unless an `initialValue` is specified, the signal's value is `undefined`. ## Examples ### Basic usage ```tsx import { createAsync, query } from \"@solidjs/router\"; const getCurrentUser = query(async () =\u003e { // ... Fetches the current authenticated user from the server. }, \"currentUser\"); function UserProfile() { const user = createAsync(() =\u003e getCurrentUser()); return \u003cdiv\u003e{user()?.name}\u003c/div\u003e; } ``` ### With parameter ```tsx import { createAsync, query } from \"@solidjs/router\"; const getInvoiceQuery = query(async (invoiceId: string) =\u003e { // ... Fetches the invoice details from the server. }, \"invoice\"); function InvoiceDetails(props: { invoiceId: string }) { const invoice = createAsync(() =\u003e getInvoiceQuery(props.invoiceId)); return ( \u003cdiv\u003e \u003ch2\u003eInvoice #{invoice()?.number}\u003c/h2\u003e \u003cp\u003eTotal: ${invoice()?.total}\u003c/p\u003e \u003c/div\u003e ); } ``` ### With error handling and pending state ```tsx import { createAsync, query } from \"@solidjs/router\"; import { Suspense, ErrorBoundary, For } from \"solid-js\"; const getAllRecipesQuery = query(async () =\u003e { // ... Fetches the recipes from the server and throws an error if an issue occurred. }, \"recipes\"); function Recipes() { const recipes = createAsync(() =\u003e getAllRecipesQuery()); return ( \u003cErrorBoundary fallback={\u003cp\u003eCouldn't fetch any recipes!\u003c/p\u003e}\u003e \u003cSuspense fallback={\u003cp\u003eFetching recipes...\u003c/p\u003e}\u003e \u003cFor each={recipes()}\u003e {(recipe) =\u003e ( \u003cdiv\u003e \u003ch3\u003e{recipe.name}\u003c/h3\u003e \u003cp\u003eCook time: {recipe.time}\u003c/p\u003e \u003c/div\u003e )} \u003c/For\u003e \u003c/Suspense\u003e \u003c/ErrorBoundary\u003e ); } ``` ## Related - [`query`](/solid-router/reference/data-apis/query) - [`\u003cSuspense\u003e`](/reference/components/suspense) - [`\u003cErrorBoundary\u003e`](/reference/components/error-boundary)", "term_freq": { "##": 6, "###": 5, "####": 3, "**": 11, "**required": 5, "**type": 5, "---": 2, "//": 3, "//github": 2, "/reference/components/error-boundary": 1, "/reference/components/suspense": 1, "/solid-router/data-fetching/streaming": 1, "/solid-router/reference/data-apis/query": 1, "\u003c/div\u003e": 3, "\u003c/errorboundary\u003e": 1, "\u003c/for\u003e": 1, "\u003c/h2\u003e": 1, "\u003c/h3\u003e": 1, "\u003c/p\u003e": 4, "\u003c/suspense\u003e": 1, "\u003cdiv\u003e": 3, "\u003cerrorboundary": 1, "\u003cerrorboundary\u003e": 1, "\u003cfor": 1, "\u003ch2\u003einvoice": 1, "\u003ch3\u003e": 1, "\u003cp\u003ecook": 1, "\u003cp\u003ecouldn": 1, "\u003cp\u003efetching": 1, "\u003cp\u003etotal": 1, "\u003csuspense": 1, "\u003csuspense\u003e": 1, "=\u003e": 10, "\u003e-": 2, "@solidjs/router": 4, "accessorwithlatest\u003ct": 1, "accessorwithlatest\u003ct\u003e": 1, "an": 5, "and": 4, "any": 2, "api": 1, "async": 7, "asynchronous": 3, "authenticated": 1, "automatic": 1, "automatically": 1, "basic": 1, "be": 2, "before": 1, "boolean": 4, "boundaries": 1, "by": 1, "calls": 1, "change": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/data-apis/create-async": 1, "com/thetarnav/solid-devtools": 1, "configuring": 1, "const": 6, "contains": 1, "create-async": 1, "createasync": 14, "createasync\u003ct\u003e": 2, "createresource": 2, "current": 1, "currently": 1, "currentuser": 1, "data": 5, "data-fetching": 1, "debugger": 1, "debugging": 1, "deferred": 1, "deferstream": 4, "dependencies": 1, "derived": 1, "description": 1, "details": 1, "each=": 1, "error": 2, "errorboundary": 1, "examples": 1, "executing": 3, "fallback=": 2, "fetch": 1, "fetcher": 5, "fetches": 3, "fetching": 2, "fetching**": 1, "finishes": 2, "first": 1, "fn": 2, "following": 1, "for": 6, "from": 8, "function": 9, "functionality": 1, "future": 1, "getallrecipesquery": 2, "getcurrentuser": 2, "getinvoicequery": 2, "github-document": 1, "handle": 1, "handling": 1, "has": 1, "https": 2, "identification": 1, "if": 3, "import": 6, "in": 2, "initial": 1, "initialvalue": 5, "intended": 1, "into": 1, "invoice": 5, "invoicedetails": 1, "invoiceid": 3, "is": 8, "issue": 1, "it": 2, "its": 1, "like": 1, "loading": 3, "manages": 1, "mdx": 1, "most": 1, "name": 7, "no": 4, "note": 1, "number": 1, "object": 1, "occurred": 1, "of": 5, "offers": 1, "operations": 1, "options": 3, "or": 1, "over": 1, "parameter": 1, "parameters": 1, "pending": 1, "prev": 3, "primitive": 4, "promise": 2, "promise-returning": 1, "promise\u003ct\u003e": 3, "promises": 2, "properties": 1, "props": 2, "query": 7, "re-execute": 1, "reactive": 2, "recipe": 3, "recipes": 7, "recommended": 1, "related": 1, "release": 1, "resolved": 2, "resource": 1, "result": 1, "return": 4, "returned": 1, "returns": 2, "server": 3, "signal": 3, "signals": 1, "similar": 1, "solid": 2, "solid-js": 1, "specified": 1, "ssr": 2, "standard": 1, "state": 1, "states": 2, "streaming": 1, "string": 6, "suspense": 4, "tags": 1, "that": 2, "the": 23, "thin": 1, "this": 2, "throws": 1, "time": 3, "title": 1, "to": 1, "tools": 1, "total": 1, "tracking": 1, "tracks": 1, "transform": 1, "true": 1, "tsx": 5, "type": 1, "undefined": 3, "undefined\u003e": 1, "unless": 1, "until": 1, "usage": 1, "use_cases": 1, "used": 1, "user": 3, "userprofile": 1, "value": 5, "version": 1, "what": 1, "while": 2, "will": 2, "with": 4, "wrapper": 1, "yes": 1 }, "length": 477 }, { "id": "ea17dacc147c1229b5da7c4d", "doc_id": "1a77e939d244345772133842", "title": "create-computed", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/secondary-primitives/create-computed.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-computed.json", "content": "--- title: createComputed use_cases: \u003e- immediate reactivity, building primitives, side effects with dependencies, reactive updates, custom reactive patterns tags: - reactivity - computation - primitives - effects - tracking version: \"1.0\" description: \u003e- Create immediate reactive computations with createComputed. Build custom primitives and handle side effects that respond to dependencies. --- The `createComputed` function creates a reactive computation that runs _before_ the rendering phase. It is primarily used to synchronize state before rendering begins. ## Import ```ts import { createComputed } from \"solid-js\"; ``` ## Type ```ts function createComputed\u003cNext\u003e( fn: EffectFunction\u003cundefined | NoInfer\u003cNext\u003e, Next\u003e ): void; function createComputed\u003cNext, Init = Next\u003e( fn: EffectFunction\u003cInit | Next, Next\u003e, value: Init, options?: { name?: string } ): void; function createComputed\u003cNext, Init\u003e( fn: EffectFunction\u003cInit | Next, Next\u003e, value?: Init, options?: { name?: string } ): void; ``` ## Parameters ### `fn` - **Type:** `EffectFunction\u003cundefined | NoInfer\u003cNext\u003e, Next\u003e | EffectFunction\u003cInit | Next, Next\u003e` - **Required:** Yes The function that performs the computation. It executes immediately to track dependencies and re-runs whenever a dependency changes. It receives the value returned from the previous execution as its argument. On the initial execution, it receives the [`value`](#value) parameter (if provided) or `undefined`. ### `value` - **Type:** `Init` - **Required:** No The initial value passed to `fn` on its first execution. ### `options` - **Type:** `{ name?: string }` - **Required:** No An optional configuration object with the following properties: #### `name` - **Type:** `string` - **Required:** No A debug name for the computation. It is used for identification in debugging tools like the [Solid Debugger](https://github.com/thetarnav/solid-devtools). ## Return value - **Type:** `void` `createComputed` does not return a value. ## Examples ### Basic usage ```tsx import { createComputed } from \"solid-js\"; import { createStore } from \"solid-js/store\"; type User = { name?: string; }; type UserEditorProps = { user: User; }; function UserEditor(props: UserEditorProps) { const [formData, setFormData] = createStore\u003cUser\u003e({ name: \"\", }); // Update the store synchronously when props change. // This prevents a second render cycle. createComputed(() =\u003e { setFormData(\"name\", props.user.name); }); return ( \u003cform\u003e \u003ch1\u003eEditing: {formData.name}\u003c/h1\u003e \u003cinput value={formData.name} onInput={(e) =\u003e setFormData(\"name\", e.currentTarget.value)} /\u003e \u003c/form\u003e ); } ``` ## Related - [`createMemo`](/reference/basic-reactivity/create-memo) - [`createRenderEffect`](/reference/secondary-primitives/create-render-effect)", "term_freq": { "##": 6, "###": 4, "####": 1, "#value": 1, "**": 9, "**required": 4, "**type": 5, "---": 2, "//": 2, "//github": 2, "/\u003e": 1, "/reference/basic-reactivity/create-memo": 1, "/reference/secondary-primitives/create-render-effect": 1, "\u003c/form\u003e": 1, "\u003c/h1\u003e": 1, "\u003cform\u003e": 1, "\u003ch1\u003eediting": 1, "\u003cinput": 1, "=\u003e": 2, "\u003e-": 2, "_before_": 1, "an": 1, "and": 2, "argument": 1, "as": 1, "basic": 1, "before": 1, "begins": 1, "build": 1, "building": 1, "change": 1, "changes": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/secondary-primitives/create-computed": 1, "com/thetarnav/solid-devtools": 1, "computation": 4, "computations": 1, "configuration": 1, "const": 1, "create": 1, "create-computed": 1, "createcomputed": 7, "createcomputed\u003cnext": 2, "createcomputed\u003cnext\u003e": 1, "creatememo": 1, "createrendereffect": 1, "creates": 1, "createstore": 1, "createstore\u003cuser\u003e": 1, "currenttarget": 1, "custom": 2, "cycle": 1, "debug": 1, "debugger": 1, "debugging": 1, "dependencies": 3, "dependency": 1, "description": 1, "does": 1, "effectfunction\u003cinit": 3, "effectfunction\u003cundefined": 2, "effects": 3, "examples": 1, "executes": 1, "execution": 3, "first": 1, "fn": 5, "following": 1, "for": 2, "formdata": 3, "from": 4, "function": 6, "github-document": 1, "handle": 1, "https": 2, "identification": 1, "if": 1, "immediate": 2, "immediately": 1, "import": 4, "in": 1, "init": 4, "init\u003e": 1, "initial": 2, "is": 2, "it": 5, "its": 2, "like": 1, "mdx": 1, "name": 12, "next": 3, "next\u003e": 6, "no": 3, "noinfer\u003cnext\u003e": 2, "not": 1, "object": 1, "on": 2, "oninput=": 1, "optional": 1, "options": 3, "or": 1, "parameter": 1, "parameters": 1, "passed": 1, "patterns": 1, "performs": 1, "phase": 1, "prevents": 1, "previous": 1, "primarily": 1, "primitives": 3, "properties": 1, "props": 3, "provided": 1, "re-runs": 1, "reactive": 4, "reactivity": 2, "receives": 2, "related": 1, "render": 1, "rendering": 2, "respond": 1, "return": 3, "returned": 1, "runs": 1, "second": 1, "setformdata": 3, "side": 2, "solid": 1, "solid-js": 2, "solid-js/store": 1, "state": 1, "store": 1, "string": 5, "synchronize": 1, "synchronously": 1, "tags": 1, "that": 3, "the": 13, "this": 1, "title": 1, "to": 4, "tools": 1, "track": 1, "tracking": 1, "ts": 2, "tsx": 1, "type": 3, "undefined": 1, "update": 1, "updates": 1, "usage": 1, "use_cases": 1, "used": 2, "user": 4, "usereditor": 1, "usereditorprops": 2, "value": 9, "value=": 1, "version": 1, "void": 4, "when": 1, "whenever": 1, "with": 3, "yes": 1 }, "length": 325 }, { "id": "19a9545b8b291462f41a1c43", "doc_id": "f9b5a16cefb4e0d6b77ebf73", "title": "create-context", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/component-apis/create-context.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-context.json", "content": "--- title: createContext order: 5 use_cases: \u003e- prop drilling, global state, theme providers, user authentication, app-wide settings, dependency injection tags: - context - providers - global-state - props - dependency-injection version: '1.0' description: \u003e- Create context providers with createContext to share data across components without prop drilling. Perfect for themes, auth, and global app state. --- Context provides a form of dependency injection in Solid. It is used to save from needing to pass data as props through intermediate components (aka **prop drilling**). This function creates a new context object that can be used with [useContext](/reference/component-apis/use-context) and offers the Provider control flow. The default value is used when no Provider is found above in the hierarchy. ## Usage To avoid reinstatiating a new context when Hot-Module Replacement (HMR) occurs, it is recommended to use `createContext` in its own module (file). :::danger[Hot-Module Replacement] When using HMR, the context is lost when the module is reloaded. Which will cause an error to be thrown as `useContext` will try to access it while it is still reloading. ::: For example: ```ts title=\"/context/counter.ts\" import { createContext } from \"solid-js\"; export const INITIAL_COUNT = 0; const INITIAL_STORE_SETTER = { increment: () =\u003e {}, decrement: () =\u003e {} }; export const CounterContext = createContext([ { count: INITIAL_COUNT }, INITIAL_STORE_SETTER ]); ``` With the context created in its own module, you can use to instantiate the context provider. ```ts title=\"/context/counter-component.tsx\" import { createStore } from 'solid-js/store'; import { CounterContext, INITIAL_COUNT } from \"./counter.ts\"; export function CounterProvider(props) { const [value, setValue] = createStore({ count: props.initialCount || INITIAL_COUNT }) const counter = [ value, { increment() { setValue(\"count\", currentCount =\u003e currentCount + 1) }, decrement() { setValue(\"count\", currentCount =\u003e currentCount - 1) }, }, ] return ( \u003cCounterContext.Provider value={counter}\u003e {props.children} \u003c/CounterContext.Provider\u003e ) } ``` A few imporant notes on how to pass data through the context API: - The value passed to provider is passed to `useContext` as is. - Wrapping as a reactive expression will not work. - You should pass in Signals and Stores directly instead of accessing them in the JSX. To learn how to consume the context, see the [useContext](/reference/component-apis/use-context) documentation and the [Context concepts entry](/concepts/context). ## Default Values `createContext()` takes an optional \"default value\" as an argument. If `useContext` is called and there is no corresponding context provider above it in the component hierarchy, then the value passed as `defaultValue` is returned. However, if no `defaultValue` was passed, then `undefined` is returned in this case. Also, `defaultValue` (or `undefined`) is returned if `useContext` is called inside an event callback, as it is then outside of the component hierarchy. This has implications for TS. If no `defaultValue` is passed, then it is possible that `useContext()` will return `undefined`, and the types reflect this. Another (used in the example in the previous section) is provide a default value to `createContext()`. In that case, `useContext()` will always return a value, and therefore TS will not complain either. The pitfall with this approach is that if you _unintentionally_ use `useContext` outside of a provider, it may not be immediately apparent, because the context is still providing a valid value. Therefore, if you expect to always use `useContext` within a provider, it is best to use the error based approach described above. ## Type signature ```ts interface Context\u003cT\u003e { id: symbol Provider: (props: { value: T; children: any }) =\u003e any defaultValue: T } function createContext\u003cT\u003e(defaultValue?: T): Context\u003cT | undefined\u003e ```", "term_freq": { "##": 3, "**prop": 1, "---": 2, "//github": 1, "/concepts/context": 1, "/context/counter": 1, "/context/counter-component": 1, "/counter": 1, "/reference/component-apis/use-context": 2, "\u003c/countercontext": 1, "\u003ccountercontext": 1, "=\u003e": 5, "\u003e-": 2, "_unintentionally_": 1, "above": 3, "access": 1, "accessing": 1, "across": 1, "aka": 1, "also": 1, "always": 2, "an": 4, "and": 7, "another": 1, "any": 2, "api": 1, "app": 1, "app-wide": 1, "apparent": 1, "approach": 2, "argument": 1, "as": 7, "auth": 1, "authentication": 1, "avoid": 1, "based": 1, "be": 3, "because": 1, "best": 1, "callback": 1, "called": 2, "can": 2, "case": 2, "cause": 1, "children": 2, "com/solidjs/solid-docs/blob/head/src/routes/reference/component-apis/create-context": 1, "complain": 1, "component": 2, "components": 2, "concepts": 1, "const": 5, "consume": 1, "context": 13, "context\u003ct": 1, "context\u003ct\u003e": 1, "control": 1, "corresponding": 1, "count": 4, "counter": 2, "countercontext": 2, "counterprovider": 1, "create": 1, "create-context": 1, "createcontext": 7, "createcontext\u003ct\u003e": 1, "created": 1, "creates": 1, "createstore": 2, "currentcount": 4, "danger": 1, "data": 3, "decrement": 2, "default": 4, "defaultvalue": 6, "dependency": 2, "dependency-injection": 1, "described": 1, "description": 1, "directly": 1, "documentation": 1, "drilling": 2, "drilling**": 1, "either": 1, "entry": 1, "error": 2, "event": 1, "example": 2, "expect": 1, "export": 3, "expression": 1, "few": 1, "file": 1, "flow": 1, "for": 3, "form": 1, "found": 1, "from": 4, "function": 3, "github-document": 1, "global": 2, "global-state": 1, "has": 1, "hierarchy": 3, "hmr": 2, "hot-module": 2, "how": 2, "however": 1, "https": 1, "id": 1, "if": 6, "immediately": 1, "implications": 1, "imporant": 1, "import": 3, "in": 11, "increment": 2, "initial_count": 4, "initial_store_setter": 2, "initialcount": 1, "injection": 2, "inside": 1, "instantiate": 1, "instead": 1, "interface": 1, "intermediate": 1, "is": 22, "it": 9, "its": 2, "jsx": 1, "learn": 1, "lost": 1, "may": 1, "mdx": 1, "module": 3, "needing": 1, "new": 2, "no": 4, "not": 3, "notes": 1, "object": 1, "occurs": 1, "of": 4, "offers": 1, "on": 1, "optional": 1, "or": 1, "order": 1, "outside": 2, "own": 2, "pass": 3, "passed": 5, "perfect": 1, "pitfall": 1, "possible": 1, "previous": 1, "prop": 2, "props": 6, "provide": 1, "provider": 9, "provider\u003e": 1, "providers": 3, "provides": 1, "providing": 1, "reactive": 1, "recommended": 1, "reflect": 1, "reinstatiating": 1, "reloaded": 1, "reloading": 1, "replacement": 2, "return": 3, "returned": 3, "save": 1, "section": 1, "see": 1, "settings": 1, "setvalue": 3, "share": 1, "should": 1, "signals": 1, "signature": 1, "solid": 1, "solid-js": 1, "solid-js/store": 1, "state": 2, "still": 2, "stores": 1, "symbol": 1, "tags": 1, "takes": 1, "that": 4, "the": 22, "them": 1, "theme": 1, "themes": 1, "then": 4, "there": 1, "therefore": 2, "this": 5, "through": 2, "thrown": 1, "title": 1, "title=": 2, "to": 16, "try": 1, "ts": 7, "tsx": 1, "type": 1, "types": 1, "undefined": 3, "undefined\u003e": 1, "usage": 1, "use": 5, "use_cases": 1, "usecontext": 10, "used": 4, "user": 1, "using": 1, "valid": 1, "value": 10, "value=": 1, "values": 1, "version": 1, "was": 1, "when": 4, "which": 1, "while": 1, "will": 6, "with": 4, "within": 1, "without": 1, "work": 1, "wrapping": 1, "you": 4, "||": 1 }, "length": 526 }, { "id": "74b953b3562c09bfa242624c", "doc_id": "c161456355ba0abce0a55614", "title": "create-deferred", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/secondary-primitives/create-deferred.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-deferred.json", "content": "--- title: createDeferred use_cases: \u003e- performance optimization, idle updates, non-critical ui updates, debouncing changes, reducing re-renders tags: - performance - optimization - deferred - idle - updates version: '1.0' description: \u003e- Defer reactive updates until browser idle with createDeferred. Optimize performance by batching non-critical changes with timeout control. --- ```ts import { createDeferred } from \"solid-js\" function createDeferred\u003cT\u003e( source: () =\u003e T, options?: { timeoutMs?: number equals?: false | ((prev: T, next: T) =\u003e boolean) name?: string } ): () =\u003e T ``` Creates a readonly that only notifies downstream changes when the browser is idle. `timeoutMs` is the maximum time to wait before forcing the update. ## Options | Name | Type | Description | | --------- | ------------------------------------------ | ------------------------------------------------------ | | timeoutMs | `number` | The maximum time to wait before forcing the update. | | equals | `false or ((prev: T, next: T) =\u003e boolean)` | A function that returns true if the value has changed. | | name | `string` | The name of the readonly. |", "term_freq": { "##": 1, "---": 2, "---------": 1, "------------------------------------------": 1, "------------------------------------------------------": 1, "//github": 1, "=\u003e": 4, "\u003e-": 2, "batching": 1, "before": 2, "boolean": 2, "browser": 2, "by": 1, "changed": 1, "changes": 3, "com/solidjs/solid-docs/blob/head/src/routes/reference/secondary-primitives/create-deferred": 1, "control": 1, "create-deferred": 1, "createdeferred": 3, "createdeferred\u003ct\u003e": 1, "creates": 1, "debouncing": 1, "defer": 1, "deferred": 1, "description": 2, "downstream": 1, "equals": 2, "false": 2, "forcing": 2, "from": 1, "function": 2, "github-document": 1, "has": 1, "https": 1, "idle": 4, "if": 1, "import": 1, "is": 2, "maximum": 2, "mdx": 1, "name": 4, "next": 2, "non-critical": 2, "notifies": 1, "number": 2, "of": 1, "only": 1, "optimization": 2, "optimize": 1, "options": 2, "or": 1, "performance": 3, "prev": 2, "re-renders": 1, "reactive": 1, "readonly": 2, "reducing": 1, "returns": 1, "solid-js": 1, "source": 1, "string": 2, "tags": 1, "that": 2, "the": 8, "time": 2, "timeout": 1, "timeoutms": 3, "title": 1, "to": 2, "true": 1, "ts": 1, "type": 1, "ui": 1, "until": 1, "update": 2, "updates": 4, "use_cases": 1, "value": 1, "version": 1, "wait": 2, "when": 1, "with": 2 }, "length": 135 }, { "id": "dcff4d1e8259fec1ce379cdb", "doc_id": "64158242be5ffe195e690edf", "title": "create-effect", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/basic-reactivity/create-effect.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-effect.json", "content": "--- title: createEffect use_cases: \u003e- dom manipulation, side effects, manual dom updates, vanilla js integration, cleanup operations, logging changes tags: - effects - dom - side-effects - reactivity - lifecycle - cleanup version: \"1.0\" description: \u003e- Learn how to use createEffect to run side effects when reactive dependencies change. Perfect for DOM manipulation and external library integration. --- The `createEffect` primitive creates a reactive computation. It automatically tracks reactive values, such as [signals](/concepts/signals), accessed within the provided function. This function will re-run whenever any of its dependencies change. ## Execution Timing ### Initial Run - The initial run of effects is **scheduled to occur after the current rendering phase completes**. - It runs after all synchronous code in a component has finished and DOM elements have been created, but **before the browser paints them on the screen**. - **[Refs](/concepts/refs) are set** before the first run, even though DOM nodes may not yet be attached to the main document tree. This is relevant when using the [`children`](/reference/component-apis/children) helper. ### Subsequent Runs - After the initial run, the effect **re-runs whenever any tracked dependency changes**. - When multiple dependencies change within the same batch, the effect **runs once per batch**. - The **order of runs** among multiple effects is **not guaranteed**. - Effects always run **after** all pure computations (such as [memos](/concepts/derived-values/memos)) within the same update cycle. ### Server-Side Rendering - Effects **never run during SSR**. - Effects also **do not run during the initial client hydration**. ## Import ```ts import { createEffect } from \"solid-js\"; ``` ## Type ```ts function createEffect\u003cNext\u003e( fn: EffectFunction\u003cundefined | NoInfer\u003cNext\u003e, Next\u003e ): void; function createEffect\u003cNext, Init = Next\u003e( fn: EffectFunction\u003cInit | Next, Next\u003e, value: Init, options?: { name?: string } ): void; function createEffect\u003cNext, Init\u003e( fn: EffectFunction\u003cInit | Next, Next\u003e, value?: Init, options?: { name?: string } ): void; ``` ## Parameters ### `fn` - **Type:** `EffectFunction\u003cundefined | NoInfer\u003cNext\u003e | EffectFunction\u003cInit | Next, Next\u003e` - **Required:** Yes A function to be executed as the effect. It receives the value returned from the previous run, or the initial `value` during the first run. The value returned by `fn` is passed to the next run. ### `value` - **Type:** `Init` - **Required:** No The initial value passed to `fn` during its first run. ### `options` - **Type:** `{ name?: string }` - **Required:** No An optional configuration object with the following properties: #### `name` - **Type:** `string` - **Required:** No A name for the effect, which can be useful for identification in debugging tools like the [Solid Debugger](https://github.com/thetarnav/solid-devtools). ## Return value `createEffect` does not return a value. ## Examples ### Basic Usage ```tsx import { createSignal, createEffect } from \"solid-js\"; function Counter() { const [count, setCount] = createSignal(0); // Every time count changes, this effect re-runs. createEffect(() =\u003e { console.log(\"Count incremented! New value: \", count()); }); return ( \u003cdiv\u003e \u003cp\u003eCount: {count()}\u003c/p\u003e \u003cbutton onClick={() =\u003e setCount((prev) =\u003e prev + 1)}\u003eIncrement\u003c/button\u003e \u003c/div\u003e ); } ``` ### Execution Timing ```tsx import { createSignal, createEffect, createRenderEffect } from \"solid-js\"; function Counter() { const [count, setCount] = createSignal(0); // This is part of the component's synchronous execution. console.log(\"Hello from counter\"); // This effect is scheduled to run after the initial render is complete. createEffect(() =\u003e { console.log(\"Effect:\", count()); }); // By contrast, a render effect runs synchronously during the render phase. createRenderEffect(() =\u003e { console.log(\"Render effect:\", count()); }); // Setting a signal during the render phase re-runs render effects, but not effects, which are // still scheduled. setCount(1); // A microtask is scheduled to run after the current synchronous code (the render phase) finishes. queueMicrotask(() =\u003e { // Now that rendering is complete, signal updates will trigger effects immediately. setCount(2); }); } // Output: // Hello from counter // Render effect: 0 // Render effect: 1 // Effect: 1 // Render effect: 2 // Effect: 2 ``` ## Related - [`createRenderEffect`](/reference/secondary-primitives/create-render-effect) - [`onCleanup`](/reference/lifecycle/on-cleanup) - [`onMount`](/reference/lifecycle/on-mount)", "term_freq": { "##": 7, "###": 8, "####": 1, "**": 9, "**after**": 1, "**before": 1, "**do": 1, "**never": 1, "**not": 1, "**order": 1, "**re-runs": 1, "**required": 4, "**runs": 1, "**scheduled": 1, "**type": 4, "---": 2, "//": 15, "//github": 2, "/concepts/derived-values/memos": 1, "/concepts/refs": 1, "/concepts/signals": 1, "/reference/component-apis/children": 1, "/reference/lifecycle/on-cleanup": 1, "/reference/lifecycle/on-mount": 1, "/reference/secondary-primitives/create-render-effect": 1, "\u003c/div\u003e": 1, "\u003c/p\u003e": 1, "\u003cbutton": 1, "\u003cdiv\u003e": 1, "\u003cp\u003ecount": 1, "=\u003e": 6, "\u003e-": 2, "\u003eincrement\u003c/button\u003e": 1, "accessed": 1, "after": 5, "all": 2, "also": 1, "always": 1, "among": 1, "an": 1, "and": 2, "any": 2, "are": 2, "as": 3, "attached": 1, "automatically": 1, "basic": 1, "batch": 1, "batch**": 1, "be": 3, "been": 1, "before": 1, "browser": 1, "but": 2, "by": 2, "can": 1, "change": 3, "changes": 2, "changes**": 1, "children": 1, "cleanup": 2, "client": 1, "code": 2, "com/solidjs/solid-docs/blob/head/src/routes/reference/basic-reactivity/create-effect": 1, "com/thetarnav/solid-devtools": 1, "complete": 2, "completes**": 1, "component": 2, "computation": 1, "computations": 1, "configuration": 1, "console": 4, "const": 2, "contrast": 1, "count": 8, "counter": 4, "create-effect": 1, "created": 1, "createeffect": 9, "createeffect\u003cnext": 2, "createeffect\u003cnext\u003e": 1, "createrendereffect": 3, "creates": 1, "createsignal": 4, "current": 2, "cycle": 1, "debugger": 1, "debugging": 1, "dependencies": 3, "dependency": 1, "description": 1, "document": 1, "does": 1, "dom": 6, "during": 6, "effect": 14, "effectfunction\u003cinit": 3, "effectfunction\u003cundefined": 2, "effects": 11, "elements": 1, "even": 1, "every": 1, "examples": 1, "executed": 1, "execution": 3, "external": 1, "finished": 1, "finishes": 1, "first": 3, "fn": 6, "following": 1, "for": 3, "from": 6, "function": 8, "github-document": 1, "guaranteed**": 1, "has": 1, "have": 1, "hello": 2, "helper": 1, "how": 1, "https": 2, "hydration**": 1, "identification": 1, "immediately": 1, "import": 4, "in": 2, "incremented": 1, "init": 4, "init\u003e": 1, "initial": 7, "integration": 2, "is": 9, "it": 3, "its": 2, "js": 1, "learn": 1, "library": 1, "lifecycle": 1, "like": 1, "log": 4, "logging": 1, "main": 1, "manipulation": 2, "manual": 1, "may": 1, "mdx": 1, "memos": 1, "microtask": 1, "multiple": 2, "name": 5, "new": 1, "next": 4, "next\u003e": 5, "no": 3, "nodes": 1, "noinfer\u003cnext\u003e": 2, "not": 4, "now": 1, "object": 1, "occur": 1, "of": 4, "on": 1, "once": 1, "oncleanup": 1, "onclick=": 1, "onmount": 1, "operations": 1, "optional": 1, "options": 3, "or": 1, "output": 1, "paints": 1, "parameters": 1, "part": 1, "passed": 2, "per": 1, "perfect": 1, "phase": 4, "prev": 2, "previous": 1, "primitive": 1, "properties": 1, "provided": 1, "pure": 1, "queuemicrotask": 1, "re-run": 1, "re-runs": 2, "reactive": 3, "reactivity": 1, "receives": 1, "refs": 1, "related": 1, "relevant": 1, "render": 10, "rendering": 3, "return": 3, "returned": 2, "run": 14, "runs": 3, "runs**": 1, "same": 2, "scheduled": 3, "screen**": 1, "server-side": 1, "set**": 1, "setcount": 5, "setting": 1, "side": 2, "side-effects": 1, "signal": 2, "signals": 1, "solid": 1, "solid-js": 3, "ssr**": 1, "still": 1, "string": 4, "subsequent": 1, "such": 2, "synchronous": 3, "synchronously": 1, "tags": 1, "that": 1, "the": 33, "them": 1, "this": 5, "though": 1, "time": 1, "timing": 2, "title": 1, "to": 9, "tools": 1, "tracked": 1, "tracks": 1, "tree": 1, "trigger": 1, "ts": 2, "tsx": 2, "type": 1, "update": 1, "updates": 2, "usage": 1, "use": 1, "use_cases": 1, "useful": 1, "using": 1, "value": 10, "values": 1, "vanilla": 1, "version": 1, "void": 3, "when": 3, "whenever": 2, "which": 2, "will": 2, "with": 1, "within": 3, "yes": 1, "yet": 1 }, "length": 593 }, { "id": "6ee86658405e4ae97eb13e2c", "doc_id": "f57f946011b9b0354c6543d5", "title": "create-handler", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/server/create-handler.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-handler.json", "content": "--- title: createHandler use_cases: \u003e- ssr mode configuration, server startup, streaming setup, async rendering, performance tuning tags: - handler - ssr - server - streaming - async - rendering version: '1.0' description: \u003e- Configure server-side rendering modes in SolidStart. Choose between sync, async, or streaming SSR for optimal performance and UX. --- The `createHandler` is used to start the server in [`entry-server.tsx`](/solid-start/reference/entrypoints/entry-server). It takes a function that returns a static document (often created with [`\u003cStartServer\u003e`](/solid-start/reference/server/start-server)), and serves it using one of the three function for server side rendering (SSR): - [`renderToString`](/reference/rendering/render-to-string) - \"sync\" - [`renderToStringAsync`](/reference/rendering/render-to-string-async) - \"async\" - [`renderToStream`](/reference/rendering/render-to-stream) - \"stream\" The SSR mode can be configured through the `mode` property on the options object: ```tsx import { createHandler, StartServer } from \"@solidjs/start/server\"; export default createHandler(() =\u003e ( \u003cStartServer document={...} /\u003e ), { mode: \"async\" }); ``` ## Parameters | Argument | Type | Default | Description | | ------------ | ------------------------ | -------- | ----------------------------------------------------------------- | | fn | fn: (context: PageEvent) | | A function that returns the static document for your application. | | options.mode | string | \"stream\" | The SSR mode. Options are 'sync', 'async' and 'stream'. |", "term_freq": { "##": 1, "---": 2, "--------": 1, "------------": 1, "------------------------": 1, "-----------------------------------------------------------------": 1, "//github": 1, "/\u003e": 1, "/reference/rendering/render-to-stream": 1, "/reference/rendering/render-to-string": 1, "/reference/rendering/render-to-string-async": 1, "/solid-start/reference/entrypoints/entry-server": 1, "/solid-start/reference/server/start-server": 1, "\u003cstartserver": 1, "\u003cstartserver\u003e": 1, "=\u003e": 1, "\u003e-": 2, "@solidjs/start/server": 1, "and": 3, "application": 1, "are": 1, "argument": 1, "async": 6, "be": 1, "between": 1, "can": 1, "choose": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/server/create-handler": 1, "configuration": 1, "configure": 1, "configured": 1, "context": 1, "create-handler": 1, "created": 1, "createhandler": 4, "default": 2, "description": 2, "document": 2, "document=": 1, "entry-server": 1, "export": 1, "fn": 2, "for": 3, "from": 1, "function": 3, "github-document": 1, "handler": 1, "https": 1, "import": 1, "in": 2, "is": 1, "it": 2, "mdx": 1, "mode": 6, "modes": 1, "object": 1, "of": 1, "often": 1, "on": 1, "one": 1, "optimal": 1, "options": 3, "or": 1, "pageevent": 1, "parameters": 1, "performance": 2, "property": 1, "rendering": 4, "rendertostream": 1, "rendertostring": 1, "rendertostringasync": 1, "returns": 2, "server": 4, "server-side": 1, "serves": 1, "setup": 1, "side": 1, "solidstart": 1, "ssr": 6, "start": 1, "startserver": 1, "startup": 1, "static": 2, "stream": 3, "streaming": 3, "string": 1, "sync": 3, "tags": 1, "takes": 1, "that": 2, "the": 8, "three": 1, "through": 1, "title": 1, "to": 1, "tsx": 2, "tuning": 1, "type": 1, "use_cases": 1, "used": 1, "using": 1, "ux": 1, "version": 1, "with": 1, "your": 1 }, "length": 163 }, { "id": "d4b42f8c3c584954ab59555b", "doc_id": "0865e34d19b3fee276dd119a", "title": "create-memo", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/basic-reactivity/create-memo.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-memo.json", "content": "--- title: createMemo use_cases: \u003e- expensive computations, derived values, performance optimization, caching calculations, preventing duplicate work tags: - memoization - performance - optimization - derived-state - caching - reactivity version: \"1.0\" description: \u003e- Use createMemo to efficiently compute and cache derived values. Prevent expensive recalculations and optimize your Solid.js application's performance. --- The `createMemo` function creates a read-only signal that derives its value from other reactive values. The calculated value is memoized: the calculation runs only when dependencies change, and is reused when the value is read. When a dependency changes, the calculation re-executes. If the new result is equal to the previous result (according to the [`equals`](#equals) option), the memo suppresses downstream updates. ## Import ```ts import { createMemo } from \"solid-js\"; ``` ## Type ```ts function createMemo\u003cT\u003e( fn: (v: T) =\u003e T, value?: T, options?: { equals?: false | ((prev: T, next: T) =\u003e boolean); name?: string } ): () =\u003e T; ``` ## Parameters ### `fn` - **Type:** `(v: T) =\u003e T` - **Required:** Yes The function that calculates the memo's value. It receives the value returned from the previous execution as its argument. On the first execution, it receives the `value` parameter (if provided) or `undefined`. This function should be pure (it should not modify other reactive values). ### `value` - **Type:** `T` - **Required:** No The initial value passed to `fn` on its first execution. ### `options` - **Type:** `{ equals?: false | ((prev: T, next: T) =\u003e boolean); name?: string }` - **Required:** No An optional configuration object with the following properties: #### `equals` - **Type:** `false | ((prev: T, next: T) =\u003e boolean)` - **Required:** No A function that runs after each execution of `fn` to determine if the memo value has changed. It receives the previous and the new value. If it returns `true`, the values are considered equal and the memo does not trigger downstream updates. If set to `false` (instead of a function), the memo triggers updates whenever it re-executes, even if the value is unchanged. Defaults to a function that compares values using strict equality (`===`). #### `name` - **Type:** `string` - **Required:** No A debug name for the memo. It is used for identification in debugging tools like the [Solid Debugger](https://github.com/thetarnav/solid-devtools). ## Return value - **Type:** `() =\u003e T` `createMemo` returns a read-only accessor function. Calling this function returns the current memoized value. ## Examples ### Basic usage ```tsx import { createSignal, createMemo, For } from \"solid-js\"; const NAMES = [\"Alice Smith\", \"Bob Jones\", \"Charlie Day\", \"David Lee\"]; function FilterList() { const [query, setQuery] = createSignal(\"\"); // The function executes immediately to calculate the initial value. // It re-executes only when the `query` signal changes. const filteredNames = createMemo(() =\u003e { console.log(\"Calculating list...\"); return NAMES.filter((name) =\u003e { return name.toLowerCase().includes(query().toLowerCase()); }); }); return ( \u003cdiv\u003e \u003cinput value={query()} onInput={(e) =\u003e setQuery(e.currentTarget.value)} placeholder=\"Search...\" /\u003e {/* Accessing the memo. If dependencies haven't changed, returns cached value. */} \u003cdiv\u003eCount: {filteredNames().length}\u003c/div\u003e \u003cul\u003e {/* Accessing the memo again does not trigger re-execution. */} \u003cFor each={filteredNames()}\u003e{(name) =\u003e \u003cli\u003e{name}\u003c/li\u003e}\u003c/For\u003e \u003c/ul\u003e \u003c/div\u003e ); } ``` ### Custom equality check ```tsx import { createSignal, createMemo, createEffect } from \"solid-js\"; function DateNormalizer() { const [dateString, setDateString] = createSignal(\"2024-05-10\"); const dateObject = createMemo( () =\u003e { return new Date(dateString()); }, undefined, { // Overrides the default strict equality check (===). // If this returns true, observers (like the Effect below) are NOT notified. equals: (prev, next) =\u003e { return prev.getTime() === next.getTime(); }, } ); createEffect(() =\u003e { // This effect runs only when the numeric time value changes, // ignoring new Date object references. console.log(\"Date changed to:\", dateObject().toISOString()); }); return ( \u003cdiv\u003e \u003cinput value={dateString()} onInput={(e) =\u003e setDateString(e.currentTarget.value)} /\u003e {/* Setting the same date string creates a new Date object, but `equals` prevents the update propagation. */} \u003cbutton onClick={() =\u003e setDateString(\"2024-05-10\")}\u003e Reset to the same date \u003c/button\u003e \u003c/div\u003e ); } ``` ### Accessing previous value ```tsx import { createSignal, createMemo } from \"solid-js\"; function TrendTracker() { const [count, setCount] = createSignal(0); const trend = createMemo( // The first argument `prev` is the return value of the previous execution. (prev) =\u003e { const current = count(); if (current === prev.value) return { value: current, label: \"Same\" }; return { value: current, label: current \u003e prev.value ? \"Up\" : \"Down\", }; }, // The second argument provides the initial value for `prev`. { value: 0, label: \"Same\" } ); return ( \u003cdiv\u003e \u003cdiv\u003eCurrent: {trend().value}\u003c/div\u003e \u003cdiv\u003eDirection: {trend().label}\u003c/div\u003e \u003cbutton onClick={() =\u003e setCount((c) =\u003e c + 1)}\u003eIncrement\u003c/button\u003e \u003cbutton onClick={() =\u003e setCount((c) =\u003e c - 1)}\u003eDecrement\u003c/button\u003e \u003c/div\u003e ); } ``` ## Related - [`createComputed`](/reference/secondary-primitives/create-computed)", "term_freq": { "##": 6, "###": 6, "####": 2, "#equals": 1, "**": 11, "**required": 5, "**type": 6, "*/": 3, "---": 2, "/*": 3, "//": 8, "//github": 2, "/\u003e": 2, "/reference/secondary-primitives/create-computed": 1, "2024-05-10": 2, "\u003c/button\u003e": 1, "\u003c/div\u003e": 6, "\u003c/for\u003e": 1, "\u003c/li\u003e": 1, "\u003c/ul\u003e": 1, "\u003cbutton": 3, "\u003cdiv\u003e": 3, "\u003cdiv\u003ecount": 1, "\u003cdiv\u003ecurrent": 1, "\u003cdiv\u003edirection": 1, "\u003cfor": 1, "\u003cinput": 2, "\u003cli\u003e": 1, "\u003cul\u003e": 1, "===": 4, "=\u003e": 21, "\u003e-": 2, "\u003edecrement\u003c/button\u003e": 1, "\u003eincrement\u003c/button\u003e": 1, "accessing": 3, "accessor": 1, "according": 1, "after": 1, "again": 1, "alice": 1, "an": 1, "and": 5, "application": 1, "are": 2, "argument": 3, "as": 1, "basic": 1, "be": 1, "below": 1, "bob": 1, "boolean": 3, "but": 1, "cache": 1, "cached": 1, "caching": 2, "calculate": 1, "calculated": 1, "calculates": 1, "calculating": 1, "calculation": 2, "calculations": 1, "calling": 1, "change": 1, "changed": 3, "changes": 3, "charlie": 1, "check": 2, "com/solidjs/solid-docs/blob/head/src/routes/reference/basic-reactivity/create-memo": 1, "com/thetarnav/solid-devtools": 1, "compares": 1, "computations": 1, "compute": 1, "configuration": 1, "considered": 1, "console": 2, "const": 8, "count": 2, "create-memo": 1, "createcomputed": 1, "createeffect": 2, "creatememo": 11, "creatememo\u003ct\u003e": 1, "creates": 2, "createsignal": 6, "current": 6, "currenttarget": 2, "custom": 1, "date": 6, "datenormalizer": 1, "dateobject": 2, "datestring": 3, "david": 1, "day": 1, "debug": 1, "debugger": 1, "debugging": 1, "default": 1, "defaults": 1, "dependencies": 2, "dependency": 1, "derived": 2, "derived-state": 1, "derives": 1, "description": 1, "determine": 1, "does": 2, "down": 1, "downstream": 2, "duplicate": 1, "each": 1, "each=": 1, "effect": 2, "efficiently": 1, "equal": 2, "equality": 3, "equals": 6, "even": 1, "examples": 1, "executes": 1, "execution": 5, "expensive": 2, "false": 4, "filter": 1, "filterednames": 3, "filterlist": 1, "first": 3, "fn": 4, "following": 1, "for": 4, "from": 6, "function": 13, "gettime": 2, "github-document": 1, "has": 1, "haven": 1, "https": 2, "identification": 1, "if": 9, "ignoring": 1, "immediately": 1, "import": 5, "in": 1, "includes": 1, "initial": 3, "instead": 1, "is": 7, "it": 8, "its": 3, "jones": 1, "js": 1, "label": 4, "lee": 1, "length": 1, "like": 2, "list": 1, "log": 2, "mdx": 1, "memo": 8, "memoization": 1, "memoized": 2, "modify": 1, "name": 8, "names": 2, "new": 5, "next": 5, "no": 4, "not": 4, "notified": 1, "numeric": 1, "object": 3, "observers": 1, "of": 3, "on": 2, "onclick=": 3, "oninput=": 2, "only": 3, "optimization": 2, "optimize": 1, "option": 1, "optional": 1, "options": 2, "or": 1, "other": 2, "overrides": 1, "parameter": 1, "parameters": 1, "passed": 1, "performance": 3, "placeholder=": 1, "prev": 10, "prevent": 1, "preventing": 1, "prevents": 1, "previous": 5, "propagation": 1, "properties": 1, "provided": 1, "provides": 1, "pure": 1, "query": 4, "re-executes": 3, "re-execution": 1, "reactive": 2, "reactivity": 1, "read": 1, "read-only": 2, "recalculations": 1, "receives": 3, "references": 1, "related": 1, "reset": 1, "result": 2, "return": 11, "returned": 1, "returns": 5, "reused": 1, "runs": 3, "same": 4, "search": 1, "second": 1, "set": 1, "setcount": 3, "setdatestring": 3, "setquery": 2, "setting": 1, "should": 2, "signal": 2, "smith": 1, "solid": 2, "solid-js": 4, "strict": 2, "string": 4, "suppresses": 1, "tags": 1, "that": 4, "the": 43, "this": 4, "time": 1, "title": 1, "to": 10, "toisostring": 1, "tolowercase": 2, "tools": 1, "trend": 3, "trendtracker": 1, "trigger": 2, "triggers": 1, "true": 2, "ts": 2, "tsx": 3, "type": 1, "unchanged": 1, "undefined": 2, "up": 1, "update": 1, "updates": 3, "usage": 1, "use": 1, "use_cases": 1, "used": 1, "using": 1, "value": 28, "value=": 2, "values": 6, "version": 1, "when": 5, "whenever": 1, "with": 1, "work": 1, "yes": 1, "your": 1 }, "length": 699 }, { "id": "9a7b856f06f12127127fab52", "doc_id": "a09434b760fe98889f5a37cc", "title": "create-middleware", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/server/create-middleware.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-middleware.json", "content": "--- title: createMiddleware use_cases: \u003e- request interception, logging, authentication checks, cors setup, response modification, api middleware tags: - middleware - request - response - lifecycle - interceptor - hooks version: '1.0' description: \u003e- Add middleware to SolidStart request lifecycle. Intercept requests and responses for logging, auth, CORS, and custom processing. --- `createMiddleware` creates a configuration object for SolidStart that specifies when middleware functions are executed during the request lifecycle. There are two lifecycle events available: `onRequest` and `onBeforeResponse`. - The `onRequest` event is triggered at the beginning of the request lifecycle, before the request is handled by the route handler. - The `onBeforeResponse` event is triggered after a request has been processed by the route handler but before the response is sent to the client. :::note SolidStart will only execute the middleware functions if the path to the middleware file is configured within `app.config.ts` using the `middleware` option. This file must export the configuration using `export default`. ::: Learn more about middleware in the [Middleware documentation](/solid-start/advanced/middleware). ## Parameters `createMiddleware` takes an object with the following keys: - `onRequest` (optional): A middleware function or an array of functions to execute at the `onRequest` event. If an array is provided, the middleware functions will be executed one by one, in the order they appear in the array. - `onBeforeResponse` (optional): A middleware function or an array of functions to execute at the `onBeforeResponse` event. If an array is provided, the middleware functions will be executed one by one, in the order they appear in the array. ## Example ```ts title=\"src/middleware/index.ts\" import { createMiddleware } from \"@solidjs/start/middleware\"; export default createMiddleware({ onRequest: (event) =\u003e { console.log(\"Request received:\", event.request.url); }, onBeforeResponse: (event) =\u003e { console.log(\"Sending response:\", event.response.status); }, }); ``` ```ts title=\"app.config.ts\" import { defineConfig } from \"@solidjs/start/config\"; export default defineConfig({ middleware: \"src/middleware/index.ts\", }); ```", "term_freq": { "##": 2, "---": 2, "//github": 1, "/solid-start/advanced/middleware": 1, "=\u003e": 2, "\u003e-": 2, "@solidjs/start/config": 1, "@solidjs/start/middleware": 1, "about": 1, "add": 1, "after": 1, "an": 5, "and": 3, "api": 1, "app": 2, "appear": 2, "are": 2, "array": 6, "at": 3, "auth": 1, "authentication": 1, "available": 1, "be": 2, "been": 1, "before": 2, "beginning": 1, "but": 1, "by": 4, "checks": 1, "client": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/server/create-middleware": 1, "config": 2, "configuration": 2, "configured": 1, "console": 2, "cors": 2, "create-middleware": 1, "createmiddleware": 5, "creates": 1, "custom": 1, "default": 3, "defineconfig": 2, "description": 1, "documentation": 1, "during": 1, "event": 8, "events": 1, "example": 1, "execute": 3, "executed": 3, "export": 4, "file": 2, "following": 1, "for": 2, "from": 2, "function": 2, "functions": 6, "github-document": 1, "handled": 1, "handler": 2, "has": 1, "hooks": 1, "https": 1, "if": 3, "import": 2, "in": 5, "intercept": 1, "interception": 1, "interceptor": 1, "is": 7, "keys": 1, "learn": 1, "lifecycle": 5, "log": 2, "logging": 2, "mdx": 1, "middleware": 14, "modification": 1, "more": 1, "must": 1, "note": 1, "object": 2, "of": 3, "onbeforeresponse": 5, "one": 4, "only": 1, "onrequest": 5, "option": 1, "optional": 2, "or": 2, "order": 2, "parameters": 1, "path": 1, "processed": 1, "processing": 1, "provided": 2, "received": 1, "request": 9, "requests": 1, "response": 5, "responses": 1, "route": 2, "sending": 1, "sent": 1, "setup": 1, "solidstart": 3, "specifies": 1, "src/middleware/index": 2, "status": 1, "tags": 1, "takes": 1, "that": 1, "the": 25, "there": 1, "they": 2, "this": 1, "title": 1, "title=": 2, "to": 5, "triggered": 2, "ts": 6, "two": 1, "url": 1, "use_cases": 1, "using": 2, "version": 1, "when": 1, "will": 3, "with": 1, "within": 1 }, "length": 295 }, { "id": "de7df87e6c4508715fbe74a9", "doc_id": "062f678266c330dda5494744", "title": "create-mutable", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/store-utilities/create-mutable.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-mutable.json", "content": "--- title: createMutable use_cases: \u003e- mobx migration, vue compatibility, external system integration, mutable state patterns, proxy-based reactivity tags: - store - mutable - proxy - state - compatibility version: '1.0' description: \u003e- Create mutable proxy stores with automatic deep tracking. Ideal for MobX/Vue compatibility or integrating external mutable systems. --- `createMutable` creates a new mutable Store proxy object that provides a way to selectively trigger updates only when values change. By intercepting property access, it allows automatic tracking of deep nesting via proxy making it useful for integrating external systems or serving as a compatibility layer with frameworks like MobX or Vue. ```tsx import { createMutable } from \"solid-js/store\" import type { Store, StoreNode } from \"solid-js/store\" function createMutable\u003cT extends StoreNode\u003e(state: T | Store\u003cT\u003e): Store\u003cT\u003e; ``` :::note It's important to recognize that a mutable state, which can be passed around and modified anywhere, may complicate the code structure and increase the risk of breaking unidirectional flow. For a more robust alternative, it is generally recommended to use `createStore` instead. Additionally, the [`produce`](/reference/store-utilities/produce) utility can provide many of these same benefits without the associated downsides. ::: ```tsx import { createMutable } from \"solid-js/store\" const state = createMutable({ someValue: 0, list: [], }); // read value state.someValue; // set value state.someValue = 5; state.list.push(anotherValue); ``` Mutables support setters along with getters. ```tsx const user = createMutable({ firstName: \"John\", lastName: \"Smith\", get fullName() { return `${this.firstName} ${this.lastName}`; }, set setFullName(value) { [this.firstName, this.lastName] = value.split(\" \"); }, }); ```", "term_freq": { "---": 2, "//": 2, "//github": 1, "/reference/store-utilities/produce": 1, "\u003e-": 2, "access": 1, "additionally": 1, "allows": 1, "along": 1, "alternative": 1, "and": 2, "anothervalue": 1, "anywhere": 1, "around": 1, "as": 1, "associated": 1, "automatic": 2, "be": 1, "benefits": 1, "breaking": 1, "by": 1, "can": 2, "change": 1, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/store-utilities/create-mutable": 1, "compatibility": 4, "complicate": 1, "const": 2, "create": 1, "create-mutable": 1, "createmutable": 6, "createmutable\u003ct": 1, "creates": 1, "createstore": 1, "deep": 2, "description": 1, "downsides": 1, "extends": 1, "external": 3, "firstname": 3, "flow": 1, "for": 3, "frameworks": 1, "from": 3, "fullname": 1, "function": 1, "generally": 1, "get": 1, "getters": 1, "github-document": 1, "https": 1, "ideal": 1, "import": 3, "important": 1, "increase": 1, "instead": 1, "integrating": 2, "integration": 1, "intercepting": 1, "is": 1, "it": 4, "john": 1, "lastname": 3, "layer": 1, "like": 1, "list": 2, "making": 1, "many": 1, "may": 1, "mdx": 1, "migration": 1, "mobx": 2, "mobx/vue": 1, "modified": 1, "more": 1, "mutable": 6, "mutables": 1, "nesting": 1, "new": 1, "note": 1, "object": 1, "of": 3, "only": 1, "or": 3, "passed": 1, "patterns": 1, "produce": 1, "property": 1, "provide": 1, "provides": 1, "proxy": 4, "proxy-based": 1, "push": 1, "reactivity": 1, "read": 1, "recognize": 1, "recommended": 1, "return": 1, "risk": 1, "robust": 1, "same": 1, "selectively": 1, "serving": 1, "set": 2, "setfullname": 1, "setters": 1, "smith": 1, "solid-js/store": 3, "somevalue": 3, "split": 1, "state": 8, "store": 3, "store\u003ct\u003e": 2, "storenode": 1, "storenode\u003e": 1, "stores": 1, "structure": 1, "support": 1, "system": 1, "systems": 2, "tags": 1, "that": 2, "the": 4, "these": 1, "this": 4, "title": 1, "to": 3, "tracking": 2, "trigger": 1, "tsx": 3, "type": 1, "unidirectional": 1, "updates": 1, "use": 1, "use_cases": 1, "useful": 1, "user": 1, "utility": 1, "value": 4, "values": 1, "version": 1, "via": 1, "vue": 2, "way": 1, "when": 1, "which": 1, "with": 3, "without": 1 }, "length": 228 }, { "id": "7ddbf11572289466512a0213", "doc_id": "67981896ec63617a429becd3", "title": "create-reaction", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/secondary-primitives/create-reaction.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-reaction.json", "content": "--- title: createReaction use_cases: \u003e- custom tracking logic, one-time reactions, separating tracking from execution, advanced reactive patterns tags: - reactivity - tracking - custom - effects - advanced version: '1.0' description: \u003e- Separate tracking from execution with createReaction. Create one-time reactive side effects that run on first dependency change only. --- ```ts import { createReaction } from \"solid-js\" function createReaction(onInvalidate: () =\u003e void): (fn: () =\u003e void) =\u003e void ``` Sometimes it is useful to separate tracking from re-execution. This primitive registers a side effect that is run the first time the expression wrapped by the returned tracking function is notified of a change. ```ts const [s, set] = createSignal(\"start\") const track = createReaction(() =\u003e console.log(\"something\")) // run the reaction next time `s` changes. track(() =\u003e s()) set(\"end\") // \"something\" set(\"final\") // no-op since the reaction only runs on the first update, need to call `track` again. ```", "term_freq": { "---": 2, "//": 3, "//github": 1, "=\u003e": 5, "\u003e-": 2, "advanced": 2, "again": 1, "by": 1, "call": 1, "change": 2, "changes": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/secondary-primitives/create-reaction": 1, "console": 1, "const": 2, "create": 1, "create-reaction": 1, "createreaction": 5, "createsignal": 1, "custom": 2, "dependency": 1, "description": 1, "effect": 1, "effects": 2, "end": 1, "execution": 2, "expression": 1, "final": 1, "first": 3, "fn": 1, "from": 4, "function": 2, "github-document": 1, "https": 1, "import": 1, "is": 3, "it": 1, "log": 1, "logic": 1, "mdx": 1, "need": 1, "next": 1, "no-op": 1, "notified": 1, "of": 1, "on": 2, "one-time": 2, "oninvalidate": 1, "only": 2, "patterns": 1, "primitive": 1, "re-execution": 1, "reaction": 2, "reactions": 1, "reactive": 2, "reactivity": 1, "registers": 1, "returned": 1, "run": 3, "runs": 1, "separate": 2, "separating": 1, "set": 3, "side": 2, "since": 1, "solid-js": 1, "something": 2, "sometimes": 1, "start": 1, "tags": 1, "that": 2, "the": 6, "this": 1, "time": 2, "title": 1, "to": 2, "track": 3, "tracking": 6, "ts": 2, "update": 1, "use_cases": 1, "useful": 1, "version": 1, "void": 3, "with": 1, "wrapped": 1 }, "length": 141 }, { "id": "7aafc4821ba9901364d2a3bb", "doc_id": "d80911e87bb5d4a641f7d7e8", "title": "create-render-effect", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/secondary-primitives/create-render-effect.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-render-effect.json", "content": "--- title: createRenderEffect use_cases: \u003e- dom manipulation during render, immediate effects, rendering phase logic, ref-independent effects, custom rendering tags: - rendering - effects - dom - immediate - refs - lifecycle version: \"1.0\" description: \u003e- Execute effects immediately during rendering with createRenderEffect. Run side effects as DOM creates, before refs are set or connected. --- The `createRenderEffect` primitive creates a reactive computation that automatically tracks reactive values, such as [signals](/concepts/signals), accessed within the provided function. This function re-runs whenever any of its dependencies change. ## Execution Timing ### Initial Run - A render effect runs **synchronously during the current rendering phase**, while DOM elements are being created or updated. - It **runs before elements are mounted** to the DOM. - **[Refs](/concepts/refs) are not set** during this initial run. ### Subsequent Runs - After the initial render, the render effect **re-runs whenever any of its tracked dependencies change**. - Re-runs occur **after** all pure computations (such as [memos](/concepts/derived-values/memos)) have completed within the same update cycle. - When multiple dependencies change within the same batch, the render effect **runs once per batch**. - The **order of re-runs** among multiple render effects is **not guaranteed**. ### Server-Side Rendering - During SSR, render effects **run once on the server**, since they are part of the synchronous rendering phase. - On the client, an initial run still occurs during the client rendering phase to initialize the reactive system; that client initial run is separate from the server run. - After hydration, subsequent runs occur on the client when dependencies change. ## Import ```ts import { createRenderEffect } from \"solid-js\"; ``` ## Type ```ts function createRenderEffect\u003cNext\u003e( fn: EffectFunction\u003cundefined | NoInfer\u003cNext\u003e, Next\u003e ): void; function createRenderEffect\u003cNext, Init = Next\u003e( fn: EffectFunction\u003cInit | Next, Next\u003e, value: Init, options?: { name?: string } ): void; function createRenderEffect\u003cNext, Init\u003e( fn: EffectFunction\u003cInit | Next, Next\u003e, value?: Init, options?: { name?: string } ): void; ``` ## Parameters ### `fn` - **Type:** `EffectFunction\u003cundefined | NoInfer\u003cNext\u003e | EffectFunction\u003cInit | Next, Next\u003e` - **Required:** Yes A function to be executed as the render effect. It receives the value returned from the previous run, or the initial `value` during the first run. The value returned by `fn` is passed to the next run. ### `value` - **Type:** `Init` - **Required:** No The initial value passed to `fn` during its first run. ### `options` - **Type:** `{ name?: string }` - **Required:** No An optional configuration object with the following properties: #### `name` - **Type:** `string` - **Required:** No A name for the render effect, which can be useful for identification in debugging tools like the [Solid Debugger](https://github.com/thetarnav/solid-devtools). ## Return value `createRenderEffect` does not return a value. ## Examples ### Basic Usage ```tsx import { createSignal, createRenderEffect } from \"solid-js\"; function Counter() { const [count, setCount] = createSignal(0); // This runs immediately during render, and re-runs when the count changes. createRenderEffect(() =\u003e { console.log(\"Count: \", count()); }); return ( \u003cdiv\u003e \u003cp\u003eCount: {count()}\u003c/p\u003e \u003cbutton onClick={() =\u003e setCount((prev) =\u003e prev + 1)}\u003eIncrement\u003c/button\u003e \u003c/div\u003e ); } ``` ### Execution Timing ```tsx import { createSignal, createEffect, createRenderEffect } from \"solid-js\"; function Counter() { const [count, setCount] = createSignal(0); // This is part of the component's synchronous execution. console.log(\"Hello from counter\"); // This effect is scheduled to run after the initial render is complete. createEffect(() =\u003e { console.log(\"Effect:\", count()); }); // By contrast, a render effect runs synchronously during the render phase. createRenderEffect(() =\u003e { console.log(\"Render effect:\", count()); }); // Setting a signal during the render phase re-runs render effects, but not effects, which are // still scheduled. setCount(1); // A microtask is scheduled to run after the current synchronous code (the render phase) finishes. queueMicrotask(() =\u003e { // Now that rendering is complete, signal updates will trigger effects immediately. setCount(2); }); } // Output: // Hello from counter // Render effect: 0 // Render effect: 1 // Effect: 1 // Render effect: 2 // Effect: 2 ``` ## Related - [`createEffect`](/reference/basic-reactivity/create-effect) - [`onCleanup`](/reference/lifecycle/on-cleanup)", "term_freq": { "##": 7, "###": 8, "####": 1, "**": 9, "**after**": 1, "**not": 1, "**order": 1, "**re-runs": 1, "**required": 4, "**run": 1, "**runs": 2, "**synchronously": 1, "**type": 4, "---": 2, "//": 15, "//github": 2, "/concepts/derived-values/memos": 1, "/concepts/refs": 1, "/concepts/signals": 1, "/reference/basic-reactivity/create-effect": 1, "/reference/lifecycle/on-cleanup": 1, "\u003c/div\u003e": 1, "\u003c/p\u003e": 1, "\u003cbutton": 1, "\u003cdiv\u003e": 1, "\u003cp\u003ecount": 1, "=\u003e": 6, "\u003e-": 2, "\u003eincrement\u003c/button\u003e": 1, "accessed": 1, "after": 4, "all": 1, "among": 1, "an": 2, "and": 1, "any": 2, "are": 6, "as": 4, "automatically": 1, "basic": 1, "batch": 1, "batch**": 1, "be": 2, "before": 2, "being": 1, "but": 1, "by": 2, "can": 1, "change": 3, "change**": 1, "changes": 1, "client": 4, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/secondary-primitives/create-render-effect": 1, "com/thetarnav/solid-devtools": 1, "complete": 2, "completed": 1, "component": 1, "computation": 1, "computations": 1, "configuration": 1, "connected": 1, "console": 4, "const": 2, "contrast": 1, "count": 8, "counter": 4, "create-render-effect": 1, "created": 1, "createeffect": 3, "createrendereffect": 9, "createrendereffect\u003cnext": 2, "createrendereffect\u003cnext\u003e": 1, "creates": 2, "createsignal": 4, "current": 2, "custom": 1, "cycle": 1, "debugger": 1, "debugging": 1, "dependencies": 4, "description": 1, "does": 1, "dom": 5, "during": 11, "effect": 14, "effectfunction\u003cinit": 3, "effectfunction\u003cundefined": 2, "effects": 10, "elements": 2, "examples": 1, "execute": 1, "executed": 1, "execution": 3, "finishes": 1, "first": 2, "fn": 6, "following": 1, "for": 2, "from": 7, "function": 8, "github-document": 1, "guaranteed**": 1, "have": 1, "hello": 2, "https": 2, "hydration": 1, "identification": 1, "immediate": 2, "immediately": 3, "import": 4, "in": 1, "init": 4, "init\u003e": 1, "initial": 8, "initialize": 1, "is": 8, "it": 2, "its": 3, "lifecycle": 1, "like": 1, "log": 4, "logic": 1, "manipulation": 1, "mdx": 1, "memos": 1, "microtask": 1, "mounted**": 1, "multiple": 2, "name": 5, "next": 4, "next\u003e": 5, "no": 3, "noinfer\u003cnext\u003e": 2, "not": 3, "now": 1, "object": 1, "occur": 2, "occurs": 1, "of": 5, "on": 3, "once": 2, "oncleanup": 1, "onclick=": 1, "optional": 1, "options": 3, "or": 3, "output": 1, "parameters": 1, "part": 2, "passed": 2, "per": 1, "phase": 6, "phase**": 1, "prev": 2, "previous": 1, "primitive": 1, "properties": 1, "provided": 1, "pure": 1, "queuemicrotask": 1, "re-runs": 4, "re-runs**": 1, "reactive": 3, "receives": 1, "ref-independent": 1, "refs": 3, "related": 1, "render": 20, "rendering": 9, "return": 3, "returned": 2, "run": 12, "runs": 5, "same": 2, "scheduled": 3, "separate": 1, "server": 1, "server**": 1, "server-side": 1, "set": 1, "set**": 1, "setcount": 5, "setting": 1, "side": 1, "signal": 2, "signals": 1, "since": 1, "solid": 1, "solid-js": 3, "ssr": 1, "still": 2, "string": 4, "subsequent": 2, "such": 2, "synchronous": 3, "synchronously": 1, "system": 1, "tags": 1, "that": 3, "the": 35, "they": 1, "this": 5, "timing": 2, "title": 1, "to": 7, "tools": 1, "tracked": 1, "tracks": 1, "trigger": 1, "ts": 2, "tsx": 2, "type": 1, "update": 1, "updated": 1, "updates": 1, "usage": 1, "use_cases": 1, "useful": 1, "value": 9, "values": 1, "version": 1, "void": 3, "when": 3, "whenever": 2, "which": 2, "while": 1, "will": 1, "with": 2, "within": 3, "yes": 1 }, "length": 602 }, { "id": "b06ad6f1b48a7e317d917c48", "doc_id": "559b56f9cca55d8e9ffb7895", "title": "create-resource", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/basic-reactivity/create-resource.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-resource.json", "content": "--- title: createResource use_cases: \u003e- data fetching, api calls, async operations, loading states, error handling, server data, suspense boundaries tags: - async - fetching - api - suspense - loading - error-handling - ssr version: \"1.0\" description: \u003e- Fetch async data with createResource. Handles loading states, errors, and integrates with Suspense for seamless data fetching in Solid.js applications. --- Creates a reactive resource that manages asynchronous data fetching and loading states, automatically tracking dependencies and providing a simple interface for reading, refreshing, and error handling. It integrates with Solid's reactivity system and Suspense boundaries. ## Import ```typescript import { createResource } from \"solid-js\"; ``` ## Type ```typescript // Without source function createResource\u003cT, R = unknown\u003e( fetcher: ResourceFetcher\u003ctrue, T, R\u003e, options?: ResourceOptions\u003cT\u003e ): ResourceReturn\u003cT, R\u003e; // With source function createResource\u003cT, S, R = unknown\u003e( source: ResourceSource\u003cS\u003e, fetcher: ResourceFetcher\u003cS, T, R\u003e, options?: ResourceOptions\u003cT, S\u003e ): ResourceReturn\u003cT, R\u003e; ``` ### Related types ```typescript type ResourceReturn\u003cT, R = unknown\u003e = [Resource\u003cT\u003e, ResourceActions\u003cT, R\u003e]; type Resource\u003cT\u003e = { (): T | undefined; state: \"unresolved\" | \"pending\" | \"ready\" | \"refreshing\" | \"errored\"; loading: boolean; error: any; latest: T | undefined; }; type ResourceActions\u003cT, R = unknown\u003e = { mutate: (value: T | undefined) =\u003e T | undefined; refetch: (info?: R) =\u003e Promise\u003cT\u003e | T | undefined; }; type ResourceSource\u003cS\u003e = | S | false | null | undefined | (() =\u003e S | false | null | undefined); type ResourceFetcher\u003cS, T, R = unknown\u003e = ( source: S, info: { value: T | undefined; refetching: R | boolean } ) =\u003e T | Promise\u003cT\u003e; interface ResourceOptions\u003cT, S = unknown\u003e { initialValue?: T; name?: string; deferStream?: boolean; ssrLoadFrom?: \"initial\" | \"server\"; storage?: ( init: T | undefined ) =\u003e [Accessor\u003cT | undefined\u003e, Setter\u003cT | undefined\u003e]; onHydrated?: (k: S | undefined, info: { value: T | undefined }) =\u003e void; } ``` ## Parameters ### `source` - **Type:** `ResourceSource\u003cS\u003e` - **Default:** `undefined` Reactive data source evaluated before the fetcher runs. When the value is `undefined`, `null`, or `false`, the fetcher is not called. Otherwise the current value is passed as the first fetcher argument. Each change triggers the fetcher again. ### `fetcher` - **Type:** `ResourceFetcher\u003cS, T, R\u003e` Function that receives the source value (or `true` if no source), the current resource info, and returns a value or Promise. ### `options` - **Type:** `ResourceOptions\u003cT, S\u003e` - **Default:** `{}` Configuration options for the resource. #### `initialValue` - **Type:** `T` - **Default:** `undefined` Initial value for the resource. When provided, the resource starts in \"ready\" state and the type excludes `undefined`. #### `name` - **Type:** `string` - **Default:** `undefined` A name for debugging purposes in development mode. #### `deferStream` - **Type:** `boolean` - **Default:** `false` Controls streaming behavior during server-side rendering. #### `ssrLoadFrom` - **Type:** `\"initial\" | \"server\"` - **Default:** `\"server\"` Determines how the resource loads during SSR hydration. - \"server\": Uses the server-fetched value during hydration. - \"initial\": Re-fetches on the client after hydration. #### `storage` - **Type:** `(init: T | undefined) =\u003e [Accessor\u003cT | undefined\u003e, Setter\u003cT | undefined\u003e]` - **Default:** `createSignal` Custom storage function for the resource value, useful for persistence or custom state management. #### `onHydrated` - **Type:** `(k: S | undefined, info: { value: T | undefined }) =\u003e void` - **Default:** `undefined` Callback fired when the resource hydrates on the client side. ## Return value - **Type:** `[Resource\u003cT\u003e, ResourceActions\u003cT, R\u003e]` Returns a tuple containing the resource accessor and resource actions. ### `Resource` ```typescript type Resource\u003cT\u003e = { (): T | undefined; state: \"unresolved\" | \"pending\" | \"ready\" | \"refreshing\" | \"errored\"; loading: boolean; error: any; latest: T | undefined; }; ``` - `state`: Current state of the resource. See the table below for state descriptions. - `loading`: Indicates if the resource is currently loading. - `error`: Error information if the resource failed to load. - `latest`: The latest value of the resource. | State | Description | Loading | Error | Latest | | ------------ | --------------------------------------- | ------- | ----------- | ----------- | | `unresolved` | Initial state, not yet fetched | `false` | `undefined` | `undefined` | | `pending` | Fetching in progress | `true` | `undefined` | `undefined` | | `ready` | Successfully fetched | `false` | `undefined` | `T` | | `refreshing` | Refetching while keeping previous value | `true` | `undefined` | `T` | | `errored` | Fetching failed | `false` | `any` | `undefined` | ### `ResourceActions` ```typescript type ResourceActions\u003cT, R = unknown\u003e = { mutate: (value: T | undefined) =\u003e T | undefined; refetch: (info?: R) =\u003e Promise\u003cT\u003e | T | undefined; }; ``` - `mutate`: Function to manually overwrite the resource value without calling the fetcher. Allows you to optimistically update the resource value locally, without making a network request. - `refetch`: Function to re-run the fetcher without changing the source. If a parameter is provided to `refetch`, it will be passed to the fetcher's `refetching` property. ## Examples ### Basic usage ```typescript const [data] = createResource(async () =\u003e { const response = await fetch(\"/api/data\"); return response.json(); }); // Access data console.log(data()); // undefined initially, then fetched data console.log(data.loading); // true during fetch console.log(data.state); // \"pending\" → \"ready\" ``` ### With source ```typescript const [userId, setUserId] = createSignal(1); const [user] = createResource(userId, async (id) =\u003e { const response = await fetch(`/api/users/${id}`); return response.json(); }); // Automatically refetches when userId changes setUserId(2); ``` ### With actions ```typescript const [posts, { refetch, mutate }] = createResource(fetchPosts); // Manual refetch await refetch(); // Optimistic update mutate((posts) =\u003e [...posts, newPost]); ``` ### Error handling ```typescript const [data] = createResource(async () =\u003e { const response = await fetch('/api/data'); if (!response.ok) throw new Error('Failed to fetch'); return response.json(); }); // In JSX \u003cErrorBoundary fallback={\u003cdiv\u003eError loading data\u003c/div\u003e}\u003e \u003cdiv\u003e{data()?.title}\u003c/div\u003e \u003c/ErrorBoundary\u003e ``` ### With initial value ```typescript const [user] = createResource(() =\u003e fetchUser(), { initialValue: { name: \"Loading...\", id: 0 }, }); // user() is never undefined console.log(user().name); // \"Loading...\" initially ```", "term_freq": { "##": 5, "###": 11, "####": 6, "**": 18, "**default": 8, "**type": 10, "---": 2, "-------": 1, "-----------": 2, "------------": 1, "---------------------------------------": 1, "//": 12, "//github": 1, "/api/data": 2, "/api/users/$": 1, "\u003c/div\u003e": 1, "\u003c/errorboundary\u003e": 1, "\u003cdiv\u003e": 1, "\u003cdiv\u003eerror": 1, "\u003cerrorboundary": 1, "=\u003e": 15, "\u003e-": 2, "access": 1, "accessor": 1, "accessor\u003ct": 2, "actions": 2, "after": 1, "again": 1, "allows": 1, "and": 8, "any": 3, "api": 2, "applications": 1, "argument": 1, "as": 1, "async": 6, "asynchronous": 1, "automatically": 2, "await": 4, "basic": 1, "be": 1, "before": 1, "behavior": 1, "below": 1, "boolean": 5, "boundaries": 2, "callback": 1, "called": 1, "calling": 1, "calls": 1, "change": 1, "changes": 1, "changing": 1, "client": 2, "com/solidjs/solid-docs/blob/head/src/routes/reference/basic-reactivity/create-resource": 1, "configuration": 1, "console": 4, "const": 9, "containing": 1, "controls": 1, "create-resource": 1, "createresource": 8, "createresource\u003ct": 2, "creates": 1, "createsignal": 2, "current": 3, "currently": 1, "custom": 2, "data": 14, "data\u003c/div\u003e": 1, "debugging": 1, "deferstream": 2, "dependencies": 1, "description": 2, "descriptions": 1, "determines": 1, "development": 1, "during": 4, "each": 1, "error": 9, "error-handling": 1, "errored": 3, "errors": 1, "evaluated": 1, "examples": 1, "excludes": 1, "failed": 3, "fallback=": 1, "false": 7, "fetch": 6, "fetched": 3, "fetcher": 10, "fetching": 6, "fetchposts": 1, "fetchuser": 1, "fired": 1, "first": 1, "for": 8, "from": 1, "function": 6, "github-document": 1, "handles": 1, "handling": 3, "how": 1, "https": 1, "hydrates": 1, "hydration": 3, "id": 3, "if": 5, "import": 2, "in": 5, "indicates": 1, "info": 6, "information": 1, "init": 2, "initial": 6, "initially": 2, "initialvalue": 3, "integrates": 2, "interface": 2, "is": 6, "it": 2, "js": 1, "json": 3, "jsx": 1, "keeping": 1, "latest": 5, "load": 1, "loading": 13, "loads": 1, "locally": 1, "log": 4, "making": 1, "management": 1, "manages": 1, "manual": 1, "manually": 1, "mdx": 1, "mode": 1, "mutate": 5, "name": 5, "network": 1, "never": 1, "new": 1, "newpost": 1, "no": 1, "not": 2, "null": 3, "of": 2, "ok": 1, "on": 2, "onhydrated": 2, "operations": 1, "optimistic": 1, "optimistically": 1, "options": 4, "or": 4, "otherwise": 1, "overwrite": 1, "parameter": 1, "parameters": 1, "passed": 2, "pending": 4, "persistence": 1, "posts": 3, "previous": 1, "progress": 1, "promise": 1, "promise\u003ct\u003e": 3, "property": 1, "provided": 2, "providing": 1, "purposes": 1, "r\u003e": 7, "re-fetches": 1, "re-run": 1, "reactive": 2, "reactivity": 1, "reading": 1, "ready": 5, "receives": 1, "refetch": 7, "refetches": 1, "refetching": 3, "refreshing": 4, "related": 1, "rendering": 1, "request": 1, "resource": 17, "resource\u003ct\u003e": 4, "resourceactions": 1, "resourceactions\u003ct": 4, "resourcefetcher\u003cs": 3, "resourcefetcher\u003ctrue": 1, "resourceoptions\u003ct": 3, "resourceoptions\u003ct\u003e": 1, "resourcereturn\u003ct": 3, "resourcesource\u003cs\u003e": 3, "response": 7, "return": 4, "returns": 2, "runs": 1, "s\u003e": 2, "seamless": 1, "see": 1, "server": 5, "server-fetched": 1, "server-side": 1, "setter\u003ct": 2, "setuserid": 2, "side": 1, "simple": 1, "solid": 2, "solid-js": 1, "source": 10, "ssr": 2, "ssrloadfrom": 2, "starts": 1, "state": 10, "states": 3, "storage": 3, "streaming": 1, "string": 2, "successfully": 1, "suspense": 4, "system": 1, "table": 1, "tags": 1, "that": 2, "the": 31, "then": 1, "throw": 1, "title": 2, "to": 7, "tracking": 1, "triggers": 1, "true": 4, "tuple": 1, "type": 9, "types": 1, "typescript": 10, "undefined": 34, "undefined\u003e": 4, "unknown\u003e": 7, "unresolved": 3, "update": 2, "usage": 1, "use_cases": 1, "useful": 1, "user": 4, "userid": 3, "uses": 1, "value": 18, "version": 1, "void": 2, "when": 4, "while": 1, "will": 1, "with": 7, "without": 4, "yet": 1, "you": 1, "→": 1 }, "length": 786 }, { "id": "458ac501f364c154e5b8c3bf", "doc_id": "c226a46911b30c930f2bdb96", "title": "create-root", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/create-root.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-root.json", "content": "--- title: createRoot use_cases: \u003e- memory management, nested tracking scopes, non-auto-disposing scopes, manual cleanup control, top-level code wrapping tags: - roots - memory - scopes - disposal - tracking version: \"1.0\" description: \u003e- Create non-tracked owner scopes in SolidJS for manual memory management. Essential for nested tracking scopes and preventing auto-disposal. --- The `createRoot` function creates a new owned context, which requires explicit disposal of computations it owns. ## Import ```ts import { createRoot } from \"solid-js\"; ``` ## Type ```ts function createRoot\u003cT\u003e( fn: (dispose: () =\u003e void) =\u003e T, detachedOwner?: Owner ): T; ``` ## Parameters ### `fn` - **Type:** `(dispose: () =\u003e void) =\u003e T` - **Required:** Yes The function executes within a newly created owned context. The computations created within this function are managed by the root and will only be disposed of when the provided `dispose` function is called. If a function is passed without a `dispose` parameter, an unowned root is created. In this case, the computations are not managed for disposal, which may lead to memory leaks. This function itself does not track dependencies and only runs once. ### `detachedOwner` - **Type:** `Owner` - **Required:** No An optional owner that establishes the root's position in the ownership hierarchy. When provided, the root becomes owned by this owner and inherits its contextual state (such as [contexts](/concepts/context)). ## Return Value `createRoot` returns the value returned by the `fn` function. ## Examples ### Basic Usage ```ts import { createSignal, createEffect, createRoot } from \"solid-js\"; function createCounter(initial = 0) { const [count, setCount] = createSignal(initial); createEffect(() =\u003e { console.log(`Count changed, new value: ${count()}`); }); function increment() { setCount((c) =\u003e c + 1); } function reset() { setCount(initial); } return { count, increment, reset }; } test(\"createCounter works correctly\", () =\u003e { createRoot((dispose) =\u003e { const { count, increment, reset } = createCounter(10); expect(count()).toBe(10); increment(); expect(count()).toBe(11); reset(); expect(count()).toBe(10); dispose(); }); }); ``` ### Returning Values ```ts import { createRoot, createSignal, onCleanup } from \"solid-js\"; const counter = createRoot((dispose) =\u003e { const [count, setCount] = createSignal(0); onCleanup(() =\u003e { console.log(\"Dispose was called!\"); }); return { value: count, increment: () =\u003e setCount((c) =\u003e c + 1), dispose, }; }); console.log(counter.value()); // 0 counter.increment(); console.log(counter.value()); // 1 counter.dispose(); // Logs \"Dispose was called!\" ``` ## Related - [`render`](/reference/rendering/render)", "term_freq": { "##": 6, "###": 4, "**": 4, "**required": 2, "**type": 2, "---": 2, "//": 3, "//github": 1, "/concepts/context": 1, "/reference/rendering/render": 1, "10": 3, "11": 1, "=\u003e": 12, "\u003e-": 2, "an": 2, "and": 4, "are": 2, "as": 1, "auto-disposal": 1, "basic": 1, "be": 1, "becomes": 1, "by": 3, "called": 3, "case": 1, "changed": 1, "cleanup": 1, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/create-root": 1, "computations": 3, "console": 4, "const": 4, "context": 2, "contexts": 1, "contextual": 1, "control": 1, "correctly": 1, "count": 10, "counter": 5, "create": 1, "create-root": 1, "createcounter": 3, "created": 3, "createeffect": 2, "createroot": 8, "createroot\u003ct\u003e": 1, "creates": 1, "createsignal": 4, "dependencies": 1, "description": 1, "detachedowner": 2, "disposal": 3, "dispose": 11, "disposed": 1, "does": 1, "essential": 1, "establishes": 1, "examples": 1, "executes": 1, "expect": 3, "explicit": 1, "fn": 3, "for": 3, "from": 3, "function": 11, "github-document": 1, "hierarchy": 1, "https": 1, "if": 1, "import": 4, "in": 3, "increment": 6, "inherits": 1, "initial": 3, "is": 3, "it": 1, "its": 1, "itself": 1, "lead": 1, "leaks": 1, "log": 4, "logs": 1, "managed": 2, "management": 2, "manual": 2, "may": 1, "mdx": 1, "memory": 4, "nested": 2, "new": 2, "newly": 1, "no": 1, "non-auto-disposing": 1, "non-tracked": 1, "not": 2, "of": 2, "once": 1, "oncleanup": 2, "only": 2, "optional": 1, "owned": 3, "owner": 5, "ownership": 1, "owns": 1, "parameter": 1, "parameters": 1, "passed": 1, "position": 1, "preventing": 1, "provided": 2, "related": 1, "render": 1, "requires": 1, "reset": 4, "return": 3, "returned": 1, "returning": 1, "returns": 1, "root": 4, "roots": 1, "runs": 1, "scopes": 5, "setcount": 5, "solid-js": 3, "solidjs": 1, "state": 1, "such": 1, "tags": 1, "test": 1, "that": 1, "the": 11, "this": 4, "title": 1, "to": 1, "tobe": 3, "top-level": 1, "track": 1, "tracking": 3, "ts": 4, "type": 1, "unowned": 1, "usage": 1, "use_cases": 1, "value": 6, "values": 1, "version": 1, "void": 2, "was": 2, "when": 2, "which": 2, "will": 1, "within": 2, "without": 1, "works": 1, "wrapping": 1, "yes": 1 }, "length": 347 }, { "id": "2c99018ccd851a1e1f641a42", "doc_id": "7b0801b2ec325d4fc442e840", "title": "create-selector", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/secondary-primitives/create-selector.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-selector.json", "content": "--- title: createSelector use_cases: \u003e- selection states, active items, dropdown menus, tab navigation, list highlighting, performance optimization tags: - reactivity - performance - selection - ui-state - optimization version: '1.0' description: \u003e- Optimize selection state with createSelector. Reduce DOM updates from n to 2 when tracking active items in lists, tabs, or dropdowns. --- ```ts import { createSelector } from \"solid-js\" function createSelector\u003cT, U\u003e( source: () =\u003e T, fn?: (a: U, b: T) =\u003e boolean ): (key: U) =\u003e boolean ``` Creates a parameterized derived boolean signal `selector(key)` that indicates whether `key` is equal to the current value of the `source` signal. These signals are optimized to notify each subscriber only when their `key` starts or stops matching the reactive `source` value (instead of every time `key` changes). If you have *n* different subscribers with different keys, and the `source` value changes from `a` to `b`, then instead of all *n* subscribers updating, at most two subscribers will update: the signal with key `a` will change to `false`, and the signal with key `b` will change to `true`. Thus it reduces from *n* updates to 2 updates. Useful for defining the selection state of several selectable elements. For example: ```tsx const [selectedId, setSelectedId] = createSignal() const isSelected = createSelector(selectedId) \u003cFor each={list()}\u003e {(item) =\u003e \u003cli classList={{ active: isSelected(item.id) }}\u003e{item.name}\u003c/li\u003e} \u003c/For\u003e ``` In the code above, each `li` element receives an `active` class exactly when the corresponding `item.id` is equal to `selectedId()`. When the `selectedId` signal changes, the `li` element(s) that previously had previously matching `id` get the `active` class removed, and the `li` element(s) that now have a matching `id` get the `active` class added. All other `li` elements get skipped, so if `id`s are distinct, only 2 DOM operations get performed. By contrast, the following code would perform `list().length` DOM operations every time the `selectedId` signal changes: ```tsx const [selectedId, setSelectedId] = createSignal() \u003cFor each={list()}\u003e {(item) =\u003e \u003cli classList={{ active: selectedId() === item.id }}\u003e{item.name}\u003c/li\u003e} \u003c/For\u003e ``` ## Arguments | Name | Type | Description | | :------- | :------------------------ | :------------------------------------------- | | `source` | `() =\u003e T` | The source signal to get the value from and compare with keys. | | `fn` | `(a: U, b: T) =\u003e boolean` | A function to compare the key and the value, returning whether they should be treated as equal. Default: `===` |", "term_freq": { "##": 1, "*n*": 3, "---": 2, "-------": 1, "------------------------": 1, "-------------------------------------------": 1, "//github": 1, "\u003c/for\u003e": 2, "\u003c/li\u003e": 2, "\u003cfor": 2, "\u003cli": 2, "===": 2, "=\u003e": 7, "\u003e-": 2, "above": 1, "active": 7, "added": 1, "all": 2, "an": 1, "and": 5, "are": 2, "arguments": 1, "as": 1, "at": 1, "be": 1, "boolean": 4, "by": 1, "change": 2, "changes": 4, "class": 3, "classlist=": 2, "code": 2, "com/solidjs/solid-docs/blob/head/src/routes/reference/secondary-primitives/create-selector": 1, "compare": 2, "const": 3, "contrast": 1, "corresponding": 1, "create-selector": 1, "creates": 1, "createselector": 4, "createselector\u003ct": 1, "createsignal": 2, "current": 1, "default": 1, "defining": 1, "derived": 1, "description": 2, "different": 2, "distinct": 1, "dom": 3, "dropdown": 1, "dropdowns": 1, "each": 2, "each=": 2, "element": 3, "elements": 2, "equal": 3, "every": 2, "exactly": 1, "example": 1, "false": 1, "fn": 2, "following": 1, "for": 2, "from": 5, "function": 2, "get": 5, "github-document": 1, "had": 1, "have": 2, "highlighting": 1, "https": 1, "id": 6, "if": 2, "import": 1, "in": 2, "indicates": 1, "instead": 2, "is": 2, "isselected": 2, "it": 1, "item": 7, "items": 2, "key": 8, "keys": 2, "length": 1, "li": 4, "list": 4, "lists": 1, "matching": 3, "mdx": 1, "menus": 1, "most": 1, "name": 3, "navigation": 1, "notify": 1, "now": 1, "of": 4, "only": 2, "operations": 2, "optimization": 2, "optimize": 1, "optimized": 1, "or": 2, "other": 1, "parameterized": 1, "perform": 1, "performance": 2, "performed": 1, "previously": 2, "reactive": 1, "reactivity": 1, "receives": 1, "reduce": 1, "reduces": 1, "removed": 1, "returning": 1, "selectable": 1, "selectedid": 7, "selection": 4, "selector": 1, "setselectedid": 2, "several": 1, "should": 1, "signal": 7, "signals": 1, "skipped": 1, "so": 1, "solid-js": 1, "source": 6, "starts": 1, "state": 2, "states": 1, "stops": 1, "subscriber": 1, "subscribers": 3, "tab": 1, "tabs": 1, "tags": 1, "that": 3, "the": 20, "their": 1, "then": 1, "these": 1, "they": 1, "thus": 1, "time": 2, "title": 1, "to": 10, "tracking": 1, "treated": 1, "true": 1, "ts": 1, "tsx": 2, "two": 1, "type": 1, "u\u003e": 1, "ui-state": 1, "update": 1, "updates": 3, "updating": 1, "use_cases": 1, "useful": 1, "value": 5, "version": 1, "when": 4, "whether": 2, "will": 3, "with": 5, "would": 1, "you": 1 }, "length": 356 }, { "id": "e868ff71c1066de0bf010e7c", "doc_id": "67d57c604076facd38ff7556", "title": "create-signal", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/basic-reactivity/create-signal.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-signal.json", "content": "--- title: createSignal use_cases: \u003e- state management, reactive values, component state, form inputs, counters, toggles, any reactive data tags: - signals - state - reactivity - core - primitives version: \"1.0\" description: \u003e- Create reactive state with createSignal, Solid's fundamental primitive. Track values that change over time and automatically update your UI when they do. --- Creates a reactive state primitive consisting of a getter (accessor) and a setter function that forms the foundation of Solid's reactivity system. Signals use a pull-based reactivity model where tracking subscriptions (reads) is lightweight, while updates (writes) trigger dependency tracking and effect re-execution, making them optimized for frequent reads and infrequent writes. ## Import ```typescript import { createSignal } from \"solid-js\"; ``` ## Type signature ```typescript function createSignal\u003cT\u003e(): Signal\u003cT | undefined\u003e; function createSignal\u003cT\u003e(value: T, options?: SignalOptions\u003cT\u003e): Signal\u003cT\u003e; type Signal\u003cT\u003e = [get: Accessor\u003cT\u003e, set: Setter\u003cT\u003e]; type Accessor\u003cT\u003e = () =\u003e T; type Setter\u003cT\u003e = { \u003cU extends T\u003e(value: Exclude\u003cU, Function\u003e | ((prev: T) =\u003e U)): U; \u003cU extends T\u003e(value: (prev: T) =\u003e U): U; \u003cU extends T\u003e(value: Exclude\u003cU, Function\u003e): U; \u003cU extends T\u003e(value: Exclude\u003cU, Function\u003e | ((prev: T) =\u003e U)): U; }; interface SignalOptions\u003cT\u003e { name?: string; equals?: false | ((prev: T, next: T) =\u003e boolean); internal?: boolean; } ``` ## Parameters ### `value` - **Type:** `T` - **Default:** `undefined` The initial value for the signal. If no initial value is provided, the signal's type is automatically extended with `undefined`. ### `options` - **Type:** `SignalOptions\u003cT\u003e` - **Default:** `undefined` Configuration object for the signal. #### `name` - **Type:** `string` - **Default:** `undefined` A name for the signal used by debugging tools like [Solid devtools](https://github.com/thetarnav/solid-devtools). It works only in development mode and is removed from the production bundle. #### `equals` - **Type:** `false | ((prev: T, next: T) =\u003e boolean)` - **Default:** `false` A custom comparison function to determine when the signal should update. By default, signals use reference equality (`===`) to compare previous and next values. When set to `false`, the signal will always update regardless of value equality, which is useful for creating signals that trigger manual updates in the reactive system. When providing a custom function, it should be pure and return `true` if the values are equal (no update needed) or `false` if they differ (trigger update). Impure functions can create unexpected side effects and performance issues. #### `internal` - **Type:** `boolean` - **Default:** `false` Marks the signal as internal, preventing it from appearing in development tools. This is primarily used by Solid's internal systems. ## Return value - **Type:** `Signal\u003cT\u003e` Returns a tuple `[getter, setter]` where: - **getter**: An accessor function that returns the current value and tracks dependencies when called within a reactive context - **setter**: A function that updates the signal's value and notifies all dependent computations ## Examples ### Basic usage ```tsx import { createSignal } from \"solid-js\"; function Counter() { const [count, setCount] = createSignal(0); return ( \u003cdiv\u003e \u003cbutton onClick={() =\u003e setCount(count() + 1)}\u003e+\u003c/button\u003e \u003cspan\u003e{count()}\u003c/span\u003e \u003c/div\u003e ); } ```", "term_freq": { "##": 5, "###": 3, "####": 3, "**": 11, "**default": 5, "**getter**": 1, "**setter**": 1, "**type": 6, "---": 2, "//github": 2, "\u003c/div\u003e": 1, "\u003c/span\u003e": 1, "\u003cbutton": 1, "\u003cdiv\u003e": 1, "\u003cspan\u003e": 1, "\u003cu": 4, "===": 1, "=\u003e": 7, "\u003e+\u003c/button\u003e": 1, "\u003e-": 2, "accessor": 2, "accessor\u003ct\u003e": 2, "all": 1, "always": 1, "an": 1, "and": 10, "any": 1, "appearing": 1, "are": 1, "as": 1, "automatically": 2, "basic": 1, "be": 1, "boolean": 4, "bundle": 1, "by": 3, "called": 1, "can": 1, "change": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/basic-reactivity/create-signal": 1, "com/thetarnav/solid-devtools": 1, "compare": 1, "comparison": 1, "component": 1, "computations": 1, "configuration": 1, "consisting": 1, "const": 1, "context": 1, "core": 1, "count": 3, "counter": 1, "counters": 1, "create": 2, "create-signal": 1, "creates": 1, "createsignal": 5, "createsignal\u003ct\u003e": 2, "creating": 1, "current": 1, "custom": 2, "data": 1, "debugging": 1, "default": 1, "dependencies": 1, "dependency": 1, "dependent": 1, "description": 1, "determine": 1, "development": 2, "devtools": 1, "differ": 1, "do": 1, "effect": 1, "effects": 1, "equal": 1, "equality": 2, "equals": 2, "examples": 1, "exclude\u003cu": 3, "extended": 1, "extends": 4, "false": 6, "for": 5, "form": 1, "forms": 1, "foundation": 1, "frequent": 1, "from": 4, "function": 8, "function\u003e": 3, "functions": 1, "fundamental": 1, "get": 1, "getter": 2, "github-document": 1, "https": 2, "if": 3, "import": 3, "impure": 1, "in": 3, "infrequent": 1, "initial": 2, "inputs": 1, "interface": 1, "internal": 4, "is": 6, "issues": 1, "it": 3, "lightweight": 1, "like": 1, "making": 1, "management": 1, "manual": 1, "marks": 1, "mdx": 1, "mode": 1, "model": 1, "name": 3, "needed": 1, "next": 3, "no": 2, "notifies": 1, "object": 1, "of": 3, "onclick=": 1, "only": 1, "optimized": 1, "options": 2, "or": 1, "over": 1, "parameters": 1, "performance": 1, "prev": 5, "preventing": 1, "previous": 1, "primarily": 1, "primitive": 2, "primitives": 1, "production": 1, "provided": 1, "providing": 1, "pull-based": 1, "pure": 1, "re-execution": 1, "reactive": 6, "reactivity": 3, "reads": 2, "reference": 1, "regardless": 1, "removed": 1, "return": 3, "returns": 2, "set": 2, "setcount": 2, "setter": 2, "setter\u003ct\u003e": 2, "should": 2, "side": 1, "signal": 8, "signal\u003ct": 1, "signal\u003ct\u003e": 3, "signaloptions\u003ct\u003e": 3, "signals": 4, "signature": 1, "solid": 4, "solid-js": 2, "state": 5, "string": 2, "subscriptions": 1, "system": 2, "systems": 1, "t\u003e": 4, "tags": 1, "that": 5, "the": 14, "them": 1, "they": 2, "this": 1, "time": 1, "title": 1, "to": 3, "toggles": 1, "tools": 2, "track": 1, "tracking": 2, "tracks": 1, "trigger": 3, "true": 1, "tsx": 1, "tuple": 1, "type": 5, "typescript": 2, "ui": 1, "undefined": 4, "undefined\u003e": 1, "unexpected": 1, "update": 5, "updates": 3, "usage": 1, "use": 2, "use_cases": 1, "used": 2, "useful": 1, "value": 12, "values": 4, "version": 1, "when": 5, "where": 2, "which": 1, "while": 1, "will": 1, "with": 2, "within": 1, "works": 1, "writes": 2, "your": 1 }, "length": 447 }, { "id": "d8c9dd952f645bd4c975d00c", "doc_id": "905c9844113db2c200d4f3c2", "title": "create-store", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/store-utilities/create-store.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-store.json", "content": "--- title: createStore use_cases: \u003e- complex state management, nested data, arrays and objects, derived values, application state tags: - store - state - data-structures - objects - arrays version: '1.0' description: \u003e- Manage complex application state with createStore. Handle nested objects, arrays, and derived values with fine-grained reactivity. --- Stores were intentionally designed to manage data structures like objects and arrays but are capable of handling other data types, such as strings and numbers. ## Types Signature ```tsx import { createStore } from \"solid-js/store\" import type { StoreNode, Store, SetStoreFunction } from \"solid-js/store\" function createStore\u003cT extends StoreNode\u003e( state: T | Store\u003cT\u003e ): [get: Store\u003cT\u003e, set: SetStoreFunction\u003cT\u003e]; type Store\u003cT\u003e = T; // conceptually readonly, but not typed as such ``` ## Usage ```tsx import { createStore } from \"solid-js/store\"; // Initialize store const [store, setStore] = createStore({ userCount: 3, users: [ { id: 0, username: \"felix909\", location: \"England\", loggedIn: false, }, { id: 1, username: \"tracy634\", location: \"Canada\", loggedIn: true, }, { id: 1, username: \"johny123\", location: \"India\", loggedIn: true, }, ], }); ``` ## Getter Store objects support the use of getters to store derived values. ```tsx const [state, setState] = createStore({ user: { firstName: \"John\", lastName: \"Smith\", get fullName() { return `${this.firstName} ${this.lastName}`; }, }, }); ``` ## Setter Changes can take the form of function that passes previous state and returns new state or a value. Objects are always shallowly merged. Set values to undefined to delete them from the Store. In TypeScript, you can delete a value by using a non-null assertion, like `undefined!`. ```tsx const [state, setState] = createStore({ firstName: \"John\", lastName: \"Miller\", }); setState({ firstName: \"Johnny\", middleName: \"Lee\" }); // ({ firstName: 'Johnny', middleName: 'Lee', lastName: 'Miller' }) setState((state) =\u003e ({ preferredName: state.firstName, lastName: \"Milner\" })); // ({ firstName: 'Johnny', preferredName: 'Johnny', middleName: 'Lee', lastName: 'Milner' }) ``` --- To learn more about using stores check the [Stores Guide](/concepts/stores), and the **Store utilities** section for more advanced APIs.", "term_freq": { "##": 4, "**store": 1, "---": 3, "//": 4, "//github": 1, "/concepts/stores": 1, "=\u003e": 1, "\u003e-": 2, "about": 1, "advanced": 1, "always": 1, "and": 6, "apis": 1, "application": 2, "are": 2, "arrays": 4, "as": 2, "assertion": 1, "but": 2, "by": 1, "can": 2, "canada": 1, "capable": 1, "changes": 1, "check": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/store-utilities/create-store": 1, "complex": 2, "conceptually": 1, "const": 3, "create-store": 1, "createstore": 7, "createstore\u003ct": 1, "data": 3, "data-structures": 1, "delete": 2, "derived": 3, "description": 1, "designed": 1, "england": 1, "extends": 1, "false": 1, "felix909": 1, "fine-grained": 1, "firstname": 7, "for": 1, "form": 1, "from": 4, "fullname": 1, "function": 2, "get": 2, "getter": 1, "getters": 1, "github-document": 1, "guide": 1, "handle": 1, "handling": 1, "https": 1, "id": 3, "import": 3, "in": 1, "india": 1, "initialize": 1, "intentionally": 1, "john": 2, "johnny": 4, "johny123": 1, "lastname": 6, "learn": 1, "lee": 3, "like": 2, "location": 3, "loggedin": 3, "manage": 2, "management": 1, "mdx": 1, "merged": 1, "middlename": 3, "miller": 2, "milner": 2, "more": 2, "nested": 2, "new": 1, "non-null": 1, "not": 1, "numbers": 1, "objects": 6, "of": 3, "or": 1, "other": 1, "passes": 1, "preferredname": 2, "previous": 1, "reactivity": 1, "readonly": 1, "return": 1, "returns": 1, "section": 1, "set": 2, "setstate": 4, "setstore": 1, "setstorefunction": 1, "setstorefunction\u003ct\u003e": 1, "setter": 1, "shallowly": 1, "signature": 1, "smith": 1, "solid-js/store": 3, "state": 11, "store": 7, "store\u003ct\u003e": 3, "storenode": 1, "storenode\u003e": 1, "stores": 3, "strings": 1, "structures": 1, "such": 2, "support": 1, "tags": 1, "take": 1, "that": 1, "the": 5, "them": 1, "this": 2, "title": 1, "to": 5, "tracy634": 1, "true": 2, "tsx": 4, "type": 2, "typed": 1, "types": 2, "typescript": 1, "undefined": 2, "usage": 1, "use": 1, "use_cases": 1, "user": 1, "usercount": 1, "username": 3, "users": 1, "using": 2, "utilities**": 1, "value": 2, "values": 4, "version": 1, "were": 1, "with": 2, "you": 1 }, "length": 281 }, { "id": "c8d18d191922150d4ca12d3b", "doc_id": "fe5dfbdda773b21593962fff", "title": "create-unique-id", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/component-apis/create-unique-id.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/create-unique-id.json", "content": "--- title: createUniqueId use_cases: \u003e- form elements, accessibility, aria labels, ssr compatibility, html id generation, unique identifiers tags: - ids - accessibility - ssr - forms - utilities version: \"1.0\" description: \u003e- Generate unique IDs that are stable across server and client with createUniqueId. Essential for accessible forms and SSR-compatible components. --- The `createUniqueId` function generates a unique ID that remains consistent across both server and client renders. It is commonly used with HTML `id` and `for` attributes to ensure stable hydration. `createUniqueId` does *not* generate a cryptographically secure ID and is not suitable for security-sensitive data. Additionally, it should not be used in scenarios that require uniqueness across a distributed system. :::note `createUniqueId` relies on a counter-based mechanism to generate IDs. It must be called the same number of times on both the server and client. Calling `createUniqueId` only on the server or only on the client, such as when using [`isServer`](/reference/rendering/is-server) or [`\u003cNoHydration\u003e`](/reference/components/no-hydration), may lead to hydration errors. ::: ## Import ```ts import { createUniqueId } from \"solid-js\"; ``` ## Type ```ts function createUniqueId(): string; ``` ## Parameters This function does not take any parameters. ## Returns `createUniqueId` returns a unique `string` that is stable across server and client renders. ## Examples ### Basic Usage ```tsx import { createUniqueId } from \"solid-js\"; type InputProps = { id?: string; }; function Input(props: InputProps) { return \u003cinput id={props.id ?? createUniqueId()} /\u003e; } ```", "term_freq": { "##": 5, "###": 1, "*not*": 1, "---": 2, "//github": 1, "/\u003e": 1, "/reference/components/no-hydration": 1, "/reference/rendering/is-server": 1, "\u003cinput": 1, "\u003cnohydration\u003e": 1, "\u003e-": 2, "accessibility": 2, "accessible": 1, "across": 4, "additionally": 1, "and": 7, "any": 1, "are": 1, "aria": 1, "as": 1, "attributes": 1, "basic": 1, "be": 2, "both": 2, "called": 1, "calling": 1, "client": 5, "com/solidjs/solid-docs/blob/head/src/routes/reference/component-apis/create-unique-id": 1, "commonly": 1, "compatibility": 1, "components": 1, "consistent": 1, "counter-based": 1, "create-unique-id": 1, "createuniqueid": 11, "cryptographically": 1, "data": 1, "description": 1, "distributed": 1, "does": 2, "elements": 1, "ensure": 1, "errors": 1, "essential": 1, "examples": 1, "for": 3, "form": 1, "forms": 2, "from": 2, "function": 4, "generate": 3, "generates": 1, "generation": 1, "github-document": 1, "html": 2, "https": 1, "hydration": 2, "id": 6, "id=": 1, "identifiers": 1, "ids": 3, "import": 3, "in": 1, "input": 1, "inputprops": 2, "is": 3, "isserver": 1, "it": 3, "labels": 1, "lead": 1, "may": 1, "mdx": 1, "mechanism": 1, "must": 1, "not": 3, "note": 1, "number": 1, "of": 1, "on": 4, "only": 2, "or": 2, "parameters": 2, "props": 2, "relies": 1, "remains": 1, "renders": 2, "require": 1, "return": 1, "returns": 2, "same": 1, "scenarios": 1, "secure": 1, "security-sensitive": 1, "server": 5, "should": 1, "solid-js": 2, "ssr": 2, "ssr-compatible": 1, "stable": 3, "string": 3, "such": 1, "suitable": 1, "system": 1, "tags": 1, "take": 1, "that": 4, "the": 5, "this": 1, "times": 1, "title": 1, "to": 3, "ts": 2, "tsx": 1, "type": 2, "unique": 4, "uniqueness": 1, "usage": 1, "use_cases": 1, "used": 2, "using": 1, "utilities": 1, "version": 1, "when": 1, "with": 2 }, "length": 219 }, { "id": "fd5894aa61f3fa9c0f6bd1ce", "doc_id": "b6ebaeb935e7ce1b60bce9a3", "title": "css-and-styling", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/building-your-application/css-and-styling.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/css-and-styling.json", "content": "--- title: CSS and styling use_cases: \u003e- styling components, css modules, scoped styles, component styling, design system setup, visual customization tags: - css - styling - modules - components - design - vite version: '1.0' description: \u003e- Style your SolidStart components with CSS, CSS modules, and other styling solutions. Implement scoped styles and design systems. --- SolidStart is a standards-based framework that, instead of modifying the behavior of the [`\u003cstyle\u003e` tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style), strives to build on top of it. ## Styling components Vite provides a simple way to [manage CSS for complex web applications](https://vitejs.dev/guide/features.html#css). It does this by allowing users to import CSS using ESM syntax anywhere within the component tree. For example, you can write CSS in a file accompanying your component file: ``` src/ ├── components/ │ ├── Card.tsx │ ├── Card.css ``` To use the CSS in the component, you can define the CSS in the `Card.css` file and import it in the `Card.tsx` file: ```css title=\"Card.css\" .card { background-color: #446b9e; } h1 { font-size: 1.5em; font-weight: bold; } p { font-size: 1em; font-weight: normal; } ``` ```tsx title=\"Card.tsx\" import \"./Card.css\"; const Card = (props) =\u003e { return ( \u003cdiv class=\"card\"\u003e \u003ch1\u003e{props.title}\u003c/h1\u003e \u003cp\u003e{props.text}\u003c/p\u003e \u003c/div\u003e ); }; ``` ### CSS modules for scoped styles SolidStart also supports [vite's CSS modules](https://vitejs.dev/guide/features.html#css-modules). Through [CSS modules](https://github.com/css-modules/css-modules), you can scope certain CSS to a component and use the CSS class in multiple components to style them differently. For this feature to work, the `.css` file must be named with the `.module.css` extension. This convention also works for `.scss` and `.sass` files, which can be named with the `.module.scss` and `.module.sass` extensions, respectively. ```css title=\"Card.module.css\" .card { background-color: #446b9e; } div.card \u003e h1 { font-size: 1.5em; font-weight: bold; } div.card \u003e p { font-size: 1em; font-weight: normal; } ``` When first using CSS modules, you will encounter an error when trying to use the class attribute in your components. This is because, behind the scenes, classes defined in CSS modules are renamed to a series of random letters. When classes are hard coded using the class attribute (`class=\"card\"`), Solid is not aware that it should rename `card` to something different. To fix this, you can import classes used in your CSS module. The import object can be thought of as `humanClass: generatedClass` and within the component, the key (ie. the class on the element) is used to get the unique, generated class name. ```jsx import styles from \"./Card.module.css\"; const Card = (props) =\u003e { return ( \u003cdiv class={styles.card}\u003e \u003ch1\u003e{props.title}\u003c/h1\u003e \u003cp\u003e{props.text}\u003c/p\u003e \u003c/div\u003e ); }; ``` ## Other ways to style components SolidStart is built on top of Solid, meaning styling is not limited to CSS. To see other ways to style components, see the [styling section in the Solid documentation](/guides/styling-your-components).", "term_freq": { "##": 2, "###": 1, "#446b9e": 2, "---": 2, "//developer": 1, "//github": 2, "//vitejs": 2, "/card": 2, "/guides/styling-your-components": 1, "1em": 2, "5em": 2, "\u003c/div\u003e": 2, "\u003c/h1\u003e": 2, "\u003c/p\u003e": 2, "\u003cdiv": 2, "\u003ch1\u003e": 2, "\u003cp\u003e": 2, "\u003cstyle\u003e": 1, "=\u003e": 2, "\u003e-": 2, "accompanying": 1, "allowing": 1, "also": 2, "an": 1, "and": 8, "anywhere": 1, "applications": 1, "are": 2, "as": 1, "attribute": 2, "aware": 1, "background-color": 2, "be": 3, "because": 1, "behavior": 1, "behind": 1, "bold": 2, "build": 1, "built": 1, "by": 1, "can": 6, "card": 17, "certain": 1, "class": 5, "class=": 3, "classes": 3, "coded": 1, "com/css-modules/css-modules": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/building-your-application/css-and-styling": 1, "complex": 1, "component": 6, "components": 8, "components/": 1, "const": 2, "convention": 1, "css": 29, "css-and-styling": 1, "customization": 1, "define": 1, "defined": 1, "description": 1, "design": 3, "dev/guide/features": 2, "different": 1, "differently": 1, "div": 2, "documentation": 1, "does": 1, "element": 1, "encounter": 1, "error": 1, "esm": 1, "example": 1, "extension": 1, "extensions": 1, "feature": 1, "file": 5, "files": 1, "first": 1, "fix": 1, "font-size": 4, "font-weight": 4, "for": 5, "framework": 1, "from": 1, "generated": 1, "generatedclass": 1, "get": 1, "github-document": 1, "h1": 2, "hard": 1, "html#css": 1, "html#css-modules": 1, "https": 5, "humanclass": 1, "ie": 1, "implement": 1, "import": 6, "in": 9, "instead": 1, "is": 6, "it": 4, "jsx": 1, "key": 1, "letters": 1, "limited": 1, "manage": 1, "mdx": 1, "meaning": 1, "modifying": 1, "module": 6, "modules": 8, "mozilla": 1, "multiple": 1, "must": 1, "name": 1, "named": 2, "normal": 2, "not": 2, "object": 1, "of": 6, "on": 3, "org/en-us/docs/web/html/element/style": 1, "other": 3, "props": 6, "provides": 1, "random": 1, "rename": 1, "renamed": 1, "respectively": 1, "return": 2, "sass": 2, "scenes": 1, "scope": 1, "scoped": 3, "scss": 2, "section": 1, "see": 2, "series": 1, "setup": 1, "should": 1, "simple": 1, "solid": 3, "solidstart": 4, "solutions": 1, "something": 1, "src/": 1, "standards-based": 1, "strives": 1, "style": 4, "styles": 5, "styling": 8, "supports": 1, "syntax": 1, "system": 1, "systems": 1, "tags": 2, "text": 2, "that": 2, "the": 23, "them": 1, "this": 5, "thought": 1, "through": 1, "title": 3, "title=": 3, "to": 16, "top": 2, "tree": 1, "trying": 1, "tsx": 4, "unique": 1, "use": 3, "use_cases": 1, "used": 2, "users": 1, "using": 3, "version": 1, "visual": 1, "vite": 3, "way": 1, "ways": 2, "web": 1, "when": 3, "which": 1, "will": 1, "with": 3, "within": 2, "work": 1, "works": 1, "write": 1, "you": 5, "your": 4, "│": 2, "├──": 3 }, "length": 468 }, { "id": "948fd6a12c36f73190a3fb6d", "doc_id": "7eeea146d9f353fd4e7381b4", "title": "css-modules", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/css-modules.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/css-modules.json", "content": "--- title: CSS modules order: 3 mainNavExclude: true use_cases: \u003e- component styling, scoped styles, style encapsulation, preventing css conflicts, modular css tags: - styling - css - modules - scoped - components - encapsulation version: '1.0' description: \u003e- Use CSS Modules in Solid for locally scoped styles, preventing global conflicts and ensuring component style encapsulation. --- CSS Modules are CSS files where class names, animations, and media queries are scoped locally by default. These provide a way to encapsulate styles within components, preventing global conflicts and optimizing the final output by bundling only the used selectors. ## Creating CSS module files Begin by creating a CSS module file. Conventionally, these files have a `.module.css` extension, like `style.module.css`. However, you can also use other extensions, such as `.scss` and `.sass`. ```css /* styles.module.css */ .foo { color: red; } .bar { background-color: blue; } ``` **Note:** Avoid the use of HTML tags in CSS modules. Since they are not considered pure selectors, it can lead to specificity issues which can make it more difficult to override with other styles and lead to unexpected behaviors. ## Using modules in components 1. **Importing styles:** In your component file (eg. `Component.jsx`), import the styles from the CSS module. ```jsx // component.jsx import styles from \"styles.module.css\"; ``` 2. **Applying styles:** Use the imported styles by referencing them as properties of the styles object in your JSX: ```jsx function Component() { return ( \u003c\u003e \u003cdiv class={`${styles.foo} ${styles.bar}`}\u003eHello, world!\u003c/div\u003e \u003c/\u003e ); } ``` 3. **Using a single style:** If you only need one style from the module, import and apply it directly: ```jsx // component.jsx import styles from \"styles.module.css\"; function Component() { return ( \u003c\u003e \u003cdiv class={styles.foo}\u003eHello, world!\u003c/div\u003e \u003c/\u003e ); } ``` 4. **Mixing with regular class names:** You can combine CSS module syntax with regular string class names, as well: ```jsx // component.jsx import styles from \"styles.module.css\"; function Component() { return ( \u003c\u003e \u003cdiv class={`${styles.foo} container`}\u003eHello, world!\u003c/div\u003e \u003c/\u003e ); } ``` **Note:** If your styles have dashes in their names, use bracket notation: ```jsx const className = styles[\"foo-with-dash\"]; ```", "term_freq": { "##": 2, "**": 6, "**applying": 1, "**importing": 1, "**mixing": 1, "**note": 2, "**using": 1, "*/": 1, "---": 2, "/*": 1, "//": 3, "//github": 1, "\u003c/\u003e": 3, "\u003c/div\u003e": 3, "\u003c\u003e": 3, "\u003cdiv": 3, "\u003e-": 2, "\u003ehello": 3, "also": 1, "and": 6, "animations": 1, "apply": 1, "are": 3, "as": 3, "avoid": 1, "background-color": 1, "bar": 2, "begin": 1, "behaviors": 1, "blue": 1, "bracket": 1, "bundling": 1, "by": 4, "can": 4, "class": 3, "class=": 3, "classname": 1, "color": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/styling-components/css-modules": 1, "combine": 1, "component": 10, "components": 3, "conflicts": 3, "considered": 1, "const": 1, "container": 1, "conventionally": 1, "creating": 2, "css": 19, "css-modules": 1, "dashes": 1, "default": 1, "description": 1, "difficult": 1, "directly": 1, "eg": 1, "encapsulate": 1, "encapsulation": 3, "ensuring": 1, "extension": 1, "extensions": 1, "file": 2, "files": 3, "final": 1, "foo": 4, "foo-with-dash": 1, "for": 1, "from": 5, "function": 3, "github-document": 1, "global": 2, "have": 2, "however": 1, "html": 1, "https": 1, "if": 2, "import": 5, "imported": 1, "in": 6, "issues": 1, "it": 3, "jsx": 10, "lead": 2, "like": 1, "locally": 2, "mainnavexclude": 1, "make": 1, "mdx": 1, "media": 1, "modular": 1, "module": 11, "modules": 6, "more": 1, "names": 4, "need": 1, "not": 1, "notation": 1, "object": 1, "of": 2, "one": 1, "only": 2, "optimizing": 1, "order": 1, "other": 2, "output": 1, "override": 1, "preventing": 3, "properties": 1, "provide": 1, "pure": 1, "queries": 1, "red": 1, "referencing": 1, "regular": 2, "return": 3, "sass": 1, "scoped": 4, "scss": 1, "selectors": 2, "since": 1, "single": 1, "solid": 1, "specificity": 1, "string": 1, "style": 5, "styles": 22, "styling": 2, "such": 1, "syntax": 1, "tags": 2, "the": 8, "their": 1, "them": 1, "these": 2, "they": 1, "title": 1, "to": 4, "true": 1, "unexpected": 1, "use": 5, "use_cases": 1, "used": 1, "using": 1, "version": 1, "way": 1, "well": 1, "where": 1, "which": 1, "with": 3, "within": 1, "world": 3, "you": 3, "your": 3 }, "length": 345 }, { "id": "c16ecc0c7e95fc90aba813fc", "doc_id": "7063d8184bdb1b98f6f6d18a", "title": "data-fetching", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/guides/data-fetching.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/data-fetching-7063d818.json", "content": "--- title: Data fetching use_cases: \u003e- api calls, database queries, loading states, error handling, preloading data, client fetching, orm integration tags: - fetch - data - api - async - loading - query - database version: '1.0' description: \u003e- Master data fetching in SolidStart with practical examples. Handle loading states, errors, preloading, and database queries. --- This guide provides practical examples of common data-fetching tasks in SolidStart. Here's an example showing how to create a [`query`](/solid-router/reference/data-apis/query) and access its data with the [`createAsync` primitive](/solid-router/reference/data-apis/create-async): ```tsx tab title=\"TypeScript\" // src/routes/index.tsx import { For } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/ul\u003e ); } ``` ```jsx tab title=\"JavaScript\" // src/routes/index.jsx import { For } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/ul\u003e ); } ``` ## Showing loading UI To show a loading UI during data fetching: 1. Import [`Suspense`](/reference/components/suspense) from `solid-js`. 2. Wrap your data rendering in `\u003cSuspense\u003e`, and use the `fallback` prop to show a component during data fetching. ```tsx tab title=\"TypeScript\" {14} {16} // src/routes/index.tsx import { Suspense, For } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/Suspense\u003e \u003c/ul\u003e ); } ``` ```jsx tab title=\"JavaScript\" {14} {16} // src/routes/index.jsx import { Suspense, For } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/Suspense\u003e \u003c/ul\u003e ); } ``` ## Handling errors To show a fallback UI if the data fetching fails: 1. Import [`ErrorBoundary`](/reference/components/error-boundary) from `solid-js`. 2. Wrap the data rendering in `\u003cErrorBoundary\u003e`, and use the `fallback` prop to show a component if an error occurs. ```tsx tab title=\"TypeScript\" {14} {18} // src/routes/index.tsx import { ErrorBoundary, Suspense, For } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/Suspense\u003e \u003c/ErrorBoundary\u003e \u003c/ul\u003e ); } ``` ```jsx tab title=\"JavaScript\" {14} {18} // src/routes/index.jsx import { ErrorBoundary, Suspense, For } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/Suspense\u003e \u003c/ErrorBoundary\u003e \u003c/ul\u003e ); } ``` ## Preloading data To preload data before a route renders: 1. Export a `route` object with a [`preload`](/solid-router/reference/preload-functions/preload) function. 2. Run your query inside the `preload` function. 3. Use the query as usual in your component. ```tsx tab title=\"TypeScript\" {10-12} // src/routes/index.tsx import { ErrorBoundary } from \"solid-js\"; import { query, createAsync, type RouteDefinition } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export const route = { preload: () =\u003e getPosts(), } satisfies RouteDefinition; export default function Page() { const post = createAsync(() =\u003e getPosts()); return ( \u003cdiv\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003ch1\u003e{post().title}\u003c/h1\u003e \u003c/ErrorBoundary\u003e \u003c/div\u003e ); } ``` ```jsx tab title=\"JavaScript\" {10-12} // src/routes/index.jsx import { ErrorBoundary } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export const route = { preload: () =\u003e getPosts(), }; export default function Page() { const post = createAsync(() =\u003e getPosts()); return ( \u003cdiv\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003ch1\u003e{post().title}\u003c/h1\u003e \u003c/ErrorBoundary\u003e \u003c/div\u003e ); } ``` ## Passing parameters to queries When creating a query that accepts parameters, define your query function to take any number of parameters: ```tsx tab title=\"TypeScript\" {5} {11} {16} // src/routes/posts/[id]/index.tsx import { ErrorBoundary } from \"solid-js\"; import { query, createAsync, type RouteDefinition } from \"@solidjs/router\"; const getPost = query(async (id: string) =\u003e { const post = await fetch(`https://my-api.com/posts/${id}`); return await post.json(); }, \"post\"); export const route = { preload: ({ params }) =\u003e getPost(params.id), } satisfies RouteDefinition; export default function Page() { const postId = 1; const post = createAsync(() =\u003e getPost(postId)); return ( \u003cdiv\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003ch1\u003e{post().title}\u003c/h1\u003e \u003c/ErrorBoundary\u003e \u003c/div\u003e ); } ``` ```jsx tab title=\"JavaScript\" {5} {11} {16} // src/routes/posts/[id]/index.jsx import { ErrorBoundary } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPost = query(async (id) =\u003e { const post = await fetch(`https://my-api.com/posts/${id}`); return await post.json(); }, \"post\"); export const route = { preload: ({ params }) =\u003e getPost(params.id), }; export default function Page() { const postId = 1; const post = createAsync(() =\u003e getPost(postId)); return ( \u003cdiv\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003ch1\u003e{post().title}\u003c/h1\u003e \u003c/ErrorBoundary\u003e \u003c/div\u003e ); } ``` ## Using a database or an ORM To safely interact with your database or ORM in a query, use a [server function](/solid-start/reference/server/use-server): ```tsx tab title=\"TypeScript\" {7-8} // src/routes/index.tsx import { For, ErrorBoundary } from \"solid-js\"; import { query, createAsync, type RouteDefinition } from \"@solidjs/router\"; import { db } from \"~/lib/db\"; const getPosts = query(async () =\u003e { \"use server\"; return await db.from(\"posts\").select(); }, \"posts\"); export const route = { preload: () =\u003e getPosts(), } satisfies RouteDefinition; export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/ErrorBoundary\u003e \u003c/ul\u003e ); } ``` ```jsx tab title=\"JavaScript\" {7-8} // src/routes/index.jsx import { For, ErrorBoundary } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; import { db } from \"~/lib/db\"; const getPosts = query(async () =\u003e { \"use server\"; return await db.from(\"posts\").select(); }, \"posts\"); export const route = { preload: () =\u003e getPosts(), }; export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/ErrorBoundary\u003e \u003c/ul\u003e ); } ``` ## Fetching data on the client To fetch data only on the client, use the [`createResource`](/reference/basic-reactivity/create-resource) primitive: ```tsx tab title=\"TypeScript\" {5-8} {13} // src/routes/index.tsx import { createResource, ErrorBoundary, Suspense, For } from \"solid-js\"; export default function Page() { const [posts] = createResource(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }); return ( \u003cul\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/Suspense\u003e \u003c/ErrorBoundary\u003e \u003c/ul\u003e ); } ``` ```jsx tab title=\"JavaScript\" {5-8} {13} // src/routes/index.jsx import { createResource, ErrorBoundary, Suspense, For } from \"solid-js\"; export default function Page() { const [posts] = createResource(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }); return ( \u003cul\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/Suspense\u003e \u003c/ErrorBoundary\u003e \u003c/ul\u003e ); } ``` See the [`createResource`](/reference/basic-reactivity/create-resource) API reference for more information. :::note[Advanced Data Handling] For advanced features like automatic background re-fetching or infinite queries, you can use [TanStack Query](https://tanstack.com/query/latest/docs/framework/solid/overview). :::", "term_freq": { "##": 6, "---": 2, "//": 14, "//github": 1, "//my-api": 12, "//tanstack": 1, "/index": 2, "/reference/basic-reactivity/create-resource": 2, "/reference/components/error-boundary": 1, "/reference/components/suspense": 1, "/solid-router/reference/data-apis/create-async": 1, "/solid-router/reference/data-apis/query": 1, "/solid-router/reference/preload-functions/preload": 1, "/solid-start/reference/server/use-server": 1, "10-12": 2, "11": 2, "13": 2, "14": 4, "16": 4, "18": 2, "5-8": 2, "7-8": 2, "\u003c/div\u003e": 20, "\u003c/errorboundary\u003e": 10, "\u003c/for\u003e": 10, "\u003c/h1\u003e": 4, "\u003c/li\u003e": 10, "\u003c/suspense\u003e": 6, "\u003c/ul\u003e": 10, "\u003cdiv\u003e": 4, "\u003cdiv\u003eloading": 6, "\u003cdiv\u003esomething": 10, "\u003cerrorboundary": 10, "\u003cerrorboundary\u003e": 1, "\u003cfor": 10, "\u003ch1\u003e": 4, "\u003cli\u003e": 10, "\u003csuspense": 6, "\u003csuspense\u003e": 1, "\u003cul\u003e": 10, "=\u003e": 42, "\u003e-": 2, "@solidjs/router": 12, "accepts": 1, "access": 1, "advanced": 2, "an": 3, "and": 4, "any": 1, "api": 3, "as": 1, "async": 15, "automatic": 1, "await": 26, "background": 1, "before": 1, "calls": 1, "can": 1, "client": 3, "com/posts": 10, "com/posts/$": 2, "com/query/latest/docs/framework/solid/overview": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/guides/data-fetching": 1, "common": 1, "component": 3, "const": 46, "create": 1, "createasync": 25, "createresource": 6, "creating": 1, "data": 15, "data-fetching": 2, "database": 5, "db": 4, "default": 14, "define": 1, "description": 1, "during": 2, "each=": 10, "error": 2, "errorboundary": 11, "errors": 2, "example": 1, "examples": 2, "export": 21, "fails": 1, "fallback": 3, "fallback=": 16, "features": 1, "fetch": 14, "fetching": 7, "for": 12, "from": 32, "function": 18, "getpost": 6, "getposts": 24, "github-document": 1, "guide": 1, "handle": 1, "handling": 3, "here": 1, "how": 1, "https": 14, "id": 8, "if": 2, "import": 30, "in": 6, "infinite": 1, "information": 1, "inside": 1, "integration": 1, "interact": 1, "its": 1, "javascript": 7, "json": 12, "jsx": 14, "like": 1, "loading": 5, "master": 1, "mdx": 1, "more": 1, "note": 1, "number": 1, "object": 1, "occurs": 1, "of": 2, "on": 2, "only": 1, "or": 3, "orm": 3, "page": 14, "parameters": 3, "params": 4, "passing": 1, "post": 34, "postid": 4, "posts": 52, "practical": 2, "preload": 9, "preloading": 3, "primitive": 2, "prop": 2, "provides": 1, "queries": 4, "query": 32, "re-fetching": 1, "reference": 1, "rendering": 2, "renders": 1, "return": 28, "route": 8, "routedefinition": 6, "run": 1, "safely": 1, "satisfies": 3, "see": 1, "select": 2, "server": 3, "show": 4, "showing": 2, "solid-js": 16, "solidstart": 2, "src/routes/index": 12, "src/routes/posts/": 2, "states": 2, "string": 1, "suspense": 7, "tab": 14, "tags": 1, "take": 1, "tanstack": 1, "tasks": 1, "that": 1, "the": 11, "this": 1, "title": 15, "title=": 14, "to": 10, "tsx": 14, "type": 3, "typescript": 7, "ui": 3, "use": 8, "use_cases": 1, "using": 1, "usual": 1, "version": 1, "went": 10, "when": 1, "with": 4, "wrap": 2, "wrong": 10, "you": 1, "your": 5, "~/lib/db": 2 }, "length": 1201 }, { "id": "f99391104deeb5e7a57e95ad", "doc_id": "9e2257aef1ddd80c30cb5422", "title": "data-fetching", "url": "file:///tmp/devour-github-216944658/src/routes/solid-start/guides/data-fetching.mdx", "type": "github-document", "source": "solid:solid-router", "path": "devour_data/docs/data-fetching-9e2257ae.json", "content": "--- title: Data fetching use_cases: \u003e- api calls, database queries, loading states, error handling, preloading data, client fetching, orm integration tags: - fetch - data - api - async - loading - query - database version: '1.0' description: \u003e- Master data fetching in SolidStart with practical examples. Handle loading states, errors, preloading, and database queries. --- This guide provides practical examples of common data-fetching tasks in SolidStart. Here's an example showing how to create a [`query`](/solid-router/reference/data-apis/query) and access its data with the [`createAsync` primitive](/solid-router/reference/data-apis/create-async): ```tsx tab title=\"TypeScript\" // src/routes/index.tsx import { For } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/ul\u003e ); } ``` ```jsx tab title=\"JavaScript\" // src/routes/index.jsx import { For } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/ul\u003e ); } ``` ## Showing loading UI To show a loading UI during data fetching: 1. Import [`Suspense`](/reference/components/suspense) from `solid-js`. 2. Wrap your data rendering in `\u003cSuspense\u003e`, and use the `fallback` prop to show a component during data fetching. ```tsx tab title=\"TypeScript\" {14} {16} // src/routes/index.tsx import { Suspense, For } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/Suspense\u003e \u003c/ul\u003e ); } ``` ```jsx tab title=\"JavaScript\" {14} {16} // src/routes/index.jsx import { Suspense, For } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/Suspense\u003e \u003c/ul\u003e ); } ``` ## Handling errors To show a fallback UI if the data fetching fails: 1. Import [`ErrorBoundary`](/reference/components/error-boundary) from `solid-js`. 2. Wrap the data rendering in `\u003cErrorBoundary\u003e`, and use the `fallback` prop to show a component if an error occurs. ```tsx tab title=\"TypeScript\" {14} {18} // src/routes/index.tsx import { ErrorBoundary, Suspense, For } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/Suspense\u003e \u003c/ErrorBoundary\u003e \u003c/ul\u003e ); } ``` ```jsx tab title=\"JavaScript\" {14} {18} // src/routes/index.jsx import { ErrorBoundary, Suspense, For } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/Suspense\u003e \u003c/ErrorBoundary\u003e \u003c/ul\u003e ); } ``` ## Preloading data To preload data before a route renders: 1. Export a `route` object with a [`preload`](/solid-router/reference/preload-functions/preload) function. 2. Run your query inside the `preload` function. 3. Use the query as usual in your component. ```tsx tab title=\"TypeScript\" {10-12} // src/routes/index.tsx import { ErrorBoundary } from \"solid-js\"; import { query, createAsync, type RouteDefinition } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export const route = { preload: () =\u003e getPosts(), } satisfies RouteDefinition; export default function Page() { const post = createAsync(() =\u003e getPosts()); return ( \u003cdiv\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003ch1\u003e{post().title}\u003c/h1\u003e \u003c/ErrorBoundary\u003e \u003c/div\u003e ); } ``` ```jsx tab title=\"JavaScript\" {10-12} // src/routes/index.jsx import { ErrorBoundary } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }, \"posts\"); export const route = { preload: () =\u003e getPosts(), }; export default function Page() { const post = createAsync(() =\u003e getPosts()); return ( \u003cdiv\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003ch1\u003e{post().title}\u003c/h1\u003e \u003c/ErrorBoundary\u003e \u003c/div\u003e ); } ``` ## Passing parameters to queries When creating a query that accepts parameters, define your query function to take any number of parameters: ```tsx tab title=\"TypeScript\" {5} {11} {16} // src/routes/posts/[id]/index.tsx import { ErrorBoundary } from \"solid-js\"; import { query, createAsync, type RouteDefinition } from \"@solidjs/router\"; const getPost = query(async (id: string) =\u003e { const post = await fetch(`https://my-api.com/posts/${id}`); return await post.json(); }, \"post\"); export const route = { preload: ({ params }) =\u003e getPost(params.id), } satisfies RouteDefinition; export default function Page() { const postId = 1; const post = createAsync(() =\u003e getPost(postId)); return ( \u003cdiv\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003ch1\u003e{post().title}\u003c/h1\u003e \u003c/ErrorBoundary\u003e \u003c/div\u003e ); } ``` ```jsx tab title=\"JavaScript\" {5} {11} {16} // src/routes/posts/[id]/index.jsx import { ErrorBoundary } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getPost = query(async (id) =\u003e { const post = await fetch(`https://my-api.com/posts/${id}`); return await post.json(); }, \"post\"); export const route = { preload: ({ params }) =\u003e getPost(params.id), }; export default function Page() { const postId = 1; const post = createAsync(() =\u003e getPost(postId)); return ( \u003cdiv\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003ch1\u003e{post().title}\u003c/h1\u003e \u003c/ErrorBoundary\u003e \u003c/div\u003e ); } ``` ## Using a database or an ORM To safely interact with your database or ORM in a query, use a [server function](/solid-start/reference/server/use-server): ```tsx tab title=\"TypeScript\" {7-8} // src/routes/index.tsx import { For, ErrorBoundary } from \"solid-js\"; import { query, createAsync, type RouteDefinition } from \"@solidjs/router\"; import { db } from \"~/lib/db\"; const getPosts = query(async () =\u003e { \"use server\"; return await db.from(\"posts\").select(); }, \"posts\"); export const route = { preload: () =\u003e getPosts(), } satisfies RouteDefinition; export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/ErrorBoundary\u003e \u003c/ul\u003e ); } ``` ```jsx tab title=\"JavaScript\" {7-8} // src/routes/index.jsx import { For, ErrorBoundary } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; import { db } from \"~/lib/db\"; const getPosts = query(async () =\u003e { \"use server\"; return await db.from(\"posts\").select(); }, \"posts\"); export const route = { preload: () =\u003e getPosts(), }; export default function Page() { const posts = createAsync(() =\u003e getPosts()); return ( \u003cul\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/ErrorBoundary\u003e \u003c/ul\u003e ); } ``` ## Fetching data on the client To fetch data only on the client, use the [`createResource`](/reference/basic-reactivity/create-resource) primitive: ```tsx tab title=\"TypeScript\" {5-8} {13} // src/routes/index.tsx import { createResource, ErrorBoundary, Suspense, For } from \"solid-js\"; export default function Page() { const [posts] = createResource(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }); return ( \u003cul\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/Suspense\u003e \u003c/ErrorBoundary\u003e \u003c/ul\u003e ); } ``` ```jsx tab title=\"JavaScript\" {5-8} {13} // src/routes/index.jsx import { createResource, ErrorBoundary, Suspense, For } from \"solid-js\"; export default function Page() { const [posts] = createResource(async () =\u003e { const posts = await fetch(\"https://my-api.com/posts\"); return await posts.json(); }); return ( \u003cul\u003e \u003cErrorBoundary fallback={\u003cdiv\u003eSomething went wrong!\u003c/div\u003e}\u003e \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/Suspense\u003e \u003c/ErrorBoundary\u003e \u003c/ul\u003e ); } ``` See the [`createResource`](/reference/basic-reactivity/create-resource) API reference for more information. :::note[Advanced Data Handling] For advanced features like automatic background re-fetching or infinite queries, you can use [TanStack Query](https://tanstack.com/query/latest/docs/framework/solid/overview). :::", "term_freq": { "##": 6, "---": 2, "//": 14, "///tmp/devour-github-216944658/src/routes/solid-start/guides/data-fetching": 1, "//my-api": 12, "//tanstack": 1, "/index": 2, "/reference/basic-reactivity/create-resource": 2, "/reference/components/error-boundary": 1, "/reference/components/suspense": 1, "/solid-router/reference/data-apis/create-async": 1, "/solid-router/reference/data-apis/query": 1, "/solid-router/reference/preload-functions/preload": 1, "/solid-start/reference/server/use-server": 1, "10-12": 2, "11": 2, "13": 2, "14": 4, "16": 4, "18": 2, "5-8": 2, "7-8": 2, "\u003c/div\u003e": 20, "\u003c/errorboundary\u003e": 10, "\u003c/for\u003e": 10, "\u003c/h1\u003e": 4, "\u003c/li\u003e": 10, "\u003c/suspense\u003e": 6, "\u003c/ul\u003e": 10, "\u003cdiv\u003e": 4, "\u003cdiv\u003eloading": 6, "\u003cdiv\u003esomething": 10, "\u003cerrorboundary": 10, "\u003cerrorboundary\u003e": 1, "\u003cfor": 10, "\u003ch1\u003e": 4, "\u003cli\u003e": 10, "\u003csuspense": 6, "\u003csuspense\u003e": 1, "\u003cul\u003e": 10, "=\u003e": 42, "\u003e-": 2, "@solidjs/router": 12, "accepts": 1, "access": 1, "advanced": 2, "an": 3, "and": 4, "any": 1, "api": 3, "as": 1, "async": 15, "automatic": 1, "await": 26, "background": 1, "before": 1, "calls": 1, "can": 1, "client": 3, "com/posts": 10, "com/posts/$": 2, "com/query/latest/docs/framework/solid/overview": 1, "common": 1, "component": 3, "const": 46, "create": 1, "createasync": 25, "createresource": 6, "creating": 1, "data": 15, "data-fetching": 2, "database": 5, "db": 4, "default": 14, "define": 1, "description": 1, "during": 2, "each=": 10, "error": 2, "errorboundary": 11, "errors": 2, "example": 1, "examples": 2, "export": 21, "fails": 1, "fallback": 3, "fallback=": 16, "features": 1, "fetch": 14, "fetching": 7, "file": 1, "for": 12, "from": 32, "function": 18, "getpost": 6, "getposts": 24, "github-document": 1, "guide": 1, "handle": 1, "handling": 3, "here": 1, "how": 1, "https": 13, "id": 8, "if": 2, "import": 30, "in": 6, "infinite": 1, "information": 1, "inside": 1, "integration": 1, "interact": 1, "its": 1, "javascript": 7, "json": 12, "jsx": 14, "like": 1, "loading": 5, "master": 1, "mdx": 1, "more": 1, "note": 1, "number": 1, "object": 1, "occurs": 1, "of": 2, "on": 2, "only": 1, "or": 3, "orm": 3, "page": 14, "parameters": 3, "params": 4, "passing": 1, "post": 34, "postid": 4, "posts": 52, "practical": 2, "preload": 9, "preloading": 3, "primitive": 2, "prop": 2, "provides": 1, "queries": 4, "query": 32, "re-fetching": 1, "reference": 1, "rendering": 2, "renders": 1, "return": 28, "route": 8, "routedefinition": 6, "run": 1, "safely": 1, "satisfies": 3, "see": 1, "select": 2, "server": 3, "show": 4, "showing": 2, "solid-js": 16, "solidstart": 2, "src/routes/index": 12, "src/routes/posts/": 2, "states": 2, "string": 1, "suspense": 7, "tab": 14, "tags": 1, "take": 1, "tanstack": 1, "tasks": 1, "that": 1, "the": 11, "this": 1, "title": 15, "title=": 14, "to": 10, "tsx": 14, "type": 3, "typescript": 7, "ui": 3, "use": 8, "use_cases": 1, "using": 1, "usual": 1, "version": 1, "went": 10, "when": 1, "with": 4, "wrap": 2, "wrong": 10, "you": 1, "your": 5, "~/lib/db": 2 }, "length": 1200 }, { "id": "03894d57eea3e015fe5ddab3", "doc_id": "3f266ab7800a82b69961fa46", "title": "data-fetching", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/building-your-application/data-fetching.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/data-fetching.json", "content": "--- title: \"Data fetching\" --- Fetching data from a remote API or database is a core task for most applications. [Solid](/) and [Solid Router](/solid-router) provide foundational tools like the [`createResource` primitive](/guides/fetching-data) and [queries](/solid-router/data-fetching/queries) to manage asynchronous data. SolidStart builds on these capabilities, extending them to provide a comprehensive solution for data fetching in a full-stack environment. This page assumes you are familiar with the fundamental concepts of Solid and Solid Router. If you are a beginner, we highly recommend starting with the [queries documentation](/solid-router/data-fetching/queries). You can also find many practical examples in the [data fetching how-to guide](/solid-start/guides/data-fetching). ## Server functions and queries Server functions provide a way to write functions that run exclusively on the server. This makes it safe to fetch data directly from a database without relying on a separate API endpoint. Server functions integrate seamlessly with queries, as they can be used as the fetcher for a query. ```tsx import { query, redirect } from \"@solidjs/router\"; import { useSession } from \"vinxi/http\"; import { db } from \"./db\"; const getCurrentUserQuery = query(async (id: string) =\u003e { \"use server\"; const session = await useSession({ password: process.env.SESSION_SECRET as string, name: \"session\", }); if (session.data.userId) { return await db.users.get({ id: session.data.userId }); } else { throw redirect(\"/login\"); } }, \"currentUser\"); ``` In this example, the `getCurrentUserQuery` retrieves the session data, and if an authenticated user exists, it gets their information from the database and returns it. Otherwise, it redirects the user to the login page. All of these operations are performed completely on the server regardless of how the query is called. :::caution[Modifying headers after streaming] Once streaming begins, response headers (including status and cookies) are sent and cannot be changed. Any header-modifying logic within a server function, such as redirects or APIs like `useSession` that set cookies, must run before streaming starts; otherwise, this error will occur: `Cannot set headers after they are sent to the client.` To avoid this, disable streaming for queries that may modify headers by enabling the [`deferStream`](/solid-router/reference/data-apis/create-async#deferstream) option. ```tsx const user = createAsync(() =\u003e getCurrentUserQuery(), { deferStream: true }); ``` :::", "term_freq": { "##": 1, "---": 2, "//github": 1, "/db": 1, "/guides/fetching-data": 1, "/login": 1, "/solid-router": 1, "/solid-router/data-fetching/queries": 2, "/solid-router/reference/data-apis/create-async#deferstream": 1, "/solid-start/guides/data-fetching": 1, "=\u003e": 2, "@solidjs/router": 1, "after": 2, "all": 1, "also": 1, "an": 1, "and": 8, "any": 1, "api": 2, "apis": 1, "applications": 1, "are": 5, "as": 4, "assumes": 1, "async": 1, "asynchronous": 1, "authenticated": 1, "avoid": 1, "await": 2, "be": 2, "before": 1, "beginner": 1, "begins": 1, "builds": 1, "by": 1, "called": 1, "can": 2, "cannot": 2, "capabilities": 1, "caution": 1, "changed": 1, "client": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/building-your-application/data-fetching": 1, "completely": 1, "comprehensive": 1, "concepts": 1, "const": 3, "cookies": 2, "core": 1, "createasync": 1, "createresource": 1, "currentuser": 1, "data": 9, "data-fetching": 1, "database": 3, "db": 2, "deferstream": 2, "directly": 1, "disable": 1, "documentation": 1, "else": 1, "enabling": 1, "endpoint": 1, "env": 1, "environment": 1, "error": 1, "example": 1, "examples": 1, "exclusively": 1, "exists": 1, "extending": 1, "familiar": 1, "fetch": 1, "fetcher": 1, "fetching": 4, "find": 1, "for": 4, "foundational": 1, "from": 6, "full-stack": 1, "function": 1, "functions": 4, "fundamental": 1, "get": 1, "getcurrentuserquery": 3, "gets": 1, "github-document": 1, "guide": 1, "header-modifying": 1, "headers": 4, "highly": 1, "how": 1, "how-to": 1, "https": 1, "id": 2, "if": 3, "import": 3, "in": 3, "including": 1, "information": 1, "integrate": 1, "is": 2, "it": 4, "like": 2, "logic": 1, "login": 1, "makes": 1, "manage": 1, "many": 1, "may": 1, "mdx": 1, "modify": 1, "modifying": 1, "most": 1, "must": 1, "name": 1, "occur": 1, "of": 3, "on": 4, "once": 1, "operations": 1, "option": 1, "or": 2, "otherwise": 2, "page": 2, "password": 1, "performed": 1, "practical": 1, "primitive": 1, "process": 1, "provide": 3, "queries": 5, "query": 4, "recommend": 1, "redirect": 2, "redirects": 2, "regardless": 1, "relying": 1, "remote": 1, "response": 1, "retrieves": 1, "return": 1, "returns": 1, "router": 2, "run": 2, "safe": 1, "seamlessly": 1, "sent": 2, "separate": 1, "server": 7, "session": 5, "session_secret": 1, "set": 2, "solid": 4, "solidstart": 1, "solution": 1, "starting": 1, "starts": 1, "status": 1, "streaming": 4, "string": 2, "such": 1, "task": 1, "that": 3, "the": 15, "their": 1, "them": 1, "these": 2, "they": 2, "this": 5, "throw": 1, "title": 1, "to": 7, "tools": 1, "true": 1, "tsx": 2, "use": 1, "used": 1, "user": 3, "userid": 2, "users": 1, "usesession": 3, "vinxi/http": 1, "way": 1, "we": 1, "will": 1, "with": 3, "within": 1, "without": 1, "write": 1, "you": 3 }, "length": 338 }, { "id": "c40c0f91f8bcb0cb7a5465bf", "doc_id": "b5a27c418c217634e26c9104", "title": "data-mutation", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/guides/data-mutation.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/data-mutation-b5a27c41.json", "content": "--- title: Data mutation use_cases: \u003e- form submission, data updates, crud operations, user input handling, database writes, api posts, validation, optimistic ui tags: - forms - actions - mutations - validation - database - api - crud version: '1.0' description: \u003e- Learn how to handle form submissions, validate data, and perform mutations with SolidStart actions. Complete guide with examples. --- This guide provides practical examples of using actions to mutate data in SolidStart. ## Handling form submission To handle [`\u003cform\u003e`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) submissions with an action: 1. Ensure the action has a unique name. See the [Action API reference](/solid-router/reference/data-apis/action#notes-of-form-implementation-and-ssr) for more information. 2. Pass the action to the `\u003cform\u003e` element using the `action` prop. 3. Ensure the `\u003cform\u003e` element uses the `post` method for submission. 4. Use the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData) object in the action to extract field data using the native `FormData` methods. ```tsx tab title=\"TypeScript\" {4-10} {14} // src/routes/index.tsx import { action } from \"@solidjs/router\"; const addPost = action(async (formData: FormData) =\u003e { const title = formData.get(\"title\") as string; await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ```jsx tab title=\"JavaScript\" {4-10} {14} // src/routes/index.jsx import { action } from \"@solidjs/router\"; const addPost = action(async (formData) =\u003e { const title = formData.get(\"title\"); await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ## Passing additional arguments To pass additional arguments to your action, use the `with` method: ```tsx tab title=\"TypeScript\" {4} {15} // src/routes/index.tsx import { action } from \"@solidjs/router\"; const addPost = action(async (userId: number, formData: FormData) =\u003e { const title = formData.get(\"title\") as string; await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ userId, title }), }); }, \"addPost\"); export default function Page() { const userId = 1; return ( \u003cform action={addPost.with(userId)} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ```jsx tab title=\"JavaScript\" {4} {15} // src/routes/index.jsx import { action } from \"@solidjs/router\"; const addPost = action(async (userId, formData) =\u003e { const title = formData.get(\"title\"); await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ userId, title }), }); }, \"addPost\"); export default function Page() { const userId = 1; return ( \u003cform action={addPost.with(userId)} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ## Showing pending UI To display a pending UI during action execution: 1. Import [`useSubmission`](/solid-router/reference/data-apis/use-submission) from `@solidjs/router`. 2. Call `useSubmission` with your action, and use the returned `pending` property to display pending UI. ```tsx tab title=\"TypeScript\" {13} {17-19} // src/routes/index.tsx import { action, useSubmission } from \"@solidjs/router\"; const addPost = action(async (formData: FormData) =\u003e { const title = formData.get(\"title\") as string; await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const submission = useSubmission(addPost); return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton disabled={submission.pending}\u003e {submission.pending ? \"Adding...\" : \"Add Post\"} \u003c/button\u003e \u003c/form\u003e ); } ``` ```jsx tab title=\"JavaScript\" {13} {17-19} // src/routes/index.jsx import { action, useSubmission } from \"@solidjs/router\"; const addPost = action(async (formData) =\u003e { const title = formData.get(\"title\"); await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const submission = useSubmission(addPost); return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton disabled={submission.pending}\u003e {submission.pending ? \"Adding...\" : \"Add Post\"} \u003c/button\u003e \u003c/form\u003e ); } ``` ## Handling errors To handle errors that occur within an action: 1. Import [`useSubmission`](/solid-router/reference/data-apis/use-submission) from `@solidjs/router`. 2. Call `useSubmission` with your action, and use the returned `error` property to handle the error. ```tsx tab title=\"TypeScript\" {14} {17-19} // src/routes/index.tsx import { Show } from \"solid-js\"; import { action, useSubmission } from \"@solidjs/router\"; const addPost = action(async (formData: FormData) =\u003e { const title = formData.get(\"title\") as string; await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const submission = useSubmission(addPost); return ( \u003cform action={addPost} method=\"post\"\u003e \u003cShow when={submission.error}\u003e \u003cp\u003e{submission.error.message}\u003c/p\u003e \u003c/Show\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ```jsx tab title=\"JavaScript\" {14} {17-19} // src/routes/index.jsx import { Show } from \"solid-js\"; import { action, useSubmission } from \"@solidjs/router\"; const addPost = action(async (formData) =\u003e { const title = formData.get(\"title\"); await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const submission = useSubmission(addPost); return ( \u003cform action={addPost} method=\"post\"\u003e \u003cShow when={submission.error}\u003e \u003cp\u003e{submission.error.message}\u003c/p\u003e \u003c/Show\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ## Validating form fields To validate form fields in an action: 1. Add validation logic in your action and return validation errors if the data is invalid. 2. Import [`useSubmission`](/solid-router/reference/data-apis/use-submission) from `@solidjs/router`. 3. Call `useSubmission` with your action, and use the returned `result` property to handle the errors. ```tsx tab title=\"TypeScript\" {7-11} {19} {23-25} // src/routes/index.tsx import { Show } from \"solid-js\"; import { action, useSubmission } from \"@solidjs/router\"; const addPost = action(async (formData: FormData) =\u003e { const title = formData.get(\"title\") as string; if (!title || title.length \u003c 2) { return { error: \"Title must be at least 2 characters\", }; } await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const submission = useSubmission(addPost); return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cShow when={submission.result?.error}\u003e \u003cp\u003e{submission.result?.error}\u003c/p\u003e \u003c/Show\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ```jsx tab title=\"JavaScript\" {7-11} {19} {23-25} // src/routes/index.jsx import { Show } from \"solid-js\"; import { action, useSubmission } from \"@solidjs/router\"; const addPost = action(async (formData) =\u003e { const title = formData.get(\"title\"); if (!title || title.length \u003c 2) { return { error: \"Title must be at least 2 characters\", }; } await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const submission = useSubmission(addPost); return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cShow when={submission.result?.error}\u003e \u003cp\u003e{submission.result?.error}\u003c/p\u003e \u003c/Show\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ## Showing optimistic UI To update the UI before the server responds: 1. Import [`useSubmission`](/solid-router/reference/data-apis/use-submission) from `@solidjs/router`. 2. Call `useSubmission` with your action, and use the returned `pending` and `input` properties to display optimistic UI. ```tsx tab title=\"TypeScript\" {20} {29-31} // src/routes/index.tsx import { For, Show } from \"solid-js\"; import { action, useSubmission, query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/blog\"); return await posts.json(); }, \"posts\"); const addPost = action(async (formData: FormData) =\u003e { const title = formData.get(\"title\"); await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); const submission = useSubmission(addPost); return ( \u003cmain\u003e \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e \u003cul\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003cShow when={submission.pending}\u003e {submission.input?.[0]?.get(\"title\")?.toString()} \u003c/Show\u003e \u003c/ul\u003e \u003c/main\u003e ); } ``` ```jsx tab title=\"JavaScript\" {20} {29-31} // src/routes/index.jsx import { For, Show } from \"solid-js\"; import { action, useSubmission, query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/blog\"); return await posts.json(); }, \"posts\"); const addPost = action(async (formData) =\u003e { const title = formData.get(\"title\"); await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); const submission = useSubmission(addPost); return ( \u003cmain\u003e \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e \u003cul\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003cShow when={submission.pending}\u003e {submission.input?.[0]?.get(\"title\")?.toString()} \u003c/Show\u003e \u003c/ul\u003e \u003c/main\u003e ); } ``` :::note[Multiple Submissions] If you want to display optimistic UI for multiple concurrent submissions, you can use the [`useSubmissions`](/solid-router/reference/data-apis/use-submissions) primitive. ::: ## Redirecting To redirect users to a different route within an action: 1. Import [`redirect`](/solid-router/reference/response-helpers/redirect) from `@solidjs/router`. 2. Call `redirect` with the route you want to navigate to, and throw its response. ```tsx tab title=\"TypeScript\" {11} // src/routes/index.tsx import { action, redirect } from \"@solidjs/router\"; const addPost = action(async (formData: FormData) =\u003e { const title = formData.get(\"title\") as string; const response = await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); const post = await response.json(); throw redirect(`/posts/${post.id}`); }, \"addPost\"); export default function Page() { return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ```jsx tab title=\"JavaScript\" {11} // src/routes/index.jsx import { action, redirect } from \"@solidjs/router\"; const addPost = action(async (formData) =\u003e { const title = formData.get(\"title\"); const response = await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); const post = await response.json(); throw redirect(`/posts/${post.id}`); }, \"addPost\"); export default function Page() { return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ## Using a database or an ORM To safely interact with your database or ORM in an action, ensure it's server-only by adding [`\"use server\"`](/solid-start/reference/server/use-server) as the first line of your action: ```tsx tab title=\"TypeScript\" {6} // src/routes/index.tsx import { action } from \"@solidjs/router\"; import { db } from \"~/lib/db\"; const addPost = action(async (formData: FormData) =\u003e { \"use server\"; const title = formData.get(\"title\") as string; await db.insert(\"posts\").values({ title }); }, \"addPost\"); export default function Page() { return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ```jsx tab title=\"JavaScript\" {6} // src/routes/index.jsx import { action } from \"@solidjs/router\"; import { db } from \"~/lib/db\"; const addPost = action(async (formData) =\u003e { \"use server\"; const title = formData.get(\"title\"); await db.insert(\"posts\").values({ title }); }, \"addPost\"); export default function Page() { return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ## Triggering an action programmatically To programmatically trigger an action: 1. Import [`useAction`](/solid-router/reference/data-apis/use-action) from `@solidjs/router`. 2. Call `useAction` with your action, and use the returned function to trigger the action. ```tsx tab title=\"TypeScript\" {14} {18} // src/routes/index.tsx import { createSignal } from \"solid-js\"; import { action, useAction } from \"@solidjs/router\"; const addPost = action(async (title: string) =\u003e { await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const [title, setTitle] = createSignal(\"\"); const addPostAction = useAction(addPost); return ( \u003cdiv\u003e \u003cinput value={title()} onInput={(e) =\u003e setTitle(e.target.value)} /\u003e \u003cbutton onClick={() =\u003e addPostAction(title())}\u003eAdd Post\u003c/button\u003e \u003c/div\u003e ); } ``` ```jsx tab title=\"JavaScript\" {14} {18} // src/routes/index.jsx import { createSignal } from \"solid-js\"; import { action, useAction } from \"@solidjs/router\"; const addPost = action(async (title) =\u003e { await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const [title, setTitle] = createSignal(\"\"); const addPostAction = useAction(addPost); return ( \u003cdiv\u003e \u003cinput value={title()} onInput={(e) =\u003e setTitle(e.target.value)} /\u003e \u003cbutton onClick={() =\u003e addPostAction(title())}\u003eAdd Post\u003c/button\u003e \u003c/div\u003e ); } ```", "term_freq": { "##": 9, "---": 2, "//": 18, "//developer": 2, "//github": 1, "//my-api": 18, "/\u003e": 18, "/posts/$": 2, "/solid-router/reference/data-apis/action#notes-of-form-implementation-and-ssr": 1, "/solid-router/reference/data-apis/use-action": 1, "/solid-router/reference/data-apis/use-submission": 4, "/solid-router/reference/data-apis/use-submissions": 1, "/solid-router/reference/response-helpers/redirect": 1, "/solid-start/reference/server/use-server": 1, "11": 2, "13": 2, "14": 6, "15": 2, "17-19": 4, "18": 2, "19": 2, "20": 2, "23-25": 2, "29-31": 2, "4-10": 2, "7-11": 2, "\u003c/button\u003e": 2, "\u003c/div\u003e": 2, "\u003c/for\u003e": 2, "\u003c/form\u003e": 16, "\u003c/li\u003e": 2, "\u003c/main\u003e": 2, "\u003c/p\u003e": 4, "\u003c/show\u003e": 6, "\u003c/ul\u003e": 2, "\u003cbutton": 4, "\u003cbutton\u003eadd": 14, "\u003cdiv\u003e": 2, "\u003cfor": 2, "\u003cform": 16, "\u003cform\u003e": 3, "\u003cinput": 18, "\u003cli\u003e": 2, "\u003cmain\u003e": 2, "\u003cp\u003e": 4, "\u003cshow": 6, "\u003cul\u003e": 2, "=\u003e": 28, "\u003e-": 2, "\u003eadd": 2, "@solidjs/router": 24, "action": 58, "action=": 16, "actions": 3, "add": 3, "adding": 3, "additional": 2, "addpost": 62, "addpostaction": 4, "an": 8, "and": 9, "api": 3, "arguments": 2, "as": 8, "async": 20, "at": 2, "await": 24, "be": 2, "before": 1, "body": 16, "by": 1, "call": 6, "can": 1, "characters": 2, "com/blog": 2, "com/posts": 16, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/guides/data-mutation": 1, "complete": 1, "concurrent": 1, "const": 58, "createasync": 4, "createsignal": 4, "crud": 2, "data": 6, "data-mutation": 1, "database": 4, "db": 4, "default": 18, "description": 1, "different": 1, "disabled=": 2, "display": 4, "during": 1, "each=": 2, "element": 2, "ensure": 3, "error": 12, "errors": 4, "examples": 2, "execution": 1, "export": 18, "extract": 1, "fetch": 18, "field": 1, "fields": 2, "first": 1, "for": 5, "form": 5, "formdata": 42, "forms": 1, "from": 34, "function": 19, "get": 18, "getposts": 4, "github-document": 1, "guide": 2, "handle": 5, "handling": 3, "has": 1, "how": 1, "https": 21, "id": 2, "if": 4, "import": 34, "in": 5, "information": 1, "input": 4, "insert": 2, "interact": 1, "invalid": 1, "is": 1, "it": 1, "its": 1, "javascript": 9, "json": 20, "jsx": 18, "learn": 1, "least": 2, "length": 2, "line": 1, "logic": 1, "mdx": 1, "message": 2, "method": 18, "method=": 16, "methods": 1, "more": 1, "mozilla": 2, "multiple": 2, "must": 2, "mutate": 1, "mutation": 1, "mutations": 2, "name": 1, "name=": 16, "native": 1, "navigate": 1, "note": 1, "number": 1, "object": 1, "occur": 1, "of": 2, "onclick=": 2, "oninput=": 2, "operations": 1, "optimistic": 4, "or": 2, "org/en-us/docs/web/api/formdata/formdata": 1, "org/en-us/docs/web/html/element/form": 1, "orm": 2, "page": 18, "pass": 2, "passing": 1, "pending": 11, "perform": 1, "post": 43, "post\u003c/button\u003e": 16, "posts": 13, "practical": 1, "primitive": 1, "programmatically": 2, "prop": 1, "properties": 1, "property": 3, "provides": 1, "query": 4, "redirect": 7, "redirecting": 1, "reference": 1, "responds": 1, "response": 5, "result": 5, "return": 23, "returned": 5, "route": 2, "safely": 1, "see": 1, "server": 4, "server-only": 1, "settitle": 4, "show": 6, "showing": 2, "solid-js": 8, "solidstart": 2, "src/routes/index": 18, "string": 8, "stringify": 16, "submission": 27, "submissions": 4, "tab": 18, "tags": 1, "target": 2, "that": 1, "the": 25, "this": 1, "throw": 3, "title": 85, "title=": 18, "to": 23, "tostring": 2, "trigger": 2, "triggering": 1, "tsx": 18, "typescript": 9, "ui": 8, "unique": 1, "update": 1, "updates": 1, "use": 11, "use_cases": 1, "useaction": 6, "user": 1, "userid": 8, "users": 1, "uses": 1, "usesubmission": 24, "usesubmissions": 1, "using": 4, "validate": 2, "validating": 1, "validation": 4, "value": 2, "value=": 2, "values": 2, "version": 1, "want": 2, "when=": 6, "with": 13, "within": 2, "writes": 1, "you": 3, "your": 9, "||": 2, "~/lib/db": 2 }, "length": 1697 }, { "id": "d150053c0c9ffa5653a49284", "doc_id": "fa049edfd5ae8fd7fc8764e1", "title": "data-mutation", "url": "file:///tmp/devour-github-216944658/src/routes/solid-start/guides/data-mutation.mdx", "type": "github-document", "source": "solid:solid-router", "path": "devour_data/docs/data-mutation-fa049edf.json", "content": "--- title: Data mutation use_cases: \u003e- form submission, data updates, crud operations, user input handling, database writes, api posts, validation, optimistic ui tags: - forms - actions - mutations - validation - database - api - crud version: '1.0' description: \u003e- Learn how to handle form submissions, validate data, and perform mutations with SolidStart actions. Complete guide with examples. --- This guide provides practical examples of using actions to mutate data in SolidStart. ## Handling form submission To handle [`\u003cform\u003e`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) submissions with an action: 1. Ensure the action has a unique name. See the [Action API reference](/solid-router/reference/data-apis/action#notes-of-form-implementation-and-ssr) for more information. 2. Pass the action to the `\u003cform\u003e` element using the `action` prop. 3. Ensure the `\u003cform\u003e` element uses the `post` method for submission. 4. Use the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData) object in the action to extract field data using the native `FormData` methods. ```tsx tab title=\"TypeScript\" {4-10} {14} // src/routes/index.tsx import { action } from \"@solidjs/router\"; const addPost = action(async (formData: FormData) =\u003e { const title = formData.get(\"title\") as string; await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ```jsx tab title=\"JavaScript\" {4-10} {14} // src/routes/index.jsx import { action } from \"@solidjs/router\"; const addPost = action(async (formData) =\u003e { const title = formData.get(\"title\"); await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ## Passing additional arguments To pass additional arguments to your action, use the `with` method: ```tsx tab title=\"TypeScript\" {4} {15} // src/routes/index.tsx import { action } from \"@solidjs/router\"; const addPost = action(async (userId: number, formData: FormData) =\u003e { const title = formData.get(\"title\") as string; await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ userId, title }), }); }, \"addPost\"); export default function Page() { const userId = 1; return ( \u003cform action={addPost.with(userId)} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ```jsx tab title=\"JavaScript\" {4} {15} // src/routes/index.jsx import { action } from \"@solidjs/router\"; const addPost = action(async (userId, formData) =\u003e { const title = formData.get(\"title\"); await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ userId, title }), }); }, \"addPost\"); export default function Page() { const userId = 1; return ( \u003cform action={addPost.with(userId)} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ## Showing pending UI To display a pending UI during action execution: 1. Import [`useSubmission`](/solid-router/reference/data-apis/use-submission) from `@solidjs/router`. 2. Call `useSubmission` with your action, and use the returned `pending` property to display pending UI. ```tsx tab title=\"TypeScript\" {13} {17-19} // src/routes/index.tsx import { action, useSubmission } from \"@solidjs/router\"; const addPost = action(async (formData: FormData) =\u003e { const title = formData.get(\"title\") as string; await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const submission = useSubmission(addPost); return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton disabled={submission.pending}\u003e {submission.pending ? \"Adding...\" : \"Add Post\"} \u003c/button\u003e \u003c/form\u003e ); } ``` ```jsx tab title=\"JavaScript\" {13} {17-19} // src/routes/index.jsx import { action, useSubmission } from \"@solidjs/router\"; const addPost = action(async (formData) =\u003e { const title = formData.get(\"title\"); await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const submission = useSubmission(addPost); return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton disabled={submission.pending}\u003e {submission.pending ? \"Adding...\" : \"Add Post\"} \u003c/button\u003e \u003c/form\u003e ); } ``` ## Handling errors To handle errors that occur within an action: 1. Import [`useSubmission`](/solid-router/reference/data-apis/use-submission) from `@solidjs/router`. 2. Call `useSubmission` with your action, and use the returned `error` property to handle the error. ```tsx tab title=\"TypeScript\" {14} {17-19} // src/routes/index.tsx import { Show } from \"solid-js\"; import { action, useSubmission } from \"@solidjs/router\"; const addPost = action(async (formData: FormData) =\u003e { const title = formData.get(\"title\") as string; await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const submission = useSubmission(addPost); return ( \u003cform action={addPost} method=\"post\"\u003e \u003cShow when={submission.error}\u003e \u003cp\u003e{submission.error.message}\u003c/p\u003e \u003c/Show\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ```jsx tab title=\"JavaScript\" {14} {17-19} // src/routes/index.jsx import { Show } from \"solid-js\"; import { action, useSubmission } from \"@solidjs/router\"; const addPost = action(async (formData) =\u003e { const title = formData.get(\"title\"); await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const submission = useSubmission(addPost); return ( \u003cform action={addPost} method=\"post\"\u003e \u003cShow when={submission.error}\u003e \u003cp\u003e{submission.error.message}\u003c/p\u003e \u003c/Show\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ## Validating form fields To validate form fields in an action: 1. Add validation logic in your action and return validation errors if the data is invalid. 2. Import [`useSubmission`](/solid-router/reference/data-apis/use-submission) from `@solidjs/router`. 3. Call `useSubmission` with your action, and use the returned `result` property to handle the errors. ```tsx tab title=\"TypeScript\" {7-11} {19} {23-25} // src/routes/index.tsx import { Show } from \"solid-js\"; import { action, useSubmission } from \"@solidjs/router\"; const addPost = action(async (formData: FormData) =\u003e { const title = formData.get(\"title\") as string; if (!title || title.length \u003c 2) { return { error: \"Title must be at least 2 characters\", }; } await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const submission = useSubmission(addPost); return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cShow when={submission.result?.error}\u003e \u003cp\u003e{submission.result?.error}\u003c/p\u003e \u003c/Show\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ```jsx tab title=\"JavaScript\" {7-11} {19} {23-25} // src/routes/index.jsx import { Show } from \"solid-js\"; import { action, useSubmission } from \"@solidjs/router\"; const addPost = action(async (formData) =\u003e { const title = formData.get(\"title\"); if (!title || title.length \u003c 2) { return { error: \"Title must be at least 2 characters\", }; } await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const submission = useSubmission(addPost); return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cShow when={submission.result?.error}\u003e \u003cp\u003e{submission.result?.error}\u003c/p\u003e \u003c/Show\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ## Showing optimistic UI To update the UI before the server responds: 1. Import [`useSubmission`](/solid-router/reference/data-apis/use-submission) from `@solidjs/router`. 2. Call `useSubmission` with your action, and use the returned `pending` and `input` properties to display optimistic UI. ```tsx tab title=\"TypeScript\" {20} {29-31} // src/routes/index.tsx import { For, Show } from \"solid-js\"; import { action, useSubmission, query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/blog\"); return await posts.json(); }, \"posts\"); const addPost = action(async (formData: FormData) =\u003e { const title = formData.get(\"title\"); await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); const submission = useSubmission(addPost); return ( \u003cmain\u003e \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e \u003cul\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003cShow when={submission.pending}\u003e {submission.input?.[0]?.get(\"title\")?.toString()} \u003c/Show\u003e \u003c/ul\u003e \u003c/main\u003e ); } ``` ```jsx tab title=\"JavaScript\" {20} {29-31} // src/routes/index.jsx import { For, Show } from \"solid-js\"; import { action, useSubmission, query, createAsync } from \"@solidjs/router\"; const getPosts = query(async () =\u003e { const posts = await fetch(\"https://my-api.com/blog\"); return await posts.json(); }, \"posts\"); const addPost = action(async (formData) =\u003e { const title = formData.get(\"title\"); await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const posts = createAsync(() =\u003e getPosts()); const submission = useSubmission(addPost); return ( \u003cmain\u003e \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e \u003cul\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003cShow when={submission.pending}\u003e {submission.input?.[0]?.get(\"title\")?.toString()} \u003c/Show\u003e \u003c/ul\u003e \u003c/main\u003e ); } ``` :::note[Multiple Submissions] If you want to display optimistic UI for multiple concurrent submissions, you can use the [`useSubmissions`](/solid-router/reference/data-apis/use-submissions) primitive. ::: ## Redirecting To redirect users to a different route within an action: 1. Import [`redirect`](/solid-router/reference/response-helpers/redirect) from `@solidjs/router`. 2. Call `redirect` with the route you want to navigate to, and throw its response. ```tsx tab title=\"TypeScript\" {11} // src/routes/index.tsx import { action, redirect } from \"@solidjs/router\"; const addPost = action(async (formData: FormData) =\u003e { const title = formData.get(\"title\") as string; const response = await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); const post = await response.json(); throw redirect(`/posts/${post.id}`); }, \"addPost\"); export default function Page() { return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ```jsx tab title=\"JavaScript\" {11} // src/routes/index.jsx import { action, redirect } from \"@solidjs/router\"; const addPost = action(async (formData) =\u003e { const title = formData.get(\"title\"); const response = await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); const post = await response.json(); throw redirect(`/posts/${post.id}`); }, \"addPost\"); export default function Page() { return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ## Using a database or an ORM To safely interact with your database or ORM in an action, ensure it's server-only by adding [`\"use server\"`](/solid-start/reference/server/use-server) as the first line of your action: ```tsx tab title=\"TypeScript\" {6} // src/routes/index.tsx import { action } from \"@solidjs/router\"; import { db } from \"~/lib/db\"; const addPost = action(async (formData: FormData) =\u003e { \"use server\"; const title = formData.get(\"title\") as string; await db.insert(\"posts\").values({ title }); }, \"addPost\"); export default function Page() { return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ```jsx tab title=\"JavaScript\" {6} // src/routes/index.jsx import { action } from \"@solidjs/router\"; import { db } from \"~/lib/db\"; const addPost = action(async (formData) =\u003e { \"use server\"; const title = formData.get(\"title\"); await db.insert(\"posts\").values({ title }); }, \"addPost\"); export default function Page() { return ( \u003cform action={addPost} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eAdd Post\u003c/button\u003e \u003c/form\u003e ); } ``` ## Triggering an action programmatically To programmatically trigger an action: 1. Import [`useAction`](/solid-router/reference/data-apis/use-action) from `@solidjs/router`. 2. Call `useAction` with your action, and use the returned function to trigger the action. ```tsx tab title=\"TypeScript\" {14} {18} // src/routes/index.tsx import { createSignal } from \"solid-js\"; import { action, useAction } from \"@solidjs/router\"; const addPost = action(async (title: string) =\u003e { await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const [title, setTitle] = createSignal(\"\"); const addPostAction = useAction(addPost); return ( \u003cdiv\u003e \u003cinput value={title()} onInput={(e) =\u003e setTitle(e.target.value)} /\u003e \u003cbutton onClick={() =\u003e addPostAction(title())}\u003eAdd Post\u003c/button\u003e \u003c/div\u003e ); } ``` ```jsx tab title=\"JavaScript\" {14} {18} // src/routes/index.jsx import { createSignal } from \"solid-js\"; import { action, useAction } from \"@solidjs/router\"; const addPost = action(async (title) =\u003e { await fetch(\"https://my-api.com/posts\", { method: \"POST\", body: JSON.stringify({ title }), }); }, \"addPost\"); export default function Page() { const [title, setTitle] = createSignal(\"\"); const addPostAction = useAction(addPost); return ( \u003cdiv\u003e \u003cinput value={title()} onInput={(e) =\u003e setTitle(e.target.value)} /\u003e \u003cbutton onClick={() =\u003e addPostAction(title())}\u003eAdd Post\u003c/button\u003e \u003c/div\u003e ); } ```", "term_freq": { "##": 9, "---": 2, "//": 18, "///tmp/devour-github-216944658/src/routes/solid-start/guides/data-mutation": 1, "//developer": 2, "//my-api": 18, "/\u003e": 18, "/posts/$": 2, "/solid-router/reference/data-apis/action#notes-of-form-implementation-and-ssr": 1, "/solid-router/reference/data-apis/use-action": 1, "/solid-router/reference/data-apis/use-submission": 4, "/solid-router/reference/data-apis/use-submissions": 1, "/solid-router/reference/response-helpers/redirect": 1, "/solid-start/reference/server/use-server": 1, "11": 2, "13": 2, "14": 6, "15": 2, "17-19": 4, "18": 2, "19": 2, "20": 2, "23-25": 2, "29-31": 2, "4-10": 2, "7-11": 2, "\u003c/button\u003e": 2, "\u003c/div\u003e": 2, "\u003c/for\u003e": 2, "\u003c/form\u003e": 16, "\u003c/li\u003e": 2, "\u003c/main\u003e": 2, "\u003c/p\u003e": 4, "\u003c/show\u003e": 6, "\u003c/ul\u003e": 2, "\u003cbutton": 4, "\u003cbutton\u003eadd": 14, "\u003cdiv\u003e": 2, "\u003cfor": 2, "\u003cform": 16, "\u003cform\u003e": 3, "\u003cinput": 18, "\u003cli\u003e": 2, "\u003cmain\u003e": 2, "\u003cp\u003e": 4, "\u003cshow": 6, "\u003cul\u003e": 2, "=\u003e": 28, "\u003e-": 2, "\u003eadd": 2, "@solidjs/router": 24, "action": 58, "action=": 16, "actions": 3, "add": 3, "adding": 3, "additional": 2, "addpost": 62, "addpostaction": 4, "an": 8, "and": 9, "api": 3, "arguments": 2, "as": 8, "async": 20, "at": 2, "await": 24, "be": 2, "before": 1, "body": 16, "by": 1, "call": 6, "can": 1, "characters": 2, "com/blog": 2, "com/posts": 16, "complete": 1, "concurrent": 1, "const": 58, "createasync": 4, "createsignal": 4, "crud": 2, "data": 6, "data-mutation": 1, "database": 4, "db": 4, "default": 18, "description": 1, "different": 1, "disabled=": 2, "display": 4, "during": 1, "each=": 2, "element": 2, "ensure": 3, "error": 12, "errors": 4, "examples": 2, "execution": 1, "export": 18, "extract": 1, "fetch": 18, "field": 1, "fields": 2, "file": 1, "first": 1, "for": 5, "form": 5, "formdata": 42, "forms": 1, "from": 34, "function": 19, "get": 18, "getposts": 4, "github-document": 1, "guide": 2, "handle": 5, "handling": 3, "has": 1, "how": 1, "https": 20, "id": 2, "if": 4, "import": 34, "in": 5, "information": 1, "input": 4, "insert": 2, "interact": 1, "invalid": 1, "is": 1, "it": 1, "its": 1, "javascript": 9, "json": 20, "jsx": 18, "learn": 1, "least": 2, "length": 2, "line": 1, "logic": 1, "mdx": 1, "message": 2, "method": 18, "method=": 16, "methods": 1, "more": 1, "mozilla": 2, "multiple": 2, "must": 2, "mutate": 1, "mutation": 1, "mutations": 2, "name": 1, "name=": 16, "native": 1, "navigate": 1, "note": 1, "number": 1, "object": 1, "occur": 1, "of": 2, "onclick=": 2, "oninput=": 2, "operations": 1, "optimistic": 4, "or": 2, "org/en-us/docs/web/api/formdata/formdata": 1, "org/en-us/docs/web/html/element/form": 1, "orm": 2, "page": 18, "pass": 2, "passing": 1, "pending": 11, "perform": 1, "post": 43, "post\u003c/button\u003e": 16, "posts": 13, "practical": 1, "primitive": 1, "programmatically": 2, "prop": 1, "properties": 1, "property": 3, "provides": 1, "query": 4, "redirect": 7, "redirecting": 1, "reference": 1, "responds": 1, "response": 5, "result": 5, "return": 23, "returned": 5, "route": 2, "safely": 1, "see": 1, "server": 4, "server-only": 1, "settitle": 4, "show": 6, "showing": 2, "solid-js": 8, "solidstart": 2, "src/routes/index": 18, "string": 8, "stringify": 16, "submission": 27, "submissions": 4, "tab": 18, "tags": 1, "target": 2, "that": 1, "the": 25, "this": 1, "throw": 3, "title": 85, "title=": 18, "to": 23, "tostring": 2, "trigger": 2, "triggering": 1, "tsx": 18, "typescript": 9, "ui": 8, "unique": 1, "update": 1, "updates": 1, "use": 11, "use_cases": 1, "useaction": 6, "user": 1, "userid": 8, "users": 1, "uses": 1, "usesubmission": 24, "usesubmissions": 1, "using": 4, "validate": 2, "validating": 1, "validation": 4, "value": 2, "value=": 2, "values": 2, "version": 1, "want": 2, "when=": 6, "with": 13, "within": 2, "writes": 1, "you": 3, "your": 9, "||": 2, "~/lib/db": 2 }, "length": 1696 }, { "id": "e60574f4ee8f871c506d1d0e", "doc_id": "348b4703edfcd980bc5aba3f", "title": "data-mutation", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/building-your-application/data-mutation.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/data-mutation.json", "content": "--- title: \"Data mutation\" --- Mutating data on a server is a common task in most applications. [Solid Router](/solid-router) provides [actions](/solid-router/concepts/actions) to manage data mutations effectively. SolidStart builds upon the capabilities of actions, extending their scope to provide a comprehensive, full-stack solution for data mutations. This page does not cover the foundational concepts from Solid Router. If you are a beginner, we highly recommend starting with the [actions documentation](/solid-router/concepts/actions). You can also find many practical examples in the [data mutation how-to guide](/solid-start/guides/data-mutation). ## Server functions and actions Server functions allow an action to run exclusively on the server. This enables performing sensitive operations—such as writing to a database or working with sessions—directly within the action. ```tsx import { action, redirect } from \"@solidjs/router\"; import { useSession } from \"vinxi/http\"; import { db } from \"./db\"; const logoutAction = action(async () =\u003e { \"use server\"; const session = await useSession({ password: process.env.SESSION_SECRET as string, name: \"session\", }); if (session.data.sessionId) { await session.clear(); await db.session.delete({ id: sessionId }); } throw redirect(\"/\"); }, \"logout\"); ``` In this example, the entire `logoutAction` runs on the server. It safely accesses the session to retrieve the `sessionId` and performs a database deletion without exposing this logic to the client. The `redirect` then navigates the user back to the home page. ## Single-flight mutations When a piece of data changes on the server, the new data needs to be fetched so the UI doesn't fall out of sync. Traditionally, this is done in two separate HTTP requests: one to update the data, and a second to fetch the new data. Single-flight mutations are a unique feature of SolidStart that handles this pattern in a single request. This is enabled when two requirements are met: 1. The action that updates the data must execute on the server using server functions. 2. The data that the action updated must be preloaded. If the action performs a redirect, preloading needs to happen on the destination page. ```tsx title=\"src/routes/products/[id].tsx\" import { action, query, createAsync, type RouteDefinition, type RouteSectionProps, } from \"@solidjs/router\"; import { db } from \"./db\"; const updateProductAction = action(async (id: string, formData: FormData) =\u003e { \"use server\"; const name = formData.get(\"name\")?.toString(); await db.products.update(id, { name }); }, \"updateProduct\"); const getProductQuery = query(async (id: string) =\u003e { \"use server\"; return await db.products.get(id); }, \"product\"); export const route = { preload: ({ params }) =\u003e getProductQuery(params.id as string), } satisfies RouteDefinition; export default function ProductDetail(props: RouteSectionProps) { const product = createAsync(() =\u003e getProductQuery(props.params.id as string)); return ( \u003cdiv\u003e \u003cp\u003eCurrent name: {props.data.product?.name}\u003c/p\u003e \u003cform action={updateProductAction.with(props.params.id as string)} method=\"post\" \u003e \u003cinput name=\"name\" placeholder=\"New name\" /\u003e \u003cbutton\u003eSave\u003c/button\u003e \u003c/form\u003e \u003c/div\u003e ); } ``` In this example, `updateProductAction` updates the product within a server function, and `getProductQuery` is responsible for fetching the product data. Note that `getProductQuery` is preloaded on the route. When a user submits the form, a single POST request is sent to the server. After the action completes, `getProductQuery` is automatically revalidated. Because it's preloaded, SolidStart can trigger the revalidation on the server and stream the result back to the client in the same response.", "term_freq": { "##": 2, "---": 2, "//github": 1, "/\u003e": 1, "/db": 2, "/solid-router": 1, "/solid-router/concepts/actions": 2, "/solid-start/guides/data-mutation": 1, "\u003c/div\u003e": 1, "\u003c/form\u003e": 1, "\u003c/p\u003e": 1, "\u003cbutton\u003esave\u003c/button\u003e": 1, "\u003cdiv\u003e": 1, "\u003cform": 1, "\u003cinput": 1, "\u003cp\u003ecurrent": 1, "=\u003e": 5, "@solidjs/router": 2, "accesses": 1, "action": 10, "action=": 1, "actions": 4, "after": 1, "allow": 1, "also": 1, "an": 1, "and": 5, "applications": 1, "are": 3, "as": 5, "async": 3, "automatically": 1, "await": 5, "back": 2, "be": 2, "because": 1, "beginner": 1, "builds": 1, "can": 2, "capabilities": 1, "changes": 1, "clear": 1, "client": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/building-your-application/data-mutation": 1, "common": 1, "completes": 1, "comprehensive": 1, "concepts": 1, "const": 7, "cover": 1, "createasync": 2, "data": 14, "data-mutation": 1, "database": 2, "db": 5, "default": 1, "delete": 1, "deletion": 1, "destination": 1, "documentation": 1, "does": 1, "doesn": 1, "done": 1, "effectively": 1, "enabled": 1, "enables": 1, "entire": 1, "env": 1, "example": 2, "examples": 1, "exclusively": 1, "execute": 1, "export": 2, "exposing": 1, "extending": 1, "fall": 1, "feature": 1, "fetch": 1, "fetched": 1, "fetching": 1, "find": 1, "for": 2, "form": 1, "formdata": 3, "foundational": 1, "from": 6, "full-stack": 1, "function": 2, "functions": 3, "get": 2, "getproductquery": 6, "github-document": 1, "guide": 1, "handles": 1, "happen": 1, "highly": 1, "home": 1, "how-to": 1, "http": 1, "https": 1, "id": 9, "if": 3, "import": 5, "in": 7, "is": 7, "it": 2, "logic": 1, "logout": 1, "logoutaction": 2, "manage": 1, "many": 1, "mdx": 1, "met": 1, "method=": 1, "most": 1, "must": 2, "mutating": 1, "mutation": 2, "mutations": 4, "name": 8, "name=": 1, "navigates": 1, "needs": 2, "new": 3, "not": 1, "note": 1, "of": 4, "on": 8, "one": 1, "operations—such": 1, "or": 1, "out": 1, "page": 3, "params": 4, "password": 1, "pattern": 1, "performing": 1, "performs": 2, "piece": 1, "placeholder=": 1, "post": 2, "practical": 1, "preload": 1, "preloaded": 3, "preloading": 1, "process": 1, "product": 5, "productdetail": 1, "products": 2, "props": 4, "provide": 1, "provides": 1, "query": 2, "recommend": 1, "redirect": 4, "request": 2, "requests": 1, "requirements": 1, "response": 1, "responsible": 1, "result": 1, "retrieve": 1, "return": 2, "revalidated": 1, "revalidation": 1, "route": 2, "routedefinition": 2, "router": 2, "routesectionprops": 2, "run": 1, "runs": 1, "safely": 1, "same": 1, "satisfies": 1, "scope": 1, "second": 1, "sensitive": 1, "sent": 1, "separate": 1, "server": 14, "session": 6, "session_secret": 1, "sessionid": 3, "sessions—directly": 1, "single": 2, "single-flight": 2, "so": 1, "solid": 2, "solidstart": 3, "solution": 1, "src/routes/products/": 1, "starting": 1, "stream": 1, "string": 6, "submits": 1, "sync": 1, "task": 1, "that": 4, "the": 37, "their": 1, "then": 1, "this": 8, "throw": 1, "title": 1, "title=": 1, "to": 13, "tostring": 1, "traditionally": 1, "trigger": 1, "tsx": 3, "two": 2, "type": 2, "ui": 1, "unique": 1, "update": 2, "updated": 1, "updateproduct": 1, "updateproductaction": 3, "updates": 2, "upon": 1, "use": 3, "user": 2, "usesession": 2, "using": 1, "vinxi/http": 1, "we": 1, "when": 3, "with": 3, "within": 2, "without": 1, "working": 1, "writing": 1, "you": 2 }, "length": 504 }, { "id": "d9985bbfc3cf38d19be0da29", "doc_id": "c2d0104c436868152a54c3c4", "title": "define-config", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/config/define-config.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/define-config.json", "content": "--- title: defineConfig use_cases: \u003e- app configuration, deployment setup, build optimization, platform targeting, vite plugins, nitro presets tags: - configuration - vite - nitro - deployment - build - plugins version: '1.0' description: \u003e- Configure SolidStart apps with defineConfig. Set up Vite plugins, Nitro presets, and deployment targets for any platform. --- The `defineConfig` helper is from `@solidjs/start/config` and is used within [`app.config.ts`](/solid-start/reference/entrypoints/app-config). It takes a configuration object with settings for SolidStart, Vite, and Nitro. ## Configuring Vite SolidStart supports most Vite options, including plugins via the `vite` option: ```tsx import { defineConfig } from \"@solidjs/start/config\"; export default defineConfig({ vite: { // vite options plugins: [], }, }); ``` The `vite` option can also be a function that can be customized for each Vinxi router. In SolidStart, 3 routers are used: - `server` - server-side routing - `client` - for the client-side routing - `server-function` - server functions. ```tsx import { defineConfig } from \"@solidjs/start/config\"; export default defineConfig({ vite({ router }) { if (router === \"server\") { } else if (router === \"client\") { } else if (router === \"server-function\") { } return { plugins: [] }; }, }); ``` ## Configuring Nitro SolidStart uses [Nitro](https://nitro.build/) to run on a number of platforms. The `server` option exposes some Nitro options including the build and deployment presets. An overview of all available presets is available in the [Deploy section of the Nitro documentation](https://nitro.build/deploy). Some common ones include: **Servers** - [Node.js Server](https://nitro.build/deploy/runtimes/node#handler-advanced) (`node`) (Default) - [Deno Server](https://nitro.build/deploy/runtimes/deno) (`deno_server`) - [Bun Server](https://nitro.build/deploy/runtimes/bun) (`bun`) **Providers** - [Netlify Functions and Edge](https://nitro.build/deploy/providers/netlify) (`netlify`, `netlify-edge`) - [Vercel Functions and Edge](https://nitro.build/deploy/providers/vercel) (`vercel`, `vercel-edge`) - [AWS Lambda and Lambda@Edge](https://nitro.build/deploy/providers/aws) (`aws_lambda`) - [Cloudflare Workers and Pages](https://nitro.build/deploy/providers/cloudflare) (`cloudflare`, `cloudflare_pages`, `cloudflare_module`) - [Deno Deploy](https://nitro.build/deploy/providers/deno-deploy) (`deno_deploy`) **Static site generation** - [Route pre-rendering](/solid-start/building-your-application/route-prerendering) By passing no arguments, the default will be the Node preset. Other presets may be automatically detected by the provider, however, if not, they must be added to the configuration within the `server-preset` option. For example, using Netlify Edge would look like the following: ```tsx import { defineConfig } from \"@solidjs/start/config\"; export default defineConfig({ server: { preset: \"netlify_edge\", }, }); ``` #### Special note SolidStart uses async local storage. Netlify, Vercel, and Deno support this out of the box but if you're using Cloudflare you will need to specify the following: ```js import { defineConfig } from \"@solidjs/start/config\"; export default defineConfig({ server: { preset: \"cloudflare_module\", rollupConfig: { external: [\"__STATIC_CONTENT_MANIFEST\", \"node:async_hooks\"], }, }, }); ``` Within `wrangler.toml` you will need to enable node compatibility: ``` compatibility_flags = [ \"nodejs_compat\" ] ``` ## Parameters | Property | Type | Default | Description | | -------------------- | ------------------------------------------ | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ssr | boolean | true | Toggle between client and server rendering. | | solid | object | | Configuration object for [vite-plugin-solid](https://github.com/solidjs/vite-plugin-solid) | | extensions | string[] | [\"js\", \"jsx\", \"ts\", \"tsx\"] | Array of file extensions to be treated as routes. | | server | object | | Nitro server config options | | appRoot | string | \"./src\" | The path to the root of the application. | | routeDir | string | \"./routes\" | The path to where the routes are located. | | middleware | string | | The path to an optional [middleware](/solid-start/advanced/middleware) file. | | devOverlay | boolean | true | Toggle the dev overlay. | | experimental.islands | boolean | false | Enable \"islands\" mode. | | vite | `ViteConfig` or `({ router })=\u003eViteConfig` | | [Vite config object](https://vitejs.dev/config/shared-options.html). Can be configured for each `router` which has the string value \"server\", \"client\" or \"server-function\"` |", "term_freq": { "##": 3, "####": 1, "**providers**": 1, "**servers**": 1, "**static": 1, "---": 2, "--------------------": 1, "--------------------------": 1, "------------------------------------------": 1, "----------------------------------------------------------------------------------------------------------------------------------------------------------------------------": 1, "//": 1, "//github": 2, "//nitro": 10, "//vitejs": 1, "/routes": 1, "/solid-start/advanced/middleware": 1, "/solid-start/building-your-application/route-prerendering": 1, "/solid-start/reference/entrypoints/app-config": 1, "/src": 1, "===": 3, "=\u003eviteconfig": 1, "\u003e-": 2, "@solidjs/start/config": 5, "__static_content_manifest": 1, "added": 1, "all": 1, "also": 1, "an": 2, "and": 10, "any": 1, "app": 2, "application": 1, "approot": 1, "apps": 1, "are": 2, "arguments": 1, "array": 1, "as": 1, "async": 1, "async_hooks": 1, "automatically": 1, "available": 2, "aws": 1, "aws_lambda": 1, "be": 7, "between": 1, "boolean": 3, "box": 1, "build": 3, "build/": 1, "build/deploy": 1, "build/deploy/providers/aws": 1, "build/deploy/providers/cloudflare": 1, "build/deploy/providers/deno-deploy": 1, "build/deploy/providers/netlify": 1, "build/deploy/providers/vercel": 1, "build/deploy/runtimes/bun": 1, "build/deploy/runtimes/deno": 1, "build/deploy/runtimes/node#handler-advanced": 1, "bun": 2, "but": 1, "by": 2, "can": 3, "client": 4, "client-side": 1, "cloudflare": 3, "cloudflare_module": 2, "cloudflare_pages": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/config/define-config": 1, "com/solidjs/vite-plugin-solid": 1, "common": 1, "compatibility": 1, "compatibility_flags": 1, "config": 3, "configuration": 5, "configure": 1, "configured": 1, "configuring": 2, "customized": 1, "default": 7, "define-config": 1, "defineconfig": 11, "deno": 3, "deno_deploy": 1, "deno_server": 1, "deploy": 2, "deployment": 4, "description": 2, "detected": 1, "dev": 1, "dev/config/shared-options": 1, "devoverlay": 1, "documentation": 1, "each": 2, "edge": 3, "else": 2, "enable": 2, "example": 1, "experimental": 1, "export": 4, "exposes": 1, "extensions": 2, "external": 1, "false": 1, "file": 2, "following": 2, "for": 7, "from": 5, "function": 1, "functions": 3, "generation**": 1, "github-document": 1, "has": 1, "helper": 1, "however": 1, "html": 1, "https": 13, "if": 5, "import": 4, "in": 2, "include": 1, "including": 2, "is": 3, "islands": 2, "it": 1, "js": 3, "jsx": 1, "lambda": 1, "lambda@edge": 1, "like": 1, "local": 1, "located": 1, "look": 1, "may": 1, "mdx": 1, "middleware": 2, "mode": 1, "most": 1, "must": 1, "need": 2, "netlify": 4, "netlify-edge": 1, "netlify_edge": 1, "nitro": 9, "no": 1, "node": 5, "nodejs_compat": 1, "not": 1, "note": 1, "number": 1, "object": 5, "of": 6, "on": 1, "ones": 1, "optimization": 1, "option": 4, "optional": 1, "options": 4, "or": 2, "other": 1, "out": 1, "overlay": 1, "overview": 1, "pages": 1, "parameters": 1, "passing": 1, "path": 3, "platform": 2, "platforms": 1, "plugins": 6, "pre-rendering": 1, "preset": 3, "presets": 5, "property": 1, "provider": 1, "re": 1, "rendering": 1, "return": 1, "rollupconfig": 1, "root": 1, "route": 1, "routedir": 1, "router": 7, "routers": 1, "routes": 2, "routing": 2, "run": 1, "section": 1, "server": 13, "server-function": 3, "server-preset": 1, "server-side": 1, "set": 1, "settings": 1, "setup": 1, "site": 1, "solid": 1, "solidstart": 6, "some": 2, "special": 1, "specify": 1, "ssr": 1, "storage": 1, "string": 5, "support": 1, "supports": 1, "tags": 1, "takes": 1, "targeting": 1, "targets": 1, "that": 1, "the": 24, "they": 1, "this": 1, "title": 1, "to": 8, "toggle": 2, "toml": 1, "treated": 1, "true": 2, "ts": 2, "tsx": 4, "type": 1, "up": 1, "use_cases": 1, "used": 2, "uses": 2, "using": 2, "value": 1, "vercel": 3, "vercel-edge": 1, "version": 1, "via": 1, "vinxi": 1, "vite": 13, "vite-plugin-solid": 1, "viteconfig": 1, "where": 1, "which": 1, "will": 3, "with": 2, "within": 3, "workers": 1, "would": 1, "wrangler": 1, "you": 3 }, "length": 517 }, { "id": "8a455e316f303670881a6684", "doc_id": "00de8ca379b716434930b69e", "title": "deploying-your-app", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deploying-your-app.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/deploying-your-app.json", "content": "--- title: Deploy your app order: 9 use_cases: 'production deployment, hosting, going live, app publishing, cloud deployment' tags: - deployment - hosting - production - cloud - publishing version: '1.0' description: \u003e- Deploy your Solid application to popular hosting platforms including Cloudflare, Vercel, Netlify, AWS, and more with guides. --- Are you ready to deploy your Solid application? Follow our guides for different deployment services. \u003cdiv class=\"flex flex-col md:grid md:grid-cols-4 md:grid-rows-2 gap-3\"\u003e \u003cImageLinks title=\"Cloudflare\" href=\"/guides/deployment-options/cloudflare\" logo=\"cloudflare\" /\u003e \u003cImageLinks title=\"Firebase\" href=\"/guides/deployment-options/firebase\" logo=\"firebase\" /\u003e \u003cImageLinks title=\"AWS with Flightcontrol\" href=\"/guides/deployment-options/aws-via-flightcontrol\" logo=\"flightControl\" /\u003e \u003cImageLinks title=\"AWS with SST\" href=\"/guides/deployment-options/aws-via-sst\" logo=\"sst\" /\u003e \u003cImageLinks title=\"Netlify\" href=\"/guides/deployment-options/netlify\" logo=\"netlify\" /\u003e \u003cImageLinks title=\"Railway\" href=\"/guides/deployment-options/railway\" logo=\"railway\" /\u003e \u003cImageLinks title=\"Vercel\" href=\"/guides/deployment-options/vercel\" logo=\"vercel\" /\u003e \u003cImageLinks title=\"Stormkit\" href=\"/guides/deployment-options/stormkit\" logo=\"stormkit\" /\u003e \u003cImageLinks title=\"Zerops\" href=\"/guides/deployment-options/zerops\" logo=\"zerops\" /\u003e \u003c/div\u003e", "term_freq": { "---": 2, "//github": 1, "/\u003e": 9, "/guides/deployment-options/aws-via-flightcontrol": 1, "/guides/deployment-options/aws-via-sst": 1, "/guides/deployment-options/cloudflare": 1, "/guides/deployment-options/firebase": 1, "/guides/deployment-options/netlify": 1, "/guides/deployment-options/railway": 1, "/guides/deployment-options/stormkit": 1, "/guides/deployment-options/vercel": 1, "/guides/deployment-options/zerops": 1, "\u003c/div\u003e": 1, "\u003cdiv": 1, "\u003cimagelinks": 9, "\u003e-": 1, "and": 1, "app": 2, "application": 2, "are": 1, "aws": 3, "class=": 1, "cloud": 2, "cloudflare": 3, "com/solidjs/solid-docs/blob/head/src/routes/guides/deploying-your-app": 1, "deploy": 3, "deploying-your-app": 1, "deployment": 4, "description": 1, "different": 1, "firebase": 2, "flex": 1, "flex-col": 1, "flightcontrol": 2, "follow": 1, "for": 1, "gap-3": 1, "github-document": 1, "going": 1, "grid": 1, "grid-cols-4": 1, "grid-rows-2": 1, "guides": 2, "hosting": 3, "href=": 9, "https": 1, "including": 1, "live": 1, "logo=": 9, "md": 3, "mdx": 1, "more": 1, "netlify": 3, "order": 1, "our": 1, "platforms": 1, "popular": 1, "production": 2, "publishing": 2, "railway": 2, "ready": 1, "services": 1, "solid": 2, "sst": 2, "stormkit": 2, "tags": 1, "title": 1, "title=": 9, "to": 2, "use_cases": 1, "vercel": 3, "version": 1, "with": 3, "you": 1, "your": 3, "zerops": 2 }, "length": 152 }, { "id": "c196cc269d3e81afe1b28af4", "doc_id": "ad9929e18eff55167667493d", "title": "derived-signals", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/derived-values/derived-signals.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/derived-signals.json", "content": "--- title: Derived signals order: 1 use_cases: \u003e- computed values, reactive calculations, dependent state, dynamic values from signals tags: - signals - reactivity - derived - computed - state version: '1.0' description: \u003e- Create reactive derived values that automatically update when their dependencies change using Solid's derived signals. --- Derived signals are functions that rely on one or more [signals](/concepts/signals) to produce a value. These functions are not executed immediately, but instead are only called when the values they rely on are changed. When the underlying signal is changed, the function will be called again to produce a new value. ```js const double = () =\u003e count() * 2; ``` In the above example, the `double` function relies on the `count` signal to produce a value. When the `count` signal is changed, the `double` function will be called again to produce a new value. Similarly you can create a derived signal that relies on a store value because stores use signals under the hood. To learn more about how stores work, [you can visit the stores section](/concepts/stores). ```js const fullName = () =\u003e store.firstName + ' ' + store.lastName; ``` These dependent functions gain reactivity from the signal they access, ensuring that changes in the underlying data propagate throughout your application. It is important to note that these functions do not store a value themselves; instead, they can update any effects or components that depend on them. If included within a component's body, these derived signals will trigger an update when necessary. While you can create derived values in this manner, Solid created the [`createMemo`](/reference/basic-reactivity/create-memo) primitive. To dive deeper into how memos work, [check out the memos section](/concepts/derived-values/memos).", "term_freq": { "---": 2, "//github": 1, "/concepts/derived-values/memos": 1, "/concepts/signals": 1, "/concepts/stores": 1, "/reference/basic-reactivity/create-memo": 1, "=\u003e": 2, "\u003e-": 2, "about": 1, "above": 1, "access": 1, "again": 2, "an": 1, "any": 1, "application": 1, "are": 4, "automatically": 1, "be": 2, "because": 1, "body": 1, "but": 1, "calculations": 1, "called": 3, "can": 4, "change": 1, "changed": 3, "changes": 1, "check": 1, "com/solidjs/solid-docs/blob/head/src/routes/concepts/derived-values/derived-signals": 1, "component": 1, "components": 1, "computed": 2, "const": 2, "count": 3, "create": 3, "created": 1, "creatememo": 1, "data": 1, "deeper": 1, "depend": 1, "dependencies": 1, "dependent": 2, "derived": 8, "derived-signals": 1, "description": 1, "dive": 1, "do": 1, "double": 3, "dynamic": 1, "effects": 1, "ensuring": 1, "example": 1, "executed": 1, "firstname": 1, "from": 2, "fullname": 1, "function": 3, "functions": 4, "gain": 1, "github-document": 1, "hood": 1, "how": 2, "https": 1, "if": 1, "immediately": 1, "important": 1, "in": 3, "included": 1, "instead": 2, "into": 1, "is": 3, "it": 1, "js": 2, "lastname": 1, "learn": 1, "manner": 1, "mdx": 1, "memos": 2, "more": 2, "necessary": 1, "new": 2, "not": 2, "note": 1, "on": 5, "one": 1, "only": 1, "or": 2, "order": 1, "out": 1, "primitive": 1, "produce": 4, "propagate": 1, "reactive": 2, "reactivity": 2, "relies": 2, "rely": 2, "section": 2, "signal": 5, "signals": 8, "similarly": 1, "solid": 2, "state": 2, "store": 4, "stores": 3, "tags": 1, "that": 6, "the": 14, "their": 1, "them": 1, "themselves": 1, "these": 4, "they": 3, "this": 1, "throughout": 1, "title": 1, "to": 7, "trigger": 1, "under": 1, "underlying": 2, "update": 3, "use": 1, "use_cases": 1, "using": 1, "value": 6, "values": 5, "version": 1, "visit": 1, "when": 5, "while": 1, "will": 3, "within": 1, "work": 2, "you": 3, "your": 1 }, "length": 263 }, { "id": "1ac819886a9ec46f3d19f999", "doc_id": "18db1098eb848d0f6cd2b67c", "title": "dev", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/rendering/dev.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/dev.json", "content": "--- title: DEV use_cases: \u003e- development debugging, build optimization, library development, conditional code, dev-only features tags: - development - debugging - builds - optimization - conditional version: '1.0' description: \u003e- Access development-only features in SolidJS with the DEV export. Enable additional checks and debugging tools that are removed in production. --- ```ts import { DEV } from \"solid-js\" const DEV: object | undefined ``` On the client, Solid provides (via [conditional exports](https://nodejs.org/api/packages.html#conditional-exports)) different builds depending on whether the **development** condition is set. Development mode provides some additional checking — e.g. detecting accidental use of multiple instances of Solid — which are removed in production builds. If you want code to run only in development mode (most useful in libraries), you can check whether the **DEV** export is defined. Note that it is always defined on the server, so you may want to combine with [isServer](/reference/rendering/is-server): ```ts import { DEV } from \"solid-js\" import { isServer } from \"solid-js/web\" if (DEV \u0026\u0026 !isServer) { console.log(...); } ```", "term_freq": { "\u0026\u0026": 1, "**dev**": 1, "**development**": 1, "---": 2, "//github": 1, "//nodejs": 1, "/reference/rendering/is-server": 1, "\u003e-": 2, "access": 1, "accidental": 1, "additional": 2, "always": 1, "and": 1, "are": 2, "build": 1, "builds": 3, "can": 1, "check": 1, "checking": 1, "checks": 1, "client": 1, "code": 2, "com/solidjs/solid-docs/blob/head/src/routes/reference/rendering/dev": 1, "combine": 1, "condition": 1, "conditional": 3, "console": 1, "const": 1, "debugging": 3, "defined": 2, "depending": 1, "description": 1, "detecting": 1, "dev": 7, "dev-only": 1, "development": 5, "development-only": 1, "different": 1, "enable": 1, "export": 2, "exports": 1, "features": 2, "from": 3, "github-document": 1, "html#conditional-exports": 1, "https": 2, "if": 2, "import": 3, "in": 5, "instances": 1, "is": 3, "isserver": 3, "it": 1, "libraries": 1, "library": 1, "log": 1, "may": 1, "mdx": 1, "mode": 2, "most": 1, "multiple": 1, "note": 1, "object": 1, "of": 2, "on": 3, "only": 1, "optimization": 2, "org/api/packages": 1, "production": 2, "provides": 2, "removed": 2, "run": 1, "server": 1, "set": 1, "so": 1, "solid": 2, "solid-js": 2, "solid-js/web": 1, "solidjs": 1, "some": 1, "tags": 1, "that": 2, "the": 5, "title": 1, "to": 2, "tools": 1, "ts": 2, "undefined": 1, "use": 1, "use_cases": 1, "useful": 1, "version": 1, "via": 1, "want": 2, "whether": 2, "which": 1, "with": 2, "you": 3, "—": 2 }, "length": 160 }, { "id": "55ccebec99b538320daa6f38", "doc_id": "5b62fc3b95a6d1fcf0942f13", "title": "Docker Compose - Ask me about Docker", "type": "markdown", "source": "local", "path": "devour_data/docs/docker_compose_-_ask_me_about_docker_1.md", "content": "# Docker Compose - Ask me about Docker ## 📋 Document Information | Property | Value | |----------|-------| | **Source** | https://docs.docker.com/compose | | **Type** | `docker-section` | | **Scraped** | 2026-02-19 12:18:51 | | **Page_title** | Docker Compose | | **Doc_url** | https://docs.docker.com/compose | | **Doc_type** | docker-section | ## 📑 Table of Contents - [Ask me about Docker](#ask-me-about-docker) ## 📚 Content # Ask me about Docker Get instant answers to your Docker questions. I can help with commands, concepts, troubleshooting, and best practices. Try asking: How do Docker Hardened Images work? What is MCP Toolkit? How do I create an org? --- *Document scraped by [Devour](https://github.com/yourorg/devour) on 2026-02-19 12:18:51* *Source: [https://docs.docker.com/compose](https://docs.docker.com/compose)*", "term_freq": { "##": 3, "#ask-me-about-docker": 1, "**doc_type**": 1, "**doc_url**": 1, "**page_title**": 1, "**scraped**": 1, "**source**": 1, "**type**": 1, "*document": 1, "*source": 1, "---": 1, "//docs": 4, "//github": 1, "12": 2, "18": 2, "2026-02-19": 2, "51": 1, "51*": 1, "about": 4, "an": 1, "and": 1, "answers": 1, "ask": 4, "asking": 1, "best": 1, "by": 1, "can": 1, "com/compose": 4, "com/yourorg/devour": 1, "commands": 1, "compose": 3, "concepts": 1, "content": 1, "contents": 1, "create": 1, "devour": 1, "do": 2, "docker": 13, "docker-section": 2, "document": 1, "get": 1, "hardened": 1, "help": 1, "how": 2, "https": 5, "images": 1, "information": 1, "instant": 1, "is": 1, "markdown": 1, "mcp": 1, "me": 4, "of": 1, "on": 1, "org": 1, "practices": 1, "property": 1, "questions": 1, "scraped": 1, "table": 1, "to": 1, "toolkit": 1, "troubleshooting": 1, "try": 1, "value": 1, "what": 1, "with": 1, "work": 1, "your": 1, "|----------|-------|": 1, "📋": 1, "📑": 1, "📚": 1 }, "length": 114 }, { "id": "08dbb5481466cfb9981249b2", "doc_id": "cec5243be0dbff19b3bfe39f", "title": "Docker Compose - Browse common FAQs", "type": "markdown", "source": "local", "path": "devour_data/docs/docker_compose_-_browse_common_faqs_10.md", "content": "# Docker Compose - Browse common FAQs ## 📋 Document Information | Property | Value | |----------|-------| | **Source** | https://docs.docker.com/compose | | **Type** | `docker-section` | | **Scraped** | 2026-02-19 12:18:51 | | **Doc_url** | https://docs.docker.com/compose | | **Doc_type** | docker-section | | **Page_title** | Docker Compose | ## 📑 Table of Contents - [Browse common FAQs](#browse-common-faqs) ## 📚 Content # Browse common FAQs --- *Document scraped by [Devour](https://github.com/yourorg/devour) on 2026-02-19 12:18:51* *Source: [https://docs.docker.com/compose](https://docs.docker.com/compose)*", "term_freq": { "##": 3, "#browse-common-faqs": 1, "**doc_type**": 1, "**doc_url**": 1, "**page_title**": 1, "**scraped**": 1, "**source**": 1, "**type**": 1, "*document": 1, "*source": 1, "---": 1, "//docs": 4, "//github": 1, "12": 2, "18": 2, "2026-02-19": 2, "51": 1, "51*": 1, "browse": 4, "by": 1, "com/compose": 4, "com/yourorg/devour": 1, "common": 4, "compose": 3, "content": 1, "contents": 1, "devour": 1, "docker": 7, "docker-section": 2, "document": 1, "faqs": 4, "https": 5, "information": 1, "markdown": 1, "of": 1, "on": 1, "property": 1, "scraped": 1, "table": 1, "value": 1, "|----------|-------|": 1, "📋": 1, "📑": 1, "📚": 1 }, "length": 77 }, { "id": "3de614d4db2c07e1677a3e39", "doc_id": "67cefce9073ed67e0032acc9", "title": "Docker Compose - Docker Compose", "type": "markdown", "source": "local", "path": "devour_data/docs/docker_compose_-_docker_compose_2.md", "content": "# Docker Compose - Docker Compose ## 📋 Document Information | Property | Value | |----------|-------| | **Source** | https://docs.docker.com/compose | | **Type** | `docker-section` | | **Scraped** | 2026-02-19 12:18:51 | | **Doc_type** | docker-section | | **Page_title** | Docker Compose | | **Doc_url** | https://docs.docker.com/compose | ## 📑 Table of Contents - [Docker Compose](#docker-compose) ## 📚 Content # Docker Compose Copy as Markdown Open Markdown Ask Docs AI Claude Open in Claudefunction getCurrentPlaintextUrl(){const e=window.location.href.split(\"#\")[0].replace(/\\/$/,\"\");return`${e}.md`}function copyMarkdown(){fetch(getCurrentPlaintextUrl()).then(e=\u003ee.text()).then(e=\u003e{navigator.clipboard.writeText(e).then(()=\u003e{const e=document.querySelector('[data-heap-id=\"copy-markdown-button\"]');if(!e)return;const t=e.querySelectorAll(\".icon-svg\"),n=t[0],s=t[1];n.classList.add(\"hidden\"),s.classList.remove(\"hidden\"),setTimeout(()=\u003e{n.classList.remove(\"hidden\"),s.classList.add(\"hidden\")},2e3)})}).catch(e=\u003e{console.error(\"Error copying markdown:\",e)})}function viewPlainText(){window.open(getCurrentPlaintextUrl(),\"_blank\")}function openInDocsAI(){const e=document.querySelector(\".open-kapa-widget\");e?e.click():alert(\"Couldn't find Docs AI.\")}function openInClaude(){const e=getCurrentPlaintextUrl(),t=`Read ${e} so I can ask questions about it.`,n=encodeURIComponent(t),s=`[https://claude.ai/new?q=${n}`;window.open(s,\"_blank\")](https://claude.ai/new?q=${n}`;window.open(s,\"_blank\"))} --- *Document scraped by [Devour](https://github.com/yourorg/devour) on 2026-02-19 12:18:51* *Source: [https://docs.docker.com/compose](https://docs.docker.com/compose)*", "term_freq": { "##": 3, "#docker-compose": 1, "**doc_type**": 1, "**doc_url**": 1, "**page_title**": 1, "**scraped**": 1, "**source**": 1, "**type**": 1, "*document": 1, "*source": 1, "---": 1, "//claude": 2, "//docs": 4, "//github": 1, "/\\/$/": 1, "12": 2, "18": 2, "2026-02-19": 2, "2e3": 1, "51": 1, "51*": 1, "=\u003e": 2, "_blank": 3, "about": 1, "add": 2, "ai": 2, "ai/new": 2, "alert": 1, "as": 1, "ask": 2, "by": 1, "can": 1, "catch": 1, "classlist": 4, "claude": 1, "claudefunction": 1, "click": 1, "clipboard": 1, "com/compose": 4, "com/yourorg/devour": 1, "compose": 7, "console": 1, "const": 5, "content": 1, "contents": 1, "copy": 1, "copy-markdown-button": 1, "copying": 1, "copymarkdown": 1, "couldn": 1, "data-heap-id=": 1, "devour": 1, "docker": 11, "docker-section": 2, "docs": 2, "document": 1, "e=\u003e": 2, "e=\u003ee": 1, "e=document": 2, "e=getcurrentplaintexturl": 1, "e=window": 1, "error": 2, "fetch": 1, "find": 1, "function": 4, "getcurrentplaintexturl": 3, "hidden": 4, "href": 1, "https": 7, "icon-svg": 1, "if": 1, "in": 1, "information": 1, "it": 1, "location": 1, "markdown": 4, "md": 1, "n=encodeuricomponent": 1, "n=t": 1, "navigator": 1, "of": 1, "on": 1, "open": 5, "open-kapa-widget": 1, "openinclaude": 1, "openindocsai": 1, "property": 1, "q=$": 2, "queryselector": 2, "queryselectorall": 1, "questions": 1, "read": 1, "remove": 2, "replace": 1, "return": 2, "s=": 1, "s=t": 1, "scraped": 1, "settimeout": 1, "so": 1, "split": 1, "t=": 1, "t=e": 1, "table": 1, "text": 1, "then": 3, "value": 1, "viewplaintext": 1, "window": 3, "writetext": 1, "|----------|-------|": 1, "📋": 1, "📑": 1, "📚": 1 }, "length": 190 }, { "id": "8ba48de8164265441ada1d9f", "doc_id": "fe5ce1110a45532f903c32c4", "title": "Docker Compose - Explore the Compose file reference", "type": "markdown", "source": "local", "path": "devour_data/docs/docker_compose_-_explore_the_compose_file_referenc_8.md", "content": "# Docker Compose - Explore the Compose file reference ## 📋 Document Information | Property | Value | |----------|-------| | **Source** | https://docs.docker.com/compose | | **Type** | `docker-section` | | **Scraped** | 2026-02-19 12:18:51 | | **Page_title** | Docker Compose | | **Doc_url** | https://docs.docker.com/compose | | **Doc_type** | docker-section | ## 📑 Table of Contents - [Explore the Compose file reference](#explore-the-compose-file-reference) ## 📚 Content # Explore the Compose file reference --- *Document scraped by [Devour](https://github.com/yourorg/devour) on 2026-02-19 12:18:51* *Source: [https://docs.docker.com/compose](https://docs.docker.com/compose)*", "term_freq": { "##": 3, "#explore-the-compose-file-reference": 1, "**doc_type**": 1, "**doc_url**": 1, "**page_title**": 1, "**scraped**": 1, "**source**": 1, "**type**": 1, "*document": 1, "*source": 1, "---": 1, "//docs": 4, "//github": 1, "12": 2, "18": 2, "2026-02-19": 2, "51": 1, "51*": 1, "by": 1, "com/compose": 4, "com/yourorg/devour": 1, "compose": 7, "content": 1, "contents": 1, "devour": 1, "docker": 7, "docker-section": 2, "document": 1, "explore": 4, "file": 4, "https": 5, "information": 1, "markdown": 1, "of": 1, "on": 1, "property": 1, "reference": 4, "scraped": 1, "table": 1, "the": 4, "value": 1, "|----------|-------|": 1, "📋": 1, "📑": 1, "📚": 1 }, "length": 85 }, { "id": "2a684e61cfecf4ad7145bd5b", "doc_id": "4ebefa8d4c7d1a547da92285", "title": "Docker Compose - How Compose works", "type": "markdown", "source": "local", "path": "devour_data/docs/docker_compose_-_how_compose_works_4.md", "content": "# Docker Compose - How Compose works ## 📋 Document Information | Property | Value | |----------|-------| | **Source** | https://docs.docker.com/compose | | **Type** | `docker-section` | | **Scraped** | 2026-02-19 12:18:51 | | **Page_title** | Docker Compose | | **Doc_url** | https://docs.docker.com/compose | | **Doc_type** | docker-section | ## 📑 Table of Contents - [How Compose works](#how-compose-works) ## 📚 Content # How Compose works --- *Document scraped by [Devour](https://github.com/yourorg/devour) on 2026-02-19 12:18:51* *Source: [https://docs.docker.com/compose](https://docs.docker.com/compose)*", "term_freq": { "##": 3, "#how-compose-works": 1, "**doc_type**": 1, "**doc_url**": 1, "**page_title**": 1, "**scraped**": 1, "**source**": 1, "**type**": 1, "*document": 1, "*source": 1, "---": 1, "//docs": 4, "//github": 1, "12": 2, "18": 2, "2026-02-19": 2, "51": 1, "51*": 1, "by": 1, "com/compose": 4, "com/yourorg/devour": 1, "compose": 7, "content": 1, "contents": 1, "devour": 1, "docker": 7, "docker-section": 2, "document": 1, "how": 4, "https": 5, "information": 1, "markdown": 1, "of": 1, "on": 1, "property": 1, "scraped": 1, "table": 1, "value": 1, "works": 4, "|----------|-------|": 1, "📋": 1, "📑": 1, "📚": 1 }, "length": 77 }, { "id": "ab1ca5e46e871a76d6d1d477", "doc_id": "5e2dd5a4f0c17ca63257988f", "title": "Docker Compose - Install Compose", "type": "markdown", "source": "local", "path": "devour_data/docs/docker_compose_-_install_compose_5.md", "content": "# Docker Compose - Install Compose ## 📋 Document Information | Property | Value | |----------|-------| | **Source** | https://docs.docker.com/compose | | **Type** | `docker-section` | | **Scraped** | 2026-02-19 12:18:51 | | **Page_title** | Docker Compose | | **Doc_url** | https://docs.docker.com/compose | | **Doc_type** | docker-section | ## 📑 Table of Contents - [Install Compose](#install-compose) ## 📚 Content # Install Compose --- *Document scraped by [Devour](https://github.com/yourorg/devour) on 2026-02-19 12:18:51* *Source: [https://docs.docker.com/compose](https://docs.docker.com/compose)*", "term_freq": { "##": 3, "#install-compose": 1, "**doc_type**": 1, "**doc_url**": 1, "**page_title**": 1, "**scraped**": 1, "**source**": 1, "**type**": 1, "*document": 1, "*source": 1, "---": 1, "//docs": 4, "//github": 1, "12": 2, "18": 2, "2026-02-19": 2, "51": 1, "51*": 1, "by": 1, "com/compose": 4, "com/yourorg/devour": 1, "compose": 7, "content": 1, "contents": 1, "devour": 1, "docker": 7, "docker-section": 2, "document": 1, "https": 5, "information": 1, "install": 4, "markdown": 1, "of": 1, "on": 1, "property": 1, "scraped": 1, "table": 1, "value": 1, "|----------|-------|": 1, "📋": 1, "📑": 1, "📚": 1 }, "length": 73 }, { "id": "99be7fa6a669b0a312e6c705", "doc_id": "8005ba7db2dac5072ae3c411", "title": "Docker Compose - Quickstart", "type": "markdown", "source": "local", "path": "devour_data/docs/docker_compose_-_quickstart_6.md", "content": "# Docker Compose - Quickstart ## 📋 Document Information | Property | Value | |----------|-------| | **Source** | https://docs.docker.com/compose | | **Type** | `docker-section` | | **Scraped** | 2026-02-19 12:18:51 | | **Doc_url** | https://docs.docker.com/compose | | **Doc_type** | docker-section | | **Page_title** | Docker Compose | ## 📑 Table of Contents - [Quickstart](#quickstart) ## 📚 Content # Quickstart --- *Document scraped by [Devour](https://github.com/yourorg/devour) on 2026-02-19 12:18:51* *Source: [https://docs.docker.com/compose](https://docs.docker.com/compose)*", "term_freq": { "##": 3, "#quickstart": 1, "**doc_type**": 1, "**doc_url**": 1, "**page_title**": 1, "**scraped**": 1, "**source**": 1, "**type**": 1, "*document": 1, "*source": 1, "---": 1, "//docs": 4, "//github": 1, "12": 2, "18": 2, "2026-02-19": 2, "51": 1, "51*": 1, "by": 1, "com/compose": 4, "com/yourorg/devour": 1, "compose": 3, "content": 1, "contents": 1, "devour": 1, "docker": 7, "docker-section": 2, "document": 1, "https": 5, "information": 1, "markdown": 1, "of": 1, "on": 1, "property": 1, "quickstart": 4, "scraped": 1, "table": 1, "value": 1, "|----------|-------|": 1, "📋": 1, "📑": 1, "📚": 1 }, "length": 69 }, { "id": "0a024a94704eae67cb602a2b", "doc_id": "31cf2ca94d164b82f4418a49", "title": "Docker Compose - Use Compose Bridge", "type": "markdown", "source": "local", "path": "devour_data/docs/docker_compose_-_use_compose_bridge_9.md", "content": "# Docker Compose - Use Compose Bridge ## 📋 Document Information | Property | Value | |----------|-------| | **Source** | https://docs.docker.com/compose | | **Type** | `docker-section` | | **Scraped** | 2026-02-19 12:18:51 | | **Page_title** | Docker Compose | | **Doc_url** | https://docs.docker.com/compose | | **Doc_type** | docker-section | ## 📑 Table of Contents - [Use Compose Bridge](#use-compose-bridge) ## 📚 Content # Use Compose Bridge --- *Document scraped by [Devour](https://github.com/yourorg/devour) on 2026-02-19 12:18:51* *Source: [https://docs.docker.com/compose](https://docs.docker.com/compose)*", "term_freq": { "##": 3, "#use-compose-bridge": 1, "**doc_type**": 1, "**doc_url**": 1, "**page_title**": 1, "**scraped**": 1, "**source**": 1, "**type**": 1, "*document": 1, "*source": 1, "---": 1, "//docs": 4, "//github": 1, "12": 2, "18": 2, "2026-02-19": 2, "51": 1, "51*": 1, "bridge": 4, "by": 1, "com/compose": 4, "com/yourorg/devour": 1, "compose": 7, "content": 1, "contents": 1, "devour": 1, "docker": 7, "docker-section": 2, "document": 1, "https": 5, "information": 1, "markdown": 1, "of": 1, "on": 1, "property": 1, "scraped": 1, "table": 1, "use": 4, "value": 1, "|----------|-------|": 1, "📋": 1, "📑": 1, "📚": 1 }, "length": 77 }, { "id": "9042ba4a3b6e496779244288", "doc_id": "20c4df4264dad4a5e7067c98", "title": "Docker Compose - View the release notes", "type": "markdown", "source": "local", "path": "devour_data/docs/docker_compose_-_view_the_release_notes_7.md", "content": "# Docker Compose - View the release notes ## 📋 Document Information | Property | Value | |----------|-------| | **Source** | https://docs.docker.com/compose | | **Type** | `docker-section` | | **Scraped** | 2026-02-19 12:18:51 | | **Doc_type** | docker-section | | **Page_title** | Docker Compose | | **Doc_url** | https://docs.docker.com/compose | ## 📑 Table of Contents - [View the release notes](#view-the-release-notes) ## 📚 Content # View the release notes --- *Document scraped by [Devour](https://github.com/yourorg/devour) on 2026-02-19 12:18:51* *Source: [https://docs.docker.com/compose](https://docs.docker.com/compose)*", "term_freq": { "##": 3, "#view-the-release-notes": 1, "**doc_type**": 1, "**doc_url**": 1, "**page_title**": 1, "**scraped**": 1, "**source**": 1, "**type**": 1, "*document": 1, "*source": 1, "---": 1, "//docs": 4, "//github": 1, "12": 2, "18": 2, "2026-02-19": 2, "51": 1, "51*": 1, "by": 1, "com/compose": 4, "com/yourorg/devour": 1, "compose": 3, "content": 1, "contents": 1, "devour": 1, "docker": 7, "docker-section": 2, "document": 1, "https": 5, "information": 1, "markdown": 1, "notes": 4, "of": 1, "on": 1, "property": 1, "release": 4, "scraped": 1, "table": 1, "the": 4, "value": 1, "view": 4, "|----------|-------|": 1, "📋": 1, "📑": 1, "📚": 1 }, "length": 81 }, { "id": "b5f8b4d3016752376ebf861b", "doc_id": "2b00666eec3ff626f3a2fee8", "title": "Docker Compose - Why use Compose?", "type": "markdown", "source": "local", "path": "devour_data/docs/docker_compose_-_why_use_compose?_3.md", "content": "# Docker Compose - Why use Compose? ## 📋 Document Information | Property | Value | |----------|-------| | **Source** | https://docs.docker.com/compose | | **Type** | `docker-section` | | **Scraped** | 2026-02-19 12:18:51 | | **Page_title** | Docker Compose | | **Doc_url** | https://docs.docker.com/compose | | **Doc_type** | docker-section | ## 📑 Table of Contents - [Why use Compose?](#why-use-compose) ## 📚 Content # Why use Compose? --- *Document scraped by [Devour](https://github.com/yourorg/devour) on 2026-02-19 12:18:51* *Source: [https://docs.docker.com/compose](https://docs.docker.com/compose)*", "term_freq": { "##": 3, "#why-use-compose": 1, "**doc_type**": 1, "**doc_url**": 1, "**page_title**": 1, "**scraped**": 1, "**source**": 1, "**type**": 1, "*document": 1, "*source": 1, "---": 1, "//docs": 4, "//github": 1, "12": 2, "18": 2, "2026-02-19": 2, "51": 1, "51*": 1, "by": 1, "com/compose": 4, "com/yourorg/devour": 1, "compose": 7, "content": 1, "contents": 1, "devour": 1, "docker": 7, "docker-section": 2, "document": 1, "https": 5, "information": 1, "markdown": 1, "of": 1, "on": 1, "property": 1, "scraped": 1, "table": 1, "use": 4, "value": 1, "why": 4, "|----------|-------|": 1, "📋": 1, "📑": 1, "📚": 1 }, "length": 77 }, { "id": "cc565c788baad3ccd2734037", "doc_id": "59dfca66261954028a5f47ec", "title": "Docker Compose", "type": "markdown", "source": "local", "path": "devour_data/docs/docker_compose_0.md", "content": "# Docker Compose ## 📋 Document Information | Property | Value | |----------|-------| | **Source** | https://docs.docker.com/compose | | **Type** | `docker-docs` | | **Scraped** | 2026-02-19 12:18:51 | | **Title** | Docker Compose | | **Doc_url** | https://docs.docker.com/compose | | **Doc_type** | docker-docs | ## 📑 Table of Contents - [Docker Compose](#docker-compose) ## 📚 Content # Docker Compose Learn how to use Docker Compose to define and run multi-container applications with this detailed introduction to the tool. --- *Document scraped by [Devour](https://github.com/yourorg/devour) on 2026-02-19 12:18:51* *Source: [https://docs.docker.com/compose](https://docs.docker.com/compose)*", "term_freq": { "##": 3, "#docker-compose": 1, "**doc_type**": 1, "**doc_url**": 1, "**scraped**": 1, "**source**": 1, "**title**": 1, "**type**": 1, "*document": 1, "*source": 1, "---": 1, "//docs": 4, "//github": 1, "12": 2, "18": 2, "2026-02-19": 2, "51": 1, "51*": 1, "and": 1, "applications": 1, "by": 1, "com/compose": 4, "com/yourorg/devour": 1, "compose": 6, "content": 1, "contents": 1, "define": 1, "detailed": 1, "devour": 1, "docker": 10, "docker-docs": 2, "document": 1, "how": 1, "https": 5, "information": 1, "introduction": 1, "learn": 1, "markdown": 1, "multi-container": 1, "of": 1, "on": 1, "property": 1, "run": 1, "scraped": 1, "table": 1, "the": 1, "this": 1, "to": 3, "tool": 1, "use": 1, "value": 1, "with": 1, "|----------|-------|": 1, "📋": 1, "📑": 1, "📚": 1 }, "length": 88 }, { "id": "5a108130e0f0dd41d541bf20", "doc_id": "0b0eea3734988a658bf3b564", "title": "dynamic", "url": "file:///tmp/devour-github-216944658/src/routes/reference/components/dynamic.mdx", "type": "github-document", "source": "solid:solid-router", "path": "devour_data/docs/dynamic-0b0eea37.json", "content": "--- title: \u003cDynamic\u003e order: 5 use_cases: \u003e- dynamic components, conditional rendering, polymorphic components, runtime component selection, flexible ui, component switching tags: - dynamic - components - jsx - polymorphic - rendering - conditional version: '1.0' description: \u003e- Render components dynamically at runtime with the Dynamic component. Perfect for polymorphic components and conditional component rendering. --- This component lets you insert an arbitrary Component or tag and passes the props through to it. ```tsx import { Dynamic } from \"solid-js/web\" import type { JSX } from \"solid-js\" function Dynamic\u003cT\u003e( props: T \u0026 { children?: any component?: Component\u003cT\u003e | string | keyof JSX.IntrinsicElements } ): () =\u003e JSX.Element ``` Here's an example of how you can use it: ```tsx \u003cDynamic component={MyComponent} someProp={state.something} /\u003e ``` ## Props | Name | Type | Description | | :---------- | :---------------------------------------------------------- | :---------------------------------------- | | `component` | `Component\u003cT\u003e` \\| `string` \\| `keyof JSX.IntrinsicElements` | The component to render. | | `children` | `any` | The children to pass to the component. | | `...` | `T` | Any other props to pass to the component. |", "term_freq": { "##": 1, "---": 2, "----------": 1, "----------------------------------------": 1, "----------------------------------------------------------": 1, "///tmp/devour-github-216944658/src/routes/reference/components/dynamic": 1, "/\u003e": 1, "\u003cdynamic": 1, "\u003cdynamic\u003e": 1, "=\u003e": 1, "\u003e-": 2, "\\|": 2, "an": 2, "and": 2, "any": 3, "arbitrary": 1, "at": 1, "can": 1, "children": 3, "component": 11, "component\u003ct\u003e": 2, "component=": 1, "components": 5, "conditional": 3, "description": 2, "dynamic": 5, "dynamic\u003ct\u003e": 1, "dynamically": 1, "element": 1, "example": 1, "file": 1, "flexible": 1, "for": 1, "from": 2, "function": 1, "github-document": 1, "here": 1, "how": 1, "import": 2, "insert": 1, "intrinsicelements": 2, "it": 2, "jsx": 5, "keyof": 2, "lets": 1, "mdx": 1, "mycomponent": 1, "name": 1, "of": 1, "or": 1, "order": 1, "other": 1, "pass": 2, "passes": 1, "perfect": 1, "polymorphic": 3, "props": 4, "render": 2, "rendering": 3, "runtime": 2, "selection": 1, "solid-js": 1, "solid-js/web": 1, "someprop=": 1, "something": 1, "state": 1, "string": 2, "switching": 1, "tag": 1, "tags": 1, "the": 6, "this": 1, "through": 1, "title": 1, "to": 6, "tsx": 2, "type": 2, "ui": 1, "use": 1, "use_cases": 1, "version": 1, "with": 1, "you": 2 }, "length": 147 }, { "id": "b0db6a0e1f953d33b63c070f", "doc_id": "32adf210b78c50886d413da8", "title": "dynamic", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/dynamic.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/dynamic-32adf210.json", "content": "--- title: \u003cDynamic\u003e order: 5 use_cases: \u003e- dynamic components, conditional rendering, polymorphic components, runtime component selection, flexible ui, component switching tags: - dynamic - components - jsx - polymorphic - rendering - conditional version: '1.0' description: \u003e- Render components dynamically at runtime with the Dynamic component. Perfect for polymorphic components and conditional component rendering. --- This component lets you insert an arbitrary Component or tag and passes the props through to it. ```tsx import { Dynamic } from \"solid-js/web\" import type { JSX } from \"solid-js\" function Dynamic\u003cT\u003e( props: T \u0026 { children?: any component?: Component\u003cT\u003e | string | keyof JSX.IntrinsicElements } ): () =\u003e JSX.Element ``` Here's an example of how you can use it: ```tsx \u003cDynamic component={MyComponent} someProp={state.something} /\u003e ``` ## Props | Name | Type | Description | | :---------- | :---------------------------------------------------------- | :---------------------------------------- | | `component` | `Component\u003cT\u003e` \\| `string` \\| `keyof JSX.IntrinsicElements` | The component to render. | | `children` | `any` | The children to pass to the component. | | `...` | `T` | Any other props to pass to the component. |", "term_freq": { "##": 1, "---": 2, "----------": 1, "----------------------------------------": 1, "----------------------------------------------------------": 1, "//github": 1, "/\u003e": 1, "\u003cdynamic": 1, "\u003cdynamic\u003e": 1, "=\u003e": 1, "\u003e-": 2, "\\|": 2, "an": 2, "and": 2, "any": 3, "arbitrary": 1, "at": 1, "can": 1, "children": 3, "com/solidjs/solid-docs/blob/head/src/routes/reference/components/dynamic": 1, "component": 11, "component\u003ct\u003e": 2, "component=": 1, "components": 5, "conditional": 3, "description": 2, "dynamic": 5, "dynamic\u003ct\u003e": 1, "dynamically": 1, "element": 1, "example": 1, "flexible": 1, "for": 1, "from": 2, "function": 1, "github-document": 1, "here": 1, "how": 1, "https": 1, "import": 2, "insert": 1, "intrinsicelements": 2, "it": 2, "jsx": 5, "keyof": 2, "lets": 1, "mdx": 1, "mycomponent": 1, "name": 1, "of": 1, "or": 1, "order": 1, "other": 1, "pass": 2, "passes": 1, "perfect": 1, "polymorphic": 3, "props": 4, "render": 2, "rendering": 3, "runtime": 2, "selection": 1, "solid-js": 1, "solid-js/web": 1, "someprop=": 1, "something": 1, "state": 1, "string": 2, "switching": 1, "tag": 1, "tags": 1, "the": 6, "this": 1, "through": 1, "title": 1, "to": 6, "tsx": 2, "type": 2, "ui": 1, "use": 1, "use_cases": 1, "version": 1, "with": 1, "you": 2 }, "length": 148 }, { "id": "76fe6147159e857e000544ff", "doc_id": "a9c215f90c60b04e86ba5d32", "title": "dynamic-routes", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/dynamic-routes.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/dynamic-routes.json", "content": "--- title: Dynamic routes use_cases: \u003e- user profiles, product pages, blog posts, id-based content, variable urls, data-driven pages tags: - dynamic - parameters - validation - wildcards - routing version: '1.0' description: \u003e- Build dynamic routes with parameters in SolidJS for user profiles, products, and content that changes based on URL values. --- When a path is unknown ahead of time, it can be treated as a flexible parameter that is passed on to the component: ```jsx import { lazy } from \"solid-js\"; import { render } from \"solid-js/web\"; import { Router, Route } from \"@solidjs/router\"; const Users = lazy(() =\u003e import(\"./pages/Users\")); const User = lazy(() =\u003e import(\"./pages/User\")); const Home = lazy(() =\u003e import(\"./pages/Home\")); render( () =\u003e ( \u003cRouter\u003e \u003cRoute path=\"/users\" component={Users} /\u003e \u003cRoute path=\"/users/:id\" component={User} /\u003e \u003cRoute path=\"/\" component={Home} /\u003e \u003c/Router\u003e ), document.getElementById(\"app\") ); ``` The colon (`:`) indicates that `id` can be any string. Once a URL matches the pattern, the `User` component will be shown. When using dynamic segments, the values can be accessed via the [`useParams`](/solid-router/reference/primitives/use-params) primitive within the component. :::note[Note on Animation/Transitions] Routes that share the same path match will be treated as the same route. If you want to force re-render you can wrap your component in a keyed [`Show`](/concepts/control-flow/conditional-rendering) like: ```jsx \u003cShow when={params.something} keyed\u003e \u003cMyComponent /\u003e \u003c/Show\u003e ``` ::: Each path parameter can be validated using a `MatchFilter`. This allows for more complex routing descriptions rather than just checking the presence of a parameter. ```jsx import { lazy } from \"solid-js\"; import { render } from \"solid-js/web\"; import { Router, Route } from \"@solidjs/router\"; import type { SegmentValidators } from \"./types\"; const User = lazy(() =\u003e import(\"./pages/User\")); const filters: MatchFilters = { parent: [\"mom\", \"dad\"], // allow enum values id: /^\\d+$/, // only allow numbers withHtmlExtension: (v: string) =\u003e v.length \u003e 5 \u0026\u0026 v.endsWith(\".html\"), // we want an `*.html` extension }; render( () =\u003e ( \u003cRouter\u003e \u003cRoute path=\"/users/:parent/:id/:withHtmlExtension\" component={User} matchFilters={filters} /\u003e \u003c/Router\u003e ), document.getElementById(\"app\") ); ``` Here, `matchFilters` prop allows for validation of the `parent`, `id` and `withHtmlExtension` parameters against the filters defined in `filters`. If the validation fails, the route will not match. So in this example: - `/users/mom/123/contact.html` would match, - `/users/dad/123/about.html` would match, - `/users/aunt/123/contact.html` would not match as `:parent` is not 'mom' or 'dad', - `/users/mom/me/contact.html` would not match as `:id` is not a number, - `/users/dad/123/contact` would not match as `:withHtmlExtension` is missing `.html`. ## Optional parameters Parameters can be specified as optional by adding a question mark to the end of the parameter name: ```jsx // Matches stories and stories/123 but not stories/123/comments \u003cRoute path=\"/stories/:id?\" component={Stories} /\u003e ``` ## Wildcard routes `:param` provides an arbitrary name at that point in the path. Using an asterisk (`*`) will provide a way to match any end of the path: ```jsx // Matches any path that begins with foo, including foo/, foo/a/, foo/a/b/c \u003cRoute path=\"foo/*\" component={Foo} /\u003e ``` If the wild part of the path to the component as a parameter needs to be exposed, it can be named: ```jsx \u003cRoute path=\"foo/*any\" component={Foo} /\u003e ``` **Note:** that the wildcard token must be the last part of the path; `foo/*any/bar` will not create any routes. ## Multiple paths Routes also support defining multiple paths using an array. This allows a route to remain mounted and not rerender when switching between two or more locations that it matches: ```jsx // Navigating from login to register does not cause the Login component to re-render \u003cRoute path={[\"login\", \"register\"]} component={Login} /\u003e ```", "term_freq": { "##": 3, "\u0026\u0026": 1, "**": 1, "**note": 1, "---": 2, "//": 6, "//github": 1, "/\u003e": 9, "/^\\d+$/": 1, "/concepts/control-flow/conditional-rendering": 1, "/pages/home": 1, "/pages/user": 2, "/pages/users": 1, "/solid-router/reference/primitives/use-params": 1, "/stories/": 1, "/types": 1, "/users": 1, "/users/": 2, "/users/aunt/123/contact": 1, "/users/dad/123/about": 1, "/users/dad/123/contact": 1, "/users/mom/123/contact": 1, "/users/mom/me/contact": 1, "\u003c/router\u003e": 2, "\u003c/show\u003e": 1, "\u003cmycomponent": 1, "\u003croute": 8, "\u003crouter\u003e": 2, "\u003cshow": 1, "=\u003e": 7, "\u003e-": 2, "@solidjs/router": 2, "accessed": 1, "adding": 1, "against": 1, "ahead": 1, "allow": 2, "allows": 3, "also": 1, "an": 4, "and": 4, "animation/transitions": 1, "any": 4, "app": 2, "arbitrary": 1, "array": 1, "as": 7, "asterisk": 1, "at": 1, "based": 1, "be": 10, "begins": 1, "between": 1, "blog": 1, "build": 1, "but": 1, "by": 1, "can": 7, "cause": 1, "changes": 1, "checking": 1, "colon": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/concepts/dynamic-routes": 1, "complex": 1, "component": 6, "component=": 8, "const": 5, "content": 2, "create": 1, "dad": 2, "data-driven": 1, "defined": 1, "defining": 1, "description": 1, "descriptions": 1, "document": 2, "does": 1, "dynamic": 4, "dynamic-routes": 1, "each": 1, "end": 2, "endswith": 1, "enum": 1, "example": 1, "exposed": 1, "extension": 1, "fails": 1, "filters": 4, "flexible": 1, "foo": 3, "foo/": 1, "foo/*": 1, "foo/*any": 1, "foo/*any/bar": 1, "foo/a/": 1, "foo/a/b/c": 1, "for": 3, "force": 1, "from": 8, "getelementbyid": 2, "github-document": 1, "here": 1, "home": 2, "html": 7, "https": 1, "id": 6, "id-based": 1, "id/": 1, "if": 3, "import": 11, "in": 5, "including": 1, "indicates": 1, "is": 5, "it": 3, "jsx": 7, "just": 1, "keyed": 1, "keyed\u003e": 1, "last": 1, "lazy": 6, "length": 1, "like": 1, "locations": 1, "login": 4, "mark": 1, "match": 8, "matches": 4, "matchfilter": 1, "matchfilters": 2, "matchfilters=": 1, "mdx": 1, "missing": 1, "mom": 2, "more": 2, "mounted": 1, "multiple": 2, "must": 1, "name": 2, "named": 1, "navigating": 1, "needs": 1, "not": 10, "note": 2, "number": 1, "numbers": 1, "of": 7, "on": 3, "once": 1, "only": 1, "optional": 2, "or": 2, "pages": 2, "param": 1, "parameter": 5, "parameters": 5, "params": 1, "parent": 3, "parent/": 1, "part": 2, "passed": 1, "path": 8, "path=": 8, "paths": 2, "pattern": 1, "point": 1, "posts": 1, "presence": 1, "primitive": 1, "product": 1, "products": 1, "profiles": 2, "prop": 1, "provide": 1, "provides": 1, "question": 1, "rather": 1, "re-render": 2, "register": 2, "remain": 1, "render": 4, "rerender": 1, "route": 5, "router": 2, "routes": 6, "routing": 2, "same": 2, "segments": 1, "segmentvalidators": 1, "share": 1, "show": 1, "shown": 1, "so": 1, "solid-js": 2, "solid-js/web": 2, "solidjs": 1, "something": 1, "specified": 1, "stories": 2, "stories/123": 1, "stories/123/comments": 1, "string": 2, "support": 1, "switching": 1, "tags": 1, "than": 1, "that": 8, "the": 25, "this": 3, "time": 1, "title": 1, "to": 9, "token": 1, "treated": 2, "two": 1, "type": 1, "unknown": 1, "url": 2, "urls": 1, "use_cases": 1, "useparams": 1, "user": 7, "users": 2, "using": 4, "validated": 1, "validation": 3, "values": 3, "variable": 1, "version": 1, "via": 1, "want": 2, "way": 1, "we": 1, "when": 3, "when=": 1, "wild": 1, "wildcard": 2, "wildcards": 1, "will": 5, "with": 2, "withhtmlextension": 4, "within": 1, "would": 5, "wrap": 1, "you": 2, "your": 1 }, "length": 559 }, { "id": "f713cf6c87afdc7501070244", "doc_id": "a29ea0c92a634eb4eb179a01", "title": "dynamic", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/control-flow/dynamic.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/dynamic.json", "content": "--- title: Dynamic order: 2 use_cases: \u003e- dynamic component selection, polymorphic components, runtime component switching, flexible ui rendering, component factories tags: - dynamic - components - rendering - polymorphic - runtime - flexible version: '1.0' description: \u003e- Render components dynamically at runtime with Solid's Dynamic component. Build flexible UIs with runtime component selection. --- `\u003cDynamic\u003e` is a Solid component that allows you to render components dynamically based on data. By passing either a string representing a [native HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) or a component function to the `component` prop, you can render the chosen component with the remaining props you provide. ```jsx import { createSignal, For } from \"solid-js\" import { Dynamic } from \"solid-js/web\" const RedDiv = () =\u003e \u003cdiv style=\"color: red\"\u003eRed\u003c/div\u003e const GreenDiv = () =\u003e \u003cdiv style=\"color: green\"\u003eGreen\u003c/div\u003e const BlueDiv = () =\u003e \u003cdiv style=\"color: blue\"\u003eBlue\u003c/div\u003e const options = { red: RedDiv, green: GreenDiv, blue: BlueDiv, } function App() { const [selected, setSelected] = createSignal(\"red\") return ( \u003c\u003e \u003cselect value={selected()} onInput={(e) =\u003e setSelected(e.currentTarget.value)} \u003e \u003cFor each={Object.keys(options)}\u003e {(color) =\u003e \u003coption value={color}\u003e{color}\u003c/option\u003e} \u003c/For\u003e \u003c/select\u003e \u003cDynamic component={options[selected()]} /\u003e \u003c/\u003e ) } ``` This example renders a `\u003cselect\u003e` element that allows you to choose between three colors. Once a color is selected, the `\u003cDynamic\u003e` component will render the chosen color's corresponding component or element. `\u003cDynamic\u003e` creates more concise code than alternative conditional rendering options. For example, the following code renders the same result as the previous example: ```jsx import { createSignal, Switch, Match, For } from \"solid-js\" const RedDiv = () =\u003e \u003cdiv style=\"color: red\"\u003eRed\u003c/div\u003e const GreenDiv = () =\u003e \u003cdiv style=\"color: green\"\u003eGreen\u003c/div\u003e const BlueDiv = () =\u003e \u003cdiv style=\"color: blue\"\u003eBlue\u003c/div\u003e const options = { red: RedDiv, green: GreenDiv, blue: BlueDiv, } function App() { const [selected, setSelected] = createSignal(\"red\") return ( \u003c\u003e \u003cselect value={selected()} onInput={(e) =\u003e setSelected(e.currentTarget.value)} \u003e \u003cFor each={Object.keys(options)}\u003e {(color) =\u003e \u003coption value={color}\u003e{color}\u003c/option\u003e} \u003c/For\u003e \u003c/select\u003e \u003cSwitch fallback={\u003cBlueDiv /\u003e}\u003e \u003cMatch when={selected() === \"red\"}\u003e \u003cRedDiv /\u003e \u003c/Match\u003e \u003cMatch when={selected() === \"green\"}\u003e \u003cGreenDiv /\u003e \u003c/Match\u003e \u003c/Switch\u003e \u003c/\u003e ) } ``` Instead of a more verbose [`\u003cSwitch\u003e` and `\u003cMatch\u003e`](/concepts/control-flow/conditional-rendering) statement, `\u003cDynamic\u003e` offers a more concise way to render components dynamically. ## Props When working with these components, you can pass [props](/concepts/components/props) to the component you are rendering by passing them to the `\u003cDynamic\u003e` component. This makes them available to the component you are rendering, similar to how you would pass props to components in JSX. ```jsx import { Dynamic } from \"solid-js/web\" function App() { return ( \u003cDynamic component={someComponent} someProp=\"someValue\" /\u003e ) } ```", "term_freq": { "##": 1, "---": 2, "//developer": 1, "//github": 1, "/\u003e": 5, "/concepts/components/props": 1, "/concepts/control-flow/conditional-rendering": 1, "\u003c/\u003e": 2, "\u003c/for\u003e": 2, "\u003c/match\u003e": 2, "\u003c/option\u003e": 2, "\u003c/select\u003e": 2, "\u003c/switch\u003e": 1, "\u003c\u003e": 2, "\u003cbluediv": 1, "\u003cdiv": 6, "\u003cdynamic": 2, "\u003cdynamic\u003e": 5, "\u003cfor": 2, "\u003cgreendiv": 1, "\u003cmatch": 2, "\u003cmatch\u003e": 1, "\u003coption": 2, "\u003creddiv": 1, "\u003cselect": 2, "\u003cselect\u003e": 1, "\u003cswitch": 1, "\u003cswitch\u003e": 1, "===": 2, "=\u003e": 10, "\u003e-": 2, "\u003eblue\u003c/div\u003e": 2, "\u003egreen\u003c/div\u003e": 2, "\u003ered\u003c/div\u003e": 2, "allows": 2, "alternative": 1, "and": 1, "app": 3, "are": 2, "as": 1, "at": 1, "available": 1, "based": 1, "between": 1, "blue": 4, "bluediv": 4, "build": 1, "by": 2, "can": 2, "choose": 1, "chosen": 2, "code": 2, "color": 14, "colors": 1, "com/solidjs/solid-docs/blob/head/src/routes/concepts/control-flow/dynamic": 1, "component": 14, "component=": 2, "components": 7, "concise": 2, "conditional": 1, "const": 10, "corresponding": 1, "creates": 1, "createsignal": 4, "currenttarget": 2, "data": 1, "description": 1, "dynamic": 7, "dynamically": 3, "each=": 2, "either": 1, "element": 3, "example": 3, "factories": 1, "fallback=": 1, "flexible": 3, "following": 1, "for": 3, "from": 4, "function": 4, "github-document": 1, "green": 5, "greendiv": 4, "how": 1, "html": 1, "https": 2, "import": 4, "in": 1, "instead": 1, "is": 2, "jsx": 4, "keys": 2, "makes": 1, "match": 1, "mdx": 1, "more": 3, "mozilla": 1, "native": 1, "object": 2, "of": 1, "offers": 1, "on": 1, "once": 1, "oninput=": 2, "options": 6, "or": 2, "order": 1, "org/en-us/docs/web/html/element": 1, "pass": 2, "passing": 2, "polymorphic": 2, "previous": 1, "prop": 1, "props": 4, "provide": 1, "red": 7, "reddiv": 4, "remaining": 1, "render": 5, "rendering": 5, "renders": 2, "representing": 1, "result": 1, "return": 3, "runtime": 4, "same": 1, "selected": 8, "selection": 2, "setselected": 4, "similar": 1, "solid": 2, "solid-js": 2, "solid-js/web": 2, "somecomponent": 1, "someprop=": 1, "somevalue": 1, "statement": 1, "string": 1, "style=": 6, "switch": 1, "switching": 1, "tags": 1, "than": 1, "that": 2, "the": 11, "them": 2, "these": 1, "this": 2, "three": 1, "title": 1, "to": 9, "ui": 1, "uis": 1, "use_cases": 1, "value": 2, "value=": 4, "verbose": 1, "version": 1, "way": 1, "when": 1, "when=": 2, "will": 1, "with": 4, "working": 1, "would": 1, "you": 8 }, "length": 399 }, { "id": "a60fca2f96dfdb9bcc2641a5", "doc_id": "53fd34aef011e76f81924f5d", "title": "effects", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/effects.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/effects.json", "content": "--- title: Effects order: 4 use_cases: \u003e- side effects, dom manipulation, api calls, subscriptions, logging, reacting to state changes tags: - effects - side-effects - reactivity - lifecycle - subscriptions version: '1.0' description: \u003e- Manage side effects like DOM updates, API calls, and subscriptions that respond automatically to reactive state changes. --- Effects are functions that are triggered when the signals they depend on change. They play a crucial role in managing side effects, which are actions that occur outside of the application's scope, such as DOM manipulations, data fetching, and subscriptions. ## Using an effect An effect is created using the `createEffect` function. This function takes a callback as its argument that runs when the effect is triggered. ```jsx import { createEffect } from \"solid-js\"; const [count, setCount] = createSignal(0); createEffect(() =\u003e { console.log(count()); }); ``` In this example, an effect is created that logs the current value of `count` to the console. When the value of `count` changes, the effect is triggered, causing it to run again and log the new value of `count`. :::note Effects are primarily intended for handling side effects that do not write to the reactive system. It's best to avoid setting signals within effects, as this can lead to additional rendering or even infinite loops if not managed carefully. Instead, it is recommended to use [createMemo](/reference/basic-reactivity/create-memo) to compute new values that rely on other reactive values. ::: ## Managing dependencies Effects can be set to observe any number of dependencies. Dependencies are what allow an effect to track changes and respond accordingly. These can include signals, props, context, or any other reactive values. When any of these change, the effect is notified and will run again to update its state. Upon initialization, an effect will run _once_, regardless of whether it has any dependencies. This is useful for setting up the effect and initializing variables or subscribing to [signals](/concepts/signals). After this run, the effect will only be triggered when any of its _dependencies_ change. ```jsx createEffect(() =\u003e { console.log(\"hello\"); // will run only once }); createEffect(() =\u003e { console.log(count()); // will run every time count changes }); ``` Solid automatically tracks the dependencies of an effect, so you do not need to manually specify them. This improves the tracking and minimizes the chances of overlooking or incorrectly identifying dependencies. ## Subscribing to signals When an effect is set to observe a signal, it creates a subscription to it. This subscription allows the effect to track the changes in the signal's value, which causes it to observe any changes that may happen and to execute its callback accordingly. ```jsx import { createSignal, createEffect } from \"solid-js\"; const [count, setCount] = createSignal(0); createEffect(() =\u003e { console.log(count()); // Logs current value of count whenever it changes }); ``` ### Managing multiple signals Effects have the ability to observe multiple signals. A single effect can subscribe to multiple signals, and similarly, multiple effects can keep track of a single signal. This is useful when you need to update the UI based on multiple signals. When multiple signals are observed within a single effect, it will execute its callback whenever _any_ of the signals change. The effect will run even if only one of the signals changes, not necessarily all of them. This means that the effect will run with the latest values of all of the signals that it is observing. ```jsx import { createSignal, createEffect } from \"solid-js\"; const [count, setCount] = createSignal(0); const [message, setMessage] = createSignal(\"Hello\"); createEffect(() =\u003e { console.log(count(), message()); }); setCount(1); // Output: 1, \"Hello\" setMessage(\"World\"); // Output: 1, \"World\" ``` :::note When a signal updates, it notifies all of its subscribers sequentially but the *order can vary*. While effects are guaranteed to run when a signal updates, the execution might **not** be instantaneous. This means that the order of execution of effects is *not guaranteed* and should not be relied upon. ::: ### Nested effects When working with effects, it is possible to nest them within each other. This allows each effect to independently track its own dependencies, without affecting the effect that it is nested within. ```jsx createEffect(() =\u003e { console.log(\"Outer effect starts\"); createEffect(() =\u003e console.log(\"Inner effect\")); console.log(\"Outer effect ends\"); }); ``` The order of execution is important to note. An inner effect will _not_ affect the outer effect. Signals that are accessed within an inner effect, will _not_ be registered as dependencies for the outer effect. When the signal located within the inner effect changes, it will trigger only the _inner effect_ to re-run, not the outer one. ```jsx import { createSignal, createEffect } from \"solid-js\"; const [count, setCount] = createSignal(0); createEffect(() =\u003e { console.log(\"Outer effect starts\"); createEffect(() =\u003e console.log(count())); // when count changes, only this effect will run console.log(\"Outer effect ends\"); }); ``` This forces each effect to be independent of each other, which helps to avoid unexpected behaviour. Additionally, it allows you to create effects that are only triggered when certain conditions are met. ## Lifecycle functions Effects have a lifecycle that can be managed using certain functions. These functions allow you to control the initialization and disposal of effects to build the type of behaviour that you need. This can include running a side effect only once, or cleaning up a task when it is no longer needed. ### `onMount` In situations where you just want to run a side effect **once**, you can use the [`onMount`](/reference/lifecycle/on-mount) function. This lifecycle function is similar to an effect, but it does not track any dependencies. Rather, once the component has been initialized, the `onMount` callback will be executed and will not run again. ```jsx import { onMount } from \"solid-js\"; function Component() { const [data, setData] = createSignal(null); createEffect(() =\u003e { data(); // will run every time data changes }); onMount(async () =\u003e { // will run only once, when the component is mounted const fetchedData = await fetch(\"https://example.com/data\"); setData(fetchedData); }); return \u003cdiv\u003e...\u003c/div\u003e; } ``` `onMount` provides the assurance that the callback will only run once. If using an effect in this situation, there is no guarantee that it will only run once, which can lead to unexpected behaviour. This makes `onMount` useful for API calls and other side effects that only need to be run once per component instance. ### `onCleanup` While `onMount` is useful for running a side effect once, [`onCleanup`](/reference/lifecycle/on-cleanup) is helpful for cleaning up a task when it is no longer needed. `onCleanup` will run whenever the component unmounts, removing any subscriptions that the effect has. ```jsx import { onCleanup } from \"solid-js\"; function App() { const [count, setCount] = createSignal(0); const timer = setInterval(() =\u003e { setCount((prev) =\u003e prev + 1); }, 1000); onCleanup(() =\u003e { clearInterval(timer); }); return \u003cdiv\u003eCount: {count()}\u003c/div\u003e; } ``` In this example, the `onCleanup` function is used to clear the interval that is set up in the effect. To avoid the interval from running indefinitely, the `onCleanup` function is used to clear the interval once the component unmounts. `onCleanup` can be used to avoid memory leaks. These occur when a component is unmounted, but references to it still exist and, as a result, could still be running in the background. Using `onCleanup` to remove any subscriptions or references to the component can help to avoid this issue.", "term_freq": { "##": 4, "###": 4, "**not**": 1, "**once**": 1, "*not": 1, "*order": 1, "---": 2, "//": 8, "//example": 1, "//github": 1, "/concepts/signals": 1, "/reference/basic-reactivity/create-memo": 1, "/reference/lifecycle/on-cleanup": 1, "/reference/lifecycle/on-mount": 1, "1000": 1, "\u003c/div\u003e": 2, "\u003cdiv\u003e": 1, "\u003cdiv\u003ecount": 1, "=\u003e": 14, "\u003e-": 2, "_any_": 1, "_dependencies_": 1, "_inner": 1, "_not_": 2, "_once_": 1, "ability": 1, "accessed": 1, "accordingly": 2, "actions": 1, "additional": 1, "additionally": 1, "affect": 1, "affecting": 1, "after": 1, "again": 3, "all": 3, "allow": 2, "allows": 3, "an": 11, "and": 14, "any": 9, "api": 3, "app": 1, "application": 1, "are": 10, "argument": 1, "as": 5, "assurance": 1, "async": 1, "automatically": 2, "avoid": 5, "await": 1, "background": 1, "based": 1, "be": 11, "been": 1, "behaviour": 3, "best": 1, "build": 1, "but": 3, "callback": 5, "calls": 3, "can": 12, "carefully": 1, "causes": 1, "causing": 1, "certain": 2, "chances": 1, "change": 4, "changes": 12, "cleaning": 2, "clear": 2, "clearinterval": 1, "com/data": 1, "com/solidjs/solid-docs/blob/head/src/routes/concepts/effects": 1, "component": 8, "compute": 1, "conditions": 1, "console": 12, "const": 9, "context": 1, "control": 1, "could": 1, "count": 17, "create": 1, "created": 2, "createeffect": 15, "creatememo": 1, "creates": 1, "createsignal": 10, "crucial": 1, "current": 2, "data": 4, "depend": 1, "dependencies": 9, "description": 1, "disposal": 1, "do": 2, "does": 1, "dom": 3, "each": 4, "effect": 38, "effect_": 1, "effects": 21, "ends": 2, "even": 2, "every": 2, "example": 2, "execute": 2, "executed": 1, "execution": 3, "exist": 1, "fetch": 1, "fetcheddata": 2, "fetching": 1, "for": 6, "forces": 1, "from": 7, "function": 8, "functions": 4, "github-document": 1, "guarantee": 1, "guaranteed": 1, "guaranteed*": 1, "handling": 1, "happen": 1, "has": 3, "have": 2, "hello": 3, "help": 1, "helpful": 1, "helps": 1, "https": 2, "identifying": 1, "if": 3, "import": 6, "important": 1, "improves": 1, "in": 8, "include": 2, "incorrectly": 1, "indefinitely": 1, "independent": 1, "independently": 1, "infinite": 1, "initialization": 2, "initialized": 1, "initializing": 1, "inner": 4, "instance": 1, "instantaneous": 1, "instead": 1, "intended": 1, "interval": 3, "is": 25, "issue": 1, "it": 20, "its": 7, "jsx": 8, "just": 1, "keep": 1, "latest": 1, "lead": 2, "leaks": 1, "lifecycle": 4, "like": 1, "located": 1, "log": 12, "logging": 1, "logs": 2, "longer": 2, "loops": 1, "makes": 1, "manage": 1, "managed": 2, "managing": 3, "manipulation": 1, "manipulations": 1, "manually": 1, "may": 1, "mdx": 1, "means": 2, "memory": 1, "message": 2, "met": 1, "might": 1, "minimizes": 1, "mounted": 1, "multiple": 6, "necessarily": 1, "need": 4, "needed": 2, "nest": 1, "nested": 2, "new": 2, "no": 3, "not": 8, "note": 3, "notified": 1, "notifies": 1, "null": 1, "number": 1, "observe": 4, "observed": 1, "observing": 1, "occur": 2, "of": 24, "on": 3, "once": 9, "oncleanup": 9, "one": 2, "only": 11, "onmount": 8, "or": 6, "order": 3, "other": 5, "outer": 7, "output": 2, "outside": 1, "overlooking": 1, "own": 1, "per": 1, "play": 1, "possible": 1, "prev": 2, "primarily": 1, "props": 1, "provides": 1, "rather": 1, "re-run": 1, "reacting": 1, "reactive": 4, "reactivity": 1, "recommended": 1, "references": 2, "regardless": 1, "registered": 1, "relied": 1, "rely": 1, "remove": 1, "removing": 1, "rendering": 1, "respond": 2, "result": 1, "return": 2, "role": 1, "run": 18, "running": 4, "runs": 1, "scope": 1, "sequentially": 1, "set": 3, "setcount": 7, "setdata": 2, "setinterval": 1, "setmessage": 2, "setting": 2, "should": 1, "side": 8, "side-effects": 1, "signal": 6, "signals": 14, "similar": 1, "similarly": 1, "single": 3, "situation": 1, "situations": 1, "so": 1, "solid": 1, "solid-js": 6, "specify": 1, "starts": 2, "state": 3, "still": 2, "subscribe": 1, "subscribers": 1, "subscribing": 2, "subscription": 2, "subscriptions": 6, "such": 1, "system": 1, "tags": 1, "takes": 1, "task": 2, "that": 21, "the": 57, "them": 3, "there": 1, "these": 4, "they": 2, "this": 19, "time": 2, "timer": 2, "title": 1, "to": 45, "track": 5, "tracking": 1, "tracks": 1, "trigger": 1, "triggered": 5, "type": 1, "ui": 1, "unexpected": 2, "unmounted": 1, "unmounts": 2, "up": 4, "update": 2, "updates": 3, "upon": 2, "use": 2, "use_cases": 1, "used": 3, "useful": 4, "using": 5, "value": 5, "values": 4, "variables": 1, "vary*": 1, "version": 1, "want": 1, "what": 1, "when": 18, "whenever": 3, "where": 1, "whether": 1, "which": 4, "while": 2, "will": 19, "with": 2, "within": 6, "without": 1, "working": 1, "world": 2, "write": 1, "you": 7 }, "length": 1166 }, { "id": "eb6ab701b29841177feeec13", "doc_id": "be30f40fefd4db9bf119432a", "title": "entry-client", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/entrypoints/entry-client.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/entry-client.json", "content": "--- title: entry-client.tsx use_cases: \u003e- browser initialization, client-only code, service workers, mounting app, spa setup tags: - entry - client - browser - initialization - mount - startup version: '1.0' description: \u003e- Configure browser entry point for SolidStart apps. Set up client-side initialization, mount components, and register service workers. --- `entry-client.tsx` is where an application starts in the browser. It does this by passing [`\u003cStartClient\u003e`](/solid-start/reference/client/start-client) and a DOM Element (the mounting point), to the [`mount`](/solid-start/reference/client/mount) function. ```tsx import { mount, StartClient } from \"@solidjs/start/client\"; mount(() =\u003e \u003cStartClient /\u003e, document.getElementById(\"app\")!); ``` This file is an ideal place to run any client specific code that is needed on startup, such as registering service workers. This is important if you are performing client-only rendering or using other modes of server-side rendering.", "term_freq": { "---": 2, "//github": 1, "/\u003e": 1, "/solid-start/reference/client/mount": 1, "/solid-start/reference/client/start-client": 1, "\u003cstartclient": 1, "\u003cstartclient\u003e": 1, "=\u003e": 1, "\u003e-": 2, "@solidjs/start/client": 1, "an": 2, "and": 2, "any": 1, "app": 2, "application": 1, "apps": 1, "are": 1, "as": 1, "browser": 4, "by": 1, "client": 2, "client-only": 2, "client-side": 1, "code": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/entrypoints/entry-client": 1, "components": 1, "configure": 1, "description": 1, "document": 1, "does": 1, "dom": 1, "element": 1, "entry": 2, "entry-client": 3, "file": 1, "for": 1, "from": 1, "function": 1, "getelementbyid": 1, "github-document": 1, "https": 1, "ideal": 1, "if": 1, "import": 1, "important": 1, "in": 1, "initialization": 3, "is": 4, "it": 1, "mdx": 1, "modes": 1, "mount": 5, "mounting": 2, "needed": 1, "of": 1, "on": 1, "or": 1, "other": 1, "passing": 1, "performing": 1, "place": 1, "point": 2, "register": 1, "registering": 1, "rendering": 2, "run": 1, "server-side": 1, "service": 3, "set": 1, "setup": 1, "solidstart": 1, "spa": 1, "specific": 1, "startclient": 1, "starts": 1, "startup": 2, "such": 1, "tags": 1, "that": 1, "the": 3, "this": 3, "title": 1, "to": 2, "tsx": 3, "up": 1, "use_cases": 1, "using": 1, "version": 1, "where": 1, "workers": 3, "you": 1 }, "length": 129 }, { "id": "165017a3595b3ce202890106", "doc_id": "a13179ac029c4de3d3d633fc", "title": "entry-server", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/entrypoints/entry-server.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/entry-server.json", "content": "--- title: entry-server.tsx use_cases: \u003e- server initialization, ssr setup, html document structure, meta tags, server bootstrap tags: - entry - server - ssr - initialization - document - html version: '1.0' description: \u003e- Define server entry point and HTML document structure for SolidStart. Configure SSR modes and set up server-side rendering bootstrap. --- `entry-server.tsx` is where an application starts on the server. This happens by `entry-server.tsx` providing a document component to [`\u003cStartServer\u003e`](/solid-start/reference/server/start-server) and passing it into [`createHandler`](/solid-start/reference/server/create-handler) for server side rendering. A typical `entry-server.tsx` for a new project looks like this: ```tsx import { createHandler, StartServer } from \"@solidjs/start/server\"; export default createHandler(() =\u003e ( \u003cStartServer document={({ assets, children, scripts }) =\u003e ( \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cmeta charset=\"utf-8\" /\u003e \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e \u003clink rel=\"icon\" href=\"/favicon.ico\" /\u003e {assets} \u003c/head\u003e \u003cbody\u003e \u003cdiv id=\"app\"\u003e{children}\u003c/div\u003e {scripts} \u003c/body\u003e \u003c/html\u003e )} /\u003e )); ``` For setting different SSR modes (sync | async | stream), see [`createHandler`](/solid-start/reference/server/create-handler).", "term_freq": { "---": 2, "//github": 1, "/\u003e": 4, "/favicon": 1, "/solid-start/reference/server/create-handler": 2, "/solid-start/reference/server/start-server": 1, "\u003c/body\u003e": 1, "\u003c/div\u003e": 1, "\u003c/head\u003e": 1, "\u003c/html\u003e": 1, "\u003cbody\u003e": 1, "\u003cdiv": 1, "\u003chead\u003e": 1, "\u003chtml": 1, "\u003clink": 1, "\u003cmeta": 2, "\u003cstartserver": 1, "\u003cstartserver\u003e": 1, "=\u003e": 2, "\u003e-": 2, "@solidjs/start/server": 1, "an": 1, "and": 3, "app": 1, "application": 1, "assets": 2, "async": 1, "bootstrap": 2, "by": 1, "charset=": 1, "children": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/entrypoints/entry-server": 1, "component": 1, "configure": 1, "content=": 1, "createhandler": 4, "default": 1, "define": 1, "description": 1, "different": 1, "document": 4, "document=": 1, "en": 1, "entry": 2, "entry-server": 5, "export": 1, "for": 4, "from": 1, "github-document": 1, "happens": 1, "href=": 1, "html": 3, "https": 1, "ico": 1, "icon": 1, "id=": 1, "import": 1, "initial-scale=1": 1, "initialization": 2, "into": 1, "is": 1, "it": 1, "lang=": 1, "like": 1, "looks": 1, "mdx": 1, "meta": 1, "modes": 2, "name=": 1, "new": 1, "on": 1, "passing": 1, "point": 1, "project": 1, "providing": 1, "rel=": 1, "rendering": 2, "scripts": 2, "see": 1, "server": 6, "server-side": 1, "set": 1, "setting": 1, "setup": 1, "side": 1, "solidstart": 1, "ssr": 4, "starts": 1, "startserver": 1, "stream": 1, "structure": 2, "sync": 1, "tags": 2, "the": 1, "this": 2, "title": 1, "to": 1, "tsx": 5, "typical": 1, "up": 1, "use_cases": 1, "utf-8": 1, "version": 1, "viewport": 1, "where": 1, "width=device-width": 1 }, "length": 154 }, { "id": "bf740090d99b8fa86dff4ec5", "doc_id": "bde65f995b76d2129100f71e", "title": "entry.client | Remix", "url": "https://v2.remix.run/docs/file-conventions/entry.client", "type": "html", "source": "remix:does", "path": "devour_data/docs/entry.client---remix-bde65f99.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsentry.clientGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite entry.client By default, Remix will handle hydrating your app on the client for you. If you want to customize this behavior, you can run npx remix reveal to generate a app/entry.client.tsx (or .jsx) that will take precedence. This file is the entry point for the browser and is responsible for hydrating the markup generated by the server in your server entry module; however, you can also initialize any other client-side code here. Typically, this module uses ReactDOM.hydrateRoot to hydrate the markup already generated on the server in your server entry module. Here's a basic example: import { RemixBrowser } from \"@remix-run/react\"; import { startTransition, StrictMode } from \"react\"; import { hydrateRoot } from \"react-dom/client\"; startTransition(() =\u003e { hydrateRoot( document, \u003cStrictMode\u003e \u003cRemixBrowser /\u003e \u003c/StrictMode\u003e ); }); This is the first piece of code that runs in the browser. You can initialize client side libraries, add client-only providers, etc.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_961\\\":-5,\\\"_962\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":960},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"docs/file-conventions/entry.client.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"entryclient\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#entryclient\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eentry.client\\u003c/h1\\u003e\\\\n\\u003cp\\u003eBy default, Remix will handle hydrating your app on the client for you. If you want to customize this behavior, you can run \\u003ccode\\u003enpx remix reveal\\u003c/code\\u003e to generate a \\u003ccode\\u003eapp/entry.client.tsx\\u003c/code\\u003e (or \\u003ccode\\u003e.jsx\\u003c/code\\u003e) that will take precedence. This file is the entry point for the browser and is responsible for hydrating the markup generated by the server in your \\u003ca href=\\\\\\\"./entry.server\\\\\\\"\\u003eserver entry module\\u003c/a\\u003e; however, you can also initialize any other client-side code here.\\u003c/p\\u003e\\\\n\\u003cp\\u003eTypically, this module uses \\u003ccode\\u003eReactDOM.hydrateRoot\\u003c/code\\u003e to hydrate the markup already generated on the server in your \\u003ca href=\\\\\\\"./entry.server\\\\\\\"\\u003eserver entry module\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eHere's a basic example:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/entry.client.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/entry.client.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eRemixBrowser\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estartTransition\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eStrictMode\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ereact\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehydrateRoot\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ereact-dom/client\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003estartTransition\\u003c/span\\u003e(() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehydrateRoot\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edocument\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eStrictMode\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRemixBrowser\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eStrictMode\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThis is the first piece of code that runs in the browser. You can initialize client side libraries, add client-only providers, etc.\\u003c/p\\u003e\\\",\\\"docs/file-conventions/entry.client\\\",\\\"headings\\\",[],[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#entryclient\\\\\\": 1, "$\\": 1, "$rc": 3, "--base05": 1, "--base08": 5, "--base0a": 3, "--base0b": 3, "--base0d": 3, "--base0e": 6, "-1\\\\\\": 1, "-5": 2, "/$": 1, "//v2": 2, "/\u003e": 1, "/\\u003cspan": 1, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/entry": 2, "0===e": 1, "10": 44, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 2, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "1\\\\\\": 1, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 1, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 1, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 1, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "97": 1, "98": 1, "99": 1, "9\\\\\\": 1, "\u003c/strictmode\u003e": 1, "\u003cremixbrowser": 1, "\u003cstrictmode\u003e": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 2, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/react": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 26, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 7, "\\n": 1, "\\u0026#x3c": 3, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ehere": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003etypically": 1, "\\u003ca": 2, "\\u003ccode\\u003e": 1, "\\u003ccode\\u003eapp/entry": 1, "\\u003ccode\\u003enpx": 1, "\\u003ccode\\u003ereactdom": 1, "\\u003ch1": 1, "\\u003cspan": 15, "\\u003e": 7, "\\u003e=\\u003e\\u003c/span\\u003e": 1, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eentry": 1, "\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003e\\u003cspan": 1, "\\u003e\\u003cpre": 1, "\\u003e\\u003cspan": 5, "\\u003edocument\\u003c/span\\u003e": 1, "\\u003efrom\\u003c/span\\u003e": 3, "\\u003ehydrateroot\\u003c/span\\u003e": 2, "\\u003eimport\\u003c/span\\u003e": 3, "\\u003ereact-dom/client\\u003c/span\\u003e\\\\\\": 1, "\\u003ereact\\u003c/span\\u003e\\\\\\": 1, "\\u003eremixbrowser\\u003c/span\\u003e": 2, "\\u003eserver": 2, "\\u003estarttransition\\u003c/span\\u003e": 2, "\\u003estrictmode\\u003c/span\\u003e": 1, "\\u003estrictmode\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 32, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 152, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 1, "_958\\": 1, "_961\\": 1, "_962\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "add": 2, "all": 1, "already": 2, "also": 2, "an": 1, "and": 11, "any": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 4, "app/entry": 3, "approach": 1, "aria-hidden=\\\\\\": 1, "as": 3, "asked": 1, "asset": 3, "at": 1, "attrs\\": 1, "await\\": 1, "b=document": 1, "backend": 3, "basename": 1, "basic": 2, "be": 1, "been": 2, "before": 1, "behavior": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 7, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "by": 3, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "can": 7, "catch": 1, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 13, "cli": 5, "cli\\": 1, "client": 24, "client-only": 2, "client-q2ogymm2": 1, "client-side": 2, "client\\": 3, "client\\u003c/h1\\u003e\\\\n\\u003cp\\u003eby": 1, "clientaction": 2, "clientaction\\": 1, "clientgetting": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "code": 8, "codeblock-line\\\\\\": 12, "color": 21, "community": 3, "community\\": 1, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 1, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 15, "css\\": 1, "customize": 2, "d=c": 2, "data": 16, "data-code-block=\\\\\\": 1, "data-filename=\\\\\\": 2, "data-lang=\\\\\\": 2, "data-line-number=\\\\\\": 12, "data-line-numbers=\\\\\\": 2, "data=": 1, "data\\": 2, "default": 2, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "development": 3, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 1, "doc\\": 1, "docs/file-conventions/entry": 2, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsentry": 1, "document": 2, "done": 1, "e--": 1, "e=0": 1, "else": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 14, "entryclient\\\\\\": 1, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "etc": 2, "everything": 1, "example": 2, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "extract": 2, "extract\\": 1, "f=a": 1, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 11, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "first": 2, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "for": 12, "form": 11, "form\\": 1, "found": 3, "frequently": 1, "from": 9, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 1, "future": 4, "generate": 2, "generated": 4, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "handle": 4, "handle\\": 1, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "headers": 2, "headers\\": 1, "headings\\": 1, "help": 1, "here": 4, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "however": 2, "href=\\\\\\": 3, "html": 1, "html\\": 1, "https": 2, "hydrate": 2, "hydratefallback": 2, "hydratefallback\\": 1, "hydrateroot": 3, "hydrateroot\\u003c/code\\u003e": 1, "hydrating": 4, "icon": 1, "icon-link\\\\\\": 1, "id=\\\\\\": 1, "if": 8, "import": 8, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 12, "inc": 1, "index": 3, "initial": 1, "initialize": 4, "insertbefore": 1, "integrating": 1, "interactions": 1, "into": 2, "introduction": 1, "is": 7, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "iterative": 1, "javascript": 2, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "jsx": 1, "jsx\\u003c/code\\u003e": 1, "key": 4, "know": 1, "lazy": 3, "learning": 1, "let": 3, "libraries": 2, "licensed": 1, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "markup": 4, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 10, "module\\": 1, "module\\u003c/a\\u003e": 2, "moduleaction": 2, "modules": 6, "modules\\": 3, "most": 1, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 1, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 3, "npx": 1, "null": 1, "number": 1, "of": 5, "on": 6, "once": 1, "one": 1, "open": 1, "optimization": 2, "optimization\\": 1, "or": 3, "order\\": 1, "other": 5, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "piece": 2, "pipethrough": 1, "point": 2, "positions": 2, "postcss": 2, "postcss\\": 1, "precedence": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "providers": 2, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "react": 9, "react-dom/client": 1, "react-router-scroll-positions": 1, "reactdom": 1, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regular": 3, "related": 1, "released": 2, "remix": 14, "remix\\": 2, "remixbrowser": 1, "removechild": 2, "removeitem": 1, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 1, "responsible": 2, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "reveal": 1, "reveal\\u003c/code\\u003e": 1, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 12, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run": 2, "run/docs/file-conventions/entry": 1, "run\\": 1, "running": 1, "runs": 2, "runtimes": 3, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "server": 21, "server\\": 3, "server\\\\\\": 2, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "side": 2, "simplifying": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "spa": 3, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "starttransition": 2, "state": 6, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "strictmode": 1, "style=\\\\\\": 21, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 3, "support\\": 1, "tabindex=\\\\\\": 1, "tailwind": 2, "tailwind\\": 1, "take": 2, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 4, "the": 24, "this": 9, "through": 1, "title\\": 1, "tls": 2, "tls\\": 1, "to": 16, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 6, "true\\\\\\": 3, "try": 1, "ts": 2, "ts\\": 1, "tsx": 1, "tsx\\\\\\": 4, "tsx\\u003c/code\\u003e": 1, "tutorial": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "typically": 1, "ui": 2, "ui\\": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "uses": 2, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 23, "variables": 2, "variables\\": 1, "view": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "want": 2, "way": 1, "when": 1, "while": 1, "why": 1, "will": 6, "window": 11, "with": 4, "writes": 2, "writes\\": 1, "you": 15, "your": 9, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 4204 }, { "id": "49b6e3b3912739b6ac58fcc3", "doc_id": "bde65f995b76d2129100f71e", "title": "entry.client | Remix", "url": "https://v2.remix.run/docs/file-conventions/entry.client", "type": "html", "source": "remix:routes", "path": "devour_data/docs/entry.client---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsentry.clientGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite entry.client By default, Remix will handle hydrating your app on the client for you. If you want to customize this behavior, you can run npx remix reveal to generate a app/entry.client.tsx (or .jsx) that will take precedence. This file is the entry point for the browser and is responsible for hydrating the markup generated by the server in your server entry module; however, you can also initialize any other client-side code here. Typically, this module uses ReactDOM.hydrateRoot to hydrate the markup already generated on the server in your server entry module. Here's a basic example: import { RemixBrowser } from \"@remix-run/react\"; import { startTransition, StrictMode } from \"react\"; import { hydrateRoot } from \"react-dom/client\"; startTransition(() =\u003e { hydrateRoot( document, \u003cStrictMode\u003e \u003cRemixBrowser /\u003e \u003c/StrictMode\u003e ); }); This is the first piece of code that runs in the browser. You can initialize client side libraries, add client-only providers, etc.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_961\\\":-5,\\\"_962\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":960},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"docs/file-conventions/entry.client.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"entryclient\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#entryclient\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eentry.client\\u003c/h1\\u003e\\\\n\\u003cp\\u003eBy default, Remix will handle hydrating your app on the client for you. If you want to customize this behavior, you can run \\u003ccode\\u003enpx remix reveal\\u003c/code\\u003e to generate a \\u003ccode\\u003eapp/entry.client.tsx\\u003c/code\\u003e (or \\u003ccode\\u003e.jsx\\u003c/code\\u003e) that will take precedence. This file is the entry point for the browser and is responsible for hydrating the markup generated by the server in your \\u003ca href=\\\\\\\"./entry.server\\\\\\\"\\u003eserver entry module\\u003c/a\\u003e; however, you can also initialize any other client-side code here.\\u003c/p\\u003e\\\\n\\u003cp\\u003eTypically, this module uses \\u003ccode\\u003eReactDOM.hydrateRoot\\u003c/code\\u003e to hydrate the markup already generated on the server in your \\u003ca href=\\\\\\\"./entry.server\\\\\\\"\\u003eserver entry module\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eHere's a basic example:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/entry.client.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/entry.client.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eRemixBrowser\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estartTransition\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eStrictMode\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ereact\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehydrateRoot\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ereact-dom/client\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003estartTransition\\u003c/span\\u003e(() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehydrateRoot\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edocument\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eStrictMode\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRemixBrowser\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eStrictMode\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThis is the first piece of code that runs in the browser. You can initialize client side libraries, add client-only providers, etc.\\u003c/p\\u003e\\\",\\\"docs/file-conventions/entry.client\\\",\\\"headings\\\",[],[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#entryclient\\\\\\": 1, "$\\": 1, "$rc": 3, "--base05": 1, "--base08": 5, "--base0a": 3, "--base0b": 3, "--base0d": 3, "--base0e": 6, "-1\\\\\\": 1, "-5": 2, "/$": 1, "//v2": 2, "/\u003e": 1, "/\\u003cspan": 1, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/entry": 2, "0===e": 1, "10": 44, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 2, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "1\\\\\\": 1, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 1, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 1, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 1, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "97": 1, "98": 1, "99": 1, "9\\\\\\": 1, "\u003c/strictmode\u003e": 1, "\u003cremixbrowser": 1, "\u003cstrictmode\u003e": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 2, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/react": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 26, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 7, "\\n": 1, "\\u0026#x3c": 3, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ehere": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003etypically": 1, "\\u003ca": 2, "\\u003ccode\\u003e": 1, "\\u003ccode\\u003eapp/entry": 1, "\\u003ccode\\u003enpx": 1, "\\u003ccode\\u003ereactdom": 1, "\\u003ch1": 1, "\\u003cspan": 15, "\\u003e": 7, "\\u003e=\\u003e\\u003c/span\\u003e": 1, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eentry": 1, "\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003e\\u003cspan": 1, "\\u003e\\u003cpre": 1, "\\u003e\\u003cspan": 5, "\\u003edocument\\u003c/span\\u003e": 1, "\\u003efrom\\u003c/span\\u003e": 3, "\\u003ehydrateroot\\u003c/span\\u003e": 2, "\\u003eimport\\u003c/span\\u003e": 3, "\\u003ereact-dom/client\\u003c/span\\u003e\\\\\\": 1, "\\u003ereact\\u003c/span\\u003e\\\\\\": 1, "\\u003eremixbrowser\\u003c/span\\u003e": 2, "\\u003eserver": 2, "\\u003estarttransition\\u003c/span\\u003e": 2, "\\u003estrictmode\\u003c/span\\u003e": 1, "\\u003estrictmode\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 32, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 152, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 1, "_958\\": 1, "_961\\": 1, "_962\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "add": 2, "all": 1, "already": 2, "also": 2, "an": 1, "and": 11, "any": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 4, "app/entry": 3, "approach": 1, "aria-hidden=\\\\\\": 1, "as": 3, "asked": 1, "asset": 3, "at": 1, "attrs\\": 1, "await\\": 1, "b=document": 1, "backend": 3, "basename": 1, "basic": 2, "be": 1, "been": 2, "before": 1, "behavior": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 7, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "by": 3, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "can": 7, "catch": 1, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 13, "cli": 5, "cli\\": 1, "client": 24, "client-only": 2, "client-q2ogymm2": 1, "client-side": 2, "client\\": 3, "client\\u003c/h1\\u003e\\\\n\\u003cp\\u003eby": 1, "clientaction": 2, "clientaction\\": 1, "clientgetting": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "code": 8, "codeblock-line\\\\\\": 12, "color": 21, "community": 3, "community\\": 1, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 1, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 15, "css\\": 1, "customize": 2, "d=c": 2, "data": 16, "data-code-block=\\\\\\": 1, "data-filename=\\\\\\": 2, "data-lang=\\\\\\": 2, "data-line-number=\\\\\\": 12, "data-line-numbers=\\\\\\": 2, "data=": 1, "data\\": 2, "default": 2, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "development": 3, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 1, "doc\\": 1, "docs/file-conventions/entry": 2, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsentry": 1, "document": 2, "done": 1, "e--": 1, "e=0": 1, "else": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 14, "entryclient\\\\\\": 1, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "etc": 2, "everything": 1, "example": 2, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "extract": 2, "extract\\": 1, "f=a": 1, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 11, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "first": 2, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "for": 12, "form": 11, "form\\": 1, "found": 3, "frequently": 1, "from": 9, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 1, "future": 4, "generate": 2, "generated": 4, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "handle": 4, "handle\\": 1, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "headers": 2, "headers\\": 1, "headings\\": 1, "help": 1, "here": 4, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "however": 2, "href=\\\\\\": 3, "html": 1, "html\\": 1, "https": 2, "hydrate": 2, "hydratefallback": 2, "hydratefallback\\": 1, "hydrateroot": 3, "hydrateroot\\u003c/code\\u003e": 1, "hydrating": 4, "icon": 1, "icon-link\\\\\\": 1, "id=\\\\\\": 1, "if": 8, "import": 8, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 12, "inc": 1, "index": 3, "initial": 1, "initialize": 4, "insertbefore": 1, "integrating": 1, "interactions": 1, "into": 2, "introduction": 1, "is": 7, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "iterative": 1, "javascript": 2, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "jsx": 1, "jsx\\u003c/code\\u003e": 1, "key": 4, "know": 1, "lazy": 3, "learning": 1, "let": 3, "libraries": 2, "licensed": 1, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "markup": 4, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 10, "module\\": 1, "module\\u003c/a\\u003e": 2, "moduleaction": 2, "modules": 6, "modules\\": 3, "most": 1, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 1, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 3, "npx": 1, "null": 1, "number": 1, "of": 5, "on": 6, "once": 1, "one": 1, "open": 1, "optimization": 2, "optimization\\": 1, "or": 3, "order\\": 1, "other": 5, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "piece": 2, "pipethrough": 1, "point": 2, "positions": 2, "postcss": 2, "postcss\\": 1, "precedence": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "providers": 2, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "react": 9, "react-dom/client": 1, "react-router-scroll-positions": 1, "reactdom": 1, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regular": 3, "related": 1, "released": 2, "remix": 14, "remix\\": 2, "remixbrowser": 1, "removechild": 2, "removeitem": 1, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 1, "responsible": 2, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "reveal": 1, "reveal\\u003c/code\\u003e": 1, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 12, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run": 2, "run/docs/file-conventions/entry": 1, "run\\": 1, "running": 1, "runs": 2, "runtimes": 3, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "server": 21, "server\\": 3, "server\\\\\\": 2, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "side": 2, "simplifying": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "spa": 3, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "starttransition": 2, "state": 6, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "strictmode": 1, "style=\\\\\\": 21, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 3, "support\\": 1, "tabindex=\\\\\\": 1, "tailwind": 2, "tailwind\\": 1, "take": 2, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 4, "the": 24, "this": 9, "through": 1, "title\\": 1, "tls": 2, "tls\\": 1, "to": 16, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 6, "true\\\\\\": 3, "try": 1, "ts": 2, "ts\\": 1, "tsx": 1, "tsx\\\\\\": 4, "tsx\\u003c/code\\u003e": 1, "tutorial": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "typically": 1, "ui": 2, "ui\\": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "uses": 2, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 23, "variables": 2, "variables\\": 1, "view": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "want": 2, "way": 1, "when": 1, "while": 1, "why": 1, "will": 6, "window": 11, "with": 4, "writes": 2, "writes\\": 1, "you": 15, "your": 9, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 4204 }, { "id": "3d2568d06cb9ce61dbd375a2", "doc_id": "e173f0a7db451153b8399809", "title": "entry.server | Remix", "url": "https://v2.remix.run/docs/file-conventions/entry.server", "type": "html", "source": "remix:does", "path": "devour_data/docs/entry.server---remix-e173f0a7.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsentry.serverGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pagehandleDataRequesthandleErrorStreaming Rendering ErrorsThrown ResponsesOn this pagehandleDataRequesthandleErrorStreaming Rendering ErrorsThrown Responsesentry.server By default, Remix will handle generating the HTTP Response for you. If you want to customize this behavior, you can run npx remix reveal to generate an app/entry.server.tsx (or .jsx) that will take precedence. The default export of this module is a function that lets you create the response, including HTTP status, headers, and HTML, giving you full control over the way the markup is generated and sent to the client. This module should render the markup for the current page using a \u003cRemixServer\u003e element with the context and url for the current request. This markup will (optionally) be re-hydrated once JavaScript loads in the browser using the browser entry module. handleDataRequest You can export an optional handleDataRequest function that will allow you to modify the response of a data request. These are the requests that do not render HTML but rather return the loader and action data to the browser once client-side hydration has occurred. export function handleDataRequest( response: Response, { request, params, context, }: LoaderFunctionArgs | ActionFunctionArgs ) { response.headers.set(\"X-Custom-Header\", \"value\"); return response; } handleError By default, Remix will log encountered server-side errors to the console. If you'd like more control over the logging, or would like to also report these errors to an external service, then you can export an optional handleError function which will give you control (and will disable the built-in error logging). export function handleError( error: unknown, { request, params, context, }: LoaderFunctionArgs | ActionFunctionArgs ) { if (!request.signal.aborted) { sendErrorToErrorReportingService(error); console.error(formatErrorForJsonLogging(error)); } } Note that you generally want to avoid logging when the request was aborted, since Remix's cancellation and race-condition handling can cause a lot of requests to be aborted. Streaming Rendering Errors When you are streaming your HTML responses via renderToPipeableStream or renderToReadableStream, your own handleError implementation will only handle errors encountered during the initial shell render. If you encounter a rendering error during subsequent streamed rendering, you will need to handle these errors manually since the Remix server has already sent the Response by that point. For renderToPipeableStream, you can handle these errors in the onError callback function. You will need to toggle a boolean in onShellReady so you know if the error was a shell rendering error (and can be ignored) or an async rendering error (and must be handled). For an example, please refer to the default entry.server.tsx for Node. For renderToReadableStream, you can handle these errors in the onError callback function For an example, please refer to the default entry.server.tsx for Cloudflare Thrown Responses Note that this does not handle thrown Response instances from your loader/action functions. The intention of this handler is to find bugs in your code which result in unexpected thrown errors. If you are detecting a scenario and throwing a 401/404/etc. Response in your loader/action then it's an expected flow handled by your code. If you also wish to log or send those to an external service, that should be done at the time you throw the response.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_976\\\":-5,\\\"_977\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":975},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"docs/file-conventions/entry.server.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"entryserver\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#entryserver\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eentry.server\\u003c/h1\\u003e\\\\n\\u003cp\\u003eBy default, Remix will handle generating the HTTP Response for you. If you want to customize this behavior, you can run \\u003ccode\\u003enpx remix reveal\\u003c/code\\u003e to generate an \\u003ccode\\u003eapp/entry.server.tsx\\u003c/code\\u003e (or \\u003ccode\\u003e.jsx\\u003c/code\\u003e) that will take precedence. The \\u003ccode\\u003edefault\\u003c/code\\u003e export of this module is a function that lets you create the response, including HTTP status, headers, and HTML, giving you full control over the way the markup is generated and sent to the client.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThis module should render the markup for the current page using a \\u003ccode\\u003e\\u0026#x3C;RemixServer\\u003e\\u003c/code\\u003e element with the \\u003ccode\\u003econtext\\u003c/code\\u003e and \\u003ccode\\u003eurl\\u003c/code\\u003e for the current request. This markup will (optionally) be re-hydrated once JavaScript loads in the browser using the \\u003ca href=\\\\\\\"./entry.client\\\\\\\"\\u003ebrowser entry module\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"handledatarequest\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#handledatarequest\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ehandleDataRequest\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eYou can export an optional \\u003ccode\\u003ehandleDataRequest\\u003c/code\\u003e function that will allow you to modify the response of a data request. These are the requests that do not render HTML but rather return the loader and action data to the browser once client-side hydration has occurred.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehandleDataRequest\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eresponse\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eResponse\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtext\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e|\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eresponse\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eheaders\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eset\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eX-Custom-Header\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eresponse\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"handleerror\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#handleerror\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ehandleError\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eBy default, Remix will log encountered server-side errors to the console. If you'd like more control over the logging, or would like to also report these errors to an external service, then you can export an optional \\u003ccode\\u003ehandleError\\u003c/code\\u003e function which will give you control (and will disable the built-in error logging).\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehandleError\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eunknown\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtext\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e|\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esignal\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eaborted\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esendErrorToErrorReportingService\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econsole\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eerror\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformatErrorForJsonLogging\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e));\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cem\\u003eNote that you generally want to avoid logging when the request was aborted, since Remix's cancellation and race-condition handling can cause a lot of requests to be aborted.\\u003c/em\\u003e\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"streaming-rendering-errors\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#streaming-rendering-errors\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eStreaming Rendering Errors\\u003c/h3\\u003e\\\\n\\u003cp\\u003eWhen you are streaming your HTML responses via \\u003ca href=\\\\\\\"https://react.dev/reference/react-dom/server/renderToPipeableStream\\\\\\\"\\u003e\\u003ccode\\u003erenderToPipeableStream\\u003c/code\\u003e\\u003c/a\\u003e or \\u003ca href=\\\\\\\"https://react.dev/reference/react-dom/server/renderToReadableStream\\\\\\\"\\u003e\\u003ccode\\u003erenderToReadableStream\\u003c/code\\u003e\\u003c/a\\u003e, your own \\u003ccode\\u003ehandleError\\u003c/code\\u003e implementation will only handle errors encountered during the initial shell render. If you encounter a rendering error during subsequent streamed rendering, you will need to handle these errors manually since the Remix server has already sent the Response by that point.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eFor \\u003ccode\\u003erenderToPipeableStream\\u003c/code\\u003e, you can handle these errors in the \\u003ccode\\u003eonError\\u003c/code\\u003e callback function. You will need to toggle a boolean in \\u003ccode\\u003eonShellReady\\u003c/code\\u003e so you know if the error was a shell rendering error (and can be ignored) or an async rendering error (and must be handled).\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eFor an example, please refer to the default \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/main/packages/remix-dev/config/defaults/entry.server.node.tsx\\\\\\\"\\u003e\\u003ccode\\u003eentry.server.tsx\\u003c/code\\u003e\\u003c/a\\u003e for Node.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eFor \\u003ccode\\u003erenderToReadableStream\\u003c/code\\u003e, you can handle these errors in the \\u003ccode\\u003eonError\\u003c/code\\u003e callback function\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eFor an example, please refer to the default \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/main/packages/remix-dev/config/defaults/entry.server.cloudflare.tsx\\\\\\\"\\u003e\\u003ccode\\u003eentry.server.tsx\\u003c/code\\u003e\\u003c/a\\u003e for Cloudflare\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"thrown-responses\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#thrown-responses\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eThrown Responses\\u003c/h3\\u003e\\\\n\\u003cp\\u003eNote that this does not handle thrown \\u003ccode\\u003eResponse\\u003c/code\\u003e instances from your \\u003ccode\\u003eloader\\u003c/code\\u003e/\\u003ccode\\u003eaction\\u003c/code\\u003e functions. The intention of this handler is to find bugs in your code which result in unexpected thrown errors. If you are detecting a scenario and throwing a 401/404/etc. \\u003ccode\\u003eResponse\\u003c/code\\u003e in your \\u003ccode\\u003eloader\\u003c/code\\u003e/\\u003ccode\\u003eaction\\u003c/code\\u003e then it's an expected flow handled by your code. If you also wish to log or send those to an external service, that should be done at the time you throw the response.\\u003c/p\\u003e\\\",\\\"docs/file-conventions/entry.server\\\",\\\"headings\\\",[960,965,968,972],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"\\u003ccode\\u003ehandleDataRequest\\u003c/code\\u003e\\\",\\\"handledatarequest\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"\\u003ccode\\u003ehandleError\\u003c/code\\u003e\\\",\\\"handleerror\\\",{\\\"_961\\\":969,\\\"_955\\\":970,\\\"_24\\\":971},\\\"h3\\\",\\\"Streaming Rendering Errors\\\",\\\"streaming-rendering-errors\\\",{\\\"_961\\\":969,\\\"_955\\\":973,\\\"_24\\\":974},\\\"Thrown Responses\\\",\\\"thrown-responses\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#entryserver\\\\\\": 1, "#handledatarequest\\\\\\": 1, "#handleerror\\\\\\": 1, "#streaming-rendering-errors\\\\\\": 1, "#thrown-responses\\\\\\": 1, "$\\": 1, "$rc": 3, "--base05": 2, "--base08": 15, "--base0a": 5, "--base0b": 2, "--base0c": 1, "--base0d": 10, "--base0e": 11, "-1\\\\\\": 5, "-5": 2, "/$": 1, "//github": 2, "//react": 2, "//v2": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/entry": 1, "0===e": 1, "10": 44, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 2, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 2, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 2, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "1\\\\\\": 2, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 2, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 2, "40": 1, "400": 1, "401": 1, "401/404/etc": 2, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 2, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 2, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 2, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 2, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 2, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 2, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 2, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "98": 1, "99": 1, "9\\\\\\": 2, "\u003cremixserver\u003e": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 51, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cem\\u003enote": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 20, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003efor": 1, "\\n": 1, "\\u003c/em\\u003e\\u003c/p\\u003e\\\\n\\u003ch3": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003efor": 1, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 2, "\\u003c/p\\u003e\\\\n\\u003ch2": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003efor": 1, "\\u003c/span\\u003e": 4, "\\u003c/span\\u003e\\u003cspan": 1, "\\u003ca": 5, "\\u003ccode\\u003e": 1, "\\u003ccode\\u003e\\u0026#x3c": 1, "\\u003ccode\\u003eapp/entry": 1, "\\u003ccode\\u003econtext\\u003c/code\\u003e": 1, "\\u003ccode\\u003edefault\\u003c/code\\u003e": 1, "\\u003ccode\\u003ehandledatarequest\\u003c/code\\u003e": 1, "\\u003ccode\\u003ehandledatarequest\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003ehandleerror\\u003c/code\\u003e": 2, "\\u003ccode\\u003ehandleerror\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003eloader\\u003c/code\\u003e/\\u003ccode\\u003eaction\\u003c/code\\u003e": 2, "\\u003ccode\\u003enpx": 1, "\\u003ccode\\u003eonerror\\u003c/code\\u003e": 2, "\\u003ccode\\u003eonshellready\\u003c/code\\u003e": 1, "\\u003ccode\\u003erendertopipeablestream\\u003c/code\\u003e": 1, "\\u003ccode\\u003erendertoreadablestream\\u003c/code\\u003e": 1, "\\u003ccode\\u003eresponse\\u003c/code\\u003e": 2, "\\u003ccode\\u003eurl\\u003c/code\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 39, "\\u003e": 27, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ehandledatarequest\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ehandleerror\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eby": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eentry": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003estreaming": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ethrown": 1, "\\u003e\\u003ca": 5, "\\u003e\\u003ccode\\u003e\\u003cspan": 2, "\\u003e\\u003ccode\\u003eentry": 2, "\\u003e\\u003ccode\\u003erendertopipeablestream\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003erendertoreadablestream\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003cpre": 2, "\\u003e\\u003cspan": 7, "\\u003eaborted\\u003c/span\\u003e": 1, "\\u003eactionfunctionargs\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ebrowser": 1, "\\u003econsole\\u003c/span\\u003e": 1, "\\u003econtext\\u003c/span\\u003e": 2, "\\u003eerror\\u003c/span\\u003e": 3, "\\u003eerror\\u003c/span\\u003e\\u003cspan": 1, "\\u003eexport\\u003c/span\\u003e": 2, "\\u003eformaterrorforjsonlogging\\u003c/span\\u003e": 1, "\\u003efunction\\u003c/span\\u003e": 2, "\\u003ehandledatarequest\\u003c/span\\u003e": 1, "\\u003ehandleerror\\u003c/span\\u003e": 1, "\\u003eheaders\\u003c/span\\u003e": 1, "\\u003eif\\u003c/span\\u003e": 1, "\\u003eloaderfunctionargs\\u003c/span\\u003e": 2, "\\u003eparams\\u003c/span\\u003e": 2, "\\u003erequest\\u003c/span\\u003e": 3, "\\u003eresponse\\u003c/span\\u003e": 3, "\\u003eresponse\\u003c/span\\u003e\\u003cspan": 1, "\\u003ereturn\\u003c/span\\u003e": 1, "\\u003esenderrortoerrorreportingservice\\u003c/span\\u003e": 1, "\\u003eset\\u003c/span\\u003e": 1, "\\u003esignal\\u003c/span\\u003e": 1, "\\u003eunknown\\u003c/span\\u003e": 1, "\\u003evalue\\u003c/span\\u003e\\\\\\": 1, "\\u003ex-custom-header\\u003c/span\\u003e\\\\\\": 1, "\\u003e|\\u003c/span\\u003e": 2, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 32, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 156, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 5, "_958\\": 1, "_961\\": 4, "_976\\": 1, "_977\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "aborted": 5, "about": 1, "accessibility\\": 1, "action": 2, "action\\": 1, "actiondata\\": 1, "actionfunctionargs": 2, "adapter": 3, "adapters": 3, "all": 1, "allow": 2, "already": 2, "also": 4, "an": 19, "and": 27, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 2, "app/entry": 1, "approach": 1, "are": 6, "aria-hidden=\\\\\\": 5, "as": 3, "asked": 1, "asset": 3, "async": 2, "at": 3, "attrs\\": 1, "avoid": 2, "await\\": 1, "b=document": 1, "backend": 3, "basename": 1, "be": 11, "been": 2, "before": 1, "behavior": 2, "boolean": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 8, "bugs": 2, "built": 1, "built-in": 2, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 2, "by": 6, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "callback": 4, "can": 15, "cancellation": 2, "catch": 1, "cause": 2, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 29, "cli": 5, "cli\\": 1, "client": 14, "client-q2ogymm2": 1, "client-side": 2, "client\\": 2, "client\\\\\\": 1, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cloudflare": 2, "cloudflare\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "code": 8, "codeblock-line\\\\\\": 24, "color": 46, "com/remix-run/remix/blob/main/packages/remix-dev/config/defaults/entry": 2, "community": 3, "community\\": 1, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 4, "constraints": 2, "constraints\\": 1, "context": 3, "contributing": 3, "contributing\\": 1, "control": 6, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create": 2, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 15, "css\\": 1, "current": 4, "customize": 2, "d=c": 2, "data": 20, "data-code-block=\\\\\\": 2, "data-lang=\\\\\\": 4, "data-line-number=\\\\\\": 24, "data-line-numbers=\\\\\\": 4, "data=": 1, "data\\": 2, "default": 9, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "detecting": 2, "dev": 3, "dev/reference/react-dom/server/rendertopipeablestream\\\\\\": 1, "dev/reference/react-dom/server/rendertoreadablestream\\\\\\": 1, "development": 3, "disable": 2, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 3, "doc\\": 1, "docs/file-conventions/entry": 2, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsentry": 1, "document": 1, "does": 2, "done": 3, "during": 4, "e--": 1, "e=0": 1, "element": 2, "else": 2, "encounter": 2, "encountered": 4, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 11, "entryserver\\\\\\": 1, "environment": 3, "error": 20, "errorboundary": 2, "errorboundary\\": 1, "errors": 15, "errors\\": 2, "errors\\u003c/h3\\u003e\\\\n\\u003cp\\u003ewhen": 1, "errorsthrown": 2, "everything": 1, "example": 4, "examples": 1, "execution": 2, "execution\\": 1, "expected": 2, "explanation": 2, "explanation\\": 1, "export": 8, "external": 4, "extract": 2, "extract\\": 1, "f=a": 1, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "find": 2, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 4, "flow\\": 1, "for": 20, "form": 11, "form\\": 1, "formaterrorforjsonlogging": 1, "found": 3, "frequently": 1, "from": 8, "frontend": 2, "frontend\\": 1, "full": 2, "fullstack": 3, "function": 12, "function\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003efor": 1, "functions": 2, "future": 4, "generally": 2, "generate": 2, "generated": 2, "generating": 2, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "give": 2, "giving": 2, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "h3\\": 1, "handle": 14, "handle\\": 1, "handled": 4, "handledatarequest": 3, "handledatarequest\\": 1, "handledatarequest\\\\\\": 1, "handleerror": 4, "handleerror\\": 1, "handleerror\\\\\\": 1, "handler": 2, "handling": 6, "handling\\": 2, "has": 6, "hascontent\\": 1, "headers": 5, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 1, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href=\\\\\\": 10, "html": 7, "html\\": 1, "http": 4, "https": 6, "hydratefallback": 2, "hydratefallback\\": 1, "hydration": 2, "icon": 5, "icon-link\\\\\\": 5, "id=\\\\\\": 5, "if": 19, "ignored": 2, "implementation": 2, "import": 5, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 20, "inc": 1, "including": 2, "index": 3, "initial": 3, "insertbefore": 1, "instances": 2, "integrating": 1, "intention": 2, "interactions": 1, "into": 2, "introduction": 1, "is": 7, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 2, "iterative": 1, "javascript": 4, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "jsx": 1, "jsx\\u003c/code\\u003e": 1, "key": 4, "know": 3, "lazy": 3, "learning": 1, "let": 3, "lets": 2, "licensed": 1, "like": 4, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "loader": 4, "loader/action": 2, "loader\\": 1, "loaderdata\\": 1, "loaderfunctionargs": 2, "loading": 3, "loading\\": 1, "loads": 2, "local": 3, "localhost\\": 1, "log": 4, "logging": 6, "lot": 2, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "manually": 2, "markup": 6, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "modify": 2, "module": 11, "module\\": 1, "module\\u003c/a\\u003e": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "more": 2, "most": 1, "must": 2, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 5, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "node": 3, "nodetype": 1, "noindex\\": 1, "not": 7, "note": 2, "npx": 1, "null": 1, "number": 1, "occurred": 2, "of": 11, "on": 3, "once": 5, "one": 1, "onerror": 2, "only": 2, "onshellready": 1, "open": 1, "optimization": 2, "optimization\\": 1, "optional": 4, "optionally": 2, "or": 11, "order\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "over": 4, "own": 2, "page": 2, "pagehandledatarequesthandleerrorstreaming": 2, "param": 2, "param\\": 1, "params": 2, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "please": 4, "point": 2, "positions": 2, "postcss": 2, "postcss\\": 1, "precedence": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "race-condition": 2, "random": 1, "rather": 2, "re-hydrated": 2, "react": 8, "react-router-scroll-positions": 1, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "refer": 4, "regular": 3, "related": 1, "released": 2, "remix": 20, "remix\\": 2, "remixserver\\u003e\\u003c/code\\u003e": 1, "removechild": 2, "removeitem": 1, "render": 6, "rendering": 13, "rendertopipeablestream": 2, "rendertoreadablestream": 2, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "report": 2, "request": 10, "requests": 4, "resource": 3, "resources": 1, "response": 16, "responses": 3, "responses\\": 1, "responses\\u003c/h3\\u003e\\\\n\\u003cp\\u003enote": 1, "responsesentry": 1, "responseson": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "result": 2, "return": 3, "reveal": 1, "reveal\\u003c/code\\u003e": 1, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 12, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run": 2, "run/docs/file-conventions/entry": 1, "run\\": 1, "running": 1, "runtimes": 3, "scenario": 2, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "send": 2, "senderrortoerrorreportingservice": 1, "sent": 4, "server": 29, "server-side": 2, "server\\": 4, "server\\u003c/h1\\u003e\\\\n\\u003cp\\u003eby": 1, "servergetting": 1, "service": 4, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 1, "shell": 4, "shopify": 1, "should": 4, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "signal": 1, "simplifying": 1, "since": 4, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "so": 2, "spa": 3, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "status": 2, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streamed": 2, "streaming": 6, "streaming-rendering-errors\\": 1, "streaming-rendering-errors\\\\\\": 1, "streaming\\": 1, "style=\\\\\\": 46, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "subsequent": 2, "support": 3, "support\\": 1, "tabindex=\\\\\\": 5, "tailwind": 2, "tailwind\\": 1, "take": 2, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 16, "the": 68, "then": 4, "these": 10, "this": 15, "those": 2, "through": 1, "throw": 2, "throwing": 2, "thrown": 6, "thrown-responses\\": 1, "thrown-responses\\\\\\": 1, "time": 2, "title\\": 1, "tls": 2, "tls\\": 1, "to": 44, "toc\\": 1, "toggle": 2, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 6, "true\\\\\\": 9, "try": 1, "ts": 2, "ts\\": 1, "tsx": 3, "tsx\\\\\\": 6, "tsx\\u003c/code\\u003e": 1, "tsx\\u003c/code\\u003e\\u003c/a\\u003e": 2, "tutorial": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 2, "ui\\": 1, "under": 1, "unexpected": 2, "unknown": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 4, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "value": 1, "vanilla": 3, "var": 48, "variables": 2, "variables\\": 1, "via": 2, "view": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "want": 4, "was": 4, "way": 3, "when": 4, "which": 4, "while": 1, "why": 1, "will": 22, "window": 11, "wish": 2, "with": 6, "would": 2, "writes": 2, "writes\\": 1, "x-custom-header": 1, "you": 46, "your": 15, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 5261 }, { "id": "ea3d85f8e94d82737ca497fb", "doc_id": "e173f0a7db451153b8399809", "title": "entry.server | Remix", "url": "https://v2.remix.run/docs/file-conventions/entry.server", "type": "html", "source": "remix:routes", "path": "devour_data/docs/entry.server---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsentry.serverGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pagehandleDataRequesthandleErrorStreaming Rendering ErrorsThrown ResponsesOn this pagehandleDataRequesthandleErrorStreaming Rendering ErrorsThrown Responsesentry.server By default, Remix will handle generating the HTTP Response for you. If you want to customize this behavior, you can run npx remix reveal to generate an app/entry.server.tsx (or .jsx) that will take precedence. The default export of this module is a function that lets you create the response, including HTTP status, headers, and HTML, giving you full control over the way the markup is generated and sent to the client. This module should render the markup for the current page using a \u003cRemixServer\u003e element with the context and url for the current request. This markup will (optionally) be re-hydrated once JavaScript loads in the browser using the browser entry module. handleDataRequest You can export an optional handleDataRequest function that will allow you to modify the response of a data request. These are the requests that do not render HTML but rather return the loader and action data to the browser once client-side hydration has occurred. export function handleDataRequest( response: Response, { request, params, context, }: LoaderFunctionArgs | ActionFunctionArgs ) { response.headers.set(\"X-Custom-Header\", \"value\"); return response; } handleError By default, Remix will log encountered server-side errors to the console. If you'd like more control over the logging, or would like to also report these errors to an external service, then you can export an optional handleError function which will give you control (and will disable the built-in error logging). export function handleError( error: unknown, { request, params, context, }: LoaderFunctionArgs | ActionFunctionArgs ) { if (!request.signal.aborted) { sendErrorToErrorReportingService(error); console.error(formatErrorForJsonLogging(error)); } } Note that you generally want to avoid logging when the request was aborted, since Remix's cancellation and race-condition handling can cause a lot of requests to be aborted. Streaming Rendering Errors When you are streaming your HTML responses via renderToPipeableStream or renderToReadableStream, your own handleError implementation will only handle errors encountered during the initial shell render. If you encounter a rendering error during subsequent streamed rendering, you will need to handle these errors manually since the Remix server has already sent the Response by that point. For renderToPipeableStream, you can handle these errors in the onError callback function. You will need to toggle a boolean in onShellReady so you know if the error was a shell rendering error (and can be ignored) or an async rendering error (and must be handled). For an example, please refer to the default entry.server.tsx for Node. For renderToReadableStream, you can handle these errors in the onError callback function For an example, please refer to the default entry.server.tsx for Cloudflare Thrown Responses Note that this does not handle thrown Response instances from your loader/action functions. The intention of this handler is to find bugs in your code which result in unexpected thrown errors. If you are detecting a scenario and throwing a 401/404/etc. Response in your loader/action then it's an expected flow handled by your code. If you also wish to log or send those to an external service, that should be done at the time you throw the response.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_976\\\":-5,\\\"_977\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":975},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"docs/file-conventions/entry.server.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"entryserver\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#entryserver\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eentry.server\\u003c/h1\\u003e\\\\n\\u003cp\\u003eBy default, Remix will handle generating the HTTP Response for you. If you want to customize this behavior, you can run \\u003ccode\\u003enpx remix reveal\\u003c/code\\u003e to generate an \\u003ccode\\u003eapp/entry.server.tsx\\u003c/code\\u003e (or \\u003ccode\\u003e.jsx\\u003c/code\\u003e) that will take precedence. The \\u003ccode\\u003edefault\\u003c/code\\u003e export of this module is a function that lets you create the response, including HTTP status, headers, and HTML, giving you full control over the way the markup is generated and sent to the client.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThis module should render the markup for the current page using a \\u003ccode\\u003e\\u0026#x3C;RemixServer\\u003e\\u003c/code\\u003e element with the \\u003ccode\\u003econtext\\u003c/code\\u003e and \\u003ccode\\u003eurl\\u003c/code\\u003e for the current request. This markup will (optionally) be re-hydrated once JavaScript loads in the browser using the \\u003ca href=\\\\\\\"./entry.client\\\\\\\"\\u003ebrowser entry module\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"handledatarequest\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#handledatarequest\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ehandleDataRequest\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eYou can export an optional \\u003ccode\\u003ehandleDataRequest\\u003c/code\\u003e function that will allow you to modify the response of a data request. These are the requests that do not render HTML but rather return the loader and action data to the browser once client-side hydration has occurred.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehandleDataRequest\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eresponse\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eResponse\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtext\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e|\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eresponse\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eheaders\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eset\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eX-Custom-Header\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eresponse\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"handleerror\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#handleerror\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ehandleError\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eBy default, Remix will log encountered server-side errors to the console. If you'd like more control over the logging, or would like to also report these errors to an external service, then you can export an optional \\u003ccode\\u003ehandleError\\u003c/code\\u003e function which will give you control (and will disable the built-in error logging).\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehandleError\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eunknown\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtext\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e|\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esignal\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eaborted\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esendErrorToErrorReportingService\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econsole\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eerror\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformatErrorForJsonLogging\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e));\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cem\\u003eNote that you generally want to avoid logging when the request was aborted, since Remix's cancellation and race-condition handling can cause a lot of requests to be aborted.\\u003c/em\\u003e\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"streaming-rendering-errors\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#streaming-rendering-errors\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eStreaming Rendering Errors\\u003c/h3\\u003e\\\\n\\u003cp\\u003eWhen you are streaming your HTML responses via \\u003ca href=\\\\\\\"https://react.dev/reference/react-dom/server/renderToPipeableStream\\\\\\\"\\u003e\\u003ccode\\u003erenderToPipeableStream\\u003c/code\\u003e\\u003c/a\\u003e or \\u003ca href=\\\\\\\"https://react.dev/reference/react-dom/server/renderToReadableStream\\\\\\\"\\u003e\\u003ccode\\u003erenderToReadableStream\\u003c/code\\u003e\\u003c/a\\u003e, your own \\u003ccode\\u003ehandleError\\u003c/code\\u003e implementation will only handle errors encountered during the initial shell render. If you encounter a rendering error during subsequent streamed rendering, you will need to handle these errors manually since the Remix server has already sent the Response by that point.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eFor \\u003ccode\\u003erenderToPipeableStream\\u003c/code\\u003e, you can handle these errors in the \\u003ccode\\u003eonError\\u003c/code\\u003e callback function. You will need to toggle a boolean in \\u003ccode\\u003eonShellReady\\u003c/code\\u003e so you know if the error was a shell rendering error (and can be ignored) or an async rendering error (and must be handled).\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eFor an example, please refer to the default \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/main/packages/remix-dev/config/defaults/entry.server.node.tsx\\\\\\\"\\u003e\\u003ccode\\u003eentry.server.tsx\\u003c/code\\u003e\\u003c/a\\u003e for Node.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eFor \\u003ccode\\u003erenderToReadableStream\\u003c/code\\u003e, you can handle these errors in the \\u003ccode\\u003eonError\\u003c/code\\u003e callback function\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eFor an example, please refer to the default \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/main/packages/remix-dev/config/defaults/entry.server.cloudflare.tsx\\\\\\\"\\u003e\\u003ccode\\u003eentry.server.tsx\\u003c/code\\u003e\\u003c/a\\u003e for Cloudflare\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"thrown-responses\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#thrown-responses\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eThrown Responses\\u003c/h3\\u003e\\\\n\\u003cp\\u003eNote that this does not handle thrown \\u003ccode\\u003eResponse\\u003c/code\\u003e instances from your \\u003ccode\\u003eloader\\u003c/code\\u003e/\\u003ccode\\u003eaction\\u003c/code\\u003e functions. The intention of this handler is to find bugs in your code which result in unexpected thrown errors. If you are detecting a scenario and throwing a 401/404/etc. \\u003ccode\\u003eResponse\\u003c/code\\u003e in your \\u003ccode\\u003eloader\\u003c/code\\u003e/\\u003ccode\\u003eaction\\u003c/code\\u003e then it's an expected flow handled by your code. If you also wish to log or send those to an external service, that should be done at the time you throw the response.\\u003c/p\\u003e\\\",\\\"docs/file-conventions/entry.server\\\",\\\"headings\\\",[960,965,968,972],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"\\u003ccode\\u003ehandleDataRequest\\u003c/code\\u003e\\\",\\\"handledatarequest\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"\\u003ccode\\u003ehandleError\\u003c/code\\u003e\\\",\\\"handleerror\\\",{\\\"_961\\\":969,\\\"_955\\\":970,\\\"_24\\\":971},\\\"h3\\\",\\\"Streaming Rendering Errors\\\",\\\"streaming-rendering-errors\\\",{\\\"_961\\\":969,\\\"_955\\\":973,\\\"_24\\\":974},\\\"Thrown Responses\\\",\\\"thrown-responses\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#entryserver\\\\\\": 1, "#handledatarequest\\\\\\": 1, "#handleerror\\\\\\": 1, "#streaming-rendering-errors\\\\\\": 1, "#thrown-responses\\\\\\": 1, "$\\": 1, "$rc": 3, "--base05": 2, "--base08": 15, "--base0a": 5, "--base0b": 2, "--base0c": 1, "--base0d": 10, "--base0e": 11, "-1\\\\\\": 5, "-5": 2, "/$": 1, "//github": 2, "//react": 2, "//v2": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/entry": 1, "0===e": 1, "10": 44, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 2, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 2, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 2, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "1\\\\\\": 2, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 2, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 2, "40": 1, "400": 1, "401": 1, "401/404/etc": 2, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 2, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 2, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 2, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 2, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 2, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 2, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 2, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "98": 1, "99": 1, "9\\\\\\": 2, "\u003cremixserver\u003e": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 51, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cem\\u003enote": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 20, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003efor": 1, "\\n": 1, "\\u003c/em\\u003e\\u003c/p\\u003e\\\\n\\u003ch3": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003efor": 1, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 2, "\\u003c/p\\u003e\\\\n\\u003ch2": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003efor": 1, "\\u003c/span\\u003e": 4, "\\u003c/span\\u003e\\u003cspan": 1, "\\u003ca": 5, "\\u003ccode\\u003e": 1, "\\u003ccode\\u003e\\u0026#x3c": 1, "\\u003ccode\\u003eapp/entry": 1, "\\u003ccode\\u003econtext\\u003c/code\\u003e": 1, "\\u003ccode\\u003edefault\\u003c/code\\u003e": 1, "\\u003ccode\\u003ehandledatarequest\\u003c/code\\u003e": 1, "\\u003ccode\\u003ehandledatarequest\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003ehandleerror\\u003c/code\\u003e": 2, "\\u003ccode\\u003ehandleerror\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003eloader\\u003c/code\\u003e/\\u003ccode\\u003eaction\\u003c/code\\u003e": 2, "\\u003ccode\\u003enpx": 1, "\\u003ccode\\u003eonerror\\u003c/code\\u003e": 2, "\\u003ccode\\u003eonshellready\\u003c/code\\u003e": 1, "\\u003ccode\\u003erendertopipeablestream\\u003c/code\\u003e": 1, "\\u003ccode\\u003erendertoreadablestream\\u003c/code\\u003e": 1, "\\u003ccode\\u003eresponse\\u003c/code\\u003e": 2, "\\u003ccode\\u003eurl\\u003c/code\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 39, "\\u003e": 27, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ehandledatarequest\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ehandleerror\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eby": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eentry": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003estreaming": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ethrown": 1, "\\u003e\\u003ca": 5, "\\u003e\\u003ccode\\u003e\\u003cspan": 2, "\\u003e\\u003ccode\\u003eentry": 2, "\\u003e\\u003ccode\\u003erendertopipeablestream\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003erendertoreadablestream\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003cpre": 2, "\\u003e\\u003cspan": 7, "\\u003eaborted\\u003c/span\\u003e": 1, "\\u003eactionfunctionargs\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ebrowser": 1, "\\u003econsole\\u003c/span\\u003e": 1, "\\u003econtext\\u003c/span\\u003e": 2, "\\u003eerror\\u003c/span\\u003e": 3, "\\u003eerror\\u003c/span\\u003e\\u003cspan": 1, "\\u003eexport\\u003c/span\\u003e": 2, "\\u003eformaterrorforjsonlogging\\u003c/span\\u003e": 1, "\\u003efunction\\u003c/span\\u003e": 2, "\\u003ehandledatarequest\\u003c/span\\u003e": 1, "\\u003ehandleerror\\u003c/span\\u003e": 1, "\\u003eheaders\\u003c/span\\u003e": 1, "\\u003eif\\u003c/span\\u003e": 1, "\\u003eloaderfunctionargs\\u003c/span\\u003e": 2, "\\u003eparams\\u003c/span\\u003e": 2, "\\u003erequest\\u003c/span\\u003e": 3, "\\u003eresponse\\u003c/span\\u003e": 3, "\\u003eresponse\\u003c/span\\u003e\\u003cspan": 1, "\\u003ereturn\\u003c/span\\u003e": 1, "\\u003esenderrortoerrorreportingservice\\u003c/span\\u003e": 1, "\\u003eset\\u003c/span\\u003e": 1, "\\u003esignal\\u003c/span\\u003e": 1, "\\u003eunknown\\u003c/span\\u003e": 1, "\\u003evalue\\u003c/span\\u003e\\\\\\": 1, "\\u003ex-custom-header\\u003c/span\\u003e\\\\\\": 1, "\\u003e|\\u003c/span\\u003e": 2, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 32, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 156, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 5, "_958\\": 1, "_961\\": 4, "_976\\": 1, "_977\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "aborted": 5, "about": 1, "accessibility\\": 1, "action": 2, "action\\": 1, "actiondata\\": 1, "actionfunctionargs": 2, "adapter": 3, "adapters": 3, "all": 1, "allow": 2, "already": 2, "also": 4, "an": 19, "and": 27, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 2, "app/entry": 1, "approach": 1, "are": 6, "aria-hidden=\\\\\\": 5, "as": 3, "asked": 1, "asset": 3, "async": 2, "at": 3, "attrs\\": 1, "avoid": 2, "await\\": 1, "b=document": 1, "backend": 3, "basename": 1, "be": 11, "been": 2, "before": 1, "behavior": 2, "boolean": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 8, "bugs": 2, "built": 1, "built-in": 2, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 2, "by": 6, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "callback": 4, "can": 15, "cancellation": 2, "catch": 1, "cause": 2, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 29, "cli": 5, "cli\\": 1, "client": 14, "client-q2ogymm2": 1, "client-side": 2, "client\\": 2, "client\\\\\\": 1, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cloudflare": 2, "cloudflare\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "code": 8, "codeblock-line\\\\\\": 24, "color": 46, "com/remix-run/remix/blob/main/packages/remix-dev/config/defaults/entry": 2, "community": 3, "community\\": 1, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 4, "constraints": 2, "constraints\\": 1, "context": 3, "contributing": 3, "contributing\\": 1, "control": 6, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create": 2, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 15, "css\\": 1, "current": 4, "customize": 2, "d=c": 2, "data": 20, "data-code-block=\\\\\\": 2, "data-lang=\\\\\\": 4, "data-line-number=\\\\\\": 24, "data-line-numbers=\\\\\\": 4, "data=": 1, "data\\": 2, "default": 9, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "detecting": 2, "dev": 3, "dev/reference/react-dom/server/rendertopipeablestream\\\\\\": 1, "dev/reference/react-dom/server/rendertoreadablestream\\\\\\": 1, "development": 3, "disable": 2, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 3, "doc\\": 1, "docs/file-conventions/entry": 2, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsentry": 1, "document": 1, "does": 2, "done": 3, "during": 4, "e--": 1, "e=0": 1, "element": 2, "else": 2, "encounter": 2, "encountered": 4, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 11, "entryserver\\\\\\": 1, "environment": 3, "error": 20, "errorboundary": 2, "errorboundary\\": 1, "errors": 15, "errors\\": 2, "errors\\u003c/h3\\u003e\\\\n\\u003cp\\u003ewhen": 1, "errorsthrown": 2, "everything": 1, "example": 4, "examples": 1, "execution": 2, "execution\\": 1, "expected": 2, "explanation": 2, "explanation\\": 1, "export": 8, "external": 4, "extract": 2, "extract\\": 1, "f=a": 1, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "find": 2, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 4, "flow\\": 1, "for": 20, "form": 11, "form\\": 1, "formaterrorforjsonlogging": 1, "found": 3, "frequently": 1, "from": 8, "frontend": 2, "frontend\\": 1, "full": 2, "fullstack": 3, "function": 12, "function\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003efor": 1, "functions": 2, "future": 4, "generally": 2, "generate": 2, "generated": 2, "generating": 2, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "give": 2, "giving": 2, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "h3\\": 1, "handle": 14, "handle\\": 1, "handled": 4, "handledatarequest": 3, "handledatarequest\\": 1, "handledatarequest\\\\\\": 1, "handleerror": 4, "handleerror\\": 1, "handleerror\\\\\\": 1, "handler": 2, "handling": 6, "handling\\": 2, "has": 6, "hascontent\\": 1, "headers": 5, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 1, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href=\\\\\\": 10, "html": 7, "html\\": 1, "http": 4, "https": 6, "hydratefallback": 2, "hydratefallback\\": 1, "hydration": 2, "icon": 5, "icon-link\\\\\\": 5, "id=\\\\\\": 5, "if": 19, "ignored": 2, "implementation": 2, "import": 5, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 20, "inc": 1, "including": 2, "index": 3, "initial": 3, "insertbefore": 1, "instances": 2, "integrating": 1, "intention": 2, "interactions": 1, "into": 2, "introduction": 1, "is": 7, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 2, "iterative": 1, "javascript": 4, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "jsx": 1, "jsx\\u003c/code\\u003e": 1, "key": 4, "know": 3, "lazy": 3, "learning": 1, "let": 3, "lets": 2, "licensed": 1, "like": 4, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "loader": 4, "loader/action": 2, "loader\\": 1, "loaderdata\\": 1, "loaderfunctionargs": 2, "loading": 3, "loading\\": 1, "loads": 2, "local": 3, "localhost\\": 1, "log": 4, "logging": 6, "lot": 2, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "manually": 2, "markup": 6, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "modify": 2, "module": 11, "module\\": 1, "module\\u003c/a\\u003e": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "more": 2, "most": 1, "must": 2, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 5, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "node": 3, "nodetype": 1, "noindex\\": 1, "not": 7, "note": 2, "npx": 1, "null": 1, "number": 1, "occurred": 2, "of": 11, "on": 3, "once": 5, "one": 1, "onerror": 2, "only": 2, "onshellready": 1, "open": 1, "optimization": 2, "optimization\\": 1, "optional": 4, "optionally": 2, "or": 11, "order\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "over": 4, "own": 2, "page": 2, "pagehandledatarequesthandleerrorstreaming": 2, "param": 2, "param\\": 1, "params": 2, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "please": 4, "point": 2, "positions": 2, "postcss": 2, "postcss\\": 1, "precedence": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "race-condition": 2, "random": 1, "rather": 2, "re-hydrated": 2, "react": 8, "react-router-scroll-positions": 1, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "refer": 4, "regular": 3, "related": 1, "released": 2, "remix": 20, "remix\\": 2, "remixserver\\u003e\\u003c/code\\u003e": 1, "removechild": 2, "removeitem": 1, "render": 6, "rendering": 13, "rendertopipeablestream": 2, "rendertoreadablestream": 2, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "report": 2, "request": 10, "requests": 4, "resource": 3, "resources": 1, "response": 16, "responses": 3, "responses\\": 1, "responses\\u003c/h3\\u003e\\\\n\\u003cp\\u003enote": 1, "responsesentry": 1, "responseson": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "result": 2, "return": 3, "reveal": 1, "reveal\\u003c/code\\u003e": 1, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 12, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run": 2, "run/docs/file-conventions/entry": 1, "run\\": 1, "running": 1, "runtimes": 3, "scenario": 2, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "send": 2, "senderrortoerrorreportingservice": 1, "sent": 4, "server": 29, "server-side": 2, "server\\": 4, "server\\u003c/h1\\u003e\\\\n\\u003cp\\u003eby": 1, "servergetting": 1, "service": 4, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 1, "shell": 4, "shopify": 1, "should": 4, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "signal": 1, "simplifying": 1, "since": 4, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "so": 2, "spa": 3, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "status": 2, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streamed": 2, "streaming": 6, "streaming-rendering-errors\\": 1, "streaming-rendering-errors\\\\\\": 1, "streaming\\": 1, "style=\\\\\\": 46, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "subsequent": 2, "support": 3, "support\\": 1, "tabindex=\\\\\\": 5, "tailwind": 2, "tailwind\\": 1, "take": 2, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 16, "the": 68, "then": 4, "these": 10, "this": 15, "those": 2, "through": 1, "throw": 2, "throwing": 2, "thrown": 6, "thrown-responses\\": 1, "thrown-responses\\\\\\": 1, "time": 2, "title\\": 1, "tls": 2, "tls\\": 1, "to": 44, "toc\\": 1, "toggle": 2, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 6, "true\\\\\\": 9, "try": 1, "ts": 2, "ts\\": 1, "tsx": 3, "tsx\\\\\\": 6, "tsx\\u003c/code\\u003e": 1, "tsx\\u003c/code\\u003e\\u003c/a\\u003e": 2, "tutorial": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 2, "ui\\": 1, "under": 1, "unexpected": 2, "unknown": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 4, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "value": 1, "vanilla": 3, "var": 48, "variables": 2, "variables\\": 1, "via": 2, "view": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "want": 4, "was": 4, "way": 3, "when": 4, "which": 4, "while": 1, "why": 1, "will": 22, "window": 11, "wish": 2, "with": 6, "would": 2, "writes": 2, "writes\\": 1, "x-custom-header": 1, "you": 46, "your": 15, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 5261 }, { "id": "88ee2bc511c30fb2e3654cf1", "doc_id": "fc9918b541dab1c100c08993", "title": "environment-variables", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/configuration/environment-variables.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/environment-variables.json", "content": "--- title: Environment variables use_cases: \u003e- api keys, configuration, secrets management, build-time config, environment-specific settings tags: - environment - variables - config - vite - secrets - deployment version: '1.0' description: \u003e- Configure public and private environment variables in Solid apps using Vite's built-in support for secure configuration. --- Solid is built on top of [Vite](https://vitejs.dev/), which offers a convenient way to handle environment variables. ## Public Environment Variables Public variables are considered safe to expose to the client-side code. These variables are prefixed with `VITE_` and are injected into the client-side code during compilation time. In the root directory of the project, create a file called `.env`. This file will store environment variables in the `key = value` format. If working with TypeScript it is possible to make such variables type-safe and enable your TypeScript Language Service Provider (LSP) to autocomplete them by creating a file called `env.d.ts` in the root directory of the project. ```typescript interface ImportMetaEnv { readonly VITE_USER_ID: string; readonly VITE_PUBLIC_ENDPOINT: string; } interface ImportMeta { readonly env: ImportMetaEnv; } ``` :::note To prevent accidental exposure of environment variables to the client, only variables prefixed with `VITE_` will be exposed. For example: ```json VITE_SECRET_KEY = 123hello DB_PASSWORD = foobar ``` Only the `VITE_SECRET_KEY` will be exposed to client source code, while `DB_PASSWORD` will not, as shown below. ```jsx console.log(import.meta.env.VITE_SECRET_KEY); // 123hello console.log(import.meta.env.DB_PASSWORD); // undefined ``` ::: ```jsx function MyComponent() { return ( \u003cdiv\u003e \u003ch2\u003e Component with environment variable used{\" \"} {import.meta.env.VITE_VARIABLE_NAME} the value will be replaced during compilation time. \u003c/h2\u003e \u003c/div\u003e ); } ``` ## Private Environment Variables These variables should only be accessed in your backend code, so it's best not to use the `VITE_` prefix for them. Instead, use `process.env` to access them. Depending on the [Nitro preset](https://nitro.build/deploy) chosen, they'll be made available automatically or they will require an external dependency such as [dotenv](https://www.npmjs.com/package/dotenv). ```jsx DB_HOST=\"somedb://192.110.0\" DB_PASSWORD = super_secret_password_hash ``` To access them, within your backend code, use `process.env`. For an example, check the pseudo-code below. ```jsx \"use server\" const client = new DB({ host: process.env.DB_URL, password: process.env.DB_PASSWORD }); } ``` It is also possible to make `process.env` type-safe via the same `env.d.ts` file. ```typescript declare namespace NodeJS { interface ProcessEnv { readonly DB_URL: string readonly DB_PASSWORD: string } } ```", "term_freq": { "##": 2, "---": 2, "//": 2, "//192": 1, "//github": 1, "//nitro": 1, "//vitejs": 1, "//www": 1, "110": 1, "123hello": 2, "\u003c/div\u003e": 1, "\u003c/h2\u003e": 1, "\u003cdiv\u003e": 1, "\u003ch2\u003e": 1, "\u003e-": 2, "access": 2, "accessed": 1, "accidental": 1, "also": 1, "an": 2, "and": 3, "api": 1, "apps": 1, "are": 3, "as": 2, "autocomplete": 1, "automatically": 1, "available": 1, "backend": 2, "be": 5, "below": 2, "best": 1, "build-time": 1, "build/deploy": 1, "built": 1, "built-in": 1, "by": 1, "called": 2, "check": 1, "chosen": 1, "client": 3, "client-side": 2, "code": 5, "com/package/dotenv": 1, "com/solidjs/solid-docs/blob/head/src/routes/configuration/environment-variables": 1, "compilation": 2, "component": 1, "config": 2, "configuration": 2, "configure": 1, "considered": 1, "console": 2, "const": 1, "convenient": 1, "create": 1, "creating": 1, "db": 1, "db_host=": 1, "db_password": 6, "db_url": 2, "declare": 1, "dependency": 1, "depending": 1, "deployment": 1, "description": 1, "dev/": 1, "directory": 2, "dotenv": 1, "during": 2, "enable": 1, "env": 12, "environment": 9, "environment-specific": 1, "environment-variables": 1, "example": 2, "expose": 1, "exposed": 2, "exposure": 1, "external": 1, "file": 4, "foobar": 1, "for": 4, "format": 1, "function": 1, "github-document": 1, "handle": 1, "host": 1, "https": 4, "if": 1, "import": 3, "importmeta": 1, "importmetaenv": 2, "in": 5, "injected": 1, "instead": 1, "interface": 3, "into": 1, "is": 3, "it": 3, "json": 1, "jsx": 4, "key": 1, "keys": 1, "language": 1, "ll": 1, "log": 2, "lsp": 1, "made": 1, "make": 2, "management": 1, "mdx": 1, "meta": 3, "mycomponent": 1, "namespace": 1, "new": 1, "nitro": 1, "nodejs": 1, "not": 2, "note": 1, "npmjs": 1, "of": 4, "offers": 1, "on": 2, "only": 3, "or": 1, "password": 1, "possible": 2, "prefix": 1, "prefixed": 2, "preset": 1, "prevent": 1, "private": 2, "process": 5, "processenv": 1, "project": 2, "provider": 1, "pseudo-code": 1, "public": 3, "readonly": 5, "replaced": 1, "require": 1, "return": 1, "root": 2, "safe": 1, "same": 1, "secrets": 2, "secure": 1, "server": 1, "service": 1, "settings": 1, "should": 1, "shown": 1, "so": 1, "solid": 2, "somedb": 1, "source": 1, "store": 1, "string": 4, "such": 2, "super_secret_password_hash": 1, "support": 1, "tags": 1, "the": 14, "them": 4, "these": 2, "they": 2, "this": 1, "time": 2, "title": 1, "to": 12, "top": 1, "ts": 2, "type-safe": 2, "typescript": 4, "undefined": 1, "use": 4, "use_cases": 1, "used": 1, "using": 1, "value": 2, "variable": 1, "variables": 13, "version": 1, "via": 1, "vite": 3, "vite_": 3, "vite_public_endpoint": 1, "vite_secret_key": 3, "vite_user_id": 1, "vite_variable_name": 1, "way": 1, "which": 1, "while": 1, "will": 6, "with": 4, "within": 1, "working": 1, "your": 3 }, "length": 381 }, { "id": "0ee1bf5b9f409cb4365f3898", "doc_id": "0d36701d3b46d46f9494e929", "title": "error-boundary", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/error-boundary.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/error-boundary-0d36701d.json", "content": "--- title: \u003cErrorBoundary\u003e order: 5 use_cases: \u003e- error handling, production apps, preventing crashes, user experience, debugging, fallback ui tags: - error-handling - components - debugging - fallback - production - stability version: '1.0' description: \u003e- Catch and handle rendering errors in SolidJS components with ErrorBoundary. Display fallback UI when errors occur in children components. --- The `\u003cErrorBoundary\u003e` component catches errors that occur during the rendering or updating of its children and shows a fallback UI instead. This includes: - Errors that occur while rendering JSX. - Errors that occur within `createEffect`, `createMemo`, and other state management primitives. - Errors that occur within `createResource` and other asynchronous state management or data-fetching primitives. However, errors occurring outside the rendering process are **not** captured by error boundaries. For instance: - Errors that occur inside event handlers. - Errors that occur after a `setTimeout`. ## Props ### `fallback` **Type**: `JSX.Element | ((err: any, reset: () =\u003e void) =\u003e JSX.Element)` `fallback` provides content to display when an error occurs. If a function is passed, it receives two parameters: - `err`: The caught error object. - `reset`: A function that forces the `\u003cErrorBoundary\u003e` to re-render its children and clear the error state. If there's an error within the `fallback` itself, however, it is not caught by the same `\u003cErrorBoundary\u003e`. Instead, it will bubble up to any parent error boundaries. ## Example ```tsx import { ErrorBoundary } from \"solid-js\"; import { ErrorProne } from \"./components\"; function Example() { return ( \u003cErrorBoundary fallback={(error, reset) =\u003e ( \u003cdiv\u003e \u003cp\u003e{error.message}\u003c/p\u003e \u003cbutton onClick={reset}\u003eTry Again\u003c/button\u003e \u003c/div\u003e )} \u003e \u003cErrorProne /\u003e \u003c/ErrorBoundary\u003e ); } ```", "term_freq": { "##": 2, "###": 1, "**not**": 1, "**type**": 1, "---": 2, "//github": 1, "/\u003e": 1, "/components": 1, "\u003c/div\u003e": 1, "\u003c/errorboundary\u003e": 1, "\u003c/p\u003e": 1, "\u003cbutton": 1, "\u003cdiv\u003e": 1, "\u003cerrorboundary": 1, "\u003cerrorboundary\u003e": 4, "\u003cerrorprone": 1, "\u003cp\u003e": 1, "=\u003e": 3, "\u003e-": 2, "\u003etry": 1, "after": 1, "again\u003c/button\u003e": 1, "an": 2, "and": 5, "any": 2, "apps": 1, "are": 1, "asynchronous": 1, "boundaries": 2, "bubble": 1, "by": 2, "captured": 1, "catch": 1, "catches": 1, "caught": 2, "children": 3, "clear": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/components/error-boundary": 1, "component": 1, "components": 3, "content": 1, "crashes": 1, "createeffect": 1, "creatememo": 1, "createresource": 1, "data-fetching": 1, "debugging": 2, "description": 1, "display": 2, "during": 1, "element": 2, "err": 2, "error": 9, "error-boundary": 1, "error-handling": 1, "errorboundary": 2, "errorprone": 1, "errors": 9, "event": 1, "example": 2, "experience": 1, "fallback": 7, "fallback=": 1, "for": 1, "forces": 1, "from": 2, "function": 3, "github-document": 1, "handle": 1, "handlers": 1, "handling": 1, "however": 2, "https": 1, "if": 2, "import": 2, "in": 2, "includes": 1, "inside": 1, "instance": 1, "instead": 2, "is": 2, "it": 3, "its": 2, "itself": 1, "jsx": 3, "management": 2, "mdx": 1, "message": 1, "not": 1, "object": 1, "occur": 7, "occurring": 1, "occurs": 1, "of": 1, "onclick=": 1, "or": 2, "order": 1, "other": 2, "outside": 1, "parameters": 1, "parent": 1, "passed": 1, "preventing": 1, "primitives": 2, "process": 1, "production": 2, "props": 1, "provides": 1, "re-render": 1, "receives": 1, "rendering": 4, "reset": 4, "return": 1, "same": 1, "settimeout": 1, "shows": 1, "solid-js": 1, "solidjs": 1, "stability": 1, "state": 3, "tags": 1, "that": 7, "the": 8, "there": 1, "this": 1, "title": 1, "to": 3, "tsx": 1, "two": 1, "ui": 3, "up": 1, "updating": 1, "use_cases": 1, "user": 1, "version": 1, "void": 1, "when": 2, "while": 1, "will": 1, "with": 1, "within": 3 }, "length": 243 }, { "id": "59eb8be5d42ff30949fc12e9", "doc_id": "2979336661d6b8af4dd2be3e", "title": "error-boundary", "url": "file:///tmp/devour-github-216944658/src/routes/reference/components/error-boundary.mdx", "type": "github-document", "source": "solid:solid-router", "path": "devour_data/docs/error-boundary-29793366.json", "content": "--- title: \u003cErrorBoundary\u003e order: 5 use_cases: \u003e- error handling, production apps, preventing crashes, user experience, debugging, fallback ui tags: - error-handling - components - debugging - fallback - production - stability version: '1.0' description: \u003e- Catch and handle rendering errors in SolidJS components with ErrorBoundary. Display fallback UI when errors occur in children components. --- The `\u003cErrorBoundary\u003e` component catches errors that occur during the rendering or updating of its children and shows a fallback UI instead. This includes: - Errors that occur while rendering JSX. - Errors that occur within `createEffect`, `createMemo`, and other state management primitives. - Errors that occur within `createResource` and other asynchronous state management or data-fetching primitives. However, errors occurring outside the rendering process are **not** captured by error boundaries. For instance: - Errors that occur inside event handlers. - Errors that occur after a `setTimeout`. ## Props ### `fallback` **Type**: `JSX.Element | ((err: any, reset: () =\u003e void) =\u003e JSX.Element)` `fallback` provides content to display when an error occurs. If a function is passed, it receives two parameters: - `err`: The caught error object. - `reset`: A function that forces the `\u003cErrorBoundary\u003e` to re-render its children and clear the error state. If there's an error within the `fallback` itself, however, it is not caught by the same `\u003cErrorBoundary\u003e`. Instead, it will bubble up to any parent error boundaries. ## Example ```tsx import { ErrorBoundary } from \"solid-js\"; import { ErrorProne } from \"./components\"; function Example() { return ( \u003cErrorBoundary fallback={(error, reset) =\u003e ( \u003cdiv\u003e \u003cp\u003e{error.message}\u003c/p\u003e \u003cbutton onClick={reset}\u003eTry Again\u003c/button\u003e \u003c/div\u003e )} \u003e \u003cErrorProne /\u003e \u003c/ErrorBoundary\u003e ); } ```", "term_freq": { "##": 2, "###": 1, "**not**": 1, "**type**": 1, "---": 2, "///tmp/devour-github-216944658/src/routes/reference/components/error-boundary": 1, "/\u003e": 1, "/components": 1, "\u003c/div\u003e": 1, "\u003c/errorboundary\u003e": 1, "\u003c/p\u003e": 1, "\u003cbutton": 1, "\u003cdiv\u003e": 1, "\u003cerrorboundary": 1, "\u003cerrorboundary\u003e": 4, "\u003cerrorprone": 1, "\u003cp\u003e": 1, "=\u003e": 3, "\u003e-": 2, "\u003etry": 1, "after": 1, "again\u003c/button\u003e": 1, "an": 2, "and": 5, "any": 2, "apps": 1, "are": 1, "asynchronous": 1, "boundaries": 2, "bubble": 1, "by": 2, "captured": 1, "catch": 1, "catches": 1, "caught": 2, "children": 3, "clear": 1, "component": 1, "components": 3, "content": 1, "crashes": 1, "createeffect": 1, "creatememo": 1, "createresource": 1, "data-fetching": 1, "debugging": 2, "description": 1, "display": 2, "during": 1, "element": 2, "err": 2, "error": 9, "error-boundary": 1, "error-handling": 1, "errorboundary": 2, "errorprone": 1, "errors": 9, "event": 1, "example": 2, "experience": 1, "fallback": 7, "fallback=": 1, "file": 1, "for": 1, "forces": 1, "from": 2, "function": 3, "github-document": 1, "handle": 1, "handlers": 1, "handling": 1, "however": 2, "if": 2, "import": 2, "in": 2, "includes": 1, "inside": 1, "instance": 1, "instead": 2, "is": 2, "it": 3, "its": 2, "itself": 1, "jsx": 3, "management": 2, "mdx": 1, "message": 1, "not": 1, "object": 1, "occur": 7, "occurring": 1, "occurs": 1, "of": 1, "onclick=": 1, "or": 2, "order": 1, "other": 2, "outside": 1, "parameters": 1, "parent": 1, "passed": 1, "preventing": 1, "primitives": 2, "process": 1, "production": 2, "props": 1, "provides": 1, "re-render": 1, "receives": 1, "rendering": 4, "reset": 4, "return": 1, "same": 1, "settimeout": 1, "shows": 1, "solid-js": 1, "solidjs": 1, "stability": 1, "state": 3, "tags": 1, "that": 7, "the": 8, "there": 1, "this": 1, "title": 1, "to": 3, "tsx": 1, "two": 1, "ui": 3, "up": 1, "updating": 1, "use_cases": 1, "user": 1, "version": 1, "void": 1, "when": 2, "while": 1, "will": 1, "with": 1, "within": 3 }, "length": 242 }, { "id": "4dee9cd7fdc1294cce929973", "doc_id": "cb9709e630e8dc966bcbd93e", "title": "error-boundary", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/control-flow/error-boundary.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/error-boundary.json", "content": "--- title: Error boundary order: 5 use_cases: \u003e- error handling, crash prevention, user-friendly errors, app stability, error recovery, debugging production issues tags: - errors - boundary - handling - recovery - stability - debugging version: '1.0' description: \u003e- Catch and handle rendering errors gracefully with ErrorBoundary. Prevent app crashes and provide user-friendly error recovery. --- By default, if part of an application throws an error during rendering, the entire application can crash, resulting in Solid removing its UI from the screen. Error boundaries provide a way to catch these errors and prevent the entire app from crashing. The [`\u003cErrorBoundary\u003e`](/reference/components/error-boundary) component is used to create an error boundary. It catches any error that occurs during the rendering or updating of its children. However, an important note is that errors occurring outside the rendering process, such as in event handlers or after a `setTimeout`, are _not_ caught by error boundaries. The `fallback` prop can be used to display a user-friendly error message or notification when an error occurs. If a function is passed to `fallback`, it will receive the error object as well as a `reset` function. The `reset` function forces the `\u003cErrorBoundary\u003e` to re-render its children and reset the error state, providing users with a way to recover from the error. ```tsx import { ErrorBoundary } from \"solid-js\"; import { Header, ErrorProne } from \"./components\"; function App() { return ( \u003cdiv\u003e \u003cHeader /\u003e \u003cErrorBoundary fallback={(error, reset) =\u003e ( \u003cdiv\u003e \u003cp\u003eSomething went wrong: {error.message}\u003c/p\u003e \u003cbutton onClick={reset}\u003eTry Again\u003c/button\u003e \u003c/div\u003e )} \u003e \u003cErrorProne /\u003e \u003c/ErrorBoundary\u003e \u003c/div\u003e ); } ``` In this example, when the `ErrorProne` component throws an error, the `\u003cErrorBoundary\u003e` catches it, preventing it from affecting the rest of the application. Instead, it displays the error message passed to the fallback prop.", "term_freq": { "---": 2, "//github": 1, "/\u003e": 2, "/components": 1, "/reference/components/error-boundary": 1, "\u003c/div\u003e": 2, "\u003c/errorboundary\u003e": 1, "\u003c/p\u003e": 1, "\u003cbutton": 1, "\u003cdiv\u003e": 2, "\u003cerrorboundary": 1, "\u003cerrorboundary\u003e": 3, "\u003cerrorprone": 1, "\u003cheader": 1, "\u003cp\u003esomething": 1, "=\u003e": 1, "\u003e-": 2, "\u003etry": 1, "_not_": 1, "affecting": 1, "after": 1, "again\u003c/button\u003e": 1, "an": 6, "and": 4, "any": 1, "app": 4, "application": 3, "are": 1, "as": 3, "be": 1, "boundaries": 2, "boundary": 3, "by": 2, "can": 2, "catch": 2, "catches": 2, "caught": 1, "children": 2, "com/solidjs/solid-docs/blob/head/src/routes/concepts/control-flow/error-boundary": 1, "component": 2, "crash": 2, "crashes": 1, "crashing": 1, "create": 1, "debugging": 2, "default": 1, "description": 1, "display": 1, "displays": 1, "during": 2, "entire": 2, "error": 18, "error-boundary": 1, "errorboundary": 2, "errorprone": 2, "errors": 5, "event": 1, "example": 1, "fallback": 3, "fallback=": 1, "forces": 1, "from": 6, "function": 4, "github-document": 1, "gracefully": 1, "handle": 1, "handlers": 1, "handling": 2, "header": 1, "however": 1, "https": 1, "if": 2, "import": 2, "important": 1, "in": 3, "instead": 1, "is": 3, "issues": 1, "it": 5, "its": 3, "mdx": 1, "message": 3, "note": 1, "notification": 1, "object": 1, "occurring": 1, "occurs": 2, "of": 3, "onclick=": 1, "or": 3, "order": 1, "outside": 1, "part": 1, "passed": 2, "prevent": 2, "preventing": 1, "prevention": 1, "process": 1, "production": 1, "prop": 2, "provide": 2, "providing": 1, "re-render": 1, "receive": 1, "recover": 1, "recovery": 3, "removing": 1, "rendering": 4, "reset": 5, "rest": 1, "resulting": 1, "return": 1, "screen": 1, "settimeout": 1, "solid": 1, "solid-js": 1, "stability": 2, "state": 1, "such": 1, "tags": 1, "that": 2, "the": 18, "these": 1, "this": 1, "throws": 2, "title": 1, "to": 7, "tsx": 1, "ui": 1, "updating": 1, "use_cases": 1, "used": 2, "user-friendly": 3, "users": 1, "version": 1, "way": 2, "well": 1, "went": 1, "when": 2, "will": 1, "with": 2, "wrong": 1 }, "length": 275 }, { "id": "6ac6153736caf59fd070a798", "doc_id": "61e64d2044027841b64733b0", "title": "event-handlers", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/components/event-handlers.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/event-handlers.json", "content": "--- title: Event handlers order: 3 use_cases: \u003e- user interactions, click handling, form inputs, keyboard events, custom events, touch gestures, event optimization tags: - events - interactions - handlers - delegation - performance - dom version: '1.0' description: \u003e- Handle user interactions in Solid with event delegation and native events for optimal performance and resource management. --- Event handlers are functions that are called in response to specific events occurring in the browser, such as when a user clicks or taps on an element. Solid provides two ways to add event listeners to the browser: - [`on:__`](/reference/jsx-attributes/on): adds an event listener to the `element`. This is also known as a _native event_. - [`on__`](/reference/jsx-attributes/on_): adds an event listener to the `document` and dispatches it to the `element`. This can be referred to as a _delegated event_. Delegated events conserve resources and improve performance for commonly used events by sharing a single handler. Native events, conversely, offer greater control over event behavior. ## Using events To add an event handler, prefix the event name with either `on` or `on:`, and assign it to the function you wish to call when the event is dispatched. ```tsx // delegated event \u003cbutton onClick={handleClick}\u003eClick me\u003c/button\u003e // native event \u003cdiv on:scroll={handleScroll}\u003e... very long text ...\u003c/div\u003e ``` Delegated events are **not case sensitive**, therefore using delegated event handlers in Solid can be written using camelCase or all lowercase. Note that while delegated events can be written both ways, native events _are_ case sensitive. ```tsx \u003cbutton onclick={handleClick}\u003eClick me\u003c/button\u003e ``` For any other events, such as custom events or events you wish _not_ to be delegated, the `on:` attribute will add an event listener as-is. This is what makes the event listener case sensitive. ```tsx \u003cbutton on:Custom-Event={handleClick}\u003eClick me\u003c/button\u003e ``` For typing standard or custom events using `on:`, the TypeScript page has a section about [event handlers](/configuration/typescript#event-handling). ## Binding events To optimize event handlers, you can pass an array as the event handler, replacing the function. When doing this, the second item passed into the array is supplied as the handler's first argument: ```tsx const handler = (data, event) =\u003e { console.log(\"Data:\", data, \"Event:\", event); }; \u003cbutton onClick={[handler, \"Hello!\"]}\u003eClick Me\u003c/button\u003e; ``` In this example, the `Hello!` string is passed as the `data` parameter in the `handler` function when the button is clicked. By binding events in this way, Solid avoids the overhead of using JavaScript's [bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) method and adding an additional closure. ### Dynamic handlers An event handler does not form part of the reactive system. If you were to pass the handler as a signal, it will not respond to the changes of that signal. In other words, events do not dynamically update, and the bindings are not reactive. This is because attaching and detaching listeners is a resource-intensive task. Since event handlers are called like a standard function, you can design them to call a reactive source, if needed. In the following example, `handleClick` represents a prop that has the flexibility to adopt any function. As a result, there is no requirement for these functions to be reactive. ```tsx \u003cdiv onClick={() =\u003e props.handleClick?.()} /\u003e ``` ## Event delegation Instead of attaching event listeners to every individual element, Solid uses _synthetic event delegation_, through the [`on__`](/reference/jsx-attributes/on_) form . In this method, event listeners are attached to the `document` element and dispatch events to the relevant elements as they bubble up. By keeping the number of event listeners to a minimum, events can be captured more effectively. This is especially useful when working with a large number of elements, such as in a table or list. Supported events such as `click`, `input` and `keydown` are just a few examples that are optimized in this way. To view the full list see the [references below](#list-of-delegated-events). If you need to attach an event listener to an element that is not supported by Solid's event delegation, such as a custom event in a [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements), you can use the [`on:__`](/reference/jsx-attributes/on) form. ```tsx \u003cdiv on:customEvent={handleCustomEvent} /\u003e ``` ### Event delegation considerations While delegated events provide some performance enhancements, there are tradeoffs. Delegated events flow through native element parents but can be overriden by components like Portal. This can differ from the previous expectations of how events work and flow. Some things to keep in mind include: - Delegated event listeners are added _once_ per event type and handle all future events of that type. This means that delegated event listeners remain active even if the element that added them and its handler is removed. For example, if a `div` listens for `mousemove` and is later removed, the `mousemove` events will still be dispatched to the `document` in case a different element is also listening for mouse moves. ```tsx \u003cdiv onMouseMove={handleCustomEvent} /\u003e ``` :::tip[Occasional Events] Rather than using delegated events for events that happen infrequently, **native events** are a better solution. Since these events happen in specific circumstances, they do not benefit from the performance improvements you get with event delegation. ```tsx \u003cdiv on:mousemove={handleCustomEvent} /\u003e ``` ::: - `event.stopPropagation()` does not work as expected since events are attached to the `document` rather than the `element`. With cases like this, a native event is recommended. As an example, using a native event would stop the following event from reaching the `div native` handler, which is _not_ the case for delegated events. You can [view this example in the Solid Playground](https://playground.solidjs.com/anonymous/c5346f84-01e4-4080-8ace-4443ffd0bb10). ```tsx onMount(() =\u003e { ref.addEventListener(\"click\", () =\u003e { console.log(\"div native\"); }); }); \u003cdiv ref={ref}\u003e \u003cbutton onClick={(event) =\u003e { event.stopPropagation(); console.log(\"button\"); }} \u003e button \u003c/button\u003e \u003c/div\u003e; ``` ```shellsession title=\"Console output\" // Button clicked div native button ``` You can solve this by switching the `button` event to using a native event: ```tsx ins=\"on:click\" // ... \u003cbutton on:click={(event) =\u003e { event.stopPropagation(); console.log(\"button\"); }} \u003e button \u003c/button\u003e // ... ``` ```shellsession title=\"Console output\" // Button clicked button ``` [See how this solution differs in the Solid Playground](https://playground.solidjs.com/anonymous/9e2deddc-2e83-4ac2-8ee0-49c7c3a45d11). - [Portals](/concepts/control-flow/portal) propagate events following the _component tree_ and not the _DOM tree_, making them easier to use. This means when a `Portal` gets attached to the `body`, any events will propagate up to the `container`. ```tsx \u003cdiv class=\"container\" onInput={() =\u003e console.log(\"portal key press\")}\u003e \u003cPortal mount={document.body}\u003e \u003cinput onInput={() =\u003e console.log(\"input key press\")} /\u003e \u003c/Portal\u003e \u003c/div\u003e ``` :::note[onInput / onChange] `onChange` and `onInput` events work according to their native behavior: - `onInput` will fire immediately after the value has changed - In `\u003cinput\u003e` fields, `onChange` will only fire after the field loses focus. ::: ### List of delegated events You can also view this list in our [source code](https://github.com/ryansolid/dom-expressions/blob/main/packages/dom-expressions/src/constants.js) (see `DelegatedEvents`). - [`beforeinput`](https://developer.mozilla.org/en-US/docs/Web/API/Element/beforeinput_event) - [`click`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click) - [`dblclick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event) - [`contextmenu`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event) - [`focusin`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event) - [`focusout`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event) - [`input`](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event) - [`keydown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event) - [`keyup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event) - [`mousedown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event) - [`mousemove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event) - [`mouseout`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event) - [`mouseover`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event) - [`mouseup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event) - [`pointerdown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerdown_event) - [`pointermove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event) - [`pointerout`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event) - [`pointerover`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerover_event) - [`pointerup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerup_event) - [`touchend`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event) - [`touchmove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchmove_event) - [`touchstart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event)", "term_freq": { "##": 3, "###": 3, "#list-of-delegated-events": 1, "**native": 1, "**not": 1, "---": 2, "//": 6, "//developer": 24, "//github": 2, "//playground": 2, "/\u003e": 5, "/concepts/control-flow/portal": 1, "/configuration/typescript#event-handling": 1, "/reference/jsx-attributes/on": 2, "/reference/jsx-attributes/on_": 2, "\u003c/button\u003e": 2, "\u003c/div\u003e": 3, "\u003c/portal\u003e": 1, "\u003cbutton": 6, "\u003cdiv": 7, "\u003cinput": 1, "\u003cinput\u003e": 1, "\u003cportal": 1, "=\u003e": 8, "\u003e-": 2, "\u003eclick": 4, "__": 2, "_are_": 1, "_component": 1, "_delegated": 1, "_dom": 1, "_native": 1, "_not_": 2, "_once_": 1, "_synthetic": 1, "about": 1, "according": 1, "active": 1, "add": 3, "added": 2, "addeventlistener": 1, "adding": 1, "additional": 1, "adds": 2, "adopt": 1, "after": 2, "all": 2, "also": 3, "an": 11, "and": 16, "any": 3, "are": 12, "argument": 1, "array": 2, "as": 15, "as-is": 1, "assign": 1, "attach": 1, "attached": 3, "attaching": 2, "attribute": 1, "avoids": 1, "be": 8, "because": 1, "beforeinput": 1, "behavior": 2, "below": 1, "benefit": 1, "better": 1, "bind": 1, "binding": 2, "bindings": 1, "body": 2, "both": 1, "browser": 2, "bubble": 1, "but": 1, "button": 10, "by": 6, "call": 2, "called": 2, "camelcase": 1, "can": 12, "captured": 1, "case": 5, "cases": 1, "changed": 1, "changes": 1, "circumstances": 1, "class=": 1, "click": 5, "click=": 1, "clicked": 3, "clicks": 1, "closure": 1, "code": 1, "com/anonymous/9e2deddc-2e83-4ac2-8ee0-49c7c3a45d11": 1, "com/anonymous/c5346f84-01e4-4080-8ace-4443ffd0bb10": 1, "com/ryansolid/dom-expressions/blob/main/packages/dom-expressions/src/constants": 1, "com/solidjs/solid-docs/blob/head/src/routes/concepts/components/event-handlers": 1, "commonly": 1, "components": 1, "conserve": 1, "considerations": 1, "console": 8, "const": 1, "container": 2, "contextmenu": 1, "control": 1, "conversely": 1, "custom": 5, "custom-event=": 1, "customevent=": 1, "data": 4, "dblclick": 1, "delegated": 13, "delegatedevents": 1, "delegation": 6, "delegation_": 1, "description": 1, "design": 1, "detaching": 1, "differ": 1, "different": 1, "differs": 1, "dispatch": 1, "dispatched": 2, "dispatches": 1, "div": 4, "do": 2, "document": 5, "does": 2, "doing": 1, "dom": 1, "dynamic": 1, "dynamically": 1, "easier": 1, "effectively": 1, "either": 1, "element": 11, "elements": 2, "enhancements": 1, "especially": 1, "even": 1, "event": 47, "event-handlers": 1, "event_": 2, "events": 37, "events**": 1, "every": 1, "example": 5, "examples": 1, "expectations": 1, "expected": 1, "few": 1, "field": 1, "fields": 1, "fire": 2, "first": 1, "flexibility": 1, "flow": 2, "focus": 1, "focusin": 1, "focusout": 1, "following": 3, "for": 10, "form": 4, "from": 3, "full": 1, "function": 5, "functions": 2, "future": 1, "gestures": 1, "get": 1, "gets": 1, "github-document": 1, "greater": 1, "handle": 2, "handleclick": 5, "handlecustomevent": 3, "handler": 11, "handlers": 8, "handlescroll": 1, "handling": 1, "happen": 2, "has": 3, "hello": 2, "how": 2, "https": 28, "if": 5, "immediately": 1, "improve": 1, "improvements": 1, "in": 20, "include": 1, "individual": 1, "infrequently": 1, "input": 3, "inputs": 1, "ins=": 1, "instead": 1, "interactions": 3, "into": 1, "is": 16, "it": 3, "item": 1, "its": 1, "javascript": 1, "js": 1, "just": 1, "keep": 1, "keeping": 1, "key": 2, "keyboard": 1, "keydown": 2, "keyup": 1, "known": 1, "large": 1, "later": 1, "like": 3, "list": 4, "listener": 5, "listeners": 7, "listening": 1, "listens": 1, "log": 6, "long": 1, "loses": 1, "lowercase": 1, "makes": 1, "making": 1, "management": 1, "mdx": 1, "me\u003c/button\u003e": 4, "means": 2, "method": 2, "mind": 1, "minimum": 1, "more": 1, "mount=": 1, "mouse": 1, "mousedown": 1, "mousemove": 3, "mousemove=": 1, "mouseout": 1, "mouseover": 1, "mouseup": 1, "moves": 1, "mozilla": 24, "name": 1, "native": 12, "need": 1, "needed": 1, "no": 1, "not": 8, "note": 2, "number": 2, "occasional": 1, "occurring": 1, "of": 9, "offer": 1, "on": 13, "on__": 2, "onchange": 3, "onclick=": 5, "oninput": 3, "oninput=": 2, "only": 1, "onmount": 1, "onmousemove=": 1, "optimal": 1, "optimization": 1, "optimize": 1, "optimized": 1, "or": 6, "order": 1, "org/en-us/docs/web/api/element/beforeinput_event": 1, "org/en-us/docs/web/api/element/contextmenu_event": 1, "org/en-us/docs/web/api/element/dblclick_event": 1, "org/en-us/docs/web/api/element/focusin_event": 1, "org/en-us/docs/web/api/element/focusout_event": 1, "org/en-us/docs/web/api/element/input_event": 1, "org/en-us/docs/web/api/element/keydown_event": 1, "org/en-us/docs/web/api/element/keyup_event": 1, "org/en-us/docs/web/api/element/mousedown_event": 1, "org/en-us/docs/web/api/element/mousemove_event": 1, "org/en-us/docs/web/api/element/mouseout_event": 1, "org/en-us/docs/web/api/element/mouseover_event": 1, "org/en-us/docs/web/api/element/mouseup_event": 1, "org/en-us/docs/web/api/element/pointerdown_event": 1, "org/en-us/docs/web/api/element/pointermove_event": 1, "org/en-us/docs/web/api/element/pointerout_event": 1, "org/en-us/docs/web/api/element/pointerover_event": 1, "org/en-us/docs/web/api/element/pointerup_event": 1, "org/en-us/docs/web/api/element/touchend_event": 1, "org/en-us/docs/web/api/element/touchmove_event": 1, "org/en-us/docs/web/api/element/touchstart_event": 1, "org/en-us/docs/web/api/htmlelement/click": 1, "org/en-us/docs/web/api/web_components/using_custom_elements": 1, "org/en-us/docs/web/javascript/reference/global_objects/function/bind": 1, "other": 2, "our": 1, "output": 2, "over": 1, "overhead": 1, "overriden": 1, "page": 1, "parameter": 1, "parents": 1, "part": 1, "pass": 2, "passed": 2, "per": 1, "performance": 5, "playground": 2, "pointerdown": 1, "pointermove": 1, "pointerout": 1, "pointerover": 1, "pointerup": 1, "portal": 3, "portals": 1, "prefix": 1, "press": 2, "previous": 1, "prop": 1, "propagate": 2, "props": 1, "provide": 1, "provides": 1, "rather": 2, "reaching": 1, "reactive": 4, "recommended": 1, "ref": 2, "ref=": 1, "references": 1, "referred": 1, "relevant": 1, "remain": 1, "removed": 2, "replacing": 1, "represents": 1, "requirement": 1, "resource": 1, "resource-intensive": 1, "resources": 1, "respond": 1, "response": 1, "result": 1, "scroll=": 1, "second": 1, "section": 1, "see": 3, "sensitive": 2, "sensitive**": 1, "sharing": 1, "shellsession": 2, "signal": 2, "since": 3, "single": 1, "solid": 8, "solidjs": 2, "solution": 2, "solve": 1, "some": 2, "source": 2, "specific": 2, "standard": 2, "still": 1, "stop": 1, "stoppropagation": 3, "string": 1, "such": 5, "supplied": 1, "supported": 2, "switching": 1, "system": 1, "table": 1, "tags": 1, "taps": 1, "task": 1, "text": 1, "than": 2, "that": 10, "the": 53, "their": 1, "them": 3, "there": 2, "therefore": 1, "these": 2, "they": 2, "things": 1, "this": 18, "through": 2, "tip": 1, "title": 1, "title=": 2, "to": 32, "touch": 1, "touchend": 1, "touchmove": 1, "touchstart": 1, "tradeoffs": 1, "tree_": 2, "tsx": 11, "two": 1, "type": 2, "typescript": 1, "typing": 1, "up": 2, "update": 1, "use": 2, "use_cases": 1, "used": 1, "useful": 1, "user": 3, "uses": 1, "using": 8, "value": 1, "version": 1, "very": 1, "view": 3, "way": 2, "ways": 2, "were": 1, "what": 1, "when": 6, "which": 1, "while": 2, "will": 6, "wish": 2, "with": 5, "words": 1, "work": 3, "working": 1, "would": 1, "written": 2, "you": 11 }, "length": 1208 }, { "id": "c535b70d085bce3317213d89", "doc_id": "b7f33d04d0417c4d19a9c9c1", "title": "fetching-data", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/fetching-data.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/fetching-data.json", "content": "--- title: Fetching data order: 3 use_cases: \u003e- api calls, async data loading, server communication, external data fetching, loading states, error handling tags: - data - fetching - async - api - createresource - suspense - loading version: '1.0' description: \u003e- Master data fetching in Solid with createResource for async operations, loading states, error handling, and Suspense boundaries. --- For most modern web applications, data fetching is a common task. Solid has a built-in utility, `createResource` , that was created to simplify data fetching. ## What is `createResource` ? `createResource` is a specialized [signal](/concepts/signals) designed specifically for managing asynchronous data fetching. It wraps around the async operations, providing a way to handle various states: loading, success, and error. This function is non-blocking, meaning that `createResource` guarantees that the application remains responsive, even during the retrieval of information. Because of this, common pitfalls of traditional async handling, such as unresponsive UIs during data fetching can be avoided. ## Using `createResource` `createResource` requires a function that returns a promise as its argument. Upon the call, `createResource` returns a signal which has reactive properties like loading, error, latest, etc. These properties can be used to conditionally render JSX based on the current reactive state. The fetcher function that is created makes a call to get a user, which is then passed in as an argument to `createResource`. The signal returned from the `createResource` provides the properties that can assist with conditional rendering based on the current reactive state: * `state`: The current status of the operation (`unresolved`, `pending`, `ready`, `refreshing`, or `errored`). * `loading`: Indicates that the operation is currently in progress via a `boolean`. * `error`: If the operation fails for any reason, this property will contain information about this error. It may be a string with an error message, or an object with more detailed information. * `latest`: The most recent data or result returned from the operation. When there is a change in the source signal, an internal fetch process is triggered to retrieve new data based on this change. ```jsx import { createSignal, createResource, Switch, Match, Show } from \"solid-js\"; const fetchUser = async (id) =\u003e { const response = await fetch(`https://swapi.dev/api/people/${id}/`); return response.json(); } function App() { const [userId, setUserId] = createSignal(); const [user] = createResource(userId, fetchUser); return ( \u003cdiv\u003e \u003cinput type=\"number\" min=\"1\" placeholder=\"Enter Numeric Id\" onInput={(e) =\u003e setUserId(e.currentTarget.value)} /\u003e \u003cShow when={user.loading}\u003e \u003cp\u003eLoading...\u003c/p\u003e \u003c/Show\u003e \u003cSwitch\u003e \u003cMatch when={user.error}\u003e \u003cspan\u003eError: {user.error}\u003c/span\u003e \u003c/Match\u003e \u003cMatch when={user()}\u003e \u003cdiv\u003e{JSON.stringify(user())}\u003c/div\u003e \u003c/Match\u003e \u003c/Switch\u003e \u003c/div\u003e ); } ``` Whenever the signal value, `userId`, changes, the internal fetch method `fetchUser` gets triggered. The properties of the `user` resource allow for conditional rendering based on the different states of the fetch process. The `Switch/Match` construct provides one way to manage these conditions. When the fetch succeeds and user data is retrieved, the `user()` condition becomes active, and its related block executes. However, if there's an error while fetching, the `user.error` block becomes `true`, leading to its corresponding `Match` block being shown. :::tip If you anticipate errors, you may want to wrap `createResource` in an [ErrorBoundary](/reference/components/error-boundary). ::: In addition to the `error` property, the `loading` property offers a way to display a loading state to the user during the fetch operation. ## Calling multiple async events Although you can use `createResource` independently, Solid provides an alternative method for synchronizing the display of multiple asynchronous events. `Suspense` is a component in Solid designed to act as a boundary. It allows you to display a fallback placeholder while waiting for all asynchronous events to resolve, preventing the display of partially loaded content: ```jsx import { createSignal, createResource, Switch, Match, Suspense } from \"solid-js\"; const fetchUser = async (id) =\u003e { const response = await fetch(`https://swapi.dev/api/people/${id}/`); return response.json(); } function App() { const [userId, setUserId] = createSignal(); const [user] = createResource(userId, fetchUser); return ( \u003cdiv\u003e \u003cinput type=\"number\" min=\"1\" placeholder=\"Enter Numeric Id\" onInput={(e) =\u003e setUserId(e.currentTarget.value)} /\u003e \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e \u003cSwitch\u003e \u003cMatch when={user.error}\u003e \u003cspan\u003eError: {user.error.message}\u003c/span\u003e \u003c/Match\u003e \u003cMatch when={user()}\u003e \u003cdiv\u003e{JSON.stringify(user())}\u003c/div\u003e \u003c/Match\u003e \u003c/Switch\u003e \u003c/Suspense\u003e \u003c/div\u003e ); } ``` `Suspense` has the ability to identify asynchronous reads within its descendants and act accordingly. This feature helps to remove any intermediate components that may otherwise be displayed during partial loading states. Additionally, you can nest as many components as needed within `Suspense` but only the closest ancestor will switch to the `fallback` state when a loading state is detected. \u003cEraserLink href=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=kMt6qc0qF9MlG2K9P28pOQ\" preview=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=kMt6qc0qF9MlG2K9P28pOQ\u0026type=embed\" /\u003e ## Dynamic data handling With the second output of `createResource`, there are 2 powerful methods designed to enhance and simplify some complex aspects of data management: ### `mutate` In situations where immediate feedback or responsiveness is important, the `mutate` method offers \"optimistic mutations.\" These mutations provide instant feedback, even while background processes, such as server confirmations, are still in progress. This functionality is particularly valuable in applications like task lists. For example, when users input a new task and click the `Add` button, the list will refresh immediately, regardless of the ongoing data communication with the server. ```jsx import { For, createResource } from \"solid-js\" function TodoList() { const [tasks, { mutate }] = createResource(fetchTasksFromServer); return ( \u003c\u003e \u003cul\u003e \u003cFor each={tasks()}\u003e {(task) =\u003e ( \u003cli\u003e{task.name}\u003c/li\u003e )} \u003c/For\u003e \u003c/ul\u003e \u003cbutton onClick={() =\u003e { mutate((todos) =\u003e [...todos, \"do new task\"]); // add todo for user // make a call to send to database }} \u003e Add Task \u003c/button\u003e \u003c/\u003e ); } ``` ### `refetch` When real-time feedback is necessary, the `refetch` method can be used to reload the current query regardless of any changes. This method can be particularly useful when data is constantly evolving, such as with real-time financial applications. ```jsx import { createResource, onCleanup } from \"solid-js\" function StockPriceTicker() { const [prices, { refetch }] = createResource(fetchStockPrices); const timer = setInterval(() =\u003e { refetch() }, 1000); onCleanup(() =\u003e clearInterval(timer)) } ```", "term_freq": { "##": 4, "###": 2, "---": 2, "//": 2, "//app": 2, "//github": 1, "//swapi": 2, "/\u003e": 3, "/concepts/signals": 1, "/reference/components/error-boundary": 1, "1000": 1, "\u003c/\u003e": 1, "\u003c/button\u003e": 1, "\u003c/div\u003e": 5, "\u003c/for\u003e": 1, "\u003c/li\u003e": 1, "\u003c/match\u003e": 4, "\u003c/p\u003e": 1, "\u003c/show\u003e": 1, "\u003c/span\u003e": 2, "\u003c/suspense\u003e": 1, "\u003c/switch\u003e": 2, "\u003c/ul\u003e": 1, "\u003c\u003e": 1, "\u003cbutton": 1, "\u003cdiv\u003e": 4, "\u003cdiv\u003eloading": 1, "\u003ceraserlink": 1, "\u003cfor": 1, "\u003cinput": 2, "\u003cli\u003e": 1, "\u003cmatch": 4, "\u003cp\u003eloading": 1, "\u003cshow": 1, "\u003cspan\u003eerror": 2, "\u003csuspense": 1, "\u003cswitch\u003e": 2, "\u003cul\u003e": 1, "=\u003e": 9, "\u003e-": 2, "ability": 1, "about": 1, "accordingly": 1, "act": 2, "active": 1, "add": 3, "addition": 1, "additionally": 1, "all": 1, "allow": 1, "allows": 1, "alternative": 1, "although": 1, "an": 7, "ancestor": 1, "and": 7, "anticipate": 1, "any": 3, "api": 2, "app": 2, "application": 1, "applications": 3, "are": 2, "argument": 2, "around": 1, "as": 8, "aspects": 1, "assist": 1, "async": 8, "asynchronous": 4, "avoided": 1, "await": 2, "background": 1, "based": 4, "be": 6, "because": 1, "becomes": 2, "being": 1, "block": 3, "boolean": 1, "boundaries": 1, "boundary": 1, "built-in": 1, "but": 1, "button": 1, "call": 3, "calling": 1, "calls": 1, "can": 7, "change": 2, "changes": 2, "clearinterval": 1, "click": 1, "closest": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/fetching-data": 1, "common": 2, "communication": 2, "complex": 1, "component": 1, "components": 2, "condition": 1, "conditional": 2, "conditionally": 1, "conditions": 1, "confirmations": 1, "const": 11, "constantly": 1, "construct": 1, "contain": 1, "content": 1, "corresponding": 1, "created": 2, "createresource": 22, "createsignal": 4, "current": 4, "currently": 1, "currenttarget": 2, "data": 16, "database": 1, "descendants": 1, "description": 1, "designed": 3, "detailed": 1, "detected": 1, "dev/api/people/$": 2, "different": 1, "display": 4, "displayed": 1, "do": 1, "during": 4, "dynamic": 1, "each=": 1, "elements=kmt6qc0qf9mlg2k9p28poq": 1, "elements=kmt6qc0qf9mlg2k9p28poq\u0026type=embed": 1, "enhance": 1, "enter": 2, "eraser": 2, "error": 14, "errorboundary": 1, "errored": 1, "errors": 1, "etc": 1, "even": 2, "events": 3, "evolving": 1, "example": 1, "executes": 1, "external": 1, "fails": 1, "fallback": 2, "fallback=": 1, "feature": 1, "feedback": 3, "fetch": 7, "fetcher": 1, "fetching": 9, "fetching-data": 1, "fetchstockprices": 1, "fetchtasksfromserver": 1, "fetchuser": 5, "financial": 1, "for": 10, "from": 6, "function": 7, "functionality": 1, "get": 1, "gets": 1, "github-document": 1, "guarantees": 1, "handle": 1, "handling": 4, "has": 3, "helps": 1, "however": 1, "href=": 1, "https": 5, "id": 6, "identify": 1, "if": 3, "immediate": 1, "immediately": 1, "import": 4, "important": 1, "in": 10, "independently": 1, "indicates": 1, "information": 3, "input": 1, "instant": 1, "intermediate": 1, "internal": 2, "io/workspace/madvfw5oryupjowslyk9": 1, "io/workspace/madvfw5oryupjowslyk9/preview": 1, "is": 16, "it": 3, "its": 4, "json": 4, "jsx": 5, "latest": 2, "leading": 1, "like": 2, "list": 1, "lists": 1, "loaded": 1, "loading": 12, "make": 1, "makes": 1, "manage": 1, "management": 1, "managing": 1, "many": 1, "master": 1, "match": 3, "may": 3, "mdx": 1, "meaning": 1, "message": 2, "method": 5, "methods": 1, "min=": 2, "modern": 1, "more": 1, "most": 2, "multiple": 2, "mutate": 4, "mutations": 2, "name": 1, "necessary": 1, "needed": 1, "nest": 1, "new": 3, "non-blocking": 1, "number": 2, "numeric": 2, "object": 1, "of": 12, "offers": 2, "on": 4, "oncleanup": 2, "onclick=": 1, "one": 1, "ongoing": 1, "oninput=": 2, "only": 1, "operation": 5, "operations": 2, "optimistic": 1, "or": 4, "order": 1, "otherwise": 1, "output": 1, "partial": 1, "partially": 1, "particularly": 2, "passed": 1, "pending": 1, "pitfalls": 1, "placeholder": 1, "placeholder=": 2, "powerful": 1, "preventing": 1, "preview=": 1, "prices": 1, "process": 2, "processes": 1, "progress": 2, "promise": 1, "properties": 4, "property": 3, "provide": 1, "provides": 3, "providing": 1, "query": 1, "reactive": 3, "reads": 1, "ready": 1, "real-time": 2, "reason": 1, "recent": 1, "refetch": 4, "refresh": 1, "refreshing": 1, "regardless": 2, "related": 1, "reload": 1, "remains": 1, "remove": 1, "render": 1, "rendering": 2, "requires": 1, "resolve": 1, "resource": 1, "response": 4, "responsive": 1, "responsiveness": 1, "result": 1, "retrieval": 1, "retrieve": 1, "retrieved": 1, "return": 5, "returned": 2, "returns": 2, "second": 1, "send": 1, "server": 3, "setinterval": 1, "setuserid": 4, "show": 1, "shown": 1, "signal": 5, "simplify": 2, "situations": 1, "solid": 4, "solid-js": 4, "some": 1, "source": 1, "specialized": 1, "specifically": 1, "state": 6, "states": 5, "status": 1, "still": 1, "stockpriceticker": 1, "string": 1, "stringify": 2, "succeeds": 1, "success": 1, "such": 3, "suspense": 6, "switch": 3, "switch/match": 1, "synchronizing": 1, "tags": 1, "task": 7, "tasks": 2, "that": 8, "the": 44, "then": 1, "there": 3, "these": 3, "this": 8, "timer": 2, "tip": 1, "title": 1, "to": 22, "todo": 1, "todolist": 1, "todos": 2, "traditional": 1, "triggered": 2, "true": 1, "type=": 2, "uis": 1, "unresolved": 1, "unresponsive": 1, "upon": 1, "use": 1, "use_cases": 1, "used": 2, "useful": 1, "user": 18, "userid": 5, "users": 1, "using": 1, "utility": 1, "valuable": 1, "value": 3, "various": 1, "version": 1, "via": 1, "waiting": 1, "want": 1, "was": 1, "way": 3, "web": 1, "what": 1, "when": 6, "when=": 5, "whenever": 1, "where": 1, "which": 2, "while": 3, "will": 3, "with": 7, "within": 2, "wrap": 1, "wraps": 1, "you": 5 }, "length": 936 }, { "id": "c4385e1f9606acb606a5426c", "doc_id": "b506c389fb7c42ac06dd41e5", "title": "file-routes", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/routing/file-routes.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/file-routes.json", "content": "--- title: FileRoutes use_cases: \u003e- file-based routing, automatic route generation, spa routing, route configuration tags: - routing - files - routes - navigation - filesystem - spa version: '1.0' description: \u003e- Automatically generate routes from file structure in SolidStart. Create route configurations from files in the /src/routes directory. --- `FileRoutes` is a component that creates a [`Route`](/solid-router/reference/components/route) for each file in the `/src/routes` directory. This creates a `route` export to define the route configuration for the router of your choice. For example, using [`solid-router`](/solid-router) would look like the following: ```tsx {7-9} title=\"app.tsx\" import { Suspense } from \"solid-js\"; import { Router } from \"@solidjs/router\"; import { FileRoutes } from \"@solidjs/start/router\"; export default function App() { return ( \u003cRouter root={(props) =\u003e \u003cSuspense\u003e{props.children}\u003c/Suspense\u003e}\u003e \u003cFileRoutes /\u003e \u003c/Router\u003e ); } ``` See the [SolidStart routing guide](/solid-start/building-your-application/routing) for more details. :::caution If removing the `FileRoutes` component from your `app.tsx` file, you will need to manually add all of your routes. While this is possible it does come with tradeoffs. For example, optimizations such as preloaded script tags will no longer be available. :::", "term_freq": { "---": 2, "//github": 1, "/\u003e": 1, "/solid-router": 1, "/solid-router/reference/components/route": 1, "/solid-start/building-your-application/routing": 1, "/src/routes": 2, "7-9": 1, "\u003c/router\u003e": 1, "\u003c/suspense\u003e": 1, "\u003cfileroutes": 1, "\u003crouter": 1, "\u003csuspense\u003e": 1, "=\u003e": 1, "\u003e-": 2, "@solidjs/router": 1, "@solidjs/start/router": 1, "add": 1, "all": 1, "app": 3, "as": 1, "automatic": 1, "automatically": 1, "available": 1, "be": 1, "caution": 1, "children": 1, "choice": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/routing/file-routes": 1, "come": 1, "component": 2, "configuration": 2, "configurations": 1, "create": 1, "creates": 2, "default": 1, "define": 1, "description": 1, "details": 1, "directory": 2, "does": 1, "each": 1, "example": 2, "export": 2, "file": 3, "file-based": 1, "file-routes": 1, "fileroutes": 4, "files": 2, "filesystem": 1, "following": 1, "for": 5, "from": 6, "function": 1, "generate": 1, "generation": 1, "github-document": 1, "guide": 1, "https": 1, "if": 1, "import": 3, "in": 3, "is": 2, "it": 1, "like": 1, "longer": 1, "look": 1, "manually": 1, "mdx": 1, "more": 1, "navigation": 1, "need": 1, "no": 1, "of": 2, "optimizations": 1, "possible": 1, "preloaded": 1, "props": 2, "removing": 1, "return": 1, "root=": 1, "route": 6, "router": 2, "routes": 3, "routing": 4, "script": 1, "see": 1, "solid-js": 1, "solid-router": 1, "solidstart": 2, "spa": 2, "structure": 1, "such": 1, "suspense": 1, "tags": 2, "that": 1, "the": 7, "this": 2, "title": 1, "title=": 1, "to": 2, "tradeoffs": 1, "tsx": 3, "use_cases": 1, "using": 1, "version": 1, "while": 1, "will": 2, "with": 1, "would": 1, "you": 1, "your": 3 }, "length": 172 }, { "id": "a3835a4116dc32d7c4eef72a", "doc_id": "77242f17b32215eeee768c98", "title": "fine-grained-reactivity", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/advanced-concepts/fine-grained-reactivity.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/fine-grained-reactivity.json", "content": "--- title: Fine-grained reactivity use_cases: \u003e- optimizing performance, reducing re-renders, understanding solid fundamentals, building efficient apps, custom reactive systems tags: - reactivity - performance - signals - effects - optimization - fundamentals version: '1.0' description: \u003e- Master Solid's fine-grained reactivity system for targeted UI updates, optimal performance, and efficient state management patterns. --- Reactivity ensures automatic responses to data changes, eliminating the need for manual updates to the user interface (UI). By connecting UI elements to the underlying data, updates become automated. In a fine-grained reactive system an application will now have the ability to make highly _targeted and specific_ updates. An example of this can be seen in the contrast between Solid and [React](https://react.dev/). In Solid, updates are made to the targeted attribute that needs to be changed, avoiding broader and, sometimes unnecessary, updates. In contrast, React would re-execute an entire component for a change in the single attribute, which can be less efficient. Because of the fine-grained reactive system, unnecessary recalculations are avoided. Through targeting only the areas of an application that have changed the user experience becomes smoother and more optimized. **Note:** If you're new to the concept of reactivity and want to learn the basics, consider starting with our [intro to reactivity guide](/concepts/intro-to-reactivity). ## Reactive primitives In Solid's reactivity system, there are two key elements: signals and observers. These core elements serve as the foundation for more specialized reactive features: - [Stores](/concepts/stores) which are [proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) that create, read, and write signals under the hood. - [Memos](/concepts/derived-values/memos) resemble [effects](/concepts/effects) but are distinct in that they _return_ a signal and optimize computations through caching. They update based on the behavior of effects, but are more ideal for computational optimization. - [Resources](/guides/fetching-data), building on the concept of memos, convert the asynchronicity of network requests into synchronicity, where the results are embedded within a signal. - Render effects are a tailored type of effect that initiate immediately, specifically designed for managing the rendering process. ### Understanding signals [Signals](/concepts/signals) are like mutable variables that can point to a value now and another in the future. They are made up of two primary functions: - **Getter**: how to read the current value of a signal. - **Setter**: a way to modify or update a signal's value. In Solid, the [`createSignal`](/reference/basic-reactivity/create-signal) function can be used to create a signal. This function returns the getter and setter as a pair in a two-element array, called a tuple. ```js import { createSignal } from \"solid-js\"; const [count, setCount] = createSignal(1); console.log(count()); // prints \"1\" setCount(0); // changes count to 0 console.log(count()); // prints \"0\" ``` Here, `count` serves as the getter, and `setCount` functions as the setter. ### Effects [Effects](/concepts/effects) are functions that are triggered when the signals they depend on point to a different value. They can be thought of as automated responders where any changes in the signal's value will trigger the effect to run. ```jsx import { createSignal, createEffect } from \"solid-js\"; const [count, setCount] = createSignal(0); createEffect(() =\u003e { console.log(count()); }); ``` The effect takes a function that is called whenever _any_ of the signals it relies on changes, such as `count` in this example. ## Building a reactive system To grasp the concept of reactivity, it is often helpful to construct a reactive system from scratch. The following example will follow the observer pattern, where data entities (signals) will maintain a list of their subscribers (effects). This is a way to notify subscribers whenever a signal they observe changes. Here is a basic code outline to begin: ```jsx function createSignal() {} function createEffect() {} const [count, setCount] = createSignal(0); createEffect(() =\u003e { console.log(\"The count is \" + count()); }); ``` ## Reactive primitives ### `createSignal` The `createSignal` function performs two main tasks: 1. Initialize the value (in this case, `count` is set to `0`). 2. Return an array with two elements: the getter and setter function. ```tsx function createSignal(initialValue) { let value = initialValue; function getter() { return value; } function setter(newValue) { value = newValue; } return [getter, setter]; } // .. ``` This allows you to retrieve the current value through the getter and make any changes via the setter. At this stage, reactivity is not present, however. ### `createEffect` `createEffect` defines a function that immediately calls the function that is passed into it: ```jsx // .. function createEffect(fn) { fn(); } // .. ``` ### Making a system reactive Reactivity emerges when linking `createSignal` and `createEffect` and this happens through: 1. Maintaining a reference to the current subscriber's function. 2. Registering this function during the creation of an effect. 3. Adding the function to a subscriber list when accessing a signal. 4. Notifying all subscribers when the signal has updated. ```jsx let currentSubscriber = null; function createSignal(initialValue) { let value = initialValue; const subscribers = new Set(); function getter() { if (currentSubscriber) { subscribers.add(currentSubscriber); } return value; } function setter(newValue) { if (value === newValue) return; // if the new value is not different, do not notify dependent effects and memos value = newValue; for (const subscriber of subscribers) { subscriber(); // } } return [getter, setter]; } // creating an effect function createEffect(fn) { const previousSubscriber = currentSubscriber; // Step 1 currentSubscriber = fn; fn(); currentSubscriber = previousSubscriber; } //.. ``` A variable is used to hold a reference to the current executing subscriber function. This is used to determine which effects are dependent on which signals. Inside `createSignal`, the initial value is stored and a [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) is used to store any subscriber functions that are dependent on the signal. This function will then return two functions for the signal: - The `getter` function checks to see if the current subscriber function is being accessed and, if it is, adds it to the list of subscribers before returning the _current_ value of the signal. - The `setter` function evaluated the new value against the old value, notifying the dependent functions only when the signal has been updated. When creating the `createEffect` function, a reference to any previous subscribers is initialized to handle any possible nested effects present. The current subscriber is then passed to the given function, which is run immediately. During this run, if the effect accesses any signals it is then registered as a subscriber to those signals. The current subscriber, once the given function has been run, will be reset to its previous value so that, if there are any nested effects, they are operated correctly. ### Validating the reactive system To validate the system, increment the `count` value at one-second intervals: ```jsx //.. const [count, setCount] = createSignal(0); createEffect(() =\u003e { console.log(\"The count is \" + count()); }); setInterval(() =\u003e { setCount(count() + 1); }, 1000); ``` This will display the incremented count value on the console at one-second intervals to confirm the reactive system's functionality. ## Managing lifecycles in a reactive system In reactive systems, various elements, often referred to as \"nodes\", are interconnected. These nodes can be signals, effects, or other reactive primitives. They serve as the individual units that collectively make up the reactive behavior of the system. When a node changes, the system will re-evaluate the parts connected to that node. This can result in updates, additions, or removals of these connections, which affect the overall behavior of the system. Now, consider a scenario where a condition influences the data used to calculate an output: ```jsx // Temperature.jsx console.log(\"1. Initialize\"); const [temperature, setTemperature] = createSignal(72); const [unit, setUnit] = createSignal(\"Fahrenheit\"); const [displayTemp, setDisplayTemp] = createSignal(true); const displayTemperature = createMemo(() =\u003e { if (!displayTemp()) return \"Temperature display is off\"; return `${temperature()} degrees ${unit()}`; }); createEffect(() =\u003e console.log(\"Current temperature is\", displayTemperature())); console.log(\"2. Turn off displayTemp\"); setDisplayTemp(false); console.log(\"3. Change unit\"); setUnit(\"Celsius\"); console.log(\"4. Turn on displayTemp\"); setDisplayTemp(true); ``` In this example, the `createMemo` primitive is used to cache the state of a computation. This means the computation doesn't have to be re-run if its dependencies remain unchanged. The `displayTemperature` memo has an early return condition based on the value of `displayTemp`. When `displayTemp` is false, the memo returns a message saying \"Temperature display is off,\" and as a result, `temperature` and `unit` are not tracked. If the `unit` is changed while `displayTemp` is false, however, the effect won't trigger since none of the memo's current dependencies (`displayTemp` in this case) have changed. ### Synchronous nature of effect tracking The reactivity system described above operates synchronously. This operation has implications for how effects and their dependencies are tracked. Specifically, the system registers the subscriber, runs the effect function, and then unregisters the subscriber — all in a linear, synchronous sequence. Consider the following example: ```jsx createEffect(() =\u003e { setTimeout(() =\u003e { console.log(count()); }, 1000); }); ``` The `createEffect` function in this example, initiates a `setTimeout` to delay the console log. Because the system is synchronous, it doesn't wait for this operation to complete. By the time the `count` getter is triggered within the `setTimeout`, the global scope no longer has a registered subscriber. As a result, this `count` signal will not add the callback as a subscriber which leads to potential issues with tracking the changes to `count`. ### Handling asynchronous effects While the basic reactivity system is synchronous, frameworks like Solid offer more advanced features to handle asynchronous scenarios. For example, the `on` function provides a way to manually specify the dependencies of an effect. This is particularly useful for to make sure asynchronous operations are correctly tied into the reactive system. Solid also introduces the concept of resources for managing asynchronous operations. Resources are specialized reactive primitives that convert the asynchronicity of operations like network requests into synchronicity, embedding the results within a signal. The system can then track asynchronous operations and their state, keeping the UI up-to-date when the operation completes or its' state changes. Using resources in Solid can assist in complex scenarios when multiple asynchronous operations are involved and the completion may affect different parts of the reactive system. By integrating resources into the system, you can ensure that dependencies are correctly tracked and that the UI remains consistent with the underlying asynchronous data.", "term_freq": { "##": 4, "###": 8, "**": 1, "**getter**": 1, "**note": 1, "**setter**": 1, "---": 2, "//": 13, "//developer": 2, "//github": 1, "//react": 1, "/concepts/derived-values/memos": 1, "/concepts/effects": 2, "/concepts/intro-to-reactivity": 1, "/concepts/signals": 1, "/concepts/stores": 1, "/guides/fetching-data": 1, "/reference/basic-reactivity/create-signal": 1, "1000": 2, "72": 1, "===": 1, "=\u003e": 8, "\u003e-": 2, "_any_": 1, "_current_": 1, "_return_": 1, "_targeted": 1, "ability": 1, "above": 1, "accessed": 1, "accesses": 1, "accessing": 1, "add": 2, "adding": 1, "additions": 1, "adds": 1, "advanced": 1, "affect": 2, "against": 1, "all": 2, "allows": 1, "also": 1, "an": 10, "and": 26, "another": 1, "any": 7, "application": 2, "apps": 1, "are": 23, "areas": 1, "array": 2, "as": 12, "assist": 1, "asynchronicity": 2, "asynchronous": 7, "at": 3, "attribute": 2, "automated": 2, "automatic": 1, "avoided": 1, "avoiding": 1, "based": 2, "basic": 2, "basics": 1, "be": 8, "because": 2, "become": 1, "becomes": 1, "been": 2, "before": 1, "begin": 1, "behavior": 3, "being": 1, "between": 1, "broader": 1, "building": 3, "but": 2, "by": 3, "cache": 1, "caching": 1, "calculate": 1, "callback": 1, "called": 2, "calls": 1, "can": 10, "case": 2, "celsius": 1, "change": 2, "changed": 4, "changes": 9, "checks": 1, "code": 1, "collectively": 1, "com/solidjs/solid-docs/blob/head/src/routes/advanced-concepts/fine-grained-reactivity": 1, "complete": 1, "completes": 1, "completion": 1, "complex": 1, "component": 1, "computation": 2, "computational": 1, "computations": 1, "concept": 4, "condition": 2, "confirm": 1, "connected": 1, "connecting": 1, "connections": 1, "consider": 3, "consistent": 1, "console": 13, "const": 11, "construct": 1, "contrast": 2, "convert": 2, "core": 1, "correctly": 3, "count": 22, "create": 2, "createeffect": 14, "creatememo": 2, "createsignal": 17, "creating": 2, "creation": 1, "current": 9, "currentsubscriber": 6, "custom": 1, "data": 5, "defines": 1, "degrees": 1, "delay": 1, "depend": 1, "dependencies": 5, "dependent": 4, "described": 1, "description": 1, "designed": 1, "determine": 1, "dev/": 1, "different": 3, "display": 3, "displaytemp": 8, "displaytemperature": 3, "distinct": 1, "do": 1, "doesn": 2, "during": 2, "early": 1, "effect": 10, "effects": 14, "efficient": 3, "elements": 5, "eliminating": 1, "embedded": 1, "embedding": 1, "emerges": 1, "ensure": 1, "ensures": 1, "entire": 1, "entities": 1, "evaluated": 1, "example": 7, "executing": 1, "experience": 1, "fahrenheit": 1, "false": 3, "features": 2, "fine-grained": 4, "fine-grained-reactivity": 1, "fn": 5, "follow": 1, "following": 2, "for": 13, "foundation": 1, "frameworks": 1, "from": 3, "function": 31, "functionality": 1, "functions": 6, "fundamentals": 2, "future": 1, "getter": 10, "github-document": 1, "given": 2, "global": 1, "grasp": 1, "guide": 1, "handle": 2, "handling": 1, "happens": 1, "has": 6, "have": 4, "helpful": 1, "here": 2, "highly": 1, "hold": 1, "hood": 1, "how": 2, "however": 2, "https": 4, "ideal": 1, "if": 11, "immediately": 3, "implications": 1, "import": 2, "in": 22, "increment": 1, "incremented": 1, "individual": 1, "influences": 1, "initial": 1, "initialize": 2, "initialized": 1, "initialvalue": 4, "initiate": 1, "initiates": 1, "inside": 1, "integrating": 1, "interconnected": 1, "interface": 1, "intervals": 2, "into": 5, "intro": 1, "introduces": 1, "involved": 1, "is": 31, "issues": 1, "it": 7, "its": 3, "js": 1, "jsx": 8, "keeping": 1, "key": 1, "leads": 1, "learn": 1, "less": 1, "let": 3, "lifecycles": 1, "like": 3, "linear": 1, "linking": 1, "list": 3, "log": 12, "longer": 1, "made": 2, "main": 1, "maintain": 1, "maintaining": 1, "make": 4, "making": 1, "management": 1, "managing": 3, "manual": 1, "manually": 1, "master": 1, "may": 1, "mdx": 1, "means": 1, "memo": 3, "memos": 3, "message": 1, "modify": 1, "more": 4, "mozilla": 2, "multiple": 1, "mutable": 1, "nature": 1, "need": 1, "needs": 1, "nested": 2, "network": 2, "new": 4, "newvalue": 5, "no": 1, "node": 2, "nodes": 2, "none": 1, "not": 5, "notify": 2, "notifying": 2, "now": 3, "null": 1, "observe": 1, "observer": 1, "observers": 1, "of": 29, "off": 3, "offer": 1, "often": 2, "old": 1, "on": 10, "once": 1, "one-second": 2, "only": 2, "operated": 1, "operates": 1, "operation": 3, "operations": 5, "optimal": 1, "optimization": 2, "optimize": 1, "optimized": 1, "optimizing": 1, "or": 4, "org/en-us/docs/web/javascript/reference/global_objects/proxy": 1, "org/en-us/docs/web/javascript/reference/global_objects/set": 1, "other": 1, "our": 1, "outline": 1, "output": 1, "overall": 1, "pair": 1, "particularly": 1, "parts": 2, "passed": 2, "pattern": 1, "patterns": 1, "performance": 3, "performs": 1, "point": 2, "possible": 1, "potential": 1, "present": 2, "previous": 2, "previoussubscriber": 2, "primary": 1, "primitive": 1, "primitives": 4, "prints": 2, "process": 1, "provides": 1, "proxies": 1, "re": 1, "re-evaluate": 1, "re-execute": 1, "re-renders": 1, "re-run": 1, "react": 2, "reactive": 18, "reactivity": 12, "read": 2, "recalculations": 1, "reducing": 1, "reference": 3, "referred": 1, "registered": 2, "registering": 1, "registers": 1, "relies": 1, "remain": 1, "remains": 1, "removals": 1, "render": 1, "rendering": 1, "requests": 2, "resemble": 1, "reset": 1, "resources": 5, "responders": 1, "responses": 1, "result": 3, "results": 2, "retrieve": 1, "return": 10, "returning": 1, "returns": 2, "run": 4, "runs": 1, "saying": 1, "scenario": 1, "scenarios": 2, "scope": 1, "scratch": 1, "see": 1, "seen": 1, "sequence": 1, "serve": 2, "serves": 1, "set": 3, "setcount": 7, "setdisplaytemp": 3, "setinterval": 1, "settemperature": 1, "setter": 9, "settimeout": 3, "setunit": 2, "signal": 15, "signals": 12, "since": 1, "single": 1, "smoother": 1, "so": 1, "solid": 9, "solid-js": 2, "sometimes": 1, "specialized": 2, "specific_": 1, "specifically": 2, "specify": 1, "stage": 1, "starting": 1, "state": 4, "step": 1, "store": 1, "stored": 1, "stores": 1, "subscriber": 14, "subscribers": 8, "such": 1, "sure": 1, "synchronicity": 2, "synchronous": 4, "synchronously": 1, "system": 22, "systems": 2, "tags": 1, "tailored": 1, "takes": 1, "targeted": 2, "targeting": 1, "tasks": 1, "temperature": 7, "that": 17, "the": 120, "their": 3, "then": 5, "there": 2, "these": 3, "they": 8, "this": 22, "those": 1, "thought": 1, "through": 4, "tied": 1, "time": 1, "title": 1, "to": 49, "track": 1, "tracked": 3, "tracking": 2, "trigger": 2, "triggered": 2, "true": 2, "tsx": 1, "tuple": 1, "turn": 2, "two": 5, "two-element": 1, "type": 1, "ui": 5, "unchanged": 1, "under": 1, "underlying": 2, "understanding": 2, "unit": 5, "units": 1, "unnecessary": 2, "unregisters": 1, "up": 2, "up-to-date": 1, "update": 2, "updated": 2, "updates": 7, "use_cases": 1, "used": 6, "useful": 1, "user": 2, "using": 1, "validate": 1, "validating": 1, "value": 23, "variable": 1, "variables": 1, "various": 1, "version": 1, "via": 1, "wait": 1, "want": 1, "way": 3, "when": 10, "whenever": 2, "where": 4, "which": 7, "while": 2, "will": 9, "with": 4, "within": 3, "won": 1, "would": 1, "write": 1, "you": 3, "—": 1 }, "length": 1591 }, { "id": "98ee85ff744c673a98097223", "doc_id": "fddbebfd7a147407db7b7fe1", "title": "firebase", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deployment-options/firebase.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/firebase.json", "content": "--- title: Firebase order: 3 mainNavExclude: true use_cases: \u003e- google cloud hosting, static hosting, firebase integration, web app deployment, production hosting tags: - firebase - google - deployment - hosting - cli - static version: '1.0' description: \u003e- Host your Solid application on Firebase with Google's infrastructure for reliable static site hosting and easy deployment. --- [Firebase](https://firebase.google.com/) is an all-in-one app development platform by Google, offering a range of services from real-time databases to user authentication. For a detailed overview of the services available, you can visit [Firebase's documentation](https://firebase.google.com/docs). Before proceeding, make sure you've already set up a project in your Firebase console. If you haven't, you can follow [Firebase's official guide](https://firebase.google.com/docs/projects/learn-more#creating-cloud-projects) to create a new Firebase project. ## Using the Firebase CLI Tool 1. Use your preferred package manager to install the Firebase command-line tool with one of the following commands: ```package-install-global firebase-tools ``` 2. Execute the `firebase login` command to ensure that you're logged into the Firebase account associated with your project. 3. In the root directory of your Solid project, create two new files: `firebase.json` and `.firebaserc`. - In `firebase.json`, add the following code: ```json { \"hosting\": { \"public\": \"dist\", \"ignore\": [] } } ``` - In `.firebaserc`, insert the following code (replace `\u003cYOUR_FIREBASE_PROJECT_ID\u003e` with your Firebase project ID): ```bash frame=\"none\" { \"projects\": { \"default\": \"\u003cYOUR_FIREBASE_PROJECT_ID\u003e\" } } ``` 4. Run `npm run build` , followed by `firebase deploy` to build and deploy your project. Upon completion, a `Hosting URL` will be displayed, indicating the live deployment of your project. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=YncoDoKDPPVyet1EOrsa_w\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=YncoDoKDPPVyet1EOrsa_w\u0026type=embed\" /\u003e", "term_freq": { "##": 1, "---": 2, "//app": 2, "//firebase": 3, "//github": 1, "/\u003e": 1, "\u003ceraserlink": 1, "\u003cyour_firebase_project_id\u003e": 2, "\u003e-": 2, "account": 1, "add": 1, "all-in-one": 1, "already": 1, "an": 1, "and": 3, "app": 2, "application": 1, "associated": 1, "authentication": 1, "available": 1, "bash": 1, "be": 1, "before": 1, "build": 2, "by": 2, "can": 2, "cli": 2, "cloud": 1, "code": 2, "com/": 1, "com/docs": 1, "com/docs/projects/learn-more#creating-cloud-projects": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/deployment-options/firebase": 1, "command": 1, "command-line": 1, "commands": 1, "completion": 1, "console": 1, "create": 2, "databases": 1, "default": 1, "deploy": 2, "deployment": 4, "description": 1, "detailed": 1, "development": 1, "directory": 1, "displayed": 1, "dist": 1, "documentation": 1, "easy": 1, "elements=yncodokdppvyet1eorsa_w": 1, "elements=yncodokdppvyet1eorsa_w\u0026type=embed": 1, "ensure": 1, "eraser": 2, "execute": 1, "files": 1, "firebase": 18, "firebase-tools": 1, "firebaserc": 2, "follow": 1, "followed": 1, "following": 3, "for": 2, "frame=": 1, "from": 1, "github-document": 1, "google": 7, "guide": 1, "haven": 1, "host": 1, "hosting": 7, "href=": 1, "https": 6, "id": 1, "if": 1, "ignore": 1, "in": 4, "indicating": 1, "infrastructure": 1, "insert": 1, "install": 1, "integration": 1, "into": 1, "io/workspace/w9y9pnvjwsqdcepnteoe": 1, "io/workspace/w9y9pnvjwsqdcepnteoe/preview": 1, "is": 1, "json": 3, "live": 1, "logged": 1, "login": 1, "mainnavexclude": 1, "make": 1, "manager": 1, "mdx": 1, "new": 2, "none": 1, "npm": 1, "of": 5, "offering": 1, "official": 1, "on": 1, "one": 1, "order": 1, "overview": 1, "package": 1, "package-install-global": 1, "platform": 1, "preferred": 1, "preview=": 1, "proceeding": 1, "production": 1, "project": 7, "projects": 1, "public": 1, "range": 1, "re": 1, "real-time": 1, "reliable": 1, "replace": 1, "root": 1, "run": 2, "services": 2, "set": 1, "site": 1, "solid": 2, "static": 3, "sure": 1, "tags": 1, "that": 1, "the": 10, "title": 1, "to": 5, "tool": 2, "true": 1, "two": 1, "up": 1, "upon": 1, "url": 1, "use": 1, "use_cases": 1, "user": 1, "using": 1, "ve": 1, "version": 1, "visit": 1, "web": 1, "will": 1, "with": 4, "you": 5, "your": 8 }, "length": 258 }, { "id": "ea5cb84fae9fecc8c4a9cabf", "doc_id": "3b1814e333dd5d46a2b0c550", "title": "for", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/for.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/for.json", "content": "--- title: \u003cFor\u003e order: 5 use_cases: \u003e- rendering lists, dynamic arrays, data iteration, collections, tables, repeating elements tags: - lists - iteration - components - arrays - rendering - performance version: '1.0' description: \u003e- Efficiently render lists in SolidJS with the For component. Provides keyed iteration with minimal DOM updates for dynamic array rendering. --- The `\u003cFor\u003e` component is used to render a list of items. It is similar to the `.map()` function in JavaScript. ```ts import { For } from \"solid-js\" import type { JSX } from \"solid-js\" function For\u003cT, U extends JSX.Element\u003e(props: { each: readonly T[] fallback?: JSX.Element children: (item: T, index: () =\u003e number) =\u003e U }): () =\u003e U[] ``` A referentially keyed loop with efficient updating of only changed items. The callback takes the current item as the first argument: ```jsx \u003cFor each={state.list} fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e {(item) =\u003e \u003cdiv\u003e{item}\u003c/div\u003e} \u003c/For\u003e ``` The `each` prop can also be a function that returns a list. This is useful for creating a loop that depends on a state value: ```jsx \u003cFor each={stateSignal()}\u003e{(item) =\u003e \u003cdiv\u003e{item}\u003c/div\u003e}\u003c/For\u003e ``` The optional second argument is an index signal: ```jsx \u003cFor each={state.list} fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e {(item, index) =\u003e ( \u003cdiv\u003e #{index()} {item} \u003c/div\u003e )} \u003c/For\u003e ``` ## Props | Name | Type | Description | | :--------- | :------------------------------------ | :--------------------------------------------------------------- | | `each` | `readonly T[]` | The list of items to render. | | `fallback` | `JSX.Element` | A fallback element to render while the list is loading. | | `children` | `(item: T, index: () =\u003e number) =\u003e U` | A callback that returns a JSX element for each item in the list. |", "term_freq": { "##": 1, "---": 2, "---------": 1, "------------------------------------": 1, "---------------------------------------------------------------": 1, "//github": 1, "\u003c/div\u003e": 5, "\u003c/for\u003e": 3, "\u003cdiv\u003e": 3, "\u003cdiv\u003eloading": 2, "\u003cfor": 3, "\u003cfor\u003e": 2, "=\u003e": 8, "\u003e-": 2, "also": 1, "an": 1, "argument": 2, "array": 1, "arrays": 2, "as": 1, "be": 1, "callback": 2, "can": 1, "changed": 1, "children": 2, "collections": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/components/for": 1, "component": 2, "components": 1, "creating": 1, "current": 1, "data": 1, "depends": 1, "description": 2, "dom": 1, "dynamic": 2, "each": 4, "each=": 3, "efficient": 1, "efficiently": 1, "element": 4, "element\u003e": 1, "elements": 1, "extends": 1, "fallback": 3, "fallback=": 2, "first": 1, "for": 6, "for\u003ct": 1, "from": 2, "function": 3, "github-document": 1, "https": 1, "import": 2, "in": 3, "index": 5, "is": 5, "it": 1, "item": 10, "items": 3, "iteration": 3, "javascript": 1, "jsx": 8, "keyed": 2, "list": 7, "lists": 3, "loading": 1, "loop": 2, "map": 1, "mdx": 1, "minimal": 1, "name": 1, "number": 2, "of": 3, "on": 1, "only": 1, "optional": 1, "order": 1, "performance": 1, "prop": 1, "props": 2, "provides": 1, "readonly": 2, "referentially": 1, "render": 4, "rendering": 3, "repeating": 1, "returns": 2, "second": 1, "signal": 1, "similar": 1, "solid-js": 2, "solidjs": 1, "state": 3, "statesignal": 1, "tables": 1, "tags": 1, "takes": 1, "that": 3, "the": 11, "this": 1, "title": 1, "to": 4, "ts": 1, "type": 2, "updates": 1, "updating": 1, "use_cases": 1, "used": 1, "useful": 1, "value": 1, "version": 1, "while": 1, "with": 3 }, "length": 234 }, { "id": "79cfd7d6a8e60416817d10e6", "doc_id": "08f5b1f6610fbd9756651bf1", "title": "Form Resubmissions | Remix", "url": "https://v2.remix.run/docs/discussion/resubmissions", "type": "html", "source": "remix:does", "path": "devour_data/docs/form-resubmissions---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsForm ResubmissionsGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageThe Browser's Default BehaviorRedirecting from actionsSpecific Scenarios to Consider On this pageThe Browser's Default BehaviorRedirecting from actionsSpecific Scenarios to Consider Form Resubmissions When you use \u003cForm method=\"post\"\u003e in Remix, as opposed to using the native HTML \u003cform method=\"post\"\u003e, Remix does not adhere to the default browser behavior for resubmitting forms during navigation events like clicking back, forward, or refreshing. The Browser's Default Behavior In a standard browser environment, form submissions are navigation events. This means that when a user clicks the back button, the browser will typically resubmit the form. For example: User visits /buy Submits a form to /checkout Navigates to /order/123 The browser history stack would look like this: GET /buy \u003e POST /checkout \u003e *GET /order/123 If the user clicks the back button, the history becomes: GET /buy - *POST /checkout \u003c GET /order/123 In this situation, the browser resubmits the form data, which could lead to issues such as charging a credit card twice. Redirecting from actions A common practice to avoid this issue is to issue a redirect after the POST request. This removes the POST action from the browser's history. The history stack would then look like this: GET /buy \u003e POST /checkout, Redirect \u003e GET /order/123 With this approach, clicking the back button would not resubmit the form: GET /buy - *GET /order/123 Specific Scenarios to Consider While accidental resubmissions generally don't happen in Remix, there are specific scenarios where they might. You used \u003cform\u003e instead of \u003cForm\u003e You used \u003cForm reloadDocument\u003e You are not rendering \u003cScripts/\u003e JavaScript is disabled by the user JavaScript had not loaded when the form was submitted It's advisable to implement a redirect from the action to avoid unintended resubmissions. Guides Form Validation API \u003cForm\u003e useActionData redirect © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_975\\\":-5,\\\"_976\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":974},{\\\"_18\\\":156},\\\"docs/discussion/resubmissions.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"form-resubmissions\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#form-resubmissions\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eForm Resubmissions\\u003c/h1\\u003e\\\\n\\u003cp\\u003eWhen you use \\u003ccode\\u003e\\u0026#x3C;Form method=\\\\\\\"post\\\\\\\"\\u003e\\u003c/code\\u003e in Remix, as opposed to using the native HTML \\u003ccode\\u003e\\u0026#x3C;form method=\\\\\\\"post\\\\\\\"\\u003e\\u003c/code\\u003e, Remix does not adhere to the default browser behavior for resubmitting forms during navigation events like clicking back, forward, or refreshing.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"the-browsers-default-behavior\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#the-browsers-default-behavior\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eThe Browser's Default Behavior\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIn a standard browser environment, form submissions are navigation events. This means that when a user clicks the back button, the browser will typically resubmit the form. For example:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eUser visits \\u003ccode\\u003e/buy\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eSubmits a form to \\u003ccode\\u003e/checkout\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eNavigates to \\u003ccode\\u003e/order/123\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eThe browser history stack would look like this:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003eGET /buy \\u003e POST /checkout \\u003e *GET /order/123\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eIf the user clicks the back button, the history becomes:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003eGET /buy - *POST /checkout \\u0026#x3C; GET /order/123\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eIn this situation, the browser resubmits the form data, which could lead to issues such as charging a credit card twice.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"redirecting-from-actions\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#redirecting-from-actions\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRedirecting from \\u003ccode\\u003eaction\\u003c/code\\u003es\\u003c/h2\\u003e\\\\n\\u003cp\\u003eA common practice to avoid this issue is to issue a redirect after the POST request. This removes the POST action from the browser's history. The history stack would then look like this:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003eGET /buy \\u003e POST /checkout, Redirect \\u003e GET /order/123\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eWith this approach, clicking the back button would not resubmit the form:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003eGET /buy - *GET /order/123\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch2 id=\\\\\\\"specific-scenarios-to-consider\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#specific-scenarios-to-consider\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSpecific Scenarios to Consider\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhile accidental resubmissions generally don't happen in Remix, there are specific scenarios where they might.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eYou used \\u003ccode\\u003e\\u0026#x3C;form\\u003e\\u003c/code\\u003e instead of \\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eYou used \\u003ccode\\u003e\\u0026#x3C;Form reloadDocument\\u003e\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eYou are not rendering \\u003ccode\\u003e\\u0026#x3C;Scripts/\\u003e\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eJavaScript is disabled by the user\\u003c/li\\u003e\\\\n\\u003cli\\u003eJavaScript had not loaded when the form was submitted\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eIt's advisable to implement a redirect from the action to avoid unintended resubmissions.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"additional-resources\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#additional-resources\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e \\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eGuides\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../guides/form-validation\\\\\\\"\\u003eForm Validation\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eAPI\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/form\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../hooks/use-action-data\\\\\\\"\\u003e\\u003ccode\\u003euseActionData\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../utils/redirect\\\\\\\"\\u003e\\u003ccode\\u003eredirect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\",\\\"docs/discussion/resubmissions\\\",\\\"headings\\\",[960,965,968,971],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"The Browser's Default Behavior\\\",\\\"the-browsers-default-behavior\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"Redirecting from \\u003ccode\\u003eaction\\u003c/code\\u003es\\\",\\\"redirecting-from-actions\\\",{\\\"_961\\\":962,\\\"_955\\\":969,\\\"_24\\\":970},\\\"Specific Scenarios to Consider\\\",\\\"specific-scenarios-to-consider\\\",{\\\"_961\\\":962,\\\"_955\\\":972,\\\"_24\\\":973},\\\" \\\",\\\"additional-resources\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#additional-resources\\\\\\": 1, "#form-resubmissions\\\\\\": 1, "#redirecting-from-actions\\\\\\": 1, "#specific-scenarios-to-consider\\\\\\": 1, "#the-browsers-default-behavior\\\\\\": 1, "$\\": 1, "$rc": 3, "*get": 4, "*post": 2, "-1\\\\\\": 5, "-5": 2, "/$": 1, "//v2": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/buy": 9, "/checkout": 7, "/components/form\\\\\\": 1, "/guides/form-validation\\\\\\": 1, "/hooks/use-action-data\\\\\\": 1, "/order/123": 5, "/order/123\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch2": 1, "/order/123\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eif": 1, "/order/123\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003ein": 1, "/order/123\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003ewith": 1, "/utils/redirect\\\\\\": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 2, "157": 1, "158": 1, "159": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 4, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "98": 1, "99": 1, "\u003cform": 3, "\u003cform\u003e": 3, "\u003cscripts/\u003e": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 1, "\\n": 1, "\\u0026#x3c": 1, "\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eguides\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003c/p\\u003e\\\\n\\u003ch2": 3, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003euser": 1, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003eget": 4, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eyou": 1, "\\u003ccode\\u003e/buy\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003esubmits": 1, "\\u003ccode\\u003e/checkout\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003enavigates": 1, "\\u003ccode\\u003e/order/123\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003ccode\\u003e\\u0026#x3c": 6, "\\u003ccode\\u003eaction\\u003c/code\\u003es\\": 1, "\\u003ccode\\u003eaction\\u003c/code\\u003es\\u003c/h2\\u003e\\\\n\\u003cp\\u003ea": 1, "\\u003ch1": 1, "\\u003e": 4, "\\u003e\\u003c/code\\u003e": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eform": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eredirecting": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003especific": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ethe": 1, "\\u003e\\u003ca": 5, "\\u003e\\u003ccode\\u003e\\u0026#x3c": 1, "\\u003e\\u003ccode\\u003eredirect\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\": 1, "\\u003e\\u003ccode\\u003euseactiondata\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003cspan": 5, "\\u003eform": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 156, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 5, "_958\\": 1, "_961\\": 4, "_975\\": 1, "_976\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "accidental": 2, "action": 4, "action\\": 1, "actiondata\\": 1, "actions": 1, "actionsspecific": 2, "adapter": 3, "adapters": 3, "additional-resources\\": 1, "additional-resources\\\\\\": 1, "adhere": 2, "advisable": 2, "after": 2, "all": 1, "an": 1, "and": 9, "api": 5, "api@remix-run/dev": 2, "api\\": 1, "app": 2, "approach": 3, "are": 6, "aria-hidden=\\\\\\": 5, "as": 7, "asked": 1, "asset": 3, "at": 1, "attrs\\": 1, "avoid": 4, "await\\": 1, "b=document": 1, "back": 8, "backend": 3, "basename": 1, "be": 1, "becomes": 2, "been": 2, "before": 1, "behavior": 3, "behavior\\": 1, "behavior\\u003c/h2\\u003e\\\\n\\u003cp\\u003ein": 1, "behaviorredirecting": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 20, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "button": 6, "by": 2, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "can": 1, "card": 2, "catch": 1, "changelog": 2, "changelog\\": 1, "charging": 2, "children\\": 1, "class=\\\\\\": 5, "cli": 5, "cli\\": 1, "clicking": 4, "clicks": 4, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "code": 4, "common": 2, "community": 3, "community\\": 1, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "consider": 3, "consider\\": 1, "consider\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhile": 1, "console": 1, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "could": 2, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "credit": 2, "css": 15, "css\\": 1, "d=c": 2, "data": 18, "data=": 1, "data\\": 2, "default": 7, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "development": 3, "disabled": 2, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 1, "doc\\": 1, "docs/discussion/resubmissions": 1, "docs/discussion/resubmissions\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsform": 1, "document": 1, "does": 2, "don": 2, "done": 1, "during": 2, "e--": 1, "e=0": 1, "else": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 6, "environment": 5, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "events": 4, "everything": 1, "example": 2, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "extract": 2, "extract\\": 1, "f=a": 1, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "for": 10, "form": 29, "form-resubmissions\\\\\\": 1, "form\\": 1, "form\\u003e\\u003c/code\\u003e": 1, "form\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "form\\u003e\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eyou": 1, "forms": 2, "forward": 2, "found": 3, "frequently": 1, "from": 15, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 1, "future": 4, "generally": 2, "get": 12, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "had": 2, "handle": 2, "handle\\": 1, "handling": 4, "handling\\": 2, "happen": 2, "has": 2, "hascontent\\": 1, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 1, "history": 12, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href=\\\\\\": 9, "html": 3, "html\\": 1, "https": 2, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 5, "icon-link\\\\\\": 5, "id=\\\\\\": 5, "if": 7, "implement": 2, "import": 5, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 12, "inc": 1, "index": 3, "initial": 1, "insertbefore": 1, "instead": 2, "integrating": 1, "interactions": 1, "into": 2, "introduction": 1, "is": 5, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "issue": 4, "issues": 2, "it": 1, "iterative": 1, "javascript": 4, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "key": 4, "know": 1, "lazy": 3, "lead": 2, "learning": 1, "let": 3, "licensed": 1, "like": 6, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "loaded": 2, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "look": 4, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "means": 2, "menu\\": 1, "meta": 4, "meta\\": 2, "method=": 2, "method=\\\\\\": 2, "might": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 6, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "most": 1, "naming": 2, "naming\\": 1, "native": 2, "navigates": 1, "navigation": 4, "navlink": 2, "navlink\\": 1, "need": 1, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 11, "null": 1, "number": 1, "of": 5, "on": 4, "once": 1, "one": 1, "open": 1, "opposed": 2, "optimization": 2, "optimization\\": 1, "or": 3, "order\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "pagethe": 2, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "positions": 2, "post": 10, "post\\\\\\": 2, "postcss": 2, "postcss\\": 1, "practice": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "react": 8, "react-router-scroll-positions": 1, "readablestream": 1, "redirect": 9, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "redirecting": 2, "redirecting-from-actions\\": 1, "redirecting-from-actions\\\\\\": 1, "refreshing": 2, "regular": 3, "related": 1, "released": 2, "reloaddocument\u003e": 1, "reloaddocument\\u003e\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eyou": 1, "remix": 16, "remix\\": 2, "removechild": 2, "removeitem": 1, "removes": 2, "rendering": 2, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 3, "resource": 3, "resources": 1, "restorekey": 2, "resubmissions": 8, "resubmissions\\": 1, "resubmissions\\u003c/h1\\u003e\\\\n\\u003cp\\u003ewhen": 1, "resubmissionsgetting": 1, "resubmit": 4, "resubmits": 2, "resubmitting": 2, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 12, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/discussion/resubmissions": 1, "run\\": 1, "running": 1, "runtimes": 3, "scenarios": 7, "scripts": 2, "scripts/\\u003e\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ejavascript": 1, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "server": 15, "server\\": 3, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "simplifying": 1, "single": 3, "siteurl\\": 1, "situation": 2, "slice": 1, "slug\\": 1, "spa": 3, "specific": 4, "specific-scenarios-to-consider\\": 1, "specific-scenarios-to-consider\\\\\\": 1, "ssr": 1, "stack": 4, "stages": 1, "standard": 2, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "submissions": 2, "submits": 1, "submitted": 1, "submitted\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eit": 1, "such": 2, "support": 3, "support\\": 1, "tabindex=\\\\\\": 5, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 2, "the": 47, "the-browsers-default-behavior\\": 1, "the-browsers-default-behavior\\\\\\": 1, "then": 2, "there": 2, "they": 2, "this": 18, "through": 1, "title\\": 1, "tls": 2, "tls\\": 1, "to": 33, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 6, "true\\\\\\": 5, "try": 1, "ts": 2, "ts\\": 1, "tutorial": 3, "twice": 2, "typeof": 1, "typescript": 2, "typescript\\": 1, "typically": 2, "ui": 2, "ui\\": 1, "under": 1, "unintended": 2, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "use": 2, "useactiondata": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 4, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 6, "user\\u003c/li\\u003e\\\\n\\u003cli\\u003ejavascript": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 2, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 3, "validation\\": 1, "validation\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eapi\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "vanilla": 3, "var": 2, "variables": 2, "variables\\": 1, "view": 2, "visits": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "was": 2, "way": 1, "when": 6, "where": 2, "which": 2, "while": 2, "why": 1, "will": 4, "window": 11, "with": 5, "would": 6, "writes": 2, "writes\\": 1, "you": 10, "your": 3, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 4339 }, { "id": "9db62ee9e1b133afd8ee5411", "doc_id": "6ba649dd184de2c66f3557db", "title": "Form vs. fetcher | Remix", "url": "https://v2.remix.run/docs/discussion/form-vs-fetcher", "type": "html", "source": "remix:does", "path": "devour_data/docs/form-vs.-fetcher---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsForm vs. fetcherGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageAPIs in FocusURL ConsiderationsSpecific Use CasesAPI ComparisonExamplesCreating a New RecordUpdating a RecordMark Article as ReadUser Avatar Details PopupConclusionOn this pageAPIs in FocusURL ConsiderationsSpecific Use CasesAPI ComparisonExamplesCreating a New RecordUpdating a RecordMark Article as ReadUser Avatar Details PopupConclusionForm vs. fetcher Developing in Remix offers a rich set of tools that can sometimes overlap in functionality, creating a sense of ambiguity for newcomers. The key to effective development in Remix is understanding the nuances and appropriate use cases for each tool. This document seeks to provide clarity on when and why to use specific APIs. APIs in Focus \u003cForm\u003e useActionData useFetcher useNavigation Understanding the distinctions and intersections of these APIs is vital for efficient and effective Remix development. URL Considerations The primary criterion when choosing among these tools is whether you want the URL to change or not: URL Change Desired: When navigating or transitioning between pages, or after certain actions like creating or deleting records. This ensures that the user's browser history accurately reflects their journey through your application. Expected Behavior: In many cases, when users hit the back button, they should be taken to the previous page. Other times the history entry may be replaced but the URL change is important nonetheless. No URL Change Desired: For actions that don't significantly change the context or primary content of the current view. This might include updating individual fields or minor data manipulations that don't warrant a new URL or page reload. This also applies to loading data with fetchers for things like popovers, combo boxes, etc. Specific Use Cases When the URL Should Change These actions typically reflect significant changes to the user's context or state: Creating a New Record: After creating a new record, it's common to redirect users to a page dedicated to that new record, where they can view or further modify it. Deleting a Record: If a user is on a page dedicated to a specific record and decides to delete it, the logical next step is to redirect them to a general page, such as a list of all records. For these cases, developers should consider using a combination of \u003cForm\u003e, useActionData, and useNavigation. Each of these tools can be coordinated to handle form submission, invoke specific actions, retrieve action-related data, and manage navigation respectively. When the URL Shouldn't Change These actions are generally more subtle and don't require a context switch for the user: Updating a Single Field: Maybe a user wants to change the name of an item in a list or update a specific property of a record. This action is minor and doesn't necessitate a new page or URL. Deleting a Record from a List: In a list view, if a user deletes an item, they likely expect to remain on the list view, with that item no longer in the list. Creating a Record in a List View: When adding a new item to a list, it often makes sense for the user to remain in that context, seeing their new item added to the list without a full page transition. Loading Data for a Popover or Combobox: When loading data for a popover or combobox, the user's context remains unchanged. The data is loaded in the background and displayed in a small, self-contained UI element. For such actions, useFetcher is the go-to API. It's versatile, combining functionalities of the other four APIs, and is perfectly suited for tasks where the URL should remain unchanged. API Comparison As you can see, the two sets of APIs have a lot of similarities: Navigation/URL API Fetcher API \u003cForm\u003e \u003cfetcher.Form\u003e useActionData() fetcher.data navigation.state fetcher.state navigation.formAction fetcher.formAction navigation.formData fetcher.formData Examples Creating a New Record import type { ActionFunctionArgs } from \"@remix-run/node\"; // or cloudflare/deno import { redirect } from \"@remix-run/node\"; // or cloudflare/deno import { Form, useActionData, useNavigation, } from \"@remix-run/react\"; export async function action({ request, }: ActionFunctionArgs) { const formData = await request.formData(); const errors = await validateRecipeFormData(formData); if (errors) { return json({ errors }); } const recipe = await db.recipes.create(formData); return redirect(`/recipes/${recipe.id}`); } export function NewRecipe() { const { errors } = useActionData\u003ctypeof action\u003e(); const navigation = useNavigation(); const isSubmitting = navigation.formAction === \"/recipes/new\"; return ( \u003cForm method=\"post\"\u003e \u003clabel\u003e Title: \u003cinput name=\"title\" /\u003e {errors?.title ? \u003cspan\u003e{errors.title}\u003c/span\u003e : null} \u003c/label\u003e \u003clabel\u003e Ingredients: \u003ctextarea name=\"ingredients\" /\u003e {errors?.ingredients ? ( \u003cspan\u003e{errors.ingredients}\u003c/span\u003e ) : null} \u003c/label\u003e \u003clabel\u003e Directions: \u003ctextarea name=\"directions\" /\u003e {errors?.directions ? ( \u003cspan\u003e{errors.directions}\u003c/span\u003e ) : null} \u003c/label\u003e \u003cbutton type=\"submit\"\u003e {isSubmitting ? \"Saving...\" : \"Create Recipe\"} \u003c/button\u003e \u003c/Form\u003e ); } The example leverages \u003cForm\u003e, useActionData, and useNavigation to facilitate an intuitive record creation process. Using \u003cForm\u003e ensures direct and logical navigation. After creating a record, the user is naturally guided to the new recipe's unique URL, reinforcing the outcome of their action. useActionData bridges server and client, providing immediate on submission issues. This quick response enables users to rectify any errors without hindrance. Lastly, useNavigation dynamically reflects the form's submission state. This subtle UI change, like toggling the button's label, assures users that their actions are being processed. Combined, these APIs offer a balanced blend of structured navigation and . Updating a Record Now consider we're looking at a list of recipes that have delete buttons on each item. When a user clicks the delete button, we want to delete the recipe from the database and remove it from the list without navigating away from the list. First, consider the basic route setup to get a list of recipes on the page: import type { LoaderFunctionArgs } from \"@remix-run/node\"; // or cloudflare/deno import { json } from \"@remix-run/node\"; // or cloudflare/deno import { useLoaderData } from \"@remix-run/react\"; export async function loader({ request, }: LoaderFunctionArgs) { return json({ recipes: await db.recipes.findAll({ limit: 30 }), }); } export default function Recipes() { const { recipes } = useLoaderData\u003ctypeof loader\u003e(); return ( \u003cul\u003e {recipes.map((recipe) =\u003e ( \u003cRecipeListItem key={recipe.id} recipe={recipe} /\u003e ))} \u003c/ul\u003e ); } Now we'll look at the action that deletes a recipe and the component that renders each recipe in the list. export async function action({ request, }: ActionFunctionArgs) { const formData = await request.formData(); const id = formData.get(\"id\"); await db.recipes.delete(id); return json({ ok: true }); } const RecipeListItem: FunctionComponent\u003c{ recipe: Recipe; }\u003e = ({ recipe }) =\u003e { const fetcher = useFetcher(); const isDeleting = fetcher.state !== \"idle\"; return ( \u003cli\u003e \u003ch2\u003e{recipe.title}\u003c/h2\u003e \u003cfetcher.Form method=\"post\"\u003e \u003cbutton disabled={isDeleting} type=\"submit\"\u003e {isDeleting ? \"Deleting...\" : \"Delete\"} \u003c/button\u003e \u003c/fetcher.Form\u003e \u003c/li\u003e ); }; Using useFetcher in this scenario works perfectly. Instead of navigating away or refreshing the entire page, we want in-place updates. When a user deletes a recipe, the action is called and the fetcher manages the corresponding state transitions. The key advantage here is the maintenance of context. The user stays on the list when the deletion completes. The fetcher's state management capabilities are leveraged to give real-time : it toggles between \"Deleting...\" and \"Delete\", providing a clear indication of the ongoing process. Furthermore, with each fetcher having the autonomy to manage its own state, operations on individual list items become independent, ensuring that actions on one item don't affect the others (though revalidation of the page data is a shared concern covered in Network Concurrency Management). In essence, useFetcher offers a seamless mechanism for actions that don't necessitate a change in the URL or navigation, enhancing the user experience by providing real-time and context preservation. Mark Article as Read Imagine you want to mark that an article has been read by the current user, after they've been on the page for a while and scrolled to the bottom. You could make a hook that looks something like this: function useMarkAsRead({ articleId, userId }) { const marker = useFetcher(); useSpentSomeTimeHereAndScrolledToTheBottom(() =\u003e { marker.submit( { userId }, { action: `/article/${articleId}/mark-as-read`, method: \"post\", } ); }); } User Avatar Details Popup Anytime you show the user avatar, you could put a hover effect that fetches data from a loader and displays it in a popup. export async function loader({ params, }: LoaderFunctionArgs) { return json( await fakeDb.user.find({ where: { id: params.id } }) ); } function UserAvatar({ partialUser }) { const userDetails = useFetcher\u003ctypeof loader\u003e(); const [showDetails, setShowDetails] = useState(false); useEffect(() =\u003e { if ( showDetails \u0026\u0026 userDetails.state === \"idle\" \u0026\u0026 !userDetails.data ) { userDetails.load(`/users/${user.id}/details`); } }, [showDetails, userDetails]); return ( \u003cdiv onMouseEnter={() =\u003e setShowDetails(true)} onMouseLeave={() =\u003e setShowDetails(false)} \u003e \u003cimg src={partialUser.profileImageUrl} /\u003e {showDetails ? ( userDetails.state === \"idle\" \u0026\u0026 userDetails.data ? ( \u003cUserPopup user={userDetails.data} /\u003e ) : ( \u003cUserPopupLoading /\u003e ) ) : null} \u003c/div\u003e ); } Conclusion Remix offers a range of tools to cater to varied developmental needs. While some functionalities might seem to overlap, each tool has been crafted with specific scenarios in mind. By understanding the intricacies and ideal applications of \u003cForm\u003e, useActionData, useFetcher, and useNavigation, developers can create more intuitive, responsive, and user-friendly web applications.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_994\\\":-5,\\\"_995\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":993},{\\\"_18\\\":144},\\\"docs/discussion/form-vs-fetcher.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"form-vs-fetcher\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#form-vs-fetcher\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eForm vs. fetcher\\u003c/h1\\u003e\\\\n\\u003cp\\u003eDeveloping in Remix offers a rich set of tools that can sometimes overlap in functionality, creating a sense of ambiguity for newcomers. The key to effective development in Remix is understanding the nuances and appropriate use cases for each tool. This document seeks to provide clarity on when and why to use specific APIs.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"apis-in-focus\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#apis-in-focus\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eAPIs in Focus\\u003c/h2\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/form\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../hooks/use-action-data\\\\\\\"\\u003e\\u003ccode\\u003euseActionData\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../hooks/use-fetcher\\\\\\\"\\u003e\\u003ccode\\u003euseFetcher\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../hooks/use-navigation\\\\\\\"\\u003e\\u003ccode\\u003euseNavigation\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eUnderstanding the distinctions and intersections of these APIs is vital for efficient and effective Remix development.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"url-considerations\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#url-considerations\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eURL Considerations\\u003c/h3\\u003e\\\\n\\u003cp\\u003eThe primary criterion when choosing among these tools is whether you want the URL to change or not:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eURL Change Desired\\u003c/strong\\u003e: When navigating or transitioning between pages, or after certain actions like creating or deleting records. This ensures that the user's browser history accurately reflects their journey through your application.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eExpected Behavior\\u003c/strong\\u003e: In many cases, when users hit the back button, they should be taken to the previous page. Other times the history entry may be replaced but the URL change is important nonetheless.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eNo URL Change Desired\\u003c/strong\\u003e: For actions that don't significantly change the context or primary content of the current view. This might include updating individual fields or minor data manipulations that don't warrant a new URL or page reload. This also applies to loading data with fetchers for things like popovers, combo boxes, etc.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3 id=\\\\\\\"specific-use-cases\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#specific-use-cases\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSpecific Use Cases\\u003c/h3\\u003e\\\\n\\u003ch4 id=\\\\\\\"when-the-url-should-change\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#when-the-url-should-change\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhen the URL Should Change\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThese actions typically reflect significant changes to the user's context or state:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eCreating a New Record\\u003c/strong\\u003e: After creating a new record, it's common to redirect users to a page dedicated to that new record, where they can view or further modify it.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eDeleting a Record\\u003c/strong\\u003e: If a user is on a page dedicated to a specific record and decides to delete it, the logical next step is to redirect them to a general page, such as a list of all records.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eFor these cases, developers should consider using a combination of \\u003ca href=\\\\\\\"../components/form\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e\\u003c/a\\u003e, \\u003ca href=\\\\\\\"../hooks/use-action-data\\\\\\\"\\u003e\\u003ccode\\u003euseActionData\\u003c/code\\u003e\\u003c/a\\u003e, and \\u003ca href=\\\\\\\"../hooks/use-navigation\\\\\\\"\\u003e\\u003ccode\\u003euseNavigation\\u003c/code\\u003e\\u003c/a\\u003e. Each of these tools can be coordinated to handle form submission, invoke specific actions, retrieve action-related data, and manage navigation respectively.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"when-the-url-shouldnt-change\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#when-the-url-shouldnt-change\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eWhen the URL Shouldn't Change\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThese actions are generally more subtle and don't require a context switch for the user:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eUpdating a Single Field\\u003c/strong\\u003e: Maybe a user wants to change the name of an item in a list or update a specific property of a record. This action is minor and doesn't necessitate a new page or URL.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eDeleting a Record from a List\\u003c/strong\\u003e: In a list view, if a user deletes an item, they likely expect to remain on the list view, with that item no longer in the list.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eCreating a Record in a List View\\u003c/strong\\u003e: When adding a new item to a list, it often makes sense for the user to remain in that context, seeing their new item added to the list without a full page transition.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eLoading Data for a Popover or Combobox\\u003c/strong\\u003e: When loading data for a popover or combobox, the user's context remains unchanged. The data is loaded in the background and displayed in a small, self-contained UI element.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eFor such actions, \\u003ca href=\\\\\\\"../hooks/use-fetcher\\\\\\\"\\u003e\\u003ccode\\u003euseFetcher\\u003c/code\\u003e\\u003c/a\\u003e is the go-to API. It's versatile, combining functionalities of the other four APIs, and is perfectly suited for tasks where the URL should remain unchanged.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"api-comparison\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#api-comparison\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eAPI Comparison\\u003c/h2\\u003e\\\\n\\u003cp\\u003eAs you can see, the two sets of APIs have a lot of similarities:\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eNavigation/URL API\\u003c/th\\u003e\\\\n\\u003cth\\u003eFetcher API\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e\\u0026#x3C;fetcher.Form\\u003e\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003euseActionData()\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003efetcher.data\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003enavigation.state\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003efetcher.state\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003enavigation.formAction\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003efetcher.formAction\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003enavigation.formData\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003efetcher.formData\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003ch2 id=\\\\\\\"examples\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#examples\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eExamples\\u003c/h2\\u003e\\\\n\\u003ch3 id=\\\\\\\"creating-a-new-record\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#creating-a-new-record\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eCreating a New Record\\u003c/h3\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/recipes/new.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/recipes/new.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eredirect\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseActionData\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalidateRecipeFormData\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erecipe\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edb\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erecipes\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreate\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eredirect\\u003c/span\\u003e(`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/recipes/\\u003c/span\\u003e${\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erecipe\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e}`);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eNewRecipe\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseActionData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisSubmitting\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformAction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/recipes/new\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e Title: \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etitle\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e?.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etitle\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etitle\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e Ingredients: \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etextarea\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eingredients\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e?.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eingredients\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eingredients\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e Directions: \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etextarea\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edirections\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e?.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edirections\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edirections\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisSubmitting\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eSaving...\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eCreate Recipe\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"50\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThe example leverages \\u003ca href=\\\\\\\"../components/form\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e\\u003c/a\\u003e, \\u003ca href=\\\\\\\"../hooks/use-action-data\\\\\\\"\\u003e\\u003ccode\\u003euseActionData\\u003c/code\\u003e\\u003c/a\\u003e, and \\u003ca href=\\\\\\\"../hooks/use-navigation\\\\\\\"\\u003e\\u003ccode\\u003euseNavigation\\u003c/code\\u003e\\u003c/a\\u003e to facilitate an intuitive record creation process.\\u003c/p\\u003e\\\\n\\u003cp\\u003eUsing \\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e ensures direct and logical navigation. After creating a record, the user is naturally guided to the new recipe's unique URL, reinforcing the outcome of their action.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003euseActionData\\u003c/code\\u003e bridges server and client, providing immediate on submission issues. This quick response enables users to rectify any errors without hindrance.\\u003c/p\\u003e\\\\n\\u003cp\\u003eLastly, \\u003ccode\\u003euseNavigation\\u003c/code\\u003e dynamically reflects the form's submission state. This subtle UI change, like toggling the button's label, assures users that their actions are being processed.\\u003c/p\\u003e\\\\n\\u003cp\\u003eCombined, these APIs offer a balanced blend of structured navigation and .\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"updating-a-record\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updating-a-record\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdating a Record\\u003c/h3\\u003e\\\\n\\u003cp\\u003eNow consider we're looking at a list of recipes that have delete buttons on each item. When a user clicks the delete button, we want to delete the recipe from the database and remove it from the list without navigating away from the list.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFirst, consider the basic route setup to get a list of recipes on the page:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/recipes/_index.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/recipes/_index.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e recipes: \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edb\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erecipes\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efindAll\\u003c/span\\u003e({ limit: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e30\\u003c/span\\u003e }),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eRecipes\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erecipes\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eul\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erecipes\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emap\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erecipe\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRecipeListItem\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ekey\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erecipe\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erecipe\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erecipe\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e ))\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eul\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNow we'll look at the action that deletes a recipe and the component that renders each recipe in the list.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/recipes/_index.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/recipes/_index.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eid\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edb\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erecipes\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edelete\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({ ok: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eRecipeListItem\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eFunctionComponent\\u003c/span\\u003e\\u0026#x3C;{\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erecipe\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRecipe\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e}\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e ({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erecipe\\u003c/span\\u003e }) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisDeleting\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!==\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eidle\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eli\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh2\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erecipe\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etitle\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh2\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edisabled\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisDeleting\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisDeleting\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eDeleting...\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eDelete\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eli\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eUsing \\u003ca href=\\\\\\\"../hooks/use-fetcher\\\\\\\"\\u003e\\u003ccode\\u003euseFetcher\\u003c/code\\u003e\\u003c/a\\u003e in this scenario works perfectly. Instead of navigating away or refreshing the entire page, we want in-place updates. When a user deletes a recipe, the \\u003ccode\\u003eaction\\u003c/code\\u003e is called and the fetcher manages the corresponding state transitions.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe key advantage here is the maintenance of context. The user stays on the list when the deletion completes. The fetcher's state management capabilities are leveraged to give real-time : it toggles between \\u003ccode\\u003e\\\\\\\"Deleting...\\\\\\\"\\u003c/code\\u003e and \\u003ccode\\u003e\\\\\\\"Delete\\\\\\\"\\u003c/code\\u003e, providing a clear indication of the ongoing process.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFurthermore, with each \\u003ccode\\u003efetcher\\u003c/code\\u003e having the autonomy to manage its own state, operations on individual list items become independent, ensuring that actions on one item don't affect the others (though revalidation of the page data is a shared concern covered in \\u003ca href=\\\\\\\"./concurrency\\\\\\\"\\u003eNetwork Concurrency Management\\u003c/a\\u003e).\\u003c/p\\u003e\\\\n\\u003cp\\u003eIn essence, \\u003ccode\\u003euseFetcher\\u003c/code\\u003e offers a seamless mechanism for actions that don't necessitate a change in the URL or navigation, enhancing the user experience by providing real-time and context preservation.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"mark-article-as-read\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#mark-article-as-read\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMark Article as Read\\u003c/h3\\u003e\\\\n\\u003cp\\u003eImagine you want to mark that an article has been read by the current user, after they've been on the page for a while and scrolled to the bottom. You could make a hook that looks something like this:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseMarkAsRead\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003earticleId\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserId\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emarker\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseSpentSomeTimeHereAndScrolledToTheBottom\\u003c/span\\u003e(() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emarker\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esubmit\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserId\\u003c/span\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e action: `\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/article/\\u003c/span\\u003e${\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003earticleId\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/mark-as-read\\u003c/span\\u003e`,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e method: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3 id=\\\\\\\"user-avatar-details-popup\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#user-avatar-details-popup\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUser Avatar Details Popup\\u003c/h3\\u003e\\\\n\\u003cp\\u003eAnytime you show the user avatar, you could put a hover effect that fetches data from a loader and displays it in a popup.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/users.$id.details.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/users.$id.details.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efakeDb\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efind\\u003c/span\\u003e({ where: { id: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e } })\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eUserAvatar\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epartialUser\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserDetails\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eshowDetails\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esetShowDetails\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseState\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseEffect\\u003c/span\\u003e(() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eshowDetails\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserDetails\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eidle\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserDetails\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e ) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserDetails\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eload\\u003c/span\\u003e(`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/users/\\u003c/span\\u003e${\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/details\\u003c/span\\u003e`);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e }, [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eshowDetails\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserDetails\\u003c/span\\u003e]);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonMouseEnter\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetShowDetails\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e)\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonMouseLeave\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetShowDetails\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e)\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eimg\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esrc\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epartialUser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprofileImageUrl\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eshowDetails\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserDetails\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eidle\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserDetails\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eUserPopup\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euser\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserDetails\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eUserPopupLoading\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e )\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"conclusion\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#conclusion\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eConclusion\\u003c/h2\\u003e\\\\n\\u003cp\\u003eRemix offers a range of tools to cater to varied developmental needs. While some functionalities might seem to overlap, each tool has been crafted with specific scenarios in mind. By understanding the intricacies and ideal applications of \\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e, \\u003ccode\\u003euseActionData\\u003c/code\\u003e, \\u003ccode\\u003euseFetcher\\u003c/code\\u003e, and \\u003ccode\\u003euseNavigation\\u003c/code\\u003e, developers can create more intuitive, responsive, and user-friendly web applications.\\u003c/p\\u003e\\\",\\\"docs/discussion/form-vs-fetcher\\\",\\\"headings\\\",[960,965,969,972,975,978,981,984,987,990],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"APIs in Focus\\\",\\\"apis-in-focus\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":968},\\\"h3\\\",\\\"URL Considerations\\\",\\\"url-considerations\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":971},\\\"Specific Use Cases\\\",\\\"specific-use-cases\\\",{\\\"_961\\\":962,\\\"_955\\\":973,\\\"_24\\\":974},\\\"API Comparison\\\",\\\"api-comparison\\\",{\\\"_961\\\":962,\\\"_955\\\":976,\\\"_24\\\":977},\\\"Examples\\\",\\\"examples\\\",{\\\"_961\\\":966,\\\"_955\\\":979,\\\"_24\\\":980},\\\"Creating a New Record\\\",\\\"creating-a-new-record\\\",{\\\"_961\\\":966,\\\"_955\\\":982,\\\"_24\\\":983},\\\"Updating a Record\\\",\\\"updating-a-record\\\",{\\\"_961\\\":966,\\\"_955\\\":985,\\\"_24\\\":986},\\\"Mark Article as Read\\\",\\\"mark-article-as-read\\\",{\\\"_961\\\":966,\\\"_955\\\":988,\\\"_24\\\":989},\\\"User Avatar Details Popup\\\",\\\"user-avatar-details-popup\\\",{\\\"_961\\\":962,\\\"_955\\\":991,\\\"_24\\\":992},\\\"Conclusion\\\",\\\"conclusion\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#api-comparison\\\\\\": 1, "#apis-in-focus\\\\\\": 1, "#conclusion\\\\\\": 1, "#creating-a-new-record\\\\\\": 1, "#examples\\\\\\": 1, "#form-vs-fetcher\\\\\\": 1, "#mark-article-as-read\\\\\\": 1, "#specific-use-cases\\\\\\": 1, "#updating-a-record\\\\\\": 1, "#url-considerations\\\\\\": 1, "#user-avatar-details-popup\\\\\\": 1, "#when-the-url-should-change\\\\\\": 1, "#when-the-url-shouldnt-change\\\\\\": 1, "$\\": 1, "$id": 2, "$rc": 3, "\u0026\u0026": 3, "--base03": 4, "--base05": 5, "--base08": 128, "--base09": 9, "--base0a": 28, "--base0b": 28, "--base0d": 67, "--base0e": 103, "--base0f": 36, "-1\\\\\\": 13, "-5": 2, "/$": 1, "//": 4, "//v2": 2, "/\u003e": 7, "/\\u003cspan": 14, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 7, "/article/$": 1, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/components/form\\\\\\": 3, "/concurrency\\\\\\": 1, "/details": 1, "/hooks/use-action-data\\\\\\": 3, "/hooks/use-fetcher\\\\\\": 3, "/hooks/use-navigation\\\\\\": 3, "/mark-as-read": 1, "/recipes/$": 1, "/recipes/new": 1, "/users/$": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 5, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 5, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 5, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 5, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 2, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 4, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 4, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 4, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 4, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 4, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 4, "1\\\\\\": 5, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 4, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 4, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 4, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 3, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 3, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 3, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 3, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 2, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "28\\\\\\": 2, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "29\\\\\\": 2, "2\\\\\\": 5, "30": 2, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30\\\\\\": 2, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "31\\\\\\": 2, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "32\\\\\\": 2, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "33\\\\\\": 2, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "34\\\\\\": 2, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "35\\\\\\": 2, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "36\\\\\\": 2, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "37\\\\\\": 2, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "38\\\\\\": 2, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "39\\\\\\": 1, "3\\\\\\": 5, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "40\\\\\\": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "41\\\\\\": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "42\\\\\\": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "43\\\\\\": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "44\\\\\\": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "45\\\\\\": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "46\\\\\\": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "47\\\\\\": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "48\\\\\\": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "49\\\\\\": 1, "4\\\\\\": 5, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "50\\\\\\": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 5, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 5, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 5, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 5, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 4, "963": 1, "964": 1, "965": 1, "966": 6, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "976": 1, "977": 1, "978": 1, "979": 1, "98": 1, "980": 1, "981": 1, "982": 1, "983": 1, "984": 1, "985": 1, "986": 1, "987": 1, "988": 1, "989": 1, "99": 1, "990": 1, "991": 1, "992": 1, "993": 1, "9\\\\\\": 5, "\u003c/button\u003e": 2, "\u003c/div\u003e": 1, "\u003c/fetcher": 1, "\u003c/form\u003e": 1, "\u003c/h2\u003e": 1, "\u003c/label\u003e": 3, "\u003c/li\u003e": 1, "\u003c/span\u003e": 3, "\u003c/ul\u003e": 1, "\u003cbutton": 2, "\u003cdiv": 1, "\u003cfetcher": 2, "\u003cform": 1, "\u003cform\u003e": 6, "\u003ch2\u003e": 1, "\u003cimg": 1, "\u003cinput": 1, "\u003clabel\u003e": 3, "\u003cli\u003e": 1, "\u003crecipelistitem": 1, "\u003cspan\u003e": 3, "\u003ctextarea": 2, "\u003cul\u003e": 1, "\u003cuserpopup": 1, "\u003cuserpopuploading": 1, "==": 1, "===": 4, "===d": 1, "==\\u003c/span\\u003e": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 7, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 6, "@remix-run/node\\": 1, "@remix-run/react": 2, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 431, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enow": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eusing": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 85, "\\n": 1, "\\u0026#x26": 3, "\\u0026#x3c": 31, "\\u003c/code\\u003e": 2, "\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003efetcher": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eno": 1, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch3": 1, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003efor": 2, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ecreating": 1, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003edeleting": 2, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eloading": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 4, "\\u003c/p\\u003e\\\\n\\u003ch2": 2, "\\u003c/p\\u003e\\\\n\\u003ch3": 3, "\\u003c/p\\u003e\\\\n\\u003ch4": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003euseactiondata\\u003c/code\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ecombined": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efirst": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efurthermore": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ein": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003elastly": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eusing": 1, "\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003enavigation/url": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ecreating": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eupdating": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eurl": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eexpected": 1, "\\u003c/span\\u003e": 28, "\\u003c/span\\u003e\\\\\\": 2, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 11, "\\u003c/span\\u003e\\u0026#x3c": 4, "\\u003c/span\\u003e\\u003cspan": 17, "\\u003ca": 9, "\\u003ccode\\u003e\\\\\\": 2, "\\u003ccode\\u003e\\u0026#x3c": 2, "\\u003ccode\\u003eaction\\u003c/code\\u003e": 1, "\\u003ccode\\u003efetcher\\u003c/code\\u003e": 1, "\\u003ccode\\u003euseactiondata\\u003c/code\\u003e": 1, "\\u003ccode\\u003eusefetcher\\u003c/code\\u003e": 2, "\\u003ccode\\u003eusenavigation\\u003c/code\\u003e": 2, "\\u003ch1": 1, "\\u003cspan": 317, "\\u003e": 182, "\\u003e//": 4, "\\u003e/article/\\u003c/span\\u003e$": 1, "\\u003e/details\\u003c/span\\u003e": 1, "\\u003e/mark-as-read\\u003c/span\\u003e": 1, "\\u003e/recipes/\\u003c/span\\u003e$": 1, "\\u003e/recipes/new\\u003c/span\\u003e\\\\\\": 1, "\\u003e/users/\\u003c/span\\u003e$": 1, "\\u003e30\\u003c/span\\u003e": 1, "\\u003e===\\u003c/span\\u003e": 3, "\\u003e=\\u003c/span\\u003e": 14, "\\u003e=\\u003c/span\\u003e\\\\\\": 7, "\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e=\\u003c/span\\u003e\\u003cspan": 7, "\\u003e=\\u003e\\u003c/span\\u003e": 6, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 4, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 2, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 16, "\\u003e\\u0026#x26": 3, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eapi": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eapis": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003econclusion\\u003c/h2\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ecreating": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eexamples\\u003c/h2\\u003e\\\\n\\u003ch3": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eform": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003emark": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003especific": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eupdating": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eurl": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003euser": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ewhen": 2, "\\u003e\\u003ca": 13, "\\u003e\\u003ccode\\u003e\\u0026#x3c": 3, "\\u003e\\u003ccode\\u003e\\u003cspan": 5, "\\u003e\\u003ccode\\u003euseactiondata\\u003c/code\\u003e\\u003c/a\\u003e": 2, "\\u003e\\u003ccode\\u003euseactiondata\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eusefetcher\\u003c/code\\u003e\\u003c/a\\u003e": 2, "\\u003e\\u003ccode\\u003eusefetcher\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eusenavigation\\u003c/code\\u003e\\u003c/a\\u003e": 2, "\\u003e\\u003ccode\\u003eusenavigation\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eunderstanding": 1, "\\u003e\\u003cpre": 5, "\\u003e\\u003cspan": 28, "\\u003eaction\\u003c/span\\u003e": 2, "\\u003eaction\\u003c/span\\u003e\\u003e": 1, "\\u003eactionfunctionargs\\u003c/span\\u003e": 3, "\\u003earticleid\\u003c/span\\u003e": 2, "\\u003easync\\u003c/span\\u003e": 4, "\\u003eawait\\u003c/span\\u003e": 7, "\\u003ebutton\\u003c/span\\u003e": 2, "\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003econst\\u003c/span\\u003e": 15, "\\u003ecreate": 1, "\\u003ecreate\\u003c/span\\u003e": 1, "\\u003edata\\u003c/span\\u003e": 1, "\\u003edata\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003edata\\u003c/span\\u003e\\u003cspan": 1, "\\u003edb\\u003c/span\\u003e": 3, "\\u003edefault\\u003c/span\\u003e": 1, "\\u003edelete\\u003c/span\\u003e": 1, "\\u003edelete\\u003c/span\\u003e\\\\\\": 1, "\\u003edeleting": 1, "\\u003edirections\\u003c/span\\u003e": 1, "\\u003edirections\\u003c/span\\u003e\\\\\\": 1, "\\u003edirections\\u003c/span\\u003e\\u003cspan": 1, "\\u003edisabled\\u003c/span\\u003e\\u003cspan": 1, "\\u003ediv\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eerrors\\u003c/span\\u003e": 10, "\\u003eexport\\u003c/span\\u003e": 6, "\\u003efakedb\\u003c/span\\u003e": 1, "\\u003efalse\\u003c/span\\u003e": 2, "\\u003efetcher": 2, "\\u003efetcher\\u003c/span\\u003e": 2, "\\u003efind\\u003c/span\\u003e": 1, "\\u003efindall\\u003c/span\\u003e": 1, "\\u003eform\\u003c/span\\u003e": 2, "\\u003eform\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eformaction\\u003c/span\\u003e": 1, "\\u003eformdata\\u003c/span\\u003e": 7, "\\u003efrom\\u003c/span\\u003e": 6, "\\u003efunction\\u003c/span\\u003e": 8, "\\u003efunctioncomponent\\u003c/span\\u003e\\u0026#x3c": 1, "\\u003eget\\u003c/span\\u003e": 1, "\\u003eh2\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eh2\\u003c/span\\u003e\\u003e\\u003cspan": 1, "\\u003eid\\u003c/span\\u003e": 5, "\\u003eid\\u003c/span\\u003e\\\\\\": 1, "\\u003eid\\u003c/span\\u003e\\u003cspan": 1, "\\u003eidle\\u003c/span\\u003e\\\\\\": 3, "\\u003eif\\u003c/span\\u003e": 2, "\\u003eimg\\u003c/span\\u003e": 1, "\\u003eimport\\u003c/span\\u003e": 6, "\\u003eingredients\\u003c/span\\u003e": 1, "\\u003eingredients\\u003c/span\\u003e\\\\\\": 1, "\\u003eingredients\\u003c/span\\u003e\\u003cspan": 1, "\\u003einput\\u003c/span\\u003e": 1, "\\u003eisdeleting\\u003c/span\\u003e": 2, "\\u003eisdeleting\\u003c/span\\u003e\\u003cspan": 1, "\\u003eissubmitting\\u003c/span\\u003e": 2, "\\u003ejson\\u003c/span\\u003e": 5, "\\u003ekey\\u003c/span\\u003e\\u003cspan": 1, "\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 6, "\\u003eli\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eload\\u003c/span\\u003e": 1, "\\u003eloader\\u003c/span\\u003e": 2, "\\u003eloader\\u003c/span\\u003e\\u003e": 2, "\\u003eloaderfunctionargs\\u003c/span\\u003e": 3, "\\u003emap\\u003c/span\\u003e": 1, "\\u003emarker\\u003c/span\\u003e": 2, "\\u003emethod\\u003c/span\\u003e\\u003cspan": 2, "\\u003ename\\u003c/span\\u003e\\u003cspan": 3, "\\u003enavigation\\u003c/span\\u003e": 2, "\\u003enetwork": 1, "\\u003enewrecipe\\u003c/span\\u003e": 1, "\\u003enull\\u003c/span\\u003e\\u003cspan": 4, "\\u003eonmouseenter\\u003c/span\\u003e\\u003cspan": 1, "\\u003eonmouseleave\\u003c/span\\u003e\\u003cspan": 1, "\\u003eparams\\u003c/span\\u003e": 2, "\\u003epartialuser\\u003c/span\\u003e": 2, "\\u003epost\\u003c/span\\u003e\\\\\\": 3, "\\u003eprofileimageurl\\u003c/span\\u003e\\u003cspan": 1, "\\u003erecipe\\u003c/span\\u003e": 7, "\\u003erecipe\\u003c/span\\u003e\\u003cspan": 3, "\\u003erecipelistitem\\u003c/span\\u003e": 1, "\\u003erecipelistitem\\u003c/span\\u003e\\u003cspan": 1, "\\u003erecipes\\u003c/span\\u003e": 6, "\\u003eredirect\\u003c/span\\u003e": 2, "\\u003erequest\\u003c/span\\u003e": 5, "\\u003ereturn\\u003c/span\\u003e": 9, "\\u003esaving": 1, "\\u003esetshowdetails\\u003c/span\\u003e": 3, "\\u003eshowdetails\\u003c/span\\u003e": 4, "\\u003espan\\u003c/span\\u003e\\u003e": 1, "\\u003espan\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003espan\\u003c/span\\u003e\\u003e\\u003cspan": 3, "\\u003esrc\\u003c/span\\u003e\\u003cspan": 1, "\\u003estate\\u003c/span\\u003e": 3, "\\u003esubmit\\u003c/span\\u003e": 1, "\\u003esubmit\\u003c/span\\u003e\\\\\\": 2, "\\u003etextarea\\u003c/span\\u003e": 2, "\\u003etitle\\u003c/span\\u003e": 1, "\\u003etitle\\u003c/span\\u003e\\\\\\": 1, "\\u003etitle\\u003c/span\\u003e\\u003cspan": 2, "\\u003etrue\\u003c/span\\u003e": 2, "\\u003etype\\u003c/span\\u003e": 2, "\\u003etype\\u003c/span\\u003e\\u003cspan": 2, "\\u003etypeof\\u003c/span\\u003e": 3, "\\u003eul\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003euseactiondata\\u003c/span\\u003e": 1, "\\u003euseactiondata\\u003c/span\\u003e\\u0026#x3c": 1, "\\u003euseeffect\\u003c/span\\u003e": 1, "\\u003eusefetcher\\u003c/span\\u003e": 2, "\\u003eusefetcher\\u003c/span\\u003e\\u0026#x3c": 1, "\\u003euseloaderdata\\u003c/span\\u003e": 1, "\\u003euseloaderdata\\u003c/span\\u003e\\u0026#x3c": 1, "\\u003eusemarkasread\\u003c/span\\u003e": 1, "\\u003eusenavigation\\u003c/span\\u003e": 2, "\\u003euser\\u003c/span\\u003e": 2, "\\u003euser\\u003c/span\\u003e\\u003cspan": 1, "\\u003euseravatar\\u003c/span\\u003e": 1, "\\u003euserdetails\\u003c/span\\u003e": 8, "\\u003euserid\\u003c/span\\u003e": 2, "\\u003euserpopup\\u003c/span\\u003e": 1, "\\u003euserpopuploading\\u003c/span\\u003e": 1, "\\u003eusespentsometimehereandscrolledtothebottom\\u003c/span\\u003e": 1, "\\u003eusestate\\u003c/span\\u003e": 1, "\\u003evalidaterecipeformdata\\u003c/span\\u003e": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 162, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 11, "_958\\": 1, "_961\\": 10, "_994\\": 1, "_995\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "accurately": 2, "action": 11, "action-related": 2, "action\u003e": 1, "action\\": 1, "actiondata\\": 1, "actionfunctionargs": 3, "actions": 18, "adapter": 3, "adapters": 3, "added": 2, "adding": 2, "advantage": 2, "affect": 2, "after": 8, "all": 3, "also": 2, "ambiguity": 2, "among": 2, "an": 9, "and": 59, "any": 2, "anytime": 1, "api": 10, "api-comparison\\": 1, "api-comparison\\\\\\": 1, "api@remix-run/dev": 2, "api\\": 1, "api\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e\\u0026#x3c": 1, "api\\u003c/th\\u003e\\\\n\\u003cth\\u003efetcher": 1, "apis": 12, "apis-in-focus\\": 1, "apis-in-focus\\\\\\": 1, "app": 2, "app/routes/recipes/_index": 4, "app/routes/recipes/new": 2, "app/routes/users": 2, "application": 2, "applications": 4, "applies": 2, "approach": 1, "appropriate": 2, "are": 6, "aria-hidden=\\\\\\": 13, "article": 7, "articleid": 2, "as": 11, "asked": 1, "asset": 3, "assures": 2, "async": 4, "at": 5, "attrs\\": 1, "autonomy": 2, "avatar": 7, "await": 7, "await\\": 1, "away": 4, "b=document": 1, "back": 2, "backend": 3, "background": 2, "balanced": 2, "basename": 1, "basic": 2, "be": 7, "become": 2, "been": 8, "before": 1, "behavior": 1, "behavior\\u003c/strong\\u003e": 1, "being": 2, "between": 4, "blend": 2, "bottom": 2, "boxes": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "bridges": 2, "browser": 5, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 2, "button": 6, "buttons": 2, "by": 6, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "called": 2, "can": 11, "capabilities": 2, "cases": 7, "cases\\": 1, "cases\\u003c/h3\\u003e\\\\n\\u003ch4": 1, "casesapi": 2, "catch": 1, "cater": 2, "certain": 2, "change": 18, "change\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethese": 2, "changelog": 2, "changelog\\": 1, "changes": 2, "children\\": 1, "choosing": 2, "clarity": 2, "class=\\\\\\": 162, "clear": 2, "cli": 5, "cli\\": 1, "clicks": 2, "client": 14, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cloudflare/deno": 4, "cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "code": 4, "codeblock-line\\\\\\": 149, "color": 408, "combination": 2, "combined": 1, "combining": 2, "combo": 2, "combobox": 3, "combobox\\u003c/strong\\u003e": 1, "common": 2, "community": 3, "community\\": 1, "comparison": 1, "comparison\\": 1, "comparison\\u003c/h2\\u003e\\\\n\\u003cp\\u003eas": 1, "comparisonexamplescreating": 2, "completes": 2, "component": 4, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concern": 2, "conclusion": 1, "conclusion\\": 2, "conclusion\\\\\\": 1, "concurrency": 5, "config": 3, "configuration": 2, "configuration\\": 1, "consider": 6, "considerations": 1, "considerations\\": 1, "considerations\\u003c/h3\\u003e\\\\n\\u003cp\\u003ethe": 1, "considerationsspecific": 2, "console": 1, "const": 15, "constraints": 2, "constraints\\": 1, "content": 2, "context": 14, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "coordinated": 2, "corresponding": 2, "could": 4, "covered": 2, "crafted": 2, "create": 4, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "creating": 12, "creating-a-new-record\\": 1, "creating-a-new-record\\\\\\": 1, "creation": 2, "criterion": 2, "css": 15, "css\\": 1, "current": 4, "d=c": 2, "data": 36, "data-code-block=\\\\\\": 5, "data-filename=\\\\\\": 8, "data-highlight=\\\\\\": 7, "data-lang=\\\\\\": 10, "data-line-number=\\\\\\": 149, "data-line-numbers=\\\\\\": 10, "data=": 1, "data\\": 2, "data\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003enavigation": 1, "database": 2, "db": 3, "decides": 2, "dedicated": 4, "default": 1, "defer": 2, "defer\\": 1, "deferred": 1, "delete": 11, "delete\\\\\\": 1, "deletes": 6, "deleting": 7, "deletion": 2, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "desired": 2, "desired\\u003c/strong\\u003e": 2, "details": 7, "dev": 3, "developers": 4, "developing": 1, "development": 7, "developmental": 2, "direct": 2, "directions": 5, "disabled=": 1, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "displayed": 2, "displays": 2, "distinctions": 2, "do": 1, "doc\\": 1, "docs/discussion/form-vs-fetcher": 1, "docs/discussion/form-vs-fetcher\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsform": 1, "document": 3, "doesn": 2, "don": 10, "done": 1, "dynamically": 2, "e--": 1, "e=0": 1, "each": 12, "effect": 2, "effective": 4, "efficient": 2, "element": 2, "else": 2, "enables": 2, "enhancement": 2, "enhancement\\": 1, "enhancing": 2, "enqueue": 1, "ensures": 4, "ensuring": 2, "entire": 2, "entry": 8, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors": 12, "errors\\": 1, "essence": 2, "etc": 2, "everything": 1, "example": 2, "examples": 2, "examples\\": 2, "examples\\\\\\": 1, "execution": 2, "execution\\": 1, "expect": 2, "expected": 1, "experience": 2, "explanation": 2, "explanation\\": 1, "export": 6, "extract": 2, "extract\\": 1, "f=a": 1, "facilitate": 2, "fakedb": 1, "false": 5, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 17, "fetcher\\": 1, "fetcher\\u003c/h1\\u003e\\\\n\\u003cp\\u003edeveloping": 1, "fetchergetting": 1, "fetchers": 2, "fetches": 2, "field": 1, "field\\u003c/strong\\u003e": 1, "fields": 2, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "find": 1, "findall": 1, "first": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "focus": 1, "focus\\": 1, "focus\\u003c/h2\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "focusurl": 2, "for": 32, "form": 18, "form-vs-fetcher\\\\\\": 1, "form\u003e": 2, "form\\": 1, "form\\u003c/span\\u003e": 1, "form\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "form\\u003e\\u003c/code\\u003e": 2, "form\\u003e\\u003c/code\\u003e\\u003c/a\\u003e": 2, "form\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "form\\u003e\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003euseactiondata": 1, "form\\u003e\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e\\u0026#x3c": 1, "formaction": 3, "formaction\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003enavigation": 1, "formaction\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003efetcher": 1, "formdata": 9, "formdata\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003ch2": 1, "formdata\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003efetcher": 1, "found": 3, "four": 2, "frequently": 1, "from": 22, "frontend": 2, "frontend\\": 1, "full": 2, "fullstack": 3, "function": 9, "functionalities": 4, "functionality": 2, "functioncomponent\u003c": 1, "further": 2, "furthermore": 1, "future": 4, "general": 2, "generally": 2, "get": 7, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "give": 2, "go-to": 2, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guided": 2, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "h3\\": 1, "handle": 4, "handle\\": 1, "handling": 4, "handling\\": 2, "has": 6, "hascontent\\": 1, "have": 4, "having": 2, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 3, "hindrance": 2, "history": 8, "hit": 2, "hook": 2, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "hover": 2, "how": 1, "href=\\\\\\": 26, "html": 1, "html\\": 1, "https": 2, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 13, "icon-link\\\\\\": 13, "id": 9, "id=\\\\\\": 13, "ideal": 2, "idle": 3, "if": 12, "imagine": 1, "immediate": 2, "import": 11, "import\\\\\\": 1, "important": 2, "imports": 4, "imports\\": 2, "in": 46, "in-place": 2, "inc": 1, "include": 2, "independent": 2, "index": 3, "indication": 2, "individual": 4, "ingredients": 5, "initial": 1, "insertbefore": 1, "instead": 2, "integrating": 1, "interactions": 1, "intersections": 2, "into": 2, "intricacies": 2, "introduction": 1, "intuitive": 4, "invoke": 2, "is": 29, "isdeleting": 3, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "issubmitting": 2, "issues": 2, "it": 16, "item": 14, "items": 2, "iterative": 1, "its": 2, "javascript": 2, "javascript\\": 1, "journey": 2, "js": 7, "js\\": 1, "json": 8, "json\\": 1, "key": 8, "key=": 1, "know": 1, "label": 2, "lastly": 1, "lazy": 3, "learning": 1, "let": 3, "leveraged": 2, "leverages": 2, "licensed": 1, "like": 8, "likely": 2, "limit": 2, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "list": 31, "list\\u003c/strong\\u003e": 1, "livereload": 2, "livereload\\": 1, "ll": 2, "load": 1, "loaded": 2, "loader": 6, "loader\u003e": 2, "loader\\": 1, "loaderdata\\": 1, "loaderfunctionargs": 3, "loading": 8, "loading\\": 1, "local": 3, "localhost\\": 1, "logical": 4, "longer": 2, "look": 2, "looking": 2, "looks": 2, "lot": 2, "maintenance": 2, "make": 2, "makes": 3, "manage": 4, "management": 7, "management\\": 2, "management\\u003c/a\\u003e": 1, "manages": 2, "manipulations": 2, "manual": 3, "many": 2, "map": 1, "mark": 4, "mark-article-as-read\\": 1, "mark-article-as-read\\\\\\": 1, "marker": 2, "math": 1, "may": 2, "maybe": 2, "md\\": 152, "mdx": 3, "mdx\\": 1, "mechanism": 2, "menu\\": 1, "meta": 4, "meta\\": 2, "method": 2, "method=": 2, "might": 4, "migrating": 4, "mind": 2, "minor": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "modify": 2, "module": 6, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "more": 4, "most": 1, "name": 2, "name=": 3, "naming": 2, "naming\\": 1, "naturally": 2, "navigating": 6, "navigation": 13, "navigation/url": 1, "navlink": 2, "navlink\\": 1, "necessitate": 4, "need": 1, "needs": 2, "network": 4, "new": 23, "new\\": 1, "newcomers": 2, "newrecipe": 1, "next": 2, "nextsibling": 2, "no": 3, "nodetype": 1, "noindex\\": 1, "nonetheless": 2, "not": 5, "now": 2, "nuances": 2, "null": 5, "number": 1, "of": 47, "offer": 2, "offers": 6, "often": 2, "ok": 2, "on": 23, "once": 1, "one": 3, "ongoing": 2, "onmouseenter=": 1, "onmouseleave=": 1, "open": 1, "operations": 2, "optimization": 2, "optimization\\": 1, "or": 39, "order\\": 1, "other": 7, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "others": 2, "out": 1, "outcome": 2, "outlet": 2, "outlet\\": 1, "overlap": 4, "own": 2, "page": 22, "pageapis": 2, "pages": 2, "param": 2, "param\\": 1, "params": 2, "parentnode": 2, "parse": 1, "partialuser": 2, "pending": 3, "perfectly": 4, "performance": 2, "performance\\": 1, "pipethrough": 1, "popover": 4, "popovers": 2, "popup": 3, "popup\\": 1, "popup\\u003c/h3\\u003e\\\\n\\u003cp\\u003eanytime": 1, "popupconclusionform": 1, "popupconclusionon": 1, "positions": 2, "post": 3, "postcss": 2, "postcss\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "preservation": 2, "presets": 2, "presets\\": 1, "previous": 2, "previoussibling": 1, "primary": 5, "process": 4, "processed": 2, "profileimageurl": 1, "progressive": 3, "project": 1, "property": 2, "provide": 2, "providing": 6, "pull": 1, "put": 2, "query": 3, "questions": 1, "quick": 3, "quickest": 1, "quickly": 1, "random": 1, "range": 2, "re": 2, "react": 8, "react-router-scroll-positions": 1, "read": 3, "read\\": 1, "read\\u003c/h3\\u003e\\\\n\\u003cp\\u003eimagine": 1, "readablestream": 1, "readuser": 2, "real-time": 4, "recipe": 20, "recipe=": 1, "recipe\\u003c/span\\u003e\\\\\\": 1, "recipelistitem": 1, "recipes": 12, "record": 20, "record\\": 2, "record\\u003c/h3\\u003e\\\\n\\u003cdiv": 1, "record\\u003c/h3\\u003e\\\\n\\u003cp\\u003enow": 1, "record\\u003c/strong\\u003e": 2, "recordmark": 2, "records": 4, "recordupdating": 2, "rectify": 2, "redirect": 8, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "reflect": 2, "reflects": 4, "refreshing": 2, "regular": 3, "reinforcing": 2, "related": 1, "released": 2, "reload": 2, "remain": 6, "remains": 2, "remix": 17, "remix\\": 2, "remove": 2, "removechild": 2, "removeitem": 1, "renders": 2, "replace": 2, "replace\\": 1, "replaced": 2, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 6, "require": 2, "resource": 3, "resources": 1, "respectively": 2, "response": 2, "responsive": 2, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "retrieve": 2, "return": 9, "revalidation": 2, "rich": 2, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 14, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/discussion/form-vs-fetcher": 1, "run\\": 1, "running": 1, "runtimes": 3, "saving": 1, "scenario": 2, "scenarios": 2, "scripts": 2, "scripts\\": 1, "scrolled": 2, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "seamless": 2, "see": 2, "seeing": 2, "seeks": 2, "seem": 2, "self-contained": 2, "sense": 4, "server": 17, "server\\": 3, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 2, "sets": 2, "setshowdetails": 3, "setup": 2, "shared": 2, "shopify": 1, "should": 8, "shouldn": 2, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "show": 2, "showdetails": 4, "significant": 2, "significantly": 2, "similarities": 2, "simplifying": 1, "single": 5, "siteurl\\": 1, "slice": 1, "slug\\": 1, "small": 2, "some": 2, "something": 2, "sometimes": 2, "spa": 3, "specific": 12, "specific-use-cases\\": 1, "specific-use-cases\\\\\\": 1, "src=": 1, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 21, "state\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003enavigation": 1, "state\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003efetcher": 1, "stays": 2, "step": 2, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "structured": 2, "style=\\\\\\": 408, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "submission": 6, "submit": 3, "subtle": 4, "such": 4, "suited": 2, "support": 3, "support\\": 1, "switch": 2, "tabindex=\\\\\\": 13, "tailwind": 2, "tailwind\\": 1, "taken": 2, "tasks": 2, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 32, "the": 135, "their": 8, "them": 2, "these": 12, "they": 8, "things": 2, "this": 22, "though": 2, "through": 3, "times": 2, "title": 6, "title\\": 1, "tls": 2, "tls\\": 1, "to": 74, "toc\\": 1, "toggles": 2, "toggling": 2, "tool": 4, "tools": 8, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "transition": 2, "transitioning": 2, "transitions": 2, "true": 8, "true\\\\\\": 30, "try": 1, "ts": 2, "ts\\": 1, "tsx\\\\\\": 18, "tutorial": 3, "two": 2, "type": 2, "type=": 2, "typeof": 1, "typescript": 2, "typescript\\": 1, "typically": 2, "ui": 6, "ui\\": 1, "unchanged": 4, "under": 1, "understanding": 5, "unique": 2, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "update": 2, "updates": 2, "updating": 5, "updating-a-record\\": 1, "updating-a-record\\\\\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 23, "url-considerations\\": 1, "url-considerations\\\\\\": 1, "use": 9, "useactiondata": 7, "useactiondata\u003ctypeof": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "useeffect": 1, "usefetcher": 9, "usefetcher\u003ctypeof": 1, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 3, "useloaderdata\u003ctypeof": 1, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usemarkasread": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 9, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 34, "user-avatar-details-popup\\": 1, "user-avatar-details-popup\\\\\\": 1, "user-friendly": 2, "user=": 1, "useravatar": 1, "userdetails": 8, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userid": 2, "userouteerror\\": 1, "userouteloaderdata\\": 1, "users": 8, "usesearchparams": 2, "usesearchparams\\": 1, "usespentsometimehereandscrolledtothebottom": 1, "usestate": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 4, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validaterecipeformdata": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 410, "variables": 2, "variables\\": 1, "varied": 2, "ve": 2, "versatile": 2, "view": 11, "view\\u003c/strong\\u003e": 1, "vital": 2, "vite": 5, "vite\\": 1, "vs": 10, "walk": 1, "want": 8, "wants": 2, "warrant": 2, "way": 1, "we": 8, "web": 2, "when": 21, "when-the-url-should-change\\\\\\": 1, "when-the-url-shouldnt-change\\\\\\": 1, "where": 6, "whether": 2, "while": 5, "why": 3, "will": 2, "window": 11, "with": 12, "without": 6, "works": 2, "writes": 2, "writes\\": 1, "you": 17, "your": 5, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 10211 }, { "id": "b127e6e68a85d5595506e3d4", "doc_id": "65095f934b14e8970cabf19c", "title": "from", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/from.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/from.json", "content": "--- title: from use_cases: \u003e- rxjs interop, svelte stores integration, external observables, third-party state management, converting subscriptions to signals tags: - interop - rxjs - observables - signals - integration version: '1.0' description: \u003e- Convert RxJS observables and external producers into SolidJS signals. Seamless integration with third-party reactive libraries and state managers. --- ```tsx import { from } from \"solid-js\" function from\u003cT\u003e( producer: | ((setter: (v: T) =\u003e T) =\u003e () =\u003e void) | { subscribe: ( fn: (v: T) =\u003e void ) =\u003e (() =\u003e void) | { unsubscribe: () =\u003e void } } ): () =\u003e T | undefined ``` A helper to make it easier to interop with external producers like RxJS observables or with Svelte Stores. This basically turns any subscribable (object with a subscribe method) into a Signal and manages subscription and disposal. ```tsx const signal = from(obsv$) ``` It can also take a custom producer function where the function is passed a setter function that returns an unsubscribe function: ```tsx const clock = from((set) =\u003e { const interval = setInterval(() =\u003e { set((v) =\u003e v + 1) }, 1000) return () =\u003e clearInterval(interval) }) ``` ## Arguments | Name | Type | Description | | :------- | :----------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------- | | producer | `((setter: (v: T) =\u003e T) =\u003e () =\u003e void) \\| { subscribe: (fn: (v: T) =\u003e void) =\u003e (() =\u003e void) \\| { unsubscribe: () =\u003e void }; }` | The producer function or subscribable object |", "term_freq": { "##": 1, "---": 2, "-------": 1, "-------------------------------------------": 1, "-----------------------------------------------------------------------------------------------------------------------------": 1, "//github": 1, "1000": 1, "=\u003e": 19, "\u003e-": 2, "\\|": 2, "also": 1, "an": 1, "and": 4, "any": 1, "arguments": 1, "basically": 1, "can": 1, "clearinterval": 1, "clock": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/from": 1, "const": 3, "convert": 1, "converting": 1, "custom": 1, "description": 2, "disposal": 1, "easier": 1, "external": 3, "fn": 2, "from": 6, "from\u003ct\u003e": 1, "function": 6, "github-document": 1, "helper": 1, "https": 1, "import": 1, "integration": 3, "interop": 3, "interval": 2, "into": 2, "is": 1, "it": 2, "libraries": 1, "like": 1, "make": 1, "management": 1, "managers": 1, "manages": 1, "mdx": 1, "method": 1, "name": 1, "object": 2, "observables": 4, "obsv$": 1, "or": 2, "passed": 1, "producer": 4, "producers": 2, "reactive": 1, "return": 1, "returns": 1, "rxjs": 4, "seamless": 1, "set": 2, "setinterval": 1, "setter": 3, "signal": 2, "signals": 3, "solid-js": 1, "solidjs": 1, "state": 2, "stores": 2, "subscribable": 2, "subscribe": 3, "subscription": 1, "subscriptions": 1, "svelte": 2, "tags": 1, "take": 1, "that": 1, "the": 2, "third-party": 2, "this": 1, "title": 1, "to": 3, "tsx": 3, "turns": 1, "type": 1, "undefined": 1, "unsubscribe": 3, "use_cases": 1, "version": 1, "void": 8, "where": 1, "with": 4 }, "length": 184 }, { "id": "0567d87f83d8172179c4a95c", "doc_id": "271c42714a2ecfa366a944c9", "title": "Fullstack Data Flow | Remix", "url": "https://v2.remix.run/docs/discussion/data-flow", "type": "html", "source": "remix:does", "path": "devour_data/docs/fullstack-data-flow---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsFullstack Data FlowGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageRoute Module ExportsRoute LoaderRoute ComponentRoute ActionSubmission and RevalidationBefore JavaScript LoadsOn this pageRoute Module ExportsRoute LoaderRoute ComponentRoute ActionSubmission and RevalidationBefore JavaScript LoadsFullstack Data Flow One of the primary features of Remix is the way it automatically keeps your UI in sync with persistent server state. It happens in three steps: Route loaders provide data to the UI Forms post data to route actions that update persistent state Loader data on the page is automatically revalidated Route Module Exports Let's consider a user account edit route. The route module has three exports that we'll fill in and talk about: export async function loader() { // provides data to the component } export default function Component() { // renders the UI } export async function action() { // updates persistent data } Route Loader Route files can export a loader function that provides data to the route component. When the user navigates to a matching route, the data is first loaded and then the page is rendered. import type { LoaderFunctionArgs } from \"@remix-run/node\"; // or cloudflare/deno import { json } from \"@remix-run/node\"; // or cloudflare/deno export async function loader({ request, }: LoaderFunctionArgs) { const user = await getUser(request); return json({ displayName: user.displayName, email: user.email, }); } export default function Component() { // ... } export async function action() { // ... } Route Component The default export of the route file is the component that renders. It reads the loader data with useLoaderData: import type { LoaderFunctionArgs } from \"@remix-run/node\"; // or cloudflare/deno import { json } from \"@remix-run/node\"; // or cloudflare/deno import { useLoaderData, Form } from \"@remix-run/react\"; export async function loader({ request, }: LoaderFunctionArgs) { const user = await getUser(request); return json({ displayName: user.displayName, email: user.email, }); } export default function Component() { const user = useLoaderData\u003ctypeof loader\u003e(); return ( \u003cForm method=\"post\" action=\"/account\"\u003e \u003ch1\u003eSettings for {user.displayName}\u003c/h1\u003e \u003cinput name=\"displayName\" defaultValue={user.displayName} /\u003e \u003cinput name=\"email\" defaultValue={user.email} /\u003e \u003cbutton type=\"submit\"\u003eSave\u003c/button\u003e \u003c/Form\u003e ); } export async function action() { // ... } Route Action Finally, the action on the route matching the form's action attribute is called when the form is submitted. In this example it's the same route. The values in the form fields will be available on the standard request.formData() API. Note the name attribute on the inputs is coupled to the formData.get(fieldName) getter. import type { ActionFunctionArgs, LoaderFunctionArgs, } from \"@remix-run/node\"; // or cloudflare/deno import { json } from \"@remix-run/node\"; // or cloudflare/deno import { useLoaderData, Form } from \"@remix-run/react\"; export async function loader({ request, }: LoaderFunctionArgs) { const user = await getUser(request); return json({ displayName: user.displayName, email: user.email, }); } export default function Component() { const user = useLoaderData\u003ctypeof loader\u003e(); return ( \u003cForm method=\"post\" action=\"/account\"\u003e \u003ch1\u003eSettings for {user.displayName}\u003c/h1\u003e \u003cinput name=\"displayName\" defaultValue={user.displayName} /\u003e \u003cinput name=\"email\" defaultValue={user.email} /\u003e \u003cbutton type=\"submit\"\u003eSave\u003c/button\u003e \u003c/Form\u003e ); } export async function action({ request, }: ActionFunctionArgs) { const formData = await request.formData(); const user = await getUser(request); await updateUser(user.id, { email: formData.get(\"email\"), displayName: formData.get(\"displayName\"), }); return json({ ok: true }); } Submission and Revalidation When the user submits the form: Remix sends the form data to the route action via fetch and pending states become available through hooks like useNavigation and useFetcher. After the action completes, loaders are revalidated to get the new server state. useLoaderData returns the updated values from the server and the pending states go back to idle. In this way, the UI is kept in sync with server state without writing any code for that synchronization. There are various ways to submit a form besides an HTML form element (like in response to drag and drop, or an onChange event). There is also a lot more to talk about around form validation, error handling, pending states, etc. We'll get to all of that later, but this is the gist of data flow in Remix. Before JavaScript Loads When you send HTML from the server, it's best to have it work even before JavaScript loads. Typical data flows in Remix do this automatically. The flow is the same, but the browser does some of the work. When the user submits the form before JavaScript loads: The browser submits the form to the action (instead of fetch) and the browsers' pending states activate (spinning favicon) After the action completes, loaders are called Remix renders the page and sends HTML to the browser © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_981\\\":-5,\\\"_982\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":980},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"docs/discussion/data-flow.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"fullstack-data-flow\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#fullstack-data-flow\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eFullstack Data Flow\\u003c/h1\\u003e\\\\n\\u003cp\\u003eOne of the primary features of Remix is the way it automatically keeps your UI in sync with persistent server state. It happens in three steps:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eRoute loaders provide data to the UI\\u003c/li\\u003e\\\\n\\u003cli\\u003eForms post data to route actions that update persistent state\\u003c/li\\u003e\\\\n\\u003cli\\u003eLoader data on the page is automatically revalidated\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial rounded-xl\\\\\\\" src=\\\\\\\"/blog-images/posts/remix-data-flow/loader-action-component.png\\\\\\\" /\\u003e\\\\n\\u003ch2 id=\\\\\\\"route-module-exports\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#route-module-exports\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRoute Module Exports\\u003c/h2\\u003e\\\\n\\u003cp\\u003eLet's consider a user account edit route. The route module has three exports that we'll fill in and talk about:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"routes/account.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"routes/account.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// provides data to the component\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponent\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// renders the UI\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// updates persistent data\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"route-loader\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#route-loader\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRoute Loader\\u003c/h2\\u003e\\\\n\\u003cp\\u003eRoute files can export a \\u003ca href=\\\\\\\"../route/loader\\\\\\\"\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e function that provides data to the route component. When the user navigates to a matching route, the data is first loaded and then the page is rendered.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"routes/account.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"routes/account.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetUser\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e displayName: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e email: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eemail\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponent\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ...\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ...\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"route-component\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#route-component\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRoute Component\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe default export of the route file is the component that renders. It reads the loader data with \\u003ca href=\\\\\\\"../hooks/use-loader-data\\\\\\\"\\u003e\\u003ccode\\u003euseLoaderData\\u003c/code\\u003e\\u003c/a\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetUser\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e displayName: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e email: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eemail\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponent\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/account\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003eSettings for \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eemail\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eemail\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003eSave\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ...\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"route-action\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#route-action\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRoute Action\\u003c/h2\\u003e\\\\n\\u003cp\\u003eFinally, the action on the route matching the form's action attribute is called when the form is submitted. In this example it's the same route. The values in the form fields will be available on the standard \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/Request/formData\\\\\\\"\\u003e\\u003ccode\\u003erequest.formData()\\u003c/code\\u003e\\u003c/a\\u003e API. Note the \\u003ccode\\u003ename\\u003c/code\\u003e attribute on the inputs is coupled to the \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/FormData/get\\\\\\\"\\u003e\\u003ccode\\u003eformData.get(fieldName)\\u003c/code\\u003e\\u003c/a\\u003e getter.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetUser\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e displayName: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e email: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eemail\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponent\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/account\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003eSettings for \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eemail\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eemail\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003eSave\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetUser\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eupdateUser\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e, {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e email: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eemail\\u003c/span\\u003e\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e displayName: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({ ok: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"submission-and-revalidation\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#submission-and-revalidation\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSubmission and Revalidation\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhen the user submits the form:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eRemix sends the form data to the route action via \\u003ccode\\u003efetch\\u003c/code\\u003e and pending states become available through hooks like \\u003ccode\\u003euseNavigation\\u003c/code\\u003e and \\u003ccode\\u003euseFetcher\\u003c/code\\u003e.\\u003c/li\\u003e\\\\n\\u003cli\\u003eAfter the action completes, loaders are revalidated to get the new server state.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003euseLoaderData\\u003c/code\\u003e returns the updated values from the server and the pending states go back to idle.\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eIn this way, the UI is kept in sync with server state without writing any code for that synchronization.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThere are various ways to submit a form besides an HTML form element (like in response to drag and drop, or an onChange event). There is also a lot more to talk about around form validation, error handling, pending states, etc. We'll get to all of that later, but this is the gist of data flow in Remix.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"before-javascript-loads\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#before-javascript-loads\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eBefore JavaScript Loads\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhen you send HTML from the server, it's best to have it work even before JavaScript loads. Typical data flows in Remix do this automatically. The flow is the same, but the browser does some of the work.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWhen the user submits the form before JavaScript loads:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eThe browser submits the form to the action (instead of \\u003ccode\\u003efetch\\u003c/code\\u003e) and the browsers' pending states activate (spinning favicon)\\u003c/li\\u003e\\\\n\\u003cli\\u003eAfter the action completes, loaders are called\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemix renders the page and sends HTML to the browser\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\",\\\"docs/discussion/data-flow\\\",\\\"headings\\\",[960,965,968,971,974,977],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Route Module Exports\\\",\\\"route-module-exports\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"Route Loader\\\",\\\"route-loader\\\",{\\\"_961\\\":962,\\\"_955\\\":969,\\\"_24\\\":970},\\\"Route Component\\\",\\\"route-component\\\",{\\\"_961\\\":962,\\\"_955\\\":972,\\\"_24\\\":973},\\\"Route Action\\\",\\\"route-action\\\",{\\\"_961\\\":962,\\\"_955\\\":975,\\\"_24\\\":976},\\\"Submission and Revalidation\\\",\\\"submission-and-revalidation\\\",{\\\"_961\\\":962,\\\"_955\\\":978,\\\"_24\\\":979},\\\"Before JavaScript Loads\\\",\\\"before-javascript-loads\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#before-javascript-loads\\\\\\": 1, "#fullstack-data-flow\\\\\\": 1, "#route-action\\\\\\": 1, "#route-component\\\\\\": 1, "#route-loader\\\\\\": 1, "#route-module-exports\\\\\\": 1, "#submission-and-revalidation\\\\\\": 1, "$\\": 1, "$rc": 3, "--base03": 12, "--base05": 4, "--base08": 69, "--base09": 1, "--base0a": 15, "--base0b": 20, "--base0d": 52, "--base0e": 82, "--base0f": 12, "-1\\\\\\": 7, "-5": 2, "/$": 1, "//": 12, "//developer": 2, "//v2": 2, "/\u003e": 4, "/\\u003cspan": 6, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "/\\u003e\\\\n\\u003ch2": 1, "/account": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/blog-images/posts/remix-data-flow/loader-action-component": 1, "/hooks/use-loader-data\\\\\\": 1, "/route/loader\\\\\\": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 4, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 4, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 3, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 3, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 3, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 3, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 3, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 3, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 3, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 3, "1\\\\\\": 4, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 3, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 2, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 2, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 2, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 2, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 2, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 2, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 2, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "28\\\\\\": 2, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "29\\\\\\": 2, "2\\\\\\": 4, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30\\\\\\": 2, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "31\\\\\\": 2, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "32\\\\\\": 2, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "33\\\\\\": 2, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "34\\\\\\": 2, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "35\\\\\\": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "36\\\\\\": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "37\\\\\\": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "38\\\\\\": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "39\\\\\\": 1, "3\\\\\\": 4, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "40\\\\\\": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "41\\\\\\": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "42\\\\\\": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "43\\\\\\": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "44\\\\\\": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "45\\\\\\": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "46\\\\\\": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "47\\\\\\": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 4, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 4, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 4, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 4, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 4, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 4, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 6, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "976": 1, "977": 1, "978": 1, "979": 1, "98": 2, "980": 1, "99": 1, "9\\\\\\": 4, "\u003c/form\u003e": 2, "\u003c/h1\u003e": 2, "\u003cbutton": 2, "\u003cform": 2, "\u003ch1\u003esettings": 2, "\u003cinput": 4, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 1, "\u003esave\u003c/button\u003e": 2, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 8, "@remix-run/node\\": 1, "@remix-run/react": 2, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 282, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 4, "\\\\n\\u003c/span\\u003e\\u003cspan": 63, "\\n": 1, "\\u0026#x3c": 12, "\\u003c/code\\u003e\\u003c/a\\u003e": 2, "\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003ein": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003euseloaderdata\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eafter": 2, "\\u003c/p\\u003e\\\\n\\u003cdiv": 4, "\\u003c/p\\u003e\\\\n\\u003ch2": 1, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eremix": 1, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eroute": 1, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003ethe": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethere": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewhen": 1, "\\u003c/span\\u003e": 6, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 5, "\\u003c/span\\u003e\\u0026#x3c": 2, "\\u003c/span\\u003e\\u003cspan": 6, "\\u003ca": 4, "\\u003ccode\\u003efetch\\u003c/code\\u003e": 2, "\\u003ccode\\u003ename\\u003c/code\\u003e": 1, "\\u003ccode\\u003eusefetcher\\u003c/code\\u003e": 1, "\\u003ccode\\u003eusenavigation\\u003c/code\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 207, "\\u003e": 91, "\\u003e//": 12, "\\u003e/account\\u003c/span\\u003e\\\\\\": 2, "\\u003e=\\u003c/span\\u003e": 7, "\\u003e=\\u003c/span\\u003e\\\\\\": 10, "\\u003e=\\u003c/span\\u003e\\u003cspan": 4, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 6, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 2, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 19, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebefore": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003efullstack": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroute": 4, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003esubmission": 1, "\\u003e\\u003ca": 7, "\\u003e\\u003ccode\\u003e\\u003cspan": 4, "\\u003e\\u003ccode\\u003eformdata": 1, "\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003erequest": 1, "\\u003e\\u003ccode\\u003euseloaderdata\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003cpre": 4, "\\u003e\\u003cspan": 27, "\\u003eaction\\u003c/span\\u003e": 4, "\\u003eaction\\u003c/span\\u003e\\u003cspan": 2, "\\u003eactionfunctionargs\\u003c/span\\u003e": 2, "\\u003easync\\u003c/span\\u003e": 8, "\\u003eawait\\u003c/span\\u003e": 6, "\\u003ebutton\\u003c/span\\u003e": 2, "\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ecomponent\\u003c/span\\u003e": 4, "\\u003econst\\u003c/span\\u003e": 7, "\\u003edefault\\u003c/span\\u003e": 4, "\\u003edefaultvalue\\u003c/span\\u003e\\u003cspan": 4, "\\u003edisplayname\\u003c/span\\u003e": 3, "\\u003edisplayname\\u003c/span\\u003e\\\\\\": 3, "\\u003edisplayname\\u003c/span\\u003e\\u003cspan": 4, "\\u003eemail\\u003c/span\\u003e": 3, "\\u003eemail\\u003c/span\\u003e\\\\\\": 3, "\\u003eemail\\u003c/span\\u003e\\u003cspan": 2, "\\u003eexport\\u003c/span\\u003e": 12, "\\u003eform\\u003c/span\\u003e": 4, "\\u003eform\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eformdata\\u003c/span\\u003e": 4, "\\u003efrom\\u003c/span\\u003e": 8, "\\u003efunction\\u003c/span\\u003e": 12, "\\u003eget\\u003c/span\\u003e": 2, "\\u003egetuser\\u003c/span\\u003e": 4, "\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eh1\\u003c/span\\u003e\\u003esettings": 2, "\\u003eid\\u003c/span\\u003e": 1, "\\u003eimport\\u003c/span\\u003e": 8, "\\u003einput\\u003c/span\\u003e": 2, "\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ejson\\u003c/span\\u003e": 7, "\\u003eloader\\u003c/span\\u003e": 4, "\\u003eloader\\u003c/span\\u003e\\u003e": 2, "\\u003eloaderfunctionargs\\u003c/span\\u003e": 6, "\\u003emethod\\u003c/span\\u003e\\u003cspan": 2, "\\u003ename\\u003c/span\\u003e\\u003cspan": 4, "\\u003epost\\u003c/span\\u003e\\\\\\": 2, "\\u003erequest\\u003c/span\\u003e": 9, "\\u003ereturn\\u003c/span\\u003e": 6, "\\u003esave\\u0026#x3c": 2, "\\u003esubmit\\u003c/span\\u003e\\\\\\": 2, "\\u003etrue\\u003c/span\\u003e": 1, "\\u003etype\\u003c/span\\u003e": 3, "\\u003etype\\u003c/span\\u003e\\u003cspan": 2, "\\u003etypeof\\u003c/span\\u003e": 2, "\\u003eupdateuser\\u003c/span\\u003e": 1, "\\u003euseloaderdata\\u003c/span\\u003e": 2, "\\u003euseloaderdata\\u003c/span\\u003e\\u0026#x3c": 2, "\\u003euser\\u003c/span\\u003e": 19, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 28, "_22\\": 152, "_24\\": 158, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 7, "_958\\": 1, "_961\\": 6, "_981\\": 1, "_982\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 5, "accessibility\\": 1, "account": 2, "action": 17, "action=": 2, "action\\": 2, "action\\u003c/h2\\u003e\\\\n\\u003cp\\u003efinally": 1, "actiondata\\": 1, "actionfunctionargs": 2, "actions": 2, "actionsubmission": 2, "activate": 2, "adapter": 3, "adapters": 3, "after": 2, "all": 3, "also": 2, "an": 5, "and": 30, "any": 2, "api": 6, "api@remix-run/dev": 2, "api\\": 1, "app": 2, "approach": 1, "are": 6, "aria-hidden=\\\\\\": 7, "around": 2, "as": 3, "asked": 1, "asset": 3, "async": 8, "at": 1, "attribute": 4, "attrs\\": 1, "automatically": 6, "available": 4, "await": 6, "await\\": 1, "b=document": 1, "back": 2, "backend": 3, "basename": 1, "be": 3, "become": 2, "been": 2, "before": 7, "before-javascript-loads\\": 1, "before-javascript-loads\\\\\\": 1, "besides": 2, "best": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 8, "browser\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\": 1, "browsers": 2, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 4, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "called": 3, "called\\u003c/li\\u003e\\\\n\\u003cli\\u003eremix": 1, "can": 3, "catch": 1, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 120, "cli": 5, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cloudflare/deno": 6, "cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 6, "code": 6, "codeblock-line\\\\\\": 112, "color": 267, "community": 3, "community\\": 1, "completes": 4, "component": 12, "component\\": 2, "component\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "component\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "componentroute": 2, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "consider": 2, "console": 1, "const": 7, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "coupled": 2, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 15, "css\\": 1, "d=c": 2, "data": 41, "data-code-block=\\\\\\": 4, "data-filename=\\\\\\": 4, "data-highlight=\\\\\\": 42, "data-lang=\\\\\\": 8, "data-line-number=\\\\\\": 112, "data-line-numbers=\\\\\\": 8, "data=": 1, "data\\": 2, "data\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "default": 6, "defaultvalue=": 4, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "development": 3, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "displayname": 18, "do": 3, "doc\\": 1, "docs/discussion/data-flow": 1, "docs/discussion/data-flow\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsfullstack": 1, "document": 1, "does": 2, "done": 1, "drag": 2, "drop": 2, "e--": 1, "e=0": 1, "edit": 2, "element": 2, "else": 2, "email": 16, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 6, "environment": 3, "error": 8, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "etc": 2, "even": 2, "event": 2, "everything": 1, "example": 2, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "export": 16, "exports": 3, "exports\\": 1, "exports\\u003c/h2\\u003e\\\\n\\u003cp\\u003elet": 1, "exportsroute": 2, "extract": 2, "extract\\": 1, "f=a": 1, "false": 3, "faqs": 2, "faqs\\": 1, "favicon": 2, "features": 3, "fetch": 4, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "fieldname": 2, "fields": 2, "file": 11, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 4, "files\\": 1, "fill": 2, "finally": 1, "first": 2, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 8, "flow\\": 1, "flow\\u003c/h1\\u003e\\\\n\\u003cp\\u003eone": 1, "flowgetting": 1, "flows": 2, "for": 12, "form": 33, "form\\": 1, "formdata": 7, "forms": 1, "found": 3, "frequently": 1, "from": 18, "frontend": 2, "frontend\\": 1, "fullstack": 4, "fullstack-data-flow\\\\\\": 1, "function": 15, "future": 4, "get": 12, "getelementbyid": 2, "getitem": 1, "getter": 2, "getting": 2, "getuser": 4, "gist": 2, "githubchat": 1, "go": 2, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "handle": 2, "handle\\": 1, "handling": 6, "handling\\": 2, "happens": 2, "has": 4, "hascontent\\": 1, "have": 2, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 1, "history": 4, "hooks": 2, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href=\\\\\\": 11, "html": 7, "html\\": 1, "https": 4, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 7, "icon-link\\\\\\": 7, "id": 1, "id=\\\\\\": 7, "idle": 2, "if": 6, "import": 13, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 25, "inc": 1, "index": 3, "initial": 1, "inputs": 2, "insertbefore": 1, "instead": 2, "integrating": 1, "interactions": 1, "into": 2, "introduction": 1, "is": 25, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 12, "iterative": 1, "javascript": 11, "javascript\\": 1, "js": 7, "js\\": 1, "json": 10, "json\\": 1, "keeps": 2, "kept": 2, "key": 4, "know": 1, "later": 2, "lazy": 3, "learning": 1, "let": 4, "licensed": 1, "like": 4, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "ll": 4, "loaded": 2, "loader": 11, "loader\u003e": 2, "loader\\": 2, "loader\\u003c/h2\\u003e\\\\n\\u003cp\\u003eroute": 1, "loaderdata\\": 1, "loaderfunctionargs": 6, "loaderroute": 2, "loaders": 6, "loading": 3, "loading\\": 1, "loads": 5, "loads\\": 1, "loads\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhen": 1, "loadsfullstack": 1, "loadson": 1, "local": 3, "localhost\\": 1, "lot": 2, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "matching": 4, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "method=": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 13, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "more": 2, "most": 1, "mozilla": 2, "name": 1, "name=": 4, "naming": 2, "naming\\": 1, "navigates": 2, "navlink": 2, "navlink\\": 1, "need": 1, "network": 3, "new": 4, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 3, "note": 2, "null": 1, "number": 1, "of": 17, "ok": 2, "on": 11, "once": 1, "onchange": 2, "one": 2, "open": 1, "optimization": 2, "optimization\\": 1, "or": 15, "order\\": 1, "org/en-us/docs/web/api/formdata/get\\\\\\": 1, "org/en-us/docs/web/api/request/formdata\\\\\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "page": 6, "pageroute": 2, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 11, "performance": 2, "performance\\": 1, "persistent": 6, "pipethrough": 1, "png\\\\\\": 1, "positions": 2, "post": 4, "postcss": 2, "postcss\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 3, "progressive": 3, "project": 1, "provide": 2, "provides": 4, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "react": 8, "react-router-scroll-positions": 1, "readablestream": 1, "reads": 2, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regular": 3, "related": 1, "released": 2, "remix": 18, "remix\\": 2, "removechild": 2, "removeitem": 1, "rendered": 2, "renders": 6, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 11, "resource": 3, "resources": 1, "response": 2, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 6, "returns": 2, "revalidated": 3, "revalidated\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cimg": 1, "revalidation": 1, "revalidation\\": 1, "revalidation\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhen": 1, "revalidationbefore": 2, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "rounded-xl\\\\\\": 1, "route": 40, "route-action\\": 1, "route-action\\\\\\": 1, "route-component\\": 1, "route-component\\\\\\": 1, "route-loader\\": 1, "route-loader\\\\\\": 1, "route-module-exports\\": 1, "route-module-exports\\\\\\": 1, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/account": 4, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/discussion/data-flow": 1, "run\\": 1, "running": 1, "runtimes": 3, "same": 4, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "send": 2, "sends": 4, "server": 25, "server\\": 3, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "simplifying": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "some": 2, "spa": 3, "spinning": 2, "src=\\\\\\": 1, "ssr": 1, "stages": 1, "standard": 2, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 13, "state\\u003c/li\\u003e\\\\n\\u003cli\\u003eloader": 1, "states": 8, "steps": 2, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 267, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "submission": 2, "submission-and-revalidation\\": 1, "submission-and-revalidation\\\\\\": 1, "submit": 4, "submits": 6, "submitted": 2, "support": 3, "support\\": 1, "sync": 4, "synchronization": 2, "tabindex=\\\\\\": 7, "tailwind": 2, "tailwind\\": 1, "talk": 4, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 12, "the": 106, "then": 2, "there": 3, "this": 12, "three": 4, "through": 3, "title\\": 1, "tls": 2, "tls\\": 1, "to": 42, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 7, "true\\\\\\": 57, "try": 1, "ts": 2, "ts\\": 1, "tsx\\\\\\": 12, "tutorial": 4, "type": 3, "type=": 2, "typeof": 1, "typescript": 2, "typescript\\": 1, "typical": 2, "ui": 8, "ui\\": 1, "ui\\u003c/li\\u003e\\\\n\\u003cli\\u003eforms": 1, "ui\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "update": 2, "updated": 2, "updates": 2, "updateuser": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 3, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 6, "useloaderdata\u003ctypeof": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 3, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 27, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 4, "validation\\": 1, "values": 4, "vanilla": 3, "var": 269, "variables": 2, "variables\\": 1, "various": 2, "via": 2, "view": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "way": 5, "ways": 2, "we": 4, "when": 8, "while": 1, "why": 1, "will": 4, "window": 11, "with": 10, "without": 2, "work": 4, "writes": 2, "writes\\": 1, "writing": 2, "you": 7, "your": 5, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 7633 }, { "id": "e4683e50c1e9b5fb42e5c15e", "doc_id": "9b9e0a1045a4d61ba968d0bc", "title": "Future Flags | Remix", "url": "https://v2.remix.run/docs/start/future-flags", "type": "html", "source": "remix:does", "path": "devour_data/docs/future-flags---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsFuture FlagsGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageUpdate to latest v2.xRemove installGlobalsAdopt the Vite Pluginv3_fetcherPersistv3_relativeSplatPathv3_throwAbortReasonv3_lazyRouteDiscoveryv3_singleFetchv3_routeConfigDeprecations@remix-run/eslint-configjsondeferSerializeFromMultipart Form Data and File Upload utilitiesOn this pageUpdate to latest v2.xRemove installGlobalsAdopt the Vite Pluginv3_fetcherPersistv3_relativeSplatPathv3_throwAbortReasonv3_lazyRouteDiscoveryv3_singleFetchv3_routeConfigDeprecations@remix-run/eslint-configjsondeferSerializeFromMultipart Form Data and File Upload utilitiesFuture Flags and Deprecations This guide walks you through the process of adopting future flags in your Remix app. By following this strategy, you will be able to upgrade to the next major version of Remix with minimal changes. To read more about future flags, see Development Strategy. We highly recommend you make a commit after each step and ship it instead of doing everything all at once. Most flags can be adopted in any order, with exceptions noted below. Update to latest v2.x First update to the latest minor version of v2.x to have the latest future flags. You will likely see a number of deprecation warnings as you upgrade, which we'll cover below. 👉 Update to latest v2 npm install @remix-run/{dev,react,node,etc.}@2 Remove installGlobals Background Previously Remix required a fetch polyfill to be installed. This was achieved by calling installGlobals(). The next major version requires a minimum of Node 20 to take advantage of the built-in fetch support. Note: if you are using Miniflare/Cloudflare worker with your remix project, ensure your compatibility flag is set to 2023-03-01 or later as well. 👉 Update to Node 20+ It is recommended that you upgrade to the latest even-numbered version of Node LTS. 👉 Remove installGlobals import { vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; -installGlobals(); export default defineConfig({ plugins: [remix()], }); Adopt the Vite Plugin Background Remix no longer uses its own, closed compiler (now referred to as the \"Classic Compiler\") and instead uses Vite. Vite is a powerful, performant and extensible development environment for JavaScript projects. View the Vite docs for more information on performance, troubleshooting, etc. While this is not a future flag, new features and some feature flags are only available in the Vite plugin, and the Classic Compiler will be removed in the next version of Remix. 👉 Install Vite npm install -D vite Update your Code 👉 Replace remix.config.js with vite.config.ts at the root of your Remix app import { vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [remix()], }); The subset of supported Remix config options should be passed directly to the plugin: export default defineConfig({ plugins: [ remix({ ignoredRouteFiles: [\"**/*.css\"], }), ], }); 👉 Add unstable_optimizeDeps (optional) Many users found that automatically optimizing dependencies helped them more easily adopt the Vite plugin. For this reason we added the unstable_optimizeDeps flag to the Vite plugin. This flag will remain in an \"unstable\" state until React Router v7, so it is not critical that you adopt this in your Remix v2 app before upgrading to React Router v7. export default defineConfig({ plugins: [ remix({ future: { unstable_optimizeDeps: true, }, }), ], }); 👉 Remove \u003cLiveReload/\u003e, keep \u003cScripts /\u003e import { - LiveReload, Outlet, Scripts, } export default function App() { return ( \u003chtml\u003e \u003chead\u003e \u003c/head\u003e \u003cbody\u003e \u003cOutlet /\u003e - \u003cLiveReload /\u003e \u003cScripts /\u003e \u003c/body\u003e \u003c/html\u003e ) } 👉 Update tsconfig.json Update the types field in tsconfig.json and make sure skipLibCheck, module, and moduleResolution are all set correctly. { \"compilerOptions\": { \"types\": [\"@remix-run/node\", \"vite/client\"], \"skipLibCheck\": true, \"module\": \"ESNext\", \"moduleResolution\": \"Bundler\" } } 👉 Update/remove remix.env.d.ts Remove the following type declarations in remix.env.d.ts - /// \u003creference types=\"@remix-run/dev\" /\u003e - /// \u003creference types=\"@remix-run/node\" /\u003e If remix.env.d.ts is now empty, delete it rm remix.env.d.ts Configure path aliases Vite does not provide any path aliases by default. If you were relying on this feature, such as defining ~ as an alias for the app directory, you can install the vite-tsconfig-paths plugin to automatically resolve path aliases from your tsconfig.json in Vite, matching the behavior of the Remix compiler: 👉 Install vite-tsconfig-paths npm install -D vite-tsconfig-paths 👉 Add vite-tsconfig-paths to your Vite config import { vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; import tsconfigPaths from \"vite-tsconfig-paths\"; export default defineConfig({ plugins: [remix(), tsconfigPaths()], }); Remove @remix-run/css-bundle Vite has built-in support for CSS side effect imports, PostCSS and CSS Modules, among other CSS bundling features. The Remix Vite plugin automatically attaches bundled CSS to the relevant routes. The @remix-run/css-bundle package is redundant when using Vite since its cssBundleHref export will always be undefined. 👉 Uninstall @remix-run/css-bundle npm uninstall @remix-run/css-bundle 👉 Remove references to cssBundleHref - import { cssBundleHref } from \"@remix-run/css-bundle\"; import type { LinksFunction } from \"@remix-run/node\"; // or cloudflare/deno export const links: LinksFunction = () =\u003e [ - ...(cssBundleHref - ? [{ rel: \"stylesheet\", href: cssBundleHref }] - : []), // ... ]; Fix up CSS imports referenced in links If you are referencing CSS in a links function, you'll need to update the corresponding CSS imports to use Vite's explicit ?url import syntax. 👉 Add ?url to CSS imports used in links -import styles from \"~/styles/dashboard.css\"; +import styles from \"~/styles/dashboard.css?url\"; export const links = () =\u003e { return [ { rel: \"stylesheet\", href: styles } ]; } Migrate Tailwind CSS or Vanilla Extract If you are using Tailwind CSS or Vanilla Extract, see the full migration guide. Migrate from Remix App Server 👉 Update your dev, build and start scripts { \"scripts\": { \"dev\": \"remix vite:dev\", \"build\": \"remix vite:build\", \"start\": \"remix-serve ./build/server/index.js\" } } 👉 Configure your Vite dev server port (optional) export default defineConfig({ server: { port: 3000, }, plugins: [remix()], }); Migrate a custom server If you are migrating a customer server or Cloudflare Functions, see the full migration guide. Migrate MDX routes If you're using MDX, you should use the official MDX Rollup plugin. See the full migration guide for a step-by-step walkthrough. v3_fetcherPersist Background The fetcher lifecycle is now based on when it returns to an idle state rather than when its owner component unmounts: View the RFC for more information. 👉 Enable the Flag remix({ future: { v3_fetcherPersist: true, }, }); Update your Code It's unlikely to affect your app. You may want to check any usage of useFetchers as they may persist longer than they did before. Depending on what you're doing, you may render something longer than before. v3_relativeSplatPath Background Changes the relative path matching and linking for multi-segment splats paths like dashboard/* (vs. just *). View the CHANGELOG for more information. 👉 Enable the Flag remix({ future: { v3_relativeSplatPath: true, }, }); Update your Code If you have any routes with a path + a splat like dashboard.$.tsx or route(\"dashboard/*\") that have relative links like \u003cLink to=\"relative\"\u003e or \u003cLink to=\"../relative\"\u003e beneath it, you will need to update your code. 👉 Split the route into two For any splat routes split it into a layout route and a child route with the splat: └── routes ├── _index.tsx + ├── dashboard.tsx └── dashboard.$.tsx // or routes(defineRoutes) { return defineRoutes((route) =\u003e { route(\"/\", \"home/route.tsx\", { index: true }); - route(\"dashboard/*\", \"dashboard/route.tsx\") + route(\"dashboard\", \"dashboard/layout.tsx\", () =\u003e { + route(\"*\", \"dashboard/route.tsx\"); }); }); }, 👉 Update relative links Update any \u003cLink\u003e elements with relative links within that route tree to include the extra .. relative segment to continue linking to the same place: // dashboard.$.tsx or dashboard/route.tsx function Dashboard() { return ( \u003cdiv\u003e \u003ch2\u003eDashboard\u003c/h2\u003e \u003cnav\u003e - \u003cLink to=\"\"\u003eDashboard Home\u003c/Link\u003e - \u003cLink to=\"team\"\u003eTeam\u003c/Link\u003e - \u003cLink to=\"projects\"\u003eProjects\u003c/Link\u003e + \u003cLink to=\"../\"\u003eDashboard Home\u003c/Link\u003e + \u003cLink to=\"../team\"\u003eTeam\u003c/Link\u003e + \u003cLink to=\"../projects\"\u003eProjects\u003c/Link\u003e \u003c/nav\u003e \u003c/div\u003e ); } v3_throwAbortReason Background When a server-side request is aborted, such as when a user navigates away from a page before the loader finishes, Remix will throw the request.signal.reason instead of an error such as new Error(\"query() call aborted...\"). 👉 Enable the Flag remix({ future: { v3_throwAbortReason: true, }, }); Update your Code You likely won't need to adjust any code, unless you had custom logic inside of handleError that was matching the previous error message to differentiate it from other errors. v3_lazyRouteDiscovery Background With this flag, Remix no longer sends the full route manifest up to the client on initial load. Instead, Remix only sends the server-rendered routes up in the manifest and then fetches the remaining routes as the user navigates around the application. Additional details are available in the docs and the blog post 👉 Enable the Flag remix({ future: { v3_lazyRouteDiscovery: true, }, }); Update your Code You shouldn't need to make any changes to your application code for this feature to work. You may find some usage for the new \u003cLink discover\u003e API if you wish to disable eager route discovery on certain links. v3_singleFetch This flag requires the Vite plugin. Background With this flag, Remix uses a single fetch for data requests during client-side navigations. This simplifies data loading by treating data requests the same as document requests, eliminating the need to handle headers and caching differently. For advanced use cases, you can still opt into fine-grained revalidations. View the \"Single Fetch\" docs for more information. 👉 Enable the Flag (and the types) import { vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; import tsconfigPaths from \"vite-tsconfig-paths\"; declare module \"@remix-run/node\" { // or cloudflare, deno, etc. interface Future { v3_singleFetch: true; } } export default defineConfig({ plugins: [ remix({ future: { v3_singleFetch: true, }, }), tsconfigPaths(), ], }); Update your Code You should be able to mostly use your code as-is with the flag enabled, but the following changes should be made over time and will be required prior to the next major version. 👉 Remove json()/defer() in favor of raw objects Single Fetch supports JSON objects and Promises out of the box, so you can return the raw data from your loader/action functions: -import { json } from \"@remix-run/node\"; export async function loader({}: LoaderFunctionArgs) { let tasks = await fetchTasks(); - return json(tasks); + return tasks; } -import { defer } from \"@remix-run/node\"; export async function loader({}: LoaderFunctionArgs) { let lazyStuff = fetchLazyStuff(); let tasks = await fetchTasks(); - return defer({ tasks, lazyStuff }); + return { tasks, lazyStuff }; } If you were using the second parameter of json/defer to set a custom status or headers on your response, you can continue doing so via the new data API (please note that you will need a headers export to apply those headers to Single Fetch data requests): -import { json } from \"@remix-run/node\"; +import { data } from \"@remix-run/node\"; // This example assumes you already have a headers function to handle header // merging for your document requests export function headers() { // ... } export async function loader({}: LoaderFunctionArgs) { let tasks = await fetchTasks(); - return json(tasks, { + return data(tasks, { headers: { \"Cache-Control\": \"public, max-age=604800\" } }); } 👉 Adjust your server abort delay If you were using a custom ABORT_DELAY in your entry.server.tsx file, you should change that to use the new streamTimeout API leveraged by Single Fetch: -const ABORT_DELAY = 5000; +// Reject/cancel all pending promises after 5 seconds +export const streamTimeout = 5000; // ... function handleBrowserRequest(/* ... */) { return new Promise((resolve, reject) =\u003e { const { pipe, abort } = renderToPipeableStream( \u003cRemixServer context={remixContext} url={request.url} - abortDelay={ABORT_DELAY} /\u003e, { onShellReady() { /* ... */ }, onShellError(error: unknown) { /* ... */ }, onError(error: unknown) { /* ... */ }, } ); - setTimeout(abort, ABORT_DELAY); + // Automatically timeout the React renderer after 6 seconds, which ensures + // React has enough time to flush down the rejected boundary contents + setTimeout(abort, streamTimeout + 1000); }); } v3_routeConfig This flag requires the Vite plugin. Config-based routing is the new default in React Router v7, configured via the routes.ts file in the app directory. Support for routes.ts and its related APIs in Remix are designed as a migration path to help minimize the number of changes required when moving your Remix project over to React Router v7. While some new packages have been introduced within the @remix-run scope, these new packages only exist to keep the code in routes.ts as similar as possible to the equivalent code for React Router v7. When the v3_routeConfig future flag is enabled, Remix's built-in file system routing will be disabled and your project will opt into React Router v7's config-based routing. If you prefer to keep using Remix's file-based routing, we cover how to enable it in routes.ts below. Update your code To migrate Remix's file system routing and route config to the equivalent setup in React Router v7, you can follow these steps: 👉 Enable the Flag remix({ future: { v3_routeConfig: true, }, }); 👉 Install @remix-run/route-config This package matches the API of React Router v7's @react-router/dev/routes, making the React Router v7 migration as easy as possible. npm install -D @remix-run/route-config This provides the core RouteConfig type as well as a set of helpers for configuring routes in code. 👉 Add an app/routes.ts file without any configured routes touch app/routes.ts import type { RouteConfig } from \"@remix-run/route-config\"; export default [] satisfies RouteConfig; This is a good way to check that your new routes.ts file is being picked up successfully. Your app should now be rendering a blank page since there aren't any routes defined yet. 👉 Install @remix-run/fs-routes and use it in routes.ts npm install -D @remix-run/fs-routes This package matches the API of React Router v7's @react-router/fs-routes, making the React Router v7 migration as easy as possible. If you've configured ignoredRouteFiles to [\"**/*\"], you should skip this step since you're already opting out of Remix's file system routing. import { flatRoutes } from \"@remix-run/fs-routes\"; export default flatRoutes(); 👉 If you used the routes config option, add @remix-run/routes-option-adapter and use it in routes.ts Remix provides a mechanism for defining routes in code and plugging in alternative file system routing conventions, available via the routes option on the Vite plugin. To make migration easier, an adapter package is available that converts Remix's routes option into React Router's RouteConfig array. To get started, first install the adapter: npm install -D @remix-run/routes-option-adapter This package matches the API of React Router v7's @react-router/remix-routes-option-adapter, making the React Router v7 migration as easy as possible. Then, update your routes.ts file to use the adapter, passing the value of your routes option to the remixRoutesOptionAdapter function which will return an array of configured routes. For example, if you were using the routes option to use an alternative file system routing implementation like remix-flat-routes: import { type RouteConfig } from \"@remix-run/route-config\"; import { remixRoutesOptionAdapter } from \"@remix-run/routes-option-adapter\"; import { flatRoutes } from \"remix-flat-routes\"; export default remixRoutesOptionAdapter((defineRoutes) =\u003e flatRoutes(\"routes\", defineRoutes) ) satisfies RouteConfig; Or, if you were using the routes option to define config-based routes: import { flatRoutes } from \"@remix-run/fs-routes\"; import { type RouteConfig } from \"@remix-run/route-config\"; import { remixRoutesOptionAdapter } from \"@remix-run/routes-option-adapter\"; export default remixRoutesOptionAdapter((defineRoutes) =\u003e { return defineRoutes((route) =\u003e { route(\"/\", \"home/route.tsx\", { index: true }); route(\"about\", \"about/route.tsx\"); route(\"\", \"concerts/layout.tsx\", () =\u003e { route(\"trending\", \"concerts/trending.tsx\"); route(\":city\", \"concerts/city.tsx\"); }); }); }) satisfies RouteConfig; If you're defining config-based routes in this way, you might want to consider migrating to the new route config API since it's more streamlined while still being very similar to the old API. For example, the routes above would look like this: import { type RouteConfig, route, layout, index, } from \"@remix-run/route-config\"; export default [ index(\"home/route.tsx\"), route(\"about\", \"about/route.tsx\"), layout(\"concerts/layout.tsx\", [ route(\"trending\", \"concerts/trending.tsx\"), route(\":city\", \"concerts/city.tsx\"), ]), ] satisfies RouteConfig; Note that if you need to mix and match different route config approaches, they can be merged into a single array of routes. The RouteConfig type ensures that everything is still valid. import { flatRoutes } from \"@remix-run/fs-routes\"; import type { RouteConfig } from \"@remix-run/route-config\"; import { route } from \"@remix-run/route-config\"; import { remixRoutesOptionAdapter } from \"@remix-run/routes-option-adapter\"; export default [ ...(await flatRoutes({ rootDirectory: \"fs-routes\" })), ...(await remixRoutesOptionAdapter(/* ... */)), route(\"/hello\", \"routes/hello.tsx\"), ] satisfies RouteConfig; Deprecations @remix-run/eslint-config The @remix-run/eslint-config package is deprecated and will not be included in React Router v7. We recommend moving towards a streamlined ESLint config such as the ones included in the Remix templates. json This utility is deprecated and will be removed in React Router v7 in favor of Single Fetch naked object returns. If you were not relying on json to serialize your data (such as stringifying Date objects), you can safely remove it. If you were returning headers or status via json, you can use the new data util as a drop-in replacement to set those values. If you want to serialize your data to JSON, you can use the native Response.json() method. View the Single Fetch docs for more information. defer This utility is deprecated and will be removed in React Router v7 in favor of Single Fetch naked object returns. If you were returning headers or status via defer, you can use the new data util as a drop-in replacement to set those values. View the Single Fetch docs for more information. SerializeFrom This type is deprecated and will be removed in React Router v7 since Single Fetch no longer serializes data to JSON. If you are relying on SerializeFrom to unwrap your loader/action data, you can use a custom type like this: type SerializeFrom\u003cT\u003e = ReturnType\u003ctypeof useLoaderData\u003cT\u003e\u003e; In most cases, you should be able to just remove SerializeFrom and use the types returned from useLoaderData/useActionData, or the types of the data in loader/action functions. Multipart Form Data and File Upload utilities The following utilities are deprecated and will be removed in React Router v7: unstable_parseMultipartFormData unstable_composeUploadHandlers unstable_createFileUploadHandler unstable_createMemoryUploadHandler We recommend using @mjackson/form-data-parser and @mjackson/file-storage to handle multipart form data and file uploads. You can also check out the React Router \"File Uploads\" doc or \"File uploads with Remix\" blog post for guides on using these libraries.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_1005\\\":-5,\\\"_1006\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":1004},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"docs/start/future-flags.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"future-flags-and-deprecations\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#future-flags-and-deprecations\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eFuture Flags and Deprecations\\u003c/h1\\u003e\\\\n\\u003cp\\u003eThis guide walks you through the process of adopting future flags in your Remix app. By following this strategy, you will be able to upgrade to the next major version of Remix with minimal changes. To read more about future flags, see \\u003ca href=\\\\\\\"../guides/api-development-strategy\\\\\\\"\\u003eDevelopment Strategy\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWe highly recommend you make a commit after each step and ship it instead of doing everything all at once. Most flags can be adopted in any order, with exceptions noted below.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"update-to-latest-v2x\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#update-to-latest-v2x\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdate to latest v2.x\\u003c/h2\\u003e\\\\n\\u003cp\\u003eFirst update to the latest minor version of v2.x to have the latest future flags. You will likely see a number of deprecation warnings as you upgrade, which we'll cover below.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eUpdate to latest v2\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003einstall\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/{dev,react,node,etc.}@2\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"remove-installglobals\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#remove-installglobals\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRemove \\u003ccode\\u003einstallGlobals\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eBackground\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ePreviously Remix required a \\u003ccode\\u003efetch\\u003c/code\\u003e polyfill to be installed. This was achieved by calling \\u003ccode\\u003einstallGlobals()\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe next major version requires a minimum of Node 20 to take advantage of the built-in \\u003ccode\\u003efetch\\u003c/code\\u003e support.\\u003c/p\\u003e\\\\n\\u003cp\\u003eNote: if you are using Miniflare/Cloudflare worker with your remix project, ensure your \\u003ca href=\\\\\\\"https://developers.cloudflare.com/workers/configuration/compatibility-dates\\\\\\\"\\u003ecompatibility flag\\u003c/a\\u003e is set to \\u003ccode\\u003e2023-03-01\\u003c/code\\u003e or later as well.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eUpdate to Node 20+\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eIt is recommended that you upgrade to the latest even-numbered version of Node LTS.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eRemove \\u003ccode\\u003einstallGlobals\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003eimport { vitePlugin as remix } from \\\\\\\"@remix-run/dev\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003eimport { defineConfig } from \\\\\\\"vite\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einstallGlobals();\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003eexport default defineConfig({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e plugins: [remix()],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"adopt-the-vite-plugin\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#adopt-the-vite-plugin\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eAdopt the Vite Plugin\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eBackground\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix no longer uses its own, closed compiler (now referred to as the \\\\\\\"Classic Compiler\\\\\\\") and instead uses \\u003ca href=\\\\\\\"https://vitejs.dev\\\\\\\"\\u003eVite\\u003c/a\\u003e. Vite is a powerful, performant and extensible development environment for JavaScript projects. \\u003ca href=\\\\\\\"../guides/vite\\\\\\\"\\u003eView the Vite docs\\u003c/a\\u003e for more information on performance, troubleshooting, etc.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWhile this is not a future flag, new features and some feature flags are only available in the Vite plugin, and the Classic Compiler will be removed in the next version of Remix.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eInstall Vite\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003einstall\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e-D\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eUpdate your Code\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eReplace \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e with \\u003ccode\\u003evite.config.ts\\u003c/code\\u003e at the root of your Remix app\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evitePlugin\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eas\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e plugins: [\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e()],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThe subset of \\u003ca href=\\\\\\\"../file-conventions/vite-config\\\\\\\"\\u003esupported Remix config options\\u003c/a\\u003e should be passed directly to the plugin:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e plugins: [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e ignoredRouteFiles: [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e**/*.css\\u003c/span\\u003e\\\\\\\"],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e }),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e ],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdd \\u003ccode\\u003eunstable_optimizeDeps\\u003c/code\\u003e (optional)\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eMany users found that automatically \\u003ca href=\\\\\\\"../guides/dependency-optimization\\\\\\\"\\u003eoptimizing dependencies\\u003c/a\\u003e helped them more easily adopt the Vite plugin. For this reason we added the \\u003ccode\\u003eunstable_optimizeDeps\\u003c/code\\u003e flag to the Vite plugin.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThis flag will remain in an \\\\\\\"unstable\\\\\\\" state until React Router v7, so it is not critical that you adopt this in your Remix v2 app before upgrading to React Router v7.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e plugins: [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e unstable_optimizeDeps: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e }),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e ],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eRemove \\u003ccode\\u003e\\u0026#x3C;LiveReload/\\u003e\\u003c/code\\u003e, keep \\u003ccode\\u003e\\u0026#x3C;Scripts /\\u003e\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e import {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e LiveReload,\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e Outlet,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e Scripts,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e export default function App() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e return (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;html\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;head\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;/head\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;body\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;Outlet /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e \\u0026#x3C;LiveReload /\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;Scripts /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;/body\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;/html\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e )\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eUpdate \\u003ccode\\u003etsconfig.json\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eUpdate the \\u003ccode\\u003etypes\\u003c/code\\u003e field in \\u003ccode\\u003etsconfig.json\\u003c/code\\u003e and make sure \\u003ccode\\u003eskipLibCheck\\u003c/code\\u003e, \\u003ccode\\u003emodule\\u003c/code\\u003e, and \\u003ccode\\u003emoduleResolution\\u003c/code\\u003e are all set correctly.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"tsconfig.json\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"json\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"tsconfig.json\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"json\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e{\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecompilerOptions\\u003c/span\\u003e\\\\\\\": {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etypes\\u003c/span\\u003e\\\\\\\": [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite/client\\u003c/span\\u003e\\\\\\\"],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eskipLibCheck\\u003c/span\\u003e\\\\\\\": \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emodule\\u003c/span\\u003e\\\\\\\": \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eESNext\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emoduleResolution\\u003c/span\\u003e\\\\\\\": \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eBundler\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eUpdate/remove \\u003ccode\\u003eremix.env.d.ts\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemove the following type declarations in \\u003ccode\\u003eremix.env.d.ts\\u003c/code\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.env.d.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.env.d.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e /// \\u0026#x3C;reference types=\\\\\\\"@remix-run/dev\\\\\\\" /\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e /// \\u0026#x3C;reference types=\\\\\\\"@remix-run/node\\\\\\\" /\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eIf \\u003ccode\\u003eremix.env.d.ts\\u003c/code\\u003e is now empty, delete it\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003erm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eremix.env.d.ts\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eConfigure path aliases\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eVite does not provide any path aliases by default. If you were relying on this feature, such as defining \\u003ccode\\u003e~\\u003c/code\\u003e as an alias for the \\u003ccode\\u003eapp\\u003c/code\\u003e directory, you can install the \\u003ca href=\\\\\\\"https://github.com/aleclarson/vite-tsconfig-paths\\\\\\\"\\u003evite-tsconfig-paths\\u003c/a\\u003e plugin to automatically resolve path aliases from your \\u003ccode\\u003etsconfig.json\\u003c/code\\u003e in Vite, matching the behavior of the Remix compiler:\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eInstall \\u003ccode\\u003evite-tsconfig-paths\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003einstall\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e-D\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite-tsconfig-paths\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdd \\u003ccode\\u003evite-tsconfig-paths\\u003c/code\\u003e to your Vite config\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evitePlugin\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eas\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etsconfigPaths\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite-tsconfig-paths\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e plugins: [\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e(), \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etsconfigPaths\\u003c/span\\u003e()],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eRemove \\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eVite has built-in support for CSS side effect imports, PostCSS and CSS Modules, among other CSS bundling features. The Remix Vite plugin automatically attaches bundled CSS to the relevant routes.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe \\u003cnobr\\u003e\\u003ca href=\\\\\\\"../styling/bundling\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/nobr\\u003e package is redundant when using Vite since its \\u003ccode\\u003ecssBundleHref\\u003c/code\\u003e export will always be \\u003ccode\\u003eundefined\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eUninstall \\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003euninstall\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/css-bundle\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eRemove references to \\u003ccode\\u003ecssBundleHref\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e import { cssBundleHref } from \\\\\\\"@remix-run/css-bundle\\\\\\\";\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e import type { LinksFunction } from \\\\\\\"@remix-run/node\\\\\\\"; // or cloudflare/deno\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e export const links: LinksFunction = () =\\u003e [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e ...(cssBundleHref\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e ? [{ rel: \\\\\\\"stylesheet\\\\\\\", href: cssBundleHref }]\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e : []),\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e // ...\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e ];\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eFix up CSS imports referenced in \\u003ccode\\u003elinks\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you are \\u003ca href=\\\\\\\"../styling/css\\\\\\\"\\u003ereferencing CSS in a \\u003ccode\\u003elinks\\u003c/code\\u003e function\\u003c/a\\u003e, you'll need to update the corresponding CSS imports to use \\u003ca href=\\\\\\\"https://vitejs.dev/guide/assets.html#explicit-url-imports\\\\\\\"\\u003eVite's explicit \\u003ccode\\u003e?url\\u003c/code\\u003e import syntax.\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdd \\u003ccode\\u003e?url\\u003c/code\\u003e to CSS imports used in \\u003ccode\\u003elinks\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eimport styles from \\\\\\\"~/styles/dashboard.css\\\\\\\";\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eimport styles from \\\\\\\"~/styles/dashboard.css?url\\\\\\\";\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003eexport const links = () =\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e return [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e { rel: \\\\\\\"stylesheet\\\\\\\", href: styles }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e ];\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eMigrate Tailwind CSS or Vanilla Extract\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you are using Tailwind CSS or Vanilla Extract, see the \\u003ca href=\\\\\\\"../guides/vite#enable-tailwind-via-postcss\\\\\\\"\\u003efull migration guide\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eMigrate from Remix App Server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eUpdate your \\u003ccode\\u003edev\\u003c/code\\u003e, \\u003ccode\\u003ebuild\\u003c/code\\u003e and \\u003ccode\\u003estart\\u003c/code\\u003e scripts\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"package.json\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"json\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"package.json\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"json\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e{\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003escripts\\u003c/span\\u003e\\\\\\\": {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edev\\u003c/span\\u003e\\\\\\\": \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eremix vite:dev\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ebuild\\u003c/span\\u003e\\\\\\\": \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eremix vite:build\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003estart\\u003c/span\\u003e\\\\\\\": \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eremix-serve ./build/server/index.js\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eConfigure your Vite dev server port (optional)\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e server: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e port: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e3000\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e plugins: [\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e()],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eMigrate a custom server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you are migrating a customer server or Cloudflare Functions, see the \\u003ca href=\\\\\\\"../guides/vite#migrating-a-custom-server\\\\\\\"\\u003efull migration guide\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eMigrate MDX routes\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you're using \\u003ca href=\\\\\\\"https://mdxjs.com\\\\\\\"\\u003eMDX\\u003c/a\\u003e, you should use the official \\u003ca href=\\\\\\\"https://mdxjs.com/packages/rollup\\\\\\\"\\u003eMDX Rollup plugin\\u003c/a\\u003e. See the \\u003ca href=\\\\\\\"../guides/vite#add-mdx-plugin\\\\\\\"\\u003efull migration guide\\u003c/a\\u003e for a step-by-step walkthrough.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v3_fetcherpersist\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v3_fetcherpersist\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev3_fetcherPersist\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eBackground\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe fetcher lifecycle is now based on when it returns to an idle state rather than when its owner component unmounts: \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/discussions/7698\\\\\\\"\\u003eView the RFC\\u003c/a\\u003e for more information.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eEnable the Flag\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e v3_fetcherPersist: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eUpdate your Code\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eIt's unlikely to affect your app. You may want to check any usage of \\u003ccode\\u003euseFetchers\\u003c/code\\u003e as they may persist longer than they did before. Depending on what you're doing, you may render something longer than before.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v3_relativesplatpath\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v3_relativesplatpath\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev3_relativeSplatPath\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eBackground\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eChanges the relative path matching and linking for multi-segment splats paths like \\u003ccode\\u003edashboard/*\\u003c/code\\u003e (vs. just \\u003ccode\\u003e*\\u003c/code\\u003e). \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/v2/CHANGELOG.md#futurev3_relativesplatpath\\\\\\\"\\u003eView the CHANGELOG\\u003c/a\\u003e for more information.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eEnable the Flag\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e v3_relativeSplatPath: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eUpdate your Code\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you have any routes with a path + a splat like \\u003ccode\\u003edashboard.$.tsx\\u003c/code\\u003e or \\u003ccode\\u003eroute(\\\\\\\"dashboard/*\\\\\\\")\\u003c/code\\u003e that have relative links like \\u003ccode\\u003e\\u0026#x3C;Link to=\\\\\\\"relative\\\\\\\"\\u003e\\u003c/code\\u003e or \\u003ccode\\u003e\\u0026#x3C;Link to=\\\\\\\"../relative\\\\\\\"\\u003e\\u003c/code\\u003e beneath it, you will need to update your code.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eSplit the route into two\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor any splat routes split it into a layout route and a child route with the splat:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e└── routes\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e ├── _index.tsx\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e ├── dashboard.tsx\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e └── dashboard.$.tsx\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e// or\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003eroutes(defineRoutes) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e return defineRoutes((route) =\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e route(\\\\\\\"/\\\\\\\", \\\\\\\"home/route.tsx\\\\\\\", { index: true });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e route(\\\\\\\"dashboard/*\\\\\\\", \\\\\\\"dashboard/route.tsx\\\\\\\")\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e route(\\\\\\\"dashboard\\\\\\\", \\\\\\\"dashboard/layout.tsx\\\\\\\", () =\\u003e {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e route(\\\\\\\"*\\\\\\\", \\\\\\\"dashboard/route.tsx\\\\\\\");\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e},\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eUpdate relative links\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eUpdate any \\u003ccode\\u003e\\u0026#x3C;Link\\u003e\\u003c/code\\u003e elements with relative links within that route tree to include the extra \\u003ccode\\u003e..\\u003c/code\\u003e relative segment to continue linking to the same place:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e// dashboard.$.tsx or dashboard/route.tsx\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003efunction Dashboard() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e return (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u0026#x3C;div\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u0026#x3C;h2\\u003eDashboard\\u0026#x3C;/h2\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u0026#x3C;nav\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e \\u0026#x3C;Link to=\\\\\\\"\\\\\\\"\\u003eDashboard Home\\u0026#x3C;/Link\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e \\u0026#x3C;Link to=\\\\\\\"team\\\\\\\"\\u003eTeam\\u0026#x3C;/Link\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e \\u0026#x3C;Link to=\\\\\\\"projects\\\\\\\"\\u003eProjects\\u0026#x3C;/Link\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u0026#x3C;Link to=\\\\\\\"../\\\\\\\"\\u003eDashboard Home\\u0026#x3C;/Link\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u0026#x3C;Link to=\\\\\\\"../team\\\\\\\"\\u003eTeam\\u0026#x3C;/Link\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u0026#x3C;Link to=\\\\\\\"../projects\\\\\\\"\\u003eProjects\\u0026#x3C;/Link\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;/nav\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;/div\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"v3_throwabortreason\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v3_throwabortreason\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev3_throwAbortReason\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eBackground\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eWhen a server-side request is aborted, such as when a user navigates away from a page before the loader finishes, Remix will throw the \\u003ccode\\u003erequest.signal.reason\\u003c/code\\u003e instead of an error such as \\u003ccode\\u003enew Error(\\\\\\\"query() call aborted...\\\\\\\")\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eEnable the Flag\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e v3_throwAbortReason: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eUpdate your Code\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou likely won't need to adjust any code, unless you had custom logic inside of \\u003ccode\\u003ehandleError\\u003c/code\\u003e that was matching the previous error message to differentiate it from other errors.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v3_lazyroutediscovery\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v3_lazyroutediscovery\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev3_lazyRouteDiscovery\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eBackground\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eWith this flag, Remix no longer sends the full route manifest up to the client on initial load. Instead, Remix only sends the server-rendered routes up in the manifest and then fetches the remaining routes as the user navigates around the application. Additional details are available in the \\u003ca href=\\\\\\\"../guides/lazy-route-discovery\\\\\\\"\\u003edocs\\u003c/a\\u003e and the \\u003ca href=\\\\\\\"https://remix.run/blog/fog-of-war\\\\\\\"\\u003eblog post\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eEnable the Flag\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e v3_lazyRouteDiscovery: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eUpdate your Code\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou shouldn't need to make any changes to your application code for this feature to work.\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou may find some usage for the new \\u003ca href=\\\\\\\"../components/link#discover\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Link discover\\u003e\\u003c/code\\u003e\\u003c/a\\u003e API if you wish to disable eager route discovery on certain links.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"v3_singlefetch\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v3_singlefetch\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev3_singleFetch\\u003c/h2\\u003e\\\\n\\u003cdocs-warning\\u003e\\\\n\\u003cp\\u003eThis flag requires the \\u003ca href=\\\\\\\"#adopt-the-vite-plugin\\\\\\\"\\u003eVite plugin\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003c/docs-warning\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eBackground\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eWith this flag, Remix uses a single fetch for data requests during client-side navigations. This simplifies data loading by treating data requests the same as document requests, eliminating the need to handle headers and caching differently. For advanced use cases, you can still opt into fine-grained revalidations. View the \\u003ca href=\\\\\\\"../guides/single-fetch\\\\\\\"\\u003e\\\\\\\"Single Fetch\\\\\\\" docs\\u003c/a\\u003e for more information.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eEnable the Flag (and the types)\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evitePlugin\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eas\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etsconfigPaths\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite-tsconfig-paths\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edeclare\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003emodule\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\" {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare, deno, etc.\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003einterface\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eFuture\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ev3_singleFetch\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003etrue\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e plugins: [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e v3_singleFetch: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e }),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etsconfigPaths\\u003c/span\\u003e(),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e ],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eUpdate your Code\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou should be able to mostly use your code as-is with the flag enabled, but the following changes should be made over time and will be required prior to the next major version.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eRemove \\u003ccode\\u003ejson()\\u003c/code\\u003e/\\u003ccode\\u003edefer()\\u003c/code\\u003e in favor of raw objects\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eSingle Fetch supports JSON objects and Promises out of the box, so you can return the raw data from your \\u003ccode\\u003eloader\\u003c/code\\u003e/\\u003ccode\\u003eaction\\u003c/code\\u003e functions:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eimport { json } from \\\\\\\"@remix-run/node\\\\\\\";\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003eexport async function loader({}: LoaderFunctionArgs) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e let tasks = await fetchTasks();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e return json(tasks);\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e return tasks;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eimport { defer } from \\\\\\\"@remix-run/node\\\\\\\";\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003eexport async function loader({}: LoaderFunctionArgs) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e let lazyStuff = fetchLazyStuff();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e let tasks = await fetchTasks();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e return defer({ tasks, lazyStuff });\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e return { tasks, lazyStuff };\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eIf you were using the second parameter of \\u003ccode\\u003ejson\\u003c/code\\u003e/\\u003ccode\\u003edefer\\u003c/code\\u003e to set a custom status or headers on your response, you can continue doing so via the new \\u003ccode\\u003edata\\u003c/code\\u003e API (please note that you will need a \\u003ccode\\u003eheaders\\u003c/code\\u003e export to apply those headers to Single Fetch data requests):\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eimport { json } from \\\\\\\"@remix-run/node\\\\\\\";\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eimport { data } from \\\\\\\"@remix-run/node\\\\\\\";\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e// This example assumes you already have a headers function to handle header\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e// merging for your document requests\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003eexport function headers() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e // ...\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003eexport async function loader({}: LoaderFunctionArgs) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e let tasks = await fetchTasks();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e return json(tasks, {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e return data(tasks, {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e headers: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\\\\\\"Cache-Control\\\\\\\": \\\\\\\"public, max-age=604800\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdjust your server abort delay\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you were using a custom \\u003ccode\\u003eABORT_DELAY\\u003c/code\\u003e in your \\u003ccode\\u003eentry.server.tsx\\u003c/code\\u003e file, you should change that to use the new \\u003ccode\\u003estreamTimeout\\u003c/code\\u003e API leveraged by Single Fetch:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"entry.server.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"entry.server.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econst ABORT_DELAY = 5000;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e// Reject/cancel all pending promises after 5 seconds\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eexport const streamTimeout = 5000;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e// ...\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003efunction handleBrowserRequest(/* ... */) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e return new Promise((resolve, reject) =\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e const { pipe, abort } = renderToPipeableStream(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;RemixServer\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e context={remixContext}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e url={request.url}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e abortDelay={ABORT_DELAY}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e /\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e onShellReady() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e /* ... */\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e onShellError(error: unknown) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e /* ... */\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e onError(error: unknown) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e /* ... */\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e setTimeout(abort, ABORT_DELAY);\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e // Automatically timeout the React renderer after 6 seconds, which ensures\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e // React has enough time to flush down the rejected boundary contents\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e setTimeout(abort, streamTimeout + 1000);\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"v3_routeconfig\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#v3_routeconfig\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev3_routeConfig\\u003c/h2\\u003e\\\\n\\u003cdocs-warning\\u003e\\\\n\\u003cp\\u003eThis flag requires the \\u003ca href=\\\\\\\"#adopt-the-vite-plugin\\\\\\\"\\u003eVite plugin\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003c/docs-warning\\u003e\\\\n\\u003cp\\u003eConfig-based routing is the new default in React Router v7, configured via the \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e file in the app directory. Support for \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e and its related APIs in Remix are designed as a migration path to help minimize the number of changes required when moving your Remix project over to React Router v7. While some new packages have been introduced within the \\u003ccode\\u003e@remix-run\\u003c/code\\u003e scope, these new packages only exist to keep the code in \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e as similar as possible to the equivalent code for React Router v7.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWhen the \\u003ccode\\u003ev3_routeConfig\\u003c/code\\u003e future flag is enabled, Remix's built-in file system routing will be disabled and your project will opt into React Router v7's config-based routing. If you prefer to keep using Remix's file-based routing, we cover how to enable it in \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e below.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eUpdate your code\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eTo migrate Remix's file system routing and route config to the equivalent setup in React Router v7, you can follow these steps:\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eEnable the Flag\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e v3_routeConfig: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eInstall \\u003ccode\\u003e@remix-run/route-config\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eThis package matches the API of React Router v7's \\u003ccode\\u003e@react-router/dev/routes\\u003c/code\\u003e, making the React Router v7 migration as easy as possible.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003einstall\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e-D\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/route-config\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThis provides the core \\u003ccode\\u003eRouteConfig\\u003c/code\\u003e type as well as a set of helpers for configuring routes in code.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdd an \\u003ccode\\u003eapp/routes.ts\\u003c/code\\u003e file without any configured routes\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etouch\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eapp/routes.ts\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eRouteConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/route-config\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e [] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003esatisfies\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRouteConfig\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThis is a good way to check that your new \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e file is being picked up successfully. Your app should now be rendering a blank page since there aren't any routes defined yet.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eInstall \\u003ccode\\u003e@remix-run/fs-routes\\u003c/code\\u003e and use it in \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003einstall\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e-D\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/fs-routes\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThis package matches the API of React Router v7's \\u003ccode\\u003e@react-router/fs-routes\\u003c/code\\u003e, making the React Router v7 migration as easy as possible.\\u003c/p\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003eIf you've configured \\u003ccode\\u003eignoredRouteFiles\\u003c/code\\u003e to \\u003ccode\\u003e[\\\\\\\"**/*\\\\\\\"]\\u003c/code\\u003e, you should skip this step since you're already opting out of Remix's file system routing.\\u003c/p\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eflatRoutes\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/fs-routes\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eflatRoutes\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eIf you used the \\u003ccode\\u003eroutes\\u003c/code\\u003e config option, add \\u003ccode\\u003e@remix-run/routes-option-adapter\\u003c/code\\u003e and use it in \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix provides a mechanism for defining routes in code and plugging in alternative file system routing conventions, available via the \\u003ccode\\u003eroutes\\u003c/code\\u003e option on the Vite plugin.\\u003c/p\\u003e\\\\n\\u003cp\\u003eTo make migration easier, an adapter package is available that converts Remix's \\u003ccode\\u003eroutes\\u003c/code\\u003e option into React Router's \\u003ccode\\u003eRouteConfig\\u003c/code\\u003e array.\\u003c/p\\u003e\\\\n\\u003cp\\u003eTo get started, first install the adapter:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003einstall\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e-D\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/routes-option-adapter\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThis package matches the API of React Router v7's \\u003ccode\\u003e@react-router/remix-routes-option-adapter\\u003c/code\\u003e, making the React Router v7 migration as easy as possible.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThen, update your \\u003ccode\\u003eroutes.ts\\u003c/code\\u003e file to use the adapter, passing the value of your \\u003ccode\\u003eroutes\\u003c/code\\u003e option to the \\u003ccode\\u003eremixRoutesOptionAdapter\\u003c/code\\u003e function which will return an array of configured routes.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor example, if you were using the \\u003ccode\\u003eroutes\\u003c/code\\u003e option to use an alternative file system routing implementation like \\u003ca href=\\\\\\\"https://github.com/kiliman/remix-flat-routes\\\\\\\"\\u003eremix-flat-routes\\u003c/a\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eRouteConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/route-config\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremixRoutesOptionAdapter\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/routes-option-adapter\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eflatRoutes\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eremix-flat-routes\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremixRoutesOptionAdapter\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eflatRoutes\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eroutes\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e)\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003esatisfies\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRouteConfig\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eOr, if you were using the \\u003ccode\\u003eroutes\\u003c/code\\u003e option to define config-based routes:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eflatRoutes\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/fs-routes\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eRouteConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/route-config\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremixRoutesOptionAdapter\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/routes-option-adapter\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremixRoutesOptionAdapter\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eroute\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ehome/route.tsx\\u003c/span\\u003e\\\\\\\", { index: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eabout\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eabout/route.tsx\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econcerts/layout.tsx\\u003c/span\\u003e\\\\\\\", () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etrending\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econcerts/trending.tsx\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e:city\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econcerts/city.tsx\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e}) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003esatisfies\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRouteConfig\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eIf you're defining config-based routes in this way, you might want to consider migrating to the new route config API since it's more streamlined while still being very similar to the old API. For example, the routes above would look like this:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eRouteConfig\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eroute\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elayout\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eindex\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/route-config\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eindex\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ehome/route.tsx\\u003c/span\\u003e\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eabout\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eabout/route.tsx\\u003c/span\\u003e\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elayout\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econcerts/layout.tsx\\u003c/span\\u003e\\\\\\\", [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etrending\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econcerts/trending.tsx\\u003c/span\\u003e\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e:city\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econcerts/city.tsx\\u003c/span\\u003e\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e ]),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003esatisfies\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRouteConfig\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNote that if you need to mix and match different route config approaches, they can be merged into a single array of routes. The \\u003ccode\\u003eRouteConfig\\u003c/code\\u003e type ensures that everything is still valid.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eflatRoutes\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/fs-routes\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eRouteConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/route-config\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eroute\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/route-config\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremixRoutesOptionAdapter\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/routes-option-adapter\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e...\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eflatRoutes\\u003c/span\\u003e({ rootDirectory: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efs-routes\\u003c/span\\u003e\\\\\\\" })),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e...\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremixRoutesOptionAdapter\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* ... */\\u003c/span\\u003e)),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/hello\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eroutes/hello.tsx\\u003c/span\\u003e\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003esatisfies\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRouteConfig\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"deprecations\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#deprecations\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eDeprecations\\u003c/h2\\u003e\\\\n\\u003ch3 id=\\\\\\\"remix-runeslint-config\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#remix-runeslint-config\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e@remix-run/eslint-config\\u003c/h3\\u003e\\\\n\\u003cp\\u003eThe \\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e package is deprecated and will not be included in React Router v7. We recommend moving towards a streamlined ESLint config such as the ones included in \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/blob/main/templates/remix/.eslintrc.cjs\\\\\\\"\\u003ethe Remix templates\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"json\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#json\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ejson\\u003c/h3\\u003e\\\\n\\u003cp\\u003eThis utility is deprecated and will be removed in React Router v7 in favor of \\u003ca href=\\\\\\\"#v3_singlefetch\\\\\\\"\\u003eSingle Fetch\\u003c/a\\u003e naked object returns.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eIf you were not relying on \\u003ccode\\u003ejson\\u003c/code\\u003e to serialize your data (such as stringifying \\u003ccode\\u003eDate\\u003c/code\\u003e objects), you can safely remove it.\\u003c/li\\u003e\\\\n\\u003cli\\u003eIf you were returning \\u003ccode\\u003eheaders\\u003c/code\\u003e or \\u003ccode\\u003estatus\\u003c/code\\u003e via \\u003ccode\\u003ejson\\u003c/code\\u003e, you can use the new \\u003ca href=\\\\\\\"../utils/data\\\\\\\"\\u003edata util\\u003c/a\\u003e as a drop-in replacement to set those values.\\u003c/li\\u003e\\\\n\\u003cli\\u003eIf you want to serialize your data to JSON, you can use the native \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/Response/json\\\\\\\"\\u003eResponse.json()\\u003c/a\\u003e method.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eView the \\u003ca href=\\\\\\\"#v3_singlefetch\\\\\\\"\\u003eSingle Fetch\\u003c/a\\u003e docs for more information.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"defer\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#defer\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003edefer\\u003c/h3\\u003e\\\\n\\u003cp\\u003eThis utility is deprecated and will be removed in React Router v7 in favor of \\u003ca href=\\\\\\\"#v3_singlefetch\\\\\\\"\\u003eSingle Fetch\\u003c/a\\u003e naked object returns.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eIf you were returning \\u003ccode\\u003eheaders\\u003c/code\\u003e or \\u003ccode\\u003estatus\\u003c/code\\u003e via \\u003ccode\\u003edefer\\u003c/code\\u003e, you can use the new \\u003ca href=\\\\\\\"../utils/data\\\\\\\"\\u003edata util\\u003c/a\\u003e as a drop-in replacement to set those values.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eView the \\u003ca href=\\\\\\\"#v3_singlefetch\\\\\\\"\\u003eSingle Fetch\\u003c/a\\u003e docs for more information.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"serializefrom\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#serializefrom\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSerializeFrom\\u003c/h3\\u003e\\\\n\\u003cp\\u003eThis type is deprecated and will be removed in React Router v7 since \\u003ca href=\\\\\\\"#v3_singlefetch\\\\\\\"\\u003eSingle Fetch\\u003c/a\\u003e no longer serializes data to JSON.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you are relying on \\u003ccode\\u003eSerializeFrom\\u003c/code\\u003e to unwrap your \\u003ccode\\u003eloader\\u003c/code\\u003e/\\u003ccode\\u003eaction\\u003c/code\\u003e data, you can use a custom type like this:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eSerializeFrom\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eT\\u003c/span\\u003e\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eReturnType\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eT\\u003c/span\\u003e\\u003e\\u003e;\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eIn most cases, you should be able to just remove \\u003ccode\\u003eSerializeFrom\\u003c/code\\u003e and use the types returned from \\u003ccode\\u003euseLoaderData\\u003c/code\\u003e/\\u003ccode\\u003euseActionData\\u003c/code\\u003e, or the types of the data in \\u003ccode\\u003eloader\\u003c/code\\u003e/\\u003ccode\\u003eaction\\u003c/code\\u003e functions.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"multipart-form-data-and-file-upload-utilities\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#multipart-form-data-and-file-upload-utilities\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMultipart Form Data and File Upload utilities\\u003c/h3\\u003e\\\\n\\u003cp\\u003eThe following utilities are deprecated and will be removed in React Router v7:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_parseMultipartFormData\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_composeUploadHandlers\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_createFileUploadHandler\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_createMemoryUploadHandler\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eWe recommend using \\u003ca href=\\\\\\\"https://github.com/mjackson/remix-the-web/tree/main/packages/form-data-parser\\\\\\\"\\u003e\\u003ccode\\u003e@mjackson/form-data-parser\\u003c/code\\u003e\\u003c/a\\u003e and \\u003ca href=\\\\\\\"https://github.com/mjackson/remix-the-web/tree/main/packages/file-storage\\\\\\\"\\u003e\\u003ccode\\u003e@mjackson/file-storage\\u003c/code\\u003e\\u003c/a\\u003e to handle multipart form data and file uploads.\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou can also check out the \\u003ca href=\\\\\\\"https://reactrouter.com/how-to/file-uploads\\\\\\\"\\u003eReact Router \\\\\\\"File Uploads\\\\\\\" doc\\u003c/a\\u003e or \\u003ca href=\\\\\\\"https://programmingarehard.com/2024/09/06/remix-file-uploads-updated.html/\\\\\\\"\\u003e\\\\\\\"File uploads with Remix\\\\\\\"\\u003c/a\\u003e blog post for guides on using these libraries.\\u003c/p\\u003e\\\",\\\"docs/start/future-flags\\\",\\\"headings\\\",[960,965,968,971,974,977,980,983,986,989,992,996,997,998,1001],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Update to latest v2.x\\\",\\\"update-to-latest-v2x\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"Remove \\u003ccode\\u003einstallGlobals\\u003c/code\\u003e\\\",\\\"remove-installglobals\\\",{\\\"_961\\\":962,\\\"_955\\\":969,\\\"_24\\\":970},\\\"Adopt the Vite Plugin\\\",\\\"adopt-the-vite-plugin\\\",{\\\"_961\\\":962,\\\"_955\\\":972,\\\"_24\\\":973},\\\"v3_fetcherPersist\\\",\\\"v3_fetcherpersist\\\",{\\\"_961\\\":962,\\\"_955\\\":975,\\\"_24\\\":976},\\\"v3_relativeSplatPath\\\",\\\"v3_relativesplatpath\\\",{\\\"_961\\\":962,\\\"_955\\\":978,\\\"_24\\\":979},\\\"v3_throwAbortReason\\\",\\\"v3_throwabortreason\\\",{\\\"_961\\\":962,\\\"_955\\\":981,\\\"_24\\\":982},\\\"v3_lazyRouteDiscovery\\\",\\\"v3_lazyroutediscovery\\\",{\\\"_961\\\":962,\\\"_955\\\":984,\\\"_24\\\":985},\\\"v3_singleFetch\\\",\\\"v3_singlefetch\\\",{\\\"_961\\\":962,\\\"_955\\\":987,\\\"_24\\\":988},\\\"v3_routeConfig\\\",\\\"v3_routeconfig\\\",{\\\"_961\\\":962,\\\"_955\\\":990,\\\"_24\\\":991},\\\"Deprecations\\\",\\\"deprecations\\\",{\\\"_961\\\":993,\\\"_955\\\":994,\\\"_24\\\":995},\\\"h3\\\",\\\"@remix-run/eslint-config\\\",\\\"remix-runeslint-config\\\",{\\\"_961\\\":993,\\\"_955\\\":565,\\\"_24\\\":565},{\\\"_961\\\":993,\\\"_955\\\":553,\\\"_24\\\":553},{\\\"_961\\\":993,\\\"_955\\\":999,\\\"_24\\\":1000},\\\"SerializeFrom\\\",\\\"serializefrom\\\",{\\\"_961\\\":993,\\\"_955\\\":1002,\\\"_24\\\":1003},\\\"Multipart Form Data and File Upload utilities\\\",\\\"multipart-form-data-and-file-upload-utilities\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#adopt-the-vite-plugin\\\\\\": 3, "#defer\\\\\\": 1, "#deprecations\\\\\\": 1, "#future-flags-and-deprecations\\\\\\": 1, "#json\\\\\\": 1, "#multipart-form-data-and-file-upload-utilities\\\\\\": 1, "#remix-runeslint-config\\\\\\": 1, "#remove-installglobals\\\\\\": 1, "#serializefrom\\\\\\": 1, "#update-to-latest-v2x\\\\\\": 1, "#v3_fetcherpersist\\\\\\": 1, "#v3_lazyroutediscovery\\\\\\": 1, "#v3_relativesplatpath\\\\\\": 1, "#v3_routeconfig\\\\\\": 1, "#v3_singlefetch\\\\\\": 6, "#v3_throwabortreason\\\\\\": 1, "$\\": 1, "$rc": 3, "**/*": 2, "**/*\\\\\\": 1, "*/": 6, "*/\\\\n\\u003c/span\\u003e\\u003cspan": 3, "*/\\u003c/span\\u003e": 1, "*\\\\\\": 1, "+//": 1, "+export": 1, "+import": 2, "--base03": 2, "--base05": 40, "--base08": 56, "--base09": 10, "--base0a": 22, "--base0b": 88, "--base0c": 1, "--base0d": 50, "--base0e": 88, "-1\\\\\\": 16, "-5": 2, "-const": 1, "-d": 5, "-import": 4, "-installglobals": 1, "/$": 1, "/*": 9, "//": 16, "///": 4, "//developer": 1, "//developers": 1, "//github": 7, "//mdxjs": 2, "//programmingarehard": 1, "//reactrouter": 1, "//remix": 1, "//v2": 2, "//vitejs": 2, "/\u003e": 7, "/\\\\\\": 2, "/\\u003e": 1, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "/\\u003e\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "/\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eif": 1, "/\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/body\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "/build/server/index": 2, "/components/link#discover\\\\\\": 1, "/defer": 1, "/div\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "/file-conventions/vite-config\\\\\\": 1, "/guides/api-development-strategy\\\\\\": 1, "/guides/dependency-optimization\\\\\\": 1, "/guides/lazy-route-discovery\\\\\\": 1, "/guides/single-fetch\\\\\\": 1, "/guides/vite#add-mdx-plugin\\\\\\": 1, "/guides/vite#enable-tailwind-via-postcss\\\\\\": 1, "/guides/vite#migrating-a-custom-server\\\\\\": 1, "/guides/vite\\\\\\": 1, "/h2\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "/head\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "/hello": 1, "/html\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "/link\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 6, "/nav\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "/projects": 1, "/projects\\\\\\": 1, "/relative": 1, "/relative\\\\\\": 1, "/styling/bundling\\\\\\": 1, "/styling/css\\\\\\": 1, "/team": 1, "/team\\\\\\": 1, "/utils/data\\\\\\": 2, "0===e": 1, "10": 43, "100": 1, "1000": 3, "1001": 1, "1002": 1, "1003": 1, "1004": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 9, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 9, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 9, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 8, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 8, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 7, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 6, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 4, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 4, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 3, "1\\\\\\": 31, "20": 2, "20+": 1, "20+\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eit": 1, "200": 1, "201": 1, "202": 1, "2023-03-01": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 2, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 2, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "28\\\\\\": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "29\\\\\\": 1, "2\\\\\\": 30, "30": 1, "300": 1, "3000": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30\\\\\\": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "31\\\\\\": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "32\\\\\\": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "33\\\\\\": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 29, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 27, "50": 1, "500": 1, "5000": 4, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 3, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 3, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 27, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 2, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 4, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 22, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 20, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 15, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 10, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "976": 1, "977": 1, "978": 1, "979": 1, "98": 1, "980": 1, "981": 1, "982": 1, "983": 1, "984": 1, "985": 1, "986": 1, "987": 1, "988": 1, "989": 1, "99": 1, "990": 1, "991": 1, "992": 1, "993": 5, "994": 1, "995": 1, "996": 1, "997": 1, "998": 1, "999": 1, "9\\\\\\": 11, "\u003c/body\u003e": 1, "\u003c/div\u003e": 1, "\u003c/head\u003e": 1, "\u003c/html\u003e": 1, "\u003c/nav\u003e": 1, "\u003cbody\u003e": 1, "\u003cdiv\u003e": 1, "\u003ch2\u003edashboard\u003c/h2\u003e": 1, "\u003chead\u003e": 1, "\u003chtml\u003e": 1, "\u003clink": 9, "\u003clink\u003e": 1, "\u003clivereload": 1, "\u003clivereload/\u003e": 1, "\u003cnav\u003e": 1, "\u003coutlet": 1, "\u003creference": 2, "\u003cremixserver": 1, "\u003cscripts": 2, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 10, "=\\u003e": 5, "\u003edashboard": 2, "\u003eprojects\u003c/link\u003e": 2, "\u003eteam\u003c/link\u003e": 2, "@2": 1, "@2\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "@mjackson/file-storage": 1, "@mjackson/form-data-parser": 1, "@react-router/dev/routes": 1, "@react-router/fs-routes": 1, "@react-router/remix-routes-option-adapter": 1, "@remix-run": 1, "@remix-run/": 2, "@remix-run/css-bundle": 5, "@remix-run/css-bundle\\\\\\": 1, "@remix-run/dev": 6, "@remix-run/dev\\\\\\": 2, "@remix-run/eslint-config": 2, "@remix-run/eslint-config\\": 1, "@remix-run/fs-routes": 5, "@remix-run/node": 10, "@remix-run/node\\": 1, "@remix-run/node\\\\\\": 6, "@remix-run/route-config": 8, "@remix-run/routes-option-adapter": 5, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 508, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 4, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003efix": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003emigrate": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eremove": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eupdate": 5, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eif": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ein": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enote": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eor": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉": 9, "\\\\n\\u003c/span\\u003e\\u003cspan": 173, "\\n": 1, "\\u0026#x3c": 23, "\\u003c/a\\u003e": 2, "\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉": 1, "\\u003c/code\\u003e": 6, "\\u003c/code\\u003e/\\u003ccode\\u003edefer": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eview": 2, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eif": 2, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003cdiv": 1, "\\u003c/p\\u003e\\\\n\\u003c/docs-warning\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ebackground\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ewith": 1, "\\u003c/p\\u003e\\\\n\\u003c/docs-warning\\u003e\\\\n\\u003cp\\u003econfig-based": 1, "\\u003c/p\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003eif": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 15, "\\u003c/p\\u003e\\\\n\\u003ch2": 5, "\\u003c/p\\u003e\\\\n\\u003ch3": 4, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003emigrate": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eupdate": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efor": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eif": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003enote": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethe": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethen": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eto": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewe": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewhen": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewhile": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eyou": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉": 15, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_parsemultipartformdata\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_composeuploadhandlers\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_createfileuploadhandler\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eunstable_creatememoryuploadhandler\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003ewe": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eif": 2, "\\u003c/span\\u003e": 3, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 26, "\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 2, "\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003emany": 1, "\\u003ca": 36, "\\u003ccode\\u003e": 4, "\\u003ccode\\u003e*\\u003c/code\\u003e": 1, "\\u003ccode\\u003e2023-03-01\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@react-router/dev/routes\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@react-router/fs-routes\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@react-router/remix-routes-option-adapter\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003evite": 1, "\\u003ccode\\u003e@remix-run/eslint-config\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/fs-routes\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/route-config\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003ccode\\u003e@remix-run/routes-option-adapter\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run\\u003c/code\\u003e": 1, "\\u003ccode\\u003e\\u0026#x3c": 5, "\\u003ccode\\u003eabort_delay\\u003c/code\\u003e": 1, "\\u003ccode\\u003eapp/routes": 1, "\\u003ccode\\u003eapp\\u003c/code\\u003e": 1, "\\u003ccode\\u003ebuild\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecssbundlehref\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecssbundlehref\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003ccode\\u003edashboard": 1, "\\u003ccode\\u003edashboard/*\\u003c/code\\u003e": 1, "\\u003ccode\\u003edata\\u003c/code\\u003e": 1, "\\u003ccode\\u003edate\\u003c/code\\u003e": 1, "\\u003ccode\\u003edefer\\u003c/code\\u003e": 1, "\\u003ccode\\u003edev\\u003c/code\\u003e": 1, "\\u003ccode\\u003eentry": 1, "\\u003ccode\\u003efetch\\u003c/code\\u003e": 2, "\\u003ccode\\u003ehandleerror\\u003c/code\\u003e": 1, "\\u003ccode\\u003eheaders\\u003c/code\\u003e": 3, "\\u003ccode\\u003eignoredroutefiles\\u003c/code\\u003e": 1, "\\u003ccode\\u003einstallglobals": 1, "\\u003ccode\\u003einstallglobals\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003einstallglobals\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ebackground\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003epreviously": 1, "\\u003ccode\\u003einstallglobals\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003ccode\\u003ejson": 1, "\\u003ccode\\u003ejson\\u003c/code\\u003e": 2, "\\u003ccode\\u003ejson\\u003c/code\\u003e/\\u003ccode\\u003edefer\\u003c/code\\u003e": 1, "\\u003ccode\\u003elinks\\u003c/code\\u003e": 1, "\\u003ccode\\u003elinks\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003ccode\\u003elinks\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eif": 1, "\\u003ccode\\u003eloader\\u003c/code\\u003e/\\u003ccode\\u003eaction\\u003c/code\\u003e": 3, "\\u003ccode\\u003emodule\\u003c/code\\u003e": 1, "\\u003ccode\\u003emoduleresolution\\u003c/code\\u003e": 1, "\\u003ccode\\u003enew": 1, "\\u003ccode\\u003eremix": 4, "\\u003ccode\\u003eremixroutesoptionadapter\\u003c/code\\u003e": 1, "\\u003ccode\\u003erequest": 1, "\\u003ccode\\u003eroute": 1, "\\u003ccode\\u003erouteconfig\\u003c/code\\u003e": 3, "\\u003ccode\\u003eroutes": 8, "\\u003ccode\\u003eroutes\\u003c/code\\u003e": 6, "\\u003ccode\\u003eserializefrom\\u003c/code\\u003e": 2, "\\u003ccode\\u003eskiplibcheck\\u003c/code\\u003e": 1, "\\u003ccode\\u003estart\\u003c/code\\u003e": 1, "\\u003ccode\\u003estatus\\u003c/code\\u003e": 2, "\\u003ccode\\u003estreamtimeout\\u003c/code\\u003e": 1, "\\u003ccode\\u003etsconfig": 3, "\\u003ccode\\u003etypes\\u003c/code\\u003e": 1, "\\u003ccode\\u003eundefined\\u003c/code\\u003e": 1, "\\u003ccode\\u003eunstable_optimizedeps\\u003c/code\\u003e": 2, "\\u003ccode\\u003eusefetchers\\u003c/code\\u003e": 1, "\\u003ccode\\u003euseloaderdata\\u003c/code\\u003e/\\u003ccode\\u003euseactiondata\\u003c/code\\u003e": 1, "\\u003ccode\\u003ev3_routeconfig\\u003c/code\\u003e": 1, "\\u003ccode\\u003evite": 1, "\\u003ccode\\u003evite-tsconfig-paths\\u003c/code\\u003e": 1, "\\u003ccode\\u003evite-tsconfig-paths\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003ccode\\u003e~\\u003c/code\\u003e": 1, "\\u003ch1": 1, "\\u003cnobr\\u003e\\u003ca": 1, "\\u003cspan": 228, "\\u003cstrong\\u003eadd": 4, "\\u003cstrong\\u003eadjust": 1, "\\u003cstrong\\u003econfigure": 1, "\\u003cstrong\\u003eenable": 6, "\\u003cstrong\\u003eif": 1, "\\u003cstrong\\u003einstall": 4, "\\u003cstrong\\u003eremove": 4, "\\u003cstrong\\u003ereplace": 1, "\\u003cstrong\\u003esplit": 1, "\\u003cstrong\\u003euninstall": 1, "\\u003cstrong\\u003eupdate": 5, "\\u003cstrong\\u003eupdate/remove": 1, "\\u003e": 207, "\\u003e**/*": 1, "\\u003e+\\u003cspan": 16, "\\u003e-\\u003cspan": 23, "\\u003e-d\\u003c/span\\u003e": 5, "\\u003e/*": 1, "\\u003e//": 7, "\\u003e/\\u003c/span\\u003e\\\\\\": 1, "\\u003e/hello\\u003c/span\\u003e\\\\\\": 1, "\\u003e3000\\u003c/span\\u003e": 1, "\\u003e=\\u003c/span\\u003e": 1, "\\u003e=\\u003e\\u003c/span\\u003e": 3, "\\u003e=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e@remix-run/": 1, "\\u003e@remix-run/css-bundle\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉": 1, "\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\": 3, "\\u003e@remix-run/fs-routes\\u003c/span\\u003e\\\\\\": 3, "\\u003e@remix-run/fs-routes\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 2, "\\u003e@remix-run/route-config\\u003c/span\\u003e\\\\\\": 6, "\\u003e@remix-run/route-config\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003e@remix-run/routes-option-adapter\\u003c/span\\u003e\\\\\\": 3, "\\u003e@remix-run/routes-option-adapter\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003e\\\\\\": 2, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 26, "\\u003e\\u003c/code\\u003e": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e@remix-run/eslint-config\\u003c/h3\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eadopt": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003edefer\\u003c/h3\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003edeprecations\\u003c/h2\\u003e\\\\n\\u003ch3": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003efuture": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ejson\\u003c/h3\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003emultipart": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eremove": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserializefrom\\u003c/h3\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eupdate": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev3_fetcherpersist\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ebackground\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev3_lazyroutediscovery\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ebackground\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ewith": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev3_relativesplatpath\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ebackground\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003echanges": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev3_routeconfig\\u003c/h2\\u003e\\\\n\\u003cdocs-warning\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev3_singlefetch\\u003c/h2\\u003e\\\\n\\u003cdocs-warning\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ev3_throwabortreason\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ebackground\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ewhen": 1, "\\u003e\\u003ca": 16, "\\u003e\\u003ccode\\u003e@mjackson/file-storage\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003e@mjackson/form-data-parser\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003e@remix-run/css-bundle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/nobr\\u003e": 1, "\\u003e\\u003ccode\\u003e\\u0026#x3c": 1, "\\u003e\\u003ccode\\u003e\\u003cspan": 40, "\\u003e\\u003cpre": 40, "\\u003e\\u003cspan": 65, "\\u003eabout/route": 2, "\\u003eabout\\u003c/span\\u003e\\\\\\": 2, "\\u003eapp/routes": 1, "\\u003eas\\u003c/span\\u003e": 3, "\\u003eawait\\u003c/span\\u003e": 2, "\\u003eblog": 1, "\\u003ebuild\\u003c/span\\u003e\\\\\\": 1, "\\u003ebundler\\u003c/span\\u003e\\\\\\": 1, "\\u003ecompatibility": 1, "\\u003ecompileroptions\\u003c/span\\u003e\\\\\\": 1, "\\u003econcerts/city": 2, "\\u003econcerts/layout": 2, "\\u003econcerts/trending": 2, "\\u003econst": 1, "\\u003edashboard": 2, "\\u003edata": 2, "\\u003edeclare\\u003c/span\\u003e": 1, "\\u003edefault\\u003c/span\\u003e": 12, "\\u003edefineconfig\\u003c/span\\u003e": 9, "\\u003edefineroutes\\u003c/span\\u003e": 4, "\\u003edev\\u003c/span\\u003e\\\\\\": 1, "\\u003edevelopment": 1, "\\u003edocs\\u003c/a\\u003e": 1, "\\u003eesnext\\u003c/span\\u003e\\\\\\": 1, "\\u003eexport": 7, "\\u003eexport\\u003c/span\\u003e": 12, "\\u003eflatroutes\\u003c/span\\u003e": 7, "\\u003efrom\\u003c/span\\u003e": 21, "\\u003efs-routes\\u003c/span\\u003e\\\\\\": 1, "\\u003efull": 3, "\\u003efunction": 2, "\\u003efuture\\u003c/span\\u003e": 1, "\\u003ehome/route": 2, "\\u003eimport": 8, "\\u003eimport\\u003c/span\\u003e": 21, "\\u003eindex\\u003c/span\\u003e": 2, "\\u003einstall\\u003c/span\\u003e": 6, "\\u003einstallglobals": 1, "\\u003einterface\\u003c/span\\u003e": 1, "\\u003elayout\\u003c/span\\u003e": 2, "\\u003emdx": 1, "\\u003emdx\\u003c/a\\u003e": 1, "\\u003emodule\\u003c/span\\u003e": 1, "\\u003emodule\\u003c/span\\u003e\\\\\\": 1, "\\u003emoduleresolution\\u003c/span\\u003e\\\\\\": 1, "\\u003enpm\\u003c/span\\u003e": 7, "\\u003eoptimizing": 1, "\\u003eprojects\\u0026#x3c": 2, "\\u003ereact": 1, "\\u003ereferencing": 1, "\\u003eremix": 3, "\\u003eremix-flat-routes\\u003c/a\\u003e": 1, "\\u003eremix-flat-routes\\u003c/span\\u003e\\\\\\": 1, "\\u003eremix-serve": 1, "\\u003eremix\\u003c/span\\u003e": 14, "\\u003eremixroutesoptionadapter\\u003c/span\\u003e": 6, "\\u003eresponse": 1, "\\u003ereturn\\u003c/span\\u003e": 1, "\\u003ereturntype\\u003c/span\\u003e\\u0026#x3c": 1, "\\u003erm\\u003c/span\\u003e": 1, "\\u003eroute\\u003c/span\\u003e": 12, "\\u003erouteconfig\\u003c/span\\u003e": 10, "\\u003eroutes": 1, "\\u003eroutes/hello": 1, "\\u003eroutes\\u003c/span\\u003e\\\\\\": 1, "\\u003esatisfies\\u003c/span\\u003e": 5, "\\u003escripts\\u003c/span\\u003e\\\\\\": 1, "\\u003eserializefrom\\u003c/span\\u003e\\u0026#x3c": 1, "\\u003esingle": 5, "\\u003eskiplibcheck\\u003c/span\\u003e\\\\\\": 1, "\\u003estart\\u003c/span\\u003e\\\\\\": 1, "\\u003esupported": 1, "\\u003et\\u003c/span\\u003e\\u003e": 1, "\\u003et\\u003c/span\\u003e\\u003e\\u003e": 1, "\\u003eteam\\u0026#x3c": 2, "\\u003ethe": 1, "\\u003etouch\\u003c/span\\u003e": 1, "\\u003etrending\\u003c/span\\u003e\\\\\\": 2, "\\u003etrue\\u003c/span\\u003e": 10, "\\u003etsconfigpaths\\u003c/span\\u003e": 4, "\\u003etype\\u003c/span\\u003e": 6, "\\u003etypeof\\u003c/span\\u003e": 1, "\\u003etypes\\u003c/span\\u003e\\\\\\": 1, "\\u003euninstall\\u003c/span\\u003e": 1, "\\u003euseloaderdata\\u003c/span\\u003e\\u0026#x3c": 1, "\\u003ev3_singlefetch\\u003c/span\\u003e\\u003cspan": 1, "\\u003eview": 3, "\\u003evite": 3, "\\u003evite-tsconfig-paths\\u003c/a\\u003e": 1, "\\u003evite-tsconfig-paths\\u003c/span\\u003e\\\\\\": 2, "\\u003evite-tsconfig-paths\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉": 1, "\\u003evite/client\\u003c/span\\u003e\\\\\\": 1, "\\u003evite\\u003c/a\\u003e": 1, "\\u003evite\\u003c/span\\u003e\\\\\\": 3, "\\u003evite\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eupdate": 1, "\\u003eviteplugin\\u003c/span\\u003e": 3, "\\u003e└──": 1, "_-b4drxahv": 1, "_1005\\": 1, "_1006\\": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 28, "_22\\": 152, "_24\\": 167, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 16, "_958\\": 1, "_961\\": 15, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_index": 2, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "able": 6, "abort": 8, "abort_delay": 7, "abortdelay=": 2, "aborted": 4, "about": 5, "about/route": 2, "above": 2, "accessibility\\": 1, "achieved": 2, "action\\": 1, "actiondata\\": 1, "adapter": 9, "adapters": 3, "add": 6, "added": 2, "additional": 2, "adjust": 3, "adopt": 6, "adopt-the-vite-plugin\\": 1, "adopt-the-vite-plugin\\\\\\": 1, "adopted": 2, "adopting": 2, "advanced": 2, "advantage": 2, "affect": 2, "after": 6, "alias": 2, "aliases": 5, "aliases\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003evite": 1, "all": 7, "already": 4, "also": 2, "alternative": 4, "always": 2, "among": 2, "an": 17, "and": 80, "any": 20, "api": 20, "api@remix-run/dev": 2, "api\\": 1, "apis": 2, "app": 18, "app/root": 2, "app/routes": 10, "app\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "application": 4, "apply": 2, "approach": 1, "approaches": 2, "are": 20, "aren": 2, "aria-hidden=\\\\\\": 16, "around": 2, "array": 6, "as": 58, "as-is": 2, "asked": 1, "asset": 3, "assumes": 2, "async": 6, "at": 5, "attaches": 2, "attrs\\": 1, "automatically": 8, "available": 8, "await": 8, "await\\": 1, "away": 2, "b=document": 1, "backend": 3, "background": 7, "based": 2, "basename": 1, "be": 37, "been": 4, "before": 9, "behavior": 2, "being": 4, "below": 6, "beneath": 2, "blank": 2, "blog": 3, "body\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "boundary": 2, "box": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 3, "build": 3, "build\\u003c/span\\u003e\\\\\\": 1, "built": 1, "built-in": 6, "bundled": 2, "bundler": 1, "bundles": 2, "bundles\\": 1, "bundling": 4, "bundling\\": 1, "but": 2, "by": 10, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "cache-control": 1, "cache-control\\\\\\": 1, "caching": 2, "call": 2, "calling": 2, "can": 27, "cases": 4, "catch": 1, "certain": 2, "change": 2, "changelog": 3, "changelog\\": 1, "changelog\\u003c/a\\u003e": 1, "changes": 9, "check": 6, "child": 2, "children\\": 1, "city": 2, "city\\u003c/span\\u003e\\\\\\": 2, "cjs\\\\\\": 1, "class=\\\\\\": 320, "classic": 4, "cli": 5, "cli\\": 1, "client": 14, "client-q2ogymm2": 1, "client-side": 2, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "closed": 2, "cloudflare": 5, "cloudflare/deno": 1, "cloudflare/deno\\\\n\\u003c/span\\u003e\\u003cspan": 1, "code": 27, "code\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eif": 1, "code\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eit": 1, "code\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eto": 1, "code\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eyou": 3, "code\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉": 1, "codeblock-line\\\\\\": 304, "color": 357, "com/2024/09/06/remix-file-uploads-updated": 1, "com/aleclarson/vite-tsconfig-paths\\\\\\": 1, "com/how-to/file-uploads\\\\\\": 1, "com/kiliman/remix-flat-routes\\\\\\": 1, "com/mjackson/remix-the-web/tree/main/packages/file-storage\\\\\\": 1, "com/mjackson/remix-the-web/tree/main/packages/form-data-parser\\\\\\": 1, "com/packages/rollup\\\\\\": 1, "com/remix-run/remix/blob/main/templates/remix/": 1, "com/remix-run/remix/blob/v2/changelog": 1, "com/remix-run/remix/discussions/7698\\\\\\": 1, "com/workers/configuration/compatibility-dates\\\\\\": 1, "com\\\\\\": 1, "commit": 2, "community": 3, "community\\": 1, "compatibility": 1, "compiler": 7, "compiler\\\\\\": 1, "compileroptions": 1, "component": 4, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concerts/city": 2, "concerts/layout": 2, "concerts/trending": 2, "concurrency": 3, "config": 44, "config-based": 7, "config\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "configuration": 2, "configuration\\": 1, "configure": 2, "configured": 8, "configuring": 2, "consider": 2, "console": 1, "const": 8, "constraints": 2, "constraints\\": 1, "contents": 1, "contents\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "context=": 2, "continue": 4, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 4, "conventions\\": 1, "converts": 2, "cookies\\": 1, "core": 2, "correctly": 2, "corresponding": 2, "cover": 4, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "critical": 2, "css": 39, "css\\": 1, "css\\\\\\": 1, "css\\u003c/span\\u003e\\\\\\": 1, "cssbundlehref": 7, "cssbundlehref\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "custom": 10, "customer": 2, "d=c": 2, "dashboard": 10, "dashboard/*": 3, "dashboard/*\\\\\\": 2, "dashboard/layout": 2, "dashboard/route": 6, "dashboard\\\\\\": 1, "data": 50, "data-code-block=\\\\\\": 40, "data-filename=\\\\\\": 42, "data-highlight=\\\\\\": 25, "data-lang=\\\\\\": 80, "data-line-number=\\\\\\": 295, "data-line-numbers=\\\\\\": 80, "data-nonumber=\\\\\\": 18, "data=": 1, "data\\": 2, "date": 1, "declarations": 2, "declare": 1, "default": 20, "defer": 8, "defer\\": 1, "defer\\\\\\": 1, "deferred": 1, "define": 2, "defineconfig": 13, "defined": 2, "defineroutes": 8, "defining": 6, "delay": 1, "delay\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eif": 1, "delete": 2, "deno": 2, "dependencies": 1, "dependencies\\u003c/a\\u003e": 1, "dependency": 3, "depending": 2, "deployment": 4, "deployment\\": 2, "deprecated": 10, "deprecation": 2, "deprecations": 2, "deprecations\\": 2, "deprecations\\\\\\": 1, "deprecations\\u003c/h1\\u003e\\\\n\\u003cp\\u003ethis": 1, "description\\": 1, "designed": 2, "details": 2, "dev": 10, "dev/guide/assets": 1, "dev\\\\\\": 1, "dev\\u003c/span\\u003e\\\\\\": 1, "development": 6, "did": 2, "diff\\\\\\": 22, "different": 2, "differentiate": 2, "differently": 2, "directly": 2, "directory": 4, "disable": 2, "disabled": 2, "disabling": 3, "discordreact": 1, "discover\u003e": 1, "discover\\u003e\\u003c/code\\u003e\\u003c/a\\u003e": 1, "discovery": 4, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "div\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "do": 1, "doc": 1, "doc\\": 1, "doc\\u003c/a\\u003e": 1, "docs": 7, "docs/start/future-flags": 1, "docs/start/future-flags\\": 1, "docs\\u003c/a\\u003e": 2, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsfuture": 1, "document": 5, "does": 2, "doing": 6, "done": 1, "down": 2, "drop-in": 4, "during": 2, "e--": 1, "e=0": 1, "each": 2, "eager": 2, "easier": 2, "easily": 2, "easy": 6, "effect": 2, "elements": 2, "eliminating": 2, "else": 2, "empty": 2, "enable": 8, "enabled": 4, "enhancement": 2, "enhancement\\": 1, "enough": 2, "enqueue": 1, "ensure": 2, "ensures": 3, "ensures\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "entry": 9, "env": 10, "environment": 5, "equivalent": 4, "error": 16, "errorboundary": 2, "errorboundary\\": 1, "errors": 2, "errors\\": 1, "eslint": 2, "eslintrc": 1, "esnext": 1, "etc": 6, "even-numbered": 2, "everything": 5, "example": 6, "examples": 1, "exceptions": 2, "execution": 2, "execution\\": 1, "exist": 2, "explanation": 2, "explanation\\": 1, "explicit": 2, "export": 26, "extensible": 2, "extra": 2, "extract": 5, "extract\\": 1, "extract\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eif": 1, "f=a": 1, "false": 3, "false\\\\\\": 18, "faqs": 2, "faqs\\": 1, "favor": 6, "feature": 6, "features": 5, "fetch": 18, "fetch\\": 1, "fetch\\\\\\": 1, "fetch\\u003c/a\\u003e": 5, "fetcher": 4, "fetcher\\": 1, "fetches": 2, "fetchlazystuff": 2, "fetchtasks": 6, "field": 2, "file": 40, "file-based": 2, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "find": 2, "fine-grained": 2, "finishes": 2, "first": 3, "firstchild": 2, "fix": 1, "flag": 26, "flag\\u003c/a\\u003e": 1, "flag\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 5, "flags": 15, "flags\\": 1, "flagsgetting": 1, "flatroutes": 7, "flow": 2, "flow\\": 1, "flush": 2, "follow": 2, "following": 8, "for": 54, "form": 18, "form\\": 1, "found": 5, "frequently": 1, "from": 59, "frontend": 2, "frontend\\": 1, "fs-routes": 1, "full": 5, "fullstack": 3, "function": 18, "function\\u003c/a\\u003e": 1, "functions": 6, "future": 30, "future-flags-and-deprecations\\\\\\": 1, "get": 6, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "good": 2, "gotchas": 2, "gotchas\\": 1, "guide": 8, "guide\\": 1, "guide\\u003c/a\\u003e": 3, "guides": 2, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "h2\\u003edashboard\\u0026#x3c": 1, "h3\\": 1, "had": 2, "handle": 8, "handle\\": 1, "handlebrowserrequest": 2, "handleerror": 1, "handling": 4, "handling\\": 2, "has": 6, "hascontent\\": 1, "have": 10, "head\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "header": 1, "header\\\\n\\u003c/span\\u003e\\u003cspan": 1, "headers": 17, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 3, "helped": 2, "helpers": 2, "here": 1, "highly": 2, "history": 4, "home/route": 4, "home\u003c/link\u003e": 2, "home\\u0026#x3c": 2, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 3, "href": 4, "href=\\\\\\": 53, "html": 1, "html#explicit-url-imports\\\\\\": 1, "html/\\\\\\": 1, "html\\": 1, "html\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "https": 18, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 16, "icon-link\\\\\\": 16, "id=\\\\\\": 16, "idle": 2, "if": 36, "ignoredroutefiles": 3, "implementation": 2, "import": 36, "import\\\\\\": 1, "imports": 12, "imports\\": 2, "in": 81, "inc": 1, "include": 2, "included": 4, "index": 9, "information": 12, "initial": 3, "insertbefore": 1, "inside": 2, "install": 14, "installed": 2, "installglobals": 3, "installglobalsadopt": 2, "instead": 8, "integrating": 1, "interactions": 1, "interface": 1, "into": 14, "introduced": 2, "introduction": 1, "is": 39, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 25, "it\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "iterative": 1, "its": 8, "javascript": 4, "javascript\\": 1, "javascript\\\\\\": 2, "js": 9, "js\\": 1, "js\\u003c/code\\u003e": 1, "js\\u003c/span\\u003e\\\\\\": 1, "json": 26, "json/defer": 1, "json\\": 1, "json\\\\\\": 9, "json\\u003c/code\\u003e": 2, "json\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eupdate": 1, "just": 4, "keep": 6, "key": 4, "know": 1, "later": 2, "latest": 13, "layout": 4, "lazy": 3, "lazystuff": 6, "learning": 1, "let": 11, "leveraged": 2, "libraries": 2, "licensed": 1, "lifecycle": 2, "like": 12, "likely": 4, "link": 11, "link\\": 1, "link\\u003e\\u003c/code\\u003e": 1, "linking": 4, "links": 18, "links\\": 2, "links\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eupdate": 1, "linksfunction": 4, "livereload": 5, "livereload/\\u003e\\u003c/code\\u003e": 1, "livereload\\": 1, "ll": 4, "load": 2, "loader": 10, "loader/action": 3, "loader\\": 1, "loaderdata\\": 1, "loaderfunctionargs": 6, "loading": 5, "loading\\": 1, "local": 3, "localhost\\": 1, "logic": 2, "longer": 10, "look": 2, "lts": 2, "made": 2, "major": 6, "make": 8, "makes": 1, "making": 6, "management": 4, "management\\": 2, "manifest": 4, "manual": 3, "many": 1, "match": 2, "matches": 6, "matching": 6, "math": 1, "max-age=604800": 1, "max-age=604800\\\\\\": 1, "may": 8, "md#futurev3_relativesplatpath\\\\\\": 1, "md\\": 152, "mdx": 7, "mdx\\": 1, "mechanism": 2, "menu\\": 1, "merged": 2, "merging": 2, "message": 2, "meta": 4, "meta\\": 2, "method": 2, "might": 2, "migrate": 6, "migrating": 8, "migration": 16, "miniflare/cloudflare": 2, "minimal": 2, "minimize": 2, "minimum": 2, "minor": 2, "mitedit": 1, "mix": 2, "mode": 3, "mode\\": 1, "module": 9, "module\\": 1, "moduleaction": 2, "moduleresolution": 2, "modules": 8, "modules\\": 3, "more": 18, "most": 5, "mostly": 2, "moving": 4, "mozilla": 1, "multi-segment": 2, "multipart": 4, "multipart-form-data-and-file-upload-utilities\\": 1, "multipart-form-data-and-file-upload-utilities\\\\\\": 1, "naked": 4, "naming": 2, "naming\\": 1, "native": 2, "nav\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "navigates": 4, "navigations": 2, "navlink": 2, "navlink\\": 1, "need": 15, "network": 3, "new": 27, "new\\": 1, "next": 8, "nextsibling": 2, "no": 6, "node": 8, "nodetype": 1, "noindex\\": 1, "not": 13, "note": 4, "noted": 2, "now": 8, "npm": 7, "null": 1, "number": 5, "object": 4, "objects": 5, "objects\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003esingle": 1, "of": 63, "official": 2, "old": 2, "on": 25, "once": 3, "one": 1, "onerror": 2, "ones": 2, "only": 6, "onshellerror": 2, "onshellready": 2, "open": 1, "opt": 4, "optimization": 2, "optimization\\": 1, "optimizing": 1, "opting": 2, "option": 12, "optional": 4, "options": 1, "options\\u003c/a\\u003e": 1, "or": 31, "or\\\\n\\u003c/span\\u003e\\u003cspan": 1, "order": 2, "order\\": 1, "org/en-us/docs/web/api/response/json\\\\\\": 1, "other": 7, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 7, "outlet": 5, "outlet\\": 1, "over": 4, "own": 2, "owner": 2, "package": 14, "packages": 4, "page": 4, "pageupdate": 2, "param": 2, "param\\": 1, "parameter": 2, "parentnode": 2, "parse": 1, "passed": 2, "passing": 2, "path": 12, "paths": 2, "pending": 5, "performance": 4, "performance\\": 1, "performant": 2, "persist": 2, "picked": 2, "pipe": 2, "pipethrough": 1, "place": 2, "please": 2, "plugging": 2, "plugin": 18, "plugin\\": 1, "plugin\\u003c/a\\u003e": 3, "plugin\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ebackground\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eremix": 1, "plugins": 14, "pluginv3_fetcherpersistv3_relativesplatpathv3_throwabortreasonv3_lazyroutediscoveryv3_singlefetchv3_routeconfigdeprecations@remix-run/eslint-configjsondeferserializefrommultipart": 2, "polyfill": 2, "port": 4, "positions": 2, "possible": 8, "post": 3, "post\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉": 1, "postcss": 4, "postcss\\": 1, "powerful": 2, "prefer": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previous": 2, "previously": 1, "previoussibling": 1, "primary": 1, "prior": 2, "process": 2, "progressive": 3, "project": 7, "projects": 3, "projects\\\\\\": 1, "promise": 2, "promises": 4, "provide": 2, "provides": 4, "public": 2, "pull": 1, "query": 5, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "rather": 2, "raw": 4, "re": 8, "react": 53, "react-router-scroll-positions": 1, "read": 2, "readablestream": 1, "reason": 3, "reason\\u003c/code\\u003e": 1, "recommend": 6, "recommended": 2, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "redundant": 2, "reference": 2, "referenced": 2, "references": 2, "referencing": 1, "referred": 2, "regular": 3, "reject": 2, "reject/cancel": 2, "rejected": 2, "rel": 4, "related": 3, "relative": 11, "relative\\\\\\": 1, "released": 2, "relevant": 2, "relying": 6, "remain": 2, "remaining": 2, "remix": 86, "remix-flat-routes": 2, "remix-runeslint-config\\": 1, "remix-runeslint-config\\\\\\": 1, "remix-serve": 1, "remix\\": 2, "remix\\\\\\": 1, "remixcontext": 2, "remixroutesoptionadapter": 7, "remixserver\\\\n\\u003c/span\\u003e\\u003cspan": 1, "remove": 12, "remove-installglobals\\": 1, "remove-installglobals\\\\\\": 1, "removechild": 2, "removed": 10, "removeitem": 1, "render": 2, "renderer": 2, "rendering": 2, "rendertopipeablestream": 2, "replace": 3, "replace\\": 1, "replacement": 6, "replacement\\": 1, "replacestate": 1, "request": 6, "requests": 9, "requests\\\\n\\u003c/span\\u003e\\u003cspan": 1, "required": 6, "requires": 6, "resolve": 4, "resource": 3, "resources": 1, "response": 3, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 27, "returned": 2, "returning": 4, "returns": 6, "returntype\u003ctypeof": 1, "revalidations": 2, "rfc": 1, "rfc\\u003c/a\\u003e": 1, "rm": 1, "rocking": 1, "rolling": 1, "rollup": 2, "root": 5, "root\\": 1, "rootdirectory": 2, "route": 53, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routeconfig": 13, "routediscovery": 1, "router": 47, "router\\": 2, "routes": 50, "routes/docs": 3, "routes/docs\\": 1, "routes/hello": 1, "routes\\": 2, "routes\\\\n\\u003c/span\\u003e\\u003cspan": 1, "routes\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "routes\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eif": 1, "routing": 16, "run/blog/fog-of-war\\\\\\": 1, "run/docs/start/future-flags": 1, "run\\": 1, "running": 1, "runtimes": 3, "safely": 2, "same": 4, "satisfies": 5, "scope": 2, "scripts": 8, "scripts\\": 1, "scripts\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "second": 2, "seconds": 3, "seconds\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "see": 10, "segment": 2, "sends": 4, "serialize": 4, "serializefrom": 3, "serializefrom\u003ct\u003e": 1, "serializefrom\\": 2, "serializefrom\\\\\\": 1, "serializes": 2, "server": 29, "server-rendered": 2, "server-side": 2, "server\\": 3, "server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eif": 1, "server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉": 1, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 12, "settimeout": 4, "setup": 2, "shellscript\\\\\\": 18, "ship": 2, "shopify": 1, "should": 16, "shouldn": 2, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "side": 2, "signal": 2, "similar": 4, "simplifies": 2, "simplifying": 1, "since": 10, "single": 19, "siteurl\\": 1, "skip": 2, "skiplibcheck": 2, "slice": 1, "slug\\": 1, "so": 6, "some": 6, "something": 2, "spa": 3, "splat": 6, "splats": 2, "split": 3, "ssr": 1, "stages": 1, "start": 6, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started": 2, "started\\": 1, "startedquick": 2, "state": 10, "status": 4, "step": 4, "step-by-step": 2, "steps": 2, "still": 6, "storagekey2": 3, "storedy": 3, "strategy": 5, "strategy\\": 1, "strategy\\u003c/a\\u003e": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "streamlined": 4, "streamtimeout": 5, "stringifying": 2, "style=\\\\\\": 357, "styles": 6, "stylesheet": 2, "stylesheet\\\\\\": 2, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "subset": 2, "successfully": 2, "such": 10, "support": 9, "support\\": 1, "supported": 1, "supports": 2, "sure": 2, "syntax": 2, "system": 10, "tabindex=\\\\\\": 16, "tailwind": 6, "tailwind\\": 1, "take": 2, "tasks": 18, "team": 1, "team\\\\\\": 1, "technical": 3, "technologies\\": 1, "templates": 6, "templates\\": 1, "templates\\u003c/a\\u003e": 1, "textencoderstream": 1, "than": 6, "thank": 1, "that": 24, "the": 238, "them": 2, "then": 3, "there": 2, "these": 6, "they": 6, "this": 46, "those": 6, "through": 3, "throw": 2, "time": 4, "timeout": 2, "title\\": 1, "tls": 2, "tls\\": 1, "to": 160, "to=": 8, "to=\\\\\\": 8, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "touch": 1, "towards": 2, "treating": 2, "tree": 2, "trending": 2, "troubleshooting": 2, "true": 18, "true\\\\\\": 103, "try": 1, "ts": 17, "ts\\": 1, "ts\\\\\\": 34, "ts\\u003c/code\\u003e": 9, "ts\\u003c/code\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "ts\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "ts\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eremix": 1, "ts\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eremove": 1, "ts\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv": 1, "ts\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003econfigure": 1, "tsconfig": 5, "tsconfigpaths": 4, "tsx": 23, "tsx\\\\\\": 8, "tsx\\\\n\\u003c/span\\u003e\\u003cspan": 3, "tsx\\u003c/code\\u003e": 2, "tsx\\u003c/span\\u003e\\\\\\": 11, "tsx\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "tutorial": 3, "two": 1, "two\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003efor": 1, "type": 18, "typeof": 1, "types": 8, "types=": 2, "types=\\\\\\": 2, "typescript": 2, "typescript\\": 1, "typescript\\\\\\": 34, "ui": 2, "ui\\": 1, "undefined": 1, "under": 1, "uninstall": 2, "unknown": 4, "unless": 2, "unlikely": 2, "unmounts": 2, "unstable": 1, "unstable\\\\\\": 1, "unstable_composeuploadhandlers": 1, "unstable_createfileuploadhandler": 3, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 3, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 5, "unstable_parsemultipartformdata": 3, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "until": 2, "unwrap": 2, "up": 8, "update": 24, "update-to-latest-v2x\\": 1, "update-to-latest-v2x\\\\\\": 1, "update/remove": 1, "upgrade": 6, "upgrading": 5, "upload": 5, "uploads": 7, "uploads\\": 1, "uploads\\\\\\": 1, "url": 5, "url=": 2, "url\\\\\\": 1, "url\\u003c/code\\u003e": 2, "usage": 4, "use": 28, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 4, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 3, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata/useactiondata": 1, "useloaderdata\u003ct\u003e\u003e": 1, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 4, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "users": 2, "uses": 6, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 22, "util": 2, "util\\u003c/a\\u003e": 2, "utilities": 3, "utilities\\": 2, "utilities\\u003c/h3\\u003e\\\\n\\u003cp\\u003ethe": 1, "utilitiescookies": 2, "utilitiesfuture": 1, "utilitieson": 1, "utility": 4, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 12, "v2\\": 1, "v2\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "v3_fetcherpersist": 3, "v3_fetcherpersist\\": 2, "v3_fetcherpersist\\\\\\": 1, "v3_lazyroutediscovery": 3, "v3_lazyroutediscovery\\": 2, "v3_lazyroutediscovery\\\\\\": 1, "v3_relativesplatpath": 3, "v3_relativesplatpath\\": 2, "v3_relativesplatpath\\\\\\": 1, "v3_routeconfig": 4, "v3_routeconfig\\": 2, "v3_routeconfig\\\\\\": 1, "v3_singlefetch": 4, "v3_singlefetch\\": 2, "v3_singlefetch\\\\\\": 1, "v3_throwabortreason": 3, "v3_throwabortreason\\": 2, "v3_throwabortreason\\\\\\": 1, "v7": 38, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "valid": 2, "validation": 2, "validation\\": 1, "value": 2, "values": 4, "vanilla": 7, "var": 359, "variables": 2, "variables\\": 1, "ve": 2, "version": 12, "very": 2, "via": 10, "view": 9, "vite": 73, "vite-tsconfig-paths": 6, "vite/client": 1, "vite\\": 1, "vite\\\\\\": 1, "vite\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "viteplugin": 5, "vs": 8, "walk": 1, "walks": 2, "walkthrough": 2, "want": 6, "warnings": 2, "was": 4, "way": 5, "we": 10, "well": 4, "were": 16, "what": 2, "when": 13, "which": 6, "while": 6, "why": 1, "will": 36, "window": 11, "wish": 2, "with": 24, "within": 4, "without": 2, "won": 2, "work": 2, "worker": 2, "would": 2, "writes": 2, "writes\\": 1, "x\\": 1, "x\\u003c/h2\\u003e\\\\n\\u003cp\\u003efirst": 1, "xremove": 2, "yet": 2, "you": 116, "your": 71, "||": 3, "~/styles/dashboard": 4, "©": 1, "•docs": 1, "└──": 3, "├──": 4, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2, "👉": 30 }, "length": 14260 }, { "id": "97a0890ac7ceb5012374dba7", "doc_id": "713623e78b38920e85ff988f", "title": "get-owner", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/get-owner.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/get-owner.json", "content": "--- title: getOwner use_cases: \u003e- advanced tracking control, custom cleanup logic, understanding component hierarchy, debugging ownership chains, manual scope management tags: - ownership - tracking - scopes - cleanup - debugging version: '1.0' description: \u003e- Access the current tracking scope owner in SolidJS for advanced control over cleanup and disposal. Essential for custom reactive primitives. --- ```tsx import { getOwner } from \"solid-js\" import type { Owner } from \"solid-js\" function getOwner(): Owner ``` Gets the tracking scope that owns the currently running code, e.g., for passing into a later call to `runWithOwner` outside of the current scope. Internally, computations (effects, memos, etc.) create owners which are children of their owner, all the way up to the root owner created by `createRoot` or `render`. In particular, this ownership tree lets Solid automatically clean up a disposed computation by traversing its subtree and calling all `onCleanup` callbacks. For example, when a createEffect's dependencies change, the effect calls all descendant `onCleanup` callbacks before running the effect function again. Calling `getOwner` returns the current owner node that is responsible for disposal of the current execution block. Components are not computations, so do not create an owner node, but they are typically rendered from a `createEffect` which does, so the result is similar: when a component gets unmounted, all descendant `onCleanup` callbacks get called. Calling `getOwner` from a component scope returns the owner that is responsible for rendering and unmounting that component. Note that the owning tracking scope isn't necessarily tracking. For example, untrack turns off tracking for the duration of a function (without creating a new tracking scope), as do components created via JSX (`\u003cComponent ...\u003e`).", "term_freq": { "---": 2, "//github": 1, "\u003ccomponent": 1, "\u003e-": 2, "access": 1, "advanced": 2, "again": 1, "all": 4, "an": 1, "and": 3, "are": 3, "as": 1, "automatically": 1, "before": 1, "block": 1, "but": 1, "by": 2, "call": 1, "callbacks": 3, "called": 1, "calling": 3, "calls": 1, "chains": 1, "change": 1, "children": 1, "clean": 1, "cleanup": 3, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/get-owner": 1, "component": 4, "components": 2, "computation": 1, "computations": 2, "control": 2, "create": 2, "created": 2, "createeffect": 2, "createroot": 1, "creating": 1, "current": 4, "currently": 1, "custom": 2, "debugging": 2, "dependencies": 1, "descendant": 2, "description": 1, "disposal": 2, "disposed": 1, "do": 2, "does": 1, "duration": 1, "effect": 2, "effects": 1, "essential": 1, "etc": 1, "example": 2, "execution": 1, "for": 8, "from": 4, "function": 3, "get": 1, "get-owner": 1, "getowner": 5, "gets": 2, "github-document": 1, "hierarchy": 1, "https": 1, "import": 2, "in": 2, "internally": 1, "into": 1, "is": 3, "isn": 1, "its": 1, "jsx": 1, "later": 1, "lets": 1, "logic": 1, "management": 1, "manual": 1, "mdx": 1, "memos": 1, "necessarily": 1, "new": 1, "node": 2, "not": 2, "note": 1, "of": 4, "off": 1, "oncleanup": 3, "or": 1, "outside": 1, "over": 1, "owner": 8, "owners": 1, "ownership": 3, "owning": 1, "owns": 1, "particular": 1, "passing": 1, "primitives": 1, "reactive": 1, "render": 1, "rendered": 1, "rendering": 1, "responsible": 2, "result": 1, "returns": 2, "root": 1, "running": 2, "runwithowner": 1, "scope": 7, "scopes": 1, "similar": 1, "so": 2, "solid": 1, "solid-js": 2, "solidjs": 1, "subtree": 1, "tags": 1, "that": 5, "the": 14, "their": 1, "they": 1, "this": 1, "title": 1, "to": 2, "tracking": 8, "traversing": 1, "tree": 1, "tsx": 1, "turns": 1, "type": 1, "typically": 1, "understanding": 1, "unmounted": 1, "unmounting": 1, "untrack": 1, "up": 2, "use_cases": 1, "version": 1, "via": 1, "way": 1, "when": 2, "which": 2, "without": 1 }, "length": 258 }, { "id": "8748e0f04424c3ccffea3bbe", "doc_id": "dbc23ba19ebd2dbef7e2d6ec", "title": "get-request-event", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/server-utilities/get-request-event.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/get-request-event.json", "content": "--- title: getRequestEvent use_cases: \u003e- server-side rendering, authentication, headers manipulation, cookies, server functions, request context access tags: - server - ssr - request - headers - authentication - context version: '1.0' description: \u003e- Access server request context with getRequestEvent. Read headers, set cookies, and manage response status in SSR and server functions. --- Solid uses Async Local Storage as a way of injecting the request context anywhere on the server. The server provides a utility function to access this context (called a `RequestEvent`). ```js import { getRequestEvent } from \"solid-js/web\" import type { RequestEvent } from \"solid-js/web\" function getRequestEvent(): RequestEvent | undefined ``` You can retrieve the request event by calling `getRequestEvent`: ```js import { getRequestEvent } from \"solid-js/web\" const event = getRequestEvent() ``` ## Request `.request` is the most important property of the `RequestEvent`. This is a Web [Request object](https://developer.mozilla.org/en-US/docs/Web/API/Request) that represents the current request to the server. You can access properties off of it such as `url` and `headers`. `body`, however, does not typically need to be handled directly for things such as server functions or rendering, which already handle mapping. ```js import { getRequestEvent } from \"solid-js/web\" const event = getRequestEvent(); if (event) { const auth = event.request.headers.get(\"Authorization\"); } ``` ## Response The `getRequestEvent` can also be used to stub out the Response - this extends the [options that can be passed to the `Response constructor`](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#options). This is kept up to date so it can be used to read and write headers and status for the current response. ```js import { getRequestEvent } from \"solid-js/web\" const event = getRequestEvent(); if (event) { event.response.headers.append(\"Set-Cookie\", \"foo=hello\"); event.response.status = 201; } ``` ### Change event.response or create a new Response The `getRequestEvent` event is considered global and lasts the life of the request. Therefore, if you are calling a server function on the server during SSR or an RPC call, setting values on `event.response` will reflect on that request. The returned response will only impact the response when it is an RPC call. This is important because some headers previously set may not be needed to be set for the whole page, but only for a specific request. **Note:** This is important to keep in mind when choosing where to set headers and responses. :::note[Usage with SolidStart] See this guide on [Request Events](/solid-start/advanced/request-events). :::", "term_freq": { "##": 2, "###": 1, "**": 1, "**note": 1, "---": 2, "//developer": 2, "//github": 1, "/solid-start/advanced/request-events": 1, "201": 1, "\u003e-": 2, "access": 4, "already": 1, "also": 1, "an": 2, "and": 7, "anywhere": 1, "append": 1, "are": 1, "as": 3, "async": 1, "auth": 1, "authentication": 2, "authorization": 1, "be": 6, "because": 1, "body": 1, "but": 1, "by": 1, "call": 2, "called": 1, "calling": 2, "can": 5, "change": 1, "choosing": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/server-utilities/get-request-event": 1, "considered": 1, "const": 4, "constructor": 1, "context": 5, "cookies": 2, "create": 1, "current": 2, "date": 1, "description": 1, "directly": 1, "does": 1, "during": 1, "event": 12, "events": 1, "extends": 1, "foo=hello": 1, "for": 4, "from": 5, "function": 3, "functions": 3, "get": 1, "get-request-event": 1, "getrequestevent": 13, "github-document": 1, "global": 1, "guide": 1, "handle": 1, "handled": 1, "headers": 9, "however": 1, "https": 3, "if": 3, "impact": 1, "import": 5, "important": 3, "in": 2, "injecting": 1, "is": 7, "it": 3, "js": 4, "keep": 1, "kept": 1, "lasts": 1, "life": 1, "local": 1, "manage": 1, "manipulation": 1, "mapping": 1, "may": 1, "mdx": 1, "mind": 1, "most": 1, "mozilla": 2, "need": 1, "needed": 1, "new": 1, "not": 2, "note": 1, "object": 1, "of": 4, "off": 1, "on": 5, "only": 2, "options": 1, "or": 3, "org/en-us/docs/web/api/request": 1, "org/en-us/docs/web/api/response/response#options": 1, "out": 1, "page": 1, "passed": 1, "previously": 1, "properties": 1, "property": 1, "provides": 1, "read": 2, "reflect": 1, "rendering": 2, "represents": 1, "request": 14, "requestevent": 4, "response": 12, "responses": 1, "retrieve": 1, "returned": 1, "rpc": 2, "see": 1, "server": 10, "server-side": 1, "set": 4, "set-cookie": 1, "setting": 1, "so": 1, "solid": 1, "solid-js/web": 5, "solidstart": 1, "some": 1, "specific": 1, "ssr": 3, "status": 3, "storage": 1, "stub": 1, "such": 2, "tags": 1, "that": 3, "the": 20, "therefore": 1, "things": 1, "this": 7, "title": 1, "to": 10, "type": 1, "typically": 1, "undefined": 1, "up": 1, "url": 1, "usage": 1, "use_cases": 1, "used": 2, "uses": 1, "utility": 1, "values": 1, "version": 1, "way": 1, "web": 1, "when": 2, "where": 1, "which": 1, "whole": 1, "will": 2, "with": 2, "write": 1, "you": 3 }, "length": 373 }, { "id": "fda51f3e3080e6237c2be5fe", "doc_id": "7e7d82b3940ee4f540c30083", "title": "get-server-function-meta", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/server/get-server-function-meta.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/get-server-function-meta.json", "content": "--- title: getServerFunctionMeta use_cases: \u003e- server function identification, parallel processing, worker management, caching, multi-core apps tags: - server - functions - metadata - parallel - workers - cache version: '1.0' description: \u003e- Get stable IDs for server functions across parallel instances. Enable caching and state management in multi-core SolidStart apps. --- `getServerFunctionMeta` returns a function-specific id string, that is stable across all instances when server functions are run in parallel on multiple CPU cores or workers. This `id` property can and _will_ change between builds. ```tsx import { getServerFunctionMeta } from \"@solidjs/start\"; // or some in-memory db const appCache: any = globalThis; const counter = async () =\u003e { \"use server\"; const { id } = getServerFunctionMeta()!; const key = `counter_${id}`; appCache[key] = appCache[key] ?? 0; appCache[key]++; return appCache[key] as number; }; ``` ## Parameters `getServerFunctionMeta(): { id: string }`", "term_freq": { "##": 1, "++": 1, "---": 2, "//": 1, "//github": 1, "=\u003e": 1, "\u003e-": 2, "@solidjs/start": 1, "_will_": 1, "across": 2, "all": 1, "and": 2, "any": 1, "appcache": 5, "apps": 2, "are": 1, "as": 1, "async": 1, "between": 1, "builds": 1, "cache": 1, "caching": 2, "can": 1, "change": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/server/get-server-function-meta": 1, "const": 4, "cores": 1, "counter": 1, "counter_$": 1, "cpu": 1, "db": 1, "description": 1, "enable": 1, "for": 1, "from": 1, "function": 1, "function-specific": 1, "functions": 3, "get": 1, "get-server-function-meta": 1, "getserverfunctionmeta": 5, "github-document": 1, "globalthis": 1, "https": 1, "id": 5, "identification": 1, "ids": 1, "import": 1, "in": 2, "in-memory": 1, "instances": 2, "is": 1, "key": 5, "management": 2, "mdx": 1, "metadata": 1, "multi-core": 2, "multiple": 1, "number": 1, "on": 1, "or": 2, "parallel": 4, "parameters": 1, "processing": 1, "property": 1, "return": 1, "returns": 1, "run": 1, "server": 5, "solidstart": 1, "some": 1, "stable": 2, "state": 1, "string": 2, "tags": 1, "that": 1, "this": 1, "title": 1, "tsx": 1, "use": 1, "use_cases": 1, "version": 1, "when": 1, "worker": 1, "workers": 2 }, "length": 127 }, { "id": "d19c9bf46f8dfdc302b0e239", "doc_id": "ea75325c41794ef949a26089", "title": "get", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/server/get.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/get.json", "content": "--- title: GET use_cases: \u003e- http caching, rest api, data fetching, cache headers, seo optimization, cdn caching tags: - http - get - cache - api - rest - fetch version: '1.0' description: \u003e- Create cacheable GET server functions in SolidStart. Leverage HTTP cache headers for improved performance and SEO optimization. --- `GET` helps to create a server function which is accessed via an [HTTP GET request](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET). When this function is called, arguments are serialized into the URL, thus allowing the use of [HTTP cache-control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) headers. For example, `GET` can be used to make a streaming promise with a 60 second cache life: ```tsx {4, 8} import { json } from \"@solidjs/router\"; import { GET } from \"@solidjs/start\"; const hello = GET(async (name: string) =\u003e { \"use server\"; return json( { hello: new Promise\u003cstring\u003e((r) =\u003e setTimeout(() =\u003e r(name), 1000)) }, { headers: { \"cache-control\": \"max-age=60\" } } ); }); ``` ## Parameters `GET\u003cT extends (...args: any[]) =\u003e any\u003e(fn: T): (...args: Parameters\u003cT\u003e) =\u003e ReturnType\u003cT\u003e`", "term_freq": { "##": 1, "---": 2, "//developer": 2, "//github": 1, "1000": 1, "60": 1, "=\u003e": 5, "\u003e-": 2, "@solidjs/router": 1, "@solidjs/start": 1, "accessed": 1, "allowing": 1, "an": 1, "and": 1, "any": 1, "any\u003e": 1, "api": 2, "are": 1, "args": 2, "arguments": 1, "async": 1, "be": 1, "cache": 4, "cache-control": 2, "cacheable": 1, "caching": 2, "called": 1, "can": 1, "cdn": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/server/get": 1, "const": 1, "create": 2, "data": 1, "description": 1, "example": 1, "extends": 1, "fetch": 1, "fetching": 1, "fn": 1, "for": 2, "from": 2, "function": 2, "functions": 1, "get": 9, "get\u003ct": 1, "github-document": 1, "headers": 4, "hello": 2, "helps": 1, "http": 5, "https": 3, "import": 2, "improved": 1, "in": 1, "into": 1, "is": 2, "json": 2, "leverage": 1, "life": 1, "make": 1, "max-age=60": 1, "mdx": 1, "mozilla": 2, "name": 2, "new": 1, "of": 1, "optimization": 2, "org/en-us/docs/web/http/headers/cache-control": 1, "org/en-us/docs/web/http/methods/get": 1, "parameters": 1, "parameters\u003ct\u003e": 1, "performance": 1, "promise": 1, "promise\u003cstring\u003e": 1, "request": 1, "rest": 2, "return": 1, "returntype\u003ct\u003e": 1, "second": 1, "seo": 2, "serialized": 1, "server": 3, "settimeout": 1, "solidstart": 1, "streaming": 1, "string": 1, "tags": 1, "the": 2, "this": 1, "thus": 1, "title": 1, "to": 2, "tsx": 1, "url": 1, "use": 2, "use_cases": 1, "used": 1, "version": 1, "via": 1, "when": 1, "which": 1, "with": 1 }, "length": 151 }, { "id": "ca2ed7f67d3940f0aa88433c", "doc_id": "968faffc89e2987f039a1cc2", "title": "Getting Started: Layouts and Pages | Next.js", "url": "https://nextjs.org/docs/app/building-your-application/routing", "type": "html", "source": "nextjs:routing", "path": "devour_data/docs/getting-started--layouts-and-pages---next.js.json", "content": "App RouterGetting StartedLayouts and PagesCopy pageLayouts and PagesLast updated February 20, 2026Next.js uses file-system based routing, meaning you can use folders and files to define routes. This page will guide you through how to create layouts and pages, and link between them. Creating a page A page is UI that is rendered on a specific route. To create a page, add a page file inside the app directory and default export a React component. For example, to create an index page (/): app/page.tsxTypeScriptJavaScriptTypeScriptexport default function Page() { return \u003ch1\u003eHello Next.js!\u003c/h1\u003e } Creating a layout A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not rerender. You can define a layout by default exporting a React component from a layout file. The component should accept a children prop which can be a page or another layout. For example, to create a layout that accepts your index page as child, add a layout file inside the app directory: app/layout.tsxTypeScriptJavaScriptTypeScriptexport default function DashboardLayout({ children, }: { children: React.ReactNode }) { return ( \u003chtml lang=\"en\"\u003e \u003cbody\u003e {/* Layout UI */} {/* Place children where you want to render a page or nested layout */} \u003cmain\u003e{children}\u003c/main\u003e \u003c/body\u003e \u003c/html\u003e ) } The layout above is called a root layout because it's defined at the root of the app directory. The root layout is required and must contain html and body tags. Creating a nested route A nested route is a route composed of multiple URL segments. For example, the /blog/[slug] route is composed of three segments: / (Root Segment) blog (Segment) [slug] (Leaf Segment) In Next.js: Folders are used to define the route segments that map to URL segments. Files (like page and layout) are used to create UI that is shown for a segment. To create nested routes, you can nest folders inside each other. For example, to add a route for /blog, create a folder called blog in the app directory. Then, to make /blog publicly accessible, add a page.tsx file: app/blog/page.tsxTypeScriptJavaScriptTypeScript// Dummy imports import { getPosts } from '@/lib/posts' import { Post } from '@/ui/post' export default async function Page() { const posts = await getPosts() return ( \u003cul\u003e {posts.map((post) =\u003e ( \u003cPost key={post.id} post={post} /\u003e ))} \u003c/ul\u003e ) } You can continue nesting folders to create nested routes. For example, to create a route for a specific blog post, create a new [slug] folder inside blog and add a page file: app/blog/[slug]/page.tsxTypeScriptJavaScriptTypeScriptfunction generateStaticParams() {} export default function Page() { return \u003ch1\u003eHello, Blog Post Page!\u003c/h1\u003e } Wrapping a folder name in square brackets (e.g. [slug]) creates a dynamic route segment which is used to generate multiple pages from data. e.g. blog posts, product pages, etc. Nesting layouts By default, layouts in the folder hierarchy are also nested, which means they wrap child layouts via their children prop. You can nest layouts by adding layout inside specific route segments (folders). For example, to create a layout for the /blog route, add a new layout file inside the blog folder. app/blog/layout.tsxTypeScriptJavaScriptTypeScriptexport default function BlogLayout({ children, }: { children: React.ReactNode }) { return \u003csection\u003e{children}\u003c/section\u003e } If you were to combine the two layouts above, the root layout (app/layout.js) would wrap the blog layout (app/blog/layout.js), which would wrap the blog (app/blog/page.js) and blog post page (app/blog/[slug]/page.js). Creating a dynamic segment Dynamic segments allow you to create routes that are generated from data. For example, instead of manually creating a route for each individual blog post, you can create a dynamic segment to generate the routes based on blog post data. To create a dynamic segment, wrap the segment (folder) name in square brackets: [segmentName]. For example, in the app/blog/[slug]/page.tsx route, the [slug] is the dynamic segment. app/blog/[slug]/page.tsxTypeScriptJavaScriptTypeScriptexport default async function BlogPostPage({ params, }: { params: Promise\u003c{ slug: string }\u003e }) { const { slug } = await params const post = await getPost(slug) return ( \u003cdiv\u003e \u003ch1\u003e{post.title}\u003c/h1\u003e \u003cp\u003e{post.content}\u003c/p\u003e \u003c/div\u003e ) } Learn more about Dynamic Segments and the params props. Nested layouts within Dynamic Segments, can also access the params props. Rendering with search params In a Server Component page, you can access search parameters using the searchParams prop: app/page.tsxTypeScriptJavaScriptTypeScriptexport default async function Page({ searchParams, }: { searchParams: Promise\u003c{ [key: string]: string | string[] | undefined }\u003e }) { const filters = (await searchParams).filters } Using searchParams opts your page into dynamic rendering because it requires an incoming request to read the search parameters from. Client Components can read search params using the useSearchParams hook. Learn more about useSearchParams in statically rendered and dynamically rendered routes. What to use and when Use the searchParams prop when you need search parameters to load data for the page (e.g. pagination, filtering from a database). Use useSearchParams when search parameters are used only on the client (e.g. filtering a list already loaded via props). As a small optimization, you can use new URLSearchParams(window.location.search) in callbacks or event handlers to read search params without triggering re-renders. Linking between pages You can use the \u003cLink\u003e component to navigate between routes. \u003cLink\u003e is a built-in Next.js component that extends the HTML \u003ca\u003e tag to provide prefetching and client-side navigation. For example, to generate a list of blog posts, import \u003cLink\u003e from next/link and pass a href prop to the component: app/ui/post.tsxTypeScriptJavaScriptTypeScriptimport Link from 'next/link' export default async function Post({ post }) { const posts = await getPosts() return ( \u003cul\u003e {posts.map((post) =\u003e ( \u003cli key={post.slug}\u003e \u003cLink href={`/blog/${post.slug}`}\u003e{post.title}\u003c/Link\u003e \u003c/li\u003e ))} \u003c/ul\u003e ) } Good to know: \u003cLink\u003e is the primary way to navigate between routes in Next.js. You can also use the useRouter hook for more advanced navigation. Route Props Helpers Next.js exposes utility types that infer params and named slots from your route structure: PageProps: Props for page components, including params and searchParams. LayoutProps: Props for layout components, including children and any named slots (e.g. folders like @analytics). These are globally available helpers, generated when running either next dev, next build or next typegen. app/blog/[slug]/page.tsxexport default async function Page(props: PageProps\u003c'/blog/[slug]'\u003e) { const { slug } = await props.params return \u003ch1\u003eBlog post: {slug}\u003c/h1\u003e } app/dashboard/layout.tsxexport default function Layout(props: LayoutProps\u003c'/dashboard'\u003e) { return ( \u003csection\u003e {props.children} {/* If you have app/dashboard/@analytics, it appears as a typed slot: */} {/* {props.analytics} */} \u003c/section\u003e ) } Good to know Static routes resolve params to {}. PageProps, LayoutProps are global helpers — no imports required. Types are generated during next dev, next build or next typegen. API ReferenceLearn more about the features mentioned in this page by reading the API Reference.Linking and NavigatingLearn how the built-in navigation optimizations work, including prefetching, prerendering, and client-side navigation, and how to optimize navigation for dynamic routes and slow networks.layout.jsAPI reference for the layout.js file.page.jsAPI reference for the page.js file.Link ComponentEnable fast client-side navigation with the built-in `next/link` component.Dynamic SegmentsDynamic Route Segments can be used to programmatically generate route segments from dynamic data.PreviousProject StructureNextLinking and NavigatingWas this helpful?supported.Send", "term_freq": { "*/": 4, "/*": 4, "//nextjs": 1, "/\u003e": 1, "/blog": 3, "/blog/": 2, "/blog/$": 1, "/dashboard": 1, "/page": 5, "20": 1, "2026next": 1, "\u003c/body\u003e": 1, "\u003c/div\u003e": 1, "\u003c/h1\u003e": 4, "\u003c/html\u003e": 1, "\u003c/li\u003e": 1, "\u003c/link\u003e": 1, "\u003c/main\u003e": 1, "\u003c/p\u003e": 1, "\u003c/section\u003e": 2, "\u003c/ul\u003e": 2, "\u003ca\u003e": 1, "\u003cbody\u003e": 1, "\u003cdiv\u003e": 1, "\u003ch1\u003e": 1, "\u003ch1\u003eblog": 1, "\u003ch1\u003ehello": 2, "\u003chtml": 1, "\u003cli": 1, "\u003clink": 1, "\u003clink\u003e": 4, "\u003cmain\u003e": 1, "\u003cp\u003e": 1, "\u003cpost": 1, "\u003csection\u003e": 2, "\u003cul\u003e": 2, "=\u003e": 2, "@/lib/posts": 1, "@/ui/post": 1, "@analytics": 1, "about": 3, "above": 2, "accept": 1, "accepts": 1, "access": 2, "accessible": 1, "add": 6, "adding": 1, "advanced": 1, "allow": 1, "already": 1, "also": 3, "an": 2, "analytics": 1, "and": 26, "another": 1, "any": 1, "api": 2, "app": 5, "app/blog/": 5, "app/blog/layout": 2, "app/blog/page": 2, "app/dashboard/@analytics": 1, "app/dashboard/layout": 1, "app/layout": 2, "app/page": 2, "app/ui/post": 1, "appears": 1, "are": 8, "as": 3, "async": 5, "at": 1, "available": 1, "await": 6, "based": 2, "be": 2, "because": 2, "between": 5, "blog": 13, "bloglayout": 1, "blogpostpage": 1, "body": 1, "brackets": 2, "build": 2, "built-in": 3, "by": 4, "callbacks": 1, "called": 2, "can": 14, "child": 2, "children": 11, "client": 2, "client-side": 3, "combine": 1, "component": 8, "componentenable": 1, "components": 3, "composed": 2, "const": 6, "contain": 1, "content": 1, "continue": 1, "create": 14, "creates": 1, "creating": 5, "dashboardlayout": 1, "data": 5, "database": 1, "default": 13, "define": 3, "defined": 1, "dev": 2, "directory": 4, "do": 1, "dummy": 1, "during": 1, "dynamic": 12, "dynamically": 1, "each": 2, "either": 1, "en": 1, "etc": 1, "event": 1, "example": 9, "export": 4, "exporting": 1, "exposes": 1, "extends": 1, "fast": 1, "features": 1, "february": 1, "file": 8, "file-system": 1, "files": 2, "filtering": 2, "filters": 2, "folder": 6, "folders": 6, "for": 21, "from": 11, "function": 10, "generate": 4, "generated": 3, "generatestaticparams": 1, "getpost": 1, "getposts": 3, "getting": 1, "global": 1, "globally": 1, "good": 2, "guide": 1, "handlers": 1, "have": 1, "helpers": 3, "helpful": 1, "hierarchy": 1, "hook": 2, "how": 3, "href": 1, "href=": 1, "html": 3, "https": 1, "id": 1, "if": 2, "import": 3, "imports": 2, "in": 11, "including": 3, "incoming": 1, "index": 2, "individual": 1, "infer": 1, "inside": 6, "instead": 1, "interactive": 1, "into": 1, "is": 13, "it": 3, "js": 13, "jsapi": 2, "key": 1, "key=": 2, "know": 2, "lang=": 1, "layout": 22, "layoutprops": 2, "layoutprops\u003c": 1, "layouts": 9, "leaf": 1, "learn": 2, "like": 2, "link": 3, "linking": 2, "list": 2, "load": 1, "loaded": 1, "location": 1, "make": 1, "manually": 1, "map": 3, "meaning": 1, "means": 1, "mentioned": 1, "more": 4, "multiple": 3, "must": 1, "name": 2, "named": 2, "navigate": 2, "navigatinglearn": 1, "navigatingwas": 1, "navigation": 7, "need": 1, "nest": 2, "nested": 7, "nesting": 2, "networks": 1, "new": 3, "next": 12, "next/link": 3, "no": 1, "not": 1, "of": 5, "on": 4, "only": 1, "optimization": 1, "optimizations": 1, "optimize": 1, "opts": 1, "or": 5, "org/docs/app/building-your-application/routing": 1, "other": 1, "page": 26, "pagelayouts": 1, "pageprops": 2, "pageprops\u003c": 1, "pages": 6, "pagescopy": 1, "pageslast": 1, "pagination": 1, "parameters": 4, "params": 12, "pass": 1, "place": 1, "post": 19, "post=": 1, "posts": 6, "prefetching": 2, "prerendering": 1, "preserve": 1, "previousproject": 1, "primary": 1, "product": 1, "programmatically": 1, "promise\u003c": 2, "prop": 5, "props": 11, "provide": 1, "publicly": 1, "re-renders": 1, "react": 4, "reactnode": 2, "read": 3, "reading": 1, "reference": 3, "referencelearn": 1, "remain": 1, "render": 1, "rendered": 3, "rendering": 2, "request": 1, "required": 2, "requires": 1, "rerender": 1, "resolve": 1, "return": 9, "root": 5, "route": 17, "routergetting": 1, "routes": 10, "routing": 1, "running": 1, "search": 8, "searchparams": 7, "segment": 10, "segmentname": 1, "segments": 10, "segmentsdynamic": 1, "send": 1, "server": 1, "shared": 1, "should": 1, "shown": 1, "slot": 1, "slots": 2, "slow": 1, "slug": 18, "small": 1, "specific": 3, "square": 2, "started": 1, "startedlayouts": 1, "state": 1, "static": 1, "statically": 1, "string": 4, "structure": 1, "structurenextlinking": 1, "supported": 1, "tag": 1, "tags": 1, "that": 8, "the": 41, "their": 1, "them": 1, "then": 1, "these": 1, "they": 1, "this": 3, "three": 1, "through": 1, "title": 2, "to": 34, "triggering": 1, "tsx": 2, "tsxexport": 2, "tsxtypescriptjavascripttypescript//": 1, "tsxtypescriptjavascripttypescriptexport": 5, "tsxtypescriptjavascripttypescriptfunction": 1, "tsxtypescriptjavascripttypescriptimport": 1, "two": 1, "typed": 1, "typegen": 2, "types": 2, "ui": 4, "undefined": 1, "updated": 1, "url": 2, "urlsearchparams": 1, "use": 7, "used": 5, "userouter": 1, "uses": 1, "usesearchparams": 3, "using": 3, "utility": 1, "via": 2, "want": 1, "way": 1, "were": 1, "what": 1, "when": 4, "where": 1, "which": 4, "will": 1, "window": 1, "with": 2, "within": 1, "without": 1, "work": 1, "would": 2, "wrap": 4, "wrapping": 1, "you": 16, "your": 3, "—": 1 }, "length": 1127 }, { "id": "475d9a430ea9f0611309a1f2", "doc_id": "aed11ddeff3b7689f06e648e", "title": "getting-started", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/getting-started.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/getting-started.json", "content": "--- title: Getting started use_cases: \u003e- new project, initial setup, project creation, starter template, first app, quick start, bootstrapping tags: - setup - installation - starter - template - quickstart - init version: '1.0' description: \u003e- Start your first SolidStart project with templates and step-by-step setup. Create, configure, and run your Solid application. --- The easiest way to get started with Solid is to use the SolidStart starter. This starter contains a collection of templates that can be used to quickly bootstrap a new Solid application. **1. Install SolidStart** To start a new project you can initialize SolidStart with the following command: ```package-create solid@latest ``` This will create a new directory for your project based on the name you enter. **2. Choose a template** When you run the command above, SolidStart will prompt you to choose a template for your new application. You can see a [list of these options in the templates repository](https://github.com/solidjs/templates/tree/main/solid-start). ```bash frame=\"terminal\" ◆ Which template would you like to use? │ ● basic │ ○ bare │ ○ with-solidbase │ ○ with-auth │ ○ with-authjs │ ○ with-drizzle │ ○ with-mdx │ ○ with-prisma │ ○ with-solid-styled │ ○ with-tailwindcss │ ... └ ``` Following the prompts, you might be asked questions like whether you want to use Server Side Rendering or TypeScript. Choose your desired options to continue. **3. Install dependencies** Once you have chosen your template and configuration options, you can navigate to the directory you created and run the following command to install dependencies: ```package-install-local ``` After this command has finished, your new SolidStart application is ready to go! **4. Run your application** To run your application locally, you can use the following command: ```package-run dev ``` Your application should now be running locally on port 3000. You can view it by navigating to [http://localhost:3000](http://localhost:3000). :::note SolidStart uses [Vinxi](https://vinxi.vercel.app/) both for starting a development server with [Vite](https://vitejs.dev/) and for building and starting a production server with [Nitro](https://nitro.build/). When you run your application, you are actually running `vinxi dev` under the hood. You can read more about the [Vinxi CLI and how it is configured in the Vinxi documentation](https://vinxi.vercel.app/api/cli.html). ::: ## Project files SolidStart will create a new directory for your project, and populate it with the necessary files and directories to get you started. These files and directories are the basic structure of a SolidStart application, and you can modify them to suit your needs. The default structure of a SolidStart application looks like this: ``` public/ src/ ├── routes/ │ ├── index.tsx ├── entry-client.tsx ├── entry-server.tsx ├── app.tsx ``` **Note:** Depending on the configuration options you chose when creating your project, your file structure may look slightly different. For example, if you chose to use JavaScript rather than TypeScript, your file extensions will be `.jsx` instead of `.tsx`. Each directory and file in this structure serves a specific purpose in your SolidStart application: - `public/` - contains the publicly-accessible assets for your application. This is where images, fonts, and other files that you want to be accessible to the public should be placed. - `src/` - where your Start application code will live. It is aliased to `~/` for importing in your code. - `src/routes/` - any files or pages will be located in this directory. You can learn more about the [`routes` folder in the routing section](/solid-start/building-your-application/routing). - [`src/entry-client.tsx`](/solid-start/reference/entrypoints/entry-client) - this file is what loads and _hydrates_ the JavaScript for our application on the client side (in browser). In most cases, you will **not** need to modify this file. - [`src/entry-server.tsx`](/solid-start/reference/entrypoints/entry-server) - this file will handle requests on the server. Like `entry-client.tsx`, in most cases you will **not** need to modify this file. - [`app.tsx`](/solid-start/reference/entrypoints/app) - this is the HTML root of your application both for client and server rendering. You can think of this as the shell inside which your application will be rendered.", "term_freq": { "##": 1, "**": 1, "**1": 1, "**2": 1, "**3": 1, "**4": 1, "**not**": 2, "**note": 1, "---": 2, "//github": 2, "//localhost": 2, "//nitro": 1, "//vinxi": 2, "//vitejs": 1, "/solid-start/building-your-application/routing": 1, "/solid-start/reference/entrypoints/app": 1, "/solid-start/reference/entrypoints/entry-client": 1, "/solid-start/reference/entrypoints/entry-server": 1, "3000": 3, "\u003e-": 2, "_hydrates_": 1, "about": 2, "above": 1, "accessible": 1, "actually": 1, "after": 1, "aliased": 1, "and": 15, "any": 1, "app": 3, "app/": 1, "app/api/cli": 1, "application": 15, "application**": 1, "are": 2, "as": 1, "asked": 1, "assets": 1, "bare": 1, "based": 1, "bash": 1, "basic": 2, "be": 8, "bootstrap": 1, "bootstrapping": 1, "both": 2, "browser": 1, "build/": 1, "building": 1, "by": 1, "can": 10, "cases": 2, "choose": 3, "chose": 2, "chosen": 1, "cli": 1, "client": 2, "code": 2, "collection": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/getting-started": 1, "com/solidjs/templates/tree/main/solid-start": 1, "command": 5, "configuration": 2, "configure": 1, "configured": 1, "contains": 2, "continue": 1, "create": 3, "created": 1, "creating": 1, "creation": 1, "default": 1, "dependencies": 1, "dependencies**": 1, "depending": 1, "description": 1, "desired": 1, "dev": 2, "dev/": 1, "development": 1, "different": 1, "directories": 2, "directory": 5, "documentation": 1, "each": 1, "easiest": 1, "enter": 1, "entry-client": 2, "entry-server": 1, "example": 1, "extensions": 1, "file": 7, "files": 5, "finished": 1, "first": 2, "folder": 1, "following": 4, "fonts": 1, "for": 10, "frame=": 1, "get": 2, "getting": 1, "getting-started": 1, "github-document": 1, "go": 1, "handle": 1, "has": 1, "have": 1, "hood": 1, "how": 1, "html": 2, "http": 2, "https": 6, "if": 1, "images": 1, "importing": 1, "in": 10, "index": 1, "init": 1, "initial": 1, "initialize": 1, "inside": 1, "install": 3, "installation": 1, "instead": 1, "is": 7, "it": 4, "javascript": 2, "jsx": 1, "learn": 1, "like": 4, "list": 1, "live": 1, "loads": 1, "locally": 2, "located": 1, "look": 1, "looks": 1, "may": 1, "mdx": 1, "might": 1, "modify": 3, "more": 2, "most": 2, "name": 1, "navigate": 1, "navigating": 1, "necessary": 1, "need": 2, "needs": 1, "new": 7, "nitro": 1, "note": 1, "now": 1, "of": 7, "on": 5, "once": 1, "options": 4, "or": 2, "other": 1, "our": 1, "package-create": 1, "package-install-local": 1, "package-run": 1, "pages": 1, "placed": 1, "populate": 1, "port": 1, "production": 1, "project": 8, "prompt": 1, "prompts": 1, "public": 1, "public/": 2, "publicly-accessible": 1, "purpose": 1, "questions": 1, "quick": 1, "quickly": 1, "quickstart": 1, "rather": 1, "read": 1, "ready": 1, "rendered": 1, "rendering": 2, "repository": 1, "requests": 1, "root": 1, "routes": 1, "routes/": 1, "routing": 1, "run": 6, "running": 2, "section": 1, "see": 1, "server": 5, "serves": 1, "setup": 3, "shell": 1, "should": 2, "side": 2, "slightly": 1, "solid": 3, "solid@latest": 1, "solidstart": 10, "solidstart**": 1, "specific": 1, "src/": 2, "src/entry-client": 1, "src/entry-server": 1, "src/routes/": 1, "start": 4, "started": 3, "starter": 4, "starting": 2, "step-by-step": 1, "structure": 4, "suit": 1, "tags": 1, "template": 5, "template**": 1, "templates": 3, "terminal": 1, "than": 1, "that": 2, "the": 26, "them": 1, "these": 2, "think": 1, "this": 13, "title": 1, "to": 21, "tsx": 9, "typescript": 2, "under": 1, "use": 5, "use_cases": 1, "used": 1, "uses": 1, "vercel": 2, "version": 1, "view": 1, "vinxi": 4, "vite": 1, "want": 2, "way": 1, "what": 1, "when": 3, "where": 2, "whether": 1, "which": 2, "will": 10, "with": 6, "with-auth": 1, "with-authjs": 1, "with-drizzle": 1, "with-mdx": 1, "with-prisma": 1, "with-solid-styled": 1, "with-solidbase": 1, "with-tailwindcss": 1, "would": 1, "you": 25, "your": 22, "~/": 1, "│": 12, "└": 1, "├──": 5, "◆": 1, "○": 9, "●": 1 }, "length": 647 }, { "id": "3f2b311f8c559f25980f54cf", "doc_id": "8c011a0652c465d5ac7d2402", "title": "handle-error-and-loading-states", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/data-fetching/how-to/handle-error-and-loading-states.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/handle-error-and-loading-states.json", "content": "--- title: \"Handle pending and error states\" --- The `createAsync` primitive is designed to work with Solid's native components for managing asynchronous states. It reports its pending state to the nearest [`\u003cSuspense\u003e` boundary](/reference/components/suspense) to display loading fallbacks, and propagate errors to an [`\u003cErrorBoundary\u003e`](/reference/components/error-boundary) for handling and displaying error messages. ```tsx import { Suspense, ErrorBoundary, For } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getNewsQuery = query(async () =\u003e { // ... Fetches the latest news from an API. }, \"news\"); function NewsFeed() { const news = createAsync(() =\u003e getNewsQuery()); return ( \u003cErrorBoundary fallback={\u003cp\u003eCould not fetch news.\u003c/p\u003e}\u003e \u003cSuspense fallback={\u003cp\u003eLoading news...\u003c/p\u003e}\u003e \u003cul\u003e \u003cFor each={news()}\u003e{(item) =\u003e \u003cli\u003e{item.headline}\u003c/li\u003e}\u003c/For\u003e \u003c/ul\u003e \u003c/Suspense\u003e \u003c/ErrorBoundary\u003e ); } ```", "term_freq": { "---": 2, "//": 1, "//github": 1, "/reference/components/error-boundary": 1, "/reference/components/suspense": 1, "\u003c/errorboundary\u003e": 1, "\u003c/for\u003e": 1, "\u003c/li\u003e": 1, "\u003c/p\u003e": 2, "\u003c/suspense\u003e": 1, "\u003c/ul\u003e": 1, "\u003cerrorboundary": 1, "\u003cerrorboundary\u003e": 1, "\u003cfor": 1, "\u003cli\u003e": 1, "\u003cp\u003ecould": 1, "\u003cp\u003eloading": 1, "\u003csuspense": 1, "\u003csuspense\u003e": 1, "\u003cul\u003e": 1, "=\u003e": 3, "@solidjs/router": 1, "an": 2, "and": 3, "api": 1, "async": 1, "asynchronous": 1, "boundary": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/data-fetching/how-to/handle-error-and-loading-states": 1, "components": 1, "const": 2, "createasync": 3, "designed": 1, "display": 1, "displaying": 1, "each=": 1, "error": 2, "errorboundary": 1, "errors": 1, "fallback=": 2, "fallbacks": 1, "fetch": 1, "fetches": 1, "for": 3, "from": 3, "function": 1, "getnewsquery": 2, "github-document": 1, "handle": 1, "handle-error-and-loading-states": 1, "handling": 1, "headline": 1, "https": 1, "import": 2, "is": 1, "it": 1, "item": 2, "its": 1, "latest": 1, "loading": 1, "managing": 1, "mdx": 1, "messages": 1, "native": 1, "nearest": 1, "news": 6, "newsfeed": 1, "not": 1, "pending": 2, "primitive": 1, "propagate": 1, "query": 2, "reports": 1, "return": 1, "solid": 1, "solid-js": 1, "state": 1, "states": 2, "suspense": 1, "the": 3, "title": 1, "to": 4, "tsx": 1, "with": 1, "work": 1 }, "length": 117 }, { "id": "56f0f8be53d1d8f6157053aa", "doc_id": "44261e9239a6673df0c46923", "title": "hash-router", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/components/hash-router.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/hash-router.json", "content": "--- title: HashRouter use_cases: \u003e- static file hosting, single html file apps, no server routing, github pages, static deployment tags: - hash-routing - static-hosting - client-side - spa - deployment - component version: '1.0' description: \u003e- HashRouter enables client-side routing using URL hash values, perfect for static file hosting where server-side routing isn't available. --- The `HashRouter` is a top level component that manages the routing of your application. It is a client side router that uses hash-values in the URL - providing a single-page application a way to replicate the experience of a multi-page application. Since hash-routing provides a way for an application to run from a single HTML file, it can be used when hosting on a static file server. Compared to a browser-router, such as [`Router`](/solid-router/reference/components/router), is that this approach is not SEO friendly. Because most search engines do not index the hash portion of a URL, they are only able to see the index page of your application when using this approach. The `root` property is used for components that wrap a matched route and require access to the router context, relevant with navigation components that use [`\u003cA\u003e`](/solid-router/reference/components/a) links. ```tsx import { render } from \"solid-js/web\"; import { HashRouter, Route } from \"@solidjs/router\"; const App = (props) =\u003e ( \u003c\u003e \u003ch1\u003eRoot header\u003c/h1\u003e {props.children} \u003c/\u003e ); render( () =\u003e \u003cHashRouter root={App}\u003e{/*... routes */}\u003c/HashRouter\u003e, document.getElementById(\"app\") ); ``` | prop | type | description | | ------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------- | | children | `JSX.Element`, `RouteDefinition`, or `RouteDefinition[]` | The route definitions | | root | Component | Top level layout component | | base | string | Base url to use for matching routes | | actionBase | string | Root url for server actions, default: `/_server` | | preload | boolean | Enables/disables preloads globally, default: `true` | | explicitLinks | boolean | Disables all anchors being intercepted and instead requires [`\u003cA\u003e`](/solid-router/reference/components/a). default: `false` |", "term_freq": { "*/": 1, "---": 2, "-------------": 1, "--------------------------------------------------------": 1, "-----------------------------------------------------------------------------------": 1, "/*": 1, "//github": 1, "/_server": 1, "/solid-router/reference/components/a": 2, "/solid-router/reference/components/router": 1, "\u003c/\u003e": 1, "\u003c/hashrouter\u003e": 1, "\u003c\u003e": 1, "\u003ca\u003e": 2, "\u003ch1\u003eroot": 1, "\u003chashrouter": 1, "=\u003e": 2, "\u003e-": 2, "@solidjs/router": 1, "able": 1, "access": 1, "actionbase": 1, "actions": 1, "all": 1, "an": 1, "anchors": 1, "and": 2, "app": 3, "application": 5, "approach": 2, "apps": 1, "are": 1, "as": 1, "available": 1, "base": 2, "be": 1, "because": 1, "being": 1, "boolean": 2, "browser-router": 1, "can": 1, "children": 2, "client": 1, "client-side": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/components/hash-router": 1, "compared": 1, "component": 4, "components": 2, "const": 1, "context": 1, "default": 3, "definitions": 1, "deployment": 2, "description": 2, "disables": 1, "do": 1, "document": 1, "element": 1, "enables": 1, "enables/disables": 1, "engines": 1, "experience": 1, "explicitlinks": 1, "false": 1, "file": 5, "for": 5, "friendly": 1, "from": 3, "getelementbyid": 1, "github": 1, "github-document": 1, "globally": 1, "hash": 2, "hash-router": 1, "hash-routing": 2, "hash-values": 1, "hashrouter": 4, "header\u003c/h1\u003e": 1, "hosting": 3, "html": 2, "https": 1, "import": 2, "in": 1, "index": 2, "instead": 1, "intercepted": 1, "is": 5, "isn": 1, "it": 2, "jsx": 1, "layout": 1, "level": 2, "links": 1, "manages": 1, "matched": 1, "matching": 1, "mdx": 1, "most": 1, "multi-page": 1, "navigation": 1, "no": 1, "not": 2, "of": 4, "on": 1, "only": 1, "or": 1, "page": 1, "pages": 1, "perfect": 1, "portion": 1, "preload": 1, "preloads": 1, "prop": 1, "property": 1, "props": 2, "provides": 1, "providing": 1, "relevant": 1, "render": 2, "replicate": 1, "require": 1, "requires": 1, "root": 3, "root=": 1, "route": 3, "routedefinition": 2, "router": 3, "routes": 2, "routing": 4, "run": 1, "search": 1, "see": 1, "seo": 1, "server": 3, "server-side": 1, "side": 1, "since": 1, "single": 2, "single-page": 1, "solid-js/web": 1, "spa": 1, "static": 4, "static-hosting": 1, "string": 2, "such": 1, "tags": 1, "that": 5, "the": 9, "they": 1, "this": 2, "title": 1, "to": 6, "top": 2, "true": 1, "tsx": 1, "type": 1, "url": 5, "use": 2, "use_cases": 1, "used": 2, "uses": 1, "using": 2, "values": 1, "version": 1, "way": 2, "when": 2, "where": 1, "with": 1, "wrap": 1, "your": 2 }, "length": 274 }, { "id": "a510ecfe726d685d937bac85", "doc_id": "9fefeb88b78a07a76a80c6e5", "title": "head-and-metadata", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/building-your-application/head-and-metadata.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/head-and-metadata.json", "content": "--- title: Head and metadata use_cases: \u003e- seo optimization, page titles, meta tags, og tags, social sharing, search engine visibility, dynamic metadata tags: - seo - metadata - head - title - meta - og-tags version: '1.0' description: \u003e- Manage SEO and metadata in SolidStart with dynamic titles, meta tags, and Open Graph tags for better search visibility. --- SolidStart does not come with a metadata library. In cases where you want to customize the content in the `head` of your `document`, you can use the `@solidjs/meta` library. \u003cdiv id=\"npm\"\u003e ```bash frame=\"none\" npm i @solidjs/meta ``` \u003c/div\u003e The common elements used in the [`head`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) are: - [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title): Specifies the title of the page, used by the browser tab and headings of search results. - [`meta`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta): Specifies a variety of metadata about the page specified by `name`, ranging from favicon, character set to OG tags for SEO. - [`link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link): Adds assets like stylesheets or scripts for the browser to load for the page. - [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style): Adds inline styles to the page. ## Inside a Route component When applying metadata to a specific route, you can use the `Title`: ```tsx {6} import { Title } from \"@solidjs/meta\"; export default function About() { return ( \u003c\u003e \u003cTitle\u003eAbout\u003c/Title\u003e \u003ch1\u003eAbout\u003c/h1\u003e \u003c/\u003e ); } ``` These tags will be applied for that specific route only and will be removed from `document.head` once a user navigates away from the page. `routeData` can also be used here to create titles and SEO metadata that is specific to the dynamic parts of the route. ## Adding a site suffix in Title Custom components can be created to wrap the `Title` component to add a site-specific prefix to all the titles: ```tsx {2} export default function MySiteTitle(props) { return \u003cTitle\u003e{props.children} | My Site\u003c/Title\u003e; } ``` ```tsx { 6 } import MySiteTitle from \"~/components/MySiteTitle\"; export default function About() { return ( \u003c\u003e \u003cMySiteTitle\u003eAbout\u003c/MySiteTitle\u003e \u003ch1\u003eAbout\u003c/h1\u003e \u003c/\u003e ); } ``` ## Using async data in `Title` Resources can be used to create titles specific to the dynamic parts of the route: ```tsx { 10 } import { Title } from \"@solidjs/meta\"; import { RouteSectionProps } from \"@solidjs/router\"; import { createResource, Show } from \"solid-js\"; export default function User(props: RouteSectionProps) { const [user] = createResource(() =\u003e fetchUser(props.params.id)); return ( \u003cShow when={user()}\u003e \u003cTitle\u003e{user()?.name}\u003c/Title\u003e \u003ch1\u003e{user()?.name}\u003c/h1\u003e \u003c/Show\u003e ); } ``` For this example, `routeData` can be used to retrieve the user's name from the `id` in `/users/:id` and use it in the `Title` component. Similarly, other information can be used to build up other tags for SEO. ## Adding SEO tags SEO tags like `og:title`, `og:description`, `og:image`, use the `Meta` component. Since these tags may want to be used across multiple routes, they can be added inside the `Head` of the `root.tsx` file. ```tsx { 5-15 } export default function Root() { return ( \u003cHtml lang=\"en\"\u003e \u003cHead\u003e \u003cMeta property=\"og:image\" content=\"https://example.com/image.jpg\" /\u003e \u003cMeta property=\"og:image:alt\" content=\"Welcome to my site\" /\u003e \u003cMeta property=\"og:image:width\" content=\"1200\" /\u003e \u003cMeta property=\"og:image:height\" content=\"600\" /\u003e \u003cMeta property=\"og:site_name\" content=\"GitHub\" /\u003e \u003c/Head\u003e \u003c/Html\u003e ); } ``` If you need to add route-specific information inside your route, much like the `Title` component, you can use the `Meta` component within the desired route. This overrides the `Meta` tags used within the `Head` component. ```tsx import MySiteTitle from \"~/components/MySiteTitle\"; export default function About() { return ( \u003c\u003e \u003cMySiteTitle\u003eAbout\u003c/MySiteTitle\u003e \u003cMeta name=\"description\" content=\"This is my content tag.\" /\u003e \u003cMeta property=\"og:title\" content=\"Welcome to my site!\" /\u003e \u003cMeta property=\"og:description\" content=\"A website\" /\u003e \u003ch1\u003eAbout\u003c/h1\u003e \u003c/\u003e ); } ```", "term_freq": { "##": 4, "---": 2, "//developer": 5, "//example": 1, "//github": 1, "/\u003e": 8, "/users/": 1, "10": 1, "1200": 1, "5-15": 1, "600": 1, "\u003c/\u003e": 3, "\u003c/div\u003e": 1, "\u003c/h1\u003e": 1, "\u003c/head\u003e": 1, "\u003c/html\u003e": 1, "\u003c/show\u003e": 1, "\u003c/title\u003e": 1, "\u003c\u003e": 3, "\u003cdiv": 1, "\u003ch1\u003e": 1, "\u003ch1\u003eabout\u003c/h1\u003e": 3, "\u003chead\u003e": 1, "\u003chtml": 1, "\u003cmeta": 8, "\u003cmysitetitle\u003eabout\u003c/mysitetitle\u003e": 2, "\u003cshow": 1, "\u003ctitle\u003e": 2, "\u003ctitle\u003eabout\u003c/title\u003e": 1, "=\u003e": 1, "\u003e-": 2, "@solidjs/meta": 4, "@solidjs/router": 1, "about": 4, "across": 1, "add": 2, "added": 1, "adding": 2, "adds": 2, "all": 1, "also": 1, "alt": 1, "and": 7, "applied": 1, "applying": 1, "are": 1, "assets": 1, "async": 1, "away": 1, "bash": 1, "be": 9, "better": 1, "browser": 2, "build": 1, "by": 2, "can": 9, "cases": 1, "character": 1, "children": 1, "com/image": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/building-your-application/head-and-metadata": 1, "come": 1, "common": 1, "component": 7, "components": 1, "const": 1, "content": 2, "content=": 8, "create": 2, "created": 1, "createresource": 2, "custom": 1, "customize": 1, "data": 1, "default": 6, "description": 4, "desired": 1, "document": 2, "does": 1, "dynamic": 4, "elements": 1, "en": 1, "engine": 1, "example": 1, "export": 6, "favicon": 1, "fetchuser": 1, "file": 1, "for": 7, "frame=": 1, "from": 10, "function": 6, "github": 1, "github-document": 1, "graph": 1, "head": 7, "head-and-metadata": 1, "headings": 1, "height": 1, "here": 1, "https": 7, "id": 3, "id=": 1, "if": 1, "image": 5, "import": 6, "in": 8, "information": 2, "inline": 1, "inside": 3, "is": 2, "it": 1, "jpg": 1, "lang=": 1, "library": 2, "like": 3, "link": 1, "load": 1, "manage": 1, "may": 1, "mdx": 1, "meta": 7, "metadata": 8, "mozilla": 5, "much": 1, "multiple": 1, "my": 4, "mysitetitle": 3, "name": 4, "name=": 1, "navigates": 1, "need": 1, "none": 1, "not": 1, "npm": 2, "of": 7, "og": 12, "og-tags": 1, "once": 1, "only": 1, "open": 1, "optimization": 1, "or": 1, "org/en-us/docs/web/html/element/head": 1, "org/en-us/docs/web/html/element/link": 1, "org/en-us/docs/web/html/element/meta": 1, "org/en-us/docs/web/html/element/style": 1, "org/en-us/docs/web/html/element/title": 1, "other": 2, "overrides": 1, "page": 6, "params": 1, "parts": 2, "prefix": 1, "property=": 7, "props": 4, "ranging": 1, "removed": 1, "resources": 1, "results": 1, "retrieve": 1, "return": 6, "root": 2, "route": 7, "route-specific": 1, "routedata": 2, "routes": 1, "routesectionprops": 2, "scripts": 1, "search": 3, "seo": 8, "set": 1, "sharing": 1, "show": 1, "similarly": 1, "since": 1, "site": 3, "site-specific": 1, "site\u003c/title\u003e": 1, "site_name": 1, "social": 1, "solid-js": 1, "solidstart": 2, "specific": 4, "specified": 1, "specifies": 2, "style": 1, "styles": 1, "stylesheets": 1, "suffix": 1, "tab": 1, "tag": 1, "tags": 12, "that": 2, "the": 31, "these": 2, "they": 1, "this": 3, "title": 14, "titles": 5, "to": 18, "tsx": 7, "up": 1, "use": 5, "use_cases": 1, "used": 8, "user": 7, "using": 1, "variety": 1, "version": 1, "visibility": 2, "want": 2, "website": 1, "welcome": 2, "when": 1, "when=": 1, "where": 1, "width": 1, "will": 2, "with": 2, "within": 2, "wrap": 1, "you": 5, "your": 2, "~/components/mysitetitle": 2 }, "length": 582 }, { "id": "d1a9282817b72b20867639a8", "doc_id": "7e44cd3d8d59a8e5f1482303", "title": "Hot Module Replacement | Remix", "url": "https://v2.remix.run/docs/discussion/hot-module-replacement", "type": "html", "source": "remix:does", "path": "devour_data/docs/hot-module-replacement---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsHot Module ReplacementGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageReact Fast RefreshClass Component StateNamed Function ComponentsSupported ExportsChanging HooksComponent KeysOn this pageReact Fast RefreshClass Component StateNamed Function ComponentsSupported ExportsChanging HooksComponent KeysHot Module Replacement Hot Module Replacement is a technique for updating modules in your app without needing to reload the page. It's a great developer experience, and Remix supports it out of the box. Notably, HMR does its best to preserve browser state across updates. If you have a form within a modal, and you fill out all the fields, traditional live reload would hard refresh the page. So you'd lose all the data in the form. Every time you make a change, you'd have to open up the modal again and fill out the form again. 😭 But with HMR, all that state is preserved across updates. ✨ React Fast Refresh React already has mechanisms for updating the DOM via its virtual DOM in response to user interactions like clicking a button. Wouldn't it be great if React could handle updating the DOM in response to code changes too? That's exactly what React Fast Refresh is all about! Of course, React is all about components, not general JavaScript code, so RFR by itself only handles hot updates for exported React components. But React Fast Refresh does have some limitations that you should be aware of. Class Component State React Fast Refresh does not preserve state for class components. This includes higher-order components that internally return classes: export class ComponentA extends Component {} // ❌ export const ComponentB = HOC(ComponentC); // ❌ Won't work if HOC returns a class component export function ComponentD() {} // ✅ export const ComponentE = () =\u003e {}; // ✅ export default function ComponentF() {} // ✅ Named Function Components Function components must be named, not anonymous, for React Fast Refresh to track changes: export default () =\u003e {}; // ❌ export default function () {} // ❌ const ComponentA = () =\u003e {}; export default ComponentA; // ✅ export default function ComponentB() {} // ✅ Supported Exports React Fast Refresh can only handle component exports. While Remix manages special route exports like action, headers, links, loader, and meta for you, any user-defined exports will cause full reloads: // These exports are handled by the Remix Vite plugin // to be HMR-compatible export const meta = { title: \"Home\" }; // ✅ export const links = [ { rel: \"stylesheet\", href: \"style.css\" }, ]; // ✅ // These exports are removed by the Remix Vite plugin // so they never affect HMR export const headers = { \"Cache-Control\": \"max-age=3600\" }; // ✅ export const loader = async () =\u003e {}; // ✅ export const action = async () =\u003e {}; // ✅ // This is not a Remix export, nor a component export, // so it will cause a full reload for this route export const myValue = \"some value\"; // ❌ export default function Route() {} // ✅ 👆 Routes probably shouldn't be exporting random values like that anyway. If you want to reuse values across routes, stick them in their own non-route module: export const myValue = \"some value\"; Changing Hooks React Fast Refresh cannot track changes for a component when hooks are being added or removed from it, causing full reloads just for the next render. After the hooks have been updated, changes should result in hot updates again. For example, if you add useLoaderData to your component, you may lose state local to that component for that render. Additionally, if you are destructuring a hook's return value, React Fast Refresh will not be able to preserve state for the component if the destructured key is removed or renamed. For example: export const loader = async () =\u003e { return json({ stuff: \"some things\" }); }; export default function Component() { const { stuff } = useLoaderData\u003ctypeof loader\u003e(); return ( \u003cdiv\u003e \u003cinput /\u003e \u003cp\u003e{stuff}\u003c/p\u003e \u003c/div\u003e ); } If you change the key stuff to things: export const loader = async () =\u003e { - return json({ stuff: \"some things\" }) + return json({ things: \"some things\" }) } export default Component() { - const { stuff } = useLoaderData\u003ctypeof loader\u003e() + const { things } = useLoaderData\u003ctypeof loader\u003e() return ( \u003cdiv\u003e \u003cinput /\u003e - \u003cp\u003e{stuff}\u003c/p\u003e + \u003cp\u003e{things}\u003c/p\u003e \u003c/div\u003e ) } then React Fast Refresh will not be able to preserve state \u003cinput /\u003e ❌. As a workaround, you could refrain from destructuring and instead use the hook's return value directly: export const loader = async () =\u003e { return json({ stuff: \"some things\" }); }; export default function Component() { const data = useLoaderData\u003ctypeof loader\u003e(); return ( \u003cdiv\u003e \u003cinput /\u003e \u003cp\u003e{data.stuff}\u003c/p\u003e \u003c/div\u003e ); } Now if you change the key stuff to things: export const loader = async () =\u003e { - return json({ stuff: \"some things\" }) + return json({ things: \"some things\" }) } export default Component() { const data = useLoaderData\u003ctypeof loader\u003e() return ( \u003cdiv\u003e \u003cinput /\u003e - \u003cp\u003e{data.stuff}\u003c/p\u003e + \u003cp\u003e{data.things}\u003c/p\u003e \u003c/div\u003e ) } Then React Fast Refresh will preserve state for the \u003cinput /\u003e, though you may need to use component keys as described in the next section if the stateful element (e.g. \u003cinput /\u003e) is a sibling of the changed element. Component Keys In some cases, React cannot distinguish between existing components being changed and new components being added. React needs keys to disambiguate these cases and track changes when sibling elements are modified.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_982\\\":-5,\\\"_983\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":981},{\\\"_18\\\":150},\\\"docs/discussion/hot-module-replacement.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"hot-module-replacement\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#hot-module-replacement\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eHot Module Replacement\\u003c/h1\\u003e\\\\n\\u003cp\\u003eHot Module Replacement is a technique for updating modules in your app without needing to reload the page.\\\\nIt's a great developer experience, and Remix supports it out of the box.\\u003c/p\\u003e\\\\n\\u003cp\\u003eNotably, HMR does its best to preserve browser state across updates.\\\\nIf you have a \\u003ccode\\u003eform\\u003c/code\\u003e within a modal, and you fill out all the fields, traditional live reload would hard refresh the page.\\\\nSo you'd lose all the data in the form.\\\\nEvery time you make a change, you'd have to open up the modal \\u003cem\\u003eagain\\u003c/em\\u003e and fill out the form \\u003cem\\u003eagain\\u003c/em\\u003e. 😭\\u003c/p\\u003e\\\\n\\u003cp\\u003eBut with HMR, all that state is preserved \\u003cem\\u003eacross updates\\u003c/em\\u003e. ✨\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"react-fast-refresh\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#react-fast-refresh\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eReact Fast Refresh\\u003c/h2\\u003e\\\\n\\u003cp\\u003eReact already has mechanisms for updating the DOM via its \\u003ca href=\\\\\\\"https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom\\\\\\\"\\u003evirtual DOM\\u003c/a\\u003e in response to user interactions like clicking a button.\\\\nWouldn't it be great if React could handle updating the DOM in response to code changes too?\\u003c/p\\u003e\\\\n\\u003cp\\u003eThat's exactly what \\u003ca href=\\\\\\\"https://github.com/facebook/react/tree/main/packages/react-refresh\\\\\\\"\\u003eReact Fast Refresh\\u003c/a\\u003e is all about!\\\\nOf course, React is all about components, not general JavaScript code, so RFR by itself only handles hot updates for exported React components.\\u003c/p\\u003e\\\\n\\u003cp\\u003eBut React Fast Refresh does have some limitations that you should be aware of.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"class-component-state\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#class-component-state\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eClass Component State\\u003c/h3\\u003e\\\\n\\u003cp\\u003eReact Fast Refresh does not preserve state for class components.\\\\nThis includes higher-order components that internally return classes:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eclass\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eComponentA\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eextends\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eComponent\\u003c/span\\u003e {} \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ❌\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eComponentB\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eHOC\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eComponentC\\u003c/span\\u003e); \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ❌ Won't work if HOC returns a class component\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponentD\\u003c/span\\u003e() {} \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ✅\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponentE\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {}; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ✅\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponentF\\u003c/span\\u003e() {} \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ✅\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3 id=\\\\\\\"named-function-components\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#named-function-components\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNamed Function Components\\u003c/h3\\u003e\\\\n\\u003cp\\u003eFunction components must be named, not anonymous, for React Fast Refresh to track changes:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {}; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ❌\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e () {} \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ❌\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponentA\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eComponentA\\u003c/span\\u003e; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ✅\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponentB\\u003c/span\\u003e() {} \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ✅\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3 id=\\\\\\\"supported-exports\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#supported-exports\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSupported Exports\\u003c/h3\\u003e\\\\n\\u003cp\\u003eReact Fast Refresh can only handle component exports. While Remix manages special route exports like \\u003ca href=\\\\\\\"../route/action\\\\\\\"\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e, \\u003ca href=\\\\\\\"../route/headers\\\\\\\"\\u003e\\u003ccode\\u003eheaders\\u003c/code\\u003e\\u003c/a\\u003e, \\u003ca href=\\\\\\\"../route/links\\\\\\\"\\u003e\\u003ccode\\u003elinks\\u003c/code\\u003e\\u003c/a\\u003e, \\u003ca href=\\\\\\\"../route/loader\\\\\\\"\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e, and \\u003ca href=\\\\\\\"../route/meta\\\\\\\"\\u003e\\u003ccode\\u003emeta\\u003c/code\\u003e\\u003c/a\\u003e for you, any user-defined exports will cause full reloads:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// These exports are handled by the Remix Vite plugin\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// to be HMR-compatible\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e { title: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eHome\\u003c/span\\u003e\\\\\\\" }; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ✅\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elinks\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e { rel: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003estylesheet\\u003c/span\\u003e\\\\\\\", href: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003estyle.css\\u003c/span\\u003e\\\\\\\" },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e]; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ✅\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// These exports are removed by the Remix Vite plugin\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// so they never affect HMR\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eheaders\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e { \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eCache-Control\\u003c/span\\u003e\\\\\\\": \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003emax-age=3600\\u003c/span\\u003e\\\\\\\" }; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ✅\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {}; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ✅\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {}; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ✅\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// This is not a Remix export, nor a component export,\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// so it will cause a full reload for this route\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emyValue\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esome value\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ❌\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eRoute\\u003c/span\\u003e() {} \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ✅\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👆 Routes probably shouldn't be exporting random values like that anyway.\\\\nIf you want to reuse values across routes, stick them in their own non-route module:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"my-custom-value.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"my-custom-value.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emyValue\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esome value\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3 id=\\\\\\\"changing-hooks\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#changing-hooks\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eChanging Hooks\\u003c/h3\\u003e\\\\n\\u003cp\\u003eReact Fast Refresh cannot track changes for a component when hooks are being added or removed from it, causing full reloads just for the next render. After the hooks have been updated, changes should result in hot updates again. For example, if you add \\u003ca href=\\\\\\\"../hooks/use-loader-data\\\\\\\"\\u003e\\u003ccode\\u003euseLoaderData\\u003c/code\\u003e\\u003c/a\\u003e to your component, you may lose state local to that component for that render.\\u003c/p\\u003e\\\\n\\u003cp\\u003eAdditionally, if you are destructuring a hook's return value, React Fast Refresh will not be able to preserve state for the component if the destructured key is removed or renamed.\\\\nFor example:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({ stuff: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esome things\\u003c/span\\u003e\\\\\\\" });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponent\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estuff\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estuff\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eIf you change the key \\u003ccode\\u003estuff\\u003c/code\\u003e to \\u003ccode\\u003ethings\\u003c/code\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e export const loader = async () =\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e return json({ stuff: \\\\\\\"some things\\\\\\\" })\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e return json({ things: \\\\\\\"some things\\\\\\\" })\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e export default Component() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e const { stuff } = useLoaderData\\u0026#x3C;typeof loader\\u003e()\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e const { things } = useLoaderData\\u0026#x3C;typeof loader\\u003e()\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e return (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;div\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;input /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e \\u0026#x3C;p\\u003e{stuff}\\u0026#x3C;/p\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u0026#x3C;p\\u003e{things}\\u0026#x3C;/p\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;/div\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e )\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethen React Fast Refresh will not be able to preserve state \\u003ccode\\u003e\\u0026#x3C;input /\\u003e\\u003c/code\\u003e ❌.\\u003c/p\\u003e\\\\n\\u003cp\\u003eAs a workaround, you could refrain from destructuring and instead use the hook's return value directly:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({ stuff: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esome things\\u003c/span\\u003e\\\\\\\" });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponent\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estuff\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNow if you change the key \\u003ccode\\u003estuff\\u003c/code\\u003e to \\u003ccode\\u003ethings\\u003c/code\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e export const loader = async () =\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e return json({ stuff: \\\\\\\"some things\\\\\\\" })\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e return json({ things: \\\\\\\"some things\\\\\\\" })\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e export default Component() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e const data = useLoaderData\\u0026#x3C;typeof loader\\u003e()\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e return (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;div\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;input /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e \\u0026#x3C;p\\u003e{data.stuff}\\u0026#x3C;/p\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u0026#x3C;p\\u003e{data.things}\\u0026#x3C;/p\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;/div\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e )\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThen React Fast Refresh will preserve state for the \\u003ccode\\u003e\\u0026#x3C;input /\\u003e\\u003c/code\\u003e, though you may need to use component keys as described in the next section if the stateful element (e.g. \\u003ccode\\u003e\\u0026#x3C;input /\\u003e\\u003c/code\\u003e) is a sibling of the changed element.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"component-keys\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#component-keys\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eComponent Keys\\u003c/h3\\u003e\\\\n\\u003cp\\u003eIn some cases, React cannot distinguish between existing components being changed and new components being added. \\u003ca href=\\\\\\\"https://react.dev/learn/rendering-lists#why-does-react-need-keys\\\\\\\"\\u003eReact needs \\u003ccode\\u003ekey\\u003c/code\\u003es\\u003c/a\\u003e to disambiguate these cases and track changes when sibling elements are modified.\\u003c/p\\u003e\\\",\\\"docs/discussion/hot-module-replacement\\\",\\\"headings\\\",[960,965,969,972,975,978],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"React Fast Refresh\\\",\\\"react-fast-refresh\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":968},\\\"h3\\\",\\\"Class Component State\\\",\\\"class-component-state\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":971},\\\"Named Function Components\\\",\\\"named-function-components\\\",{\\\"_961\\\":966,\\\"_955\\\":973,\\\"_24\\\":974},\\\"Supported Exports\\\",\\\"supported-exports\\\",{\\\"_961\\\":966,\\\"_955\\\":976,\\\"_24\\\":977},\\\"Changing Hooks\\\",\\\"changing-hooks\\\",{\\\"_961\\\":966,\\\"_955\\\":979,\\\"_24\\\":980},\\\"Component Keys\\\",\\\"component-keys\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#changing-hooks\\\\\\": 1, "#class-component-state\\\\\\": 1, "#component-keys\\\\\\": 1, "#hot-module-replacement\\\\\\": 1, "#named-function-components\\\\\\": 1, "#react-fast-refresh\\\\\\": 1, "#supported-exports\\\\\\": 1, "$\\": 1, "$rc": 3, "--base03": 22, "--base05": 8, "--base08": 30, "--base0a": 15, "--base0b": 15, "--base0d": 31, "--base0e": 55, "--base0f": 4, "-1\\\\\\": 7, "-5": 2, "/$": 1, "//": 22, "//github": 1, "//react": 1, "//reactjs": 1, "//v2": 2, "/\u003e": 7, "/\\u003cspan": 4, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "/\\u003e\\u003c/code\\u003e": 3, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/div\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "/hooks/use-loader-data\\\\\\": 1, "/p\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "/route/action\\\\\\": 1, "/route/headers\\\\\\": 1, "/route/links\\\\\\": 1, "/route/loader\\\\\\": 1, "/route/meta\\\\\\": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 5, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 5, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 5, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 5, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 3, "15": 1, "150": 2, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 3, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 2, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "1\\\\\\": 8, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 7, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 7, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 7, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 7, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 7, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 7, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 5, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 1, "963": 1, "964": 1, "965": 1, "966": 5, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "976": 1, "977": 1, "978": 1, "979": 1, "98": 1, "980": 1, "981": 1, "99": 1, "9\\\\\\": 5, "\u003c/div\u003e": 4, "\u003c/p\u003e": 6, "\u003cdiv\u003e": 4, "\u003cinput": 7, "\u003cp\u003e": 6, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 10, "=\\u003e": 2, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 202, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eif": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enow": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethen": 2, "\\\\n\\u003c/span\\u003e\\u003cspan": 28, "\\\\nevery": 1, "\\\\nfor": 1, "\\\\nif": 2, "\\\\nit": 1, "\\\\nof": 1, "\\\\nso": 1, "\\\\nthis": 1, "\\\\nwouldn": 1, "\\n": 1, "\\u0026#x3c": 22, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 8, "\\u003c/p\\u003e\\\\n\\u003ch3": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eadditionally": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eas": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ebut": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003enotably": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethat": 1, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 7, "\\u003c/span\\u003e\\u0026#x3c": 2, "\\u003c/span\\u003e\\u003cspan": 2, "\\u003ca": 9, "\\u003ccode\\u003e\\u0026#x3c": 3, "\\u003ccode\\u003eform\\u003c/code\\u003e": 1, "\\u003ccode\\u003ekey\\u003c/code\\u003es\\u003c/a\\u003e": 1, "\\u003ccode\\u003estuff\\u003c/code\\u003e": 2, "\\u003ccode\\u003ethings\\u003c/code\\u003e": 2, "\\u003cem\\u003eacross": 1, "\\u003cem\\u003eagain\\u003c/em\\u003e": 2, "\\u003ch1": 1, "\\u003cspan": 124, "\\u003e": 55, "\\u003e+\\u003cspan": 5, "\\u003e-\\u003cspan": 5, "\\u003e//": 22, "\\u003e=\\u003c/span\\u003e": 14, "\\u003e=\\u003e\\u003c/span\\u003e": 7, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 11, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003echanging": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eclass": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ecomponent": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ehot": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003enamed": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ereact": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003esupported": 1, "\\u003e\\u003ca": 7, "\\u003e\\u003ccode\\u003e\\u003cspan": 8, "\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eheaders\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003elinks\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003emeta\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003euseloaderdata\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003cpre": 8, "\\u003e\\u003cspan": 35, "\\u003eaction\\u003c/span\\u003e": 1, "\\u003easync\\u003c/span\\u003e": 4, "\\u003ecache-control\\u003c/span\\u003e\\\\\\": 1, "\\u003eclass\\u003c/span\\u003e": 1, "\\u003ecomponent\\u003c/span\\u003e": 3, "\\u003ecomponenta\\u003c/span\\u003e": 3, "\\u003ecomponentb\\u003c/span\\u003e": 2, "\\u003ecomponentc\\u003c/span\\u003e": 1, "\\u003ecomponentd\\u003c/span\\u003e": 1, "\\u003ecomponente\\u003c/span\\u003e": 1, "\\u003ecomponentf\\u003c/span\\u003e": 1, "\\u003econst\\u003c/span\\u003e": 14, "\\u003edata\\u003c/span\\u003e": 2, "\\u003edefault\\u003c/span\\u003e": 8, "\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "\\u003eexport\\u003c/span\\u003e": 21, "\\u003eextends\\u003c/span\\u003e": 1, "\\u003efunction\\u003c/span\\u003e": 7, "\\u003eheaders\\u003c/span\\u003e": 1, "\\u003ehoc\\u003c/span\\u003e": 1, "\\u003ehome\\u003c/span\\u003e\\\\\\": 1, "\\u003einput\\u003c/span\\u003e": 2, "\\u003ejson\\u003c/span\\u003e": 2, "\\u003elinks\\u003c/span\\u003e": 1, "\\u003eloader\\u003c/span\\u003e": 3, "\\u003eloader\\u003c/span\\u003e\\u003e": 2, "\\u003emax-age=3600\\u003c/span\\u003e\\\\\\": 1, "\\u003emeta\\u003c/span\\u003e": 1, "\\u003emyvalue\\u003c/span\\u003e": 2, "\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan": 2, "\\u003ereact": 2, "\\u003ereturn\\u003c/span\\u003e": 4, "\\u003eroute\\u003c/span\\u003e": 1, "\\u003esome": 4, "\\u003estuff\\u003c/span\\u003e": 1, "\\u003estuff\\u003c/span\\u003e\\u003cspan": 2, "\\u003estyle": 1, "\\u003estylesheet\\u003c/span\\u003e\\\\\\": 1, "\\u003etypeof\\u003c/span\\u003e": 2, "\\u003euseloaderdata\\u003c/span\\u003e\\u0026#x3c": 2, "\\u003evirtual": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 158, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 7, "_958\\": 1, "_961\\": 6, "_982\\": 1, "_983\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "able": 4, "about": 5, "accessibility\\": 1, "across": 5, "action": 2, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "add": 2, "added": 4, "additionally": 1, "affect": 2, "after": 2, "again": 4, "all": 11, "already": 2, "an": 1, "and": 23, "anonymous": 2, "any": 2, "anyway": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 4, "approach": 1, "are": 10, "aria-hidden=\\\\\\": 7, "as": 6, "asked": 1, "asset": 3, "async": 8, "at": 1, "attrs\\": 1, "await\\": 1, "aware": 2, "b=document": 1, "backend": 3, "basename": 1, "be": 15, "been": 4, "before": 1, "being": 6, "best": 2, "between": 2, "box": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 5, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 2, "button": 2, "by": 6, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "cache-control": 1, "can": 3, "cannot": 4, "cases": 4, "catch": 1, "cause": 4, "causing": 2, "change": 6, "changed": 4, "changelog": 2, "changelog\\": 1, "changes": 10, "changing": 2, "changing-hooks\\": 1, "changing-hooks\\\\\\": 1, "children\\": 1, "class": 7, "class-component-state\\": 1, "class-component-state\\\\\\": 1, "class=\\\\\\": 97, "classes": 2, "cli": 5, "cli\\": 1, "clicking": 2, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "code": 8, "codeblock-line\\\\\\": 90, "color": 180, "com/facebook/react/tree/main/packages/react-refresh\\\\\\": 1, "community": 3, "community\\": 1, "component": 31, "component-keys\\": 1, "component-keys\\\\\\": 1, "component\\": 1, "component\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "componenta": 3, "componentb": 2, "componentc": 1, "componentd": 1, "componente": 1, "componentf": 1, "components": 16, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 3, "components\\u003c/h3\\u003e\\\\n\\u003cp\\u003efunction": 1, "componentsawait": 2, "componentssupported": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 1, "const": 24, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "could": 4, "course": 2, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 16, "css\\": 1, "css\\u003c/span\\u003e\\\\\\": 1, "d=c": 2, "data": 26, "data-code-block=\\\\\\": 8, "data-filename=\\\\\\": 2, "data-lang=\\\\\\": 16, "data-line-number=\\\\\\": 90, "data-line-numbers=\\\\\\": 16, "data=": 1, "data\\": 2, "default": 12, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 3, "deployment": 4, "deployment\\": 2, "described": 2, "description\\": 1, "destructured": 2, "destructuring": 4, "dev": 3, "dev/learn/rendering-lists#why-does-react-need-keys\\\\\\": 1, "developer": 2, "development": 3, "diff\\\\\\": 4, "directly": 2, "disabling": 3, "disambiguate": 2, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "distinguish": 2, "div\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "do": 1, "doc\\": 1, "docs/discussion/hot-module-replacement": 1, "docs/discussion/hot-module-replacement\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docshot": 1, "document": 1, "does": 6, "dom": 5, "dom\\u003c/a\\u003e": 1, "done": 1, "e--": 1, "e=0": 1, "element": 4, "elements": 2, "else": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "every": 1, "everything": 1, "exactly": 2, "example": 4, "examples": 1, "execution": 2, "execution\\": 1, "existing": 2, "experience": 2, "explanation": 2, "explanation\\": 1, "export": 33, "exported": 2, "exporting": 2, "exports": 11, "exports\\": 1, "exports\\u003c/h3\\u003e\\\\n\\u003cp\\u003ereact": 1, "exportschanging": 2, "extends": 1, "extract": 2, "extract\\": 1, "f=a": 1, "false": 3, "faqs": 2, "faqs\\": 1, "fast": 23, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "fields": 2, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "fill": 4, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "for": 33, "form": 16, "form\\": 1, "found": 3, "frequently": 1, "from": 10, "frontend": 2, "frontend\\": 1, "full": 6, "fullstack": 3, "function": 14, "future": 4, "general": 2, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "gotchas": 2, "gotchas\\": 1, "great": 4, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "h3\\": 1, "handle": 6, "handle\\": 1, "handled": 2, "handles": 2, "handling": 4, "handling\\": 2, "hard": 2, "has": 4, "hascontent\\": 1, "have": 8, "headers": 4, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 1, "higher-order": 2, "history": 4, "hmr": 5, "hmr-compatible": 1, "hmr-compatible\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "hmr\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "hoc": 3, "home": 1, "hook": 4, "hooks": 5, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 3, "hooks\\u003c/h3\\u003e\\\\n\\u003cp\\u003ereact": 1, "hookscomponent": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 9, "hot-module-replacement\\\\\\": 1, "how": 1, "href": 2, "href=\\\\\\": 16, "html": 1, "html#what-is-the-virtual-dom\\\\\\": 1, "html\\": 1, "https": 5, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 7, "icon-link\\\\\\": 7, "id=\\\\\\": 7, "if": 23, "import": 5, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 21, "inc": 1, "includes": 2, "index": 3, "initial": 1, "input": 5, "insertbefore": 1, "instead": 2, "integrating": 1, "interactions": 3, "internally": 2, "into": 2, "introduction": 1, "is": 15, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 9, "iterative": 1, "its": 4, "itself": 2, "javascript": 4, "javascript\\": 1, "js": 7, "js\\": 1, "json": 13, "json\\": 1, "just": 2, "key": 10, "keys": 4, "keys\\": 1, "keys\\u003c/h3\\u003e\\\\n\\u003cp\\u003ein": 1, "keyshot": 1, "keyson": 1, "know": 1, "lazy": 3, "learning": 1, "let": 3, "licensed": 1, "like": 6, "limitations": 2, "link": 2, "link\\": 1, "links": 6, "links\\": 2, "live": 2, "livereload": 2, "livereload\\": 1, "loader": 10, "loader\u003e": 5, "loader\\": 1, "loader\\u003e": 3, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 5, "localhost\\": 1, "lose": 4, "make": 2, "makes": 1, "management": 4, "management\\": 2, "manages": 2, "manual": 3, "math": 1, "max-age=3600": 1, "may": 4, "md\\": 152, "mdx": 3, "mdx\\": 1, "mechanisms": 2, "menu\\": 1, "meta": 6, "meta\\": 2, "migrating": 4, "mitedit": 1, "modal": 4, "mode": 3, "mode\\": 1, "modified": 2, "module": 14, "module\\": 1, "moduleaction": 2, "modules": 8, "modules\\": 3, "most": 1, "must": 2, "my-custom-value": 2, "myvalue": 2, "named": 4, "named-function-components\\": 1, "named-function-components\\\\\\": 1, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 3, "needing": 2, "needs": 2, "network": 3, "never": 2, "new": 4, "new\\": 1, "next": 4, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "non-route": 2, "nor": 2, "not": 15, "notably": 1, "now": 1, "null": 1, "number": 1, "of": 10, "on": 3, "once": 1, "one": 1, "only": 4, "open": 3, "optimization": 2, "optimization\\": 1, "or": 5, "order\\": 1, "org/docs/faq-internals": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 7, "outlet": 2, "outlet\\": 1, "own": 2, "p\\u003e": 4, "page": 4, "pagereact": 2, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "plugin": 2, "plugin\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "positions": 2, "postcss": 2, "postcss\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "preserve": 10, "preserved": 2, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "probably": 2, "progressive": 3, "project": 1, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 3, "react": 34, "react-fast-refresh\\": 1, "react-fast-refresh\\\\\\": 1, "react-router-scroll-positions": 1, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "refrain": 2, "refresh": 20, "refresh\\": 1, "refresh\\u003c/a\\u003e": 1, "refresh\\u003c/h2\\u003e\\\\n\\u003cp\\u003ereact": 1, "refreshclass": 2, "regular": 3, "rel": 2, "related": 1, "released": 2, "reload": 6, "reloads": 4, "remix": 20, "remix\\": 2, "removechild": 2, "removed": 6, "removeitem": 1, "renamed": 2, "render": 4, "replace": 2, "replace\\": 1, "replacement": 6, "replacement\\": 1, "replacement\\u003c/h1\\u003e\\\\n\\u003cp\\u003ehot": 1, "replacementgetting": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 1, "response": 4, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "result": 2, "return": 22, "returns": 2, "reuse": 2, "rfr": 2, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 16, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "route\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 9, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/discussion/hot-module-replacement": 1, "run\\": 1, "running": 1, "runtimes": 3, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "section": 2, "server": 15, "server\\": 3, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "should": 4, "shouldn": 2, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "sibling": 4, "simplifying": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "so": 7, "some": 16, "spa": 3, "special": 2, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 21, "state\\": 1, "state\\u003c/h3\\u003e\\\\n\\u003cp\\u003ereact": 1, "stateful": 2, "statenamed": 2, "stick": 2, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "stuff": 19, "style": 1, "style=\\\\\\": 180, "stylesheet": 1, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 3, "support\\": 1, "supported": 2, "supported-exports\\": 1, "supported-exports\\\\\\": 1, "supports": 2, "tabindex=\\\\\\": 7, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technique": 2, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 13, "the": 52, "their": 2, "them": 2, "then": 2, "these": 6, "they": 2, "things": 18, "things\\\\\\": 4, "things\\u003c/span\\u003e\\\\\\": 2, "this": 9, "though": 2, "through": 1, "time": 2, "title": 2, "title\\": 1, "tls": 2, "tls\\": 1, "to": 42, "toc\\": 1, "too": 2, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "track": 6, "traditional": 2, "true": 6, "true\\\\\\": 23, "try": 1, "ts": 2, "ts\\": 1, "ts\\\\\\": 2, "tsx\\\\\\": 10, "tutorial": 3, "typeof": 4, "typescript": 2, "typescript\\": 1, "typescript\\\\\\": 2, "ui": 2, "ui\\": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 2, "updated": 2, "updates": 7, "updates\\u003c/em\\u003e": 1, "updating": 6, "upgrading": 3, "uploads": 2, "uploads\\": 1, "use": 4, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 3, "useloaderdata\u003ctypeof": 5, "useloaderdata\\": 1, "useloaderdata\\u0026#x3c": 3, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 2, "user-defined": 2, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "value": 6, "value\\u003c/span\\u003e\\\\\\": 2, "values": 4, "vanilla": 3, "var": 182, "variables": 2, "variables\\": 1, "via": 2, "view": 2, "virtual": 1, "vite": 9, "vite\\": 1, "vs": 6, "walk": 1, "want": 2, "way": 1, "what": 2, "when": 5, "while": 3, "why": 1, "will": 12, "window": 11, "with": 6, "within": 2, "without": 2, "won": 2, "work": 2, "workaround": 2, "would": 2, "wouldn": 1, "writes": 2, "writes\\": 1, "you": 35, "your": 7, "||": 3, "©": 1, "•docs": 1, "✅": 11, "✅\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3": 2, "✅\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👆": 1, "✅\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 8, "✨": 1, "✨\\u003c/p\\u003e\\\\n\\u003ch2": 1, "❌": 8, "❌\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2, "👆": 1, "😭": 1, "😭\\u003c/p\\u003e\\\\n\\u003cp\\u003ebut": 1 }, "length": 7160 }, { "id": "6ebefb21a63ec47c75e014f1", "doc_id": "c00303e3945842923aedef3b", "title": "http-header", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/server/http-header.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/http-header.json", "content": "--- title: HttpHeader use_cases: \u003e- security headers, cors configuration, cache control, seo headers, custom headers, api responses tags: - headers - http - response - security - cors - meta version: '1.0' description: \u003e- Set custom HTTP headers in SolidStart responses. Configure security, caching, CORS, and SEO headers for server-rendered pages. --- `HttpHeader` provides a way to set headers on HTTPs response sent by the server. ```tsx import { HttpHeader } from \"@solidjs/start\"; \u003cHttpHeader name=\"x-robots-tag\" value=\"noindex\" /\u003e; ``` ## Setting a header for catch-all routes ```tsx title=\"routes/*404.tsx\" import { HttpHeader, HttpStatusCode } from \"@solidjs/start\"; export default function NotFound() { return ( \u003cdiv\u003e \u003cHttpStatusCode code={404} /\u003e \u003cHttpHeader name=\"my-header\" value=\"header-value\" /\u003e \u003c/div\u003e ); } ``` As a page is rendered, you may want to add additional HTTP headers to the response and the `HttpHeader` component will do that for you. By passing it a `name` and `value`, they will get added to the `Response` headers sent back to the browser. When streaming responses with [`renderToStream`](/reference/rendering/render-to-stream), HTTP headers can only be added before the stream is first flushed. This requires adding `deferStream` to any resources that need to be loaded before responding. ## Parameters | Property | Type | Description | | -------- | ------ | ------------------------------ | | name | string | The name of the header to set | | value | string | The value of the header to set |", "term_freq": { "##": 2, "---": 2, "------": 1, "--------": 1, "------------------------------": 1, "//github": 1, "/\u003e": 3, "/reference/rendering/render-to-stream": 1, "404": 1, "\u003c/div\u003e": 1, "\u003cdiv\u003e": 1, "\u003chttpheader": 2, "\u003chttpstatuscode": 1, "\u003e-": 2, "@solidjs/start": 2, "add": 1, "added": 2, "adding": 1, "additional": 1, "and": 3, "any": 1, "api": 1, "as": 1, "back": 1, "be": 2, "before": 2, "browser": 1, "by": 2, "cache": 1, "caching": 1, "can": 1, "catch-all": 1, "code=": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/server/http-header": 1, "component": 1, "configuration": 1, "configure": 1, "control": 1, "cors": 3, "custom": 2, "default": 1, "deferstream": 1, "description": 2, "do": 1, "export": 1, "first": 1, "flushed": 1, "for": 3, "from": 2, "function": 1, "get": 1, "github-document": 1, "header": 3, "header-value": 1, "headers": 10, "http": 4, "http-header": 1, "httpheader": 5, "https": 2, "httpstatuscode": 1, "import": 2, "in": 1, "is": 2, "it": 1, "loaded": 1, "may": 1, "mdx": 1, "meta": 1, "my-header": 1, "name": 3, "name=": 2, "need": 1, "noindex": 1, "notfound": 1, "of": 2, "on": 1, "only": 1, "page": 1, "pages": 1, "parameters": 1, "passing": 1, "property": 1, "provides": 1, "rendered": 1, "rendertostream": 1, "requires": 1, "resources": 1, "responding": 1, "response": 4, "responses": 3, "return": 1, "routes": 1, "routes/*404": 1, "security": 3, "sent": 2, "seo": 2, "server": 1, "server-rendered": 1, "set": 4, "setting": 1, "solidstart": 1, "stream": 1, "streaming": 1, "string": 2, "tags": 1, "that": 2, "the": 10, "they": 1, "this": 1, "title": 1, "title=": 1, "to": 9, "tsx": 3, "type": 1, "use_cases": 1, "value": 3, "value=": 2, "version": 1, "want": 1, "way": 1, "when": 1, "will": 2, "with": 1, "x-robots-tag": 1, "you": 2 }, "length": 208 }, { "id": "34bc8628ccc87af8c1c357f5", "doc_id": "3dcf67404507c12df8133ab8", "title": "http-status-code", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/server/http-status-code.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/http-status-code.json", "content": "--- title: HttpStatusCode use_cases: \u003e- error pages, 404 handling, seo optimization, api responses, error boundaries, status codes tags: - status - http - errors - '404' - seo - response version: '1.0' description: \u003e- Set HTTP status codes for SolidStart pages. Handle 404s, errors, and optimize SEO with proper status codes in server responses. --- `HttpStatusCode` sets the HTTP status code for the page response while server-side rendering. ```tsx import { HttpStatusCode } from \"@solidjs/start\"; \u003cHttpStatusCode code={404} /\u003e; ``` ## Setting a 404 status code for the unmatched routes As a page is rendered, you may want to set the status code to the `Response` depending on what happens. The `HttpStatusCode` component does this for you by taking the `code` passed in and setting it to the `Response` status in the browser. Since `HttpStatusCode` is just a component, it can be used with [`ErrorBoundary`](/reference/components/error-boundary), [`Show`](/reference/components/show), [`Switch`](/reference/components/switch-and-match) or any of the other JSX control-flow components. This means the same logic used when deciding what to render can inform what status code you are setting, allowing that logic to sit together. Status codes are important tools for things like caching and SEO, so it is a good practice to send meaningful status codes. For example, for a `NotFound` page, you should send a `404` status code. ```tsx {6} title=\"routes/*404.tsx\" import { HttpStatusCode } from \"@solidjs/start\"; export default function NotFound() { return ( \u003cdiv\u003e \u003cHttpStatusCode code={404} /\u003e \u003ch1\u003ePage not found\u003c/h1\u003e \u003c/div\u003e ); } ``` ## Setting a 404 status code for missing pages for dynamic routes When using dynamic params in routes, setting a 404 status code if the given parameter for a segment points to a missing resource is important. Usually, the param is discovered to be missing when doing an async request with that parameter. Errors can be thrown from inside these fetchers and caught by the nearest [`\u003cErrorBoundary\u003e`](/reference/components/error-boundary) component from where the data is accessed. `\u003cHttpStatusCode\u003e` pairs very well with error boundaries because you can inspect the error in the ErrorBoundary's fallback. If the fetcher throws an error indicating the data was not found, you can render `\u003cHttpStatusCode code={404} /\u003e`. Note that when streaming responses [`renderStream`](/reference/rendering/render-to-stream), the HTTP Status can only be included if added _before_ the stream first flushed. It is important to add `deferStream` to any resources calls that need to be loaded before responding. ```tsx {7,17-19, 15, 23} title=\"routes/[house].tsx\" import { Show, ErrorBoundary } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; import { HttpStatusCode } from \"@solidjs/start\"; const getHouse = query(async (house: string) =\u003e { if (house != \"gryffindor\") { throw new Error(\"House not found\"); } return house; }, \"house\"); export default function House(props: { name: string }) { const house = createAsync(() =\u003e getHouse(props.name), { deferStream: true }); return ( \u003cErrorBoundary fallback={(e) =\u003e ( \u003cShow when={e.message === \"House not found\"}\u003e \u003cHttpStatusCode code={404} /\u003e \u003c/Show\u003e )} \u003e \u003cdiv\u003e{house()}\u003c/div\u003e \u003c/ErrorBoundary\u003e ); } ``` ## Parameters | Property | Type | Description | | -------- | ------ | -------------------- | | code | number | The HTTP status code |", "term_freq": { "##": 3, "---": 2, "------": 1, "--------": 1, "--------------------": 1, "//github": 1, "/\u003e": 4, "/reference/components/error-boundary": 2, "/reference/components/show": 1, "/reference/components/switch-and-match": 1, "/reference/rendering/render-to-stream": 1, "15": 1, "17-19": 1, "23": 1, "404": 10, "404s": 1, "\u003c/div\u003e": 2, "\u003c/errorboundary\u003e": 1, "\u003c/show\u003e": 1, "\u003cdiv\u003e": 2, "\u003cerrorboundary": 1, "\u003cerrorboundary\u003e": 1, "\u003ch1\u003epage": 1, "\u003chttpstatuscode": 4, "\u003chttpstatuscode\u003e": 1, "\u003cshow": 1, "===": 1, "=\u003e": 3, "\u003e-": 2, "@solidjs/router": 1, "@solidjs/start": 3, "_before_": 1, "accessed": 1, "add": 1, "added": 1, "allowing": 1, "an": 2, "and": 4, "any": 2, "api": 1, "are": 2, "as": 1, "async": 2, "be": 5, "because": 1, "before": 1, "boundaries": 2, "browser": 1, "by": 2, "caching": 1, "calls": 1, "can": 6, "caught": 1, "code": 10, "code=": 4, "codes": 5, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/server/http-status-code": 1, "component": 3, "components": 1, "const": 2, "control-flow": 1, "createasync": 2, "data": 2, "deciding": 1, "default": 2, "deferstream": 2, "depending": 1, "description": 2, "discovered": 1, "does": 1, "doing": 1, "dynamic": 2, "error": 6, "errorboundary": 3, "errors": 3, "example": 1, "export": 2, "fallback": 1, "fallback=": 1, "fetcher": 1, "fetchers": 1, "first": 1, "flushed": 1, "for": 10, "found": 3, "found\u003c/h1\u003e": 1, "from": 7, "function": 2, "gethouse": 2, "github-document": 1, "given": 1, "good": 1, "gryffindor": 1, "handle": 1, "handling": 1, "happens": 1, "house": 10, "http": 5, "http-status-code": 1, "https": 1, "httpstatuscode": 7, "if": 4, "import": 5, "important": 3, "in": 5, "included": 1, "indicating": 1, "inform": 1, "inside": 1, "inspect": 1, "is": 7, "it": 4, "jsx": 1, "just": 1, "like": 1, "loaded": 1, "logic": 2, "may": 1, "mdx": 1, "meaningful": 1, "means": 1, "message": 1, "missing": 3, "name": 2, "nearest": 1, "need": 1, "new": 1, "not": 4, "note": 1, "notfound": 2, "number": 1, "of": 1, "on": 1, "only": 1, "optimization": 1, "optimize": 1, "or": 1, "other": 1, "page": 3, "pages": 3, "pairs": 1, "param": 1, "parameter": 2, "parameters": 1, "params": 1, "passed": 1, "points": 1, "practice": 1, "proper": 1, "property": 1, "props": 2, "query": 2, "render": 2, "rendered": 1, "rendering": 1, "renderstream": 1, "request": 1, "resource": 1, "resources": 1, "responding": 1, "response": 4, "responses": 3, "return": 3, "routes": 3, "routes/": 1, "routes/*404": 1, "same": 1, "segment": 1, "send": 2, "seo": 4, "server": 1, "server-side": 1, "set": 2, "sets": 1, "setting": 5, "should": 1, "show": 2, "since": 1, "sit": 1, "so": 1, "solid-js": 1, "solidstart": 1, "status": 16, "stream": 1, "streaming": 1, "string": 2, "switch": 1, "tags": 1, "taking": 1, "that": 4, "the": 22, "these": 1, "things": 1, "this": 2, "throw": 1, "thrown": 1, "throws": 1, "title": 1, "title=": 2, "to": 11, "together": 1, "tools": 1, "true": 1, "tsx": 5, "type": 1, "unmatched": 1, "use_cases": 1, "used": 2, "using": 1, "usually": 1, "version": 1, "very": 1, "want": 1, "was": 1, "well": 1, "what": 3, "when": 4, "when=": 1, "where": 1, "while": 1, "with": 4, "you": 6 }, "length": 466 }, { "id": "8c6e2dc37bc14e6386168f63", "doc_id": "42fcb4dc71cd6d2fee847af4", "title": "http - Standard library/net/http", "url": "https://pkg.go.dev/http", "type": "go-package", "source": "http", "path": "devour_data/docs/http_-_standard_library_net_http_0.json", "content": "# Package Standard library/net/http Common HTTP methods. ## Documentation Index ¶ Constants Variables func CanonicalHeaderKey(s string) string func DetectContentType(data []byte) string func Error(w ResponseWriter, error string, code int) func Handle(pattern string, handler Handler) func HandleFunc(pattern string, handler func(ResponseWriter, *Request)) func ListenAndServe(addr string, handler Handler) error func ListenAndServeTLS(addr, certFile, keyFile string, handler Handler) error func MaxBytesReader(w ResponseWriter, r io.ReadCloser, n int64) io.ReadCloser func NotFound(w ResponseWriter, r *Request) func ParseHTTPVersion(vers string) (major, minor int, ok bool) func ParseTime(text string) (t time.Time, err error) func ProxyFromEnvironment(req *Request) (*url.URL, error) func ProxyURL(fixedURL *url.URL) func(*Request) (*url.URL, error) func Redirect(w ResponseWriter, r *Request, url string, code int) func Serve(l net.Listener, handler Handler) error func ServeContent(w ResponseWriter, req *Request, name string, modtime time.Time, ...) func ServeFile(w ResponseWriter, r *Request, name string) func ServeFileFS(w ResponseWriter, r *Request, fsys fs.FS, name string) func ServeTLS(l net.Listener, handler Handler, certFile, keyFile string) error func SetCookie(w ResponseWriter, cookie *Cookie) func StatusText(code int) string type Client func (c *Client) CloseIdleConnections() func (c *Client) Do(req *Request) (*Response, error) func (c *Client) Get(url string) (resp *Response, err error) func (c *Client) Head(url string) (resp *Response, err error) func (c *Client) Post(url, contentType string, body io.Reader) (resp *Response, err error) func (c *Client) PostForm(url string, data url.Values) (resp *Response, err error) type ClientConn func (cc *ClientConn) Available() int func (cc *ClientConn) Close() error func (cc *ClientConn) Err() error func (cc *ClientConn) InFlight() int func (cc *ClientConn) Release() func (cc *ClientConn) Reserve() error func (cc *ClientConn) RoundTrip(req *Request) (*Response, error) func (cc *ClientConn) SetStateHook(f func(*ClientConn)) type CloseNotifierdeprecated type ConnState func (c ConnState) String() string type Cookie func ParseCookie(line string) ([]*Cookie, error) func ParseSetCookie(line string) (*Cookie, error) func (c *Cookie) String() string func (c *Cookie) Valid() error type CookieJar type CrossOriginProtection func NewCrossOriginProtection() *CrossOriginProtection func (c *CrossOriginProtection) AddInsecureBypassPattern(pattern string) func (c *CrossOriginProtection) AddTrustedOrigin(origin string) error func (c *CrossOriginProtection) Check(req *Request) error func (c *CrossOriginProtection) Handler(h Handler) Handler func (c *CrossOriginProtection) SetDenyHandler(h Handler) type Dir func (d Dir) Open(name string) (File, error) type File type FileSystem func FS(fsys fs.FS) FileSystem type Flusher type HTTP2Config type Handler func AllowQuerySemicolons(h Handler) Handler func FileServer(root FileSystem) Handler func FileServerFS(root fs.FS) Handler func MaxBytesHandler(h Handler, n int64) Handler func NotFoundHandler() Handler func RedirectHandler(url string, code int) Handler func StripPrefix(prefix string, h Handler) Handler func TimeoutHandler(h Handler, dt time.Duration, msg string) Handler type HandlerFunc func (f HandlerFunc) ServeHTTP(w ResponseWriter, r *Request) type Header func (h Header) Add(key, value string) func (h Header) Clone() Header func (h Header) Del(key string) func (h Header) Get(key string) string func (h Header) Set(key, value string) func (h Header) Values(key string) []string func (h Header) Write(w io.Writer) error func (h Header) WriteSubset(w io.Writer, exclude map[string]bool) error type Hijacker type MaxBytesError func (e *MaxBytesError) Error() string type ProtocolErrordeprecated func (pe *ProtocolError) Error() string func (pe *ProtocolError) Is(err error) bool type Protocols func (p Protocols) HTTP1() bool func (p Protocols) HTTP2() bool func (p *Protocols) SetHTTP1(ok bool) func (p *Protocols) SetHTTP2(ok bool) func (p *Protocols) SetUnencryptedHTTP2(ok bool) func (p Protocols) String() string func (p Protocols) UnencryptedHTTP2() bool type PushOptions type Pusher type Request func NewRequest(method, url string, body io.Reader) (*Request, error) func NewRequestWithContext(ctx context.Context, method, url string, body io.Reader) (*Request, error) func ReadRequest(b *bufio.Reader) (*Request, error) func (r *Request) AddCookie(c *Cookie) func (r *Request) BasicAuth() (username, password string, ok bool) func (r *Request) Clone(ctx context.Context) *Request func (r *Request) Context() context.Context func (r *Request) Cookie(name string) (*Cookie, error) func (r *Request) Cookies() []*Cookie func (r *Request) CookiesNamed(name string) []*Cookie func (r *Request) FormFile(key string) (multipart.File, *multipart.FileHeader, error) func (r *Request) FormValue(key string) string func (r *Request) MultipartReader() (*multipart.Reader, error) func (r *Request) ParseForm() error func (r *Request) ParseMultipartForm(maxMemory int64) error func (r *Request) PathValue(name string) string func (r *Request) PostFormValue(key string) string func (r *Request) ProtoAtLeast(major, minor int) bool func (r *Request) Referer() string func (r *Request) SetBasicAuth(username, password string) func (r *Request) SetPathValue(name, value string) func (r *Request) UserAgent() string func (r *Request) WithContext(ctx context.Context) *Request func (r *Request) Write(w io.Writer) error func (r *Request) WriteProxy(w io.Writer) error type Response func Get(url string) (resp *Response, err error) func Head(url string) (resp *Response, err error) func Post(url, contentType string, body io.Reader) (resp *Response, err error) func PostForm(url string, data url.Values) (resp *Response, err error) func ReadResponse(r *bufio.Reader, req *Request) (*Response, error) func (r *Response) Cookies() []*Cookie func (r *Response) Location() (*url.URL, error) func (r *Response) ProtoAtLeast(major, minor int) bool func (r *Response) Write(w io.Writer) error type ResponseController func NewResponseController(rw ResponseWriter) *ResponseController func (c *ResponseController) EnableFullDuplex() error func (c *ResponseController) Flush() error func (c *ResponseController) Hijack() (net.Conn, *bufio.ReadWriter, error) func (c *ResponseController) SetReadDeadline(deadline time.Time) error func (c *ResponseController) SetWriteDeadline(deadline time.Time) error type ResponseWriter type RoundTripper func NewFileTransport(fs FileSystem) RoundTripper func NewFileTransportFS(fsys fs.FS) RoundTripper type SameSite type ServeMux func NewServeMux() *ServeMux func (mux *ServeMux) Handle(pattern string, handler Handler) func (mux *ServeMux) HandleFunc(pattern string, handler func(ResponseWriter, *Request)) func (mux *ServeMux) Handler(r *Request) (h Handler, pattern string) func (mux *ServeMux) ServeHTTP(w ResponseWriter, r *Request) type Server func (s *Server) Close() error func (s *Server) ListenAndServe() error func (s *Server) ListenAndServeTLS(certFile, keyFile string) error func (s *Server) RegisterOnShutdown(f func()) func (s *Server) Serve(l net.Listener) error func (s *Server) ServeTLS(l net.Listener, certFile, keyFile string) error func (s *Server) SetKeepAlivesEnabled(v bool) func (s *Server) Shutdown(ctx context.Context) error type Transport func (t *Transport) CancelRequest(req *Request)deprecated func (t *Transport) Clone() *Transport func (t *Transport) CloseIdleConnections() func (t *Transport) NewClientConn(ctx context.Context, scheme, address string) (*ClientConn, error) func (t *Transport) RegisterProtocol(scheme string, rt RoundTripper) func (t *Transport) RoundTrip(req *Request) (*Response, error) Examples ¶ CrossOriginProtection FileServer FileServer (DotFileHiding) FileServer (StripPrefix) Get Handle HandleFunc Hijacker ListenAndServe ListenAndServeTLS NotFoundHandler Protocols (Http1) Protocols (Http1or2) ResponseWriter (Trailers) ServeMux.Handle Server.Shutdown StripPrefix Constants ¶ View Source const ( MethodGet = \"GET\" MethodHead = \"HEAD\" MethodPost = \"POST\" MethodPut = \"PUT\" MethodPatch = \"PATCH\" // RFC 5789 MethodDelete = \"DELETE\" MethodConnect = \"CONNECT\" MethodOptions = \"OPTIONS\" MethodTrace = \"TRACE\" ) Common HTTP methods. Unless otherwise noted, these are defined in RFC 7231 section 4.3. View Source const ( StatusContinue = 100 // RFC 9110, 15.2.1 StatusSwitchingProtocols = 101 // RFC 9110, 15.2.2 StatusProcessing = 102 // RFC 2518, 10.1 StatusEarlyHints = 103 // RFC 8297 StatusOK = 200 // RFC 9110, 15.3.1 StatusCreated = 201 // RFC 9110, 15.3.2 StatusAccepted = 202 // RFC 9110, 15.3.3 StatusNonAuthoritativeInfo = 203 // RFC 9110, 15.3.4 StatusNoContent = 204 // RFC 9110, 15.3.5 StatusResetContent = 205 // RFC 9110, 15.3.6 StatusPartialContent = 206 // RFC 9110, 15.3.7 StatusMultiStatus = 207 // RFC 4918, 11.1 StatusAlreadyReported = 208 // RFC 5842, 7.1 StatusIMUsed = 226 // RFC 3229, 10.4.1 StatusMultipleChoices = 300 // RFC 9110, 15.4.1 StatusMovedPermanently = 301 // RFC 9110, 15.4.2 StatusFound = 302 // RFC 9110, 15.4.3 StatusSeeOther = 303 // RFC 9110, 15.4.4 StatusNotModified = 304 // RFC 9110, 15.4.5 StatusUseProxy = 305 // RFC 9110, 15.4.6 StatusTemporaryRedirect = 307 // RFC 9110, 15.4.8 StatusPermanentRedirect = 308 // RFC 9110, 15.4.9 StatusBadRequest = 400 // RFC 9110, 15.5.1 StatusUnauthorized = 401 // RFC 9110, 15.5.2 StatusPaymentRequired = 402 // RFC 9110, 15.5.3 StatusForbidden = 403 // RFC 9110, 15.5.4 StatusNotFound = 404 // RFC 9110, 15.5.5 StatusMethodNotAllowed = 405 // RFC 9110, 15.5.6 StatusNotAcceptable = 406 // RFC 9110, 15.5.7 StatusProxyAuthRequired = 407 // RFC 9110, 15.5.8 StatusRequestTimeout = 408 // RFC 9110, 15.5.9 StatusConflict = 409 // RFC 9110, 15.5.10 StatusGone = 410 // RFC 9110, 15.5.11 StatusLengthRequired = 411 // RFC 9110, 15.5.12 StatusPreconditionFailed = 412 // RFC 9110, 15.5.13 StatusRequestEntityTooLarge = 413 // RFC 9110, 15.5.14 StatusRequestURITooLong = 414 // RFC 9110, 15.5.15 StatusUnsupportedMediaType = 415 // RFC 9110, 15.5.16 StatusRequestedRangeNotSatisfiable = 416 // RFC 9110, 15.5.17 StatusExpectationFailed = 417 // RFC 9110, 15.5.18 StatusTeapot = 418 // RFC 9110, 15.5.19 (Unused) StatusMisdirectedRequest = 421 // RFC 9110, 15.5.20 StatusUnprocessableEntity = 422 // RFC 9110, 15.5.21 StatusLocked = 423 // RFC 4918, 11.3 StatusFailedDependency = 424 // RFC 4918, 11.4 StatusTooEarly = 425 // RFC 8470, 5.2. StatusUpgradeRequired = 426 // RFC 9110, 15.5.22 StatusPreconditionRequired = 428 // RFC 6585, 3 StatusTooManyRequests = 429 // RFC 6585, 4 StatusRequestHeaderFieldsTooLarge = 431 // RFC 6585, 5 StatusUnavailableForLegalReasons = 451 // RFC 7725, 3 StatusInternalServerError = 500 // RFC 9110, 15.6.1 StatusNotImplemented = 501 // RFC 9110, 15.6.2 StatusBadGateway = 502 // RFC 9110, 15.6.3 StatusServiceUnavailable = 503 // RFC 9110, 15.6.4 StatusGatewayTimeout = 504 // RFC 9110, 15.6.5 StatusHTTPVersionNotSupported = 505 // RFC 9110, 15.6.6 StatusVariantAlsoNegotiates = 506 // RFC 2295, 8.1 StatusInsufficientStorage = 507 // RFC 4918, 11.5 StatusLoopDetected = 508 // RFC 5842, 7.2 StatusNotExtended = 510 // RFC 2774, 7 StatusNetworkAuthenticationRequired = 511 // RFC 6585, 6 ) HTTP status codes as registered with IANA. See: https://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml View Source const DefaultMaxHeaderBytes = 1 \u003c\u003c 20 // 1 MB DefaultMaxHeaderBytes is the maximum permitted size of the headers in an HTTP request. This can be overridden by setting [Server.MaxHeaderBytes]. View Source const DefaultMaxIdleConnsPerHost = 2 DefaultMaxIdleConnsPerHost is the default value of Transport's MaxIdleConnsPerHost. View Source const TimeFormat = \"Mon, 02 Jan 2006 15:04:05 GMT\" TimeFormat is the time format to use when generating times in HTTP headers. It is like time.RFC1123 but hard-codes GMT as the time zone. The time being formatted must be in UTC for Format to generate the correct format. For parsing this time format, see ParseTime. View Source const TrailerPrefix = \"Trailer:\" TrailerPrefix is a magic prefix for [ResponseWriter.Header] map keys that, if present, signals that the map entry is actually for the response trailers, and not the response headers. The prefix is stripped after the ServeHTTP call finishes and the values are sent in the trailers. This mechanism is intended only for trailers that are not known prior to the headers being written. If the set of trailers is fixed or known before the header is written, the normal Go trailers mechanism is preferred: https://pkg.go.dev/net/http#ResponseWriter https://pkg.go.dev/net/http#example-ResponseWriter-Trailers Variables ¶ View Source var ( // ErrNotSupported indicates that a feature is not supported. // // It is returned by ResponseController methods to indicate that // the handler does not support the method, and by the Push method // of Pusher implementations to indicate that HTTP/2 Push support // is not available. ErrNotSupported = \u0026ProtocolError{\"feature not supported\"} // Deprecated: ErrUnexpectedTrailer is no longer returned by // anything in the net/http package. Callers should not // compare errors against this variable. ErrUnexpectedTrailer = \u0026ProtocolError{\"trailer header without chunked transfer encoding\"} // ErrMissingBoundary is returned by Request.MultipartReader when the // request's Content-Type does not include a \"boundary\" parameter. ErrMissingBoundary = \u0026ProtocolError{\"no multipart boundary param in Content-Type\"} // ErrNotMultipart is returned by Request.MultipartReader when the // request's Content-Type is not multipart/form-data. ErrNotMultipart = \u0026ProtocolError{\"request Content-Type isn't multipart/form-data\"} // Deprecated: ErrHeaderTooLong is no longer returned by // anything in the net/http package. Callers should not // compare errors against this variable. ErrHeaderTooLong = \u0026ProtocolError{\"header too long\"} // Deprecated: ErrShortBody is no longer returned by // anything in the net/http package. Callers should not // compare errors against this variable. ErrShortBody = \u0026ProtocolError{\"entity body too short\"} // Deprecated: ErrMissingContentLength is no longer returned by // anything in the net/http package. Callers should not // compare errors against this variable. ErrMissingContentLength = \u0026ProtocolError{\"missing ContentLength in HEAD response\"} ) View Source var ( // ErrBodyNotAllowed is returned by ResponseWriter.Write calls // when the HTTP method or response code does not permit a // body. ErrBodyNotAllowed = errors.New(\"http: request method or response status code does not allow body\") // ErrHijacked is returned by ResponseWriter.Write calls when // the underlying connection has been hijacked using the // Hijacker interface. A zero-byte write on a hijacked // connection will return ErrHijacked without any other side // effects. ErrHijacked = errors.New(\"http: connection has been hijacked\") // ErrContentLength is returned by ResponseWriter.Write calls // when a Handler set a Content-Length response header with a // declared size and then attempted to write more bytes than // declared. ErrContentLength = errors.New(\"http: wrote more than the declared Content-Length\") // Deprecated: ErrWriteAfterFlush is no longer returned by // anything in the net/http package. Callers should not // compare errors against this variable. ErrWriteAfterFlush = errors.New(\"unused\") ) Errors used by the HTTP server. View Source var ( // ServerContextKey is a context key. It can be used in HTTP // handlers with Context.Value to access the server that // started the handler. The associated value will be of // type *Server. ServerContextKey = \u0026contextKey{\"http-server\"} // LocalAddrContextKey is a context key. It can be used in // HTTP handlers with Context.Value to access the local // address the connection arrived on. // The associated value will be of type net.Addr. LocalAddrContextKey = \u0026contextKey{\"local-addr\"} ) View Source var DefaultClient = \u0026Client{} DefaultClient is the default Client and is used by Get, Head, and Post. View Source var DefaultServeMux = \u0026defaultServeMux DefaultServeMux is the default ServeMux used by Serve. View Source var ErrAbortHandler = errors.New(\"net/http: abort Handler\") ErrAbortHandler is a sentinel panic value to abort a handler. While any panic from ServeHTTP aborts the response to the client, panicking with ErrAbortHandler also suppresses logging of a stack trace to the server's error log. View Source var ErrBodyReadAfterClose = errors.New(\"http: invalid Read on closed Body\") ErrBodyReadAfterClose is returned when reading a Request or Response Body after the body has been closed. This typically happens when the body is read after an HTTP Handler calls WriteHeader or Write on its ResponseWriter. View Source var ErrHandlerTimeout = errors.New(\"http: Handler timeout\") ErrHandlerTimeout is returned on ResponseWriter Write calls in handlers which have timed out. View Source var ErrLineTooLong = internal.ErrLineTooLong ErrLineTooLong is returned when reading request or response bodies with malformed chunked encoding. View Source var ErrMissingFile = errors.New(\"http: no such file\") ErrMissingFile is returned by FormFile when the provided file field name is either not present in the request or not a file field. View Source var ErrNoCookie = errors.New(\"http: named cookie not present\") ErrNoCookie is returned by Request's Cookie method when a cookie is not found. View Source var ErrNoLocation = errors.New(\"http: no Location header in response\") ErrNoLocation is returned by the Response.Location method when no Location header is present. View Source var ErrSchemeMismatch = errors.New(\"http: server gave HTTP response to HTTPS client\") ErrSchemeMismatch is returned when a server returns an HTTP response to an HTTPS client. View Source var ErrServerClosed = errors.New(\"http: Server closed\") ErrServerClosed is returned by the Server.Serve, ServeTLS, ListenAndServe, and ListenAndServeTLS methods after a call to Server.Shutdown or Server.Close. View Source var ErrSkipAltProtocol = errors.New(\"net/http: skip alternate protocol\") ErrSkipAltProtocol is a sentinel error value defined by Transport.RegisterProtocol. View Source var ErrUseLastResponse = errors.New(\"net/http: use last response\") ErrUseLastResponse can be returned by Client.CheckRedirect hooks to control how redirects are processed. If returned, the next request is not sent and the most recent response is returned with its body unclosed. View Source var NoBody = noBody{} NoBody is an io.ReadCloser with no bytes. Read always returns EOF and Close always returns nil. It can be used in an outgoing client request to explicitly signal that a request has zero bytes. An alternative, however, is to simply set [Request.Body] to nil. Functions ¶ func CanonicalHeaderKey ¶ func CanonicalHeaderKey(s string) string CanonicalHeaderKey returns the canonical format of the header key s. The canonicalization converts the first letter and any letter following a hyphen to upper case; the rest are converted to lowercase. For example, the canonical key for \"accept-encoding\" is \"Accept-Encoding\". If s contains a space or invalid header field bytes, it is returned without modifications. func DetectContentType ¶ func DetectContentType(data []byte) string DetectContentType implements the algorithm described at https://mimesniff.spec.whatwg.org/ to determine the Content-Type of the given data. It considers at most the first 512 bytes of data. DetectContentType always returns a valid MIME type: if it cannot determine a more specific one, it returns \"application/octet-stream\". func Error ¶ func Error(w ResponseWriter, error string, code int) Error replies to the request with the specified error message and HTTP code. It does not otherwise end the request; the caller should ensure no further writes are done to w. The error message should be plain text. Error deletes the Content-Length header, sets Content-Type to “text/plain; charset=utf-8”, and sets X-Content-Type-Options to “nosniff”. This configures the header properly for the error message, in case the caller had set it up expecting a successful output. func Handle ¶ func Handle(pattern string, handler Handler) Handle registers the handler for the given pattern in DefaultServeMux. The documentation for ServeMux explains how patterns are matched. Example ¶ package main import ( \"fmt\" \"log\" \"net/http\" \"sync\" ) type countHandler struct { mu sync.Mutex // guards n n int } func (h *countHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) { h.mu.Lock() defer h.mu.Unlock() h.n++ fmt.Fprintf(w, \"count is %d\\n\", h.n) } func main() { http.Handle(\"/count\", new(countHandler)) log.Fatal(http.ListenAndServe(\":8080\", nil)) } Share Format Run func HandleFunc ¶ func HandleFunc(pattern string, handler func(ResponseWriter, *Request)) HandleFunc registers the handler function for the given pattern in DefaultServeMux. The documentation for ServeMux explains how patterns are matched. Example ¶ package main import ( \"io\" \"log\" \"net/http\" ) func main() { h1 := func(w http.ResponseWriter, _ *http.Request) { io.WriteString(w, \"Hello from a HandleFunc #1!\\n\") } h2 := func(w http.ResponseWriter, _ *http.Request) { io.WriteString(w, \"Hello from a HandleFunc #2!\\n\") } http.HandleFunc(\"/\", h1) http.HandleFunc(\"/endpoint\", h2) log.Fatal(http.ListenAndServe(\":8080\", nil)) } Share Format Run func ListenAndServe ¶ func ListenAndServe(addr string, handler Handler) error ListenAndServe listens on the TCP network address addr and then calls Serve with handler to handle requests on incoming connections. Accepted connections are configured to enable TCP keep-alives. The handler is typically nil, in which case DefaultServeMux is used. ListenAndServe always returns a non-nil error. Example ¶ package main import ( \"io\" \"log\" \"net/http\" ) func main() { // Hello world, the web server helloHandler := func(w http.ResponseWriter, req *http.Request) { io.WriteString(w, \"Hello, world!\\n\") } http.HandleFunc(\"/hello\", helloHandler) log.Fatal(http.ListenAndServe(\":8080\", nil)) } Share Format Run func ListenAndServeTLS ¶ func ListenAndServeTLS(addr, certFile, keyFile string, handler Handler) error ListenAndServeTLS acts identically to ListenAndServe, except that it expects HTTPS connections. Additionally, files containing a certificate and matching private key for the server must be provided. If the certificate is signed by a certificate authority, the certFile should be the concatenation of the server's certificate, any intermediates, and the CA's certificate. Example ¶ package main import ( \"io\" \"log\" \"net/http\" ) func main() { http.HandleFunc(\"/\", func(w http.ResponseWriter, req *http.Request) { io.WriteString(w, \"Hello, TLS!\\n\") }) // One can use generate_cert.go in crypto/tls to generate cert.pem and key.pem. log.Printf(\"About to listen on 8443. Go to https://127.0.0.1:8443/\") err := http.ListenAndServeTLS(\":8443\", \"cert.pem\", \"key.pem\", nil) log.Fatal(err) } Share Format Run func MaxBytesReader ¶ func MaxBytesReader(w ResponseWriter, r io.ReadCloser, n int64) io.ReadCloser MaxBytesReader is similar to io.LimitReader but is intended for limiting the size of incoming request bodies. In contrast to io.LimitReader, MaxBytesReader's result is a ReadCloser, returns a non-nil error of type *MaxBytesError for a Read beyond the limit, and closes the underlying reader when its Close method is called. MaxBytesReader prevents clients from accidentally or maliciously sending a large request and wasting server resources. If possible, it tells the ResponseWriter to close the connection after the limit has been reached. func NotFound ¶ func NotFound(w ResponseWriter, r *Request) NotFound replies to the request with an HTTP 404 not found error. func ParseHTTPVersion ¶ func ParseHTTPVersion(vers string) (major, minor int, ok bool) ParseHTTPVersion parses an HTTP version string according to RFC 7230, section 2.6. \"HTTP/1.0\" returns (1, 0, true). Note that strings without a minor version, such as \"HTTP/2\", are not valid. func ParseTime ¶ added in go1.1 func ParseTime(text string) (t time.Time, err error) ParseTime parses a time header (such as the Date: header), trying each of the three formats allowed by HTTP/1.1: TimeFormat, time.RFC850, and time.ANSIC. func ProxyFromEnvironment ¶ func ProxyFromEnvironment(req *Request) (*url.URL, error) ProxyFromEnvironment returns the URL of the proxy to use for a given request, as indicated by the environment variables HTTP_PROXY, HTTPS_PROXY and NO_PROXY (or the lowercase versions thereof). Requests use the proxy from the environment variable matching their scheme, unless excluded by NO_PROXY. The environment values may be either a complete URL or a \"host[:port]\", in which case the \"http\" scheme is assumed. An error is returned if the value is a different form. A nil URL and nil error are returned if no proxy is defined in the environment, or a proxy should not be used for the given request, as defined by NO_PROXY. As a special case, if req.URL.Host is \"localhost\" (with or without a port number), then a nil URL and nil error will be returned. func ProxyURL ¶ func ProxyURL(fixedURL *url.URL) func(*Request) (*url.URL, error) ProxyURL returns a proxy function (for use in a Transport) that always returns the same URL. func Redirect ¶ func Redirect(w ResponseWriter, r *Request, url string, code int) Redirect replies to the request with a redirect to url, which may be a path relative to the request path. Any non-ASCII characters in url will be percent-encoded, but existing percent encodings will not be changed. The provided code should be in the 3xx range and is usually StatusMovedPermanently, StatusFound or StatusSeeOther. If the Content-Type header has not been set, Redirect sets it to \"text/html; charset=utf-8\" and writes a small HTML body. Setting the Content-Type header to any value, including nil, disables that behavior. func Serve ¶ func Serve(l net.Listener, handler Handler) error Serve accepts incoming HTTP connections on the listener l, creating a new service goroutine for each. The service goroutines read requests and then call handler to reply to them. The handler is typically nil, in which case DefaultServeMux is used. HTTP/2 support is only enabled if the Listener returns *tls.Conn connections and they were configured with \"h2\" in the TLS Config.NextProtos. Serve always returns a non-nil error. func ServeContent ¶ func ServeContent(w ResponseWriter, req *Request, name string, modtime time.Time, content io.ReadSeeker) ServeContent replies to the request using the content in the provided ReadSeeker. The main benefit of ServeContent over io.Copy is that it handles Range requests properly, sets the MIME type, and handles If-Match, If-Unmodified-Since, If-None-Match, If-Modified-Since, and If-Range requests. If the response's Content-Type header is not set, ServeContent first tries to deduce the type from name's file extension and, if that fails, falls back to reading the first block of the content and passing it to DetectContentType. The name is otherwise unused; in particular it can be empty and is never sent in the response. If modtime is not the zero time or Unix epoch, ServeContent includes it in a Last-Modified header in the response. If the request includes an If-Modified-Since header, ServeContent uses modtime to decide whether the content needs to be sent at all. The content's Seek method must work: ServeContent uses a seek to the end of the content to determine its size. Note that *os.File implements the io.ReadSeeker interface. If the caller has set w's ETag header formatted per RFC 7232, section 2.3, ServeContent uses it to handle requests using If-Match, If-None-Match, or If-Range. If an error occurs when serving the request (for example, when handling an invalid range request), ServeContent responds with an error message. By default, ServeContent strips the Cache-Control, Content-Encoding, ETag, and Last-Modified headers from error responses. The GODEBUG setting httpservecontentkeepheaders=1 causes ServeContent to preserve these headers. func ServeFile ¶ func ServeFile(w ResponseWriter, r *Request, name string) ServeFile replies to the request with the contents of the named file or directory. If the provided file or directory name is a relative path, it is interpreted relative to the current directory and may ascend to parent directories. If the provided name is constructed from user input, it should be sanitized before calling ServeFile. As a precaution, ServeFile will reject requests where r.URL.Path contains a \"..\" path element; this protects against callers who might unsafely use filepath.Join on r.URL.Path without sanitizing it and then use that filepath.Join result as the name argument. As another special case, ServeFile redirects any request where r.URL.Path ends in \"/index.html\" to the same path, without the final \"index.html\". To avoid such redirects either modify the path or use ServeContent. Outside of those two special cases, ServeFile does not use r.URL.Path for selecting the file or directory to serve; only the file or directory provided in the name argument is used. func ServeFileFS ¶ added in go1.22.0 func ServeFileFS(w ResponseWriter, r *Request, fsys fs.FS, name string) ServeFileFS replies to the request with the contents of the named file or directory from the file system fsys. The files provided by fsys must implement io.Seeker. If the provided name is constructed from user input, it should be sanitized before calling ServeFileFS. As a precaution, ServeFileFS will reject requests where r.URL.Path contains a \"..\" path element; this protects against callers who might unsafely use filepath.Join on r.URL.Path without sanitizing it and then use that filepath.Join result as the name argument. As another special case, ServeFileFS redirects any request where r.URL.Path ends in \"/index.html\" to the same path, without the final \"index.html\". To avoid such redirects either modify the path or use ServeContent. Outside of those two special cases, ServeFileFS does not use r.URL.Path for selecting the file or directory to serve; only the file or directory provided in the name argument is used. func ServeTLS ¶ added in go1.9 func ServeTLS(l net.Listener, handler Handler, certFile, keyFile string) error ServeTLS accepts incoming HTTPS connections on the listener l, creating a new service goroutine for each. The service goroutines read requests and then call handler to reply to them. The handler is typically nil, in which case DefaultServeMux is used. Additionally, files containing a certificate and matching private key for the server must be provided. If the certificate is signed by a certificate authority, the certFile should be the concatenation of the server's certificate, any intermediates, and the CA's certificate. ServeTLS always returns a non-nil error. func SetCookie ¶ func SetCookie(w ResponseWriter, cookie *Cookie) SetCookie adds a Set-Cookie header to the provided ResponseWriter's headers. The provided cookie must have a valid Name. Invalid cookies may be silently dropped. func StatusText ¶ func StatusText(code int) string StatusText returns a text for the HTTP status code. It returns the empty string if the code is unknown. Types ¶ type Client ¶ type Client struct { // Transport specifies the mechanism by which individual // HTTP requests are made. // If nil, DefaultTransport is used. Transport RoundTripper // CheckRedirect specifies the policy for handling redirects. // If CheckRedirect is not nil, the client calls it before // following an HTTP redirect. The arguments req and via are // the upcoming request and the requests made already, oldest // first. If CheckRedirect returns an error, the Client's Get // method returns both the previous Response (with its Body // closed) and CheckRedirect's error (wrapped in a url.Error) // instead of issuing the Request req. // As a special case, if CheckRedirect returns ErrUseLastResponse, // then the most recent response is returned with its body // unclosed, along with a nil error. // // If CheckRedirect is nil, the Client uses its default policy, // which is to stop after 10 consecutive requests. CheckRedirect func(req *Request, via []*Request) error // Jar specifies the cookie jar. // // The Jar is used to insert relevant cookies into every // outbound Request and is updated with the cookie values // of every inbound Response. The Jar is consulted for every // redirect that the Client follows. // // If Jar is nil, cookies are only sent if they are explicitly // set on the Request. Jar CookieJar // Timeout specifies a time limit for requests made by this // Client. The timeout includes connection time, any // redirects, and reading the response body. The timer remains // running after Get, Head, Post, or Do return and will // interrupt reading of the Response.Body. // // A Timeout of zero means no timeout. // // The Client cancels requests to the underlying Transport // as if the Request's Context ended. // // For compatibility, the Client will also use the deprecated // CancelRequest method on Transport if found. New // RoundTripper implementations should use the Request's Context // for cancellation instead of implementing CancelRequest. Timeout time.Duration } A Client is an HTTP client. Its zero value (DefaultClient) is a usable client that uses DefaultTransport. The [Client.Transport] typically has internal state (cached TCP connections), so Clients should be reused instead of created as needed. Clients are safe for concurrent use by multiple goroutines. A Client is higher-level than a RoundTripper (such as Transport) and additionally handles HTTP details such as cookies and redirects. When following redirects, the Client will forward all headers set on the initial Request except: when forwarding sensitive headers like \"Authorization\", \"WWW-Authenticate\", and \"Cookie\" to untrusted targets. These headers will be ignored when following a redirect to a domain that is not a subdomain match or exact match of the initial domain. For example, a redirect from \"foo.com\" to either \"foo.com\" or \"sub.foo.com\" will forward the sensitive headers, but a redirect to \"bar.com\" will not. when forwarding the \"Cookie\" header with a non-nil cookie Jar. Since each redirect may mutate the state of the cookie jar, a redirect may possibly alter a cookie set in the initial request. When forwarding the \"Cookie\" header, any mutated cookies will be omitted, with the expectation that the Jar will insert those mutated cookies with the updated values (assuming the origin matches). If Jar is nil, the initial cookies are forwarded without change. func (*Client) CloseIdleConnections ¶ added in go1.12 func (c *Client) CloseIdleConnections() CloseIdleConnections closes any connections on its Transport which were previously connected from previous requests but are now sitting idle in a \"keep-alive\" state. It does not interrupt any connections currently in use. If [Client.Transport] does not have a Client.CloseIdleConnections method then this method does nothing. func (*Client) Do ¶ func (c *Client) Do(req *Request) (*Response, error) Do sends an HTTP request and returns an HTTP response, following policy (such as redirects, cookies, auth) as configured on the client. An error is returned if caused by client policy (such as CheckRedirect), or failure to speak HTTP (such as a network connectivity problem). A non-2xx status code doesn't cause an error. If the returned error is nil, the Response will contain a non-nil Body which the user is expected to close. If the Body is not both read to EOF and closed, the Client's underlying RoundTripper (typically Transport) may not be able to re-use a persistent TCP connection to the server for a subsequent \"keep-alive\" request. The request Body, if non-nil, will be closed by the underlying Transport, even on errors. The Body may be closed asynchronously after Do returns. On error, any Response can be ignored. A non-nil Response with a non-nil error only occurs when CheckRedirect fails, and even then the returned [Response.Body] is already closed. Generally Get, Post, or PostForm will be used instead of Do. If the server replies with a redirect, the Client first uses the CheckRedirect function to determine whether the redirect should be followed. If permitted, a 301, 302, or 303 redirect causes subsequent requests to use HTTP method GET (or HEAD if the original request was HEAD), with no body. A 307 or 308 redirect preserves the original HTTP method and body, provided that the [Request.GetBody] function is defined. The NewRequest function automatically sets GetBody for common standard library body types. Any returned error will be of type *url.Error. The url.Error value's Timeout method will report true if the request timed out. func (*Client) Get ¶ func (c *Client) Get(url string) (resp *Response, err error) Get issues a GET to the specified URL. If the response is one of the following redirect codes, Get follows the redirect after calling the [Client.CheckRedirect] function: 301 (Moved Permanently) 302 (Found) 303 (See Other) 307 (Temporary Redirect) 308 (Permanent Redirect) An error is returned if the [Client.CheckRedirect] function fails or if there was an HTTP protocol error. A non-2xx response doesn't cause an error. Any returned error will be of type *url.Error. The url.Error value's Timeout method will report true if the request timed out. When err is nil, resp always contains a non-nil resp.Body. Caller should close resp.Body when done reading from it. To make a request with custom headers, use NewRequest and Client.Do. To make a request with a specified context.Context, use NewRequestWithContext and Client.Do. func (*Client) Head ¶ func (c *Client) Head(url string) (resp *Response, err error) Head issues a HEAD to the specified URL. If the response is one of the following redirect codes, Head follows the redirect after calling the [Client.CheckRedirect] function: 301 (Moved Permanently) 302 (Found) 303 (See Other) 307 (Temporary Redirect) 308 (Permanent Redirect) To make a request with a specified context.Context, use NewRequestWithContext and Client.Do. func (*Client) Post ¶ func (c *Client) Post(url, contentType string, body io.Reader) (resp *Response, err error) Post issues a POST to the specified URL. Caller should close resp.Body when done reading from it. If the provided body is an io.Closer, it is closed after the request. To set custom headers, use NewRequest and Client.Do. To make a request with a specified context.Context, use NewRequestWithContext and Client.Do. See the Client.Do method documentation for details on how redirects are handled. func (*Client) PostForm ¶ func (c *Client) PostForm(url string, data url.Values) (resp *Response, err error) PostForm issues a POST to the specified URL, with data's keys and values URL-encoded as the request body. The Content-Type header is set to application/x-www-form-urlencoded. To set other headers, use NewRequest and Client.Do. When err is nil, resp always contains a non-nil resp.Body. Caller should close resp.Body when done reading from it. See the Client.Do method documentation for details on how redirects are handled. To make a request with a specified context.Context, use NewRequestWithContext and Client.Do. type ClientConn ¶ added in go1.26.0 type ClientConn struct { // contains filtered or unexported fields } A ClientConn is a client connection to an HTTP server. Unlike a Transport, a ClientConn represents a single connection. Most users should use a Transport rather than creating client connections directly. func (*ClientConn) Available ¶ added in go1.26.0 func (cc *ClientConn) Available() int Available reports the number of requests that may be sent to the connection without blocking. It returns 0 if the connection is closed. func (*ClientConn) Close ¶ added in go1.26.0 func (cc *ClientConn) Close() error Close closes the connection. Outstanding RoundTrip calls are interrupted. func (*ClientConn) Err ¶ added in go1.26.0 func (cc *ClientConn) Err() error Err reports any fatal connection errors. It returns nil if the connection is usable. If it returns non-nil, the connection can no longer be used. func (*ClientConn) InFlight ¶ added in go1.26.0 func (cc *ClientConn) InFlight() int InFlight reports the number of requests in flight, including reserved requests. It returns 0 if the connection is closed. func (*ClientConn) Release ¶ added in go1.26.0 func (cc *ClientConn) Release() Release releases an unused concurrency slot reserved by Reserve. If there are no reserved concurrency slots, it has no effect. func (*ClientConn) Reserve ¶ added in go1.26.0 func (cc *ClientConn) Reserve() error Reserve reserves a concurrency slot on the connection. If Reserve returns nil, one additional RoundTrip call may be made without waiting for an existing request to complete. The reserved concurrency slot is accounted as an in-flight request. A successful call to RoundTrip will decrement the Available count and increment the InFlight count. Each successful call to Reserve should be followed by exactly one call to RoundTrip or Release, which will consume or release the reservation. If the connection is closed or at its concurrency limit, Reserve returns an error. func (*ClientConn) RoundTrip ¶ added in go1.26.0 func (cc *ClientConn) RoundTrip(req *Request) (*Response, error) RoundTrip implements the RoundTripper interface. The request is sent on the client connection, regardless of the URL being requested or any proxy settings. If the connection is at its concurrency limit, RoundTrip waits for the connection to become available before sending the request. func (*ClientConn) SetStateHook ¶ added in go1.26.0 func (cc *ClientConn) SetStateHook(f func(*ClientConn)) SetStateHook arranges for f to be called when the state of the connection changes. At most one call to f is made at a time. If the connection's state has changed since it was created, f is called immediately in a separate goroutine. f may be called synchronously from RoundTrip or Response.Body.Close. If SetStateHook is called multiple times, the new hook replaces the old one. If f is nil, no further calls will be made to f after SetStateHook returns. f is called when Available increases (more requests may be sent on the connection), InFlight decreases (existing requests complete), or Err begins returning non-nil (the connection is no longer usable). type CloseNotifier deprecated added in go1.1 type CloseNotifier interface { // CloseNotify returns a channel that receives at most a // single value (true) when the client connection has gone // away. // // CloseNotify may wait to notify until Request.Body has been // fully read. // // After the Handler has returned, there is no guarantee // that the channel receives a value. // // If the protocol is HTTP/1.1 and CloseNotify is called while // processing an idempotent request (such as GET) while // HTTP/1.1 pipelining is in use, the arrival of a subsequent // pipelined request may cause a value to be sent on the // returned channel. In practice HTTP/1.1 pipelining is not // enabled in browsers and not seen often in the wild. If this // is a problem, use HTTP/2 or only use CloseNotify on methods // such as POST. CloseNotify() \u003c-chan bool } The CloseNotifier interface is implemented by ResponseWriters which allow detecting when the underlying connection has gone away. This mechanism can be used to cancel long operations on the server if the client has disconnected before the response is ready. Deprecated: the CloseNotifier interface predates Go's context package. New code should use Request.Context instead. type ConnState ¶ added in go1.3 type ConnState int A ConnState represents the state of a client connection to a server. It's used by the optional [Server.ConnState] hook. const ( // StateNew represents a new connection that is expected to // send a request immediately. Connections begin at this // state and then transition to either StateActive or // StateClosed. StateNew ConnState = iota // StateActive represents a connection that has read 1 or more // bytes of a request. The Server.ConnState hook for // StateActive fires before the request has entered a handler // and doesn't fire again until the request has been // handled. After the request is handled, the state // transitions to StateClosed, StateHijacked, or StateIdle. // For HTTP/2, StateActive fires on the transition from zero // to one active request, and only transitions away once all // active requests are complete. That means that ConnState // cannot be used to do per-request work; ConnState only notes // the overall state of the connection. StateActive // StateIdle represents a connection that has finished // handling a request and is in the keep-alive state, waiting // for a new request. Connections transition from StateIdle // to either StateActive or StateClosed. StateIdle // StateHijacked represents a hijacked connection. // This is a terminal state. It does not transition to StateClosed. StateHijacked // StateClosed represents a closed connection. // This is a terminal state. Hijacked connections do not // transition to StateClosed. StateClosed ) func (ConnState) String ¶ added in go1.3 func (c ConnState) String() string type Cookie ¶ type Cookie struct { Name string Value string Quoted bool // indicates whether the Value was originally quoted Path string // optional Domain string // optional Expires time.Time // optional RawExpires string // for reading cookies only // MaxAge=0 means no 'Max-Age' attribute specified. // MaxAge\u003c0 means delete cookie now, equivalently 'Max-Age: 0' // MaxAge\u003e0 means Max-Age attribute present and given in seconds MaxAge int Secure bool HttpOnly bool SameSite SameSite Partitioned bool Raw string Unparsed []string // Raw text of unparsed attribute-value pairs } A Cookie represents an HTTP cookie as sent in the Set-Cookie header of an HTTP response or the Cookie header of an HTTP request. See https://tools.ietf.org/html/rfc6265 for details. func ParseCookie ¶ added in go1.23.0 func ParseCookie(line string) ([]*Cookie, error) ParseCookie parses a Cookie header value and returns all the cookies which were set in it. Since the same cookie name can appear multiple times the returned Values can contain more than one value for a given key. func ParseSetCookie ¶ added in go1.23.0 func ParseSetCookie(line string) (*Cookie, error) ParseSetCookie parses a Set-Cookie header value and returns a cookie. It returns an error on syntax error. func (*Cookie) String ¶ func (c *Cookie) String() string String returns the serialization of the cookie for use in a Cookie header (if only Name and Value are set) or a Set-Cookie response header (if other fields are set). If c is nil or c.Name is invalid, the empty string is returned. func (*Cookie) Valid ¶ added in go1.18 func (c *Cookie) Valid() error Valid reports whether the cookie is valid. type CookieJar ¶ type CookieJar interface { // SetCookies handles the receipt of the cookies in a reply for the // given URL. It may or may not choose to save the cookies, depending // on the jar's policy and implementation. SetCookies(u *url.URL, cookies []*Cookie) // Cookies returns the cookies to send in a request for the given URL. // It is up to the implementation to honor the standard cookie use // restrictions such as in RFC 6265. Cookies(u *url.URL) []*Cookie } A CookieJar manages storage and use of cookies in HTTP requests. Implementations of CookieJar must be safe for concurrent use by multiple goroutines. The net/http/cookiejar package provides a CookieJar implementation. type CrossOriginProtection ¶ added in go1.25.0 type CrossOriginProtection struct { // contains filtered or unexported fields } CrossOriginProtection implements protections against Cross-Site Request Forgery (CSRF) by rejecting non-safe cross-origin browser requests. Cross-origin requests are currently detected with the Sec-Fetch-Site header, available in all browsers since 2023, or by comparing the hostname of the Origin header with the Host header. The GET, HEAD, and OPTIONS methods are safe methods and are always allowed. It's important that applications do not perform any state changing actions due to requests with safe methods. Requests without Sec-Fetch-Site or Origin headers are currently assumed to be either same-origin or non-browser requests, and are allowed. The zero value of CrossOriginProtection is valid and has no trusted origins or bypass patterns. Example ¶ package main import ( \"io\" \"log\" \"net/http\" \"time\" ) func main() { mux := http.NewServeMux() mux.HandleFunc(\"/hello\", func(w http.ResponseWriter, req *http.Request) { io.WriteString(w, \"request allowed\\n\") }) srv := http.Server{ Addr: \":8080\", ReadTimeout: 15 * time.Second, WriteTimeout: 15 * time.Second, // Use CrossOriginProtection.Handler to block all non-safe cross-origin // browser requests to mux. Handler: http.NewCrossOriginProtection().Handler(mux), } log.Fatal(srv.ListenAndServe()) } Share Format Run func NewCrossOriginProtection ¶ added in go1.25.0 func NewCrossOriginProtection() *CrossOriginProtection NewCrossOriginProtection returns a new CrossOriginProtection value. func (*CrossOriginProtection) AddInsecureBypassPattern ¶ added in go1.25.0 func (c *CrossOriginProtection) AddInsecureBypassPattern(pattern string) AddInsecureBypassPattern permits all requests that match the given pattern. The pattern syntax and precedence rules are the same as ServeMux. Only requests that match the pattern directly are permitted. Those that ServeMux would redirect to a pattern (e.g. after cleaning the path or adding a trailing slash) are not. AddInsecureBypassPattern panics if the pattern conflicts with one already registered, or if the pattern is syntactically invalid (for example, an improperly formed wildcard). AddInsecureBypassPattern can be called concurrently with other methods or request handling, and applies to future requests. func (*CrossOriginProtection) AddTrustedOrigin ¶ added in go1.25.0 func (c *CrossOriginProtection) AddTrustedOrigin(origin string) error AddTrustedOrigin allows all requests with an Origin header which exactly matches the given value. Origin header values are of the form \"scheme://host[:port]\". AddTrustedOrigin can be called concurrently with other methods or request handling, and applies to future requests. func (*CrossOriginProtection) Check ¶ added in go1.25.0 func (c *CrossOriginProtection) Check(req *Request) error Check applies cross-origin checks to a request. It returns an error if the request should be rejected. func (*CrossOriginProtection) Handler ¶ added in go1.25.0 func (c *CrossOriginProtection) Handler(h Handler) Handler Handler returns a handler that applies cross-origin checks before invoking the handler h. If a request fails cross-origin checks, the request is rejected with a 403 Forbidden status or handled with the handler passed to CrossOriginProtection.SetDenyHandler. func (*CrossOriginProtection) SetDenyHandler ¶ added in go1.25.0 func (c *CrossOriginProtection) SetDenyHandler(h Handler) SetDenyHandler sets a handler to invoke when a request is rejected. The default error handler responds with a 403 Forbidden status. SetDenyHandler can be called concurrently with other methods or request handling, and applies to future requests. Check does not call the error handler. type Dir ¶ type Dir string A Dir implements FileSystem using the native file system restricted to a specific directory tree. While the [FileSystem.Open] method takes '/'-separated paths, a Dir's string value is a directory path on the native file system, not a URL, so it is separated by filepath.Separator, which isn't necessarily '/'. Note that Dir could expose sensitive files and directories. Dir will follow symlinks pointing out of the directory tree, which can be especially dangerous if serving from a directory in which users are able to create arbitrary symlinks. Dir will also allow access to files and directories starting with a period, which could expose sensitive directories like .git or sensitive files like .htpasswd. To exclude files with a leading period, remove the files/directories from the server or create a custom FileSystem implementation. An empty Dir is treated as \".\". func (Dir) Open ¶ func (d Dir) Open(name string) (File, error) Open implements FileSystem using os.Open, opening files for reading rooted and relative to the directory d. type File ¶ type File interface { io.Closer io.Reader io.Seeker Readdir(count int) ([]fs.FileInfo, error) Stat() (fs.FileInfo, error) } A File is returned by a FileSystem's Open method and can be served by the FileServer implementation. The methods should behave the same as those on an *os.File. type FileSystem ¶ type FileSystem interface { Open(name string) (File, error) } A FileSystem implements access to a collection of named files. The elements in a file path are separated by slash ('/', U+002F) characters, regardless of host operating system convention. See the FileServer function to convert a FileSystem to a Handler. This interface predates the fs.FS interface, which can be used instead: the FS adapter function converts an fs.FS to a FileSystem. func FS ¶ added in go1.16 func FS(fsys fs.FS) FileSystem FS converts fsys to a FileSystem implementation, for use with FileServer and NewFileTransport. The files provided by fsys must implement io.Seeker. type Flusher ¶ type Flusher interface { // Flush sends any buffered data to the client. Flush() } The Flusher interface is implemented by ResponseWriters that allow an HTTP handler to flush buffered data to the client. The default HTTP/1.x and HTTP/2 ResponseWriter implementations support Flusher, but ResponseWriter wrappers may not. Handlers should always test for this ability at runtime. Note that even for ResponseWriters that support Flush, if the client is connected through an HTTP proxy, the buffered data may not reach the client until the response completes. type HTTP2Config ¶ added in go1.24.0 type HTTP2Config struct { // MaxConcurrentStreams optionally specifies the number of // concurrent streams that a client may have open at a time. // If zero, MaxConcurrentStreams defaults to at least 100. // // This parameter only applies to Servers. MaxConcurrentStreams int // StrictMaxConcurrentRequests controls whether an HTTP/2 server's // concurrency limit should be respected across all connections // to that server. // If true, new requests sent when a connection's concurrency limit // has been exceeded will block until an existing request completes. // If false, an additional connection will be opened if all // existing connections are at their limit. // // This parameter only applies to Transports. StrictMaxConcurrentRequests bool // MaxDecoderHeaderTableSize optionally specifies an upper limit for the // size of the header compression table used for decoding headers sent // by the peer. // A valid value is less than 4MiB. // If zero or invalid, a default value is used. MaxDecoderHeaderTableSize int // MaxEncoderHeaderTableSize optionally specifies an upper limit for the // header compression table used for sending headers to the peer. // A valid value is less than 4MiB. // If zero or invalid, a default value is used. MaxEncoderHeaderTableSize int // MaxReadFrameSize optionally specifies the largest frame // this endpoint is willing to read. // A valid value is between 16KiB and 16MiB, inclusive. // If zero or invalid, a default value is used. MaxReadFrameSize int // MaxReceiveBufferPerConnection is the maximum size of the // flow control window for data received on a connection. // A valid value is at least 64KiB and less than 4MiB. // If invalid, a default value is used. MaxReceiveBufferPerConnection int // MaxReceiveBufferPerStream is the maximum size of // the flow control window for data received on a stream (request). // A valid value is less than 4MiB. // If zero or invalid, a default value is used. MaxReceiveBufferPerStream int // SendPingTimeout is the timeout after which a health check using a ping // frame will be carried out if no frame is received on a connection. // If zero, no health check is performed. SendPingTimeout time.Duration // PingTimeout is the timeout after which a connection will be closed // if a response to a ping is not received. // If zero, a default of 15 seconds is used. PingTimeout time.Duration // WriteByteTimeout is the timeout after which a connection will be // closed if no data can be written to it. The timeout begins when data is // available to write, and is extended whenever any bytes are written. WriteByteTimeout time.Duration // PermitProhibitedCipherSuites, if true, permits the use of // cipher suites prohibited by the HTTP/2 spec. PermitProhibitedCipherSuites bool // CountError, if non-nil, is called on HTTP/2 errors. // It is intended to increment a metric for monitoring. // The errType contains only lowercase letters, digits, and underscores // (a-z, 0-9, _). CountError func(errType string) } HTTP2Config defines HTTP/2 configuration parameters common to both Transport and Server. type Handler ¶ type Handler interface { ServeHTTP(ResponseWriter, *Request) } A Handler responds to an HTTP request. [Handler.ServeHTTP] should write reply headers and data to the ResponseWriter and then return. Returning signals that the request is finished; it is not valid to use the ResponseWriter or read from the [Request.Body] after or concurrently with the completion of the ServeHTTP call. Depending on the HTTP client software, HTTP protocol version, and any intermediaries between the client and the Go server, it may not be possible to read from the [Request.Body] after writing to the ResponseWriter. Cautious handlers should read the [Request.Body] first, and then reply. Except for reading the body, handlers should not modify the provided Request. If ServeHTTP panics, the server (the caller of ServeHTTP) assumes that the effect of the panic was isolated to the active request. It recovers the panic, logs a stack trace to the server error log, and either closes the network connection or sends an HTTP/2 RST_STREAM, depending on the HTTP protocol. To abort a handler so the client sees an interrupted response but the server doesn't log an error, panic with the value ErrAbortHandler. func AllowQuerySemicolons ¶ added in go1.17 func AllowQuerySemicolons(h Handler) Handler AllowQuerySemicolons returns a handler that serves requests by converting any unescaped semicolons in the URL query to ampersands, and invoking the handler h. This restores the pre-Go 1.17 behavior of splitting query parameters on both semicolons and ampersands. (See golang.org/issue/25192). Note that this behavior doesn't match that of many proxies, and the mismatch can lead to security issues. AllowQuerySemicolons should be invoked before Request.ParseForm is called. func FileServer ¶ func FileServer(root FileSystem) Handler FileServer returns a handler that serves HTTP requests with the contents of the file system rooted at root. As a special case, the returned file server redirects any request ending in \"/index.html\" to the same path, without the final \"index.html\". To use the operating system's file system implementation, use http.Dir: http.Handle(\"/\", http.FileServer(http.Dir(\"/tmp\"))) To use an fs.FS implementation, use http.FileServerFS instead. Example ¶ package main import ( \"log\" \"net/http\" ) func main() { // Simple static webserver: log.Fatal(http.ListenAndServe(\":8080\", http.FileServer(http.Dir(\"/usr/share/doc\")))) } Share Format Run Example (DotFileHiding) ¶ package main import ( \"io\" \"io/fs\" \"log\" \"net/http\" \"strings\" ) // containsDotFile reports whether name contains a path element starting with a period. // The name is assumed to be a delimited by forward slashes, as guaranteed // by the http.FileSystem interface. func containsDotFile(name string) bool { parts := strings.Split(name, \"/\") for _, part := range parts { if strings.HasPrefix(part, \".\") { return true } } return false } // dotFileHidingFile is the http.File use in dotFileHidingFileSystem. // It is used to wrap the Readdir method of http.File so that we can // remove files and directories that start with a period from its output. type dotFileHidingFile struct { http.File } // Readdir is a wrapper around the Readdir method of the embedded File // that filters out all files that start with a period in their name. func (f dotFileHidingFile) Readdir(n int) (fis []fs.FileInfo, err error) { files, err := f.File.Readdir(n) for _, file := range files { // Filters out the dot files if !strings.HasPrefix(file.Name(), \".\") { fis = append(fis, file) } } if err == nil \u0026\u0026 n \u003e 0 \u0026\u0026 len(fis) == 0 { err = io.EOF } return } // dotFileHidingFileSystem is an http.FileSystem that hides // hidden \"dot files\" from being served. type dotFileHidingFileSystem struct { http.FileSystem } // Open is a wrapper around the Open method of the embedded FileSystem // that serves a 403 permission error when name has a file or directory // with whose name starts with a period in its path. func (fsys dotFileHidingFileSystem) Open(name string) (http.File, error) { if containsDotFile(name) { // If dot file, return 403 response return nil, fs.ErrPermission } file, err := fsys.FileSystem.Open(name) if err != nil { return nil, err } return dotFileHidingFile{file}, nil } func main() { fsys := dotFileHidingFileSystem{http.Dir(\".\")} http.Handle(\"/\", http.FileServer(fsys)) log.Fatal(http.ListenAndServe(\":8080\", nil)) } Share Format Run Example (StripPrefix) ¶ package main import ( \"net/http\" ) func main() { // To serve a directory on disk (/tmp) under an alternate URL // path (/tmpfiles/), use StripPrefix to modify the request // URL's path before the FileServer sees it: http.Handle(\"/tmpfiles/\", http.StripPrefix(\"/tmpfiles/\", http.FileServer(http.Dir(\"/tmp\")))) } Share Format Run func FileServerFS ¶ added in go1.22.0 func FileServerFS(root fs.FS) Handler FileServerFS returns a handler that serves HTTP requests with the contents of the file system fsys. The files provided by fsys must implement io.Seeker. As a special case, the returned file server redirects any request ending in \"/index.html\" to the same path, without the final \"index.html\". http.Handle(\"/\", http.FileServerFS(fsys)) func MaxBytesHandler ¶ added in go1.18 func MaxBytesHandler(h Handler, n int64) Handler MaxBytesHandler returns a Handler that runs h with its ResponseWriter and [Request.Body] wrapped by a MaxBytesReader. func NotFoundHandler ¶ func NotFoundHandler() Handler NotFoundHandler returns a simple request handler that replies to each request with a “404 page not found” reply. Example ¶ package main import ( \"fmt\" \"log\" \"net/http\" ) func newPeopleHandler() http.Handler { return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { fmt.Fprintln(w, \"This is the people handler.\") }) } func main() { mux := http.NewServeMux() // Create sample handler to returns 404 mux.Handle(\"/resources\", http.NotFoundHandler()) // Create sample handler that returns 200 mux.Handle(\"/resources/people/\", newPeopleHandler()) log.Fatal(http.ListenAndServe(\":8080\", mux)) } Share Format Run func RedirectHandler ¶ func RedirectHandler(url string, code int) Handler RedirectHandler returns a request handler that redirects each request it receives to the given url using the given status code. The provided code should be in the 3xx range and is usually StatusMovedPermanently, StatusFound or StatusSeeOther. func StripPrefix ¶ func StripPrefix(prefix string, h Handler) Handler StripPrefix returns a handler that serves HTTP requests by removing the given prefix from the request URL's Path (and RawPath if set) and invoking the handler h. StripPrefix handles a request for a path that doesn't begin with prefix by replying with an HTTP 404 not found error. The prefix must match exactly: if the prefix in the request contains escaped characters the reply is also an HTTP 404 not found error. Example ¶ package main import ( \"net/http\" ) func main() { // To serve a directory on disk (/tmp) under an alternate URL // path (/tmpfiles/), use StripPrefix to modify the request // URL's path before the FileServer sees it: http.Handle(\"/tmpfiles/\", http.StripPrefix(\"/tmpfiles/\", http.FileServer(http.Dir(\"/tmp\")))) } Share Format Run func TimeoutHandler ¶ func TimeoutHandler(h Handler, dt time.Duration, msg string) Handler TimeoutHandler returns a Handler that runs h with the given time limit. The new Handler calls h.ServeHTTP to handle each request, but if a call runs for longer than its time limit, the handler responds with a 503 Service Unavailable error and the given message in its body. (If msg is empty, a suitable default message will be sent.) After such a timeout, writes by h to its ResponseWriter will return ErrHandlerTimeout. TimeoutHandler supports the Pusher interface but does not support the Hijacker or Flusher interfaces. type HandlerFunc ¶ type HandlerFunc func(ResponseWriter, *Request) The HandlerFunc type is an adapter to allow the use of ordinary functions as HTTP handlers. If f is a function with the appropriate signature, HandlerFunc(f) is a Handler that calls f. func (HandlerFunc) ServeHTTP ¶ func (f HandlerFunc) ServeHTTP(w ResponseWriter, r *Request) ServeHTTP calls f(w, r). type Header ¶ type Header map[string][]string A Header represents the key-value pairs in an HTTP header. The keys should be in canonical form, as returned by CanonicalHeaderKey. func (Header) Add ¶ func (h Header) Add(key, value string) Add adds the key, value pair to the header. It appends to any existing values associated with key. The key is case insensitive; it is canonicalized by CanonicalHeaderKey. func (Header) Clone ¶ added in go1.13 func (h Header) Clone() Header Clone returns a copy of h or nil if h is nil. func (Header) Del ¶ func (h Header) Del(key string) Del deletes the values associated with key. The key is case insensitive; it is canonicalized by CanonicalHeaderKey. func (Header) Get ¶ func (h Header) Get(key string) string Get gets the first value associated with the given key. If there are no values associated with the key, Get returns \"\". It is case insensitive; textproto.CanonicalMIMEHeaderKey is used to canonicalize the provided key. Get assumes that all keys are stored in canonical form. To use non-canonical keys, access the map directly. func (Header) Set ¶ func (h Header) Set(key, value string) Set sets the header entries associated with key to the single element value. It replaces any existing values associated with key. The key is case insensitive; it is canonicalized by textproto.CanonicalMIMEHeaderKey. To use non-canonical keys, assign to the map directly. func (Header) Values ¶ added in go1.14 func (h Header) Values(key string) []string Values returns all values associated with the given key. It is case insensitive; textproto.CanonicalMIMEHeaderKey is used to canonicalize the provided key. To use non-canonical keys, access the map directly. The returned slice is not a copy. func (Header) Write ¶ func (h Header) Write(w io.Writer) error Write writes a header in wire format. func (Header) WriteSubset ¶ func (h Header) WriteSubset(w io.Writer, exclude map[string]bool) error WriteSubset writes a header in wire format. If exclude is not nil, keys where exclude[key] == true are not written. Keys are not canonicalized before checking the exclude map. type Hijacker ¶ type Hijacker interface { // Hijack lets the caller take over the connection. // After a call to Hijack the HTTP server library // will not do anything else with the connection. // // It becomes the caller's responsibility to manage // and close the connection. // // The returned net.Conn may have read or write deadlines // already set, depending on the configuration of the // Server. It is the caller's responsibility to set // or clear those deadlines as needed. // // The returned bufio.Reader may contain unprocessed buffered // data from the client. // // After a call to Hijack, the original Request.Body must not // be used. The original Request's Context remains valid and // is not canceled until the Request's ServeHTTP method // returns. Hijack() (net.Conn, *bufio.ReadWriter, error) } The Hijacker interface is implemented by ResponseWriters that allow an HTTP handler to take over the connection. The default ResponseWriter for HTTP/1.x connections supports Hijacker, but HTTP/2 connections intentionally do not. ResponseWriter wrappers may also not support Hijacker. Handlers should always test for this ability at runtime. Example ¶ package main import ( \"fmt\" \"log\" \"net/http\" ) func main() { http.HandleFunc(\"/hijack\", func(w http.ResponseWriter, r *http.Request) { hj, ok := w.(http.Hijacker) if !ok { http.Error(w, \"webserver doesn't support hijacking\", http.StatusInternalServerError) return } conn, bufrw, err := hj.Hijack() if err != nil { http.Error(w, err.Error(), http.StatusInternalServerError) return } // Don't forget to close the connection: defer conn.Close() bufrw.WriteString(\"Now we're speaking raw TCP. Say hi: \") bufrw.Flush() s, err := bufrw.ReadString('\\n') if err != nil { log.Printf(\"error reading string: %v\", err) return } fmt.Fprintf(bufrw, \"You said: %q\\nBye.\\n\", s) bufrw.Flush() }) } Share Format Run type MaxBytesError ¶ added in go1.19 type MaxBytesError struct { Limit int64 } MaxBytesError is returned by MaxBytesReader when its read limit is exceeded. func (*MaxBytesError) Error ¶ added in go1.19 func (e *MaxBytesError) Error() string type ProtocolError deprecated type ProtocolError struct { ErrorString string } ProtocolError represents an HTTP protocol error. Deprecated: Not all errors in the http package related to protocol errors are of type ProtocolError. func (*ProtocolError) Error ¶ func (pe *ProtocolError) Error() string func (*ProtocolError) Is ¶ added in go1.21.0 func (pe *ProtocolError) Is(err error) bool Is lets http.ErrNotSupported match errors.ErrUnsupported. type Protocols ¶ added in go1.24.0 type Protocols struct { // contains filtered or unexported fields } Protocols is a set of HTTP protocols. The zero value is an empty set of protocols. The supported protocols are: HTTP1 is the HTTP/1.0 and HTTP/1.1 protocols. HTTP1 is supported on both unsecured TCP and secured TLS connections. HTTP2 is the HTTP/2 protcol over a TLS connection. UnencryptedHTTP2 is the HTTP/2 protocol over an unsecured TCP connection. Example (Http1) ¶ package main import ( \"log\" \"net/http\" ) func main() { srv := http.Server{ Addr: \":8443\", } // Serve only HTTP/1. srv.Protocols = new(http.Protocols) srv.Protocols.SetHTTP1(true) log.Fatal(srv.ListenAndServeTLS(\"cert.pem\", \"key.pem\")) } Share Format Run Example (Http1or2) ¶ package main import ( \"log\" \"net/http\" ) func main() { t := http.DefaultTransport.(*http.Transport).Clone() // Use either HTTP/1 and HTTP/2. t.Protocols = new(http.Protocols) t.Protocols.SetHTTP1(true) t.Protocols.SetHTTP2(true) cli := \u0026http.Client{Transport: t} res, err := cli.Get(\"http://www.google.com/robots.txt\") if err != nil { log.Fatal(err) } res.Body.Close() } Share Format Run func (Protocols) HTTP1 ¶ added in go1.24.0 func (p Protocols) HTTP1() bool HTTP1 reports whether p includes HTTP/1. func (Protocols) HTTP2 ¶ added in go1.24.0 func (p Protocols) HTTP2() bool HTTP2 reports whether p includes HTTP/2. func (*Protocols) SetHTTP1 ¶ added in go1.24.0 func (p *Protocols) SetHTTP1(ok bool) SetHTTP1 adds or removes HTTP/1 from p. func (*Protocols) SetHTTP2 ¶ added in go1.24.0 func (p *Protocols) SetHTTP2(ok bool) SetHTTP2 adds or removes HTTP/2 from p. func (*Protocols) SetUnencryptedHTTP2 ¶ added in go1.24.0 func (p *Protocols) SetUnencryptedHTTP2(ok bool) SetUnencryptedHTTP2 adds or removes unencrypted HTTP/2 from p. func (Protocols) String ¶ added in go1.24.0 func (p Protocols) String() string func (Protocols) UnencryptedHTTP2 ¶ added in go1.24.0 func (p Protocols) UnencryptedHTTP2() bool UnencryptedHTTP2 reports whether p includes unencrypted HTTP/2. type PushOptions ¶ added in go1.8 type PushOptions struct { // Method specifies the HTTP method for the promised request. // If set, it must be \"GET\" or \"HEAD\". Empty means \"GET\". Method string // Header specifies additional promised request headers. This cannot // include HTTP/2 pseudo header fields like \":path\" and \":scheme\", // which will be added automatically. Header Header } PushOptions describes options for [Pusher.Push]. type Pusher ¶ added in go1.8 type Pusher interface { // Push initiates an HTTP/2 server push. This constructs a synthetic // request using the given target and options, serializes that request // into a PUSH_PROMISE frame, then dispatches that request using the // server's request handler. If opts is nil, default options are used. // // The target must either be an absolute path (like \"/path\") or an absolute // URL that contains a valid host and the same scheme as the parent request. // If the target is a path, it will inherit the scheme and host of the // parent request. // // The HTTP/2 spec disallows recursive pushes and cross-authority pushes. // Push may or may not detect these invalid pushes; however, invalid // pushes will be detected and canceled by conforming clients. // // Handlers that wish to push URL X should call Push before sending any // data that may trigger a request for URL X. This avoids a race where the // client issues requests for X before receiving the PUSH_PROMISE for X. // // Push will run in a separate goroutine making the order of arrival // non-deterministic. Any required synchronization needs to be implemented // by the caller. // // Push returns ErrNotSupported if the client has disabled push or if push // is not supported on the underlying connection. Push(target string, opts *PushOptions) error } Pusher is the interface implemented by ResponseWriters that support HTTP/2 server push. For more background, see https://tools.ietf.org/html/rfc7540#section-8.2. type Request ¶ type Request struct { // Method specifies the HTTP method (GET, POST, PUT, etc.). // For client requests, an empty string means GET. Method string // URL specifies either the URI being requested (for server // requests) or the URL to access (for client requests). // // For server requests, the URL is parsed from the URI // supplied on the Request-Line as stored in RequestURI. For // most requests, fields other than Path and RawQuery will be // empty. (See RFC 7230, Section 5.3) // // For client requests, the URL's Host specifies the server to // connect to, while the Request's Host field optionally // specifies the Host header value to send in the HTTP // request. URL *url.URL // The protocol version for incoming server requests. // // For client requests, these fields are ignored. The HTTP // client code always uses either HTTP/1.1 or HTTP/2. // See the docs on Transport for details. Proto string // \"HTTP/1.0\" ProtoMajor int // 1 ProtoMinor int // 0 // Header contains the request header fields either received // by the server or to be sent by the client. // // If a server received a request with header lines, // // Host: example.com // accept-encoding: gzip, deflate // Accept-Language: en-us // fOO: Bar // foo: two // // then // // Header = map[string][]string{ // \"Accept-Encoding\": {\"gzip, deflate\"}, // \"Accept-Language\": {\"en-us\"}, // \"Foo\": {\"Bar\", \"two\"}, // } // // For incoming requests, the Host header is promoted to the // Request.Host field and removed from the Header map. // // HTTP defines that header names are case-insensitive. The // request parser implements this by using CanonicalHeaderKey, // making the first character and any characters following a // hyphen uppercase and the rest lowercase. // // For client requests, certain headers such as Content-Length // and Connection are automatically written when needed and // values in Header may be ignored. See the documentation // for the Request.Write method. Header Header // Body is the request's body. // // For client requests, a nil body means the request has no // body, such as a GET request. The HTTP Client's Transport // is responsible for calling the Close method. // // For server requests, the Request Body is always non-nil // but will return EOF immediately when no body is present. // The Server will close the request body. The ServeHTTP // Handler does not need to. // // Body must allow Read to be called concurrently with Close. // In particular, calling Close should unblock a Read waiting // for input. Body io.ReadCloser // GetBody defines an optional func to return a new copy of // Body. It is used for client requests when a redirect requires // reading the body more than once. Use of GetBody still // requires setting Body. // // For server requests, it is unused. GetBody func() (io.ReadCloser, error) // ContentLength records the length of the associated content. // The value -1 indicates that the length is unknown. // Values \u003e= 0 indicate that the given number of bytes may // be read from Body. // // For client requests, a value of 0 with a non-nil Body is // also treated as unknown. ContentLength int64 // TransferEncoding lists the transfer encodings from outermost to // innermost. An empty list denotes the \"identity\" encoding. // TransferEncoding can usually be ignored; chunked encoding is // automatically added and removed as necessary when sending and // receiving requests. TransferEncoding []string // Close indicates whether to close the connection after // replying to this request (for servers) or after sending this // request and reading its response (for clients). // // For server requests, the HTTP server handles this automatically // and this field is not needed by Handlers. // // For client requests, setting this field prevents re-use of // TCP connections between requests to the same hosts, as if // Transport.DisableKeepAlives were set. Close bool // For server requests, Host specifies the host on which the // URL is sought. For HTTP/1 (per RFC 7230, section 5.4), this // is either the value of the \"Host\" header or the host name // given in the URL itself. For HTTP/2, it is the value of the // \":authority\" pseudo-header field. // It may be of the form \"host:port\". For international domain // names, Host may be in Punycode or Unicode form. Use // golang.org/x/net/idna to convert it to either format if // needed. // To prevent DNS rebinding attacks, server Handlers should // validate that the Host header has a value for which the // Handler considers itself authoritative. The included // ServeMux supports patterns registered to particular host // names and thus protects its registered Handlers. // // For client requests, Host optionally overrides the Host // header to send. If empty, the Request.Write method uses // the value of URL.Host. Host may contain an international // domain name. Host string // Form contains the parsed form data, including both the URL // field's query parameters and the PATCH, POST, or PUT form data. // This field is only available after ParseForm is called. // The HTTP client ignores Form and uses Body instead. Form url.Values // PostForm contains the parsed form data from PATCH, POST // or PUT body parameters. // // This field is only available after ParseForm is called. // The HTTP client ignores PostForm and uses Body instead. PostForm url.Values // MultipartForm is the parsed multipart form, including file uploads. // This field is only available after ParseMultipartForm is called. // The HTTP client ignores MultipartForm and uses Body instead. MultipartForm *multipart.Form // Trailer specifies additional headers that are sent after the request // body. // // For server requests, the Trailer map initially contains only the // trailer keys, with nil values. (The client declares which trailers it // will later send.) While the handler is reading from Body, it must // not reference Trailer. After reading from Body returns EOF, Trailer // can be read again and will contain non-nil values, if they were sent // by the client. // // For client requests, Trailer must be initialized to a map containing // the trailer keys to later send. The values may be nil or their final // values. The ContentLength must be 0 or -1, to send a chunked request. // After the HTTP request is sent the map values can be updated while // the request body is read. Once the body returns EOF, the caller must // not mutate Trailer. // // Few HTTP clients, servers, or proxies support HTTP trailers. Trailer Header // RemoteAddr allows HTTP servers and other software to record // the network address that sent the request, usually for // logging. This field is not filled in by ReadRequest and // has no defined format. The HTTP server in this package // sets RemoteAddr to an \"IP:port\" address before invoking a // handler. // This field is ignored by the HTTP client. RemoteAddr string // RequestURI is the unmodified request-target of the // Request-Line (RFC 7230, Section 3.1.1) as sent by the client // to a server. Usually the URL field should be used instead. // It is an error to set this field in an HTTP client request. RequestURI string // TLS allows HTTP servers and other software to record // information about the TLS connection on which the request // was received. This field is not filled in by ReadRequest. // The HTTP server in this package sets the field for // TLS-enabled connections before invoking a handler; // otherwise it leaves the field nil. // This field is ignored by the HTTP client. TLS *tls.ConnectionState // Cancel is an optional channel whose closure indicates that the client // request should be regarded as canceled. Not all implementations of // RoundTripper may support Cancel. // // For server requests, this field is not applicable. // // Deprecated: Set the Request's context with NewRequestWithContext // instead. If a Request's Cancel field and context are both // set, it is undefined whether Cancel is respected. Cancel \u003c-chan struct{} // Response is the redirect response which caused this request // to be created. This field is only populated during client // redirects. Response *Response // Pattern is the [ServeMux] pattern that matched the request. // It is empty if the request was not matched against a pattern. Pattern string // contains filtered or unexported fields } A Request represents an HTTP request received by a server or to be sent by a client. The field semantics differ slightly between client and server usage. In addition to the notes on the fields below, see the documentation for Request.Write and RoundTripper. func NewRequest ¶ func NewRequest(method, url string, body io.Reader) (*Request, error) NewRequest wraps NewRequestWithContext using context.Background. func NewRequestWithContext ¶ added in go1.13 func NewRequestWithContext(ctx context.Context, method, url string, body io.Reader) (*Request, error) NewRequestWithContext returns a new Request given a method, URL, and optional body. If the provided body is also an io.Closer, the returned [Request.Body] is set to body and will be closed (possibly asynchronously) by the Client methods Do, Post, and PostForm, and Transport.RoundTrip. NewRequestWithContext returns a Request suitable for use with Client.Do or Transport.RoundTrip. To create a request for use with testing a Server Handler, either use the net/http/httptest.NewRequest function, use ReadRequest, or manually update the Request fields. For an outgoing client request, the context controls the entire lifetime of a request and its response: obtaining a connection, sending the request, and reading the response headers and body. See the Request type's documentation for the difference between inbound and outbound request fields. If body is of type *bytes.Buffer, *bytes.Reader, or *strings.Reader, the returned request's ContentLength is set to its exact value (instead of -1), GetBody is populated (so 307 and 308 redirects can replay the body), and Body is set to NoBody if the ContentLength is 0. func ReadRequest ¶ func ReadRequest(b *bufio.Reader) (*Request, error) ReadRequest reads and parses an incoming request from b. ReadRequest is a low-level function and should only be used for specialized applications; most code should use the Server to read requests and handle them via the Handler interface. ReadRequest only supports HTTP/1.x requests. For HTTP/2, use golang.org/x/net/http2. func (*Request) AddCookie ¶ func (r *Request) AddCookie(c *Cookie) AddCookie adds a cookie to the request. Per RFC 6265 section 5.4, AddCookie does not attach more than one Cookie header field. That means all cookies, if any, are written into the same line, separated by semicolon. AddCookie only sanitizes c's name and value, and does not sanitize a Cookie header already present in the request. func (*Request) BasicAuth ¶ added in go1.4 func (r *Request) BasicAuth() (username, password string, ok bool) BasicAuth returns the username and password provided in the request's Authorization header, if the request uses HTTP Basic Authentication. See RFC 2617, Section 2. func (*Request) Clone ¶ added in go1.13 func (r *Request) Clone(ctx context.Context) *Request Clone returns a deep copy of r with its context changed to ctx. The provided ctx must be non-nil. Clone only makes a shallow copy of the Body field. For an outgoing client request, the context controls the entire lifetime of a request and its response: obtaining a connection, sending the request, and reading the response headers and body. func (*Request) Context ¶ added in go1.7 func (r *Request) Context() context.Context Context returns the request's context. To change the context, use Request.Clone or Request.WithContext. The returned context is always non-nil; it defaults to the background context. For outgoing client requests, the context controls cancellation. For incoming server requests, the context is canceled when the client's connection closes, the request is canceled (with HTTP/2), or when the ServeHTTP method returns. func (*Request) Cookie ¶ func (r *Request) Cookie(name string) (*Cookie, error) Cookie returns the named cookie provided in the request or ErrNoCookie if not found. If multiple cookies match the given name, only one cookie will be returned. func (*Request) Cookies ¶ func (r *Request) Cookies() []*Cookie Cookies parses and returns the HTTP cookies sent with the request. func (*Request) CookiesNamed ¶ added in go1.23.0 func (r *Request) CookiesNamed(name string) []*Cookie CookiesNamed parses and returns the named HTTP cookies sent with the request or an empty slice if none matched. func (*Request) FormFile ¶ func (r *Request) FormFile(key string) (multipart.File, *multipart.FileHeader, error) FormFile returns the first file for the provided form key. FormFile calls Request.ParseMultipartForm and Request.ParseForm if necessary. func (*Request) FormValue ¶ func (r *Request) FormValue(key string) string FormValue returns the first value for the named component of the query. The precedence order: application/x-www-form-urlencoded form body (POST, PUT, PATCH only) query parameters (always) multipart/form-data form body (always) FormValue calls Request.ParseMultipartForm and Request.ParseForm if necessary and ignores any errors returned by these functions. If key is not present, FormValue returns the empty string. To access multiple values of the same key, call ParseForm and then inspect [Request.Form] directly. func (*Request) MultipartReader ¶ func (r *Request) MultipartReader() (*multipart.Reader, error) MultipartReader returns a MIME multipart reader if this is a multipart/form-data or a multipart/mixed POST request, else returns nil and an error. Use this function instead of Request.ParseMultipartForm to process the request body as a stream. func (*Request) ParseForm ¶ func (r *Request) ParseForm() error ParseForm populates r.Form and r.PostForm. For all requests, ParseForm parses the raw query from the URL and updates r.Form. For POST, PUT, and PATCH requests, it also reads the request body, parses it as a form and puts the results into both r.PostForm and r.Form. Request body parameters take precedence over URL query string values in r.Form. If the request Body's size has not already been limited by MaxBytesReader, the size is capped at 10MB. For other HTTP methods, or when the Content-Type is not application/x-www-form-urlencoded, the request Body is not read, and r.PostForm is initialized to a non-nil, empty value. Request.ParseMultipartForm calls ParseForm automatically. ParseForm is idempotent. func (*Request) ParseMultipartForm ¶ func (r *Request) ParseMultipartForm(maxMemory int64) error ParseMultipartForm parses a request body as multipart/form-data. The whole request body is parsed and up to a total of maxMemory bytes of its file parts are stored in memory, with the remainder stored on disk in temporary files. ParseMultipartForm calls Request.ParseForm if necessary. If ParseForm returns an error, ParseMultipartForm returns it but also continues parsing the request body. After one call to ParseMultipartForm, subsequent calls have no effect. func (*Request) PathValue ¶ added in go1.22.0 func (r *Request) PathValue(name string) string PathValue returns the value for the named path wildcard in the ServeMux pattern that matched the request. It returns the empty string if the request was not matched against a pattern or there is no such wildcard in the pattern. func (*Request) PostFormValue ¶ added in go1.1 func (r *Request) PostFormValue(key string) string PostFormValue returns the first value for the named component of the POST, PUT, or PATCH request body. URL query parameters are ignored. PostFormValue calls Request.ParseMultipartForm and Request.ParseForm if necessary and ignores any errors returned by these functions. If key is not present, PostFormValue returns the empty string. func (*Request) ProtoAtLeast ¶ func (r *Request) ProtoAtLeast(major, minor int) bool ProtoAtLeast reports whether the HTTP protocol used in the request is at least major.minor. func (*Request) Referer ¶ func (r *Request) Referer() string Referer returns the referring URL, if sent in the request. Referer is misspelled as in the request itself, a mistake from the earliest days of HTTP. This value can also be fetched from the Header map as Header[\"Referer\"]; the benefit of making it available as a method is that the compiler can diagnose programs that use the alternate (correct English) spelling req.Referrer() but cannot diagnose programs that use Header[\"Referrer\"]. func (*Request) SetBasicAuth ¶ func (r *Request) SetBasicAuth(username, password string) SetBasicAuth sets the request's Authorization header to use HTTP Basic Authentication with the provided username and password. With HTTP Basic Authentication the provided username and password are not encrypted. It should generally only be used in an HTTPS request. The username may not contain a colon. Some protocols may impose additional requirements on pre-escaping the username and password. For instance, when used with OAuth2, both arguments must be URL encoded first with url.QueryEscape. func (*Request) SetPathValue ¶ added in go1.22.0 func (r *Request) SetPathValue(name, value string) SetPathValue sets name to value, so that subsequent calls to r.PathValue(name) return value. func (*Request) UserAgent ¶ func (r *Request) UserAgent() string UserAgent returns the client's User-Agent, if sent in the request. func (*Request) WithContext ¶ added in go1.7 func (r *Request) WithContext(ctx context.Context) *Request WithContext returns a shallow copy of r with its context changed to ctx. The provided ctx must be non-nil. For outgoing client request, the context controls the entire lifetime of a request and its response: obtaining a connection, sending the request, and reading the response headers and body. To create a new request with a context, use NewRequestWithContext. To make a deep copy of a request with a new context, use Request.Clone. func (*Request) Write ¶ func (r *Request) Write(w io.Writer) error Write writes an HTTP/1.1 request, which is the header and body, in wire format. This method consults the following fields of the request: Host URL Method (defaults to \"GET\") Header ContentLength TransferEncoding Body If Body is present, Content-Length is \u003c= 0 and [Request.TransferEncoding] hasn't been set to \"identity\", Write adds \"Transfer-Encoding: chunked\" to the header. Body is closed after it is sent. func (*Request) WriteProxy ¶ func (r *Request) WriteProxy(w io.Writer) error WriteProxy is like Request.Write but writes the request in the form expected by an HTTP proxy. In particular, Request.WriteProxy writes the initial Request-URI line of the request with an absolute URI, per section 5.3 of RFC 7230, including the scheme and host. In either case, WriteProxy also writes a Host header, using either r.Host or r.URL.Host. type Response ¶ type Response struct { Status string // e.g. \"200 OK\" StatusCode int // e.g. 200 Proto string // e.g. \"HTTP/1.0\" ProtoMajor int // e.g. 1 ProtoMinor int // e.g. 0 // Header maps header keys to values. If the response had multiple // headers with the same key, they may be concatenated, with comma // delimiters. (RFC 7230, section 3.2.2 requires that multiple headers // be semantically equivalent to a comma-delimited sequence.) When // Header values are duplicated by other fields in this struct (e.g., // ContentLength, TransferEncoding, Trailer), the field values are // authoritative. // // Keys in the map are canonicalized (see CanonicalHeaderKey). Header Header // Body represents the response body. // // The response body is streamed on demand as the Body field // is read. If the network connection fails or the server // terminates the response, Body.Read calls return an error. // // The http Client and Transport guarantee that Body is always // non-nil, even on responses without a body or responses with // a zero-length body. It is the caller's responsibility to // close Body. The default HTTP client's Transport may not // reuse HTTP/1.x \"keep-alive\" TCP connections if the Body is // not read to completion and closed. // // The Body is automatically dechunked if the server replied // with a \"chunked\" Transfer-Encoding. // // As of Go 1.12, the Body will also implement io.Writer // on a successful \"101 Switching Protocols\" response, // as used by WebSockets and HTTP/2's \"h2c\" mode. Body io.ReadCloser // ContentLength records the length of the associated content. The // value -1 indicates that the length is unknown. Unless Request.Method // is \"HEAD\", values \u003e= 0 indicate that the given number of bytes may // be read from Body. ContentLength int64 // Contains transfer encodings from outer-most to inner-most. Value is // nil, means that \"identity\" encoding is used. TransferEncoding []string // Close records whether the header directed that the connection be // closed after reading Body. The value is advice for clients: neither // ReadResponse nor Response.Write ever closes a connection. Close bool // Uncompressed reports whether the response was sent compressed but // was decompressed by the http package. When true, reading from // Body yields the uncompressed content instead of the compressed // content actually set from the server, ContentLength is set to -1, // and the \"Content-Length\" and \"Content-Encoding\" fields are deleted // from the responseHeader. To get the original response from // the server, set Transport.DisableCompression to true. Uncompressed bool // Trailer maps trailer keys to values in the same // format as Header. // // The Trailer initially contains only nil values, one for // each key specified in the server's \"Trailer\" header // value. Those values are not added to Header. // // Trailer must not be accessed concurrently with Read calls // on the Body. // // After Body.Read has returned io.EOF, Trailer will contain // any trailer values sent by the server. Trailer Header // Request is the request that was sent to obtain this Response. // Request's Body is nil (having already been consumed). // This is only populated for Client requests. Request *Request // TLS contains information about the TLS connection on which the // response was received. It is nil for unencrypted responses. // The pointer is shared between responses and should not be // modified. TLS *tls.ConnectionState } Response represents the response from an HTTP request. The Client and Transport return Responses from servers once the response headers have been received. The response body is streamed on demand as the Body field is read. func Get ¶ func Get(url string) (resp *Response, err error) Get issues a GET to the specified URL. If the response is one of the following redirect codes, Get follows the redirect, up to a maximum of 10 redirects: 301 (Moved Permanently) 302 (Found) 303 (See Other) 307 (Temporary Redirect) 308 (Permanent Redirect) An error is returned if there were too many redirects or if there was an HTTP protocol error. A non-2xx response doesn't cause an error. Any returned error will be of type *url.Error. The url.Error value's Timeout method will report true if the request timed out. When err is nil, resp always contains a non-nil resp.Body. Caller should close resp.Body when done reading from it. Get is a wrapper around DefaultClient.Get. To make a request with custom headers, use NewRequest and DefaultClient.Do. To make a request with a specified context.Context, use NewRequestWithContext and DefaultClient.Do. Example ¶ package main import ( \"fmt\" \"io\" \"log\" \"net/http\" ) func main() { res, err := http.Get(\"http://www.google.com/robots.txt\") if err != nil { log.Fatal(err) } body, err := io.ReadAll(res.Body) res.Body.Close() if res.StatusCode \u003e 299 { log.Fatalf(\"Response failed with status code: %d and\\nbody: %s\\n\", res.StatusCode, body) } if err != nil { log.Fatal(err) } fmt.Printf(\"%s\", body) } Share Format Run func Head ¶ func Head(url string) (resp *Response, err error) Head issues a HEAD to the specified URL. If the response is one of the following redirect codes, Head follows the redirect, up to a maximum of 10 redirects: 301 (Moved Permanently) 302 (Found) 303 (See Other) 307 (Temporary Redirect) 308 (Permanent Redirect) Head is a wrapper around DefaultClient.Head. To make a request with a specified context.Context, use NewRequestWithContext and DefaultClient.Do. func Post ¶ func Post(url, contentType string, body io.Reader) (resp *Response, err error) Post issues a POST to the specified URL. Caller should close resp.Body when done reading from it. If the provided body is an io.Closer, it is closed after the request. Post is a wrapper around DefaultClient.Post. To set custom headers, use NewRequest and DefaultClient.Do. See the Client.Do method documentation for details on how redirects are handled. To make a request with a specified context.Context, use NewRequestWithContext and DefaultClient.Do. func PostForm ¶ func PostForm(url string, data url.Values) (resp *Response, err error) PostForm issues a POST to the specified URL, with data's keys and values URL-encoded as the request body. The Content-Type header is set to application/x-www-form-urlencoded. To set other headers, use NewRequest and DefaultClient.Do. When err is nil, resp always contains a non-nil resp.Body. Caller should close resp.Body when done reading from it. PostForm is a wrapper around DefaultClient.PostForm. See the Client.Do method documentation for details on how redirects are handled. To make a request with a specified context.Context, use NewRequestWithContext and DefaultClient.Do. func ReadResponse ¶ func ReadResponse(r *bufio.Reader, req *Request) (*Response, error) ReadResponse reads and returns an HTTP response from r. The req parameter optionally specifies the Request that corresponds to this Response. If nil, a GET request is assumed. Clients must call resp.Body.Close when finished reading resp.Body. After that call, clients can inspect resp.Trailer to find key/value pairs included in the response trailer. func (*Response) Cookies ¶ func (r *Response) Cookies() []*Cookie Cookies parses and returns the cookies set in the Set-Cookie headers. func (*Response) Location ¶ func (r *Response) Location() (*url.URL, error) Location returns the URL of the response's \"Location\" header, if present. Relative redirects are resolved relative to [Response.Request]. ErrNoLocation is returned if no Location header is present. func (*Response) ProtoAtLeast ¶ func (r *Response) ProtoAtLeast(major, minor int) bool ProtoAtLeast reports whether the HTTP protocol used in the response is at least major.minor. func (*Response) Write ¶ func (r *Response) Write(w io.Writer) error Write writes r to w in the HTTP/1.x server response format, including the status line, headers, body, and optional trailer. This method consults the following fields of the response r: StatusCode ProtoMajor ProtoMinor Request.Method TransferEncoding Trailer Body ContentLength Header, values for non-canonical keys will have unpredictable behavior The Response Body is closed after it is sent. type ResponseController ¶ added in go1.20 type ResponseController struct { // contains filtered or unexported fields } A ResponseController is used by an HTTP handler to control the response. A ResponseController may not be used after the [Handler.ServeHTTP] method has returned. func NewResponseController ¶ added in go1.20 func NewResponseController(rw ResponseWriter) *ResponseController NewResponseController creates a ResponseController for a request. The ResponseWriter should be the original value passed to the [Handler.ServeHTTP] method, or have an Unwrap method returning the original ResponseWriter. If the ResponseWriter implements any of the following methods, the ResponseController will call them as appropriate: Flush() FlushError() error // alternative Flush returning an error Hijack() (net.Conn, *bufio.ReadWriter, error) SetReadDeadline(deadline time.Time) error SetWriteDeadline(deadline time.Time) error EnableFullDuplex() error If the ResponseWriter does not support a method, ResponseController returns an error matching ErrNotSupported. func (*ResponseController) EnableFullDuplex ¶ added in go1.21.0 func (c *ResponseController) EnableFullDuplex() error EnableFullDuplex indicates that the request handler will interleave reads from [Request.Body] with writes to the ResponseWriter. For HTTP/1 requests, the Go HTTP server by default consumes any unread portion of the request body before beginning to write the response, preventing handlers from concurrently reading from the request and writing the response. Calling EnableFullDuplex disables this behavior and permits handlers to continue to read from the request while concurrently writing the response. For HTTP/2 requests, the Go HTTP server always permits concurrent reads and responses. func (*ResponseController) Flush ¶ added in go1.20 func (c *ResponseController) Flush() error Flush flushes buffered data to the client. func (*ResponseController) Hijack ¶ added in go1.20 func (c *ResponseController) Hijack() (net.Conn, *bufio.ReadWriter, error) Hijack lets the caller take over the connection. See the Hijacker interface for details. func (*ResponseController) SetReadDeadline ¶ added in go1.20 func (c *ResponseController) SetReadDeadline(deadline time.Time) error SetReadDeadline sets the deadline for reading the entire request, including the body. Reads from the request body after the deadline has been exceeded will return an error. A zero value means no deadline. Setting the read deadline after it has been exceeded will not extend it. func (*ResponseController) SetWriteDeadline ¶ added in go1.20 func (c *ResponseController) SetWriteDeadline(deadline time.Time) error SetWriteDeadline sets the deadline for writing the response. Writes to the response body after the deadline has been exceeded will not block, but may succeed if the data has been buffered. A zero value means no deadline. Setting the write deadline after it has been exceeded will not extend it. type ResponseWriter ¶ type ResponseWriter interface { // Header returns the header map that will be sent by // [ResponseWriter.WriteHeader]. The [Header] map also is the mechanism with which // [Handler] implementations can set HTTP trailers. // // Changing the header map after a call to [ResponseWriter.WriteHeader] (or // [ResponseWriter.Write]) has no effect unless the HTTP status code was of the // 1xx class or the modified headers are trailers. // // There are two ways to set Trailers. The preferred way is to // predeclare in the headers which trailers you will later // send by setting the \"Trailer\" header to the names of the // trailer keys which will come later. In this case, those // keys of the Header map are treated as if they were // trailers. See the example. The second way, for trailer // keys not known to the [Handler] until after the first [ResponseWriter.Write], // is to prefix the [Header] map keys with the [TrailerPrefix] // constant value. // // To suppress automatic response headers (such as \"Date\"), set // their value to nil. Header() Header // Write writes the data to the connection as part of an HTTP reply. // // If [ResponseWriter.WriteHeader] has not yet been called, Write calls // WriteHeader(http.StatusOK) before writing the data. If the Header // does not contain a Content-Type line, Write adds a Content-Type set // to the result of passing the initial 512 bytes of written data to // [DetectContentType]. Additionally, if the total size of all written // data is under a few KB and there are no Flush calls, the // Content-Length header is added automatically. // // Depending on the HTTP protocol version and the client, calling // Write or WriteHeader may prevent future reads on the // Request.Body. For HTTP/1.x requests, handlers should read any // needed request body data before writing the response. Once the // headers have been flushed (due to either an explicit Flusher.Flush // call or writing enough data to trigger a flush), the request body // may be unavailable. For HTTP/2 requests, the Go HTTP server permits // handlers to continue to read the request body while concurrently // writing the response. However, such behavior may not be supported // by all HTTP/2 clients. Handlers should read before writing if // possible to maximize compatibility. Write([]byte) (int, error) // WriteHeader sends an HTTP response header with the provided // status code. // // If WriteHeader is not called explicitly, the first call to Write // will trigger an implicit WriteHeader(http.StatusOK). // Thus explicit calls to WriteHeader are mainly used to // send error codes or 1xx informational responses. // // The provided code must be a valid HTTP 1xx-5xx status code. // Any number of 1xx headers may be written, followed by at most // one 2xx-5xx header. 1xx headers are sent immediately, but 2xx-5xx // headers may be buffered. Use the Flusher interface to send // buffered data. The header map is cleared when 2xx-5xx headers are // sent, but not with 1xx headers. // // The server will automatically send a 100 (Continue) header // on the first read from the request body if the request has // an \"Expect: 100-continue\" header. WriteHeader(statusCode int) } A ResponseWriter interface is used by an HTTP handler to construct an HTTP response. A ResponseWriter may not be used after [Handler.ServeHTTP] has returned. Example (Trailers) ¶ HTTP Trailers are a set of key/value pairs like headers that come after the HTTP response, instead of before. package main import ( \"io\" \"net/http\" ) func main() { mux := http.NewServeMux() mux.HandleFunc(\"/sendstrailers\", func(w http.ResponseWriter, req *http.Request) { // Before any call to WriteHeader or Write, declare // the trailers you will set during the HTTP // response. These three headers are actually sent in // the trailer. w.Header().Set(\"Trailer\", \"AtEnd1, AtEnd2\") w.Header().Add(\"Trailer\", \"AtEnd3\") w.Header().Set(\"Content-Type\", \"text/plain; charset=utf-8\") // normal header w.WriteHeader(http.StatusOK) w.Header().Set(\"AtEnd1\", \"value 1\") io.WriteString(w, \"This HTTP response has both headers before this text and trailers at the end.\\n\") w.Header().Set(\"AtEnd2\", \"value 2\") w.Header().Set(\"AtEnd3\", \"value 3\") // These will appear as trailers. }) } Share Format Run type RoundTripper ¶ type RoundTripper interface { // RoundTrip executes a single HTTP transaction, returning // a Response for the provided Request. // // RoundTrip should not attempt to interpret the response. In // particular, RoundTrip must return err == nil if it obtained // a response, regardless of the response's HTTP status code. // A non-nil err should be reserved for failure to obtain a // response. Similarly, RoundTrip should not attempt to // handle higher-level protocol details such as redirects, // authentication, or cookies. // // RoundTrip should not modify the request, except for // consuming and closing the Request's Body. RoundTrip may // read fields of the request in a separate goroutine. Callers // should not mutate or reuse the request until the Response's // Body has been closed. // // RoundTrip must always close the body, including on errors, // but depending on the implementation may do so in a separate // goroutine even after RoundTrip returns. This means that // callers wanting to reuse the body for subsequent requests // must arrange to wait for the Close call before doing so. // // The Request's URL and Header fields must be initialized. RoundTrip(*Request) (*Response, error) } RoundTripper is an interface representing the ability to execute a single HTTP transaction, obtaining the Response for a given Request. A RoundTripper must be safe for concurrent use by multiple goroutines. var DefaultTransport RoundTripper = \u0026Transport{ Proxy: ProxyFromEnvironment, DialContext: defaultTransportDialContext(\u0026net.Dialer{ Timeout: 30 * time.Second, KeepAlive: 30 * time.Second, }), ForceAttemptHTTP2: true, MaxIdleConns: 100, IdleConnTimeout: 90 * time.Second, TLSHandshakeTimeout: 10 * time.Second, ExpectContinueTimeout: 1 * time.Second, } DefaultTransport is the default implementation of Transport and is used by DefaultClient. It establishes network connections as needed and caches them for reuse by subsequent calls. It uses HTTP proxies as directed by the environment variables HTTP_PROXY, HTTPS_PROXY and NO_PROXY (or the lowercase versions thereof). func NewFileTransport ¶ func NewFileTransport(fs FileSystem) RoundTripper NewFileTransport returns a new RoundTripper, serving the provided FileSystem. The returned RoundTripper ignores the URL host in its incoming requests, as well as most other properties of the request. The typical use case for NewFileTransport is to register the \"file\" protocol with a Transport, as in: t := \u0026http.Transport{} t.RegisterProtocol(\"file\", http.NewFileTransport(http.Dir(\"/\"))) c := \u0026http.Client{Transport: t} res, err := c.Get(\"file:///etc/passwd\") ... func NewFileTransportFS ¶ added in go1.22.0 func NewFileTransportFS(fsys fs.FS) RoundTripper NewFileTransportFS returns a new RoundTripper, serving the provided file system fsys. The returned RoundTripper ignores the URL host in its incoming requests, as well as most other properties of the request. The files provided by fsys must implement io.Seeker. The typical use case for NewFileTransportFS is to register the \"file\" protocol with a Transport, as in: fsys := os.DirFS(\"/\") t := \u0026http.Transport{} t.RegisterProtocol(\"file\", http.NewFileTransportFS(fsys)) c := \u0026http.Client{Transport: t} res, err := c.Get(\"file:///etc/passwd\") ... type SameSite ¶ added in go1.11 type SameSite int SameSite allows a server to define a cookie attribute making it impossible for the browser to send this cookie along with cross-site requests. The main goal is to mitigate the risk of cross-origin information leakage, and provide some protection against cross-site request forgery attacks. See https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00 for details. const ( SameSiteDefaultMode SameSite = iota + 1 SameSiteLaxMode SameSiteStrictMode SameSiteNoneMode ) type ServeMux ¶ type ServeMux struct { // contains filtered or unexported fields } Patterns Precedence Trailing-slash redirection Request sanitizing Compatibility ServeMux is an HTTP request multiplexer. It matches the URL of each incoming request against a list of registered patterns and calls the handler for the pattern that most closely matches the URL. Patterns ¶Patterns can match the method, host and path of a request. Some examples: \"/index.html\" matches the path \"/index.html\" for any host and method. \"GET /static/\" matches a GET request whose path begins with \"/static/\". \"example.com/\" matches any request to the host \"example.com\". \"example.com/{$}\" matches requests with host \"example.com\" and path \"/\". \"/b/{bucket}/o/{objectname...}\" matches paths whose first segment is \"b\" and whose third segment is \"o\". The name \"bucket\" denotes the second segment and \"objectname\" denotes the remainder of the path. In general, a pattern looks like [METHOD ][HOST]/[PATH] All three parts are optional; \"/\" is a valid pattern. If METHOD is present, it must be followed by at least one space or tab. Literal (that is, non-wildcard) parts of a pattern match the corresponding parts of a request case-sensitively. A pattern with no method matches every method. A pattern with the method GET matches both GET and HEAD requests. Otherwise, the method must match exactly. A pattern with no host matches every host. A pattern with a host matches URLs on that host only. A path can include wildcard segments of the form {NAME} or {NAME...}. For example, \"/b/{bucket}/o/{objectname...}\". The wildcard name must be a valid Go identifier. Wildcards must be full path segments: they must be preceded by a slash and followed by either a slash or the end of the string. For example, \"/b_{bucket}\" is not a valid pattern. Normally a wildcard matches only a single path segment, ending at the next literal slash (not %2F) in the request URL. But if the \"...\" is present, then the wildcard matches the remainder of the URL path, including slashes. (Therefore it is invalid for a \"...\" wildcard to appear anywhere but at the end of a pattern.) The match for a wildcard can be obtained by calling Request.PathValue with the wildcard's name. A trailing slash in a path acts as an anonymous \"...\" wildcard. The special wildcard {$} matches only the end of the URL. For example, the pattern \"/{$}\" matches only the path \"/\", whereas the pattern \"/\" matches every path. For matching, both pattern paths and incoming request paths are unescaped segment by segment. So, for example, the path \"/a%2Fb/100%25\" is treated as having two segments, \"a/b\" and \"100%\". The pattern \"/a%2fb/\" matches it, but the pattern \"/a/b/\" does not. Precedence ¶If two or more patterns match a request, then the most specific pattern takes precedence. A pattern P1 is more specific than P2 if P1 matches a strict subset of P2’s requests; that is, if P2 matches all the requests of P1 and more. If neither is more specific, then the patterns conflict. There is one exception to this rule, for backwards compatibility: if two patterns would otherwise conflict and one has a host while the other does not, then the pattern with the host takes precedence. If a pattern passed to ServeMux.Handle or ServeMux.HandleFunc conflicts with another pattern that is already registered, those functions panic. As an example of the general rule, \"/images/thumbnails/\" is more specific than \"/images/\", so both can be registered. The former matches paths beginning with \"/images/thumbnails/\" and the latter will match any other path in the \"/images/\" subtree. As another example, consider the patterns \"GET /\" and \"/index.html\": both match a GET request for \"/index.html\", but the former pattern matches all other GET and HEAD requests, while the latter matches any request for \"/index.html\" that uses a different method. The patterns conflict. Trailing-slash redirection ¶Consider a ServeMux with a handler for a subtree, registered using a trailing slash or \"...\" wildcard. If the ServeMux receives a request for the subtree root without a trailing slash, it redirects the request by adding the trailing slash. This behavior can be overridden with a separate registration for the path without the trailing slash or \"...\" wildcard. For example, registering \"/images/\" causes ServeMux to redirect a request for \"/images\" to \"/images/\", unless \"/images\" has been registered separately. Request sanitizing ¶ServeMux also takes care of sanitizing the URL request path and the Host header, stripping the port number and redirecting any request containing . or .. segments or repeated slashes to an equivalent, cleaner URL. Escaped path elements such as \"%2e\" for \".\" and \"%2f\" for \"/\" are preserved and aren't considered separators for request routing. Compatibility ¶The pattern syntax and matching behavior of ServeMux changed significantly in Go 1.22. To restore the old behavior, set the GODEBUG environment variable to \"httpmuxgo121=1\". This setting is read once, at program startup; changes during execution will be ignored. The backwards-incompatible changes include: Wildcards are just ordinary literal path segments in 1.21. For example, the pattern \"/{x}\" will match only that path in 1.21, but will match any one-segment path in 1.22. In 1.21, no pattern was rejected, unless it was empty or conflicted with an existing pattern. In 1.22, syntactically invalid patterns will cause ServeMux.Handle and ServeMux.HandleFunc to panic. For example, in 1.21, the patterns \"/{\" and \"/a{x}\" match themselves, but in 1.22 they are invalid and will cause a panic when registered. In 1.22, each segment of a pattern is unescaped; this was not done in 1.21. For example, in 1.22 the pattern \"/%61\" matches the path \"/a\" (\"%61\" being the URL escape sequence for \"a\"), but in 1.21 it would match only the path \"/%2561\" (where \"%25\" is the escape for the percent sign). When matching patterns to paths, in 1.22 each segment of the path is unescaped; in 1.21, the entire path is unescaped. This change mostly affects how paths with %2F escapes adjacent to slashes are treated. See https://go.dev/issue/21955 for details. func NewServeMux ¶ func NewServeMux() *ServeMux NewServeMux allocates and returns a new ServeMux. func (*ServeMux) Handle ¶ func (mux *ServeMux) Handle(pattern string, handler Handler) Handle registers the handler for the given pattern. If the given pattern conflicts with one that is already registered or if the pattern is invalid, Handle panics. See ServeMux for details on valid patterns and conflict rules. Example ¶ package main import ( \"fmt\" \"net/http\" ) type apiHandler struct{} func (apiHandler) ServeHTTP(http.ResponseWriter, *http.Request) {} func main() { mux := http.NewServeMux() mux.Handle(\"/api/\", apiHandler{}) mux.HandleFunc(\"/\", func(w http.ResponseWriter, req *http.Request) { // The \"/\" pattern matches everything, so we need to check // that we're at the root here. if req.URL.Path != \"/\" { http.NotFound(w, req) return } fmt.Fprintf(w, \"Welcome to the home page!\") }) } Share Format Run func (*ServeMux) HandleFunc ¶ func (mux *ServeMux) HandleFunc(pattern string, handler func(ResponseWriter, *Request)) HandleFunc registers the handler function for the given pattern. If the given pattern conflicts with one that is already registered or if the pattern is invalid, HandleFunc panics. See ServeMux for details on valid patterns and conflict rules. func (*ServeMux) Handler ¶ added in go1.1 func (mux *ServeMux) Handler(r *Request) (h Handler, pattern string) Handler returns the handler to use for the given request, consulting r.Method, r.Host, and r.URL.Path. It always returns a non-nil handler. If the path is not in its canonical form, the handler will be an internally-generated handler that redirects to the canonical path. If the host contains a port, it is ignored when matching handlers. The path and host are used unchanged for CONNECT requests. Handler also returns the registered pattern that matches the request or, in the case of internally-generated redirects, the path that will match after following the redirect. If there is no registered handler that applies to the request, Handler returns a “page not found” or “method not supported” handler and an empty pattern. Handler does not modify its argument. In particular, it does not populate named path wildcards, so r.PathValue will always return the empty string. func (*ServeMux) ServeHTTP ¶ func (mux *ServeMux) ServeHTTP(w ResponseWriter, r *Request) ServeHTTP dispatches the request to the handler whose pattern most closely matches the request URL. type Server ¶ type Server struct { // Addr optionally specifies the TCP address for the server to listen on, // in the form \"host:port\". If empty, \":http\" (port 80) is used. // The service names are defined in RFC 6335 and assigned by IANA. // See net.Dial for details of the address format. Addr string Handler Handler // handler to invoke, http.DefaultServeMux if nil // DisableGeneralOptionsHandler, if true, passes \"OPTIONS *\" requests to the Handler, // otherwise responds with 200 OK and Content-Length: 0. DisableGeneralOptionsHandler bool // TLSConfig optionally provides a TLS configuration for use // by ServeTLS and ListenAndServeTLS. Note that this value is // cloned by ServeTLS and ListenAndServeTLS, so it's not // possible to modify the configuration with methods like // tls.Config.SetSessionTicketKeys. To use // SetSessionTicketKeys, use Server.Serve with a TLS Listener // instead. TLSConfig *tls.Config // ReadTimeout is the maximum duration for reading the entire // request, including the body. A zero or negative value means // there will be no timeout. // // Because ReadTimeout does not let Handlers make per-request // decisions on each request body's acceptable deadline or // upload rate, most users will prefer to use // ReadHeaderTimeout. It is valid to use them both. ReadTimeout time.Duration // ReadHeaderTimeout is the amount of time allowed to read // request headers. The connection's read deadline is reset // after reading the headers and the Handler can decide what // is considered too slow for the body. If zero, the value of // ReadTimeout is used. If negative, or if zero and ReadTimeout // is zero or negative, there is no timeout. ReadHeaderTimeout time.Duration // WriteTimeout is the maximum duration before timing out // writes of the response. It is reset whenever a new // request's header is read. Like ReadTimeout, it does not // let Handlers make decisions on a per-request basis. // A zero or negative value means there will be no timeout. WriteTimeout time.Duration // IdleTimeout is the maximum amount of time to wait for the // next request when keep-alives are enabled. If zero, the value // of ReadTimeout is used. If negative, or if zero and ReadTimeout // is zero or negative, there is no timeout. IdleTimeout time.Duration // MaxHeaderBytes controls the maximum number of bytes the // server will read parsing the request header's keys and // values, including the request line. It does not limit the // size of the request body. // If zero, DefaultMaxHeaderBytes is used. MaxHeaderBytes int // TLSNextProto optionally specifies a function to take over // ownership of the provided TLS connection when an ALPN // protocol upgrade has occurred. The map key is the protocol // name negotiated. The Handler argument should be used to // handle HTTP requests and will initialize the Request's TLS // and RemoteAddr if not already set. The connection is // automatically closed when the function returns. // If TLSNextProto is not nil, HTTP/2 support is not enabled // automatically. // // Historically, TLSNextProto was used to disable HTTP/2 support. // The Server.Protocols field now provides a simpler way to do this. TLSNextProto map[string]func(*Server, *tls.Conn, Handler) // ConnState specifies an optional callback function that is // called when a client connection changes state. See the // ConnState type and associated constants for details. ConnState func(net.Conn, ConnState) // ErrorLog specifies an optional logger for errors accepting // connections, unexpected behavior from handlers, and // underlying FileSystem errors. // If nil, logging is done via the log package's standard logger. ErrorLog *log.Logger // BaseContext optionally specifies a function that returns // the base context for incoming requests on this server. // The provided Listener is the specific Listener that's // about to start accepting requests. // If BaseContext is nil, the default is context.Background(). // If non-nil, it must return a non-nil context. BaseContext func(net.Listener) context.Context // ConnContext optionally specifies a function that modifies // the context used for a new connection c. The provided ctx // is derived from the base context and has a ServerContextKey // value. ConnContext func(ctx context.Context, c net.Conn) context.Context // HTTP2 configures HTTP/2 connections. HTTP2 *HTTP2Config // Protocols is the set of protocols accepted by the server. // // If Protocols includes UnencryptedHTTP2, the server will accept // unencrypted HTTP/2 connections. The server can serve both // HTTP/1 and unencrypted HTTP/2 on the same address and port. // // If Protocols is nil, the default is usually HTTP/1 and HTTP/2. // If TLSNextProto is non-nil and does not contain an \"h2\" entry, // the default is HTTP/1 only. Protocols *Protocols // contains filtered or unexported fields } A Server defines parameters for running an HTTP server. The zero value for Server is a valid configuration. func (*Server) Close ¶ added in go1.8 func (s *Server) Close() error Close immediately closes all active net.Listeners and any connections in state StateNew, StateActive, or StateIdle. For a graceful shutdown, use Server.Shutdown. Close does not attempt to close (and does not even know about) any hijacked connections, such as WebSockets. Close returns any error returned from closing the Server's underlying Listener(s). func (*Server) ListenAndServe ¶ func (s *Server) ListenAndServe() error ListenAndServe listens on the TCP network address s.Addr and then calls Serve to handle requests on incoming connections. Accepted connections are configured to enable TCP keep-alives. If s.Addr is blank, \":http\" is used. ListenAndServe always returns a non-nil error. After Server.Shutdown or Server.Close, the returned error is ErrServerClosed. func (*Server) ListenAndServeTLS ¶ func (s *Server) ListenAndServeTLS(certFile, keyFile string) error ListenAndServeTLS listens on the TCP network address s.Addr and then calls ServeTLS to handle requests on incoming TLS connections. Accepted connections are configured to enable TCP keep-alives. Filenames containing a certificate and matching private key for the server must be provided if neither the Server's TLSConfig.Certificates nor TLSConfig.GetCertificate are populated. If the certificate is signed by a certificate authority, the certFile should be the concatenation of the server's certificate, any intermediates, and the CA's certificate. If s.Addr is blank, \":https\" is used. ListenAndServeTLS always returns a non-nil error. After Server.Shutdown or Server.Close, the returned error is ErrServerClosed. func (*Server) RegisterOnShutdown ¶ added in go1.9 func (s *Server) RegisterOnShutdown(f func()) RegisterOnShutdown registers a function to call on Server.Shutdown. This can be used to gracefully shutdown connections that have undergone ALPN protocol upgrade or that have been hijacked. This function should start protocol-specific graceful shutdown, but should not wait for shutdown to complete. func (*Server) Serve ¶ func (s *Server) Serve(l net.Listener) error Serve accepts incoming connections on the Listener l, creating a new service goroutine for each. The service goroutines read requests and then call s.Handler to reply to them. HTTP/2 support is only enabled if the Listener returns *tls.Conn connections and they were configured with \"h2\" in the TLS Config.NextProtos. Serve always returns a non-nil error and closes l. After Server.Shutdown or Server.Close, the returned error is ErrServerClosed. func (*Server) ServeTLS ¶ added in go1.9 func (s *Server) ServeTLS(l net.Listener, certFile, keyFile string) error ServeTLS accepts incoming connections on the Listener l, creating a new service goroutine for each. The service goroutines perform TLS setup and then read requests, calling s.Handler to reply to them. Files containing a certificate and matching private key for the server must be provided if neither the Server's TLSConfig.Certificates, TLSConfig.GetCertificate nor config.GetConfigForClient are populated. If the certificate is signed by a certificate authority, the certFile should be the concatenation of the server's certificate, any intermediates, and the CA's certificate. ServeTLS always returns a non-nil error. After Server.Shutdown or Server.Close, the returned error is ErrServerClosed. func (*Server) SetKeepAlivesEnabled ¶ added in go1.3 func (s *Server) SetKeepAlivesEnabled(v bool) SetKeepAlivesEnabled controls whether HTTP keep-alives are enabled. By default, keep-alives are always enabled. Only very resource-constrained environments or servers in the process of shutting down should disable them. func (*Server) Shutdown ¶ added in go1.8 func (s *Server) Shutdown(ctx context.Context) error Shutdown gracefully shuts down the server without interrupting any active connections. Shutdown works by first closing all open listeners, then closing all idle connections, and then waiting indefinitely for connections to return to idle and then shut down. If the provided context expires before the shutdown is complete, Shutdown returns the context's error, otherwise it returns any error returned from closing the Server's underlying Listener(s). When Shutdown is called, Serve, ServeTLS, ListenAndServe, and ListenAndServeTLS immediately return ErrServerClosed. Make sure the program doesn't exit and waits instead for Shutdown to return. Shutdown does not attempt to close nor wait for hijacked connections such as WebSockets. The caller of Shutdown should separately notify such long-lived connections of shutdown and wait for them to close, if desired. See Server.RegisterOnShutdown for a way to register shutdown notification functions. Once Shutdown has been called on a server, it may not be reused; future calls to methods such as Serve will return ErrServerClosed. Example ¶ package main import ( \"context\" \"log\" \"net/http\" \"os\" \"os/signal\" ) func main() { var srv http.Server idleConnsClosed := make(chan struct{}) go func() { sigint := make(chan os.Signal, 1) signal.Notify(sigint, os.Interrupt) \u003c-sigint // We received an interrupt signal, shut down. if err := srv.Shutdown(context.Background()); err != nil { // Error from closing listeners, or context timeout: log.Printf(\"HTTP server Shutdown: %v\", err) } close(idleConnsClosed) }() if err := srv.ListenAndServe(); err != http.ErrServerClosed { // Error starting or closing listener: log.Fatalf(\"HTTP server ListenAndServe: %v\", err) } \u003c-idleConnsClosed } Share Format Run type Transport ¶ type Transport struct { // Proxy specifies a function to return a proxy for a given // Request. If the function returns a non-nil error, the // request is aborted with the provided error. // // The proxy type is determined by the URL scheme. \"http\", // \"https\", \"socks5\", and \"socks5h\" are supported. If the scheme is empty, // \"http\" is assumed. // \"socks5\" is treated the same as \"socks5h\". // // If the proxy URL contains a userinfo subcomponent, // the proxy request will pass the username and password // in a Proxy-Authorization header. // // If Proxy is nil or returns a nil *URL, no proxy is used. Proxy func(*Request) (*url.URL, error) // OnProxyConnectResponse is called when the Transport gets an HTTP response from // a proxy for a CONNECT request. It's called before the check for a 200 OK response. // If it returns an error, the request fails with that error. OnProxyConnectResponse func(ctx context.Context, proxyURL *url.URL, connectReq *Request, connectRes *Response) error // DialContext specifies the dial function for creating unencrypted TCP connections. // If DialContext is nil (and the deprecated Dial below is also nil), // then the transport dials using package net. // // DialContext runs concurrently with calls to RoundTrip. // A RoundTrip call that initiates a dial may end up using // a connection dialed previously when the earlier connection // becomes idle before the later DialContext completes. DialContext func(ctx context.Context, network, addr string) (net.Conn, error) // Dial specifies the dial function for creating unencrypted TCP connections. // // Dial runs concurrently with calls to RoundTrip. // A RoundTrip call that initiates a dial may end up using // a connection dialed previously when the earlier connection // becomes idle before the later Dial completes. // // Deprecated: Use DialContext instead, which allows the transport // to cancel dials as soon as they are no longer needed. // If both are set, DialContext takes priority. Dial func(network, addr string) (net.Conn, error) // DialTLSContext specifies an optional dial function for creating // TLS connections for non-proxied HTTPS requests. // // If DialTLSContext is nil (and the deprecated DialTLS below is also nil), // DialContext and TLSClientConfig are used. // // If DialTLSContext is set, the Dial and DialContext hooks are not used for HTTPS // requests and the TLSClientConfig and TLSHandshakeTimeout // are ignored. The returned net.Conn is assumed to already be // past the TLS handshake. DialTLSContext func(ctx context.Context, network, addr string) (net.Conn, error) // DialTLS specifies an optional dial function for creating // TLS connections for non-proxied HTTPS requests. // // Deprecated: Use DialTLSContext instead, which allows the transport // to cancel dials as soon as they are no longer needed. // If both are set, DialTLSContext takes priority. DialTLS func(network, addr string) (net.Conn, error) // TLSClientConfig specifies the TLS configuration to use with // tls.Client. // If nil, the default configuration is used. // If non-nil, HTTP/2 support may not be enabled by default. TLSClientConfig *tls.Config // TLSHandshakeTimeout specifies the maximum amount of time to // wait for a TLS handshake. Zero means no timeout. TLSHandshakeTimeout time.Duration // DisableKeepAlives, if true, disables HTTP keep-alives and // will only use the connection to the server for a single // HTTP request. // // This is unrelated to the similarly named TCP keep-alives. DisableKeepAlives bool // DisableCompression, if true, prevents the Transport from // requesting compression with an \"Accept-Encoding: gzip\" // request header when the Request contains no existing // Accept-Encoding value. If the Transport requests gzip on // its own and gets a gzipped response, it's transparently // decoded in the Response.Body. However, if the user // explicitly requested gzip it is not automatically // uncompressed. DisableCompression bool // MaxIdleConns controls the maximum number of idle (keep-alive) // connections across all hosts. Zero means no limit. MaxIdleConns int // MaxIdleConnsPerHost, if non-zero, controls the maximum idle // (keep-alive) connections to keep per-host. If zero, // DefaultMaxIdleConnsPerHost is used. MaxIdleConnsPerHost int // MaxConnsPerHost optionally limits the total number of // connections per host, including connections in the dialing, // active, and idle states. On limit violation, dials will block. // // Zero means no limit. MaxConnsPerHost int // IdleConnTimeout is the maximum amount of time an idle // (keep-alive) connection will remain idle before closing // itself. // Zero means no limit. IdleConnTimeout time.Duration // ResponseHeaderTimeout, if non-zero, specifies the amount of // time to wait for a server's response headers after fully // writing the request (including its body, if any). This // time does not include the time to read the response body. ResponseHeaderTimeout time.Duration // ExpectContinueTimeout, if non-zero, specifies the amount of // time to wait for a server's first response headers after fully // writing the request headers if the request has an // \"Expect: 100-continue\" header. Zero means no timeout and // causes the body to be sent immediately, without // waiting for the server to approve. // This time does not include the time to send the request header. ExpectContinueTimeout time.Duration // TLSNextProto specifies how the Transport switches to an // alternate protocol (such as HTTP/2) after a TLS ALPN // protocol negotiation. If Transport dials a TLS connection // with a non-empty protocol name and TLSNextProto contains a // map entry for that key (such as \"h2\"), then the func is // called with the request's authority (such as \"example.com\" // or \"example.com:1234\") and the TLS connection. The function // must return a RoundTripper that then handles the request. // If TLSNextProto is not nil, HTTP/2 support is not enabled // automatically. // // Historically, TLSNextProto was used to disable HTTP/2 support. // The Transport.Protocols field now provides a simpler way to do this. TLSNextProto map[string]func(authority string, c *tls.Conn) RoundTripper // ProxyConnectHeader optionally specifies headers to send to // proxies during CONNECT requests. // To set the header dynamically, see GetProxyConnectHeader. ProxyConnectHeader Header // GetProxyConnectHeader optionally specifies a func to return // headers to send to proxyURL during a CONNECT request to the // ip:port target. // If it returns an error, the Transport's RoundTrip fails with // that error. It can return (nil, nil) to not add headers. // If GetProxyConnectHeader is non-nil, ProxyConnectHeader is // ignored. GetProxyConnectHeader func(ctx context.Context, proxyURL *url.URL, target string) (Header, error) // MaxResponseHeaderBytes specifies a limit on how many // response bytes are allowed in the server's response // header. // // Zero means to use a default limit. MaxResponseHeaderBytes int64 // WriteBufferSize specifies the size of the write buffer used // when writing to the transport. // If zero, a default (currently 4KB) is used. WriteBufferSize int // ReadBufferSize specifies the size of the read buffer used // when reading from the transport. // If zero, a default (currently 4KB) is used. ReadBufferSize int // ForceAttemptHTTP2 controls whether HTTP/2 is enabled when a non-zero // Dial, DialTLS, or DialContext func or TLSClientConfig is provided. // By default, use of any those fields conservatively disables HTTP/2. // To use a custom dialer or TLS config and still attempt HTTP/2 // upgrades, set this to true. ForceAttemptHTTP2 bool // HTTP2 configures HTTP/2 connections. HTTP2 *HTTP2Config // Protocols is the set of protocols supported by the transport. // // If Protocols includes UnencryptedHTTP2 and does not include HTTP1, // the transport will use unencrypted HTTP/2 for requests for http:// URLs. // // If Protocols is nil, the default is usually HTTP/1 only. // If ForceAttemptHTTP2 is true, or if TLSNextProto contains an \"h2\" entry, // the default is HTTP/1 and HTTP/2. Protocols *Protocols // contains filtered or unexported fields } Transport is an implementation of RoundTripper that supports HTTP, HTTPS, and HTTP proxies (for either HTTP or HTTPS with CONNECT). By default, Transport caches connections for future re-use. This may leave many open connections when accessing many hosts. This behavior can be managed using Transport.CloseIdleConnections method and the [Transport.MaxIdleConnsPerHost] and [Transport.DisableKeepAlives] fields. Transports should be reused instead of created as needed. Transports are safe for concurrent use by multiple goroutines. A Transport is a low-level primitive for making HTTP and HTTPS requests. For high-level functionality, such as cookies and redirects, see Client. Transport uses HTTP/1.1 for HTTP URLs and either HTTP/1.1 or HTTP/2 for HTTPS URLs, depending on whether the server supports HTTP/2, and how the Transport is configured. The DefaultTransport supports HTTP/2. To explicitly enable HTTP/2 on a transport, set [Transport.Protocols]. Responses with status codes in the 1xx range are either handled automatically (100 expect-continue) or ignored. The one exception is HTTP status code 101 (Switching Protocols), which is considered a terminal status and returned by Transport.RoundTrip. To see the ignored 1xx responses, use the httptrace trace package's ClientTrace.Got1xxResponse. Transport only retries a request upon encountering a network error if the connection has already been used successfully and if the request is idempotent and either has no body or has its [Request.GetBody] defined. HTTP requests are considered idempotent if they have HTTP methods GET, HEAD, OPTIONS, or TRACE; or if their Header map contains an \"Idempotency-Key\" or \"X-Idempotency-Key\" entry. If the idempotency key value is a zero-length slice, the request is treated as idempotent but the header is not sent on the wire. func (*Transport) CancelRequest deprecated added in go1.1 func (t *Transport) CancelRequest(req *Request) CancelRequest cancels an in-flight request by closing its connection. CancelRequest should only be called after Transport.RoundTrip has returned. Deprecated: Use Request.WithContext to create a request with a cancelable context instead. CancelRequest cannot cancel HTTP/2 requests. This may become a no-op in a future release of Go. func (*Transport) Clone ¶ added in go1.13 func (t *Transport) Clone() *Transport Clone returns a deep copy of t's exported fields. func (*Transport) CloseIdleConnections ¶ func (t *Transport) CloseIdleConnections() CloseIdleConnections closes any connections which were previously connected from previous requests but are now sitting idle in a \"keep-alive\" state. It does not interrupt any connections currently in use. func (*Transport) NewClientConn ¶ added in go1.26.0 func (t *Transport) NewClientConn(ctx context.Context, scheme, address string) (*ClientConn, error) NewClientConn creates a new client connection to the given address. If scheme is \"http\", the connection is unencrypted. If scheme is \"https\", the connection uses TLS. The protocol used for the new connection is determined by the scheme, Transport.Protocols configuration field, and protocols supported by the server. See Transport.Protocols for more details. If Transport.Proxy is set and indicates that a request sent to the given address should use a proxy, the new connection uses that proxy. NewClientConn always creates a new connection, even if the Transport has an existing cached connection to the given host. The new connection is not added to the Transport's connection cache, and will not be used by Transport.RoundTrip. It does not count against the MaxIdleConns and MaxConnsPerHost limits. The caller is responsible for closing the new connection. func (*Transport) RegisterProtocol ¶ func (t *Transport) RegisterProtocol(scheme string, rt RoundTripper) RegisterProtocol registers a new protocol with scheme. The Transport will pass requests using the given scheme to rt. It is rt's responsibility to simulate HTTP request semantics. RegisterProtocol can be used by other packages to provide implementations of protocol schemes like \"ftp\" or \"file\". If rt.RoundTrip returns ErrSkipAltProtocol, the Transport will handle the Transport.RoundTrip itself for that one request, as if the protocol were not registered. func (*Transport) RoundTrip ¶ func (t *Transport) RoundTrip(req *Request) (*Response, error) RoundTrip implements the RoundTripper interface. For higher-level HTTP client support (such as handling of cookies and redirects), see Get, Post, and the Client type. Like the RoundTripper interface, the error types returned by RoundTrip are unspecified. ## Functions (21) - `func CanonicalHeaderKey(s string) string` - `func DetectContentType(data []byte) string` - `func Error(w ResponseWriter, error string, code int)` - `func Handle(pattern string, handler Handler)` - `func HandleFunc(pattern string, handler func(ResponseWriter, *Request))` - `func ListenAndServe(addr string, handler Handler) error` - `func ListenAndServeTLS(addr, certFile, keyFile string, handler Handler) error` - `func MaxBytesReader(w ResponseWriter, r io.ReadCloser, n int64) io.ReadCloser` - `func NotFound(w ResponseWriter, r *Request)` - `func ParseHTTPVersion(vers string) (major, minor int, ok bool)` - `func ParseTime(text string) (t time.Time, err error)` - `func ProxyFromEnvironment(req *Request) (*url.URL, error)` - `func ProxyURL(fixedURL *url.URL) func(*Request) (*url.URL, error)` - `func Redirect(w ResponseWriter, r *Request, url string, code int)` - `func Serve(l net.Listener, handler Handler) error` - `func ServeContent(w ResponseWriter, req *Request, name string, modtime time.Time, content io.ReadSeeker)` - `func ServeFile(w ResponseWriter, r *Request, name string)` - `func ServeFileFS(w ResponseWriter, r *Request, fsys fs.FS, name string)` - `func ServeTLS(l net.Listener, handler Handler, certFile, keyFile string) error` - `func SetCookie(w ResponseWriter, cookie *Cookie)` - `func StatusText(code int) string` ## Types (30) - `type Client ¶` (alias) - `type ClientConn ¶ added in go1.26.0` (alias) - `type CloseNotifier deprecated added in go1.1` (alias) - `type ConnState ¶ added in go1.3` (alias) - `type Cookie ¶` (alias) - `type CookieJar ¶` (alias) - `type CrossOriginProtection ¶ added in go1.25.0` (alias) - `type Dir ¶` (alias) - `type File ¶` (alias) - `type FileSystem ¶` (alias) - `type Flusher ¶` (alias) - `type HTTP2Config ¶ added in go1.24.0` (alias) - `type Handler ¶` (alias) - `type HandlerFunc ¶` (alias) - `type Header ¶` (alias) - `type Hijacker ¶` (alias) - `type MaxBytesError ¶ added in go1.19` (alias) - `type ProtocolError deprecated` (alias) - `type Protocols ¶ added in go1.24.0` (alias) - `type PushOptions ¶ added in go1.8` (alias) - `type Pusher ¶ added in go1.8` (alias) - `type Request ¶` (struct) - `type Response ¶` (alias) - `type ResponseController ¶ added in go1.20` (alias) - `type ResponseWriter ¶` (alias) - `type RoundTripper ¶` (alias) - `type SameSite ¶ added in go1.11` (alias) - `type ServeMux ¶` (alias) - `type Server ¶` (alias) - `type Transport ¶` (alias) ## Constants (1) ## Variables (1)", "term_freq": { "##": 5, "#1": 1, "#2": 1, "%25": 1, "%2e": 1, "%2f": 3, "%61": 1, "%d": 1, "%d\\n": 1, "%q\\nbye": 1, "%s": 1, "%s\\n": 1, "%v": 3, "\u0026\u0026": 2, "\u0026client": 1, "\u0026contextkey": 2, "\u0026defaultservemux": 1, "\u0026http": 5, "\u0026net": 1, "\u0026protocolerror": 7, "\u0026transport": 1, "*bufio": 8, "*bytes": 2, "*client": 18, "*clientconn": 28, "*cookie": 25, "*counthandler": 1, "*crossoriginprotection": 17, "*http": 12, "*http2config": 2, "*log": 1, "*maxbyteserror": 4, "*multipart": 5, "*os": 2, "*protocolerror": 6, "*protocols": 11, "*pushoptions": 1, "*request": 128, "*response": 39, "*responsecontroller": 17, "*servemux": 14, "*server": 26, "*strings": 1, "*tls": 8, "*transport": 20, "*url": 21, "-1": 5, "-separated": 1, "/%2561": 1, "/%61": 1, "//": 910, "///etc/passwd": 2, "//127": 1, "//go": 1, "//host": 1, "//mimesniff": 1, "//pkg": 3, "//tools": 3, "//www": 3, "/a": 2, "/a%2fb/": 1, "/a%2fb/100%25": 1, "/a/b/": 1, "/api/": 1, "/b/": 2, "/b_": 1, "/count": 1, "/endpoint": 1, "/hello": 2, "/hijack": 1, "/images": 2, "/images/": 4, "/images/thumbnails/": 2, "/index": 9, "/o/": 2, "/path": 1, "/resources": 1, "/resources/people/": 1, "/sendstrailers": 1, "/static/": 2, "/tmp": 5, "/tmpfiles/": 6, "/usr/share/doc": 1, "0-9": 1, "02": 1, "04": 1, "05": 1, "10": 7, "100": 5, "100%": 1, "100-continue": 2, "101": 3, "102": 1, "103": 1, "10mb": 1, "11": 7, "12": 3, "1234": 1, "13": 5, "14": 2, "15": 50, "16": 2, "16kib": 1, "16mib": 1, "17": 3, "18": 3, "19": 4, "1xx": 7, "1xx-5xx": 1, "20": 9, "200": 6, "2006": 1, "201": 1, "202": 1, "2023": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "21": 11, "22": 13, "226": 1, "2295": 1, "23": 3, "24": 11, "25": 8, "2518": 1, "26": 11, "2617": 1, "2774": 1, "299": 1, "2xx-5xx": 3, "30": 3, "300": 1, "301": 6, "302": 6, "303": 6, "304": 1, "305": 1, "307": 7, "308": 7, "3229": 1, "3xx": 2, "400": 1, "401": 1, "402": 1, "403": 5, "404": 5, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "428": 1, "429": 1, "431": 1, "451": 1, "4918": 4, "4kb": 2, "4mib": 4, "500": 1, "501": 1, "502": 1, "503": 2, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "510": 1, "511": 1, "512": 2, "5789": 1, "5842": 2, "6265": 2, "6335": 1, "64kib": 1, "6585": 4, "7230": 6, "7231": 1, "7232": 1, "7725": 1, "80": 1, "8080": 7, "8297": 1, "8443": 3, "8443/": 1, "8470": 1, "90": 1, "9110": 45, "\u003c-chan": 2, "\u003c-idleconnsclosed": 1, "\u003c-sigint": 1, "\u003c\u003c": 1, "\u003c=": 1, "==": 4, "\u003e=": 2, "\\n": 7, "a-z": 1, "a/b": 1, "ability": 3, "able": 2, "abort": 3, "aborted": 1, "aborts": 1, "about": 5, "absolute": 3, "accept": 1, "accept-encoding": 6, "accept-language": 2, "acceptable": 1, "accepted": 4, "accepting": 2, "accepts": 4, "access": 8, "accessed": 1, "accessing": 1, "accidentally": 1, "according": 1, "accounted": 1, "across": 2, "actions": 1, "active": 6, "acts": 2, "actually": 3, "adapter": 2, "add": 6, "addcookie": 6, "added": 89, "adding": 2, "addinsecurebypasspattern": 6, "addition": 1, "additional": 5, "additionally": 4, "addr": 20, "address": 13, "adds": 8, "addtrustedorigin": 5, "adjacent": 1, "advice": 1, "affects": 1, "after": 58, "again": 2, "against": 13, "algorithm": 1, "alias": 29, "all": 26, "allocates": 1, "allow": 7, "allowed": 5, "allowed\\n": 1, "allowquerysemicolons": 5, "allows": 6, "along": 2, "alpn": 3, "already": 13, "also": 17, "alter": 1, "alternate": 5, "alternative": 2, "always": 30, "amount": 6, "ampersands": 2, "an": 134, "and": 309, "and\\nbody": 1, "anonymous": 1, "another": 4, "ansic": 1, "any": 57, "anything": 6, "anywhere": 1, "apihandler": 3, "appear": 3, "append": 1, "appends": 1, "applicable": 1, "application/octet-stream": 1, "application/x-www-form-urlencoded": 4, "applications": 2, "applies": 8, "appropriate": 2, "approve": 1, "arbitrary": 1, "are": 100, "aren": 1, "argument": 6, "arguments": 2, "around": 6, "arrange": 1, "arranges": 1, "arrival": 2, "arrived": 1, "as": 93, "ascend": 1, "assign": 1, "assigned": 1, "associated": 12, "assumed": 6, "assumes": 2, "assuming": 1, "asynchronously": 2, "at": 26, "atend1": 2, "atend2": 2, "atend3": 2, "attach": 1, "attacks": 2, "attempt": 5, "attempted": 1, "attribute": 3, "attribute-value": 1, "auth": 1, "authentication": 4, "authoritative": 2, "authority": 7, "authorization": 3, "automatic": 1, "automatically": 14, "available": 14, "avoid": 2, "avoids": 1, "away": 3, "back": 1, "background": 5, "backwards": 1, "backwards-incompatible": 1, "bar": 3, "base": 2, "basecontext": 3, "basic": 3, "basicauth": 4, "basis": 1, "be": 144, "because": 1, "become": 2, "becomes": 3, "been": 24, "before": 30, "begin": 2, "beginning": 2, "begins": 3, "behave": 1, "behavior": 11, "being": 6, "below": 3, "benefit": 2, "between": 6, "beyond": 1, "blank": 2, "block": 5, "blocking": 1, "bodies": 2, "body": 157, "bool": 42, "both": 18, "boundary": 2, "browser": 3, "browsers": 2, "bucket": 4, "buffer": 3, "buffered": 8, "bufio": 1, "bufrw": 6, "but": 29, "by": 128, "bypass": 1, "byte": 4, "bytes": 13, "ca": 4, "cache": 1, "cache-control": 1, "cached": 2, "caches": 2, "call": 29, "callback": 1, "called": 25, "caller": 19, "callers": 9, "calling": 10, "calls": 31, "can": 40, "cancel": 9, "cancelable": 1, "canceled": 5, "cancellation": 2, "cancelrequest": 8, "cancels": 2, "cannot": 5, "canonical": 6, "canonicalheaderkey": 10, "canonicalization": 1, "canonicalize": 2, "canonicalized": 5, "canonicalmimeheaderkey": 3, "capped": 1, "care": 1, "carried": 1, "case": 22, "case-insensitive": 1, "case-sensitively": 1, "cases": 2, "cause": 6, "caused": 2, "causes": 4, "cautious": 1, "cc": 16, "cert": 3, "certain": 1, "certfile": 14, "certificate": 20, "certificates": 2, "chan": 2, "change": 3, "changed": 5, "changes": 4, "changing": 2, "channel": 4, "character": 1, "characters": 4, "charset=utf-8": 2, "charset=utf-8”": 1, "check": 9, "checking": 1, "checkredirect": 14, "checks": 3, "choose": 1, "chunked": 6, "cipher": 1, "class": 1, "cleaner": 1, "cleaning": 1, "clear": 1, "cleared": 1, "cli": 2, "client": 110, "clientconn": 6, "clients": 10, "clienttrace": 1, "clone": 16, "cloned": 1, "close": 48, "closed": 23, "closeidleconnections": 10, "closely": 2, "closenotifier": 5, "closenotifierdeprecated": 1, "closenotify": 5, "closer": 4, "closes": 9, "closing": 10, "closure": 1, "code": 30, "codes": 7, "collection": 1, "colon": 1, "com": 9, "com/": 2, "com/robots": 2, "come": 2, "comma": 1, "comma-delimited": 1, "common": 4, "compare": 5, "comparing": 1, "compatibility": 5, "compiler": 1, "complete": 6, "completes": 4, "completion": 2, "component": 2, "compressed": 2, "compression": 3, "concatenated": 1, "concatenation": 4, "concurrency": 8, "concurrent": 6, "concurrently": 11, "config": 7, "configuration": 8, "configured": 7, "configures": 3, "conflict": 5, "conflicted": 1, "conflicts": 4, "conforming": 1, "conn": 18, "conncontext": 2, "connect": 7, "connected": 3, "connection": 87, "connections": 53, "connectionstate": 2, "connectivity": 1, "connectreq": 1, "connectres": 1, "connstate": 17, "consecutive": 1, "conservatively": 1, "consider": 1, "considered": 4, "considers": 2, "const": 8, "constant": 1, "constants": 4, "construct": 1, "constructed": 2, "constructs": 1, "consulted": 1, "consulting": 1, "consults": 2, "consume": 1, "consumed": 1, "consumes": 1, "consuming": 1, "contain": 9, "containing": 6, "contains": 32, "containsdotfile": 3, "content": 11, "content-encoding": 2, "content-length": 8, "content-type": 15, "contentlength": 12, "contents": 4, "contenttype": 4, "context": 94, "continue": 3, "continues": 1, "contrast": 1, "control": 4, "controls": 10, "convention": 1, "convert": 2, "converted": 1, "converting": 1, "converts": 3, "cookie": 41, "cookiejar": 8, "cookies": 33, "cookiesnamed": 4, "copy": 9, "correct": 2, "corresponding": 1, "corresponds": 1, "could": 2, "count": 5, "counterror": 2, "counthandler": 2, "create": 7, "created": 4, "creates": 3, "creating": 9, "cross-authority": 1, "cross-origin": 7, "cross-site": 3, "crossoriginprotection": 10, "crypto/tls": 1, "csrf": 1, "ctx": 20, "current": 1, "currently": 6, "custom": 6, "dangerous": 1, "data": 33, "date": 2, "days": 1, "deadline": 16, "deadlines": 2, "dechunked": 1, "decide": 2, "decisions": 2, "declare": 1, "declared": 3, "declares": 1, "decoded": 1, "decoding": 1, "decompressed": 1, "decreases": 1, "decrement": 1, "deduce": 1, "deep": 3, "default": 32, "defaultclient": 15, "defaultmaxheaderbytes": 3, "defaultmaxidleconnsperhost": 3, "defaults": 3, "defaultservemux": 8, "defaulttransport": 6, "defaulttransportdialcontext": 1, "defer": 2, "define": 1, "defined": 8, "defines": 4, "deflate": 2, "del": 4, "delete": 2, "deleted": 1, "deletes": 2, "delimited": 1, "delimiters": 1, "demand": 2, "denotes": 3, "depending": 7, "deprecated": 20, "derived": 1, "described": 1, "describes": 1, "desired": 1, "details": 16, "detect": 1, "detectcontenttype": 8, "detected": 2, "detecting": 1, "determine": 4, "determined": 2, "dev/http": 1, "dev/issue/21955": 1, "dev/net/http#example-responsewriter-trailers": 1, "dev/net/http#responsewriter": 1, "diagnose": 2, "dial": 14, "dialcontext": 11, "dialed": 2, "dialer": 2, "dialing": 1, "dials": 5, "dialtls": 4, "dialtlscontext": 6, "differ": 1, "difference": 1, "different": 2, "digits": 1, "dir": 20, "directed": 2, "directly": 6, "directories": 5, "directory": 16, "dirfs": 1, "disable": 3, "disablecompression": 3, "disabled": 1, "disablegeneraloptionshandler": 2, "disablekeepalives": 4, "disables": 4, "disallows": 1, "disconnected": 1, "disk": 3, "dispatches": 2, "dns": 1, "do": 35, "docs": 1, "documentation": 10, "does": 34, "doesn": 9, "doing": 1, "domain": 5, "don": 1, "done": 9, "dot": 3, "dotfilehiding": 2, "dotfilehidingfile": 4, "dotfilehidingfilesystem": 5, "down": 4, "dropped": 1, "dt": 2, "due": 2, "duplicated": 1, "duration": 16, "during": 5, "dynamically": 1, "each": 15, "earlier": 2, "earliest": 1, "effect": 4, "effects": 1, "either": 25, "element": 4, "elements": 2, "else": 2, "embedded": 2, "empty": 22, "en-us": 2, "enable": 4, "enabled": 10, "enablefullduplex": 6, "encoded": 1, "encoding": 5, "encodings": 3, "encountering": 1, "encrypted": 1, "end": 8, "ended": 1, "ending": 3, "endpoint": 1, "ends": 2, "english": 1, "enough": 1, "ensure": 1, "entered": 1, "entire": 6, "entity": 1, "entries": 1, "entry": 5, "environment": 6, "environments": 1, "eof": 7, "epoch": 1, "equivalent": 2, "equivalently": 1, "err": 64, "erraborthandler": 4, "errbodynotallowed": 2, "errbodyreadafterclose": 2, "errcontentlength": 2, "errhandlertimeout": 3, "errheadertoolong": 2, "errhijacked": 3, "errlinetoolong": 3, "errmissingboundary": 2, "errmissingcontentlength": 2, "errmissingfile": 2, "errnocookie": 3, "errnolocation": 3, "errnotmultipart": 2, "errnotsupported": 5, "error": 241, "errorlog": 2, "errors": 31, "errorstring": 1, "errpermission": 1, "errschememismatch": 2, "errserverclosed": 9, "errshortbody": 2, "errskipaltprotocol": 3, "errtype": 2, "errunexpectedtrailer": 2, "errunsupported": 1, "erruselastresponse": 3, "errwriteafterflush": 2, "escape": 2, "escaped": 2, "escapes": 1, "especially": 1, "establishes": 1, "etag": 2, "etc": 1, "even": 7, "ever": 1, "every": 6, "everything": 1, "exact": 2, "exactly": 4, "example": 39, "examples": 2, "exceeded": 6, "except": 4, "exception": 2, "exclude": 6, "excluded": 1, "execute": 1, "executes": 1, "execution": 1, "existing": 10, "exit": 1, "expect": 2, "expect-continue": 1, "expectation": 1, "expectcontinuetimeout": 3, "expected": 3, "expecting": 1, "expects": 1, "expires": 2, "explains": 2, "explicit": 2, "explicitly": 5, "exported": 1, "expose": 2, "extend": 2, "extended": 1, "extension": 1, "failed": 1, "fails": 7, "failure": 2, "falls": 1, "false": 2, "fatal": 13, "fatalf": 2, "feature": 2, "fetched": 1, "few": 2, "field": 32, "fields": 25, "file": 56, "fileheader": 2, "fileinfo": 3, "filenames": 1, "filepath": 5, "files": 20, "files/directories": 1, "fileserver": 17, "fileserverfs": 6, "filesystem": 26, "filled": 2, "filtered": 8, "filters": 2, "final": 5, "find": 1, "finished": 3, "finishes": 1, "fire": 1, "fires": 2, "first": 19, "fis": 4, "fixed": 1, "fixedurl": 3, "flight": 1, "flow": 2, "flush": 15, "flushed": 1, "flusher": 9, "flusherror": 1, "flushes": 1, "fmt": 10, "follow": 1, "followed": 5, "following": 14, "follows": 5, "foo": 6, "for": 240, "forbidden": 2, "forceattempthttp2": 4, "forgery": 2, "forget": 1, "form": 27, "format": 30, "formats": 1, "formatted": 2, "formed": 1, "former": 2, "formfile": 6, "formvalue": 6, "forward": 3, "forwarded": 1, "forwarding": 3, "found": 10, "found”": 2, "fprintf": 3, "fprintln": 1, "frame": 4, "from": 67, "fs": 35, "fsys": 22, "ftp": 1, "full": 1, "fully": 3, "func": 494, "function": 29, "functionality": 1, "functions": 7, "further": 2, "future": 7, "gave": 1, "general": 2, "generally": 2, "generate": 2, "generate_cert": 1, "generating": 1, "get": 50, "getbody": 7, "getcertificate": 2, "getconfigforclient": 1, "getproxyconnectheader": 4, "gets": 3, "git": 1, "given": 35, "gmt": 2, "go": 16, "go-package": 1, "go1": 84, "goal": 1, "godebug": 2, "golang": 3, "gone": 2, "google": 2, "goroutine": 8, "goroutines": 8, "got1xxresponse": 1, "graceful": 2, "gracefully": 2, "guarantee": 2, "guaranteed": 1, "guards": 1, "gzip": 5, "gzipped": 1, "h1": 2, "h2": 7, "h2c": 1, "had": 2, "handle": 32, "handled": 8, "handlefunc": 23, "handler": 171, "handlerfunc": 10, "handlers": 21, "handles": 7, "handling": 7, "handshake": 2, "happens": 1, "hard-codes": 1, "has": 51, "hasn": 1, "hasprefix": 2, "have": 13, "having": 2, "head": 26, "header": 153, "headers": 52, "health": 2, "hello": 5, "hellohandler": 2, "here": 1, "hi": 1, "hidden": 1, "hides": 1, "high-level": 1, "higher-level": 3, "hijack": 10, "hijacked": 8, "hijacker": 12, "hijacking": 1, "historically": 2, "hj": 2, "home": 1, "honor": 1, "hook": 3, "hooks": 2, "host": 50, "hostname": 1, "hosts": 3, "how": 11, "however": 4, "html": 14, "htpasswd": 1, "http": 227, "http-server": 1, "http/1": 30, "http/2": 53, "http1": 9, "http1or2": 2, "http2": 9, "http2config": 5, "http_proxy": 2, "httpmuxgo121=1": 1, "httponly": 1, "https": 25, "https_proxy": 2, "httpservecontentkeepheaders=1": 1, "httptrace": 1, "hyphen": 2, "iana": 3, "idempotency": 1, "idempotency-key": 1, "idempotent": 5, "identically": 1, "identifier": 1, "identity": 3, "idle": 11, "idleconnsclosed": 2, "idleconntimeout": 3, "idletimeout": 2, "ietf": 3, "if": 254, "if-match": 2, "if-modified-since": 2, "if-none-match": 2, "if-range": 2, "if-unmodified-since": 1, "ignored": 14, "ignores": 7, "immediately": 7, "implement": 5, "implementation": 11, "implementations": 7, "implemented": 5, "implementing": 1, "implements": 10, "implicit": 1, "import": 17, "important": 1, "impose": 1, "impossible": 1, "improperly": 1, "in": 244, "in-flight": 2, "inbound": 2, "include": 7, "included": 2, "includes": 8, "including": 13, "inclusive": 1, "incoming": 17, "increases": 1, "increment": 2, "indefinitely": 1, "index": 5, "indicate": 4, "indicated": 1, "indicates": 8, "individual": 1, "inflight": 6, "information": 3, "informational": 1, "inherit": 1, "initial": 6, "initialize": 1, "initialized": 3, "initially": 2, "initiates": 3, "inner-most": 1, "innermost": 1, "input": 3, "insensitive": 5, "insert": 2, "inspect": 2, "instance": 1, "instead": 22, "int": 47, "int64": 11, "intended": 3, "intentionally": 1, "interface": 29, "interfaces": 1, "interleave": 1, "intermediaries": 1, "intermediates": 4, "internal": 2, "internally-generated": 2, "international": 2, "interpret": 1, "interpreted": 1, "interrupt": 5, "interrupted": 2, "interrupting": 1, "into": 4, "invalid": 18, "invoke": 2, "invoked": 1, "invoking": 5, "io": 61, "io/fs": 1, "iota": 2, "ip": 2, "is": 470, "isn": 2, "isolated": 1, "issues": 10, "issuing": 1, "it": 127, "its": 35, "itself": 5, "jan": 1, "jar": 11, "join": 4, "just": 1, "kb": 1, "keep": 1, "keep-alive": 8, "keep-alives": 8, "keepalive": 1, "key": 51, "key-value": 1, "key/value": 2, "keyfile": 10, "keys": 21, "know": 1, "known": 3, "large": 1, "largest": 1, "last": 1, "last-modified": 2, "later": 6, "latter": 2, "lead": 1, "leading": 1, "leakage": 1, "least": 5, "leave": 1, "leaves": 1, "len": 1, "length": 4, "less": 4, "let": 2, "lets": 3, "letter": 2, "letters": 1, "library": 2, "library/net/http": 2, "lifetime": 3, "like": 13, "limit": 21, "limited": 1, "limiting": 1, "limitreader": 2, "limits": 2, "line": 9, "lines": 1, "list": 2, "listen": 2, "listenandserve": 24, "listenandservetls": 17, "listener": 23, "listeners": 3, "listens": 3, "lists": 1, "literal": 3, "local": 1, "local-addr": 1, "localaddrcontextkey": 2, "localhost": 1, "location": 9, "lock": 1, "log": 34, "logger": 3, "logging": 3, "logs": 1, "long": 2, "long-lived": 1, "longer": 10, "looks": 1, "low-level": 2, "lowercase": 5, "made": 6, "magic": 1, "main": 36, "mainly": 1, "major": 9, "make": 16, "makes": 1, "making": 5, "malformed": 1, "maliciously": 1, "manage": 1, "managed": 1, "manages": 1, "manually": 1, "many": 5, "map": 27, "maps": 2, "match": 20, "matched": 7, "matches": 28, "matching": 10, "max-age": 3, "maxage": 1, "maxage\u003c0": 1, "maxage=0": 1, "maxage\u003e0": 1, "maxbyteserror": 5, "maxbyteshandler": 4, "maxbytesreader": 10, "maxconcurrentstreams": 3, "maxconnsperhost": 3, "maxdecoderheadertablesize": 2, "maxencoderheadertablesize": 2, "maxheaderbytes": 3, "maxidleconns": 4, "maxidleconnsperhost": 4, "maximize": 1, "maximum": 13, "maxmemory": 3, "maxreadframesize": 2, "maxreceivebufferperconnection": 2, "maxreceivebufferperstream": 2, "maxresponseheaderbytes": 2, "may": 54, "mb": 1, "means": 21, "mechanism": 5, "memory": 1, "message": 6, "method": 63, "methodconnect": 1, "methoddelete": 1, "methodget": 1, "methodhead": 1, "methodoptions": 1, "methodpatch": 1, "methodpost": 1, "methodput": 1, "methods": 18, "methodtrace": 1, "metric": 1, "might": 2, "mime": 3, "minor": 10, "mismatch": 1, "missing": 1, "misspelled": 1, "mistake": 1, "mitigate": 1, "mode": 1, "modifications": 1, "modified": 2, "modifies": 1, "modify": 8, "modtime": 5, "mon": 1, "monitoring": 1, "more": 15, "most": 15, "mostly": 1, "moved": 4, "msg": 3, "mu": 3, "multipart": 5, "multipart/form-data": 5, "multipart/mixed": 1, "multipartform": 3, "multipartreader": 6, "multiple": 10, "multiplexer": 1, "must": 39, "mutate": 3, "mutated": 2, "mutex": 1, "mux": 21, "n++": 1, "name": 59, "named": 11, "names": 5, "native": 2, "necessarily": 1, "necessary": 5, "need": 2, "needed": 10, "needs": 2, "negative": 6, "negotiated": 1, "negotiation": 1, "neither": 4, "net": 27, "net/http": 25, "net/http/cookiejar": 1, "net/http/httptest": 1, "network": 13, "never": 1, "new": 45, "newclientconn": 5, "newcrossoriginprotection": 5, "newfiletransport": 7, "newfiletransportfs": 6, "newpeoplehandler": 2, "newrequest": 12, "newrequestwithcontext": 16, "newresponsecontroller": 4, "newservemux": 8, "next": 3, "nextprotos": 2, "nil": 73, "no": 54, "no-op": 1, "no_proxy": 4, "nobody": 4, "non-2xx": 3, "non-ascii": 1, "non-browser": 1, "non-canonical": 4, "non-deterministic": 1, "non-empty": 1, "non-nil": 36, "non-proxied": 2, "non-safe": 2, "non-wildcard": 1, "non-zero": 4, "none": 1, "nor": 4, "normal": 2, "normally": 1, "not": 147, "note": 6, "noted": 1, "notes": 2, "notfound": 6, "notfoundhandler": 6, "nothing": 1, "notification": 1, "notify": 3, "now": 6, "number": 11, "oauth2": 1, "objectname": 3, "obtain": 2, "obtained": 2, "obtaining": 4, "occurred": 1, "occurs": 2, "of": 192, "often": 1, "ok": 16, "old": 2, "oldest": 1, "omitted": 1, "on": 86, "once": 7, "one": 25, "one-segment": 1, "only": 43, "onproxyconnectresponse": 2, "open": 15, "opened": 1, "opening": 1, "operating": 2, "operations": 1, "optional": 13, "optionally": 15, "options": 7, "opts": 2, "or": 171, "order": 2, "ordinary": 2, "org/": 1, "org/assignments/http-status-codes/http-status-codes": 1, "org/html/draft-ietf-httpbis-cookie-same-site-00": 1, "org/html/rfc6265": 1, "org/html/rfc7540#section-8": 1, "org/issue/25192": 1, "org/x/net/http2": 1, "org/x/net/idna": 1, "origin": 7, "original": 7, "originally": 1, "origins": 1, "os": 5, "os/signal": 1, "other": 22, "otherwise": 8, "out": 9, "outbound": 2, "outer-most": 1, "outermost": 1, "outgoing": 5, "output": 2, "outside": 2, "outstanding": 1, "over": 8, "overall": 1, "overridden": 2, "overrides": 1, "own": 1, "ownership": 1, "p1": 3, "p2": 2, "p2’s": 1, "package": 32, "packages": 1, "page": 2, "pair": 1, "pairs": 4, "panic": 8, "panicking": 1, "panics": 4, "param": 1, "parameter": 4, "parameters": 8, "parent": 3, "parsecookie": 4, "parsed": 5, "parseform": 16, "parsehttpversion": 5, "parsemultipartform": 13, "parser": 1, "parses": 11, "parsesetcookie": 4, "parsetime": 6, "parsing": 3, "part": 3, "particular": 6, "partitioned": 1, "parts": 6, "pass": 2, "passed": 3, "passes": 1, "passing": 2, "password": 9, "past": 1, "patch": 6, "path": 68, "paths": 7, "pathvalue": 7, "pattern": 66, "patterns": 17, "pe": 4, "peer": 2, "pem": 6, "people": 1, "per": 5, "per-host": 1, "per-request": 3, "percent": 2, "percent-encoded": 1, "perform": 2, "performed": 1, "period": 6, "permanent": 4, "permanently": 4, "permission": 1, "permit": 1, "permitprohibitedciphersuites": 2, "permits": 5, "permitted": 3, "persistent": 1, "ping": 2, "pingtimeout": 2, "pipelined": 1, "pipelining": 2, "plain": 1, "pointer": 1, "pointing": 1, "policy": 5, "populate": 1, "populated": 5, "populates": 1, "port": 11, "portion": 1, "possible": 4, "possibly": 2, "post": 28, "postform": 18, "postformvalue": 6, "practice": 1, "pre-escaping": 1, "pre-go": 1, "precaution": 2, "preceded": 1, "precedence": 7, "predates": 2, "predeclare": 1, "prefer": 1, "preferred": 2, "prefix": 9, "present": 14, "preserve": 1, "preserved": 1, "preserves": 1, "prevent": 2, "preventing": 1, "prevents": 3, "previous": 3, "previously": 4, "primitive": 1, "printf": 4, "prior": 1, "priority": 2, "private": 4, "problem": 2, "process": 2, "processed": 1, "processing": 1, "program": 2, "programs": 2, "prohibited": 1, "promised": 2, "promoted": 1, "properly": 2, "properties": 2, "protcol": 1, "protection": 1, "protections": 1, "protects": 3, "proto": 2, "protoatleast": 8, "protocol": 26, "protocol-specific": 1, "protocolerror": 5, "protocolerrordeprecated": 1, "protocols": 49, "protomajor": 3, "protominor": 3, "provide": 2, "provided": 44, "provides": 4, "proxies": 5, "proxy": 21, "proxy-authorization": 1, "proxyconnectheader": 3, "proxyfromenvironment": 6, "proxyurl": 8, "pseudo": 1, "pseudo-header": 1, "punycode": 1, "push": 14, "push_promise": 2, "pusher": 8, "pushes": 4, "pushoptions": 5, "put": 7, "puts": 1, "query": 8, "queryescape": 1, "quoted": 2, "race": 1, "range": 7, "rate": 1, "rather": 1, "raw": 4, "rawexpires": 1, "rawpath": 1, "rawquery": 1, "re": 2, "re-use": 3, "reach": 1, "reached": 1, "read": 45, "readall": 1, "readbuffersize": 2, "readcloser": 11, "readdir": 6, "reader": 20, "readheadertimeout": 3, "reading": 30, "readrequest": 9, "readresponse": 5, "reads": 7, "readseeker": 4, "readstring": 1, "readtimeout": 9, "readwriter": 4, "ready": 1, "rebinding": 1, "receipt": 1, "received": 11, "receives": 4, "receiving": 2, "recent": 2, "record": 2, "records": 3, "recovers": 1, "recursive": 1, "redirect": 39, "redirecthandler": 4, "redirecting": 1, "redirection": 2, "redirects": 29, "reference": 1, "referer": 6, "referrer": 2, "referring": 1, "regarded": 1, "regardless": 3, "register": 3, "registered": 15, "registering": 1, "registeronshutdown": 5, "registerprotocol": 8, "registers": 6, "registration": 1, "reject": 2, "rejected": 4, "rejecting": 1, "related": 1, "relative": 6, "release": 7, "releases": 1, "relevant": 1, "remain": 1, "remainder": 3, "remains": 2, "remoteaddr": 4, "remove": 2, "removed": 2, "removes": 3, "removing": 1, "repeated": 1, "replaces": 2, "replay": 1, "replied": 1, "replies": 8, "reply": 10, "replying": 2, "report": 3, "reports": 11, "representing": 1, "represents": 13, "req": 31, "request": 331, "request-line": 2, "request-target": 1, "request-uri": 1, "requested": 3, "requesting": 1, "requests": 105, "requesturi": 3, "required": 1, "requirements": 1, "requires": 3, "res": 9, "reservation": 1, "reserve": 8, "reserved": 5, "reserves": 1, "reset": 2, "resolved": 1, "resource-constrained": 1, "resources": 1, "resp": 33, "respected": 2, "responds": 5, "response": 111, "responsecontroller": 10, "responseheader": 1, "responseheadertimeout": 2, "responses": 10, "responsewriter": 82, "responsewriters": 5, "responsibility": 4, "responsible": 2, "rest": 2, "restore": 1, "restores": 1, "restricted": 1, "restrictions": 1, "result": 4, "results": 1, "retries": 1, "return": 33, "returned": 69, "returning": 5, "returns": 107, "reuse": 4, "reused": 3, "rfc": 75, "rfc1123": 1, "rfc850": 1, "risk": 1, "root": 7, "rooted": 2, "roundtrip": 36, "roundtripper": 29, "routing": 1, "rst_stream": 1, "rt": 5, "rule": 2, "rules": 3, "run": 18, "running": 2, "runs": 5, "runtime": 2, "rw": 2, "safe": 6, "said": 1, "same": 16, "same-origin": 1, "samesite": 8, "samesitedefaultmode": 1, "samesitelaxmode": 1, "samesitenonemode": 1, "samesitestrictmode": 1, "sample": 2, "sanitize": 1, "sanitized": 2, "sanitizes": 1, "sanitizing": 5, "save": 1, "say": 1, "scheme": 18, "schemes": 1, "sec-fetch-site": 2, "second": 9, "seconds": 2, "section": 10, "secure": 1, "secured": 1, "security": 1, "see": 35, "seek": 2, "seeker": 5, "seen": 1, "sees": 3, "segment": 8, "segments": 5, "selecting": 2, "semantically": 1, "semantics": 2, "semicolon": 1, "semicolons": 2, "send": 15, "sending": 9, "sendpingtimeout": 2, "sends": 4, "sensitive": 5, "sent": 36, "sentinel": 2, "separate": 5, "separated": 3, "separately": 2, "separator": 1, "separators": 1, "sequence": 2, "serialization": 1, "serializes": 1, "serve": 24, "servecontent": 16, "served": 2, "servefile": 9, "servefilefs": 9, "servehttp": 24, "servemux": 25, "server": 122, "servercontextkey": 3, "servers": 7, "serves": 5, "servetls": 16, "service": 10, "serving": 4, "set": 63, "set-cookie": 5, "setbasicauth": 4, "setcookie": 5, "setcookies": 2, "setdenyhandler": 6, "sethttp1": 6, "sethttp2": 5, "setkeepalivesenabled": 4, "setpathvalue": 4, "setreaddeadline": 5, "sets": 13, "setsessionticketkeys": 2, "setstatehook": 6, "setting": 9, "settings": 1, "setunencryptedhttp2": 4, "setup": 1, "setwritedeadline": 5, "shallow": 2, "share": 17, "shared": 1, "short": 1, "should": 63, "shut": 2, "shutdown": 28, "shuts": 1, "shutting": 1, "side": 1, "sigint": 2, "sign": 1, "signal": 4, "signals": 2, "signature": 1, "signed": 4, "significantly": 1, "silently": 1, "similar": 1, "similarly": 2, "simple": 2, "simpler": 2, "simply": 1, "simulate": 1, "since": 4, "single": 7, "sitting": 2, "size": 13, "skip": 1, "slash": 10, "slashes": 4, "slice": 3, "slightly": 1, "slot": 3, "slots": 1, "slow": 1, "small": 1, "so": 13, "socks5": 2, "socks5h": 2, "software": 3, "some": 3, "soon": 2, "sought": 1, "source": 23, "space": 2, "speak": 1, "speaking": 1, "spec": 3, "special": 9, "specialized": 1, "specific": 7, "specified": 19, "specifies": 38, "spelling": 1, "split": 1, "splitting": 1, "srv": 9, "stack": 2, "standard": 5, "start": 4, "started": 1, "starting": 3, "starts": 1, "startup": 1, "stat": 1, "state": 16, "stateactive": 7, "stateclosed": 7, "statehijacked": 3, "stateidle": 5, "statenew": 3, "states": 1, "static": 1, "status": 17, "statusaccepted": 1, "statusalreadyreported": 1, "statusbadgateway": 1, "statusbadrequest": 1, "statuscode": 5, "statusconflict": 1, "statuscontinue": 1, "statuscreated": 1, "statusearlyhints": 1, "statusexpectationfailed": 1, "statusfaileddependency": 1, "statusforbidden": 1, "statusfound": 3, "statusgatewaytimeout": 1, "statusgone": 1, "statushttpversionnotsupported": 1, "statusimused": 1, "statusinsufficientstorage": 1, "statusinternalservererror": 3, "statuslengthrequired": 1, "statuslocked": 1, "statusloopdetected": 1, "statusmethodnotallowed": 1, "statusmisdirectedrequest": 1, "statusmovedpermanently": 3, "statusmultiplechoices": 1, "statusmultistatus": 1, "statusnetworkauthenticationrequired": 1, "statusnocontent": 1, "statusnonauthoritativeinfo": 1, "statusnotacceptable": 1, "statusnotextended": 1, "statusnotfound": 1, "statusnotimplemented": 1, "statusnotmodified": 1, "statusok": 4, "statuspartialcontent": 1, "statuspaymentrequired": 1, "statuspermanentredirect": 1, "statuspreconditionfailed": 1, "statuspreconditionrequired": 1, "statusprocessing": 1, "statusproxyauthrequired": 1, "statusrequestedrangenotsatisfiable": 1, "statusrequestentitytoolarge": 1, "statusrequestheaderfieldstoolarge": 1, "statusrequesttimeout": 1, "statusrequesturitoolong": 1, "statusresetcontent": 1, "statusseeother": 3, "statusserviceunavailable": 1, "statusswitchingprotocols": 1, "statusteapot": 1, "statustemporaryredirect": 1, "statustext": 5, "statustooearly": 1, "statustoomanyrequests": 1, "statusunauthorized": 1, "statusunavailableforlegalreasons": 1, "statusunprocessableentity": 1, "statusunsupportedmediatype": 1, "statusupgraderequired": 1, "statususeproxy": 1, "statusvariantalsonegotiates": 1, "still": 2, "stop": 1, "storage": 1, "stored": 4, "stream": 2, "streamed": 2, "streams": 1, "strict": 1, "strictmaxconcurrentrequests": 2, "string": 212, "strings": 5, "stripped": 1, "stripping": 1, "stripprefix": 12, "strips": 1, "struct": 23, "sub": 1, "subcomponent": 1, "subdomain": 1, "subsequent": 7, "subset": 1, "subtree": 3, "succeed": 1, "successful": 4, "successfully": 1, "such": 30, "suitable": 2, "suites": 1, "supplied": 1, "support": 19, "supported": 9, "supported”": 1, "supports": 7, "suppress": 1, "suppresses": 1, "sure": 1, "switches": 1, "switching": 2, "symlinks": 2, "sync": 2, "synchronization": 1, "synchronously": 1, "syntactically": 2, "syntax": 3, "synthetic": 1, "system": 9, "tab": 1, "table": 2, "take": 5, "takes": 6, "target": 6, "targets": 1, "tcp": 17, "tells": 1, "temporary": 5, "terminal": 3, "terminates": 1, "test": 2, "testing": 1, "text": 7, "text/html": 1, "text/plain": 1, "textproto": 3, "than": 15, "that": 128, "the": 1253, "their": 6, "them": 10, "themselves": 1, "then": 30, "there": 15, "therefore": 1, "thereof": 2, "these": 9, "they": 11, "third": 1, "this": 84, "those": 10, "three": 3, "through": 1, "thus": 2, "time": 73, "timed": 4, "timeformat": 3, "timeout": 22, "timeouthandler": 5, "timer": 1, "times": 3, "timing": 1, "tls": 29, "tls-enabled": 1, "tlsclientconfig": 5, "tlsconfig": 6, "tlshandshaketimeout": 4, "tlsnextproto": 11, "to": 413, "too": 4, "total": 3, "trace": 5, "trailer": 30, "trailerprefix": 3, "trailers": 18, "trailing": 6, "trailing-slash": 2, "transaction": 2, "transfer": 3, "transfer-encoding": 2, "transferencoding": 8, "transition": 5, "transitions": 2, "transparently": 1, "transport": 74, "transports": 3, "treated": 7, "tree": 2, "tries": 1, "trigger": 3, "true": 20, "trusted": 1, "trying": 1, "two": 8, "txt": 2, "type": 140, "types": 4, "typical": 2, "typically": 6, "u+002f": 1, "unavailable": 2, "unblock": 1, "unchanged": 1, "unclosed": 2, "uncompressed": 4, "undefined": 1, "under": 3, "undergone": 1, "underlying": 10, "underscores": 1, "unencrypted": 9, "unencryptedhttp2": 7, "unescaped": 5, "unexpected": 1, "unexported": 8, "unicode": 1, "unix": 1, "unknown": 4, "unless": 6, "unlike": 1, "unlock": 1, "unmodified": 1, "unparsed": 2, "unpredictable": 1, "unprocessed": 1, "unread": 1, "unrelated": 1, "unsafely": 2, "unsecured": 2, "unspecified": 1, "until": 7, "untrusted": 1, "unused": 5, "unwrap": 1, "up": 7, "upcoming": 1, "update": 1, "updated": 3, "updates": 1, "upgrade": 2, "upgrades": 1, "upload": 1, "uploads": 1, "upon": 1, "upper": 3, "uppercase": 1, "uri": 3, "url": 126, "url-encoded": 2, "urls": 4, "usable": 3, "usage": 1, "use": 97, "used": 73, "user": 4, "user-agent": 1, "useragent": 4, "userinfo": 1, "username": 10, "users": 3, "uses": 17, "using": 18, "usually": 7, "utc": 1, "valid": 25, "validate": 1, "value": 84, "values": 42, "var": 19, "variable": 7, "variables": 5, "vers": 3, "version": 5, "versions": 2, "very": 1, "via": 4, "view": 23, "violation": 1, "wait": 9, "waiting": 5, "waits": 2, "wanting": 1, "was": 19, "wasting": 1, "way": 5, "ways": 1, "we": 5, "web": 1, "webserver": 2, "websockets": 3, "welcome": 1, "well": 2, "were": 10, "what": 1, "whatwg": 1, "when": 69, "whenever": 2, "where": 7, "whereas": 1, "whether": 18, "which": 37, "while": 11, "who": 2, "whole": 1, "whose": 6, "wild": 1, "wildcard": 14, "wildcards": 3, "will": 89, "willing": 1, "window": 2, "wire": 4, "wish": 1, "with": 144, "withcontext": 6, "without": 20, "work": 2, "works": 1, "world": 2, "would": 3, "wrap": 1, "wrapped": 2, "wrapper": 6, "wrappers": 2, "wraps": 1, "write": 40, "writebuffersize": 2, "writebytetimeout": 2, "writeheader": 13, "writeproxy": 6, "writer": 11, "writes": 14, "writestring": 7, "writesubset": 4, "writetimeout": 3, "writing": 12, "written": 10, "wrote": 1, "www-authenticate": 1, "x-content-type-options": 1, "x-idempotency-key": 1, "xhtml": 1, "yet": 1, "yields": 1, "you": 3, "zero": 35, "zero-byte": 1, "zero-length": 2, "zone": 1, "¶": 214, "¶consider": 1, "¶if": 1, "¶patterns": 1, "¶servemux": 1, "¶the": 1, "“404": 1, "“method": 1, "“nosniff”": 1, "“page": 1, "“text/plain": 1 }, "length": 21611 }, { "id": "b3008097b09a8fb5aa528119", "doc_id": "f21ffb226ab0619b0f70d174", "title": "http.ErrNotSupported (var)", "url": "https://pkg.go.dev/http", "type": "go-variable", "source": "http", "path": "devour_data/docs/http_errnotsupported_(var)_53.json", "content": "# Variables Errors used by the HTTP server. ```go var ErrNotSupported is not available. = \u0026ProtocolError{\"feature not supported\"} ```", "term_freq": { "\u0026protocolerror": 1, "//pkg": 1, "available": 1, "by": 1, "dev/http": 1, "errnotsupported": 2, "errors": 1, "feature": 1, "go": 2, "go-variable": 1, "http": 2, "https": 1, "is": 1, "not": 2, "server": 1, "supported": 1, "the": 1, "used": 1, "var": 2, "variables": 1 }, "length": 25 }, { "id": "cae87c80c3e83090c3cbe1ad", "doc_id": "65ee1b48edad2954c6080431", "title": "http.func CanonicalHeaderKey ¶", "url": "https://pkg.go.dev/http#func CanonicalHeaderKey ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_canonicalheaderkey_¶_1.json", "content": "# http.func CanonicalHeaderKey ¶ ``` func CanonicalHeaderKey(s string) string ``` CanonicalHeaderKey returns the canonical format of the header key s. The canonicalization converts the first letter and any letter following a hyphen to upper case; the rest are converted to lowercase. For example, the canonical key for \"accept-encoding\" is \"Accept-Encoding\". If s contains a space or invalid header field bytes, it is returned without modifications.", "term_freq": { "//pkg": 1, "accept-encoding": 2, "and": 1, "any": 1, "are": 1, "bytes": 1, "canonical": 2, "canonicalheaderkey": 5, "canonicalization": 1, "case": 1, "contains": 1, "converted": 1, "converts": 1, "dev/http#func": 1, "example": 1, "field": 1, "first": 1, "following": 1, "for": 2, "format": 1, "func": 3, "go": 1, "go-function": 1, "header": 2, "http": 2, "https": 1, "hyphen": 1, "if": 1, "invalid": 1, "is": 2, "it": 1, "key": 2, "letter": 2, "lowercase": 1, "modifications": 1, "of": 1, "or": 1, "rest": 1, "returned": 1, "returns": 1, "space": 1, "string": 2, "the": 6, "to": 2, "upper": 1, "without": 1, "¶": 3 }, "length": 70 }, { "id": "9583f4a0423226173b6a6ce6", "doc_id": "23426e9d0a96a5444a7f0951", "title": "http.func DetectContentType ¶", "url": "https://pkg.go.dev/http#func DetectContentType ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_detectcontenttype_¶_2.json", "content": "# http.func DetectContentType ¶ ``` func DetectContentType(data []byte) string ``` DetectContentType implements the algorithm described at https://mimesniff.spec.whatwg.org/ to determine the Content-Type of the given data. It considers at most the first 512 bytes of data. DetectContentType always returns a valid MIME type: if it cannot determine a more specific one, it returns \"application/octet-stream\".", "term_freq": { "//mimesniff": 1, "//pkg": 1, "512": 1, "algorithm": 1, "always": 1, "application/octet-stream": 1, "at": 2, "byte": 1, "bytes": 1, "cannot": 1, "considers": 1, "content-type": 1, "data": 3, "described": 1, "detectcontenttype": 6, "determine": 2, "dev/http#func": 1, "first": 1, "func": 3, "given": 1, "go": 1, "go-function": 1, "http": 2, "https": 2, "if": 1, "implements": 1, "it": 3, "mime": 1, "more": 1, "most": 1, "of": 2, "one": 1, "org/": 1, "returns": 2, "spec": 1, "specific": 1, "string": 1, "the": 4, "to": 1, "type": 1, "valid": 1, "whatwg": 1, "¶": 3 }, "length": 65 }, { "id": "143252e98ca732bef202e93c", "doc_id": "a6ee9f24ba2d3043479c6415", "title": "http.func Error ¶", "url": "https://pkg.go.dev/http#func Error ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_error_¶_3.json", "content": "# http.func Error ¶ ``` func Error(w ResponseWriter, error string, code int) ``` Error replies to the request with the specified error message and HTTP code. It does not otherwise end the request; the caller should ensure no further writes are done to w. The error message should be plain text.", "term_freq": { "//pkg": 1, "and": 1, "are": 1, "be": 1, "caller": 1, "code": 2, "dev/http#func": 1, "does": 1, "done": 1, "end": 1, "ensure": 1, "error": 8, "func": 3, "further": 1, "go": 1, "go-function": 1, "http": 3, "https": 1, "int": 1, "it": 1, "message": 2, "no": 1, "not": 1, "otherwise": 1, "plain": 1, "replies": 1, "request": 2, "responsewriter": 1, "should": 2, "specified": 1, "string": 1, "text": 1, "the": 5, "to": 2, "with": 1, "writes": 1, "¶": 3 }, "length": 59 }, { "id": "26009df27e37a42de47f07bf", "doc_id": "9542cc517b3a451a83da86a7", "title": "http.func Handle ¶", "url": "https://pkg.go.dev/http#func Handle ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_handle_¶_4.json", "content": "# http.func Handle ¶ ``` func Handle(pattern string, handler Handler) ``` Handle registers the handler for the given pattern in DefaultServeMux. The documentation for ServeMux explains how patterns are matched.", "term_freq": { "//pkg": 1, "are": 1, "defaultservemux": 1, "dev/http#func": 1, "documentation": 1, "explains": 1, "for": 2, "func": 3, "given": 1, "go": 1, "go-function": 1, "handle": 5, "handler": 3, "how": 1, "http": 2, "https": 1, "in": 1, "matched": 1, "pattern": 2, "patterns": 1, "registers": 1, "servemux": 1, "string": 1, "the": 3, "¶": 3 }, "length": 40 }, { "id": "a89ac16537ae1d7222c491d4", "doc_id": "49614b7cafdfa80e31f4cc82", "title": "http.func HandleFunc ¶", "url": "https://pkg.go.dev/http#func HandleFunc ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_handlefunc_¶_5.json", "content": "# http.func HandleFunc ¶ ``` func HandleFunc(pattern string, handler func(ResponseWriter, *Request)) ``` HandleFunc registers the handler function for the given pattern in DefaultServeMux. The documentation for ServeMux explains how patterns are matched.", "term_freq": { "*request": 1, "//pkg": 1, "are": 1, "defaultservemux": 1, "dev/http#func": 1, "documentation": 1, "explains": 1, "for": 2, "func": 4, "function": 1, "given": 1, "go": 1, "go-function": 1, "handlefunc": 5, "handler": 2, "how": 1, "http": 2, "https": 1, "in": 1, "matched": 1, "pattern": 2, "patterns": 1, "registers": 1, "responsewriter": 1, "servemux": 1, "string": 1, "the": 3, "¶": 3 }, "length": 43 }, { "id": "e870a69abbf21d83c93ea9d9", "doc_id": "162c982ca1748a3233acc5d7", "title": "http.func ListenAndServe ¶", "url": "https://pkg.go.dev/http#func ListenAndServe ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_listenandserve_¶_6.json", "content": "# http.func ListenAndServe ¶ ``` func ListenAndServe(addr string, handler Handler) error ``` ListenAndServe listens on the TCP network address addr and then calls Serve with handler to handle requests on incoming connections. Accepted connections are configured to enable TCP keep-alives.", "term_freq": { "//pkg": 1, "accepted": 1, "addr": 2, "address": 1, "and": 1, "are": 1, "calls": 1, "configured": 1, "connections": 2, "dev/http#func": 1, "enable": 1, "error": 1, "func": 3, "go": 1, "go-function": 1, "handle": 1, "handler": 3, "http": 2, "https": 1, "incoming": 1, "keep-alives": 1, "listenandserve": 5, "listens": 1, "network": 1, "on": 2, "requests": 1, "serve": 1, "string": 1, "tcp": 2, "the": 1, "then": 1, "to": 2, "with": 1, "¶": 3 }, "length": 50 }, { "id": "ae6bc0f05d4a520b58e62002", "doc_id": "3da3f79b514bd00d8102a3a9", "title": "http.func ListenAndServeTLS ¶", "url": "https://pkg.go.dev/http#func ListenAndServeTLS ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_listenandservetls_¶_7.json", "content": "# http.func ListenAndServeTLS ¶ ``` func ListenAndServeTLS(addr, certFile, keyFile string, handler Handler) error ``` ListenAndServeTLS acts identically to ListenAndServe, except that it expects HTTPS connections. Additionally, files containing a certificate and matching private key for the server must be provided. If the certificate is signed by a certificate authority, the certFile should be the concatenation of the server's certificate, any intermediates, and the CA's certificate.", "term_freq": { "//pkg": 1, "acts": 1, "additionally": 1, "addr": 1, "and": 2, "any": 1, "authority": 1, "be": 2, "by": 1, "ca": 1, "certfile": 2, "certificate": 5, "concatenation": 1, "connections": 1, "containing": 1, "dev/http#func": 1, "error": 1, "except": 1, "expects": 1, "files": 1, "for": 1, "func": 3, "go": 1, "go-function": 1, "handler": 2, "http": 2, "https": 2, "identically": 1, "if": 1, "intermediates": 1, "is": 1, "it": 1, "key": 1, "keyfile": 1, "listenandserve": 1, "listenandservetls": 5, "matching": 1, "must": 1, "of": 1, "private": 1, "provided": 1, "server": 2, "should": 1, "signed": 1, "string": 1, "that": 1, "the": 6, "to": 1, "¶": 3 }, "length": 73 }, { "id": "f00c0599b65733611cc4c365", "doc_id": "9095e017e922d9d6ac517fa9", "title": "http.func MaxBytesReader ¶", "url": "https://pkg.go.dev/http#func MaxBytesReader ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_maxbytesreader_¶_8.json", "content": "# http.func MaxBytesReader ¶ ``` func MaxBytesReader(w ResponseWriter, r io.ReadCloser, n int64) io.ReadCloser ``` MaxBytesReader is similar to io.LimitReader but is intended for limiting the size of incoming request bodies. In contrast to io.LimitReader, MaxBytesReader's result is a ReadCloser, returns a non-nil error of type *MaxBytesError for a Read beyond the limit, and closes the underlying reader when its Close method is called.", "term_freq": { "*maxbyteserror": 1, "//pkg": 1, "and": 1, "beyond": 1, "bodies": 1, "but": 1, "called": 1, "close": 1, "closes": 1, "contrast": 1, "dev/http#func": 1, "error": 1, "for": 2, "func": 3, "go": 1, "go-function": 1, "http": 2, "https": 1, "in": 1, "incoming": 1, "int64": 1, "intended": 1, "io": 4, "is": 4, "its": 1, "limit": 1, "limiting": 1, "limitreader": 2, "maxbytesreader": 6, "method": 1, "non-nil": 1, "of": 2, "read": 1, "readcloser": 3, "reader": 1, "request": 1, "responsewriter": 1, "result": 1, "returns": 1, "similar": 1, "size": 1, "the": 3, "to": 2, "type": 1, "underlying": 1, "when": 1, "¶": 3 }, "length": 71 }, { "id": "425ceea96105e0fd0f267ad8", "doc_id": "2b893c8d59d1f244265f1d5f", "title": "http.func NotFound ¶", "url": "https://pkg.go.dev/http#func NotFound ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_notfound_¶_9.json", "content": "# http.func NotFound ¶ ``` func NotFound(w ResponseWriter, r *Request) ``` NotFound replies to the request with an HTTP 404 not found error.", "term_freq": { "*request": 1, "//pkg": 1, "404": 1, "an": 1, "dev/http#func": 1, "error": 1, "found": 1, "func": 3, "go": 1, "go-function": 1, "http": 3, "https": 1, "not": 1, "notfound": 5, "replies": 1, "request": 1, "responsewriter": 1, "the": 1, "to": 1, "with": 1, "¶": 3 }, "length": 31 }, { "id": "2c32f6de3d3e41a2b6bde1b8", "doc_id": "329cdea0dfc4505ea97a4e8a", "title": "http.func ParseHTTPVersion ¶", "url": "https://pkg.go.dev/http#func ParseHTTPVersion ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_parsehttpversion_¶_10.json", "content": "# http.func ParseHTTPVersion ¶ ``` func ParseHTTPVersion(vers string) (major, minor int, ok bool) ``` ParseHTTPVersion parses an HTTP version string according to RFC 7230, section 2.6. \"HTTP/1.0\" returns (1, 0, true). Note that strings without a minor version, such as \"HTTP/2\", are not valid.", "term_freq": { "//pkg": 1, "7230": 1, "according": 1, "an": 1, "are": 1, "as": 1, "bool": 1, "dev/http#func": 1, "func": 3, "go": 1, "go-function": 1, "http": 3, "http/1": 1, "http/2": 1, "https": 1, "int": 1, "major": 1, "minor": 2, "not": 1, "note": 1, "ok": 1, "parsehttpversion": 5, "parses": 1, "returns": 1, "rfc": 1, "section": 1, "string": 2, "strings": 1, "such": 1, "that": 1, "to": 1, "true": 1, "valid": 1, "vers": 1, "version": 2, "without": 1, "¶": 3 }, "length": 50 }, { "id": "22de6055974cbb22a1f814ac", "doc_id": "38c151d7359d6452a710d8b8", "title": "http.func ParseTime ¶\n \n \n added in\n go1.1", "url": "https://pkg.go.dev/http#func ParseTime ¶\n \n \n added in\n go1.1", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_parsetime_¶\n__\n____\n______added_in\n_____11.json", "content": "# http.func ParseTime ¶ added in go1.1 ``` func ParseTime(text string) (t time.Time, err error) ``` ParseTime parses a time header (such as the Date: header), trying each of the three formats allowed by HTTP/1.1: TimeFormat, time.RFC850, and time.ANSIC.", "term_freq": { "//pkg": 1, "added": 3, "allowed": 1, "and": 1, "ansic": 1, "as": 1, "by": 1, "date": 1, "dev/http#func": 1, "each": 1, "err": 1, "error": 1, "formats": 1, "func": 3, "go": 1, "go-function": 1, "go1": 3, "header": 2, "http": 2, "http/1": 1, "https": 1, "in": 3, "of": 1, "parses": 1, "parsetime": 5, "rfc850": 1, "string": 1, "such": 1, "text": 1, "the": 2, "three": 1, "time": 5, "timeformat": 1, "trying": 1, "¶": 3 }, "length": 56 }, { "id": "24c67d7a46c68a031c6af379", "doc_id": "ac455995d3e7b921e08dbe30", "title": "http.func ProxyFromEnvironment ¶", "url": "https://pkg.go.dev/http#func ProxyFromEnvironment ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_proxyfromenvironment_¶_12.json", "content": "# http.func ProxyFromEnvironment ¶ ``` func ProxyFromEnvironment(req *Request) (*url.URL, error) ``` ProxyFromEnvironment returns the URL of the proxy to use for a given request, as indicated by the environment variables HTTP_PROXY, HTTPS_PROXY and NO_PROXY (or the lowercase versions thereof). Requests use the proxy from the environment variable matching their scheme, unless excluded by NO_PROXY.", "term_freq": { "*request": 1, "*url": 1, "//pkg": 1, "and": 1, "as": 1, "by": 2, "dev/http#func": 1, "environment": 2, "error": 1, "excluded": 1, "for": 1, "from": 1, "func": 3, "given": 1, "go": 1, "go-function": 1, "http": 2, "http_proxy": 1, "https": 1, "https_proxy": 1, "indicated": 1, "lowercase": 1, "matching": 1, "no_proxy": 2, "of": 1, "or": 1, "proxy": 2, "proxyfromenvironment": 5, "req": 1, "request": 1, "requests": 1, "returns": 1, "scheme": 1, "the": 6, "their": 1, "thereof": 1, "to": 1, "unless": 1, "url": 2, "use": 2, "variable": 1, "variables": 1, "versions": 1, "¶": 3 }, "length": 64 }, { "id": "6af9beb35cb3a7aa2010c4ff", "doc_id": "efb9e9afe67ca7664d403cee", "title": "http.func ProxyURL ¶", "url": "https://pkg.go.dev/http#func ProxyURL ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_proxyurl_¶_13.json", "content": "# http.func ProxyURL ¶ ``` func ProxyURL(fixedURL *url.URL) func(*Request) (*url.URL, error) ``` ProxyURL returns a proxy function (for use in a Transport) that always returns the same URL.", "term_freq": { "*request": 1, "*url": 2, "//pkg": 1, "always": 1, "dev/http#func": 1, "error": 1, "fixedurl": 1, "for": 1, "func": 4, "function": 1, "go": 1, "go-function": 1, "http": 2, "https": 1, "in": 1, "proxy": 1, "proxyurl": 5, "returns": 2, "same": 1, "that": 1, "the": 1, "transport": 1, "url": 3, "use": 1, "¶": 3 }, "length": 39 }, { "id": "fcb97f5e59ffc3e33650b7aa", "doc_id": "d12dce4e35fcfdd56c96aa14", "title": "http.func Redirect ¶", "url": "https://pkg.go.dev/http#func Redirect ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_redirect_¶_14.json", "content": "# http.func Redirect ¶ ``` func Redirect(w ResponseWriter, r *Request, url string, code int) ``` Redirect replies to the request with a redirect to url, which may be a path relative to the request path. Any non-ASCII characters in url will be percent-encoded, but existing percent encodings will not be changed.", "term_freq": { "*request": 1, "//pkg": 1, "any": 1, "be": 3, "but": 1, "changed": 1, "characters": 1, "code": 1, "dev/http#func": 1, "encodings": 1, "existing": 1, "func": 3, "go": 1, "go-function": 1, "http": 2, "https": 1, "in": 1, "int": 1, "may": 1, "non-ascii": 1, "not": 1, "path": 2, "percent": 1, "percent-encoded": 1, "redirect": 6, "relative": 1, "replies": 1, "request": 2, "responsewriter": 1, "string": 1, "the": 2, "to": 3, "url": 3, "which": 1, "will": 2, "with": 1, "¶": 3 }, "length": 57 }, { "id": "20d82c61ef92362d0ab21c35", "doc_id": "583357a2e03a602ec45348c2", "title": "http.func Serve ¶", "url": "https://pkg.go.dev/http#func Serve ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_serve_¶_15.json", "content": "# http.func Serve ¶ ``` func Serve(l net.Listener, handler Handler) error ``` Serve accepts incoming HTTP connections on the listener l, creating a new service goroutine for each. The service goroutines read requests and then call handler to reply to them.", "term_freq": { "//pkg": 1, "accepts": 1, "and": 1, "call": 1, "connections": 1, "creating": 1, "dev/http#func": 1, "each": 1, "error": 1, "for": 1, "func": 3, "go": 1, "go-function": 1, "goroutine": 1, "goroutines": 1, "handler": 3, "http": 3, "https": 1, "incoming": 1, "listener": 2, "net": 1, "new": 1, "on": 1, "read": 1, "reply": 1, "requests": 1, "serve": 5, "service": 2, "the": 2, "them": 1, "then": 1, "to": 2, "¶": 3 }, "length": 49 }, { "id": "458b8d488178cd3b623a4740", "doc_id": "45375608a6e38a1495ae3842", "title": "http.func ServeContent ¶", "url": "https://pkg.go.dev/http#func ServeContent ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_servecontent_¶_16.json", "content": "# http.func ServeContent ¶ ``` func ServeContent(w ResponseWriter, req *Request, name string, modtime time.Time, content io.ReadSeeker) ``` ServeContent replies to the request using the content in the provided ReadSeeker. The main benefit of ServeContent over io.Copy is that it handles Range requests properly, sets the MIME type, and handles If-Match, If-Unmodified-Since, If-None-Match, If-Modified-Since, and If-Range requests.", "term_freq": { "*request": 1, "//pkg": 1, "and": 2, "benefit": 1, "content": 2, "copy": 1, "dev/http#func": 1, "func": 3, "go": 1, "go-function": 1, "handles": 2, "http": 2, "https": 1, "if-match": 1, "if-modified-since": 1, "if-none-match": 1, "if-range": 1, "if-unmodified-since": 1, "in": 1, "io": 2, "is": 1, "it": 1, "main": 1, "mime": 1, "modtime": 1, "name": 1, "of": 1, "over": 1, "properly": 1, "provided": 1, "range": 1, "readseeker": 2, "replies": 1, "req": 1, "request": 1, "requests": 2, "responsewriter": 1, "servecontent": 6, "sets": 1, "string": 1, "that": 1, "the": 5, "time": 2, "to": 1, "type": 1, "using": 1, "¶": 3 }, "length": 68 }, { "id": "b021aaa31e9c2141d720e6b2", "doc_id": "43e18a0f8502552a31de729d", "title": "http.func ServeFile ¶", "url": "https://pkg.go.dev/http#func ServeFile ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_servefile_¶_17.json", "content": "# http.func ServeFile ¶ ``` func ServeFile(w ResponseWriter, r *Request, name string) ``` ServeFile replies to the request with the contents of the named file or directory.", "term_freq": { "*request": 1, "//pkg": 1, "contents": 1, "dev/http#func": 1, "directory": 1, "file": 1, "func": 3, "go": 1, "go-function": 1, "http": 2, "https": 1, "name": 1, "named": 1, "of": 1, "or": 1, "replies": 1, "request": 1, "responsewriter": 1, "servefile": 5, "string": 1, "the": 3, "to": 1, "with": 1, "¶": 3 }, "length": 35 }, { "id": "0870d09f55b0bc080b129d00", "doc_id": "15ade505ab0ce3be03d304ba", "title": "http.func ServeFileFS ¶\n \n \n added in\n go1.22.0", "url": "https://pkg.go.dev/http#func ServeFileFS ¶\n \n \n added in\n go1.22.0", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_servefilefs_¶\n__\n____\n______added_in\n___18.json", "content": "# http.func ServeFileFS ¶ added in go1.22.0 ``` func ServeFileFS(w ResponseWriter, r *Request, fsys fs.FS, name string) ``` ServeFileFS replies to the request with the contents of the named file or directory from the file system fsys. The files provided by fsys must implement io.Seeker.", "term_freq": { "*request": 1, "//pkg": 1, "22": 3, "added": 3, "by": 1, "contents": 1, "dev/http#func": 1, "directory": 1, "file": 2, "files": 1, "from": 1, "fs": 2, "fsys": 3, "func": 3, "go": 1, "go-function": 1, "go1": 3, "http": 2, "https": 1, "implement": 1, "in": 3, "io": 1, "must": 1, "name": 1, "named": 1, "of": 1, "or": 1, "provided": 1, "replies": 1, "request": 1, "responsewriter": 1, "seeker": 1, "servefilefs": 5, "string": 1, "system": 1, "the": 5, "to": 1, "with": 1, "¶": 3 }, "length": 64 }, { "id": "8a5ff3f218cc6ca02375654f", "doc_id": "c0758d9ea0206e46e9c59133", "title": "http.func ServeTLS ¶\n \n \n added in\n go1.9", "url": "https://pkg.go.dev/http#func ServeTLS ¶\n \n \n added in\n go1.9", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_servetls_¶\n__\n____\n______added_in\n______19.json", "content": "# http.func ServeTLS ¶ added in go1.9 ``` func ServeTLS(l net.Listener, handler Handler, certFile, keyFile string) error ``` ServeTLS accepts incoming HTTPS connections on the listener l, creating a new service goroutine for each. The service goroutines read requests and then call handler to reply to them.", "term_freq": { "//pkg": 1, "accepts": 1, "added": 3, "and": 1, "call": 1, "certfile": 1, "connections": 1, "creating": 1, "dev/http#func": 1, "each": 1, "error": 1, "for": 1, "func": 3, "go": 1, "go-function": 1, "go1": 3, "goroutine": 1, "goroutines": 1, "handler": 3, "http": 2, "https": 2, "in": 3, "incoming": 1, "keyfile": 1, "listener": 2, "net": 1, "new": 1, "on": 1, "read": 1, "reply": 1, "requests": 1, "servetls": 5, "service": 2, "string": 1, "the": 2, "them": 1, "then": 1, "to": 2, "¶": 3 }, "length": 61 }, { "id": "f302cd9bf2da58de91ab4cf7", "doc_id": "4710fd7347378202d17c3fee", "title": "http.func SetCookie ¶", "url": "https://pkg.go.dev/http#func SetCookie ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_setcookie_¶_20.json", "content": "# http.func SetCookie ¶ ``` func SetCookie(w ResponseWriter, cookie *Cookie) ``` SetCookie adds a Set-Cookie header to the provided ResponseWriter's headers. The provided cookie must have a valid Name. Invalid cookies may be silently dropped.", "term_freq": { "*cookie": 1, "//pkg": 1, "adds": 1, "be": 1, "cookie": 2, "cookies": 1, "dev/http#func": 1, "dropped": 1, "func": 3, "go": 1, "go-function": 1, "have": 1, "header": 1, "headers": 1, "http": 2, "https": 1, "invalid": 1, "may": 1, "must": 1, "name": 1, "provided": 2, "responsewriter": 2, "set-cookie": 1, "setcookie": 5, "silently": 1, "the": 2, "to": 1, "valid": 1, "¶": 3 }, "length": 42 }, { "id": "995841e7cfa13556eb2e1012", "doc_id": "20104e1fbb1a4d9b10b41290", "title": "http.func StatusText ¶", "url": "https://pkg.go.dev/http#func StatusText ¶", "type": "go-function", "source": "http", "path": "devour_data/docs/http_func_statustext_¶_21.json", "content": "# http.func StatusText ¶ ``` func StatusText(code int) string ``` StatusText returns a text for the HTTP status code. It returns the empty string if the code is unknown.", "term_freq": { "//pkg": 1, "code": 3, "dev/http#func": 1, "empty": 1, "for": 1, "func": 3, "go": 1, "go-function": 1, "http": 3, "https": 1, "if": 1, "int": 1, "is": 1, "it": 1, "returns": 2, "status": 1, "statustext": 5, "string": 2, "text": 1, "the": 3, "unknown": 1, "¶": 3 }, "length": 38 }, { "id": "81fc408bfdb5fe6ebbb3b1de", "doc_id": "1a6d3ba16db325285ee52f5f", "title": "http.MethodGet (const)", "url": "https://pkg.go.dev/http", "type": "go-constant", "source": "http", "path": "devour_data/docs/http_methodget_(const)_52.json", "content": "# Constants Common HTTP methods. ```go const ( MethodGet MethodHead MethodPost MethodPut MethodPatch MethodDelete MethodConnect MethodOptions MethodTrace ) ```", "term_freq": { "//pkg": 1, "common": 1, "const": 2, "constants": 1, "dev/http": 1, "go": 2, "go-constant": 1, "http": 2, "https": 1, "methodconnect": 1, "methoddelete": 1, "methodget": 2, "methodhead": 1, "methodoptions": 1, "methodpatch": 1, "methodpost": 1, "methodput": 1, "methods": 1, "methodtrace": 1 }, "length": 23 }, { "id": "3ab331c9e4405a98a71d955e", "doc_id": "ec6daa6fcc79332cf26c3e5e", "title": "http.type Client ¶", "url": "https://pkg.go.dev/http#type Client ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_client_¶_22.json", "content": "# type http.type Client ¶ ``` type Client struct { // Transport specifies the mechanism by which individual // HTTP requests are made. // If nil, DefaultTransport is used. Transport RoundTripper // CheckRedirect specifies the policy for handling redirects. // If CheckRedirect is not nil, the client calls it before // following an HTTP redirect. The arguments req and via are // the upcoming request and the requests made already, oldest // first. If CheckRedirect returns an error, the Client's Get // method returns both the previous Response (with its Body // closed) and CheckRedirect's error (wrapped in a url.Error) // instead of issuing the Request req. // As a special case, if CheckRedirect returns ErrUseLastResponse, // then the most recent response is returned with its body // unclosed, along with a nil error. // // If CheckRedirect is nil, the Client uses its default policy, // which is to stop after 10 consecutive requests. CheckRedirect func(req *Request, via []*Request) error // Jar specifies the cookie jar. // // The Jar is used to insert relevant cookies into every // outbound Request and is updated with the cookie values // of every inbound Response. The Jar is consulted for every // redirect that the Client follows. // // If Jar is nil, cookies are only sent if they are explicitly // set on the Request. Jar CookieJar // Timeout specifies a time limit for requests made by this // Client. The timeout includes connection time, any // redirects, and reading the response body. The timer remains // running after Get, Head, Post, or Do return and will // interrupt reading of the Response.Body. // // A Timeout of zero means no timeout. // // The Client cancels requests to the underlying Transport // as if the Request's Context ended. // // For compatibility, the Client will also use the deprecated // CancelRequest method on Transport if found. New // RoundTripper implementations should use the Request's Context // for cancellation instead of implementing CancelRequest. Timeout time.Duration } ``` A Client is an HTTP client. Its zero value (DefaultClient) is a usable client that uses DefaultTransport.", "term_freq": { "*request": 2, "//": 41, "//pkg": 1, "10": 1, "after": 2, "along": 1, "already": 1, "also": 1, "an": 3, "and": 6, "any": 1, "are": 4, "arguments": 1, "as": 2, "before": 1, "body": 4, "both": 1, "by": 2, "calls": 1, "cancellation": 1, "cancelrequest": 2, "cancels": 1, "case": 1, "checkredirect": 7, "client": 14, "closed": 1, "compatibility": 1, "connection": 1, "consecutive": 1, "consulted": 1, "context": 2, "cookie": 2, "cookiejar": 1, "cookies": 2, "default": 1, "defaultclient": 1, "defaulttransport": 2, "deprecated": 1, "dev/http#type": 1, "do": 1, "duration": 1, "ended": 1, "error": 5, "erruselastresponse": 1, "every": 3, "explicitly": 1, "first": 1, "following": 1, "follows": 1, "for": 5, "found": 1, "func": 1, "get": 2, "go": 1, "go-type": 1, "handling": 1, "head": 1, "http": 5, "https": 1, "if": 9, "implementations": 1, "implementing": 1, "in": 1, "inbound": 1, "includes": 1, "individual": 1, "insert": 1, "instead": 2, "interrupt": 1, "into": 1, "is": 11, "issuing": 1, "it": 1, "its": 4, "jar": 6, "limit": 1, "made": 3, "means": 1, "mechanism": 1, "method": 2, "most": 1, "new": 1, "nil": 5, "no": 1, "not": 1, "of": 5, "oldest": 1, "on": 2, "only": 1, "or": 1, "outbound": 1, "policy": 2, "post": 1, "previous": 1, "reading": 2, "recent": 1, "redirect": 2, "redirects": 2, "relevant": 1, "remains": 1, "req": 3, "request": 6, "requests": 5, "response": 5, "return": 1, "returned": 1, "returns": 3, "roundtripper": 2, "running": 1, "sent": 1, "set": 1, "should": 1, "special": 1, "specifies": 4, "stop": 1, "struct": 1, "that": 2, "the": 27, "then": 1, "they": 1, "this": 1, "time": 3, "timeout": 5, "timer": 1, "to": 3, "transport": 4, "type": 4, "unclosed": 1, "underlying": 1, "upcoming": 1, "updated": 1, "url": 1, "usable": 1, "use": 2, "used": 2, "uses": 2, "value": 1, "values": 1, "via": 2, "which": 2, "will": 2, "with": 4, "wrapped": 1, "zero": 2, "¶": 3 }, "length": 358 }, { "id": "cd9f6298cdcdfb476e735450", "doc_id": "5864b5986299149a4053361f", "title": "http.type ClientConn ¶\n \n \n added in\n go1.26.0", "url": "https://pkg.go.dev/http#type ClientConn ¶\n \n \n added in\n go1.26.0", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_clientconn_¶\n__\n____\n______added_in\n____23.json", "content": "# type http.type ClientConn ¶ added in go1.26.0 ``` type ClientConn struct { // contains filtered or unexported fields } ``` A ClientConn is a client connection to an HTTP server.", "term_freq": { "//": 1, "//pkg": 1, "26": 3, "added": 3, "an": 1, "client": 1, "clientconn": 5, "connection": 1, "contains": 1, "dev/http#type": 1, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "go1": 3, "http": 3, "https": 1, "in": 3, "is": 1, "or": 1, "server": 1, "struct": 1, "to": 1, "type": 4, "unexported": 1, "¶": 3 }, "length": 45 }, { "id": "02771ac30581d8b68f2556cc", "doc_id": "83addbeae90c93c46e86c929", "title": "http.type CloseNotifier\n deprecated\n \n \n \n \n added in\n go1.1", "url": "https://pkg.go.dev/http#type CloseNotifier\n deprecated\n \n \n \n \n added in\n go1.1", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_closenotifier\n____________deprecated\n____24.json", "content": "# type http.type CloseNotifier deprecated added in go1.1 ``` type CloseNotifier interface { // CloseNotify returns a channel that receives at most a // single value (true) when the client connection has gone // away. // // CloseNotify may wait to notify until Request.Body has been // fully read. // // After the Handler has returned, there is no guarantee // that the channel receives a value. // // If the protocol is HTTP/1.1 and CloseNotify is called while // processing an idempotent request (such as GET) while // HTTP/1.1 pipelining is in use, the arrival of a subsequent // pipelined request may cause a value to be sent on the // returned channel. In practice HTTP/1.1 pipelining is not // enabled in browsers and not seen often in the wild. If this // is a problem, use HTTP/2 or only use CloseNotify on methods // such as POST. CloseNotify() \u003c-chan bool } ``` The CloseNotifier interface is implemented by ResponseWriters which allow detecting when the underlying connection has gone away.", "term_freq": { "//": 18, "//pkg": 1, "\u003c-chan": 1, "added": 3, "after": 1, "allow": 1, "an": 1, "and": 2, "arrival": 1, "as": 2, "at": 1, "away": 2, "be": 1, "been": 1, "body": 1, "bool": 1, "browsers": 1, "by": 1, "called": 1, "cause": 1, "channel": 3, "client": 1, "closenotifier": 5, "closenotify": 5, "connection": 2, "deprecated": 3, "detecting": 1, "dev/http#type": 1, "enabled": 1, "fully": 1, "get": 1, "go": 1, "go-type": 1, "go1": 3, "gone": 2, "guarantee": 1, "handler": 1, "has": 4, "http": 2, "http/1": 3, "http/2": 1, "https": 1, "idempotent": 1, "if": 2, "implemented": 1, "in": 7, "interface": 2, "is": 7, "may": 2, "methods": 1, "most": 1, "no": 1, "not": 2, "notify": 1, "of": 1, "often": 1, "on": 2, "only": 1, "or": 1, "pipelined": 1, "pipelining": 2, "post": 1, "practice": 1, "problem": 1, "processing": 1, "protocol": 1, "read": 1, "receives": 2, "request": 3, "responsewriters": 1, "returned": 2, "returns": 1, "seen": 1, "sent": 1, "single": 1, "subsequent": 1, "such": 2, "that": 2, "the": 9, "there": 1, "this": 1, "to": 2, "true": 1, "type": 4, "underlying": 1, "until": 1, "use": 3, "value": 3, "wait": 1, "when": 2, "which": 1, "while": 2, "wild": 1 }, "length": 179 }, { "id": "468ddd36cacceca1f788a247", "doc_id": "344cbf96ab225524d7377423", "title": "http.type ConnState ¶\n \n \n added in\n go1.3", "url": "https://pkg.go.dev/http#type ConnState ¶\n \n \n added in\n go1.3", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_connstate_¶\n__\n____\n______added_in\n_____25.json", "content": "# type http.type ConnState ¶ added in go1.3 ``` type ConnState int ``` A ConnState represents the state of a client connection to a server. It's used by the optional [Server.ConnState] hook.", "term_freq": { "//pkg": 1, "added": 3, "by": 1, "client": 1, "connection": 1, "connstate": 6, "dev/http#type": 1, "go": 1, "go-type": 1, "go1": 3, "hook": 1, "http": 2, "https": 1, "in": 3, "int": 1, "it": 1, "of": 1, "optional": 1, "represents": 1, "server": 2, "state": 1, "the": 2, "to": 1, "type": 4, "used": 1, "¶": 3 }, "length": 45 }, { "id": "7dbfcde0bd21d5721b706253", "doc_id": "e04d37255abd69352e708f87", "title": "http.type Cookie ¶", "url": "https://pkg.go.dev/http#type Cookie ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_cookie_¶_26.json", "content": "# type http.type Cookie ¶ ``` type Cookie struct { Name string Value string Quoted bool // indicates whether the Value was originally quoted Path string // optional Domain string // optional Expires time.Time // optional RawExpires string // for reading cookies only // MaxAge=0 means no 'Max-Age' attribute specified. // MaxAge\u003c0 means delete cookie now, equivalently 'Max-Age: 0' // MaxAge\u003e0 means Max-Age attribute present and given in seconds MaxAge int Secure bool HttpOnly bool SameSite SameSite Partitioned bool Raw string Unparsed []string // Raw text of unparsed attribute-value pairs } ``` A Cookie represents an HTTP cookie as sent in the Set-Cookie header of an HTTP response or the Cookie header of an HTTP request.", "term_freq": { "//": 9, "//pkg": 1, "an": 3, "and": 1, "as": 1, "attribute": 2, "attribute-value": 1, "bool": 4, "cookie": 8, "cookies": 1, "delete": 1, "dev/http#type": 1, "domain": 1, "equivalently": 1, "expires": 1, "for": 1, "given": 1, "go": 1, "go-type": 1, "header": 2, "http": 5, "httponly": 1, "https": 1, "in": 2, "indicates": 1, "int": 1, "max-age": 3, "maxage": 1, "maxage\u003c0": 1, "maxage=0": 1, "maxage\u003e0": 1, "means": 3, "name": 1, "no": 1, "now": 1, "of": 3, "only": 1, "optional": 3, "or": 1, "originally": 1, "pairs": 1, "partitioned": 1, "path": 1, "present": 1, "quoted": 2, "raw": 2, "rawexpires": 1, "reading": 1, "represents": 1, "request": 1, "response": 1, "samesite": 2, "seconds": 1, "secure": 1, "sent": 1, "set-cookie": 1, "specified": 1, "string": 7, "struct": 1, "text": 1, "the": 3, "time": 2, "type": 4, "unparsed": 2, "value": 2, "was": 1, "whether": 1, "¶": 3 }, "length": 122 }, { "id": "2588f45cbd8ae3e5cf43f8ac", "doc_id": "a4d523264c15f366b4b4fee0", "title": "http.type CookieJar ¶", "url": "https://pkg.go.dev/http#type CookieJar ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_cookiejar_¶_27.json", "content": "# type http.type CookieJar ¶ ``` type CookieJar interface { // SetCookies handles the receipt of the cookies in a reply for the // given URL. It may or may not choose to save the cookies, depending // on the jar's policy and implementation. SetCookies(u *url.URL, cookies []*Cookie) // Cookies returns the cookies to send in a request for the given URL. // It is up to the implementation to honor the standard cookie use // restrictions such as in RFC 6265. Cookies(u *url.URL) []*Cookie } ``` A CookieJar manages storage and use of cookies in HTTP requests.", "term_freq": { "*cookie": 2, "*url": 2, "//": 6, "//pkg": 1, "6265": 1, "and": 2, "as": 1, "choose": 1, "cookie": 1, "cookiejar": 5, "cookies": 7, "depending": 1, "dev/http#type": 1, "for": 2, "given": 2, "go": 1, "go-type": 1, "handles": 1, "honor": 1, "http": 3, "https": 1, "implementation": 2, "in": 4, "interface": 1, "is": 1, "it": 2, "jar": 1, "manages": 1, "may": 2, "not": 1, "of": 2, "on": 1, "or": 1, "policy": 1, "receipt": 1, "reply": 1, "request": 1, "requests": 1, "restrictions": 1, "returns": 1, "rfc": 1, "save": 1, "send": 1, "setcookies": 2, "standard": 1, "storage": 1, "such": 1, "the": 9, "to": 4, "type": 4, "up": 1, "url": 4, "use": 2, "¶": 3 }, "length": 104 }, { "id": "a68ab5750ac9698dc1e43aa3", "doc_id": "6ddb919fe5b492f377978d01", "title": "http.type CrossOriginProtection ¶\n \n \n added in\n go1.25.0", "url": "https://pkg.go.dev/http#type CrossOriginProtection ¶\n \n \n added in\n go1.25.0", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_crossoriginprotection_¶\n__\n____\n______a_28.json", "content": "# type http.type CrossOriginProtection ¶ added in go1.25.0 ``` type CrossOriginProtection struct { // contains filtered or unexported fields } ``` CrossOriginProtection implements protections against Cross-Site Request Forgery (CSRF) by rejecting non-safe cross-origin browser requests.", "term_freq": { "//": 1, "//pkg": 1, "25": 3, "added": 3, "against": 1, "browser": 1, "by": 1, "contains": 1, "cross-origin": 1, "cross-site": 1, "crossoriginprotection": 5, "csrf": 1, "dev/http#type": 1, "fields": 1, "filtered": 1, "forgery": 1, "go": 1, "go-type": 1, "go1": 3, "http": 2, "https": 1, "implements": 1, "in": 3, "non-safe": 1, "or": 1, "protections": 1, "rejecting": 1, "request": 1, "requests": 1, "struct": 1, "type": 4, "unexported": 1, "¶": 3 }, "length": 51 }, { "id": "79bcd0adaff7fd71d286073d", "doc_id": "099998cc5e5cb8f5c2c54c91", "title": "http.type Dir ¶", "url": "https://pkg.go.dev/http#type Dir ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_dir_¶_29.json", "content": "# type http.type Dir ¶ ``` type Dir string ``` A Dir implements FileSystem using the native file system restricted to a specific directory tree.", "term_freq": { "//pkg": 1, "dev/http#type": 1, "dir": 5, "directory": 1, "file": 1, "filesystem": 1, "go": 1, "go-type": 1, "http": 2, "https": 1, "implements": 1, "native": 1, "restricted": 1, "specific": 1, "string": 1, "system": 1, "the": 1, "to": 1, "tree": 1, "type": 4, "using": 1, "¶": 3 }, "length": 32 }, { "id": "38c90f55ccfaa8d5fd73d023", "doc_id": "128398ed966f457505ff4428", "title": "http.type File ¶", "url": "https://pkg.go.dev/http#type File ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_file_¶_30.json", "content": "# type http.type File ¶ ``` type File interface { io.Closer io.Reader io.Seeker Readdir(count int) ([]fs.FileInfo, error) Stat() (fs.FileInfo, error) } ``` A File is returned by a FileSystem's Open method and can be served by the FileServer implementation.", "term_freq": { "//pkg": 1, "and": 1, "be": 1, "by": 2, "can": 1, "closer": 1, "count": 1, "dev/http#type": 1, "error": 2, "file": 5, "fileinfo": 2, "fileserver": 1, "filesystem": 1, "fs": 2, "go": 1, "go-type": 1, "http": 2, "https": 1, "implementation": 1, "int": 1, "interface": 1, "io": 3, "is": 1, "method": 1, "open": 1, "readdir": 1, "reader": 1, "returned": 1, "seeker": 1, "served": 1, "stat": 1, "the": 1, "type": 4, "¶": 3 }, "length": 50 }, { "id": "50549570fcb496d1cc54e5dd", "doc_id": "32353559a030071b2fd63113", "title": "http.type FileSystem ¶", "url": "https://pkg.go.dev/http#type FileSystem ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_filesystem_¶_31.json", "content": "# type http.type FileSystem ¶ ``` type FileSystem interface { Open(name string) (File, error) } ``` A FileSystem implements access to a collection of named files. The elements in a file path are separated by slash ('/', U+002F) characters, regardless of host operating system convention. See the FileServer function to convert a FileSystem to a Handler.", "term_freq": { "//pkg": 1, "access": 1, "are": 1, "by": 1, "characters": 1, "collection": 1, "convention": 1, "convert": 1, "dev/http#type": 1, "elements": 1, "error": 1, "file": 2, "files": 1, "fileserver": 1, "filesystem": 6, "function": 1, "go": 1, "go-type": 1, "handler": 1, "host": 1, "http": 2, "https": 1, "implements": 1, "in": 1, "interface": 1, "name": 1, "named": 1, "of": 2, "open": 1, "operating": 1, "path": 1, "regardless": 1, "see": 1, "separated": 1, "slash": 1, "string": 1, "system": 1, "the": 2, "to": 3, "type": 4, "u+002f": 1, "¶": 3 }, "length": 58 }, { "id": "32a93a492a47df5380d3c3bb", "doc_id": "a3ac7f1a6dd81196f824401e", "title": "http.type Flusher ¶", "url": "https://pkg.go.dev/http#type Flusher ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_flusher_¶_32.json", "content": "# type http.type Flusher ¶ ``` type Flusher interface { // Flush sends any buffered data to the client. Flush() } ``` The Flusher interface is implemented by ResponseWriters that allow an HTTP handler to flush buffered data to the client.", "term_freq": { "//": 1, "//pkg": 1, "allow": 1, "an": 1, "any": 1, "buffered": 2, "by": 1, "client": 2, "data": 2, "dev/http#type": 1, "flush": 3, "flusher": 5, "go": 1, "go-type": 1, "handler": 1, "http": 3, "https": 1, "implemented": 1, "interface": 2, "is": 1, "responsewriters": 1, "sends": 1, "that": 1, "the": 3, "to": 3, "type": 4, "¶": 3 }, "length": 48 }, { "id": "f3fba35b17cc68d6c222c5db", "doc_id": "d89765966a967bdb8a426e6a", "title": "http.type Handler ¶", "url": "https://pkg.go.dev/http#type Handler ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_handler_¶_34.json", "content": "# type http.type Handler ¶ ``` type Handler interface { ServeHTTP(ResponseWriter, *Request) } ``` A Handler responds to an HTTP request.", "term_freq": { "*request": 1, "//pkg": 1, "an": 1, "dev/http#type": 1, "go": 1, "go-type": 1, "handler": 5, "http": 3, "https": 1, "interface": 1, "request": 1, "responds": 1, "responsewriter": 1, "servehttp": 1, "to": 1, "type": 4, "¶": 3 }, "length": 28 }, { "id": "e945bc72a205f8f766caae3e", "doc_id": "f319abdf711953b5d29d9e80", "title": "http.type HandlerFunc ¶", "url": "https://pkg.go.dev/http#type HandlerFunc ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_handlerfunc_¶_35.json", "content": "# type http.type HandlerFunc ¶ ``` type HandlerFunc func(ResponseWriter, *Request) ``` The HandlerFunc type is an adapter to allow the use of ordinary functions as HTTP handlers. If f is a function with the appropriate signature, HandlerFunc(f) is a Handler that calls f.", "term_freq": { "*request": 1, "//pkg": 1, "adapter": 1, "allow": 1, "an": 1, "appropriate": 1, "as": 1, "calls": 1, "dev/http#type": 1, "func": 1, "function": 1, "functions": 1, "go": 1, "go-type": 1, "handler": 1, "handlerfunc": 6, "handlers": 1, "http": 3, "https": 1, "if": 1, "is": 3, "of": 1, "ordinary": 1, "responsewriter": 1, "signature": 1, "that": 1, "the": 3, "to": 1, "type": 5, "use": 1, "with": 1, "¶": 3 }, "length": 49 }, { "id": "6c44a51caa5edc21afa28f92", "doc_id": "ac652b55c3f3f91de97a97b3", "title": "http.type Header ¶", "url": "https://pkg.go.dev/http#type Header ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_header_¶_36.json", "content": "# type http.type Header ¶ ``` type Header map[string][]string ``` A Header represents the key-value pairs in an HTTP header.", "term_freq": { "//pkg": 1, "an": 1, "dev/http#type": 1, "go": 1, "go-type": 1, "header": 6, "http": 3, "https": 1, "in": 1, "key-value": 1, "map": 1, "pairs": 1, "represents": 1, "string": 2, "the": 1, "type": 4, "¶": 3 }, "length": 30 }, { "id": "7e891050420f8cb43ac97ba0", "doc_id": "afaad591ba9b08106128c9cb", "title": "http.type Hijacker ¶", "url": "https://pkg.go.dev/http#type Hijacker ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_hijacker_¶_37.json", "content": "# type http.type Hijacker ¶ ``` type Hijacker interface { // Hijack lets the caller take over the connection. // After a call to Hijack the HTTP server library // will not do anything else with the connection. // // It becomes the caller's responsibility to manage // and close the connection. // // The returned net.Conn may have read or write deadlines // already set, depending on the configuration of the // Server. It is the caller's responsibility to set // or clear those deadlines as needed. // // The returned bufio.Reader may contain unprocessed buffered // data from the client. // // After a call to Hijack, the original Request.Body must not // be used. The original Request's Context remains valid and // is not canceled until the Request's ServeHTTP method // returns. Hijack() (net.Conn, *bufio.ReadWriter, error) } ``` The Hijacker interface is implemented by ResponseWriters that allow an HTTP handler to take over the connection.", "term_freq": { "*bufio": 1, "//": 19, "//pkg": 1, "after": 2, "allow": 1, "already": 1, "an": 1, "and": 2, "anything": 1, "as": 1, "be": 1, "becomes": 1, "body": 1, "buffered": 1, "bufio": 1, "by": 1, "call": 2, "caller": 3, "canceled": 1, "clear": 1, "client": 1, "close": 1, "configuration": 1, "conn": 2, "connection": 4, "contain": 1, "context": 1, "data": 1, "deadlines": 2, "depending": 1, "dev/http#type": 1, "do": 1, "else": 1, "error": 1, "from": 1, "go": 1, "go-type": 1, "handler": 1, "have": 1, "hijack": 4, "hijacker": 5, "http": 4, "https": 1, "implemented": 1, "interface": 2, "is": 3, "it": 2, "lets": 1, "library": 1, "manage": 1, "may": 2, "method": 1, "must": 1, "needed": 1, "net": 2, "not": 3, "of": 1, "on": 1, "or": 2, "original": 2, "over": 2, "read": 1, "reader": 1, "readwriter": 1, "remains": 1, "request": 3, "responsewriters": 1, "responsibility": 2, "returned": 2, "returns": 1, "servehttp": 1, "server": 2, "set": 2, "take": 2, "that": 1, "the": 17, "those": 1, "to": 5, "type": 4, "unprocessed": 1, "until": 1, "used": 1, "valid": 1, "will": 1, "with": 1, "write": 1, "¶": 3 }, "length": 168 }, { "id": "7cc69da0a624eeeaa42a31b0", "doc_id": "eaa389b5a36c8ad46f339295", "title": "http.type HTTP2Config ¶\n \n \n added in\n go1.24.0", "url": "https://pkg.go.dev/http#type HTTP2Config ¶\n \n \n added in\n go1.24.0", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_http2config_¶\n__\n____\n______added_in\n___33.json", "content": "# type http.type HTTP2Config ¶ added in go1.24.0 ``` type HTTP2Config struct { // MaxConcurrentStreams optionally specifies the number of // concurrent streams that a client may have open at a time. // If zero, MaxConcurrentStreams defaults to at least 100. // // This parameter only applies to Servers. MaxConcurrentStreams int // StrictMaxConcurrentRequests controls whether an HTTP/2 server's // concurrency limit should be respected across all connections // to that server. // If true, new requests sent when a connection's concurrency limit // has been exceeded will block until an existing request completes. // If false, an additional connection will be opened if all // existing connections are at their limit. // // This parameter only applies to Transports. StrictMaxConcurrentRequests bool // MaxDecoderHeaderTableSize optionally specifies an upper limit for the // size of the header compression table used for decoding headers sent // by the peer. // A valid value is less than 4MiB. // If zero or invalid, a default value is used. MaxDecoderHeaderTableSize int // MaxEncoderHeaderTableSize optionally specifies an upper limit for the // header compression table used for sending headers to the peer. // A valid value is less than 4MiB. // If zero or invalid, a default value is used. MaxEncoderHeaderTableSize int // MaxReadFrameSize optionally specifies the largest frame // this endpoint is willing to read. // A valid value is between 16KiB and 16MiB, inclusive. // If zero or invalid, a default value is used. MaxReadFrameSize int // MaxReceiveBufferPerConnection is the maximum size of the // flow control window for data received on a connection. // A valid value is at least 64KiB and less than 4MiB. // If invalid, a default value is used. MaxReceiveBufferPerConnection int // MaxReceiveBufferPerStream is the maximum size of // the flow control window for data received on a stream (request). // A valid value is less than 4MiB. // If zero or invalid, a default value is used. MaxReceiveBufferPerStream int // SendPingTimeout is the timeout after which a health check using a ping // frame will be carried out if no frame is received on a connection. // If zero, no health check is performed. SendPingTimeout time.Duration // PingTimeout is the timeout after which a connection will be closed // if a response to a ping is not received. // If zero, a default of 15 seconds is used. PingTimeout time.Duration // WriteByteTimeout is the timeout after which a connection will be // closed if no data can be written to it. The timeout begins when data is // available to write, and is extended whenever any bytes are written. WriteByteTimeout time.Duration // PermitProhibitedCipherSuites, if true, permits the use of // cipher suites prohibited by the HTTP/2 spec. PermitProhibitedCipherSuites bool // CountError, if non-nil, is called on HTTP/2 errors. // It is intended to increment a metric for monitoring. // The errType contains only lowercase letters, digits, and underscores // (a-z, 0-9, _). CountError func(errType string) } ``` HTTP2Config defines HTTP/2 configuration parameters common to both Transport and Server.", "term_freq": { "//": 50, "//pkg": 1, "0-9": 1, "100": 1, "15": 1, "16kib": 1, "16mib": 1, "24": 3, "4mib": 4, "64kib": 1, "a-z": 1, "across": 1, "added": 3, "additional": 1, "after": 3, "all": 2, "an": 5, "and": 5, "any": 1, "applies": 2, "are": 2, "at": 4, "available": 1, "be": 6, "been": 1, "begins": 1, "between": 1, "block": 1, "bool": 2, "both": 1, "by": 2, "bytes": 1, "called": 1, "can": 1, "carried": 1, "check": 2, "cipher": 1, "client": 1, "closed": 2, "common": 1, "completes": 1, "compression": 2, "concurrency": 2, "concurrent": 1, "configuration": 1, "connection": 6, "connections": 2, "contains": 1, "control": 2, "controls": 1, "counterror": 2, "data": 4, "decoding": 1, "default": 6, "defaults": 1, "defines": 1, "dev/http#type": 1, "digits": 1, "duration": 3, "endpoint": 1, "errors": 1, "errtype": 2, "exceeded": 1, "existing": 2, "extended": 1, "false": 1, "flow": 2, "for": 7, "frame": 3, "func": 1, "go": 1, "go-type": 1, "go1": 3, "has": 1, "have": 1, "header": 2, "headers": 2, "health": 2, "http": 2, "http/2": 4, "http2config": 5, "https": 1, "if": 16, "in": 3, "inclusive": 1, "increment": 1, "int": 6, "intended": 1, "invalid": 5, "is": 24, "it": 2, "largest": 1, "least": 2, "less": 4, "letters": 1, "limit": 5, "lowercase": 1, "maxconcurrentstreams": 3, "maxdecoderheadertablesize": 2, "maxencoderheadertablesize": 2, "maximum": 2, "maxreadframesize": 2, "maxreceivebufferperconnection": 2, "maxreceivebufferperstream": 2, "may": 1, "metric": 1, "monitoring": 1, "new": 1, "no": 3, "non-nil": 1, "not": 1, "number": 1, "of": 6, "on": 4, "only": 3, "open": 1, "opened": 1, "optionally": 4, "or": 4, "out": 1, "parameter": 2, "parameters": 1, "peer": 2, "performed": 1, "permitprohibitedciphersuites": 2, "permits": 1, "ping": 2, "pingtimeout": 2, "prohibited": 1, "read": 1, "received": 4, "request": 2, "requests": 1, "respected": 1, "response": 1, "seconds": 1, "sending": 1, "sendpingtimeout": 2, "sent": 2, "server": 3, "servers": 1, "should": 1, "size": 3, "spec": 1, "specifies": 4, "stream": 1, "streams": 1, "strictmaxconcurrentrequests": 2, "string": 1, "struct": 1, "suites": 1, "table": 2, "than": 4, "that": 2, "the": 18, "their": 1, "this": 3, "time": 4, "timeout": 4, "to": 11, "transport": 1, "transports": 1, "true": 2, "type": 4, "underscores": 1, "until": 1, "upper": 2, "use": 1, "used": 8, "using": 1, "valid": 5, "value": 10, "when": 2, "whenever": 1, "whether": 1, "which": 3, "will": 5, "willing": 1, "window": 2, "write": 1, "writebytetimeout": 2, "written": 2, "zero": 7, "¶": 3 }, "length": 495 }, { "id": "80eb5e341b93fa7665760fcd", "doc_id": "55f8f665d9167a08131444fb", "title": "http.type MaxBytesError ¶\n \n \n added in\n go1.19", "url": "https://pkg.go.dev/http#type MaxBytesError ¶\n \n \n added in\n go1.19", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_maxbyteserror_¶\n__\n____\n______added_in\n_38.json", "content": "# type http.type MaxBytesError ¶ added in go1.19 ``` type MaxBytesError struct { Limit int64 } ``` MaxBytesError is returned by MaxBytesReader when its read limit is exceeded.", "term_freq": { "//pkg": 1, "19": 3, "added": 3, "by": 1, "dev/http#type": 1, "exceeded": 1, "go": 1, "go-type": 1, "go1": 3, "http": 2, "https": 1, "in": 3, "int64": 1, "is": 2, "its": 1, "limit": 2, "maxbyteserror": 5, "maxbytesreader": 1, "read": 1, "returned": 1, "struct": 1, "type": 4, "when": 1, "¶": 3 }, "length": 44 }, { "id": "146d3f7ee6462887dcc3cb51", "doc_id": "1158081e3dc0c20e6046a232", "title": "http.type ProtocolError\n deprecated", "url": "https://pkg.go.dev/http#type ProtocolError\n deprecated", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_protocolerror\n____________deprecated_39.json", "content": "# type http.type ProtocolError deprecated ``` type ProtocolError struct { ErrorString string } ``` ProtocolError represents an HTTP protocol error.", "term_freq": { "//pkg": 1, "an": 1, "deprecated": 3, "dev/http#type": 1, "error": 1, "errorstring": 1, "go": 1, "go-type": 1, "http": 3, "https": 1, "protocol": 1, "protocolerror": 5, "represents": 1, "string": 1, "struct": 1, "type": 4 }, "length": 27 }, { "id": "158a4ca42631bdee9b089473", "doc_id": "6e0bf7294be633d4de71ad64", "title": "http.type Protocols ¶\n \n \n added in\n go1.24.0", "url": "https://pkg.go.dev/http#type Protocols ¶\n \n \n added in\n go1.24.0", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_protocols_¶\n__\n____\n______added_in\n_____40.json", "content": "# type http.type Protocols ¶ added in go1.24.0 ``` type Protocols struct { // contains filtered or unexported fields } ``` Protocols is a set of HTTP protocols. The zero value is an empty set of protocols.", "term_freq": { "//": 1, "//pkg": 1, "24": 3, "added": 3, "an": 1, "contains": 1, "dev/http#type": 1, "empty": 1, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "go1": 3, "http": 3, "https": 1, "in": 3, "is": 2, "of": 2, "or": 1, "protocols": 7, "set": 2, "struct": 1, "the": 1, "type": 4, "unexported": 1, "value": 1, "zero": 1, "¶": 3 }, "length": 52 }, { "id": "4a22e9b386af3499dab42fc3", "doc_id": "727a366f7697bb54d5a596f9", "title": "http.type Pusher ¶\n \n \n added in\n go1.8", "url": "https://pkg.go.dev/http#type Pusher ¶\n \n \n added in\n go1.8", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_pusher_¶\n__\n____\n______added_in\n______g_42.json", "content": "# type http.type Pusher ¶ added in go1.8 ``` type Pusher interface { // Push initiates an HTTP/2 server push. This constructs a synthetic // request using the given target and options, serializes that request // into a PUSH_PROMISE frame, then dispatches that request using the // server's request handler. If opts is nil, default options are used. // // The target must either be an absolute path (like \"/path\") or an absolute // URL that contains a valid host and the same scheme as the parent request. // If the target is a path, it will inherit the scheme and host of the // parent request. // // The HTTP/2 spec disallows recursive pushes and cross-authority pushes. // Push may or may not detect these invalid pushes; however, invalid // pushes will be detected and canceled by conforming clients. // // Handlers that wish to push URL X should call Push before sending any // data that may trigger a request for URL X. This avoids a race where the // client issues requests for X before receiving the PUSH_PROMISE for X. // // Push will run in a separate goroutine making the order of arrival // non-deterministic. Any required synchronization needs to be implemented // by the caller. // // Push returns ErrNotSupported if the client has disabled push or if push // is not supported on the underlying connection. Push(target string, opts *PushOptions) error } ``` Pusher is the interface implemented by ResponseWriters that support HTTP/2 server push. For more background, see https://tools.ietf.org/html/rfc7540#section-8.2.", "term_freq": { "*pushoptions": 1, "//": 24, "//pkg": 1, "//tools": 1, "/path": 1, "absolute": 2, "added": 3, "an": 3, "and": 5, "any": 2, "are": 1, "arrival": 1, "as": 1, "avoids": 1, "background": 1, "be": 3, "before": 2, "by": 3, "call": 1, "caller": 1, "canceled": 1, "client": 2, "clients": 1, "conforming": 1, "connection": 1, "constructs": 1, "contains": 1, "cross-authority": 1, "data": 1, "default": 1, "detect": 1, "detected": 1, "dev/http#type": 1, "disabled": 1, "disallows": 1, "dispatches": 1, "either": 1, "errnotsupported": 1, "error": 1, "for": 4, "frame": 1, "given": 1, "go": 1, "go-type": 1, "go1": 3, "goroutine": 1, "handler": 1, "handlers": 1, "has": 1, "host": 2, "however": 1, "http": 2, "http/2": 3, "https": 2, "ietf": 1, "if": 4, "implemented": 2, "in": 4, "inherit": 1, "initiates": 1, "interface": 2, "into": 1, "invalid": 2, "is": 4, "issues": 1, "it": 1, "like": 1, "making": 1, "may": 3, "more": 1, "must": 1, "needs": 1, "nil": 1, "non-deterministic": 1, "not": 2, "of": 2, "on": 1, "options": 2, "opts": 2, "or": 3, "order": 1, "org/html/rfc7540#section-8": 1, "parent": 2, "path": 2, "push": 11, "push_promise": 2, "pusher": 5, "pushes": 4, "race": 1, "receiving": 1, "recursive": 1, "request": 7, "requests": 1, "required": 1, "responsewriters": 1, "returns": 1, "run": 1, "same": 1, "scheme": 2, "see": 1, "sending": 1, "separate": 1, "serializes": 1, "server": 3, "should": 1, "spec": 1, "string": 1, "support": 1, "supported": 1, "synchronization": 1, "synthetic": 1, "target": 4, "that": 6, "the": 16, "then": 1, "these": 1, "this": 2, "to": 2, "trigger": 1, "type": 4, "underlying": 1, "url": 3, "used": 1, "using": 2, "valid": 1, "where": 1, "will": 3, "wish": 1, "¶": 3 }, "length": 262 }, { "id": "c51fa8ba64d8edcb761c23f3", "doc_id": "7aee1cac85f3d68e65fbf34a", "title": "http.type PushOptions ¶\n \n \n added in\n go1.8", "url": "https://pkg.go.dev/http#type PushOptions ¶\n \n \n added in\n go1.8", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_pushoptions_¶\n__\n____\n______added_in\n___41.json", "content": "# type http.type PushOptions ¶ added in go1.8 ``` type PushOptions struct { // Method specifies the HTTP method for the promised request. // If set, it must be \"GET\" or \"HEAD\". Empty means \"GET\". Method string // Header specifies additional promised request headers. This cannot // include HTTP/2 pseudo header fields like \":path\" and \":scheme\", // which will be added automatically. Header Header } ``` PushOptions describes options for [Pusher.Push].", "term_freq": { "//": 5, "//pkg": 1, "added": 4, "additional": 1, "and": 1, "automatically": 1, "be": 2, "cannot": 1, "describes": 1, "dev/http#type": 1, "empty": 1, "fields": 1, "for": 2, "get": 2, "go": 1, "go-type": 1, "go1": 3, "head": 1, "header": 4, "headers": 1, "http": 3, "http/2": 1, "https": 1, "if": 1, "in": 3, "include": 1, "it": 1, "like": 1, "means": 1, "method": 3, "must": 1, "options": 1, "or": 1, "path": 1, "promised": 2, "pseudo": 1, "push": 1, "pusher": 1, "pushoptions": 5, "request": 2, "scheme": 1, "set": 1, "specifies": 2, "string": 1, "struct": 1, "the": 2, "this": 1, "type": 4, "which": 1, "will": 1, "¶": 3 }, "length": 85 }, { "id": "46c8661eb3f6104297390ac4", "doc_id": "2d211c9fb5696932bfab583e", "title": "http.type Request ¶", "url": "https://pkg.go.dev/http#type Request ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_request_¶_43.json", "content": "# type http.type Request ¶ ``` type Request struct { // Method specifies the HTTP method (GET, POST, PUT, etc.). // For client requests, an empty string means GET. Method string // URL specifies either the URI being requested (for server // requests) or the URL to access (for client requests). // // For server requests, the URL is parsed from the URI // supplied on the Request-Line as stored in RequestURI. For // most requests, fields other than Path and RawQuery will be // empty. (See RFC 7230, Section 5.3) // // For client requests, the URL's Host specifies the server to // connect to, while the Request's Host field optionally // specifies the Host header value to send in the HTTP // request. URL *url.URL // The protocol version for incoming server requests. // // For client requests, these fields are ignored. The HTTP // client code always uses either HTTP/1.1 or HTTP/2. // See the docs on Transport for details. Proto string // \"HTTP/1.0\" ProtoMajor int // 1 ProtoMinor int // 0 // Header contains the request header fields either received // by the server or to be sent by the client. // // If a server received a request with header lines, // // Host: example.com // accept-encoding: gzip, deflate // Accept-Language: en-us // fOO: Bar // foo: two // // then // // Header = map[string][]string{ // \"Accept-Encoding\": {\"gzip, deflate\"}, // \"Accept-Language\": {\"en-us\"}, // \"Foo\": {\"Bar\", \"two\"}, // } // // For incoming requests, the Host header is promoted to the // Request.Host field and removed from the Header map. // // HTTP defines that header names are case-insensitive. The // request parser implements this by using CanonicalHeaderKey, // making the first character and any characters following a // hyphen uppercase and the rest lowercase. // // For client requests, certain headers such as Content-Length // and Connection are automatically written when needed and // values in Header may be ignored. See the documentation // for the Request.Write method. Header Header // Body is the request's body. // // For client requests, a nil body means the request has no // body, such as a GET request. The HTTP Client's Transport // is responsible for calling the Close method. // // For server requests, the Request Body is always non-nil // but will return EOF immediately when no body is present. // The Server will close the request body. The ServeHTTP // Handler does not need to. // // Body must allow Read to be called concurrently with Close. // In particular, calling Close should unblock a Read waiting // for input. Body io.ReadCloser // GetBody defines an optional func to return a new copy of // Body. It is used for client requests when a redirect requires // reading the body more than once. Use of GetBody still // requires setting Body. // // For server requests, it is unused. GetBody func() (io.ReadCloser, error) // ContentLength records the length of the associated content. // The value -1 indicates that the length is unknown. // Values \u003e= 0 indicate that the given number of bytes may // be read from Body. // // For client requests, a value of 0 with a non-nil Body is // also treated as unknown. ContentLength int64 // TransferEncoding lists the transfer encodings from outermost to // innermost. An empty list denotes the \"identity\" encoding. // TransferEncoding can usually be ignored; chunked encoding is // automatically added and removed as necessary when sending and // receiving requests. TransferEncoding []string // Close indicates whether to close the connection after // replying to this request (for servers) or after sending this // request and reading its response (for clients). // // For server requests, the HTTP server handles this automatically // and this field is not needed by Handlers. // // For client requests, setting this field prevents re-use of // TCP connections between requests to the same hosts, as if // Transport.DisableKeepAlives were set. Close bool // For server requests, Host specifies the host on which the // URL is sought. For HTTP/1 (per RFC 7230, section 5.4), this // is either the value of the \"Host\" header or the host name // given in the URL itself. For HTTP/2, it is the value of the // \":authority\" pseudo-header field. // It may be of the form \"host:port\". For international domain // names, Host may be in Punycode or Unicode form. Use // golang.org/x/net/idna to convert it to either format if // needed. // To prevent DNS rebinding attacks, server Handlers should // validate that the Host header has a value for which the // Handler considers itself authoritative. The included // ServeMux supports patterns registered to particular host // names and thus protects its registered Handlers. // // For client requests, Host optionally overrides the Host // header to send. If empty, the Request.Write method uses // the value of URL.Host. Host may contain an international // domain name. Host string // Form contains the parsed form data, including both the URL // field's query parameters and the PATCH, POST, or PUT form data. // This field is only available after ParseForm is called. // The HTTP client ignores Form and uses Body instead. Form url.Values // PostForm contains the parsed form data from PATCH, POST // or PUT body parameters. // // This field is only available after ParseForm is called. // The HTTP client ignores PostForm and uses Body instead. PostForm url.Values // MultipartForm is the parsed multipart form, including file uploads. // This field is only available after ParseMultipartForm is called. // The HTTP client ignores MultipartForm and uses Body instead. MultipartForm *multipart.Form // Trailer specifies additional headers that are sent after the request // body. // // For server requests, the Trailer map initially contains only the // trailer keys, with nil values. (The client declares which trailers it // will later send.) While the handler is reading from Body, it must // not reference Trailer. After reading from Body returns EOF, Trailer // can be read again and will contain non-nil values, if they were sent // by the client. // // For client requests, Trailer must be initialized to a map containing // the trailer keys to later send. The values may be nil or their final // values. The ContentLength must be 0 or -1, to send a chunked request. // After the HTTP request is sent the map values can be updated while // the request body is read. Once the body returns EOF, the caller must // not mutate Trailer. // // Few HTTP clients, servers, or proxies support HTTP trailers. Trailer Header // RemoteAddr allows HTTP servers and other software to record // the network address that sent the request, usually for // logging. This field is not filled in by ReadRequest and // has no defined format. The HTTP server in this package // sets RemoteAddr to an \"IP:port\" address before invoking a // handler. // This field is ignored by the HTTP client. RemoteAddr string // RequestURI is the unmodified request-target of the // Request-Line (RFC 7230, Section 3.1.1) as sent by the client // to a server. Usually the URL field should be used instead. // It is an error to set this field in an HTTP client request. RequestURI string // TLS allows HTTP servers and other software to record // information about the TLS connection on which the request // was received. This field is not filled in by ReadRequest. // The HTTP server in this package sets the field for // TLS-enabled connections before invoking a handler; // otherwise it leaves the field nil. // This field is ignored by the HTTP client. TLS *tls.ConnectionState // Cancel is an optional channel whose closure indicates that the client // request should be regarded as canceled. Not all implementations of // RoundTripper may support Cancel. // // For server requests, this field is not applicable. // // Deprecated: Set the Request's context with NewRequestWithContext // instead. If a Request's Cancel field and context are both // set, it is undefined whether Cancel is respected. Cancel \u003c-chan struct{} // Response is the redirect response which caused this request // to be created. This field is only populated during client // redirects. Response *Response // Pattern is the [ServeMux] pattern that matched the request. // It is empty if the request was not matched against a pattern. Pattern string // contains filtered or unexported fields } ``` A Request represents an HTTP request received by a server or to be sent by a client.", "term_freq": { "*multipart": 1, "*response": 1, "*tls": 1, "*url": 1, "-1": 2, "//": 177, "//pkg": 1, "7230": 3, "\u003c-chan": 1, "\u003e=": 1, "about": 1, "accept-encoding": 2, "accept-language": 2, "access": 1, "added": 1, "additional": 1, "address": 2, "after": 8, "again": 1, "against": 1, "all": 1, "allow": 1, "allows": 2, "also": 1, "always": 2, "an": 9, "and": 20, "any": 1, "applicable": 1, "are": 5, "as": 8, "associated": 1, "attacks": 1, "authoritative": 1, "authority": 1, "automatically": 3, "available": 3, "bar": 2, "be": 17, "before": 2, "being": 1, "between": 1, "body": 23, "bool": 1, "both": 2, "but": 1, "by": 12, "bytes": 1, "called": 4, "caller": 1, "calling": 2, "can": 3, "cancel": 5, "canceled": 1, "canonicalheaderkey": 1, "case-insensitive": 1, "caused": 1, "certain": 1, "channel": 1, "character": 1, "characters": 1, "chunked": 2, "client": 26, "clients": 2, "close": 7, "closure": 1, "code": 1, "com": 1, "concurrently": 1, "connect": 1, "connection": 3, "connections": 2, "connectionstate": 1, "considers": 1, "contain": 2, "containing": 1, "contains": 5, "content": 1, "content-length": 1, "contentlength": 3, "context": 2, "convert": 1, "copy": 1, "created": 1, "data": 3, "declares": 1, "defined": 1, "defines": 2, "deflate": 2, "denotes": 1, "deprecated": 1, "details": 1, "dev/http#type": 1, "disablekeepalives": 1, "dns": 1, "docs": 1, "documentation": 1, "does": 1, "domain": 2, "during": 1, "either": 5, "empty": 5, "en-us": 2, "encoding": 2, "encodings": 1, "eof": 3, "error": 2, "etc": 1, "example": 1, "few": 1, "field": 20, "fields": 4, "file": 1, "filled": 2, "filtered": 1, "final": 1, "first": 1, "following": 1, "foo": 3, "for": 34, "form": 10, "format": 2, "from": 7, "func": 2, "get": 3, "getbody": 3, "given": 2, "go": 1, "go-type": 1, "golang": 1, "gzip": 2, "handler": 5, "handlers": 3, "handles": 1, "has": 3, "header": 15, "headers": 2, "host": 19, "hosts": 1, "http": 22, "http/1": 3, "http/2": 2, "https": 1, "hyphen": 1, "identity": 1, "if": 7, "ignored": 5, "ignores": 3, "immediately": 1, "implementations": 1, "implements": 1, "in": 11, "included": 1, "including": 2, "incoming": 2, "indicate": 1, "indicates": 3, "information": 1, "initialized": 1, "initially": 1, "innermost": 1, "input": 1, "instead": 5, "int": 2, "int64": 1, "international": 2, "invoking": 2, "io": 2, "ip": 1, "is": 39, "it": 11, "its": 2, "itself": 2, "keys": 2, "later": 2, "leaves": 1, "length": 2, "lines": 1, "list": 1, "lists": 1, "logging": 1, "lowercase": 1, "making": 1, "map": 5, "matched": 2, "may": 7, "means": 2, "method": 6, "more": 1, "most": 1, "multipart": 1, "multipartform": 3, "must": 5, "mutate": 1, "name": 2, "names": 3, "necessary": 1, "need": 1, "needed": 3, "network": 1, "new": 1, "newrequestwithcontext": 1, "nil": 4, "no": 3, "non-nil": 3, "not": 9, "number": 1, "of": 12, "on": 4, "once": 2, "only": 5, "optional": 2, "optionally": 2, "or": 13, "org/x/net/idna": 1, "other": 3, "otherwise": 1, "outermost": 1, "overrides": 1, "package": 2, "parameters": 2, "parsed": 4, "parseform": 2, "parsemultipartform": 1, "parser": 1, "particular": 2, "patch": 2, "path": 1, "pattern": 4, "patterns": 1, "per": 1, "populated": 1, "port": 2, "post": 3, "postform": 3, "present": 1, "prevent": 1, "prevents": 1, "promoted": 1, "protects": 1, "proto": 1, "protocol": 1, "protomajor": 1, "protominor": 1, "proxies": 1, "pseudo-header": 1, "punycode": 1, "put": 3, "query": 1, "rawquery": 1, "re-use": 1, "read": 5, "readcloser": 2, "reading": 4, "readrequest": 2, "rebinding": 1, "received": 4, "receiving": 1, "record": 2, "records": 1, "redirect": 2, "redirects": 1, "reference": 1, "regarded": 1, "registered": 2, "remoteaddr": 3, "removed": 2, "replying": 1, "represents": 1, "request": 34, "request-line": 2, "request-target": 1, "requested": 1, "requests": 24, "requesturi": 3, "requires": 2, "respected": 1, "response": 4, "responsible": 1, "rest": 1, "return": 2, "returns": 2, "rfc": 3, "roundtripper": 1, "same": 1, "section": 3, "see": 3, "send": 5, "sending": 2, "sent": 7, "servehttp": 1, "servemux": 2, "server": 19, "servers": 4, "set": 4, "sets": 2, "setting": 2, "should": 4, "software": 2, "sought": 1, "specifies": 6, "still": 1, "stored": 1, "string": 10, "struct": 2, "such": 2, "supplied": 1, "support": 2, "supports": 1, "tcp": 1, "than": 2, "that": 8, "the": 101, "their": 1, "then": 1, "these": 1, "they": 1, "this": 20, "thus": 1, "tls": 3, "tls-enabled": 1, "to": 28, "trailer": 9, "trailers": 2, "transfer": 1, "transferencoding": 3, "transport": 3, "treated": 1, "two": 2, "type": 4, "unblock": 1, "undefined": 1, "unexported": 1, "unicode": 1, "unknown": 2, "unmodified": 1, "unused": 1, "updated": 1, "uploads": 1, "uppercase": 1, "uri": 2, "url": 13, "use": 2, "used": 2, "uses": 5, "using": 1, "usually": 3, "validate": 1, "value": 7, "values": 9, "version": 1, "waiting": 1, "was": 2, "were": 2, "when": 4, "whether": 2, "which": 5, "while": 3, "whose": 1, "will": 5, "with": 5, "write": 2, "written": 1, "¶": 3 }, "length": 1430 }, { "id": "d600e469e30f925e6e475b53", "doc_id": "72a399cde441352e0d00dc83", "title": "http.type Response ¶", "url": "https://pkg.go.dev/http#type Response ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_response_¶_44.json", "content": "# type http.type Response ¶ ``` type Response struct { Status string // e.g. \"200 OK\" StatusCode int // e.g. 200 Proto string // e.g. \"HTTP/1.0\" ProtoMajor int // e.g. 1 ProtoMinor int // e.g. 0 // Header maps header keys to values. If the response had multiple // headers with the same key, they may be concatenated, with comma // delimiters. (RFC 7230, section 3.2.2 requires that multiple headers // be semantically equivalent to a comma-delimited sequence.) When // Header values are duplicated by other fields in this struct (e.g., // ContentLength, TransferEncoding, Trailer), the field values are // authoritative. // // Keys in the map are canonicalized (see CanonicalHeaderKey). Header Header // Body represents the response body. // // The response body is streamed on demand as the Body field // is read. If the network connection fails or the server // terminates the response, Body.Read calls return an error. // // The http Client and Transport guarantee that Body is always // non-nil, even on responses without a body or responses with // a zero-length body. It is the caller's responsibility to // close Body. The default HTTP client's Transport may not // reuse HTTP/1.x \"keep-alive\" TCP connections if the Body is // not read to completion and closed. // // The Body is automatically dechunked if the server replied // with a \"chunked\" Transfer-Encoding. // // As of Go 1.12, the Body will also implement io.Writer // on a successful \"101 Switching Protocols\" response, // as used by WebSockets and HTTP/2's \"h2c\" mode. Body io.ReadCloser // ContentLength records the length of the associated content. The // value -1 indicates that the length is unknown. Unless Request.Method // is \"HEAD\", values \u003e= 0 indicate that the given number of bytes may // be read from Body. ContentLength int64 // Contains transfer encodings from outer-most to inner-most. Value is // nil, means that \"identity\" encoding is used. TransferEncoding []string // Close records whether the header directed that the connection be // closed after reading Body. The value is advice for clients: neither // ReadResponse nor Response.Write ever closes a connection. Close bool // Uncompressed reports whether the response was sent compressed but // was decompressed by the http package. When true, reading from // Body yields the uncompressed content instead of the compressed // content actually set from the server, ContentLength is set to -1, // and the \"Content-Length\" and \"Content-Encoding\" fields are deleted // from the responseHeader. To get the original response from // the server, set Transport.DisableCompression to true. Uncompressed bool // Trailer maps trailer keys to values in the same // format as Header. // // The Trailer initially contains only nil values, one for // each key specified in the server's \"Trailer\" header // value. Those values are not added to Header. // // Trailer must not be accessed concurrently with Read calls // on the Body. // // After Body.Read has returned io.EOF, Trailer will contain // any trailer values sent by the server. Trailer Header // Request is the request that was sent to obtain this Response. // Request's Body is nil (having already been consumed). // This is only populated for Client requests. Request *Request // TLS contains information about the TLS connection on which the // response was received. It is nil for unencrypted responses. // The pointer is shared between responses and should not be // modified. TLS *tls.ConnectionState } ``` Response represents the response from an HTTP request.", "term_freq": { "*request": 1, "*tls": 1, "-1": 2, "//": 68, "//pkg": 1, "101": 1, "12": 1, "200": 2, "7230": 1, "\u003e=": 1, "about": 1, "accessed": 1, "actually": 1, "added": 1, "advice": 1, "after": 2, "already": 1, "also": 1, "always": 1, "an": 2, "and": 6, "any": 1, "are": 5, "as": 4, "associated": 1, "authoritative": 1, "automatically": 1, "be": 6, "been": 1, "between": 1, "body": 19, "bool": 2, "but": 1, "by": 4, "bytes": 1, "caller": 1, "calls": 2, "canonicalheaderkey": 1, "canonicalized": 1, "chunked": 1, "client": 3, "clients": 1, "close": 3, "closed": 2, "closes": 1, "comma": 1, "comma-delimited": 1, "completion": 1, "compressed": 2, "concatenated": 1, "concurrently": 1, "connection": 4, "connections": 1, "connectionstate": 1, "consumed": 1, "contain": 1, "contains": 3, "content": 3, "content-encoding": 1, "content-length": 1, "contentlength": 4, "dechunked": 1, "decompressed": 1, "default": 1, "deleted": 1, "delimiters": 1, "demand": 1, "dev/http#type": 1, "directed": 1, "disablecompression": 1, "duplicated": 1, "each": 1, "encoding": 1, "encodings": 1, "eof": 1, "equivalent": 1, "error": 1, "even": 1, "ever": 1, "fails": 1, "field": 2, "fields": 2, "for": 4, "format": 1, "from": 7, "get": 1, "given": 1, "go": 2, "go-type": 1, "guarantee": 1, "h2c": 1, "had": 1, "has": 1, "having": 1, "head": 1, "header": 10, "headers": 2, "http": 6, "http/1": 2, "http/2": 1, "https": 1, "identity": 1, "if": 4, "implement": 1, "in": 4, "indicate": 1, "indicates": 1, "information": 1, "initially": 1, "inner-most": 1, "instead": 1, "int": 3, "int64": 1, "io": 3, "is": 17, "it": 2, "keep-alive": 1, "key": 2, "keys": 3, "length": 2, "map": 1, "maps": 2, "may": 3, "means": 1, "method": 1, "mode": 1, "modified": 1, "multiple": 2, "must": 1, "neither": 1, "network": 1, "nil": 4, "non-nil": 1, "nor": 1, "not": 5, "number": 1, "obtain": 1, "of": 4, "ok": 1, "on": 5, "one": 1, "only": 2, "or": 2, "original": 1, "other": 1, "outer-most": 1, "package": 1, "pointer": 1, "populated": 1, "proto": 1, "protocols": 1, "protomajor": 1, "protominor": 1, "read": 6, "readcloser": 1, "reading": 2, "readresponse": 1, "received": 1, "records": 2, "replied": 1, "reports": 1, "represents": 2, "request": 6, "requests": 1, "requires": 1, "response": 16, "responseheader": 1, "responses": 4, "responsibility": 1, "return": 1, "returned": 1, "reuse": 1, "rfc": 1, "same": 2, "section": 1, "see": 1, "semantically": 1, "sent": 3, "sequence": 1, "server": 6, "set": 3, "shared": 1, "should": 1, "specified": 1, "status": 1, "statuscode": 1, "streamed": 1, "string": 3, "struct": 2, "successful": 1, "switching": 1, "tcp": 1, "terminates": 1, "that": 7, "the": 44, "they": 1, "this": 3, "those": 1, "tls": 3, "to": 11, "trailer": 9, "transfer": 1, "transfer-encoding": 1, "transferencoding": 2, "transport": 3, "true": 2, "type": 4, "uncompressed": 3, "unencrypted": 1, "unknown": 1, "unless": 1, "used": 2, "value": 4, "values": 8, "was": 4, "websockets": 1, "when": 2, "whether": 2, "which": 1, "will": 2, "with": 5, "without": 1, "write": 1, "writer": 1, "yields": 1, "zero-length": 1, "¶": 3 }, "length": 580 }, { "id": "29a923f458d9b2505b52811d", "doc_id": "bb46edb5d76b53fb20982084", "title": "http.type ResponseController ¶\n \n \n added in\n go1.20", "url": "https://pkg.go.dev/http#type ResponseController ¶\n \n \n added in\n go1.20", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_responsecontroller_¶\n__\n____\n______adde_45.json", "content": "# type http.type ResponseController ¶ added in go1.20 ``` type ResponseController struct { // contains filtered or unexported fields } ``` A ResponseController is used by an HTTP handler to control the response.", "term_freq": { "//": 1, "//pkg": 1, "20": 3, "added": 3, "an": 1, "by": 1, "contains": 1, "control": 1, "dev/http#type": 1, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "go1": 3, "handler": 1, "http": 3, "https": 1, "in": 3, "is": 1, "or": 1, "response": 1, "responsecontroller": 5, "struct": 1, "the": 1, "to": 1, "type": 4, "unexported": 1, "used": 1, "¶": 3 }, "length": 48 }, { "id": "70a3c466ba79f97bb74e2738", "doc_id": "38daa09938ee5138c4c2f46c", "title": "http.type ResponseWriter ¶", "url": "https://pkg.go.dev/http#type ResponseWriter ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_responsewriter_¶_46.json", "content": "# type http.type ResponseWriter ¶ ``` type ResponseWriter interface { // Header returns the header map that will be sent by // [ResponseWriter.WriteHeader]. The [Header] map also is the mechanism with which // [Handler] implementations can set HTTP trailers. // // Changing the header map after a call to [ResponseWriter.WriteHeader] (or // [ResponseWriter.Write]) has no effect unless the HTTP status code was of the // 1xx class or the modified headers are trailers. // // There are two ways to set Trailers. The preferred way is to // predeclare in the headers which trailers you will later // send by setting the \"Trailer\" header to the names of the // trailer keys which will come later. In this case, those // keys of the Header map are treated as if they were // trailers. See the example. The second way, for trailer // keys not known to the [Handler] until after the first [ResponseWriter.Write], // is to prefix the [Header] map keys with the [TrailerPrefix] // constant value. // // To suppress automatic response headers (such as \"Date\"), set // their value to nil. Header() Header // Write writes the data to the connection as part of an HTTP reply. // // If [ResponseWriter.WriteHeader] has not yet been called, Write calls // WriteHeader(http.StatusOK) before writing the data. If the Header // does not contain a Content-Type line, Write adds a Content-Type set // to the result of passing the initial 512 bytes of written data to // [DetectContentType]. Additionally, if the total size of all written // data is under a few KB and there are no Flush calls, the // Content-Length header is added automatically. // // Depending on the HTTP protocol version and the client, calling // Write or WriteHeader may prevent future reads on the // Request.Body. For HTTP/1.x requests, handlers should read any // needed request body data before writing the response. Once the // headers have been flushed (due to either an explicit Flusher.Flush // call or writing enough data to trigger a flush), the request body // may be unavailable. For HTTP/2 requests, the Go HTTP server permits // handlers to continue to read the request body while concurrently // writing the response. However, such behavior may not be supported // by all HTTP/2 clients. Handlers should read before writing if // possible to maximize compatibility. Write([]byte) (int, error) // WriteHeader sends an HTTP response header with the provided // status code. // // If WriteHeader is not called explicitly, the first call to Write // will trigger an implicit WriteHeader(http.StatusOK). // Thus explicit calls to WriteHeader are mainly used to // send error codes or 1xx informational responses. // // The provided code must be a valid HTTP 1xx-5xx status code. // Any number of 1xx headers may be written, followed by at most // one 2xx-5xx header. 1xx headers are sent immediately, but 2xx-5xx // headers may be buffered. Use the Flusher interface to send // buffered data. The header map is cleared when 2xx-5xx headers are // sent, but not with 1xx headers. // // The server will automatically send a 100 (Continue) header // on the first read from the request body if the request has // an \"Expect: 100-continue\" header. WriteHeader(statusCode int) } ``` A ResponseWriter interface is used by an HTTP handler to construct an HTTP response.", "term_freq": { "//": 59, "//pkg": 1, "100": 1, "100-continue": 1, "1xx": 5, "1xx-5xx": 1, "2xx-5xx": 3, "512": 1, "added": 1, "additionally": 1, "adds": 1, "after": 2, "all": 2, "also": 1, "an": 7, "and": 2, "any": 2, "are": 7, "as": 3, "at": 1, "automatic": 1, "automatically": 2, "be": 6, "been": 2, "before": 3, "behavior": 1, "body": 5, "buffered": 2, "but": 2, "by": 5, "byte": 1, "bytes": 1, "call": 3, "called": 2, "calling": 1, "calls": 3, "can": 1, "case": 1, "changing": 1, "class": 1, "cleared": 1, "client": 1, "clients": 1, "code": 4, "codes": 1, "come": 1, "compatibility": 1, "concurrently": 1, "connection": 1, "constant": 1, "construct": 1, "contain": 1, "content-length": 1, "content-type": 2, "continue": 2, "data": 7, "date": 1, "depending": 1, "detectcontenttype": 1, "dev/http#type": 1, "does": 1, "due": 1, "effect": 1, "either": 1, "enough": 1, "error": 2, "example": 1, "expect": 1, "explicit": 2, "explicitly": 1, "few": 1, "first": 3, "flush": 3, "flushed": 1, "flusher": 2, "followed": 1, "for": 3, "from": 1, "future": 1, "go": 2, "go-type": 1, "handler": 3, "handlers": 3, "has": 3, "have": 1, "header": 16, "headers": 9, "however": 1, "http": 13, "http/1": 1, "http/2": 2, "https": 1, "if": 7, "immediately": 1, "implementations": 1, "implicit": 1, "in": 2, "informational": 1, "initial": 1, "int": 2, "interface": 3, "is": 8, "kb": 1, "keys": 4, "known": 1, "later": 2, "line": 1, "mainly": 1, "map": 6, "maximize": 1, "may": 5, "mechanism": 1, "modified": 1, "most": 1, "must": 1, "names": 1, "needed": 1, "nil": 1, "no": 2, "not": 6, "number": 1, "of": 8, "on": 3, "once": 1, "one": 1, "or": 5, "part": 1, "passing": 1, "permits": 1, "possible": 1, "predeclare": 1, "preferred": 1, "prefix": 1, "prevent": 1, "protocol": 1, "provided": 2, "read": 4, "reads": 1, "reply": 1, "request": 6, "requests": 2, "response": 5, "responses": 1, "responsewriter": 10, "result": 1, "returns": 1, "second": 1, "see": 1, "send": 4, "sends": 1, "sent": 3, "server": 2, "set": 4, "setting": 1, "should": 2, "size": 1, "status": 3, "statuscode": 1, "statusok": 2, "such": 2, "supported": 1, "suppress": 1, "that": 1, "the": 45, "their": 1, "there": 2, "they": 1, "this": 1, "those": 1, "thus": 1, "to": 21, "total": 1, "trailer": 3, "trailerprefix": 1, "trailers": 5, "treated": 1, "trigger": 2, "two": 1, "type": 4, "unavailable": 1, "under": 1, "unless": 1, "until": 1, "use": 1, "used": 2, "valid": 1, "value": 2, "version": 1, "was": 1, "way": 2, "ways": 1, "were": 1, "when": 1, "which": 3, "while": 1, "will": 5, "with": 4, "write": 8, "writeheader": 10, "writes": 1, "writing": 5, "written": 3, "yet": 1, "you": 1, "¶": 3 }, "length": 571 }, { "id": "29f0e465964d6e63a7410a43", "doc_id": "59a67309b3f0a7768121140b", "title": "http.type RoundTripper ¶", "url": "https://pkg.go.dev/http#type RoundTripper ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_roundtripper_¶_47.json", "content": "# type http.type RoundTripper ¶ ``` type RoundTripper interface { // RoundTrip executes a single HTTP transaction, returning // a Response for the provided Request. // // RoundTrip should not attempt to interpret the response. In // particular, RoundTrip must return err == nil if it obtained // a response, regardless of the response's HTTP status code. // A non-nil err should be reserved for failure to obtain a // response. Similarly, RoundTrip should not attempt to // handle higher-level protocol details such as redirects, // authentication, or cookies. // // RoundTrip should not modify the request, except for // consuming and closing the Request's Body. RoundTrip may // read fields of the request in a separate goroutine. Callers // should not mutate or reuse the request until the Response's // Body has been closed. // // RoundTrip must always close the body, including on errors, // but depending on the implementation may do so in a separate // goroutine even after RoundTrip returns. This means that // callers wanting to reuse the body for subsequent requests // must arrange to wait for the Close call before doing so. // // The Request's URL and Header fields must be initialized. RoundTrip(*Request) (*Response, error) } ``` RoundTripper is an interface representing the ability to execute a single HTTP transaction, obtaining the Response for a given Request.", "term_freq": { "*request": 1, "*response": 1, "//": 24, "//pkg": 1, "==": 1, "ability": 1, "after": 1, "always": 1, "an": 1, "and": 2, "arrange": 1, "as": 1, "attempt": 2, "authentication": 1, "be": 2, "been": 1, "before": 1, "body": 4, "but": 1, "call": 1, "callers": 2, "close": 2, "closed": 1, "closing": 1, "code": 1, "consuming": 1, "cookies": 1, "depending": 1, "details": 1, "dev/http#type": 1, "do": 1, "doing": 1, "err": 2, "error": 1, "errors": 1, "even": 1, "except": 1, "execute": 1, "executes": 1, "failure": 1, "fields": 2, "for": 6, "given": 1, "go": 1, "go-type": 1, "goroutine": 2, "handle": 1, "has": 1, "header": 1, "higher-level": 1, "http": 5, "https": 1, "if": 1, "implementation": 1, "in": 3, "including": 1, "initialized": 1, "interface": 2, "interpret": 1, "is": 1, "it": 1, "may": 2, "means": 1, "modify": 1, "must": 4, "mutate": 1, "nil": 1, "non-nil": 1, "not": 4, "obtain": 1, "obtained": 1, "obtaining": 1, "of": 2, "on": 2, "or": 2, "particular": 1, "protocol": 1, "provided": 1, "read": 1, "redirects": 1, "regardless": 1, "representing": 1, "request": 7, "requests": 1, "reserved": 1, "response": 7, "return": 1, "returning": 1, "returns": 1, "reuse": 2, "roundtrip": 9, "roundtripper": 5, "separate": 2, "should": 5, "similarly": 1, "single": 2, "so": 2, "status": 1, "subsequent": 1, "such": 1, "that": 1, "the": 15, "this": 1, "to": 6, "transaction": 2, "type": 4, "until": 1, "url": 1, "wait": 1, "wanting": 1, "¶": 3 }, "length": 224 }, { "id": "6578882b070197f62c212072", "doc_id": "6e17e053f41676cfb2e05afe", "title": "http.type SameSite ¶\n \n \n added in\n go1.11", "url": "https://pkg.go.dev/http#type SameSite ¶\n \n \n added in\n go1.11", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_samesite_¶\n__\n____\n______added_in\n______48.json", "content": "# type http.type SameSite ¶ added in go1.11 ``` type SameSite int ``` SameSite allows a server to define a cookie attribute making it impossible for the browser to send this cookie along with cross-site requests. The main goal is to mitigate the risk of cross-origin information leakage, and provide some protection against cross-site request forgery attacks.", "term_freq": { "//pkg": 1, "11": 3, "added": 3, "against": 1, "allows": 1, "along": 1, "and": 1, "attacks": 1, "attribute": 1, "browser": 1, "cookie": 2, "cross-origin": 1, "cross-site": 2, "define": 1, "dev/http#type": 1, "for": 1, "forgery": 1, "go": 1, "go-type": 1, "go1": 3, "goal": 1, "http": 2, "https": 1, "impossible": 1, "in": 3, "information": 1, "int": 1, "is": 1, "it": 1, "leakage": 1, "main": 1, "making": 1, "mitigate": 1, "of": 1, "protection": 1, "provide": 1, "request": 1, "requests": 1, "risk": 1, "samesite": 5, "send": 1, "server": 1, "some": 1, "the": 3, "this": 1, "to": 3, "type": 4, "with": 1, "¶": 3 }, "length": 73 }, { "id": "ece94b260b891ad302e419c2", "doc_id": "b859d57fe3d630fbffa1fc40", "title": "http.type ServeMux ¶", "url": "https://pkg.go.dev/http#type ServeMux ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_servemux_¶_49.json", "content": "# type http.type ServeMux ¶ ``` type ServeMux struct { // contains filtered or unexported fields } ``` ServeMux is an HTTP request multiplexer. It matches the URL of each incoming request against a list of registered patterns and calls the handler for the pattern that most closely matches the URL.", "term_freq": { "//": 1, "//pkg": 1, "against": 1, "an": 1, "and": 1, "calls": 1, "closely": 1, "contains": 1, "dev/http#type": 1, "each": 1, "fields": 1, "filtered": 1, "for": 1, "go": 1, "go-type": 1, "handler": 1, "http": 3, "https": 1, "incoming": 1, "is": 1, "it": 1, "list": 1, "matches": 2, "most": 1, "multiplexer": 1, "of": 2, "or": 1, "pattern": 1, "patterns": 1, "registered": 1, "request": 2, "servemux": 5, "struct": 1, "that": 1, "the": 4, "type": 4, "unexported": 1, "url": 2, "¶": 3 }, "length": 57 }, { "id": "34cf57d47435b797991b97af", "doc_id": "1db050f4dd2d2ca647d3be78", "title": "http.type Server ¶", "url": "https://pkg.go.dev/http#type Server ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_server_¶_50.json", "content": "# type http.type Server ¶ ``` type Server struct { // Addr optionally specifies the TCP address for the server to listen on, // in the form \"host:port\". If empty, \":http\" (port 80) is used. // The service names are defined in RFC 6335 and assigned by IANA. // See net.Dial for details of the address format. Addr string Handler Handler // handler to invoke, http.DefaultServeMux if nil // DisableGeneralOptionsHandler, if true, passes \"OPTIONS *\" requests to the Handler, // otherwise responds with 200 OK and Content-Length: 0. DisableGeneralOptionsHandler bool // TLSConfig optionally provides a TLS configuration for use // by ServeTLS and ListenAndServeTLS. Note that this value is // cloned by ServeTLS and ListenAndServeTLS, so it's not // possible to modify the configuration with methods like // tls.Config.SetSessionTicketKeys. To use // SetSessionTicketKeys, use Server.Serve with a TLS Listener // instead. TLSConfig *tls.Config // ReadTimeout is the maximum duration for reading the entire // request, including the body. A zero or negative value means // there will be no timeout. // // Because ReadTimeout does not let Handlers make per-request // decisions on each request body's acceptable deadline or // upload rate, most users will prefer to use // ReadHeaderTimeout. It is valid to use them both. ReadTimeout time.Duration // ReadHeaderTimeout is the amount of time allowed to read // request headers. The connection's read deadline is reset // after reading the headers and the Handler can decide what // is considered too slow for the body. If zero, the value of // ReadTimeout is used. If negative, or if zero and ReadTimeout // is zero or negative, there is no timeout. ReadHeaderTimeout time.Duration // WriteTimeout is the maximum duration before timing out // writes of the response. It is reset whenever a new // request's header is read. Like ReadTimeout, it does not // let Handlers make decisions on a per-request basis. // A zero or negative value means there will be no timeout. WriteTimeout time.Duration // IdleTimeout is the maximum amount of time to wait for the // next request when keep-alives are enabled. If zero, the value // of ReadTimeout is used. If negative, or if zero and ReadTimeout // is zero or negative, there is no timeout. IdleTimeout time.Duration // MaxHeaderBytes controls the maximum number of bytes the // server will read parsing the request header's keys and // values, including the request line. It does not limit the // size of the request body. // If zero, DefaultMaxHeaderBytes is used. MaxHeaderBytes int // TLSNextProto optionally specifies a function to take over // ownership of the provided TLS connection when an ALPN // protocol upgrade has occurred. The map key is the protocol // name negotiated. The Handler argument should be used to // handle HTTP requests and will initialize the Request's TLS // and RemoteAddr if not already set. The connection is // automatically closed when the function returns. // If TLSNextProto is not nil, HTTP/2 support is not enabled // automatically. // // Historically, TLSNextProto was used to disable HTTP/2 support. // The Server.Protocols field now provides a simpler way to do this. TLSNextProto map[string]func(*Server, *tls.Conn, Handler) // ConnState specifies an optional callback function that is // called when a client connection changes state. See the // ConnState type and associated constants for details. ConnState func(net.Conn, ConnState) // ErrorLog specifies an optional logger for errors accepting // connections, unexpected behavior from handlers, and // underlying FileSystem errors. // If nil, logging is done via the log package's standard logger. ErrorLog *log.Logger // BaseContext optionally specifies a function that returns // the base context for incoming requests on this server. // The provided Listener is the specific Listener that's // about to start accepting requests. // If BaseContext is nil, the default is context.Background(). // If non-nil, it must return a non-nil context. BaseContext func(net.Listener) context.Context // ConnContext optionally specifies a function that modifies // the context used for a new connection c. The provided ctx // is derived from the base context and has a ServerContextKey // value. ConnContext func(ctx context.Context, c net.Conn) context.Context // HTTP2 configures HTTP/2 connections. HTTP2 *HTTP2Config // Protocols is the set of protocols accepted by the server. // // If Protocols includes UnencryptedHTTP2, the server will accept // unencrypted HTTP/2 connections. The server can serve both // HTTP/1 and unencrypted HTTP/2 on the same address and port. // // If Protocols is nil, the default is usually HTTP/1 and HTTP/2. // If TLSNextProto is non-nil and does not contain an \"h2\" entry, // the default is HTTP/1 only. Protocols *Protocols // contains filtered or unexported fields } ``` A Server defines parameters for running an HTTP server. The zero value for Server is a valid configuration.", "term_freq": { "*http2config": 1, "*log": 1, "*protocols": 1, "*server": 1, "*tls": 2, "//": 82, "//pkg": 1, "200": 1, "6335": 1, "80": 1, "about": 1, "accept": 1, "acceptable": 1, "accepted": 1, "accepting": 2, "addr": 2, "address": 3, "after": 1, "allowed": 1, "alpn": 1, "already": 1, "amount": 2, "an": 5, "and": 17, "are": 2, "argument": 1, "assigned": 1, "associated": 1, "automatically": 2, "background": 1, "base": 2, "basecontext": 3, "basis": 1, "be": 3, "because": 1, "before": 1, "behavior": 1, "body": 4, "bool": 1, "both": 2, "by": 4, "bytes": 1, "callback": 1, "called": 1, "can": 2, "changes": 1, "client": 1, "cloned": 1, "closed": 1, "config": 2, "configuration": 3, "configures": 1, "conn": 3, "conncontext": 2, "connection": 5, "connections": 3, "connstate": 4, "considered": 1, "constants": 1, "contain": 1, "contains": 1, "content-length": 1, "context": 11, "controls": 1, "ctx": 2, "deadline": 2, "decide": 1, "decisions": 2, "default": 3, "defaultmaxheaderbytes": 1, "defaultservemux": 1, "defined": 1, "defines": 1, "derived": 1, "details": 2, "dev/http#type": 1, "dial": 1, "disable": 1, "disablegeneraloptionshandler": 2, "do": 1, "does": 4, "done": 1, "duration": 6, "each": 1, "empty": 1, "enabled": 2, "entire": 1, "entry": 1, "errorlog": 2, "errors": 2, "field": 1, "fields": 1, "filesystem": 1, "filtered": 1, "for": 12, "form": 1, "format": 1, "from": 2, "func": 4, "function": 5, "go": 1, "go-type": 1, "h2": 1, "handle": 1, "handler": 7, "handlers": 3, "has": 2, "header": 2, "headers": 2, "historically": 1, "host": 1, "http": 6, "http/1": 3, "http/2": 6, "http2": 2, "https": 1, "iana": 1, "idletimeout": 2, "if": 18, "in": 2, "includes": 1, "including": 2, "incoming": 1, "initialize": 1, "instead": 1, "int": 1, "invoke": 1, "is": 34, "it": 6, "keep-alives": 1, "key": 1, "keys": 1, "let": 2, "like": 2, "limit": 1, "line": 1, "listen": 1, "listenandservetls": 2, "listener": 4, "log": 1, "logger": 3, "logging": 1, "make": 2, "map": 2, "maxheaderbytes": 2, "maximum": 4, "means": 2, "methods": 1, "modifies": 1, "modify": 1, "most": 1, "must": 1, "name": 1, "names": 1, "negative": 6, "negotiated": 1, "net": 4, "new": 2, "next": 1, "nil": 5, "no": 4, "non-nil": 3, "not": 8, "note": 1, "now": 1, "number": 1, "occurred": 1, "of": 10, "ok": 1, "on": 5, "only": 1, "optional": 2, "optionally": 5, "options": 1, "or": 8, "otherwise": 1, "out": 1, "over": 1, "ownership": 1, "package": 1, "parameters": 1, "parsing": 1, "passes": 1, "per-request": 2, "port": 3, "possible": 1, "prefer": 1, "protocol": 2, "protocols": 6, "provided": 3, "provides": 2, "rate": 1, "read": 4, "readheadertimeout": 3, "reading": 2, "readtimeout": 8, "remoteaddr": 1, "request": 9, "requests": 4, "reset": 2, "responds": 1, "response": 1, "return": 1, "returns": 2, "rfc": 1, "running": 1, "same": 1, "see": 2, "serve": 2, "server": 15, "servercontextkey": 1, "servetls": 2, "service": 1, "set": 2, "setsessionticketkeys": 2, "should": 1, "simpler": 1, "size": 1, "slow": 1, "so": 1, "specific": 1, "specifies": 6, "standard": 1, "start": 1, "state": 1, "string": 2, "struct": 1, "support": 2, "take": 1, "tcp": 1, "that": 5, "the": 52, "them": 1, "there": 4, "this": 3, "time": 6, "timeout": 4, "timing": 1, "tls": 5, "tlsconfig": 2, "tlsnextproto": 5, "to": 14, "too": 1, "true": 1, "type": 5, "underlying": 1, "unencrypted": 2, "unencryptedhttp2": 1, "unexpected": 1, "unexported": 1, "upgrade": 1, "upload": 1, "use": 5, "used": 7, "users": 1, "usually": 1, "valid": 2, "value": 7, "values": 1, "via": 1, "wait": 1, "was": 1, "way": 1, "what": 1, "when": 4, "whenever": 1, "will": 6, "with": 3, "writes": 1, "writetimeout": 2, "zero": 10, "¶": 3 }, "length": 801 }, { "id": "ff71278c5625141e347b7b57", "doc_id": "1ed47333cf4ac64520a15b12", "title": "http.type Transport ¶", "url": "https://pkg.go.dev/http#type Transport ¶", "type": "go-type", "source": "http", "path": "devour_data/docs/http_type_transport_¶_51.json", "content": "# type http.type Transport ¶ ``` type Transport struct { // Proxy specifies a function to return a proxy for a given // Request. If the function returns a non-nil error, the // request is aborted with the provided error. // // The proxy type is determined by the URL scheme. \"http\", // \"https\", \"socks5\", and \"socks5h\" are supported. If the scheme is empty, // \"http\" is assumed. // \"socks5\" is treated the same as \"socks5h\". // // If the proxy URL contains a userinfo subcomponent, // the proxy request will pass the username and password // in a Proxy-Authorization header. // // If Proxy is nil or returns a nil *URL, no proxy is used. Proxy func(*Request) (*url.URL, error) // OnProxyConnectResponse is called when the Transport gets an HTTP response from // a proxy for a CONNECT request. It's called before the check for a 200 OK response. // If it returns an error, the request fails with that error. OnProxyConnectResponse func(ctx context.Context, proxyURL *url.URL, connectReq *Request, connectRes *Response) error // DialContext specifies the dial function for creating unencrypted TCP connections. // If DialContext is nil (and the deprecated Dial below is also nil), // then the transport dials using package net. // // DialContext runs concurrently with calls to RoundTrip. // A RoundTrip call that initiates a dial may end up using // a connection dialed previously when the earlier connection // becomes idle before the later DialContext completes. DialContext func(ctx context.Context, network, addr string) (net.Conn, error) // Dial specifies the dial function for creating unencrypted TCP connections. // // Dial runs concurrently with calls to RoundTrip. // A RoundTrip call that initiates a dial may end up using // a connection dialed previously when the earlier connection // becomes idle before the later Dial completes. // // Deprecated: Use DialContext instead, which allows the transport // to cancel dials as soon as they are no longer needed. // If both are set, DialContext takes priority. Dial func(network, addr string) (net.Conn, error) // DialTLSContext specifies an optional dial function for creating // TLS connections for non-proxied HTTPS requests. // // If DialTLSContext is nil (and the deprecated DialTLS below is also nil), // DialContext and TLSClientConfig are used. // // If DialTLSContext is set, the Dial and DialContext hooks are not used for HTTPS // requests and the TLSClientConfig and TLSHandshakeTimeout // are ignored. The returned net.Conn is assumed to already be // past the TLS handshake. DialTLSContext func(ctx context.Context, network, addr string) (net.Conn, error) // DialTLS specifies an optional dial function for creating // TLS connections for non-proxied HTTPS requests. // // Deprecated: Use DialTLSContext instead, which allows the transport // to cancel dials as soon as they are no longer needed. // If both are set, DialTLSContext takes priority. DialTLS func(network, addr string) (net.Conn, error) // TLSClientConfig specifies the TLS configuration to use with // tls.Client. // If nil, the default configuration is used. // If non-nil, HTTP/2 support may not be enabled by default. TLSClientConfig *tls.Config // TLSHandshakeTimeout specifies the maximum amount of time to // wait for a TLS handshake. Zero means no timeout. TLSHandshakeTimeout time.Duration // DisableKeepAlives, if true, disables HTTP keep-alives and // will only use the connection to the server for a single // HTTP request. // // This is unrelated to the similarly named TCP keep-alives. DisableKeepAlives bool // DisableCompression, if true, prevents the Transport from // requesting compression with an \"Accept-Encoding: gzip\" // request header when the Request contains no existing // Accept-Encoding value. If the Transport requests gzip on // its own and gets a gzipped response, it's transparently // decoded in the Response.Body. However, if the user // explicitly requested gzip it is not automatically // uncompressed. DisableCompression bool // MaxIdleConns controls the maximum number of idle (keep-alive) // connections across all hosts. Zero means no limit. MaxIdleConns int // MaxIdleConnsPerHost, if non-zero, controls the maximum idle // (keep-alive) connections to keep per-host. If zero, // DefaultMaxIdleConnsPerHost is used. MaxIdleConnsPerHost int // MaxConnsPerHost optionally limits the total number of // connections per host, including connections in the dialing, // active, and idle states. On limit violation, dials will block. // // Zero means no limit. MaxConnsPerHost int // IdleConnTimeout is the maximum amount of time an idle // (keep-alive) connection will remain idle before closing // itself. // Zero means no limit. IdleConnTimeout time.Duration // ResponseHeaderTimeout, if non-zero, specifies the amount of // time to wait for a server's response headers after fully // writing the request (including its body, if any). This // time does not include the time to read the response body. ResponseHeaderTimeout time.Duration // ExpectContinueTimeout, if non-zero, specifies the amount of // time to wait for a server's first response headers after fully // writing the request headers if the request has an // \"Expect: 100-continue\" header. Zero means no timeout and // causes the body to be sent immediately, without // waiting for the server to approve. // This time does not include the time to send the request header. ExpectContinueTimeout time.Duration // TLSNextProto specifies how the Transport switches to an // alternate protocol (such as HTTP/2) after a TLS ALPN // protocol negotiation. If Transport dials a TLS connection // with a non-empty protocol name and TLSNextProto contains a // map entry for that key (such as \"h2\"), then the func is // called with the request's authority (such as \"example.com\" // or \"example.com:1234\") and the TLS connection. The function // must return a RoundTripper that then handles the request. // If TLSNextProto is not nil, HTTP/2 support is not enabled // automatically. // // Historically, TLSNextProto was used to disable HTTP/2 support. // The Transport.Protocols field now provides a simpler way to do this. TLSNextProto map[string]func(authority string, c *tls.Conn) RoundTripper // ProxyConnectHeader optionally specifies headers to send to // proxies during CONNECT requests. // To set the header dynamically, see GetProxyConnectHeader. ProxyConnectHeader Header // GetProxyConnectHeader optionally specifies a func to return // headers to send to proxyURL during a CONNECT request to the // ip:port target. // If it returns an error, the Transport's RoundTrip fails with // that error. It can return (nil, nil) to not add headers. // If GetProxyConnectHeader is non-nil, ProxyConnectHeader is // ignored. GetProxyConnectHeader func(ctx context.Context, proxyURL *url.URL, target string) (Header, error) // MaxResponseHeaderBytes specifies a limit on how many // response bytes are allowed in the server's response // header. // // Zero means to use a default limit. MaxResponseHeaderBytes int64 // WriteBufferSize specifies the size of the write buffer used // when writing to the transport. // If zero, a default (currently 4KB) is used. WriteBufferSize int // ReadBufferSize specifies the size of the read buffer used // when reading from the transport. // If zero, a default (currently 4KB) is used. ReadBufferSize int // ForceAttemptHTTP2 controls whether HTTP/2 is enabled when a non-zero // Dial, DialTLS, or DialContext func or TLSClientConfig is provided. // By default, use of any those fields conservatively disables HTTP/2. // To use a custom dialer or TLS config and still attempt HTTP/2 // upgrades, set this to true. ForceAttemptHTTP2 bool // HTTP2 configures HTTP/2 connections. HTTP2 *HTTP2Config // Protocols is the set of protocols supported by the transport. // // If Protocols includes UnencryptedHTTP2 and does not include HTTP1, // the transport will use unencrypted HTTP/2 for requests for http:// URLs. // // If Protocols is nil, the default is usually HTTP/1 only. // If ForceAttemptHTTP2 is true, or if TLSNextProto contains an \"h2\" entry, // the default is HTTP/1 and HTTP/2. Protocols *Protocols // contains filtered or unexported fields } ``` Transport is an implementation of RoundTripper that supports HTTP, HTTPS, and HTTP proxies (for either HTTP or HTTPS with CONNECT).", "term_freq": { "*http2config": 1, "*protocols": 1, "*request": 2, "*response": 1, "*tls": 2, "*url": 4, "//": 145, "//pkg": 1, "100-continue": 1, "1234": 1, "200": 1, "4kb": 2, "aborted": 1, "accept-encoding": 2, "across": 1, "active": 1, "add": 1, "addr": 4, "after": 3, "all": 1, "allowed": 1, "allows": 2, "alpn": 1, "already": 1, "also": 2, "alternate": 1, "amount": 4, "an": 11, "and": 18, "any": 2, "approve": 1, "are": 9, "as": 8, "assumed": 2, "attempt": 1, "authority": 2, "automatically": 2, "be": 3, "becomes": 2, "before": 4, "below": 2, "block": 1, "body": 4, "bool": 3, "both": 2, "buffer": 2, "by": 4, "bytes": 1, "call": 2, "called": 3, "calls": 2, "can": 1, "cancel": 2, "causes": 1, "check": 1, "client": 1, "closing": 1, "com": 2, "completes": 2, "compression": 1, "concurrently": 2, "config": 2, "configuration": 2, "configures": 1, "conn": 6, "connect": 4, "connection": 8, "connections": 9, "connectreq": 1, "connectres": 1, "conservatively": 1, "contains": 5, "context": 8, "controls": 3, "creating": 4, "ctx": 4, "currently": 2, "custom": 1, "decoded": 1, "default": 8, "defaultmaxidleconnsperhost": 1, "deprecated": 4, "determined": 1, "dev/http#type": 1, "dial": 13, "dialcontext": 10, "dialed": 2, "dialer": 1, "dialing": 1, "dials": 5, "dialtls": 4, "dialtlscontext": 6, "disable": 1, "disablecompression": 2, "disablekeepalives": 2, "disables": 2, "do": 1, "does": 3, "duration": 4, "during": 2, "dynamically": 1, "earlier": 2, "either": 1, "empty": 1, "enabled": 3, "end": 2, "entry": 2, "error": 13, "example": 2, "existing": 1, "expect": 1, "expectcontinuetimeout": 2, "explicitly": 1, "fails": 2, "field": 1, "fields": 2, "filtered": 1, "first": 1, "for": 19, "forceattempthttp2": 3, "from": 3, "fully": 2, "func": 11, "function": 7, "getproxyconnectheader": 4, "gets": 2, "given": 1, "go": 1, "go-type": 1, "gzip": 3, "gzipped": 1, "h2": 2, "handles": 1, "handshake": 2, "has": 1, "header": 8, "headers": 6, "historically": 1, "hooks": 1, "host": 1, "hosts": 1, "how": 2, "however": 1, "http": 11, "http/1": 2, "http/2": 10, "http1": 1, "http2": 2, "https": 7, "idle": 7, "idleconntimeout": 2, "if": 32, "ignored": 2, "immediately": 1, "implementation": 1, "in": 4, "include": 3, "includes": 1, "including": 2, "initiates": 2, "instead": 2, "int": 5, "int64": 1, "ip": 1, "is": 34, "it": 6, "its": 2, "itself": 1, "keep": 1, "keep-alive": 3, "keep-alives": 2, "key": 1, "later": 2, "limit": 6, "limits": 1, "longer": 2, "many": 1, "map": 2, "maxconnsperhost": 2, "maxidleconns": 2, "maxidleconnsperhost": 2, "maximum": 4, "maxresponseheaderbytes": 2, "may": 3, "means": 6, "must": 1, "name": 1, "named": 1, "needed": 2, "negotiation": 1, "net": 6, "network": 4, "nil": 11, "no": 9, "non-empty": 1, "non-nil": 3, "non-proxied": 2, "non-zero": 4, "not": 9, "now": 1, "number": 2, "of": 11, "ok": 1, "on": 3, "only": 2, "onproxyconnectresponse": 2, "optional": 2, "optionally": 3, "or": 8, "own": 1, "package": 1, "pass": 1, "password": 1, "past": 1, "per": 1, "per-host": 1, "port": 1, "prevents": 1, "previously": 2, "priority": 2, "protocol": 3, "protocols": 6, "provided": 2, "provides": 1, "proxies": 2, "proxy": 9, "proxy-authorization": 1, "proxyconnectheader": 3, "proxyurl": 3, "read": 2, "readbuffersize": 2, "reading": 1, "remain": 1, "request": 15, "requested": 1, "requesting": 1, "requests": 6, "response": 9, "responseheadertimeout": 2, "return": 4, "returned": 1, "returns": 4, "roundtrip": 5, "roundtripper": 3, "runs": 2, "same": 1, "scheme": 2, "see": 1, "send": 3, "sent": 1, "server": 5, "set": 6, "similarly": 1, "simpler": 1, "single": 1, "size": 2, "socks5": 2, "socks5h": 2, "soon": 2, "specifies": 15, "states": 1, "still": 1, "string": 7, "struct": 1, "subcomponent": 1, "such": 3, "support": 3, "supported": 2, "supports": 1, "switches": 1, "takes": 2, "target": 2, "tcp": 3, "that": 7, "the": 77, "then": 3, "they": 2, "this": 5, "those": 1, "time": 12, "timeout": 2, "tls": 10, "tlsclientconfig": 5, "tlshandshaketimeout": 3, "tlsnextproto": 6, "to": 32, "total": 1, "transparently": 1, "transport": 19, "treated": 1, "true": 4, "type": 5, "uncompressed": 1, "unencrypted": 3, "unencryptedhttp2": 1, "unexported": 1, "unrelated": 1, "up": 2, "upgrades": 1, "url": 5, "urls": 1, "use": 8, "used": 10, "user": 1, "userinfo": 1, "username": 1, "using": 3, "usually": 1, "value": 1, "violation": 1, "wait": 3, "waiting": 1, "was": 1, "way": 1, "when": 7, "whether": 1, "which": 2, "will": 5, "with": 10, "without": 1, "write": 1, "writebuffersize": 2, "writing": 3, "zero": 9, "¶": 3 }, "length": 1292 }, { "id": "eb25cc28588e708fa8d19c7e", "doc_id": "3bda2219480027d07afd1520", "title": "hydrate", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/rendering/hydrate.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/hydrate.json", "content": "--- title: hydrate use_cases: \u003e- ssr hydration, client initialization, server-rendered apps, spa startup, dom rehydration tags: - hydration - ssr - rendering - initialization - dom version: '1.0' description: \u003e- Hydrate server-rendered HTML with SolidJS client-side code. Essential for initializing SSR applications and attaching interactivity to static HTML. --- ```ts import { hydrate } from \"solid-js/web\" import type { JSX } from \"solid-js\" import type { MountableElement } from \"solid-js/web\" function hydrate( fn: () =\u003e JSX.Element, node: MountableElement, options?: { renderId?: string; owner?: unknown } ): () =\u003e void ``` This method is similar to `render` except that it attempts to rehydrate what is already rendered to the DOM. When initializing in the browser a page has already been server rendered. ```ts const dispose = hydrate(App, document.getElementById(\"app\")) ``` ## Parameters | Prop | type | description | | -------------------- | ------------------ | ----------------------------------------------- | | fn | `() =\u003e JSX.Element`| Function that returns the application code. | | node | MountableElement | DOM Element to mount the application to | | options.renderId | string | | | options.owner | unknown | |", "term_freq": { "##": 1, "---": 2, "------------------": 1, "--------------------": 1, "-----------------------------------------------": 1, "//github": 1, "=\u003e": 3, "\u003e-": 2, "already": 2, "and": 1, "app": 2, "application": 2, "applications": 1, "apps": 1, "attaching": 1, "attempts": 1, "been": 1, "browser": 1, "client": 1, "client-side": 1, "code": 2, "com/solidjs/solid-docs/blob/head/src/routes/reference/rendering/hydrate": 1, "const": 1, "description": 2, "dispose": 1, "document": 1, "dom": 4, "element": 3, "essential": 1, "except": 1, "fn": 2, "for": 1, "from": 3, "function": 2, "getelementbyid": 1, "github-document": 1, "has": 1, "html": 2, "https": 1, "hydrate": 6, "hydration": 2, "import": 3, "in": 1, "initialization": 2, "initializing": 2, "interactivity": 1, "is": 2, "it": 1, "jsx": 3, "mdx": 1, "method": 1, "mount": 1, "mountableelement": 3, "node": 2, "options": 3, "owner": 2, "page": 1, "parameters": 1, "prop": 1, "rehydrate": 1, "rehydration": 1, "render": 1, "rendered": 2, "renderid": 2, "rendering": 1, "returns": 1, "server": 1, "server-rendered": 2, "similar": 1, "solid-js": 1, "solid-js/web": 2, "solidjs": 1, "spa": 1, "ssr": 3, "startup": 1, "static": 1, "string": 2, "tags": 1, "that": 2, "the": 4, "this": 1, "title": 1, "to": 6, "ts": 2, "type": 3, "unknown": 2, "use_cases": 1, "version": 1, "void": 1, "what": 1, "when": 1, "with": 1 }, "length": 150 }, { "id": "e47aee122aad0e60ec83fbc7", "doc_id": "36fa353d86f05ddd0251b2a6", "title": "hydration-script", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/rendering/hydration-script.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/hydration-script.json", "content": "--- title: hydrationScript use_cases: \u003e- ssr hydration, server-side rendering, initial page load optimization, capturing events before js loads tags: - ssr - hydration - performance - events - bootstrap version: '1.0' description: \u003e- Bootstrap client-side hydration in SSR apps with HydrationScript. Capture and replay events before JavaScript loads for seamless user experience. --- ```ts import { generateHydrationScript, HydrationScript } from \"solid-js/web\" import type { JSX } from \"solid-js\" function generateHydrationScript(options: { nonce?: string eventNames?: string[] }): string function HydrationScript(props: { nonce?: string eventNames?: string[] }): JSX.Element ``` Hydration Script is a special script that should be placed once on the page to bootstrap hydration before Solid's runtime has loaded. It comes both as a function that can be called and inserted in an HTML string, or as a Component if you are rendering JSX from the `\u003chtml\u003e` tag. The options are for the **nonce** to be put on the script tag and any event names for that Solid should capture before scripts have loaded and replay during hydration. These events are limited to those that Solid delegates which include most UI Events that are composed and bubble. By default it is only click and input events.", "term_freq": { "**nonce**": 1, "---": 2, "//github": 1, "\u003chtml\u003e": 1, "\u003e-": 2, "an": 1, "and": 6, "any": 1, "apps": 1, "are": 4, "as": 2, "be": 3, "before": 4, "bootstrap": 3, "both": 1, "bubble": 1, "by": 1, "called": 1, "can": 1, "capture": 2, "capturing": 1, "click": 1, "client-side": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/rendering/hydration-script": 1, "comes": 1, "component": 1, "composed": 1, "default": 1, "delegates": 1, "description": 1, "during": 1, "element": 1, "event": 1, "eventnames": 2, "events": 6, "experience": 1, "for": 3, "from": 3, "function": 3, "generatehydrationscript": 2, "github-document": 1, "has": 1, "have": 1, "html": 1, "https": 1, "hydration": 6, "hydration-script": 1, "hydrationscript": 4, "if": 1, "import": 2, "in": 2, "include": 1, "initial": 1, "input": 1, "inserted": 1, "is": 2, "it": 2, "javascript": 1, "js": 1, "jsx": 3, "limited": 1, "load": 1, "loaded": 2, "loads": 2, "mdx": 1, "most": 1, "names": 1, "nonce": 2, "on": 2, "once": 1, "only": 1, "optimization": 1, "options": 2, "or": 1, "page": 2, "performance": 1, "placed": 1, "props": 1, "put": 1, "rendering": 2, "replay": 2, "runtime": 1, "script": 3, "scripts": 1, "seamless": 1, "server-side": 1, "should": 2, "solid": 3, "solid-js": 1, "solid-js/web": 1, "special": 1, "ssr": 3, "string": 6, "tag": 2, "tags": 1, "that": 5, "the": 5, "these": 1, "those": 1, "title": 1, "to": 3, "ts": 1, "type": 1, "ui": 1, "use_cases": 1, "user": 1, "version": 1, "which": 1, "with": 1, "you": 1 }, "length": 187 }, { "id": "1d84c369539114cf0bab21a3", "doc_id": "1d2c65ec24add59c9334f44f", "title": "index", "url": "file:///tmp/devour-github-216944658/src/routes/solid-router/index.mdx", "type": "github-document", "source": "solid:solid-router", "path": "devour_data/docs/index-1d2c65ec.json", "content": "--- title: Solid Router Docs nav_title: Overview titleTemplate: \":title\" use_cases: \u003e- understanding routing, learning basics, overview needed, getting started, spa routing concepts tags: - overview - introduction - basics - spa - routing - concepts version: '1.0' description: \u003e- Solid Router is the universal routing solution for Solid applications, enabling client and server-side navigation in single-page applications. --- # Overview :::note[Prerequisites] The docs are based on latest Solid Router. To use this version, you need to have Solid v1.8.4 or later installed. ::: Solid Router is the universal router for Solid which works for rendering on the client or the server. It was inspired by and combines paradigms of [React Router](https://reactrouter.com/en/main) and the [Ember Router](https://guides.emberjs.com/release/routing/). A router provides a way to change a user's view based on the URL in the browser. This allows a \"single-page\" application to simulate a traditional multipage site. To use Solid Router, components called Routes that depend on the value of the URL (the \"path\") are specified, and the router handles the mechanism of swapping them in and out.", "term_freq": { "---": 2, "///tmp/devour-github-216944658/src/routes/solid-router/index": 1, "//guides": 1, "//reactrouter": 1, "\u003e-": 2, "allows": 1, "and": 5, "application": 1, "applications": 2, "are": 2, "based": 2, "basics": 2, "browser": 1, "by": 1, "called": 1, "change": 1, "client": 2, "com/en/main": 1, "com/release/routing/": 1, "combines": 1, "components": 1, "concepts": 2, "depend": 1, "description": 1, "docs": 2, "ember": 1, "emberjs": 1, "enabling": 1, "file": 1, "for": 3, "getting": 1, "github-document": 1, "handles": 1, "have": 1, "https": 2, "in": 3, "index": 1, "inspired": 1, "installed": 1, "introduction": 1, "is": 2, "it": 1, "later": 1, "latest": 1, "learning": 1, "mdx": 1, "mechanism": 1, "multipage": 1, "nav_title": 1, "navigation": 1, "need": 1, "needed": 1, "note": 1, "of": 3, "on": 4, "or": 2, "out": 1, "overview": 4, "paradigms": 1, "path": 1, "prerequisites": 1, "provides": 1, "react": 1, "rendering": 1, "router": 10, "routes": 1, "routing": 4, "server": 1, "server-side": 1, "simulate": 1, "single-page": 2, "site": 1, "solid": 8, "solution": 1, "spa": 2, "specified": 1, "started": 1, "swapping": 1, "tags": 1, "that": 1, "the": 13, "them": 1, "this": 2, "title": 2, "titletemplate": 1, "to": 5, "traditional": 1, "understanding": 1, "universal": 2, "url": 2, "use": 2, "use_cases": 1, "user": 1, "v1": 1, "value": 1, "version": 2, "view": 1, "was": 1, "way": 1, "which": 1, "works": 1, "you": 1 }, "length": 173 }, { "id": "1f1d0a382d6b046180b3ccde", "doc_id": "4da06dc01425dde59cc0e261", "title": "index", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/index.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/index-4da06dc0.json", "content": "--- title: SolidStart Docs nav_title: Overview titleTemplate: \":title\" use_cases: \u003e- getting started, new projects, learning solidstart, framework overview, architecture decisions tags: - overview - introduction - getting-started - features - ssr - csr - ssg version: '1.0' description: \u003e- SolidStart meta-framework overview: Build modern web apps with fine-grained reactivity, isomorphic routing, and flexible rendering. --- # Overview SolidStart is an open source meta-framework designed to unify components that make up a web application. It is built on top of [Solid](/) and uses [Vinxi](https://vinxi.vercel.app/), an agnostic Framework Bundler that combines the power of [Vite](https://vitejs.dev) and [Nitro](https://nitro.build/). Start avoids being opinionated by only providing the fewest pieces to get you started. While templates are available that include many of the expected tools, SolidStart itself does not ship with a Router or Metadata library. Rather, it leaves that open for you to use any library you want. SolidStart provides you the ability to render your applications in different ways depending on what is best for your use case. These include: - Client-side rendering (CSR) - Server-side rendering (SSR) - Static site generation (SSG) A driving principle of SolidStart is that code should be _isomorphic_ \u0026mdash; this ensures that code can be written once and executed correctly whether on the client or server. ## Features SolidStart features the following capabilities: - **Fine-grained reactivity** \u0026mdash; Powered by Solid and its fine-grained reactivity. - **Isomorphic, nested routing** \u0026mdash; The same routes are rendered regardless of whether the page is on the client or server. Route nesting provides parent-child relationships that simplify application logic. - **Multiple rendering modes** \u0026mdash; Can be used to create CSR, SSR (Sync, Async and Streaming), and SSG applications. - **Command Line Interface (CLI) and templates** \u0026mdash; Provides a CLI and templates to help you get started quickly. - **Deployment presets** \u0026mdash; Provides presets to support deployment to multiple platforms including Netlify, Vercel, AWS, and Cloudflare. ## Prerequisites Before you start using SolidStart, you should have a basic understanding of web development. This includes knowledge of HTML, CSS, and JavaScript. With SolidStart being a Solid meta-framework, we recommend learning Solid prior to reading these docs (or at least [taking the Solid tutorial](https://www.solidjs.com/tutorial)). ## SolidStart 1.0 is here! We are actively working on improving the documentation and adding more examples to help you get started. Documentation is still in beta so content is still being added to the documentation to improve the overall experience of using SolidStart. If you experience any issues while using SolidStart, please let us know by [opening an issue in the SolidStart Repo](https://github.com/solidjs/solid-start/issues). Additionally, if you notice any issues or feel that something is missing in the documentation, please let us know in the [Solid Docs Repo](https://github.com/solidjs/solid-docs-next/issues). \u003cEditPageLink /\u003e \u003cPageIssueLink /\u003e", "term_freq": { "##": 3, "\u0026mdash": 6, "**command": 1, "**deployment": 1, "**fine-grained": 1, "**isomorphic": 1, "**multiple": 1, "---": 2, "//github": 3, "//nitro": 1, "//vinxi": 1, "//vitejs": 1, "//www": 1, "/\u003e": 2, "\u003ceditpagelink": 1, "\u003cpageissuelink": 1, "\u003e-": 2, "_isomorphic_": 1, "ability": 1, "actively": 1, "added": 1, "adding": 1, "additionally": 1, "agnostic": 1, "an": 3, "and": 12, "any": 3, "app/": 1, "application": 2, "applications": 2, "apps": 1, "architecture": 1, "are": 3, "async": 1, "at": 1, "available": 1, "avoids": 1, "aws": 1, "basic": 1, "be": 3, "before": 1, "being": 3, "best": 1, "beta": 1, "build": 1, "build/": 1, "built": 1, "bundler": 1, "by": 3, "can": 2, "capabilities": 1, "case": 1, "cli": 2, "client": 2, "client-side": 1, "cloudflare": 1, "code": 2, "com/solidjs/solid-docs-next/issues": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/index": 1, "com/solidjs/solid-start/issues": 1, "com/tutorial": 1, "combines": 1, "components": 1, "content": 1, "correctly": 1, "create": 1, "csr": 3, "css": 1, "decisions": 1, "depending": 1, "deployment": 1, "description": 1, "designed": 1, "dev": 1, "development": 1, "different": 1, "docs": 3, "documentation": 4, "does": 1, "driving": 1, "ensures": 1, "examples": 1, "executed": 1, "expected": 1, "experience": 2, "features": 3, "feel": 1, "fewest": 1, "fine-grained": 2, "flexible": 1, "following": 1, "for": 2, "framework": 2, "generation": 1, "get": 3, "getting": 1, "getting-started": 1, "github-document": 1, "have": 1, "help": 2, "here": 1, "html": 1, "https": 7, "if": 2, "improve": 1, "improving": 1, "in": 5, "include": 2, "includes": 1, "including": 1, "index": 1, "interface": 1, "introduction": 1, "is": 9, "isomorphic": 1, "issue": 1, "issues": 2, "it": 2, "its": 1, "itself": 1, "javascript": 1, "know": 2, "knowledge": 1, "learning": 2, "least": 1, "leaves": 1, "let": 2, "library": 2, "line": 1, "logic": 1, "make": 1, "many": 1, "mdx": 1, "meta-framework": 3, "metadata": 1, "missing": 1, "modern": 1, "modes**": 1, "more": 1, "multiple": 1, "nav_title": 1, "nested": 1, "nesting": 1, "netlify": 1, "new": 1, "nitro": 1, "not": 1, "notice": 1, "of": 8, "on": 5, "once": 1, "only": 1, "open": 2, "opening": 1, "opinionated": 1, "or": 5, "overall": 1, "overview": 5, "page": 1, "parent-child": 1, "pieces": 1, "platforms": 1, "please": 2, "power": 1, "powered": 1, "prerequisites": 1, "presets": 1, "presets**": 1, "principle": 1, "prior": 1, "projects": 1, "provides": 4, "providing": 1, "quickly": 1, "rather": 1, "reactivity": 2, "reactivity**": 1, "reading": 1, "recommend": 1, "regardless": 1, "relationships": 1, "render": 1, "rendered": 1, "rendering": 4, "repo": 2, "route": 1, "router": 1, "routes": 1, "routing": 1, "routing**": 1, "same": 1, "server": 2, "server-side": 1, "ship": 1, "should": 2, "simplify": 1, "site": 1, "so": 1, "solid": 6, "solidjs": 1, "solidstart": 14, "something": 1, "source": 1, "ssg": 3, "ssr": 3, "start": 2, "started": 4, "static": 1, "still": 2, "streaming": 1, "support": 1, "sync": 1, "tags": 1, "taking": 1, "templates": 2, "templates**": 1, "that": 8, "the": 16, "these": 2, "this": 2, "title": 2, "titletemplate": 1, "to": 12, "tools": 1, "top": 1, "tutorial": 1, "understanding": 1, "unify": 1, "up": 1, "us": 2, "use": 2, "use_cases": 1, "used": 1, "uses": 1, "using": 3, "vercel": 2, "version": 1, "vinxi": 1, "vite": 1, "want": 1, "ways": 1, "we": 2, "web": 3, "what": 1, "whether": 2, "while": 2, "with": 3, "working": 1, "written": 1, "you": 10, "your": 2 }, "length": 453 }, { "id": "ff0336b046d90d11e02c35ce", "doc_id": "572e128835272795d8398cf3", "title": "index", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/index.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/index-572e1288.json", "content": "--- title: Solid Router Docs nav_title: Overview titleTemplate: \":title\" use_cases: \u003e- understanding routing, learning basics, overview needed, getting started, spa routing concepts tags: - overview - introduction - basics - spa - routing - concepts version: '1.0' description: \u003e- Solid Router is the universal routing solution for Solid applications, enabling client and server-side navigation in single-page applications. --- # Overview :::note[Prerequisites] The docs are based on latest Solid Router. To use this version, you need to have Solid v1.8.4 or later installed. ::: Solid Router is the universal router for Solid which works for rendering on the client or the server. It was inspired by and combines paradigms of [React Router](https://reactrouter.com/en/main) and the [Ember Router](https://guides.emberjs.com/release/routing/). A router provides a way to change a user's view based on the URL in the browser. This allows a \"single-page\" application to simulate a traditional multipage site. To use Solid Router, components called Routes that depend on the value of the URL (the \"path\") are specified, and the router handles the mechanism of swapping them in and out.", "term_freq": { "---": 2, "//github": 1, "//guides": 1, "//reactrouter": 1, "\u003e-": 2, "allows": 1, "and": 5, "application": 1, "applications": 2, "are": 2, "based": 2, "basics": 2, "browser": 1, "by": 1, "called": 1, "change": 1, "client": 2, "com/en/main": 1, "com/release/routing/": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/index": 1, "combines": 1, "components": 1, "concepts": 2, "depend": 1, "description": 1, "docs": 2, "ember": 1, "emberjs": 1, "enabling": 1, "for": 3, "getting": 1, "github-document": 1, "handles": 1, "have": 1, "https": 3, "in": 3, "index": 1, "inspired": 1, "installed": 1, "introduction": 1, "is": 2, "it": 1, "later": 1, "latest": 1, "learning": 1, "mdx": 1, "mechanism": 1, "multipage": 1, "nav_title": 1, "navigation": 1, "need": 1, "needed": 1, "note": 1, "of": 3, "on": 4, "or": 2, "out": 1, "overview": 4, "paradigms": 1, "path": 1, "prerequisites": 1, "provides": 1, "react": 1, "rendering": 1, "router": 10, "routes": 1, "routing": 4, "server": 1, "server-side": 1, "simulate": 1, "single-page": 2, "site": 1, "solid": 8, "solution": 1, "spa": 2, "specified": 1, "started": 1, "swapping": 1, "tags": 1, "that": 1, "the": 13, "them": 1, "this": 2, "title": 2, "titletemplate": 1, "to": 5, "traditional": 1, "understanding": 1, "universal": 2, "url": 2, "use": 2, "use_cases": 1, "user": 1, "v1": 1, "value": 1, "version": 2, "view": 1, "was": 1, "way": 1, "which": 1, "works": 1, "you": 1 }, "length": 174 }, { "id": "79d980802677cd9eab065587", "doc_id": "90c3adf1d6ccae634e5c73a3", "title": "index", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/index.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/index-90c3adf1.json", "content": "--- title: Solid Meta Docs nav_title: Overview titleTemplate: \":title\" mainNavExclude: true use_cases: \u003e- managing head tags, seo optimization, document metadata, dynamic meta tags, ssr meta management tags: - meta - head - seo - ssr - overview version: '1.0' description: \u003e- Solid Meta provides asynchronous SSR-ready document head management. Define meta tags at any component level for flexible SEO and metadata control. --- # Overview Solid Meta offers asynchronous SSR-ready Document Head management for Solid Applications, based on [React Head](https://github.com/tizmagik/react-head) With Solid Meta, you can define `document.head` tags at any level of your component hierarchy. This helps you to manage tags conveniently, especially when contextual information for specific tags are buried deep within your component hierarchy. This library has no dependencies and is designed to seamlessly integrate with asynchronous rendering.", "term_freq": { "---": 2, "//github": 2, "\u003e-": 2, "and": 2, "any": 2, "applications": 1, "are": 1, "asynchronous": 3, "at": 2, "based": 1, "buried": 1, "can": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-meta/index": 1, "com/tizmagik/react-head": 1, "component": 3, "contextual": 1, "control": 1, "conveniently": 1, "deep": 1, "define": 2, "dependencies": 1, "description": 1, "designed": 1, "docs": 1, "document": 4, "dynamic": 1, "especially": 1, "flexible": 1, "for": 3, "github-document": 1, "has": 1, "head": 6, "helps": 1, "hierarchy": 2, "https": 2, "index": 1, "information": 1, "integrate": 1, "is": 1, "level": 2, "library": 1, "mainnavexclude": 1, "manage": 1, "management": 3, "managing": 1, "mdx": 1, "meta": 8, "metadata": 2, "nav_title": 1, "no": 1, "of": 1, "offers": 1, "on": 1, "optimization": 1, "overview": 3, "provides": 1, "react": 1, "rendering": 1, "seamlessly": 1, "seo": 3, "solid": 5, "specific": 1, "ssr": 2, "ssr-ready": 2, "tags": 7, "this": 2, "title": 2, "titletemplate": 1, "to": 2, "true": 1, "use_cases": 1, "version": 1, "when": 1, "with": 2, "within": 1, "you": 2, "your": 2 }, "length": 133 }, { "id": "fb05cca2e044cc946b218483", "doc_id": "97f1c85ab7b9e902715c0e0b", "title": "index", "url": "file:///tmp/devour-github-216944658/src/routes/solid-start/index.mdx", "type": "github-document", "source": "solid:solid-router", "path": "devour_data/docs/index-97f1c85a.json", "content": "--- title: SolidStart Docs nav_title: Overview titleTemplate: \":title\" use_cases: \u003e- getting started, new projects, learning solidstart, framework overview, architecture decisions tags: - overview - introduction - getting-started - features - ssr - csr - ssg version: '1.0' description: \u003e- SolidStart meta-framework overview: Build modern web apps with fine-grained reactivity, isomorphic routing, and flexible rendering. --- # Overview SolidStart is an open source meta-framework designed to unify components that make up a web application. It is built on top of [Solid](/) and uses [Vinxi](https://vinxi.vercel.app/), an agnostic Framework Bundler that combines the power of [Vite](https://vitejs.dev) and [Nitro](https://nitro.build/). Start avoids being opinionated by only providing the fewest pieces to get you started. While templates are available that include many of the expected tools, SolidStart itself does not ship with a Router or Metadata library. Rather, it leaves that open for you to use any library you want. SolidStart provides you the ability to render your applications in different ways depending on what is best for your use case. These include: - Client-side rendering (CSR) - Server-side rendering (SSR) - Static site generation (SSG) A driving principle of SolidStart is that code should be _isomorphic_ \u0026mdash; this ensures that code can be written once and executed correctly whether on the client or server. ## Features SolidStart features the following capabilities: - **Fine-grained reactivity** \u0026mdash; Powered by Solid and its fine-grained reactivity. - **Isomorphic, nested routing** \u0026mdash; The same routes are rendered regardless of whether the page is on the client or server. Route nesting provides parent-child relationships that simplify application logic. - **Multiple rendering modes** \u0026mdash; Can be used to create CSR, SSR (Sync, Async and Streaming), and SSG applications. - **Command Line Interface (CLI) and templates** \u0026mdash; Provides a CLI and templates to help you get started quickly. - **Deployment presets** \u0026mdash; Provides presets to support deployment to multiple platforms including Netlify, Vercel, AWS, and Cloudflare. ## Prerequisites Before you start using SolidStart, you should have a basic understanding of web development. This includes knowledge of HTML, CSS, and JavaScript. With SolidStart being a Solid meta-framework, we recommend learning Solid prior to reading these docs (or at least [taking the Solid tutorial](https://www.solidjs.com/tutorial)). ## SolidStart 1.0 is here! We are actively working on improving the documentation and adding more examples to help you get started. Documentation is still in beta so content is still being added to the documentation to improve the overall experience of using SolidStart. If you experience any issues while using SolidStart, please let us know by [opening an issue in the SolidStart Repo](https://github.com/solidjs/solid-start/issues). Additionally, if you notice any issues or feel that something is missing in the documentation, please let us know in the [Solid Docs Repo](https://github.com/solidjs/solid-docs-next/issues). \u003cEditPageLink /\u003e \u003cPageIssueLink /\u003e", "term_freq": { "##": 3, "\u0026mdash": 6, "**command": 1, "**deployment": 1, "**fine-grained": 1, "**isomorphic": 1, "**multiple": 1, "---": 2, "///tmp/devour-github-216944658/src/routes/solid-start/index": 1, "//github": 2, "//nitro": 1, "//vinxi": 1, "//vitejs": 1, "//www": 1, "/\u003e": 2, "\u003ceditpagelink": 1, "\u003cpageissuelink": 1, "\u003e-": 2, "_isomorphic_": 1, "ability": 1, "actively": 1, "added": 1, "adding": 1, "additionally": 1, "agnostic": 1, "an": 3, "and": 12, "any": 3, "app/": 1, "application": 2, "applications": 2, "apps": 1, "architecture": 1, "are": 3, "async": 1, "at": 1, "available": 1, "avoids": 1, "aws": 1, "basic": 1, "be": 3, "before": 1, "being": 3, "best": 1, "beta": 1, "build": 1, "build/": 1, "built": 1, "bundler": 1, "by": 3, "can": 2, "capabilities": 1, "case": 1, "cli": 2, "client": 2, "client-side": 1, "cloudflare": 1, "code": 2, "com/solidjs/solid-docs-next/issues": 1, "com/solidjs/solid-start/issues": 1, "com/tutorial": 1, "combines": 1, "components": 1, "content": 1, "correctly": 1, "create": 1, "csr": 3, "css": 1, "decisions": 1, "depending": 1, "deployment": 1, "description": 1, "designed": 1, "dev": 1, "development": 1, "different": 1, "docs": 3, "documentation": 4, "does": 1, "driving": 1, "ensures": 1, "examples": 1, "executed": 1, "expected": 1, "experience": 2, "features": 3, "feel": 1, "fewest": 1, "file": 1, "fine-grained": 2, "flexible": 1, "following": 1, "for": 2, "framework": 2, "generation": 1, "get": 3, "getting": 1, "getting-started": 1, "github-document": 1, "have": 1, "help": 2, "here": 1, "html": 1, "https": 6, "if": 2, "improve": 1, "improving": 1, "in": 5, "include": 2, "includes": 1, "including": 1, "index": 1, "interface": 1, "introduction": 1, "is": 9, "isomorphic": 1, "issue": 1, "issues": 2, "it": 2, "its": 1, "itself": 1, "javascript": 1, "know": 2, "knowledge": 1, "learning": 2, "least": 1, "leaves": 1, "let": 2, "library": 2, "line": 1, "logic": 1, "make": 1, "many": 1, "mdx": 1, "meta-framework": 3, "metadata": 1, "missing": 1, "modern": 1, "modes**": 1, "more": 1, "multiple": 1, "nav_title": 1, "nested": 1, "nesting": 1, "netlify": 1, "new": 1, "nitro": 1, "not": 1, "notice": 1, "of": 8, "on": 5, "once": 1, "only": 1, "open": 2, "opening": 1, "opinionated": 1, "or": 5, "overall": 1, "overview": 5, "page": 1, "parent-child": 1, "pieces": 1, "platforms": 1, "please": 2, "power": 1, "powered": 1, "prerequisites": 1, "presets": 1, "presets**": 1, "principle": 1, "prior": 1, "projects": 1, "provides": 4, "providing": 1, "quickly": 1, "rather": 1, "reactivity": 2, "reactivity**": 1, "reading": 1, "recommend": 1, "regardless": 1, "relationships": 1, "render": 1, "rendered": 1, "rendering": 4, "repo": 2, "route": 1, "router": 1, "routes": 1, "routing": 1, "routing**": 1, "same": 1, "server": 2, "server-side": 1, "ship": 1, "should": 2, "simplify": 1, "site": 1, "so": 1, "solid": 6, "solidjs": 1, "solidstart": 14, "something": 1, "source": 1, "ssg": 3, "ssr": 3, "start": 2, "started": 4, "static": 1, "still": 2, "streaming": 1, "support": 1, "sync": 1, "tags": 1, "taking": 1, "templates": 2, "templates**": 1, "that": 8, "the": 16, "these": 2, "this": 2, "title": 2, "titletemplate": 1, "to": 12, "tools": 1, "top": 1, "tutorial": 1, "understanding": 1, "unify": 1, "up": 1, "us": 2, "use": 2, "use_cases": 1, "used": 1, "uses": 1, "using": 3, "vercel": 2, "version": 1, "vinxi": 1, "vite": 1, "want": 1, "ways": 1, "we": 2, "web": 3, "what": 1, "whether": 2, "while": 2, "with": 3, "working": 1, "written": 1, "you": 10, "your": 2 }, "length": 452 }, { "id": "3b089918f08a51a04f7cf7b2", "doc_id": "fe97831963938eb6a767a77c", "title": "index-array", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/index-array.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/index-array.json", "content": "--- title: indexArray use_cases: \u003e- rendering lists by index, stable item references, index-based list operations, optimized list rendering tags: - arrays - lists - index - rendering - optimization version: '1.0' description: \u003e- Map arrays by index in SolidJS where items are signals and indices are constant. Optimized helper for index-based list rendering patterns. --- ```tsx import { indexArray } from \"solid-js\" function indexArray\u003cT, U\u003e( list: () =\u003e readonly T[], mapFn: (v: () =\u003e T, i: number) =\u003e U ): () =\u003e U[] ``` Similar to `mapArray` except it maps by index. The item is a signal and the index is now the constant. Underlying helper for the `\u003cIndex\u003e` control flow. ```tsx const mapped = indexArray(source, (model) =\u003e { return { get id() { return model().id } get firstInitial() { return model().firstName[0]; }, get fullName() { return `${model().firstName} ${model().lastName}`; }, } }); ``` ## Arguments | Name | Type | Description | | :---- | :----------------------------- | :-------------------- | | list | `() =\u003e readonly T[]` | The list to map. | | mapFn | `(v: () =\u003e T, i: number) =\u003e U` | The mapping function. |", "term_freq": { "##": 1, "---": 2, "----": 1, "--------------------": 1, "-----------------------------": 1, "//github": 1, "\u003cindex\u003e": 1, "=\u003e": 8, "\u003e-": 2, "and": 2, "are": 2, "arguments": 1, "arrays": 2, "by": 3, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/index-array": 1, "const": 1, "constant": 2, "control": 1, "description": 2, "except": 1, "firstinitial": 1, "firstname": 2, "flow": 1, "for": 2, "from": 1, "fullname": 1, "function": 2, "get": 3, "github-document": 1, "helper": 2, "https": 1, "id": 2, "import": 1, "in": 1, "index": 5, "index-array": 1, "index-based": 2, "indexarray": 3, "indexarray\u003ct": 1, "indices": 1, "is": 2, "it": 1, "item": 2, "items": 1, "lastname": 1, "list": 6, "lists": 2, "map": 2, "maparray": 1, "mapfn": 2, "mapped": 1, "mapping": 1, "maps": 1, "mdx": 1, "model": 5, "name": 1, "now": 1, "number": 2, "operations": 1, "optimization": 1, "optimized": 2, "patterns": 1, "readonly": 2, "references": 1, "rendering": 4, "return": 4, "signal": 1, "signals": 1, "similar": 1, "solid-js": 1, "solidjs": 1, "source": 1, "stable": 1, "tags": 1, "the": 6, "title": 1, "to": 2, "tsx": 2, "type": 1, "u\u003e": 1, "underlying": 1, "use_cases": 1, "version": 1, "where": 1 }, "length": 144 }, { "id": "d2439e46b9b56a42d6544804", "doc_id": "121ffcfa67474a6b84d54e40", "title": "index-component", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/index-component.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/index-component.json", "content": "--- title: \u003cIndex\u003e use_cases: \u003e- primitive arrays, non-keyed lists, index-based rendering, static positions, simple lists tags: - lists - iteration - components - arrays - primitives - index version: '1.0' description: \u003e- Render non-keyed lists in SolidJS with Index component. Perfect for primitive arrays where index position matters more than item identity. --- Non-keyed list iteration (rendered nodes are keyed to an array index). This is useful when there is no conceptual key, like if the data consists of primitives and it is the index that is fixed rather than the value. ```ts import { Index } from \"solid-js\" import type { JSX } from \"solid-js\" function Index\u003cT, U extends JSX.Element\u003e(props: { each: readonly T[]; fallback?: JSX.Element; children: (item: () =\u003e T, index: number) =\u003e U; }): () =\u003e U[]; ``` A super simple implementation of this component might look like this: ```tsx function Index\u003cT, U extends JSX.Element\u003e(props: { each: readonly T[]; fallback?: JSX.Element; children: (item: () =\u003e T, index: number) =\u003e U; }) { return () =\u003e { const [items, setItems] = createSignal(props.each); return props.each.map((_, i) =\u003e props.children(() =\u003e items()[i], i)); }; } ``` Here's a look at the implementation of the `Index` component in Solid: ```tsx \u003cIndex each={state.list} fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e {(item) =\u003e \u003cdiv\u003e{item()}\u003c/div\u003e} \u003c/Index\u003e ``` Notice that the item is a signal unlike the `For` component. This is because the `Index` component is not keyed to the item itself but rather the index. Optional second argument is an index number: ```tsx \u003cIndex each={state.list} fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e {(item, index) =\u003e ( \u003cdiv\u003e #{index} {item()} \u003c/div\u003e )} \u003c/Index\u003e ``` ## Props | Name | Type | Description | | :------- | :------------------------------------ | :-------------------------------------------------------------- | | each | `readonly T[]` | The array to iterate over. | | fallback | `JSX.Element` | Optional fallback element to render while the array is loading. | | children | `(item: () =\u003e T, index: number) =\u003e U` | The function that renders the children. |", "term_freq": { "##": 1, "---": 2, "-------": 1, "------------------------------------": 1, "--------------------------------------------------------------": 1, "//github": 1, "\u003c/div\u003e": 4, "\u003c/index\u003e": 2, "\u003cdiv\u003e": 2, "\u003cdiv\u003eloading": 2, "\u003cindex": 2, "\u003cindex\u003e": 1, "=\u003e": 12, "\u003e-": 2, "an": 2, "and": 1, "are": 1, "argument": 1, "array": 3, "arrays": 3, "at": 1, "because": 1, "but": 1, "children": 5, "com/solidjs/solid-docs/blob/head/src/routes/reference/components/index-component": 1, "component": 5, "components": 1, "conceptual": 1, "consists": 1, "const": 1, "createsignal": 1, "data": 1, "description": 2, "each": 5, "each=": 2, "element": 4, "element\u003e": 2, "extends": 2, "fallback": 4, "fallback=": 2, "fixed": 1, "for": 2, "from": 2, "function": 3, "github-document": 1, "here": 1, "https": 1, "identity": 1, "if": 1, "implementation": 2, "import": 2, "in": 2, "index": 15, "index-based": 1, "index-component": 1, "index\u003ct": 2, "is": 9, "it": 1, "item": 10, "items": 2, "iterate": 1, "iteration": 2, "itself": 1, "jsx": 6, "key": 1, "keyed": 2, "like": 2, "list": 3, "lists": 4, "loading": 1, "look": 2, "map": 1, "matters": 1, "mdx": 1, "might": 1, "more": 1, "name": 1, "no": 1, "nodes": 1, "non-keyed": 3, "not": 1, "notice": 1, "number": 4, "of": 3, "optional": 2, "over": 1, "perfect": 1, "position": 1, "positions": 1, "primitive": 2, "primitives": 2, "props": 6, "rather": 2, "readonly": 3, "render": 2, "rendered": 1, "rendering": 1, "renders": 1, "return": 2, "second": 1, "setitems": 1, "signal": 1, "simple": 2, "solid": 1, "solid-js": 2, "solidjs": 1, "state": 2, "static": 1, "super": 1, "tags": 1, "than": 2, "that": 3, "the": 14, "there": 1, "this": 4, "title": 1, "to": 4, "ts": 1, "tsx": 3, "type": 2, "unlike": 1, "use_cases": 1, "useful": 1, "value": 1, "version": 1, "when": 1, "where": 1, "while": 1, "with": 1 }, "length": 279 }, { "id": "cd9f42f0b3e03358fb40ce04", "doc_id": "d9aaafb45fda1db805744f10", "title": "index", "url": "file:///tmp/devour-github-216944658/src/routes/solid-meta/index.mdx", "type": "github-document", "source": "solid:solid-router", "path": "devour_data/docs/index-d9aaafb4.json", "content": "--- title: Solid Meta Docs nav_title: Overview titleTemplate: \":title\" mainNavExclude: true use_cases: \u003e- managing head tags, seo optimization, document metadata, dynamic meta tags, ssr meta management tags: - meta - head - seo - ssr - overview version: '1.0' description: \u003e- Solid Meta provides asynchronous SSR-ready document head management. Define meta tags at any component level for flexible SEO and metadata control. --- # Overview Solid Meta offers asynchronous SSR-ready Document Head management for Solid Applications, based on [React Head](https://github.com/tizmagik/react-head) With Solid Meta, you can define `document.head` tags at any level of your component hierarchy. This helps you to manage tags conveniently, especially when contextual information for specific tags are buried deep within your component hierarchy. This library has no dependencies and is designed to seamlessly integrate with asynchronous rendering.", "term_freq": { "---": 2, "///tmp/devour-github-216944658/src/routes/solid-meta/index": 1, "//github": 1, "\u003e-": 2, "and": 2, "any": 2, "applications": 1, "are": 1, "asynchronous": 3, "at": 2, "based": 1, "buried": 1, "can": 1, "com/tizmagik/react-head": 1, "component": 3, "contextual": 1, "control": 1, "conveniently": 1, "deep": 1, "define": 2, "dependencies": 1, "description": 1, "designed": 1, "docs": 1, "document": 4, "dynamic": 1, "especially": 1, "file": 1, "flexible": 1, "for": 3, "github-document": 1, "has": 1, "head": 6, "helps": 1, "hierarchy": 2, "https": 1, "index": 1, "information": 1, "integrate": 1, "is": 1, "level": 2, "library": 1, "mainnavexclude": 1, "manage": 1, "management": 3, "managing": 1, "mdx": 1, "meta": 8, "metadata": 2, "nav_title": 1, "no": 1, "of": 1, "offers": 1, "on": 1, "optimization": 1, "overview": 3, "provides": 1, "react": 1, "rendering": 1, "seamlessly": 1, "seo": 3, "solid": 5, "specific": 1, "ssr": 2, "ssr-ready": 2, "tags": 7, "this": 2, "title": 2, "titletemplate": 1, "to": 2, "true": 1, "use_cases": 1, "version": 1, "when": 1, "with": 2, "within": 1, "you": 2, "your": 2 }, "length": 132 }, { "id": "4d93c1ef2482dc3d8d04d844", "doc_id": "a9c8a07dc86d08d70d8dbc64", "title": "index", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/index.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/index.json", "content": "--- title: Solid Docs nav_title: Overview titleTemplate: \":title\" mainNavExclude: true use_cases: \u003e- getting started, learning solid, understanding framework, first project, introduction tags: - introduction - overview - getting-started - basics - framework version: '1.0' description: \u003e- Solid is a reactive JavaScript framework for building fast, efficient UIs. Learn about fine-grained reactivity and modern web development. --- # Overview Solid is a modern JavaScript framework designed to build responsive and high-performing user interfaces (UI). It prioritizes a simple and predictable development experience, making it a great choice for developers of all skill levels. ## What is Solid? As a JavaScript framework, Solid embraces reactivity and fine-grained updates. Reactivity, in programming, refers to an applications' ability to respond to changes in data or user interactions. Traditionally, when a change occurs, the entire web page would need to reload to display the updated information. In contrast, when using a fine-grained reactive system, updates are only applied to the parts of the page that need to be updated. Solid adopts the concept of fine-grained reactivity, updating only when the data the application depends on changes. This decreases work and can result in faster load times and a smoother user experience overall. ## Advantages of using Solid - **Performant**: Fine-grained reactivity allows Solid to update only what has changed, resulting in faster load times and smoother performance overall. - **Powerful**: Using less memory and processing power, Solid is capable of creating complex applications without compromising on functionality. This also gives developers the flexibility over how and when updates happen. - **Pragmatic**: Rather than sticking to rigid structures or methods, Solid provides the freedom to choose the strategies and practices that work best for you. - **Productive**: Regardless of experience level, Solid's clear and predictable API makes developers' work simpler and more efficient. Solid aims to strike a balance between speed, efficiency, power, and flexibility, all while providing a developer-friendly environment. This combination of features makes it a great choice to build responsive and high-performing UIs. ## Quick links \u003cdiv class=\"flex flex-col md:grid md:grid-cols-2 md:grid-rows-2 gap-3\"\u003e \u003cQuickLinks title=\"Tutorial\" href=\"https://www.solidjs.com/tutorial/introduction_basics\" icon=\"learn\" \u003e Learn the basics of Solid through this interactive tutorial. \u003c/QuickLinks\u003e \u003cQuickLinks title=\"Templates\" href=\"https://github.com/solidjs/templates\" icon=\"template\" \u003e Start your first project with a template that fits your needs. \u003c/QuickLinks\u003e \u003cQuickLinks title=\"Ecosystem\" href=\"https://www.solidjs.com/ecosystem\" icon=\"community\" \u003e Explore the Solid ecosystem and find useful tools and libraries. \u003c/QuickLinks\u003e \u003cQuickLinks title=\"Contribute\" href=\"https://github.com/solidjs/solid-docs-next\" icon=\"learn\" \u003e Help improve Solid by contributing to the documentation. \u003c/QuickLinks\u003e \u003c/div\u003e _Find our API documentation under the **Reference** tab_ Join the [Solid community on Discord](https://discord.com/invite/solidjs) to share your projects or get help from our community! \u003cEditPageLink /\u003e \u003cPageIssueLink /\u003e", "term_freq": { "##": 3, "**performant**": 1, "**powerful**": 1, "**pragmatic**": 1, "**productive**": 1, "**reference**": 1, "---": 2, "//discord": 1, "//github": 3, "//www": 2, "/\u003e": 2, "\u003c/div\u003e": 1, "\u003c/quicklinks\u003e": 4, "\u003cdiv": 1, "\u003ceditpagelink": 1, "\u003cpageissuelink": 1, "\u003cquicklinks": 4, "\u003e-": 2, "_find": 1, "ability": 1, "about": 1, "adopts": 1, "advantages": 1, "aims": 1, "all": 2, "allows": 1, "also": 1, "an": 1, "and": 16, "api": 2, "application": 1, "applications": 2, "applied": 1, "are": 1, "as": 1, "balance": 1, "basics": 2, "be": 1, "best": 1, "between": 1, "build": 2, "building": 1, "by": 1, "can": 1, "capable": 1, "change": 1, "changed": 1, "changes": 2, "choice": 2, "choose": 1, "class=": 1, "clear": 1, "com/ecosystem": 1, "com/invite/solidjs": 1, "com/solidjs/solid-docs-next": 1, "com/solidjs/solid-docs/blob/head/src/routes/index": 1, "com/solidjs/templates": 1, "com/tutorial/introduction_basics": 1, "combination": 1, "community": 3, "complex": 1, "compromising": 1, "concept": 1, "contrast": 1, "contribute": 1, "contributing": 1, "creating": 1, "data": 2, "decreases": 1, "depends": 1, "description": 1, "designed": 1, "developer-friendly": 1, "developers": 3, "development": 2, "discord": 1, "display": 1, "docs": 1, "documentation": 2, "ecosystem": 2, "efficiency": 1, "efficient": 2, "embraces": 1, "entire": 1, "environment": 1, "experience": 3, "explore": 1, "fast": 1, "faster": 2, "features": 1, "find": 1, "fine-grained": 5, "first": 2, "fits": 1, "flex": 1, "flex-col": 1, "flexibility": 2, "for": 3, "framework": 5, "freedom": 1, "from": 1, "functionality": 1, "gap-3": 1, "get": 1, "getting": 1, "getting-started": 1, "github-document": 1, "gives": 1, "great": 2, "grid": 1, "grid-cols-2": 1, "grid-rows-2": 1, "happen": 1, "has": 1, "help": 2, "high-performing": 2, "how": 1, "href=": 4, "https": 6, "icon=": 4, "improve": 1, "in": 5, "index": 1, "information": 1, "interactions": 1, "interactive": 1, "interfaces": 1, "introduction": 2, "is": 4, "it": 3, "javascript": 3, "join": 1, "learn": 4, "learning": 1, "less": 1, "level": 1, "levels": 1, "libraries": 1, "links": 1, "load": 2, "mainnavexclude": 1, "makes": 2, "making": 1, "md": 3, "mdx": 1, "memory": 1, "methods": 1, "modern": 2, "more": 1, "nav_title": 1, "need": 2, "needs": 1, "occurs": 1, "of": 8, "on": 3, "only": 3, "or": 3, "our": 2, "over": 1, "overall": 2, "overview": 3, "page": 2, "parts": 1, "performance": 1, "power": 2, "practices": 1, "predictable": 2, "prioritizes": 1, "processing": 1, "programming": 1, "project": 2, "projects": 1, "provides": 1, "providing": 1, "quick": 1, "rather": 1, "reactive": 2, "reactivity": 5, "refers": 1, "regardless": 1, "reload": 1, "respond": 1, "responsive": 2, "result": 1, "resulting": 1, "rigid": 1, "share": 1, "simple": 1, "simpler": 1, "skill": 1, "smoother": 2, "solid": 17, "solidjs": 2, "speed": 1, "start": 1, "started": 1, "sticking": 1, "strategies": 1, "strike": 1, "structures": 1, "system": 1, "tab_": 1, "tags": 1, "template": 2, "templates": 1, "than": 1, "that": 3, "the": 15, "this": 4, "through": 1, "times": 2, "title": 2, "title=": 4, "titletemplate": 1, "to": 15, "tools": 1, "traditionally": 1, "true": 1, "tutorial": 2, "ui": 1, "uis": 2, "under": 1, "understanding": 1, "update": 1, "updated": 2, "updates": 3, "updating": 1, "use_cases": 1, "useful": 1, "user": 3, "using": 3, "version": 1, "web": 2, "what": 2, "when": 4, "while": 1, "with": 1, "without": 1, "work": 3, "would": 1, "you": 1, "your": 3 }, "length": 439 }, { "id": "35ecde3bdf745cc3de683058", "doc_id": "9fc667fdc54d4f840b50d43c", "title": "innerhtml", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/innerhtml.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/innerhtml.json", "content": "--- title: innerHTML use_cases: \u003e- rendering html strings, dynamic html content, third-party html, legacy content migration, sanitized markup tags: - html - dom - security - content - markup version: '1.0' description: \u003e- Set raw HTML content in SolidJS elements using innerHTML attribute and render HTML strings dynamically. --- The `innerHTML` attribute is equivalent to the [`innerHTML` DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML). This attribute replaces all existing nodes of the element with new nodes generated by parsing the provided string as HTML. :::caution Using `innerHTML` with unsanitized user-supplied data can introduce security vulnerabilities. :::", "term_freq": { "---": 2, "//developer": 1, "//github": 1, "\u003e-": 2, "all": 1, "and": 1, "as": 1, "attribute": 3, "by": 1, "can": 1, "caution": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/jsx-attributes/innerhtml": 1, "content": 4, "data": 1, "description": 1, "dom": 2, "dynamic": 1, "dynamically": 1, "element": 1, "elements": 1, "equivalent": 1, "existing": 1, "generated": 1, "github-document": 1, "html": 7, "https": 2, "in": 1, "innerhtml": 6, "introduce": 1, "is": 1, "legacy": 1, "markup": 2, "mdx": 1, "migration": 1, "mozilla": 1, "new": 1, "nodes": 2, "of": 1, "org/en-us/docs/web/api/element/innerhtml": 1, "parsing": 1, "property": 1, "provided": 1, "raw": 1, "render": 1, "rendering": 1, "replaces": 1, "sanitized": 1, "security": 2, "set": 1, "solidjs": 1, "string": 1, "strings": 2, "tags": 1, "the": 4, "third-party": 1, "this": 1, "title": 1, "to": 1, "unsanitized": 1, "use_cases": 1, "user-supplied": 1, "using": 2, "version": 1, "vulnerabilities": 1, "with": 2 }, "length": 94 }, { "id": "b19e714778bea24e571cb3f0", "doc_id": "1e45dd063fb1dad109bfd1f6", "title": "installation-and-setup", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/getting-started/installation-and-setup.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/installation-and-setup-1e45dd06.json", "content": "--- title: Installation and setup use_cases: \u003e- starting new project, initial setup, configuring routing, spa applications, client-side routing tags: - setup - installation - configuration - spa - routing - getting-started version: '1.0' description: \u003e- Learn how to install and configure Solid Router for client and server-side routing in your single-page applications with step-by-step setup guide. --- Solid Router is the universal router for Solid which works for rendering on the client or the server. It was inspired by and combines paradigms of [React Router](https://reactrouter.com/en/main) and the [Ember Router](https://guides.emberjs.com/release/routing/). A router provides a way to change a user's view based on the URL in the browser. This allows a \"single-page\" application to simulate a traditional multipage site. To use Solid Router, components called Routes that depend on the value of the URL (the \"path\") are specified, and the router handles the mechanism of swapping them in and out. ## Setup To get started with Solid Router, install it using your preferred package manager. ```package-install @solidjs/router ``` ## Configure the routes The [`Router`](/solid-router/reference/components/router) component is the root component of the router. It is responsible for managing the URL and rendering the appropriate [`Route`](/solid-router/reference/components/route) based on the URL. To configure your routes, import the `Router` component and then start the application by rendering the router component. ```jsx import { render } from \"solid-js/web\"; import { Router } from \"@solidjs/router\"; const wrapper = document.getElementById(\"app\"); if (!wrapper) { throw new Error(\"Wrapper div not found\"); } render(() =\u003e \u003cRouter /\u003e, wrapper) ``` This sets up the router that will match on the url and render the appropriate route.", "term_freq": { "##": 2, "---": 2, "//github": 1, "//guides": 1, "//reactrouter": 1, "/\u003e": 1, "/solid-router/reference/components/route": 1, "/solid-router/reference/components/router": 1, "\u003crouter": 1, "=\u003e": 1, "\u003e-": 2, "@solidjs/router": 2, "allows": 1, "and": 10, "app": 1, "application": 2, "applications": 2, "appropriate": 2, "are": 1, "based": 2, "browser": 1, "by": 2, "called": 1, "change": 1, "client": 2, "client-side": 1, "com/en/main": 1, "com/release/routing/": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/getting-started/installation-and-setup": 1, "combines": 1, "component": 4, "components": 1, "configuration": 1, "configure": 3, "configuring": 1, "const": 1, "depend": 1, "description": 1, "div": 1, "document": 1, "ember": 1, "emberjs": 1, "error": 1, "for": 4, "found": 1, "from": 2, "get": 1, "getelementbyid": 1, "getting-started": 1, "github-document": 1, "guide": 1, "handles": 1, "how": 1, "https": 3, "if": 1, "import": 3, "in": 3, "initial": 1, "inspired": 1, "install": 2, "installation": 2, "installation-and-setup": 1, "is": 3, "it": 3, "jsx": 1, "learn": 1, "manager": 1, "managing": 1, "match": 1, "mdx": 1, "mechanism": 1, "multipage": 1, "new": 2, "not": 1, "of": 4, "on": 5, "or": 1, "out": 1, "package": 1, "package-install": 1, "paradigms": 1, "path": 1, "preferred": 1, "project": 1, "provides": 1, "react": 1, "render": 3, "rendering": 3, "responsible": 1, "root": 1, "route": 2, "router": 15, "routes": 3, "routing": 4, "server": 1, "server-side": 1, "sets": 1, "setup": 5, "simulate": 1, "single-page": 2, "site": 1, "solid": 5, "solid-js/web": 1, "spa": 2, "specified": 1, "start": 1, "started": 1, "starting": 1, "step-by-step": 1, "swapping": 1, "tags": 1, "that": 2, "the": 24, "them": 1, "then": 1, "this": 2, "throw": 1, "title": 1, "to": 6, "traditional": 1, "universal": 1, "up": 1, "url": 5, "use": 1, "use_cases": 1, "user": 1, "using": 1, "value": 1, "version": 1, "view": 1, "was": 1, "way": 1, "which": 1, "will": 1, "with": 2, "works": 1, "wrapper": 4, "your": 3 }, "length": 260 }, { "id": "6737c4ccf975dddfe76073e3", "doc_id": "a363d350c138ab42220a9da1", "title": "installation-and-setup", "url": "file:///tmp/devour-github-216944658/src/routes/solid-router/getting-started/installation-and-setup.mdx", "type": "github-document", "source": "solid:solid-router", "path": "devour_data/docs/installation-and-setup-a363d350.json", "content": "--- title: Installation and setup use_cases: \u003e- starting new project, initial setup, configuring routing, spa applications, client-side routing tags: - setup - installation - configuration - spa - routing - getting-started version: '1.0' description: \u003e- Learn how to install and configure Solid Router for client and server-side routing in your single-page applications with step-by-step setup guide. --- Solid Router is the universal router for Solid which works for rendering on the client or the server. It was inspired by and combines paradigms of [React Router](https://reactrouter.com/en/main) and the [Ember Router](https://guides.emberjs.com/release/routing/). A router provides a way to change a user's view based on the URL in the browser. This allows a \"single-page\" application to simulate a traditional multipage site. To use Solid Router, components called Routes that depend on the value of the URL (the \"path\") are specified, and the router handles the mechanism of swapping them in and out. ## Setup To get started with Solid Router, install it using your preferred package manager. ```package-install @solidjs/router ``` ## Configure the routes The [`Router`](/solid-router/reference/components/router) component is the root component of the router. It is responsible for managing the URL and rendering the appropriate [`Route`](/solid-router/reference/components/route) based on the URL. To configure your routes, import the `Router` component and then start the application by rendering the router component. ```jsx import { render } from \"solid-js/web\"; import { Router } from \"@solidjs/router\"; const wrapper = document.getElementById(\"app\"); if (!wrapper) { throw new Error(\"Wrapper div not found\"); } render(() =\u003e \u003cRouter /\u003e, wrapper) ``` This sets up the router that will match on the url and render the appropriate route.", "term_freq": { "##": 2, "---": 2, "///tmp/devour-github-216944658/src/routes/solid-router/getting-started/installation-and-setup": 1, "//guides": 1, "//reactrouter": 1, "/\u003e": 1, "/solid-router/reference/components/route": 1, "/solid-router/reference/components/router": 1, "\u003crouter": 1, "=\u003e": 1, "\u003e-": 2, "@solidjs/router": 2, "allows": 1, "and": 10, "app": 1, "application": 2, "applications": 2, "appropriate": 2, "are": 1, "based": 2, "browser": 1, "by": 2, "called": 1, "change": 1, "client": 2, "client-side": 1, "com/en/main": 1, "com/release/routing/": 1, "combines": 1, "component": 4, "components": 1, "configuration": 1, "configure": 3, "configuring": 1, "const": 1, "depend": 1, "description": 1, "div": 1, "document": 1, "ember": 1, "emberjs": 1, "error": 1, "file": 1, "for": 4, "found": 1, "from": 2, "get": 1, "getelementbyid": 1, "getting-started": 1, "github-document": 1, "guide": 1, "handles": 1, "how": 1, "https": 2, "if": 1, "import": 3, "in": 3, "initial": 1, "inspired": 1, "install": 2, "installation": 2, "installation-and-setup": 1, "is": 3, "it": 3, "jsx": 1, "learn": 1, "manager": 1, "managing": 1, "match": 1, "mdx": 1, "mechanism": 1, "multipage": 1, "new": 2, "not": 1, "of": 4, "on": 5, "or": 1, "out": 1, "package": 1, "package-install": 1, "paradigms": 1, "path": 1, "preferred": 1, "project": 1, "provides": 1, "react": 1, "render": 3, "rendering": 3, "responsible": 1, "root": 1, "route": 2, "router": 15, "routes": 3, "routing": 4, "server": 1, "server-side": 1, "sets": 1, "setup": 5, "simulate": 1, "single-page": 2, "site": 1, "solid": 5, "solid-js/web": 1, "spa": 2, "specified": 1, "start": 1, "started": 1, "starting": 1, "step-by-step": 1, "swapping": 1, "tags": 1, "that": 2, "the": 24, "them": 1, "then": 1, "this": 2, "throw": 1, "title": 1, "to": 6, "traditional": 1, "universal": 1, "up": 1, "url": 5, "use": 1, "use_cases": 1, "user": 1, "using": 1, "value": 1, "version": 1, "view": 1, "was": 1, "way": 1, "which": 1, "will": 1, "with": 2, "works": 1, "wrapper": 4, "your": 3 }, "length": 259 }, { "id": "a0d10426145c295a8127f319", "doc_id": "0df8e0e30ae8ce874be4b3af", "title": "installation-and-setup", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/getting-started/installation-and-setup.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/installation-and-setup.json", "content": "--- title: Install and configure order: 1 use_cases: \u003e- initial setup, meta tags configuration, seo setup, head management setup, ssr meta tags tags: - setup - installation - meta - configuration - seo version: '1.0' description: \u003e- Install and configure @solidjs/meta for head tag management. Set up dynamic titles, meta tags, and SEO optimization in Solid apps. --- :::note[Prerequisites] If using Solid `v1.0`, use version `0.27.x` or greater. For earlier versions (eg. `v0.x`), you must use `v0.26.x`. ::: ## Installation To get started, install using your preferred package manager. ```package-install @solidjs/meta ``` ## Setup 1. Wrap your application with [`\u003cMetaProvider /\u003e`](/solid-meta/reference/meta/metaprovider) 2. To include head tags within your application, render any of the following: 1. [`\u003cTitle /\u003e`](/solid-meta/reference/meta/title): Adds the `title` of the page. 2. [`\u003cMeta /\u003e`](/solid-meta/reference/meta/meta): Adds extra metadata to the page. 3. [`\u003cStyle /\u003e`](/solid-meta/reference/meta/style): Adds a `style` element to the page. 4. [`\u003cLink /\u003e`](/solid-meta/reference/meta/link): Specifies a relationship between the page and an external resource. 5. [`\u003cBase /\u003e`](/solid-meta/reference/meta/base): Specifies the base URL for all relative URLs in the document. 6. [`useHead`](/solid-meta/reference/meta/use-head): Inserts arbitrary head tags when a dedicated component does not exist. - These components can be used multiple times within the application. 3. If using Solid on the server with JSX, no additional configuration is required. Here is an example of how your code might look after this setup. ```js import { MetaProvider, Title, Link, Meta } from \"@solidjs/meta\"; const App = () =\u003e ( \u003cMetaProvider\u003e \u003cdiv class=\"Home\"\u003e \u003cTitle\u003eTitle of page\u003c/Title\u003e \u003cLink rel=\"canonical\" href=\"http://solidjs.com/\" /\u003e \u003cMeta name=\"example\" content=\"whatever\" /\u003e \u003c/div\u003e \u003c/MetaProvider\u003e ); ``` On the server, tags are collected, and then on the client, server-generated tags are replaced with those rendered on the client side. This process is important for maintaining the expected behavior, such as Single Page Applications (SPAs) when pages load that require changes to the head tags. However, you can manage asset insertion using `getAssets` from `solid-js/web`.", "term_freq": { "##": 2, "---": 2, "//github": 1, "//solidjs": 1, "/\u003e": 8, "/solid-meta/reference/meta/base": 1, "/solid-meta/reference/meta/link": 1, "/solid-meta/reference/meta/meta": 1, "/solid-meta/reference/meta/metaprovider": 1, "/solid-meta/reference/meta/style": 1, "/solid-meta/reference/meta/title": 1, "/solid-meta/reference/meta/use-head": 1, "26": 1, "27": 1, "\u003c/div\u003e": 1, "\u003c/metaprovider\u003e": 1, "\u003cbase": 1, "\u003cdiv": 1, "\u003clink": 2, "\u003cmeta": 2, "\u003cmetaprovider": 1, "\u003cmetaprovider\u003e": 1, "\u003cstyle": 1, "\u003ctitle": 1, "\u003ctitle\u003etitle": 1, "=\u003e": 1, "\u003e-": 2, "@solidjs/meta": 3, "additional": 1, "adds": 3, "after": 1, "all": 1, "an": 2, "and": 5, "any": 1, "app": 1, "application": 3, "applications": 1, "apps": 1, "arbitrary": 1, "are": 2, "as": 1, "asset": 1, "base": 1, "be": 1, "behavior": 1, "between": 1, "can": 2, "canonical": 1, "changes": 1, "class=": 1, "client": 2, "code": 1, "collected": 1, "com/": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-meta/getting-started/installation-and-setup": 1, "component": 1, "components": 1, "configuration": 3, "configure": 2, "const": 1, "content=": 1, "dedicated": 1, "description": 1, "document": 1, "does": 1, "dynamic": 1, "earlier": 1, "eg": 1, "element": 1, "example": 2, "exist": 1, "expected": 1, "external": 1, "extra": 1, "following": 1, "for": 4, "from": 2, "get": 1, "getassets": 1, "github-document": 1, "greater": 1, "head": 5, "here": 1, "home": 1, "how": 1, "however": 1, "href=": 1, "http": 1, "https": 1, "if": 2, "import": 1, "important": 1, "in": 2, "include": 1, "initial": 1, "insertion": 1, "inserts": 1, "install": 3, "installation": 2, "installation-and-setup": 1, "is": 3, "js": 1, "jsx": 1, "link": 1, "load": 1, "look": 1, "maintaining": 1, "manage": 1, "management": 2, "manager": 1, "mdx": 1, "meta": 5, "metadata": 1, "metaprovider": 1, "might": 1, "multiple": 1, "must": 1, "name=": 1, "no": 1, "not": 1, "note": 1, "of": 4, "on": 4, "optimization": 1, "or": 1, "order": 1, "package": 1, "package-install": 1, "page": 5, "page\u003c/title\u003e": 1, "pages": 1, "preferred": 1, "prerequisites": 1, "process": 1, "rel=": 1, "relationship": 1, "relative": 1, "render": 1, "rendered": 1, "replaced": 1, "require": 1, "required": 1, "resource": 1, "seo": 3, "server": 2, "server-generated": 1, "set": 1, "setup": 6, "side": 1, "single": 1, "solid": 3, "solid-js/web": 1, "spas": 1, "specifies": 2, "ssr": 1, "started": 1, "style": 1, "such": 1, "tag": 1, "tags": 9, "that": 1, "the": 15, "then": 1, "these": 1, "this": 2, "those": 1, "times": 1, "title": 3, "titles": 1, "to": 5, "up": 1, "url": 1, "urls": 1, "use": 2, "use_cases": 1, "used": 1, "usehead": 1, "using": 4, "v0": 2, "v1": 1, "version": 2, "versions": 1, "whatever": 1, "when": 2, "with": 3, "within": 2, "wrap": 1, "you": 2, "your": 4 }, "length": 304 }, { "id": "edaa1614e7d20f508cf91820", "doc_id": "0f1666f8bc1c83689c748173", "title": "intro-to-reactivity", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/intro-to-reactivity.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/intro-to-reactivity.json", "content": "--- title: Intro to reactivity order: 1 use_cases: \u003e- learning reactivity, understanding signals, reactive principles, state management basics, getting started tags: - reactivity - signals - fundamentals - state - subscribers - basics version: '1.0' description: \u003e- Master Solid's reactive system fundamentals: signals, subscribers, and automatic UI updates for responsive applications. --- **Note**: While this guide is useful for understanding reactive systems, it does use some Solid-specific terminology. Reactivity powers the interactivity in Solid applications. This programming paradigm refers to a system's ability to respond to changes in data or state automatically. With Solid, reactivity is the basis of its design, ensuring applications stay up-to-date with their underlying data. ## Importance of reactivity 1. Reactivity keeps the user interface (UI) and state in sync, which reduces the need for manual updates. 2. Real-time updates create a more responsive and interactive user experience. ```jsx function Counter() { const [count, setCount] = createSignal(0); const increment = () =\u003e setCount((prev) =\u003e prev + 1); return ( \u003cdiv\u003e \u003cspan\u003eCount: {count()}\u003c/span\u003e{\" \"} {/* Only `count()` is updated when the button is clicked. */} \u003cbutton type=\"button\" onClick={increment}\u003e Increment \u003c/button\u003e \u003c/div\u003e ); } ``` This `Counter` function sets up a button that, when clicked, calls the `increment` function to increase the `count` by one. This updates just the number displayed _without_ refreshing the entire component. \u003cEraserLink href=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=cry9JT4nroFQ4rRxzOpvCg\" preview=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=cry9JT4nroFQ4rRxzOpvCg\u0026type=embed\" /\u003e ## Reactive principles ### Signals Signals serve as core elements in reactive systems, playing an important role in data management and system responsiveness. They are responsible for storing and managing data, as well as triggering updates across the system. This is done through the use of getters and setters. ```jsx const [count, setCount] = createSignal(0); // ^ getter ^ setter ``` \u003cEraserLink href=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=lseAEjGlKLslaVsTlfej_g\" preview=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=lseAEjGlKLslaVsTlfej_g\u0026type=embed\" /\u003e - **Getter**: A function responsible for accessing the current value of the signal. You call a getter to access the data stored in a signal within a component. - **Setter**: The function used to modify a signal's value. To trigger reactive updates across an application, you call a setter to update the value of a signal. ```js console.log(count()); // `count()` is a getter that returns the current value of `count`, which is `0`. setCount(1); // the setter, `setCount`, updates the value of `count`. console.log(count()); // the updated value of `count` is now `1`. ``` ### Subscribers Subscribers are the other core element in reactive systems. They are responsible for tracking changes in signals and updating the system accordingly. They are automated responders that keep the system up-to-date with the latest data changes. Subscribers work based on two main actions: - **Observation**: At their core, subscribers observe signals. This keeps the subscriber primed to pick up on any changes to the signal they are tracking. - **Response**: When a signal changes, the subscriber is notified. This triggers the subscriber to respond to the change in the signal. This can involve tasks like updating the UI or calling external functions. ```jsx function Counter() { const [count, setCount] = createSignal(0); const increment = () =\u003e setCount((prev) =\u003e prev + 1); createEffect(() =\u003e { console.log(count()); }); // the `createEffect` will trigger the console log every time `count` changes. } ``` ## State management State management is the process of managing the state of an application. This involves storing and updating data, as well as responding to the changes in it. With Solid, state management is handled through signals and subscribers. Signals are used to store and update data, while subscribers are used to respond to changes in the data. ### Tracking changes Tracking changes involves monitoring any updates to the data and responding accordingly. This is done through the use of subscribers. When a signal is not accessed within a tracking scope, an update to the signal will not trigger an update. This happens because if a signal is not being tracked, it is not able to notify any subscribers of the change. ```jsx const [count, setCount] = createSignal(0); console.log(\"Count:\", count()); setCount(1); // Output: Count: 0 // `count` is not being tracked, so the console log will not update when `count` changes. ``` Initialization, or creation is a **one-time event** that doesn't cause tracking. To track a signal, it must be accessed within the scope of a subscriber. Reactive primitives, such as [memos](/concepts/derived-values/memos) can be used to create derived values from signals or other memos, and [effects](/concepts/effects) to create subscribers that use the reactive graph output once it's settled. ```jsx const [count, setCount] = createSignal(0); createEffect(() =\u003e { console.log(\"Count:\", count()); }); setCount(1); // Output: Count: 0 // Count: 1 ``` ### Updating the UI The UI of a Solid application is built using [JSX](/concepts/understanding-jsx). JSX creates a tracking scope behind the scenes, which allows signals to be tracked within the return statement of a component. ```jsx function Counter() { const [count, setCount] = createSignal(0); const increment = () =\u003e setCount((prev) =\u003e prev + 1); return ( \u003cdiv\u003e \u003cspan\u003eCount: {count()}\u003c/span\u003e{\" \"} {/* ✅ will update when `count()` changes. */} \u003cbutton type=\"button\" onClick={increment}\u003e Increment \u003c/button\u003e \u003c/div\u003e ); } ``` Components, much like other functions, will only run _once_. This means that if a signal is accessed outside of the return statement, it will run on initialization, but any updates to the signal will not trigger an update. ```jsx function Counter() { const [count, setCount] = createSignal(0); const increment = () =\u003e setCount((prev) =\u003e prev + 1); console.log(\"Count:\", count()); // ❌ not tracked - only runs once during initialization. createEffect(() =\u003e { console.log(count()); // ✅ will update whenever `count()` changes. }); return ( \u003cdiv\u003e \u003cspan\u003eCount: {count()}\u003c/span\u003e{/* ✅ will update whenever `count()` changes. */} \u003cbutton type=\"button\" onClick={increment}\u003e Increment \u003c/button\u003e \u003c/div\u003e ); } ``` To learn more about managing state in Solid, visit the [guide on state management](/guides/state-management). ## Synchronous vs. asynchronous Reactive systems are designed to respond to changes in data. These responses can be immediate or delayed, depending on the nature of the system. Often, the choice between these two depends on the requirements of the application and the nature of the tasks involved. ### Synchronous reactivity [Synchronous](https://developer.mozilla.org/en-US/docs/Glossary/Synchronous) reactivity is Solid's default reactivity mode, where a system responds to changes in a direct and linear fashion. When a signal changes, any corresponding subscribers are immediately updated in an ordered manner. With synchronous reactivity, the system is able to respond to changes in a predictable manner. This is useful in scenarios where the order of updates is important. For example, if a subscriber depends on another signal, it is important that the subscriber is updated after the signal it depends on. ```jsx const [count, setCount] = createSignal(0); const [double, setDouble] = createSignal(0); createEffect(() =\u003e { setDouble(count() * 2); }); ``` In this example, the `double` signal will always be updated after `count` due to synchronous reactivity. This ensures that `double` is always up-to-date with the latest value of `count`. ### Asynchronous reactivity [Asynchronous](https://developer.mozilla.org/en-US/docs/Glossary/Asynchronous) reactivity is when a system responds to changes in a delayed or non-linear fashion. When a signal changes, the corresponding subscribers are not immediately updated. Instead, the system waits for a specific event or task to complete before updating the subscribers. This is important in scenarios where subscribers depend on multiple signals. In these cases, updating one signal before another could result in data inconsistency. For example, if a subscriber depends on two signals, it is important that the subscriber is updated after both signals have been updated. Rather, the system waits for both signals to be updated before updating the subscriber. **Note:** When asynchronous reactivity is present, it is important to ensure that the system is able to handle the delay in updates. [`batch`](/reference/reactive-utilities/batch) can be used to delay an update so the subscriber runs after each signal has been updated. ## Key concepts - Signals are the core elements of a reactive system. They are responsible for storing and managing data. - Signals are both readable and writeable because of getters and setters. - Subscribers are automated responders that track changes in signals and update the system accordingly. - Signals and subscribers work together to ensure that the system is kept up-to-date with the latest data changes. - A reactive system is built on the principles of data-driven reactivity. This means that the system's reactivity is driven by the data it is built on. - Reactive systems can be synchronous or asynchronous. If you want to dive deeper, visit the [guide on fine-grained reactivity](/advanced-concepts/fine-grained-reactivity).", "term_freq": { "##": 5, "###": 6, "**": 1, "**getter**": 1, "**note": 1, "**note**": 1, "**observation**": 1, "**one-time": 1, "**response**": 1, "**setter**": 1, "*/": 3, "---": 2, "/*": 3, "//": 11, "//app": 4, "//developer": 2, "//github": 1, "/\u003e": 2, "/advanced-concepts/fine-grained-reactivity": 1, "/concepts/derived-values/memos": 1, "/concepts/effects": 1, "/concepts/understanding-jsx": 1, "/guides/state-management": 1, "/reference/reactive-utilities/batch": 1, "\u003c/button\u003e": 3, "\u003c/div\u003e": 3, "\u003c/span\u003e": 3, "\u003cbutton": 3, "\u003cdiv\u003e": 3, "\u003ceraserlink": 2, "\u003cspan\u003ecount": 3, "=\u003e": 12, "\u003e-": 2, "_once_": 1, "_without_": 1, "ability": 1, "able": 3, "about": 1, "access": 1, "accessed": 3, "accessing": 1, "accordingly": 3, "across": 2, "actions": 1, "after": 4, "allows": 1, "always": 2, "an": 8, "and": 19, "another": 2, "any": 5, "application": 4, "applications": 3, "are": 14, "as": 6, "asynchronous": 5, "at": 1, "automated": 2, "automatic": 1, "automatically": 1, "based": 1, "basics": 2, "basis": 1, "batch": 1, "be": 8, "because": 2, "been": 2, "before": 3, "behind": 1, "being": 2, "between": 1, "both": 3, "built": 3, "but": 1, "button": 5, "by": 2, "call": 2, "calling": 1, "calls": 1, "can": 5, "cases": 1, "cause": 1, "change": 2, "changes": 22, "choice": 1, "clicked": 2, "com/solidjs/solid-docs/blob/head/src/routes/concepts/intro-to-reactivity": 1, "complete": 1, "component": 3, "components": 1, "concepts": 1, "console": 9, "const": 13, "core": 4, "corresponding": 2, "could": 1, "count": 39, "counter": 5, "create": 3, "createeffect": 5, "creates": 1, "createsignal": 9, "creation": 1, "current": 2, "data": 15, "data-driven": 1, "deeper": 1, "default": 1, "delay": 2, "delayed": 2, "depend": 1, "depending": 1, "depends": 4, "derived": 1, "description": 1, "design": 1, "designed": 1, "direct": 1, "displayed": 1, "dive": 1, "does": 1, "doesn": 1, "done": 2, "double": 3, "driven": 1, "due": 1, "during": 1, "each": 1, "effects": 1, "element": 1, "elements": 2, "elements=cry9jt4nrofq4rrxzopvcg": 1, "elements=cry9jt4nrofq4rrxzopvcg\u0026type=embed": 1, "elements=lseaejglklslavstlfej_g": 1, "elements=lseaejglklslavstlfej_g\u0026type=embed": 1, "ensure": 2, "ensures": 1, "ensuring": 1, "entire": 1, "eraser": 4, "event": 1, "event**": 1, "every": 1, "example": 3, "experience": 1, "external": 1, "fashion": 2, "fine-grained": 1, "for": 11, "from": 1, "function": 8, "functions": 2, "fundamentals": 2, "getter": 3, "getters": 2, "getting": 1, "github-document": 1, "graph": 1, "guide": 3, "handle": 1, "handled": 1, "happens": 1, "has": 1, "have": 1, "href=": 2, "https": 7, "if": 5, "immediate": 1, "immediately": 2, "importance": 1, "important": 6, "in": 24, "inconsistency": 1, "increase": 1, "increment": 11, "initialization": 3, "instead": 1, "interactive": 1, "interactivity": 1, "interface": 1, "intro": 1, "intro-to-reactivity": 1, "involve": 1, "involved": 1, "involves": 2, "io/workspace/madvfw5oryupjowslyk9": 2, "io/workspace/madvfw5oryupjowslyk9/preview": 2, "is": 37, "it": 11, "its": 1, "js": 1, "jsx": 10, "just": 1, "keep": 1, "keeps": 2, "kept": 1, "key": 1, "latest": 3, "learn": 1, "learning": 1, "like": 2, "linear": 1, "log": 9, "main": 1, "management": 6, "managing": 4, "manner": 2, "manual": 1, "master": 1, "mdx": 1, "means": 2, "memos": 2, "mode": 1, "modify": 1, "monitoring": 1, "more": 2, "mozilla": 2, "much": 1, "multiple": 1, "must": 1, "nature": 2, "need": 1, "non-linear": 1, "not": 9, "notified": 1, "notify": 1, "now": 1, "number": 1, "observe": 1, "of": 24, "often": 1, "on": 13, "once": 2, "onclick=": 3, "one": 2, "only": 3, "or": 8, "order": 2, "ordered": 1, "org/en-us/docs/glossary/asynchronous": 1, "org/en-us/docs/glossary/synchronous": 1, "other": 3, "output": 3, "outside": 1, "paradigm": 1, "pick": 1, "playing": 1, "powers": 1, "predictable": 1, "present": 1, "prev": 8, "preview=": 2, "primed": 1, "primitives": 1, "principles": 3, "process": 1, "programming": 1, "rather": 1, "reactive": 13, "reactivity": 18, "readable": 1, "real-time": 1, "reduces": 1, "refers": 1, "refreshing": 1, "requirements": 1, "respond": 5, "responders": 2, "responding": 2, "responds": 2, "responses": 1, "responsible": 4, "responsive": 2, "responsiveness": 1, "result": 1, "return": 5, "returns": 1, "role": 1, "run": 2, "runs": 2, "scenarios": 2, "scenes": 1, "scope": 3, "serve": 1, "setcount": 16, "setdouble": 2, "sets": 1, "setter": 3, "setters": 2, "settled": 1, "signal": 20, "signals": 19, "so": 2, "solid": 7, "solid-specific": 1, "some": 1, "specific": 1, "started": 1, "state": 10, "statement": 2, "stay": 1, "store": 1, "stored": 1, "storing": 3, "subscriber": 10, "subscribers": 17, "such": 1, "sync": 1, "synchronous": 6, "system": 18, "systems": 5, "tags": 1, "task": 1, "tasks": 2, "terminology": 1, "that": 13, "the": 81, "their": 2, "these": 3, "they": 5, "this": 17, "through": 3, "time": 1, "title": 1, "to": 40, "together": 1, "track": 2, "tracked": 4, "tracking": 7, "trigger": 4, "triggering": 1, "triggers": 1, "two": 3, "type=": 3, "ui": 5, "underlying": 1, "understanding": 2, "up": 2, "up-to-date": 4, "update": 11, "updated": 10, "updates": 11, "updating": 7, "use": 4, "use_cases": 1, "used": 5, "useful": 2, "user": 2, "using": 1, "value": 7, "values": 1, "version": 1, "visit": 2, "vs": 1, "waits": 2, "want": 1, "well": 2, "when": 10, "whenever": 2, "where": 3, "which": 3, "while": 2, "will": 10, "with": 7, "within": 4, "work": 2, "writeable": 1, "you": 3, "✅": 3, "❌": 1 }, "length": 1336 }, { "id": "e0479d55174f394924af1a78", "doc_id": "4dda2f67241253385a412de5", "title": "Introduction, Technical Explanation | Remix", "url": "https://v2.remix.run/docs/discussion/introduction", "type": "html", "source": "remix:does", "path": "devour_data/docs/introduction--technical-explanation---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsIntroduction, Technical ExplanationGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageCompilerHTTP Handler and AdaptersServer FrameworkBrowser FrameworkOn this pageCompilerHTTP Handler and AdaptersServer FrameworkBrowser FrameworkIntroduction, Technical Explanation Built on top of React Router, Remix is four things: A compiler A server-side HTTP handler A server framework A browser framework Compiler Everything in Remix starts with the compiler: remix vite:build. Using Vite, this creates a few things: A server HTTP handler, usually in build/server/index.js (it's configurable) that includes all routes and modules together to be able to render on the server and handle any other server-side requests for resources. A browser build, usually in build/client/*. This includes automatic code splitting by route, fingerprinted asset imports (like CSS and images), etc. Anything needed to run an application in the browser. An asset manifest. Both the client and the server use this manifest to know the entire dependency graph. This is useful for preloading resources in the initial server render as well as prefetching them for client-side transitions. This is how Remix is able to eliminate the render+fetch waterfalls so common in web apps today. With these build artifacts, an application can be deployed to any hosting service that runs JavaScript. HTTP Handler and Adapters While Remix runs on the server, it is not actually a server. It's just a handler that is given to an actual JavaScript server. It's built on the Web Fetch API instead of Node.js. This enables Remix to run in any Node.js server like Vercel, Netlify, Architect, etc. as well as non-Node.js environments like Cloudflare Workers and Deno Deploy. This is what Remix looks like when running in an express app: const remix = require(\"@remix-run/express\"); const express = require(\"express\"); const app = express(); app.all( \"*\", remix.createRequestHandler({ build: require(\"./build/server\"), }) ); Express (or Node.js) is the actual server, Remix is just a handler on that server. The \"@remix-run/express\" package is called an adapter. Remix handlers are server agnostic. Adapters make them work for a specific server by converting the server's request/response API into the Fetch API on the way in and then adapting the Fetch Response coming from Remix into the server's response API. Here's some pseudocode of what an adapter does: export function createRequestHandler({ build }) { // creates a Fetch API request handler from the server build const handleRequest = createRemixRequestHandler(build); // returns an express.js specific handler for the express server return async (req, res) =\u003e { // adapts the express.req to a Fetch API request const request = createRemixRequest(req); // calls the app handler and receives a Fetch API response const response = await handleRequest(request); // adapts the Fetch API response to the express.res sendRemixResponse(res, response); }; } Real adapters do a bit more than that, but that's the gist of it. Not only does this enable you to deploy Remix anywhere, it also lets you incrementally adopt it in an existing JavaScript server since you can have routes outside of Remix that your server continues to handle before getting to Remix. Additionally, if Remix doesn't have an adapter for your server already, you can look at the source of one of the adapters and build your own. Server Framework If you're familiar with server-side MVC web frameworks like Rails and Laravel, Remix is the View and Controller, but it leaves the Model up to you. There are a lot of great databases, ORMs, mailers, etc. in the JavaScript ecosystem to fill that space. Remix also has helpers around the Fetch API for cookie and session management. Instead of having a split between View and Controller, Remix Route modules take on both responsibilities. Most server-side frameworks are \"model focused\". A controller manages multiple URLs for a single model. Remix is UI-focused. Routes can handle an entire URL or just a segment of the URL. When a route maps to just a segment, the nested URL segments become nested layouts in the UI. In this way, each layout (view) can be its own controller and then Remix will aggregate the data and components to build the complete UI. More often than not, a Remix route module can contain both the UI and the interactions with the models in the same file, which leads to really nice developer ergonomics and productivity. Route modules have three primary exports: loader, action, and default (component). // Loaders only run on the server and provide data // to your component on GET requests export async function loader() { return json(await db.projects.findAll()); } // The default export is the component that will be // rendered when a route matches the URL. This runs // both on the server and the client export default function Projects() { const projects = useLoaderData\u003ctypeof loader\u003e(); const actionData = useActionData\u003ctypeof action\u003e(); return ( \u003cdiv\u003e {projects.map((project) =\u003e ( \u003cLink key={project.slug} to={project.slug}\u003e {project.title} \u003c/Link\u003e ))} \u003cForm method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton type=\"submit\"\u003eCreate New Project\u003c/button\u003e \u003c/Form\u003e {actionData?.errors ? ( \u003cErrorMessages errors={actionData.errors} /\u003e ) : null} {/* outlets render the nested child routes that match the URL deeper than this route, allowing each layout to co-locate the UI and controller code in the same file */} \u003cOutlet /\u003e \u003c/div\u003e ); } // Actions only run on the server and handle POST // PUT, PATCH, and DELETE. They can also provide data // to the component export async function action({ request, }: ActionFunctionArgs) { const form = await request.formData(); const errors = validate(form); if (errors) { return json({ errors }); } await createProject({ title: form.get(\"title\") }); return json({ ok: true }); } You can actually use Remix as just a server-side framework without using any browser JavaScript at all. The route conventions for data loading with loader, mutations with action and HTML forms, and components that render at URLs, can provide the core feature set of a lot of web projects. In this way, Remix scales down. Not every page in your application needs a bunch of JavaScript in the browser, and not every user interaction requires any extra flair than the browser's default behaviors. In Remix, you can build it the simple way first, and then scale up without changing the fundamental model. Additionally, the majority of the app works before JavaScript loads in the browser, which makes Remix apps resilient to choppy network conditions by design. If you're not familiar with traditional back-end web frameworks, you can think of Remix routes as React components that are already their own API route and already know how to load and submit data to themselves on the server. Browser Framework Once Remix has served the document to the browser, it \"hydrates\" the page with the browser build's JavaScript modules. This is where we talk a lot about Remix \"emulating the browser\". When the user clicks a link, instead of making a round trip to the server for the entire document and all the assets, Remix simply fetches the data for the next page and updates the UI. Additionally, when users submit a \u003cForm\u003e to update data, instead of doing a normal HTML document request, the browser runtime will make a fetch to the server instead and automatically revalidate all data on the page and update it with React. This has many performance benefits over making a full-document request: Assets don't need to be re-downloaded (or pulled from the cache) Assets don't need to be parsed by the browser again The data fetched is much smaller than the entire document (sometimes orders of magnitude) Because Remix enhances HTML APIs (\u003ca\u003e and \u003cform\u003e), your app tends to work even before JavaScript has loaded on the page Remix also has some built-in optimizations for client-side navigation. It knows which layouts will persist between the two URLs, so it only fetches the data for the ones that are changing. A full document request would require all data to be fetched on the server, wasting resources on your back end and slowing down your app. This approach also has UX benefits like not resetting the scroll position of a sidebar nav and allowing you to move focus to something that makes more sense than the top of the document. Remix can also prefetch all resources for a page when the user is about to click a link. The browser framework knows about the compiler's asset manifest. It can match the URL of the link, read the manifest, and then prefetch all data, JavaScript modules, and even CSS resources for the next page. This is how Remix apps feel fast even when networks are slow. Remix then provides client side APIs, so you can create rich user experiences without changing the fundamental model of HTML and browsers. Taking our route module from before, here are a few small but useful UX improvements to the form that you can only do with JavaScript in the browser: Disable the button when the form is being submitted Focus the input when server-side form validation fails Animate in the error messages export default function Projects() { const projects = useLoaderData\u003ctypeof loader\u003e(); const actionData = useActionData\u003ctypeof action\u003e(); const { state } = useNavigation(); const busy = state === \"submitting\"; const inputRef = React.useRef(); React.useEffect(() =\u003e { if (actionData.errors) { inputRef.current.focus(); } }, [actionData]); return ( \u003cdiv\u003e {projects.map((project) =\u003e ( \u003cLink key={project.slug} to={project.slug}\u003e {project.title} \u003c/Link\u003e ))} \u003cForm method=\"post\"\u003e \u003cinput ref={inputRef} name=\"title\" /\u003e \u003cbutton type=\"submit\" disabled={busy}\u003e {busy ? \"Creating...\" : \"Create New Project\"} \u003c/button\u003e \u003c/Form\u003e {actionData?.errors ? ( \u003cFadeIn\u003e \u003cErrorMessages errors={actionData.errors} /\u003e \u003c/FadeIn\u003e ) : null} \u003cOutlet /\u003e \u003c/div\u003e ); } What's most interesting about this code sample is that it is only additive. The entire interaction is still fundamentally the same thing and even works at a basic level before JavaScript loads, the only difference is the user will be provided by the browser (spinning favicon, etc.) instead of the app (useNavigation().state). Because Remix reaches into the controller level of the backend, it can do this seamlessly. And while it doesn't reach as far back into the stack as server-side frameworks like Rails and Laravel, it does reach way farther up the stack into the browser to make the transition from the back end to the front end seamless. For example. Building a plain HTML form and server-side handler in a back-end heavy web framework is just as easy to do as it is in Remix. But as soon as you want to cross over into an experience with animated validation messages, focus management, and pending UI, it requires a fundamental change in the code. Typically, people build an API route and then bring in a splash of client-side JavaScript to connect the two. With Remix, you simply add some code around the existing \"server side view\" without changing how it works fundamentally. The browser runtime takes over the server communication to provide an enhanced user experience beyond the default browser behaviors. We borrowed an old term and called this Progressive Enhancement in Remix. Start small with a plain HTML form (Remix scales down) and then scale the UI up when you have the time and ambition.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_975\\\":-5,\\\"_976\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":974},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"docs/discussion/introduction.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"introduction-technical-explanation\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#introduction-technical-explanation\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eIntroduction, Technical Explanation\\u003c/h1\\u003e\\\\n\\u003cp\\u003eBuilt on top of \\u003ca href=\\\\\\\"https://reactrouter.com\\\\\\\"\\u003eReact Router\\u003c/a\\u003e, Remix is four things:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eA compiler\\u003c/li\\u003e\\\\n\\u003cli\\u003eA server-side HTTP handler\\u003c/li\\u003e\\\\n\\u003cli\\u003eA server framework\\u003c/li\\u003e\\\\n\\u003cli\\u003eA browser framework\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003ch2 id=\\\\\\\"compiler\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#compiler\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eCompiler\\u003c/h2\\u003e\\\\n\\u003cp\\u003eEverything in Remix starts with the compiler: \\u003ccode\\u003eremix vite:build\\u003c/code\\u003e. Using \\u003ca href=\\\\\\\"https://vitejs.dev\\\\\\\"\\u003eVite\\u003c/a\\u003e, this creates a few things:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eA server HTTP handler, usually in \\u003ccode\\u003ebuild/server/index.js\\u003c/code\\u003e (it's configurable) that includes all routes and modules together to be able to render on the server and handle any other server-side requests for resources.\\u003c/li\\u003e\\\\n\\u003cli\\u003eA browser build, usually in \\u003ccode\\u003ebuild/client/*\\u003c/code\\u003e. This includes automatic code splitting by route, fingerprinted asset imports (like CSS and images), etc. Anything needed to run an application in the browser.\\u003c/li\\u003e\\\\n\\u003cli\\u003eAn asset manifest. Both the client and the server use this manifest to know the entire dependency graph. This is useful for preloading resources in the initial server render as well as prefetching them for client-side transitions. This is how Remix is able to eliminate the render+fetch waterfalls so common in web apps today.\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eWith these build artifacts, an application can be deployed to any hosting service that runs JavaScript.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"http-handler-and-adapters\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#http-handler-and-adapters\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eHTTP Handler and Adapters\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhile Remix runs on the server, it is not actually a server. It's just a handler that is given to an actual JavaScript server.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIt's built on the \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\\\\\\\"\\u003eWeb Fetch API\\u003c/a\\u003e instead of Node.js. This enables Remix to run in any Node.js server like \\u003ca href=\\\\\\\"https://vercel.com\\\\\\\"\\u003eVercel\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://netlify.com\\\\\\\"\\u003eNetlify\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://arc.codes\\\\\\\"\\u003eArchitect\\u003c/a\\u003e, etc. as well as non-Node.js environments like \\u003ca href=\\\\\\\"https://workers.cloudflare.com/\\\\\\\"\\u003eCloudflare Workers\\u003c/a\\u003e and \\u003ca href=\\\\\\\"https://deno.com/deploy/docs\\\\\\\"\\u003eDeno Deploy\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThis is what Remix looks like when running in an express app:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erequire\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/express\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eexpress\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erequire\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eexpress\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eapp\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eexpress\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eapp\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eall\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e*\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateRequestHandler\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e build: \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erequire\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./build/server\\u003c/span\\u003e\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e })\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e);\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eExpress (or Node.js) is the actual server, Remix is just a handler on that server. The \\u003ccode\\u003e\\\\\\\"@remix-run/express\\\\\\\"\\u003c/code\\u003e package is called an adapter. Remix handlers are server agnostic. Adapters make them work for a specific server by converting the server's request/response API into the Fetch API on the way in and then adapting the Fetch Response coming from Remix into the server's response API. Here's some pseudocode of what an adapter does:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateRequestHandler\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebuild\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// creates a Fetch API request handler from the server build\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehandleRequest\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateRemixRequestHandler\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebuild\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// returns an express.js specific handler for the express server\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ereq\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eres\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// adapts the express.req to a Fetch API request\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateRemixRequest\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ereq\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// calls the app handler and receives a Fetch API response\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eresponse\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehandleRequest\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// adapts the Fetch API response to the express.res\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esendRemixResponse\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eres\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eresponse\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eReal adapters do a bit more than that, but that's the gist of it. Not only does this enable you to deploy Remix anywhere, it also lets you incrementally adopt it in an existing JavaScript server since you can have routes outside of Remix that your server continues to handle before getting to Remix.\\u003c/p\\u003e\\\\n\\u003cp\\u003eAdditionally, if Remix doesn't have an adapter for your server already, you can look at the source of one of the adapters and build your own.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"server-framework\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#server-framework\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eServer Framework\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIf you're familiar with server-side MVC web frameworks like Rails and Laravel, Remix is the View and Controller, but it leaves the Model up to you. There are a lot of great databases, ORMs, mailers, etc. in the JavaScript ecosystem to fill that space. Remix also has helpers around the Fetch API for cookie and session management.\\u003c/p\\u003e\\\\n\\u003cp\\u003eInstead of having a split between View and Controller, Remix Route modules take on both responsibilities.\\u003c/p\\u003e\\\\n\\u003cp\\u003eMost server-side frameworks are \\\\\\\"model focused\\\\\\\". A controller manages \\u003cem\\u003emultiple URLs\\u003c/em\\u003e for a single model.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix is \\u003cem\\u003eUI-focused\\u003c/em\\u003e. Routes can handle an entire URL or just a segment of the URL. When a route maps to just a segment, the nested URL segments become nested layouts in the UI. In this way, each layout (view) can be its own controller and then Remix will aggregate the data and components to build the complete UI.\\u003c/p\\u003e\\\\n\\u003cp\\u003eMore often than not, a Remix route module can contain both the UI and the interactions with the models in the same file, which leads to really nice developer ergonomics and productivity.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRoute modules have three primary exports: \\u003ccode\\u003eloader\\u003c/code\\u003e, \\u003ccode\\u003eaction\\u003c/code\\u003e, and \\u003ccode\\u003edefault\\u003c/code\\u003e (component).\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// Loaders only run on the server and provide data\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// to your component on GET requests\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edb\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eprojects\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efindAll\\u003c/span\\u003e());\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// The default export is the component that will be\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// rendered when a route matches the URL. This runs\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// both on the server and the client\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eProjects\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprojects\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eactionData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseActionData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprojects\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emap\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLink\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ekey\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eslug\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eto\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eslug\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etitle\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e ))\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etitle\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003eCreate New Project\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eactionData\\u003c/span\\u003e?.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eErrorMessages\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eerrors\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eactionData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* outlets render the nested child routes\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e that match the URL deeper than this route,\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e allowing each layout to co-locate the UI and\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e controller code in the same file */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// Actions only run on the server and handle POST\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// PUT, PATCH, and DELETE. They can also provide data\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// to the component\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eform\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalidate\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eform\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"50\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateProject\\u003c/span\\u003e({ title: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eform\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etitle\\u003c/span\\u003e\\\\\\\") });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"51\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({ ok: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"52\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eYou can actually use Remix as just a server-side framework without using any browser JavaScript at all. The route conventions for data loading with \\u003ccode\\u003eloader\\u003c/code\\u003e, mutations with \\u003ccode\\u003eaction\\u003c/code\\u003e and HTML forms, and components that render at URLs, can provide the core feature set of a lot of web projects.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIn this way, \\u003cstrong\\u003eRemix scales down\\u003c/strong\\u003e. Not every page in your application needs a bunch of JavaScript in the browser, and not every user interaction requires any extra flair than the browser's default behaviors. In Remix, you can build it the simple way first, and then scale up without changing the fundamental model. Additionally, the majority of the app works before JavaScript loads in the browser, which makes Remix apps resilient to choppy network conditions by design.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you're not familiar with traditional back-end web frameworks, you can think of Remix routes as React components that are already their own API route and already know how to load and submit data to themselves on the server.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"browser-framework\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#browser-framework\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eBrowser Framework\\u003c/h2\\u003e\\\\n\\u003cp\\u003eOnce Remix has served the document to the browser, it \\\\\\\"hydrates\\\\\\\" the page with the browser build's JavaScript modules. This is where we talk a lot about Remix \\\\\\\"emulating the browser\\\\\\\".\\u003c/p\\u003e\\\\n\\u003cp\\u003eWhen the user clicks a link, instead of making a round trip to the server for the entire document and all the assets, Remix simply fetches the data for the next page and updates the UI.\\u003c/p\\u003e\\\\n\\u003cp\\u003eAdditionally, when users submit a \\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e to update data, instead of doing a normal HTML document request, the browser runtime will make a fetch to the server instead and automatically revalidate all data on the page and update it with React.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThis has many performance benefits over making a full-document request:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eAssets don't need to be re-downloaded (or pulled from the cache)\\u003c/li\\u003e\\\\n\\u003cli\\u003eAssets don't need to be parsed by the browser again\\u003c/li\\u003e\\\\n\\u003cli\\u003eThe data fetched is much smaller than the entire document (sometimes orders of magnitude)\\u003c/li\\u003e\\\\n\\u003cli\\u003eBecause Remix enhances HTML APIs (\\u003ccode\\u003e\\u0026#x3C;a\\u003e\\u003c/code\\u003e and \\u003ccode\\u003e\\u0026#x3C;form\\u003e\\u003c/code\\u003e), your app tends to work even before JavaScript has loaded on the page\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eRemix also has some built-in optimizations for client-side navigation. It knows which layouts will persist between the two URLs, so it only fetches the data for the ones that are changing. A full document request would require all data to be fetched on the server, wasting resources on your back end and slowing down your app.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThis approach also has UX benefits like not resetting the scroll position of a sidebar nav and allowing you to move focus to something that makes more sense than the top of the document.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix can also prefetch all resources for a page when the user is about to click a link. The browser framework knows about the compiler's asset manifest. It can match the URL of the link, read the manifest, and then prefetch all data, JavaScript modules, and even CSS resources for the next page. This is how Remix apps feel fast even when networks are slow.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix then provides client side APIs, so you can create rich user experiences without changing the fundamental model of HTML and browsers.\\u003c/p\\u003e\\\\n\\u003cp\\u003eTaking our route module from before, here are a few small but useful UX improvements to the form that you can only do with JavaScript in the browser:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eDisable the button when the form is being submitted\\u003c/li\\u003e\\\\n\\u003cli\\u003eFocus the input when server-side form validation fails\\u003c/li\\u003e\\\\n\\u003cli\\u003eAnimate in the error messages\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nocopy=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-nocopy=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eProjects\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprojects\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eactionData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseActionData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebusy\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmitting\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einputRef\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eReact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseRef\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eReact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseEffect\\u003c/span\\u003e(() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eactionData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einputRef\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecurrent\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efocus\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e }, [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eactionData\\u003c/span\\u003e]);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprojects\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emap\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLink\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ekey\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eslug\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eto\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eslug\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etitle\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e ))\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eref\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einputRef\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etitle\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edisabled\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebusy\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebusy\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eCreating...\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eCreate New Project\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eactionData\\u003c/span\\u003e?.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eFadeIn\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eErrorMessages\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eerrors\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eactionData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eFadeIn\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eWhat's most interesting about this code sample is that it is \\u003cstrong\\u003eonly additive\\u003c/strong\\u003e. The entire interaction is still fundamentally the same thing and even works at a basic level before JavaScript loads, the only difference is the user will be provided by the browser (spinning favicon, etc.) instead of the app (\\u003ccode\\u003euseNavigation().state\\u003c/code\\u003e).\\u003c/p\\u003e\\\\n\\u003cp\\u003eBecause Remix reaches into the controller level of the backend, it can do this seamlessly.\\u003c/p\\u003e\\\\n\\u003cp\\u003eAnd while it doesn't reach as far back into the stack as server-side frameworks like Rails and Laravel, it does reach way farther up the stack into the browser to make the transition from the back end to the front end seamless.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor example. Building a plain HTML form and server-side handler in a back-end heavy web framework is just as easy to do as it is in Remix. But as soon as you want to cross over into an experience with animated validation messages, focus management, and pending UI, it requires a fundamental change in the code. Typically, people build an API route and then bring in a splash of client-side JavaScript to connect the two. With Remix, you simply add some code around the existing \\\\\\\"server side view\\\\\\\" without changing how it works fundamentally. The browser runtime takes over the server communication to provide an enhanced user experience beyond the default browser behaviors.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWe borrowed an old term and called this Progressive Enhancement in Remix. Start small with a plain HTML form (Remix scales down) and then scale the UI up when you have the time and ambition.\\u003c/p\\u003e\\\",\\\"docs/discussion/introduction\\\",\\\"headings\\\",[960,965,968,971],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Compiler\\\",\\\"compiler\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"HTTP Handler and Adapters\\\",\\\"http-handler-and-adapters\\\",{\\\"_961\\\":962,\\\"_955\\\":969,\\\"_24\\\":970},\\\"Server Framework\\\",\\\"server-framework\\\",{\\\"_961\\\":962,\\\"_955\\\":972,\\\"_24\\\":973},\\\"Browser Framework\\\",\\\"browser-framework\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#browser-framework\\\\\\": 1, "#compiler\\\\\\": 1, "#http-handler-and-adapters\\\\\\": 1, "#introduction-technical-explanation\\\\\\": 1, "#server-framework\\\\\\": 1, "$\\": 1, "$rc": 3, "*/": 1, "*/\\u003c/span\\u003e\\u003cspan": 1, "--base03": 17, "--base05": 4, "--base08": 80, "--base09": 3, "--base0a": 24, "--base0b": 14, "--base0d": 58, "--base0e": 69, "--base0f": 32, "-1\\\\\\": 5, "-5": 2, "/$": 1, "/*": 1, "//": 13, "//arc": 1, "//deno": 1, "//developer": 1, "//netlify": 1, "//reactrouter": 1, "//v2": 2, "//vercel": 1, "//vitejs": 1, "//workers": 1, "/\u003e": 6, "/\\u003cspan": 9, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 6, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/build/server": 1, "/build/server\\u003c/span\\u003e\\\\\\": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 4, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 4, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 3, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 3, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 3, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 3, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 3, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 2, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 2, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 2, "1\\\\\\": 4, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 2, "21": 4, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 2, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 2, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 2, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 2, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 2, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 2, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 2, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "28\\\\\\": 2, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "29\\\\\\": 2, "2\\\\\\": 4, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30\\\\\\": 2, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "31\\\\\\": 2, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "32\\\\\\": 2, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "33\\\\\\": 2, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "34\\\\\\": 2, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "35\\\\\\": 2, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "36\\\\\\": 2, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "37\\\\\\": 2, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "38\\\\\\": 2, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "39\\\\\\": 1, "3\\\\\\": 4, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "40\\\\\\": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "41\\\\\\": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "42\\\\\\": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "43\\\\\\": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "44\\\\\\": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "45\\\\\\": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "46\\\\\\": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "47\\\\\\": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "48\\\\\\": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "49\\\\\\": 1, "4\\\\\\": 4, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "50\\\\\\": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "51\\\\\\": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "52\\\\\\": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 4, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 4, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 4, "80": 2, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 4, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 4, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "98": 1, "99": 1, "9\\\\\\": 4, "\u003c/button\u003e": 1, "\u003c/div\u003e": 2, "\u003c/fadein\u003e": 1, "\u003c/form\u003e": 2, "\u003c/link\u003e": 2, "\u003ca\u003e": 1, "\u003cbutton": 2, "\u003cdiv\u003e": 2, "\u003cerrormessages": 2, "\u003cfadein\u003e": 1, "\u003cform": 2, "\u003cform\u003e": 2, "\u003cinput": 2, "\u003clink": 2, "\u003coutlet": 2, "===": 2, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 5, "\u003ecreate": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/express": 2, "@remix-run/express\\\\\\": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 320, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eexpress": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ereal": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ewhat": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 51, "\\n": 1, "\\u0026#x3c": 23, "\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003ewith": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003ea": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003ean": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eassets": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003ebecause": 1, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 3, "\\u003c/p\\u003e\\\\n\\u003ch2": 3, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003ea": 2, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eassets": 1, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003edisable": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eadditionally": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eand": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ebecause": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efor": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eif": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ein": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003einstead": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eit": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003emore": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003emost": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eremix": 3, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eroute": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003etaking": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethis": 3, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewe": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewhen": 1, "\\u003c/span\\u003e": 12, "\\u003c/span\\u003e\\\\\\": 1, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 9, "\\u003c/span\\u003e\\u003cspan": 16, "\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003ca": 8, "\\u003ccode\\u003e\\\\\\": 1, "\\u003ccode\\u003e\\u0026#x3c": 3, "\\u003ccode\\u003eaction\\u003c/code\\u003e": 2, "\\u003ccode\\u003ebuild/client/*\\u003c/code\\u003e": 1, "\\u003ccode\\u003ebuild/server/index": 1, "\\u003ccode\\u003edefault\\u003c/code\\u003e": 1, "\\u003ccode\\u003eloader\\u003c/code\\u003e": 2, "\\u003ccode\\u003eremix": 1, "\\u003ccode\\u003eusenavigation": 1, "\\u003cem\\u003emultiple": 1, "\\u003cem\\u003eui-focused\\u003c/em\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 217, "\\u003cstrong\\u003eonly": 1, "\\u003cstrong\\u003eremix": 1, "\\u003e": 125, "\\u003e*\\u003c/span\\u003e\\\\\\": 1, "\\u003e/*": 1, "\\u003e//": 13, "\\u003e===\\u003c/span\\u003e": 1, "\\u003e=\\u003c/span\\u003e": 15, "\\u003e=\\u003c/span\\u003e\\\\\\": 6, "\\u003e=\\u003c/span\\u003e\\u003cspan": 8, "\\u003e=\\u003e\\u003c/span\\u003e": 4, "\\u003e@remix-run/express\\u003c/span\\u003e\\\\\\": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 17, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebrowser": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ecompiler\\u003c/h2\\u003e\\\\n\\u003cp\\u003eeverything": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ehttp": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eintroduction": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserver": 1, "\\u003e\\u003ca": 5, "\\u003e\\u003ccode\\u003e\\u003cspan": 4, "\\u003e\\u003cpre": 4, "\\u003e\\u003cspan": 25, "\\u003eaction\\u003c/span\\u003e": 1, "\\u003eaction\\u003c/span\\u003e\\u003e": 2, "\\u003eactiondata\\u003c/span\\u003e": 8, "\\u003eactionfunctionargs\\u003c/span\\u003e": 1, "\\u003eall\\u003c/span\\u003e": 1, "\\u003eapp\\u003c/span\\u003e": 2, "\\u003earchitect\\u003c/a\\u003e": 1, "\\u003easync\\u003c/span\\u003e": 3, "\\u003eawait\\u003c/span\\u003e": 4, "\\u003ebuild\\u003c/span\\u003e": 2, "\\u003ebusy\\u003c/span\\u003e": 2, "\\u003ebusy\\u003c/span\\u003e\\u003cspan": 1, "\\u003ebutton\\u003c/span\\u003e": 2, "\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ecloudflare": 1, "\\u003econst\\u003c/span\\u003e": 15, "\\u003ecreate": 2, "\\u003ecreateproject\\u003c/span\\u003e": 1, "\\u003ecreateremixrequest\\u003c/span\\u003e": 1, "\\u003ecreateremixrequesthandler\\u003c/span\\u003e": 1, "\\u003ecreaterequesthandler\\u003c/span\\u003e": 2, "\\u003ecreating": 1, "\\u003ecurrent\\u003c/span\\u003e": 1, "\\u003edb\\u003c/span\\u003e": 1, "\\u003edefault\\u003c/span\\u003e": 2, "\\u003edeno": 1, "\\u003edisabled\\u003c/span\\u003e\\u003cspan": 1, "\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "\\u003eerrormessages\\u003c/span\\u003e": 2, "\\u003eerrors\\u003c/span\\u003e": 6, "\\u003eerrors\\u003c/span\\u003e\\u003cspan": 4, "\\u003eexport\\u003c/span\\u003e": 5, "\\u003eexpress\\u003c/span\\u003e": 2, "\\u003eexpress\\u003c/span\\u003e\\\\\\": 1, "\\u003efadein\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003efindall\\u003c/span\\u003e": 1, "\\u003efocus\\u003c/span\\u003e": 1, "\\u003eform\\u003c/span\\u003e": 5, "\\u003eform\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eformdata\\u003c/span\\u003e": 1, "\\u003efunction\\u003c/span\\u003e": 5, "\\u003eget\\u003c/span\\u003e": 1, "\\u003ehandlerequest\\u003c/span\\u003e": 2, "\\u003eif\\u003c/span\\u003e": 2, "\\u003einput\\u003c/span\\u003e": 2, "\\u003einputref\\u003c/span\\u003e": 2, "\\u003einputref\\u003c/span\\u003e\\u003cspan": 1, "\\u003ejson\\u003c/span\\u003e": 3, "\\u003ekey\\u003c/span\\u003e\\u003cspan": 2, "\\u003elink\\u003c/span\\u003e": 2, "\\u003elink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eloader\\u003c/span\\u003e": 1, "\\u003eloader\\u003c/span\\u003e\\u003e": 2, "\\u003emap\\u003c/span\\u003e": 2, "\\u003emethod\\u003c/span\\u003e\\u003cspan": 2, "\\u003ename\\u003c/span\\u003e\\u003cspan": 2, "\\u003enetlify\\u003c/a\\u003e": 1, "\\u003enull\\u003c/span\\u003e\\u003cspan": 2, "\\u003eoutlet\\u003c/span\\u003e": 2, "\\u003epost\\u003c/span\\u003e\\\\\\": 2, "\\u003eproject\\u003c/span\\u003e": 8, "\\u003eprojects\\u003c/span\\u003e": 7, "\\u003ereact": 1, "\\u003ereact\\u003c/span\\u003e": 2, "\\u003eref\\u003c/span\\u003e\\u003cspan": 1, "\\u003eremix\\u003c/span\\u003e": 2, "\\u003ereq\\u003c/span\\u003e": 2, "\\u003erequest\\u003c/span\\u003e": 4, "\\u003erequire\\u003c/span\\u003e": 3, "\\u003eres\\u003c/span\\u003e": 2, "\\u003eresponse\\u003c/span\\u003e": 2, "\\u003ereturn\\u003c/span\\u003e": 6, "\\u003esendremixresponse\\u003c/span\\u003e": 1, "\\u003eslug\\u003c/span\\u003e\\u003cspan": 4, "\\u003estate\\u003c/span\\u003e": 2, "\\u003esubmit\\u003c/span\\u003e\\\\\\": 2, "\\u003esubmitting\\u003c/span\\u003e\\\\\\": 1, "\\u003etitle\\u003c/span\\u003e\\\\\\": 3, "\\u003etitle\\u003c/span\\u003e\\u003cspan": 2, "\\u003eto\\u003c/span\\u003e\\u003cspan": 2, "\\u003etrue\\u003c/span\\u003e": 1, "\\u003etype\\u003c/span\\u003e\\u003cspan": 2, "\\u003etypeof\\u003c/span\\u003e": 4, "\\u003euseactiondata\\u003c/span\\u003e\\u0026#x3c": 2, "\\u003euseeffect\\u003c/span\\u003e": 1, "\\u003euseloaderdata\\u003c/span\\u003e\\u0026#x3c": 2, "\\u003eusenavigation\\u003c/span\\u003e": 1, "\\u003euseref\\u003c/span\\u003e": 1, "\\u003evalidate\\u003c/span\\u003e": 1, "\\u003evercel\\u003c/a\\u003e": 1, "\\u003evite\\u003c/a\\u003e": 1, "\\u003eweb": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 28, "_22\\": 152, "_24\\": 156, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 5, "_958\\": 1, "_961\\": 4, "_975\\": 1, "_976\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "a\\u003e\\u003c/code\\u003e": 1, "able": 4, "about": 9, "accessibility\\": 1, "action": 3, "action\u003e": 2, "action\\": 1, "actiondata": 8, "actiondata\\": 1, "actionfunctionargs": 1, "actions": 2, "actual": 4, "actually": 4, "adapter": 9, "adapters": 10, "adapters\\": 1, "adapters\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhile": 1, "adaptersserver": 2, "adapting": 2, "adapts": 4, "add": 2, "additionally": 4, "additive": 1, "additive\\u003c/strong\\u003e": 1, "adopt": 2, "again": 1, "again\\u003c/li\\u003e\\\\n\\u003cli\\u003ethe": 1, "aggregate": 2, "agnostic": 2, "all": 16, "allowing": 4, "already": 6, "also": 12, "ambition": 2, "an": 30, "and": 106, "and\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "animate": 1, "animated": 2, "any": 10, "anything": 2, "anywhere": 2, "api": 25, "api@remix-run/dev": 2, "api\\": 1, "api\\u003c/a\\u003e": 1, "apis": 4, "app": 16, "application": 6, "approach": 3, "apps": 6, "architect": 1, "are": 14, "aria-hidden=\\\\\\": 5, "around": 4, "artifacts": 2, "as": 27, "asked": 1, "asset": 9, "assets": 4, "async": 3, "at": 9, "attrs\\": 1, "automatic": 2, "automatically": 2, "await": 4, "await\\": 1, "b=document": 1, "back": 6, "back-end": 4, "backend": 5, "basename": 1, "basic": 2, "be": 16, "be\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "because": 2, "become": 2, "been": 2, "before": 11, "behaviors": 4, "being": 2, "benefits": 4, "between": 4, "beyond": 2, "bit": 2, "borrowed": 2, "both": 8, "breadcrumbs": 3, "break": 1, "breeze": 1, "bring": 2, "browser": 40, "browser-framework\\": 1, "browser-framework\\\\\\": 1, "browser\\\\\\": 1, "browsers": 2, "build": 20, "build/client/*": 1, "build/server/index": 1, "build\\u003c/code\\u003e": 1, "build\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "building": 2, "built": 4, "built-in": 2, "bunch": 2, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "busy": 3, "but": 8, "button": 2, "by": 10, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "cache": 2, "called": 4, "calls": 2, "can": 33, "catch": 1, "change": 2, "changelog": 2, "changelog\\": 1, "changing": 8, "child": 2, "children\\": 1, "choppy": 2, "class=\\\\\\": 122, "cli": 5, "cli\\": 1, "click": 2, "clicks": 2, "client": 17, "client-q2ogymm2": 1, "client-side": 6, "client\\": 2, "client\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cloudflare": 2, "co-locate": 2, "code": 14, "codeblock-line\\\\\\": 117, "codes\\\\\\": 1, "color": 301, "com/\\\\\\": 1, "com/deploy/docs\\\\\\": 1, "com\\\\\\": 3, "coming": 2, "common": 2, "communication": 2, "community": 3, "community\\": 1, "compiler": 6, "compiler\\": 2, "compiler\\\\\\": 1, "compiler\\u003c/li\\u003e\\\\n\\u003cli\\u003ea": 1, "complete": 2, "component": 9, "component\\": 1, "component\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "components": 7, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "conditions": 2, "config": 3, "configurable": 2, "configuration": 2, "configuration\\": 1, "connect": 2, "console": 1, "const": 15, "constraints": 2, "constraints\\": 1, "contain": 2, "continues": 2, "contributing": 3, "contributing\\": 1, "controller": 14, "conventions": 4, "conventions\\": 1, "converting": 2, "cookie": 2, "cookies\\": 1, "core": 2, "create": 3, "create-remix": 3, "createproject": 1, "createremixrequest": 1, "createremixrequesthandler": 1, "createremixstub": 2, "createremixstub\\": 1, "createrequesthandler": 2, "creates": 4, "creating": 1, "cross": 2, "css": 19, "css\\": 1, "current": 1, "d=c": 2, "data": 38, "data-code-block=\\\\\\": 4, "data-highlight=\\\\\\": 20, "data-lang=\\\\\\": 8, "data-line-number=\\\\\\": 117, "data-line-numbers=\\\\\\": 8, "data-nocopy=\\\\\\": 2, "data=": 1, "data\\": 2, "data\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "databases": 2, "db": 1, "deeper": 2, "default": 9, "defer": 2, "defer\\": 1, "deferred": 1, "delete": 2, "deno": 1, "dependency": 5, "deploy": 3, "deploy\\u003c/a\\u003e": 1, "deployed": 2, "deployment": 4, "deployment\\": 2, "description\\": 1, "design": 2, "dev": 3, "dev\\\\\\": 1, "developer": 2, "development": 3, "difference": 2, "disable": 1, "disabled=": 1, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 9, "doc\\": 1, "docs/discussion/introduction": 1, "docs/discussion/introduction\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsintroduction": 1, "document": 13, "does": 6, "doesn": 4, "doing": 2, "don": 4, "done": 1, "down": 5, "down\\u003c/strong\\u003e": 1, "e--": 1, "e=0": 1, "each": 4, "easy": 2, "ecosystem": 2, "eliminate": 2, "else": 2, "emulating": 2, "enable": 2, "enables": 2, "end": 6, "enhanced": 2, "enhancement": 4, "enhancement\\": 1, "enhances": 2, "enqueue": 1, "entire": 10, "entry": 6, "environment": 3, "environments": 2, "ergonomics": 2, "error": 8, "errorboundary": 2, "errorboundary\\": 1, "errors": 8, "errors=": 2, "errors\\": 1, "etc": 8, "even": 8, "every": 4, "everything": 2, "example": 2, "examples": 1, "execution": 2, "execution\\": 1, "existing": 4, "experience": 4, "experiences": 2, "explanation": 4, "explanation\\": 1, "explanation\\u003c/h1\\u003e\\\\n\\u003cp\\u003ebuilt": 1, "explanationgetting": 1, "export": 7, "exports": 2, "express": 14, "extra": 2, "extract": 2, "extract\\": 1, "f=a": 1, "fails": 1, "fails\\u003c/li\\u003e\\\\n\\u003cli\\u003eanimate": 1, "false": 3, "familiar": 4, "faqs": 2, "faqs\\": 1, "far": 2, "farther": 2, "fast": 2, "favicon": 2, "feature": 2, "features": 1, "feel": 2, "fetch": 20, "fetch\\": 1, "fetched": 4, "fetcher": 2, "fetcher\\": 1, "fetches": 4, "few": 4, "file": 13, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "fill": 2, "findall": 1, "fingerprinted": 2, "first": 2, "firstchild": 2, "flags": 2, "flags\\": 1, "flair": 2, "flow": 2, "flow\\": 1, "focus": 6, "focused": 1, "focused\\\\\\": 1, "for": 37, "form": 24, "form\\": 1, "form\\u003e\\u003c/code\\u003e": 2, "formdata": 1, "forms": 2, "found": 3, "four": 2, "framework": 10, "framework\\": 2, "framework\\u003c/h2\\u003e\\\\n\\u003cp\\u003eif": 1, "framework\\u003c/h2\\u003e\\\\n\\u003cp\\u003eonce": 1, "framework\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003ch2": 1, "framework\\u003c/li\\u003e\\\\n\\u003cli\\u003ea": 1, "frameworkbrowser": 2, "frameworkintroduction": 1, "frameworkon": 1, "frameworks": 8, "frequently": 1, "from": 16, "front": 2, "frontend": 2, "frontend\\": 1, "full": 2, "full-document": 2, "fullstack": 3, "function": 6, "fundamental": 6, "fundamentally": 4, "future": 4, "get": 7, "getelementbyid": 2, "getitem": 1, "getting": 4, "gist": 2, "githubchat": 1, "given": 2, "gotchas": 2, "gotchas\\": 1, "graph": 2, "great": 2, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "handle": 10, "handle\\": 1, "handler": 20, "handler\\u003c/li\\u003e\\\\n\\u003cli\\u003ea": 1, "handlerequest": 2, "handlers": 2, "handling": 4, "handling\\": 2, "has": 14, "hascontent\\": 1, "have": 8, "having": 2, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "heavy": 2, "help": 1, "helpers": 2, "here": 5, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hosting": 2, "hot": 3, "how": 9, "href=\\\\\\": 13, "html": 13, "html\\": 1, "http": 6, "http-handler-and-adapters\\": 1, "http-handler-and-adapters\\\\\\": 1, "https": 10, "hydratefallback": 2, "hydratefallback\\": 1, "hydrates": 1, "hydrates\\\\\\": 1, "icon": 5, "icon-link\\\\\\": 5, "id=\\\\\\": 5, "if": 12, "images": 2, "import": 5, "import\\\\\\": 1, "imports": 6, "imports\\": 2, "improvements": 2, "in": 59, "inc": 1, "includes": 4, "incrementally": 2, "index": 3, "initial": 3, "input": 2, "inputref": 3, "insertbefore": 1, "instead": 11, "integrating": 1, "interaction": 4, "interactions": 3, "interesting": 2, "into": 14, "introduction": 2, "introduction-technical-explanation\\\\\\": 1, "is": 49, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 41, "iterative": 1, "its": 2, "javascript": 28, "javascript\\": 1, "js": 18, "js\\": 1, "js\\u003c/code\\u003e": 1, "json": 6, "json\\": 1, "just": 12, "key": 4, "key=": 2, "know": 5, "knows": 4, "laravel": 4, "layout": 4, "layouts": 4, "lazy": 3, "leads": 2, "learning": 1, "leaves": 2, "let": 3, "lets": 2, "level": 4, "licensed": 1, "like": 14, "link": 8, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "load": 2, "loaded": 2, "loader": 5, "loader\u003e": 2, "loader\\": 1, "loaderdata\\": 1, "loaders": 2, "loading": 5, "loading\\": 1, "loads": 4, "local": 3, "localhost\\": 1, "look": 2, "looks": 2, "lot": 6, "magnitude": 2, "mailers": 2, "majority": 2, "make": 6, "makes": 5, "making": 4, "management": 8, "management\\": 2, "manages": 2, "manifest": 8, "manual": 3, "many": 2, "map": 2, "maps": 2, "match": 4, "matches": 2, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "messages": 3, "messages\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cdiv": 1, "meta": 4, "meta\\": 2, "method=": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "model": 10, "models": 2, "module": 10, "module\\": 1, "moduleaction": 2, "modules": 16, "modules\\": 3, "more": 5, "most": 4, "move": 2, "mozilla": 1, "much": 2, "multiple": 1, "mutations": 2, "mvc": 2, "name=": 2, "naming": 2, "naming\\": 1, "nav": 2, "navigation": 2, "navlink": 2, "navlink\\": 1, "need": 5, "needed": 2, "needs": 2, "nested": 6, "netlify": 1, "network": 5, "networks": 2, "new": 6, "new\\": 1, "next": 4, "nextsibling": 2, "nice": 2, "node": 6, "nodetype": 1, "noindex\\": 1, "non-node": 2, "normal": 2, "not": 17, "null": 3, "number": 1, "of": 53, "often": 2, "ok": 2, "old": 2, "on": 35, "once": 2, "one": 3, "ones": 2, "only": 13, "open": 1, "optimization": 2, "optimization\\": 1, "optimizations": 2, "or": 7, "order\\": 1, "orders": 2, "org/en-us/docs/web/api/fetch_api\\\\\\": 1, "orms": 2, "other": 5, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "our": 2, "out": 1, "outlet": 2, "outlet\\": 1, "outlets": 2, "outside": 2, "over": 6, "own": 6, "package": 2, "page": 13, "page\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eremix": 1, "pagecompilerhttp": 2, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "parsed": 2, "patch": 2, "pending": 5, "people": 2, "performance": 4, "performance\\": 1, "persist": 2, "pipethrough": 1, "plain": 4, "position": 2, "positions": 2, "post": 3, "post\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "postcss": 2, "postcss\\": 1, "prefetch": 4, "prefetching": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "preloading": 2, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 3, "productivity": 2, "progressive": 5, "project": 10, "project\u003c/button\u003e": 1, "project\\u0026#x3c": 1, "project\\u003c/span\\u003e\\\\\\": 1, "projects": 9, "provide": 8, "provided": 2, "provides": 2, "pseudocode": 2, "pull": 1, "pulled": 2, "put": 2, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "rails": 4, "random": 1, "re": 4, "re-downloaded": 2, "reach": 4, "reaches": 2, "react": 15, "react-router-scroll-positions": 1, "read": 2, "readablestream": 1, "real": 1, "really": 2, "receives": 2, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "ref=": 1, "regular": 3, "related": 1, "released": 2, "remix": 82, "remix\\": 2, "removechild": 2, "removeitem": 1, "render": 8, "render+fetch": 2, "rendered": 2, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "req": 4, "request": 14, "request/response": 2, "request\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "requests": 3, "requests\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "require": 5, "requires": 4, "res": 3, "res\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "resetting": 2, "resilient": 2, "resource": 3, "resources": 11, "response": 9, "response\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "responsibilities": 2, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 6, "returns": 2, "revalidate": 2, "rich": 2, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "round": 2, "route": 33, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 8, "router\\": 2, "router\\u003c/a\\u003e": 1, "routes": 14, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "routes\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "run": 8, "run/docs/discussion/introduction": 1, "run\\": 1, "running": 3, "runs": 5, "runs\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "runtime": 4, "runtimes": 3, "same": 6, "sample": 2, "scale": 4, "scales": 4, "scripts": 2, "scripts\\": 1, "scroll": 2, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "seamless": 2, "seamlessly": 2, "segment": 4, "segments": 2, "sendremixresponse": 1, "sense": 2, "served": 2, "server": 74, "server-framework\\": 1, "server-framework\\\\\\": 1, "server-side": 16, "server\\": 3, "server\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "service": 2, "session": 2, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "side": 4, "sidebar": 2, "simple": 2, "simplifying": 1, "simply": 4, "since": 2, "single": 5, "siteurl\\": 1, "slice": 1, "slow": 2, "slowing": 2, "slug": 4, "slug\\": 1, "small": 4, "smaller": 2, "so": 6, "some": 6, "something": 2, "sometimes": 2, "soon": 2, "source": 2, "spa": 3, "space": 2, "specific": 4, "spinning": 2, "splash": 2, "split": 2, "splitting": 2, "ssr": 1, "stack": 4, "stages": 1, "start": 6, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "starts": 2, "state": 9, "state\\u003c/code\\u003e": 1, "still": 2, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 301, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "submit": 6, "submitted": 1, "submitted\\u003c/li\\u003e\\\\n\\u003cli\\u003efocus": 1, "submitting": 1, "support": 3, "support\\": 1, "tabindex=\\\\\\": 5, "tailwind": 2, "tailwind\\": 1, "take": 2, "takes": 2, "taking": 1, "talk": 2, "technical": 7, "technologies\\": 1, "templates": 5, "templates\\": 1, "tends": 2, "term": 2, "textencoderstream": 1, "than": 12, "thank": 1, "that": 32, "the": 253, "their": 2, "them": 4, "themselves": 2, "then": 14, "there": 2, "these": 2, "they": 2, "thing": 2, "things": 4, "think": 2, "this": 39, "three": 2, "through": 1, "time": 2, "title": 7, "title\\": 1, "tls": 2, "tls\\": 1, "to": 94, "to=": 2, "toc\\": 1, "today": 2, "together": 2, "top": 4, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "traditional": 2, "transition": 2, "transitions": 2, "trip": 2, "true": 7, "true\\\\\\": 33, "try": 1, "ts": 2, "ts\\": 1, "tsx\\\\\\": 4, "tutorial": 3, "two": 4, "type=": 2, "typeof": 1, "typescript": 2, "typescript\\": 1, "typescript\\\\\\": 4, "typically": 2, "ui": 16, "ui-focused": 1, "ui\\": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 8, "update": 4, "updates": 2, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 12, "urls": 5, "urls\\u003c/em\\u003e": 1, "use": 4, "useactiondata\u003ctypeof": 2, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "useeffect": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "useful": 4, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\u003ctypeof": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 4, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 12, "useref": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "users": 2, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 4, "usually": 4, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "ux": 4, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validate": 1, "validation": 6, "validation\\": 1, "vanilla": 3, "var": 303, "variables": 2, "variables\\": 1, "vercel": 1, "view": 9, "view\\\\\\": 1, "vite": 8, "vite\\": 1, "vs": 6, "walk": 1, "want": 2, "wasting": 2, "waterfalls": 2, "way": 11, "we": 3, "web": 11, "well": 4, "what": 5, "when": 20, "where": 2, "which": 6, "while": 4, "why": 1, "will": 12, "window": 11, "with": 29, "without": 8, "work": 4, "workers": 1, "workers\\u003c/a\\u003e": 1, "works": 6, "would": 2, "writes": 2, "writes\\": 1, "you": 36, "your": 19, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 9977 }, { "id": "c863f8a3c1b2e027efdefbd9", "doc_id": "6eeb1052e1f1895621cfc7f4", "title": "is-server", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/rendering/is-server.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/is-server.json", "content": "--- title: isServer use_cases: \u003e- conditional rendering, ssr vs client code, bundle optimization, environment-specific logic, code splitting tags: - ssr - environment - bundling - optimization - conditional version: '1.0' description: \u003e- Detect server or browser environment with isServer. Optimize bundle sizes by conditionally including code for specific runtime environments. --- ```ts import { isServer } from \"solid-js/web\" const isServer: boolean ``` This indicates that the code is being run as the server or browser bundle. As the underlying runtimes export this as a constant boolean it allows bundlers to eliminate the code and their used imports from the respective bundles. ```ts import { isServer } from \"solid-js/web\"; if (isServer) { // I will never make it to the browser bundle } else { // won't be run on the server; } ```", "term_freq": { "---": 2, "//": 2, "//github": 1, "\u003e-": 2, "allows": 1, "and": 1, "as": 3, "be": 1, "being": 1, "boolean": 2, "browser": 3, "bundle": 4, "bundlers": 1, "bundles": 1, "bundling": 1, "by": 1, "client": 1, "code": 5, "com/solidjs/solid-docs/blob/head/src/routes/reference/rendering/is-server": 1, "conditional": 2, "conditionally": 1, "const": 1, "constant": 1, "description": 1, "detect": 1, "eliminate": 1, "else": 1, "environment": 2, "environment-specific": 1, "environments": 1, "export": 1, "for": 1, "from": 3, "github-document": 1, "https": 1, "if": 1, "import": 2, "imports": 1, "including": 1, "indicates": 1, "is": 1, "is-server": 1, "isserver": 6, "it": 2, "logic": 1, "make": 1, "mdx": 1, "never": 1, "on": 1, "optimization": 2, "optimize": 1, "or": 2, "rendering": 1, "respective": 1, "run": 2, "runtime": 1, "runtimes": 1, "server": 3, "sizes": 1, "solid-js/web": 2, "specific": 1, "splitting": 1, "ssr": 2, "tags": 1, "that": 1, "the": 7, "their": 1, "this": 2, "title": 1, "to": 2, "ts": 2, "underlying": 1, "use_cases": 1, "used": 1, "version": 1, "vs": 1, "will": 1, "with": 1, "won": 1 }, "length": 121 }, { "id": "f2ead812c1834af2ff48a9b6", "doc_id": "1f5798b5e9513249e5081cc6", "title": "json - Standard library/encoding/json", "url": "https://pkg.go.dev/encoding/json", "type": "go-package", "source": "go:encoding/json", "path": "devour_data/docs/json---standard-library-encoding-json.json", "content": "# Package Standard library/encoding/json Package json implements encoding and decoding of JSON as defined in RFC 7159. The mapping between JSON and Go values is described in the documentation for the Marshal and Unmarshal functions. ## Documentation Overview ¶ Security Considerations Package json implements encoding and decoding of JSON as defined in RFC 7159. The mapping between JSON and Go values is described in the documentation for the Marshal and Unmarshal functions. See \"JSON and Go\" for an introduction to this package: https://golang.org/doc/articles/json_and_go.html Security Considerations ¶The JSON standard (RFC 7159) is lax in its definition of a number of parser behaviors. As such, many JSON parsers behave differently in various scenarios. These differences in parsers mean that systems that use multiple independent JSON parser implementations may parse the same JSON object in differing ways. Systems that rely on a JSON object being parsed consistently for security purposes should be careful to understand the behaviors of this parser, as well as how these behaviors may cause interoperability issues with other parser implementations. Due to the Go Backwards Compatibility promise (https://go.dev/doc/go1compat) there are a number of behaviors this package exhibits that may cause interopability issues, but cannot be changed. In particular the following parsing behaviors may cause issues: If a JSON object contains duplicate keys, keys are processed in the order they are observed, meaning later values will replace or be merged into prior values, depending on the field type (in particular maps and structs will have values merged, while other types have values replaced). When parsing a JSON object into a Go struct, keys are considered in a case-insensitive fashion. When parsing a JSON object into a Go struct, unknown keys in the JSON object are ignored (unless a Decoder is used and Decoder.DisallowUnknownFields has been called). Invalid UTF-8 bytes in JSON strings are replaced by the Unicode replacement character. Large JSON number integers will lose precision when unmarshaled into floating-point types. Example (CustomMarshalJSON) ¶ //go:build !goexperiment.jsonv2 package main import ( \"encoding/json\" \"fmt\" \"log\" \"strings\" ) type Animal int const ( Unknown Animal = iota Gopher Zebra ) func (a *Animal) UnmarshalJSON(b []byte) error { var s string if err := json.Unmarshal(b, \u0026s); err != nil { return err } switch strings.ToLower(s) { default: *a = Unknown case \"gopher\": *a = Gopher case \"zebra\": *a = Zebra } return nil } func (a Animal) MarshalJSON() ([]byte, error) { var s string switch a { default: s = \"unknown\" case Gopher: s = \"gopher\" case Zebra: s = \"zebra\" } return json.Marshal(s) } func main() { blob := `[\"gopher\",\"armadillo\",\"zebra\",\"unknown\",\"gopher\",\"bee\",\"gopher\",\"zebra\"]` var zoo []Animal if err := json.Unmarshal([]byte(blob), \u0026zoo); err != nil { log.Fatal(err) } census := make(map[Animal]int) for _, animal := range zoo { census[animal] += 1 } fmt.Printf(\"Zoo Census:\\n* Gophers: %d\\n* Zebras: %d\\n* Unknown: %d\\n\", census[Gopher], census[Zebra], census[Unknown]) } Output: Zoo Census: * Gophers: 3 * Zebras: 2 * Unknown: 3 Share Format Run Example (TextMarshalJSON) ¶ //go:build !goexperiment.jsonv2 package main import ( \"encoding/json\" \"fmt\" \"log\" \"strings\" ) type Size int const ( Unrecognized Size = iota Small Large ) func (s *Size) UnmarshalText(text []byte) error { switch strings.ToLower(string(text)) { default: *s = Unrecognized case \"small\": *s = Small case \"large\": *s = Large } return nil } func (s Size) MarshalText() ([]byte, error) { var name string switch s { default: name = \"unrecognized\" case Small: name = \"small\" case Large: name = \"large\" } return []byte(name), nil } func main() { blob := `[\"small\",\"regular\",\"large\",\"unrecognized\",\"small\",\"normal\",\"small\",\"large\"]` var inventory []Size if err := json.Unmarshal([]byte(blob), \u0026inventory); err != nil { log.Fatal(err) } counts := make(map[Size]int) for _, size := range inventory { counts[size] += 1 } fmt.Printf(\"Inventory Counts:\\n* Small: %d\\n* Large: %d\\n* Unrecognized: %d\\n\", counts[Small], counts[Large], counts[Unrecognized]) } Output: Inventory Counts: * Small: 3 * Large: 2 * Unrecognized: 3 Share Format Run Index ¶ func Compact(dst *bytes.Buffer, src []byte) error func HTMLEscape(dst *bytes.Buffer, src []byte) func Indent(dst *bytes.Buffer, src []byte, prefix, indent string) error func Marshal(v any) ([]byte, error) func MarshalIndent(v any, prefix, indent string) ([]byte, error) func Unmarshal(data []byte, v any) error func Valid(data []byte) bool type Decoder func NewDecoder(r io.Reader) *Decoder func (dec *Decoder) Buffered() io.Reader func (dec *Decoder) Decode(v any) error func (dec *Decoder) DisallowUnknownFields() func (dec *Decoder) InputOffset() int64 func (dec *Decoder) More() bool func (dec *Decoder) Token() (Token, error) func (dec *Decoder) UseNumber() type Delim func (d Delim) String() string type Encoder func NewEncoder(w io.Writer) *Encoder func (enc *Encoder) Encode(v any) error func (enc *Encoder) SetEscapeHTML(on bool) func (enc *Encoder) SetIndent(prefix, indent string) type InvalidUTF8Errordeprecated func (e *InvalidUTF8Error) Error() string type InvalidUnmarshalError func (e *InvalidUnmarshalError) Error() string type Marshaler type MarshalerError func (e *MarshalerError) Error() string func (e *MarshalerError) Unwrap() error type Number func (n Number) Float64() (float64, error) func (n Number) Int64() (int64, error) func (n Number) String() string type RawMessage func (m RawMessage) MarshalJSON() ([]byte, error) func (m *RawMessage) UnmarshalJSON(data []byte) error type SyntaxError func (e *SyntaxError) Error() string type Token type UnmarshalFieldErrordeprecated func (e *UnmarshalFieldError) Error() string type UnmarshalTypeError func (e *UnmarshalTypeError) Error() string type Unmarshaler type UnsupportedTypeError func (e *UnsupportedTypeError) Error() string type UnsupportedValueError func (e *UnsupportedValueError) Error() string Examples ¶ Package (CustomMarshalJSON) Package (TextMarshalJSON) Decoder Decoder.Decode (Stream) Decoder.Token HTMLEscape Indent Marshal MarshalIndent RawMessage (Marshal) RawMessage (Unmarshal) Unmarshal Valid Constants ¶ This section is empty. Variables ¶ This section is empty. Functions ¶ func Compact ¶ func Compact(dst *bytes.Buffer, src []byte) error Compact appends to dst the JSON-encoded src with insignificant space characters elided. func HTMLEscape ¶ func HTMLEscape(dst *bytes.Buffer, src []byte) HTMLEscape appends to dst the JSON-encoded src with \u003c, \u003e, \u0026, U+2028 and U+2029 characters inside string literals changed to \\u003c, \\u003e, \\u0026, \\u2028, \\u2029 so that the JSON will be safe to embed inside HTML \u003cscript\u003e tags. For historical reasons, web browsers don't honor standard HTML escaping within \u003cscript\u003e tags, so an alternative JSON encoding must be used. Example ¶ package main import ( \"bytes\" \"encoding/json\" \"os\" ) func main() { var out bytes.Buffer json.HTMLEscape(\u0026out, []byte(`{\"Name\":\"\u003cb\u003eHTML content\u003c/b\u003e\"}`)) out.WriteTo(os.Stdout) } Output: {\"Name\":\"\\u003cb\\u003eHTML content\\u003c/b\\u003e\"} Share Format Run func Indent ¶ func Indent(dst *bytes.Buffer, src []byte, prefix, indent string) error Indent appends to dst an indented form of the JSON-encoded src. Each element in a JSON object or array begins on a new, indented line beginning with prefix followed by one or more copies of indent according to the indentation nesting. The data appended to dst does not begin with the prefix nor any indentation, to make it easier to embed inside other formatted JSON data. Although leading space characters (space, tab, carriage return, newline) at the beginning of src are dropped, trailing space characters at the end of src are preserved and copied to dst. For example, if src has no trailing spaces, neither will dst; if src ends in a trailing newline, so will dst. Example ¶ package main import ( \"bytes\" \"encoding/json\" \"log\" \"os\" ) func main() { type Road struct { Name string Number int } roads := []Road{ {\"Diamond Fork\", 29}, {\"Sheep Creek\", 51}, } b, err := json.Marshal(roads) if err != nil { log.Fatal(err) } var out bytes.Buffer json.Indent(\u0026out, b, \"=\", \"\\t\") out.WriteTo(os.Stdout) } Output: [ = { = \"Name\": \"Diamond Fork\", = \"Number\": 29 = }, = { = \"Name\": \"Sheep Creek\", = \"Number\": 51 = } =] Share Format Run func Marshal ¶ func Marshal(v any) ([]byte, error) Marshal returns the JSON encoding of v. Marshal traverses the value v recursively. If an encountered value implements Marshaler and is not a nil pointer, Marshal calls [Marshaler.MarshalJSON] to produce JSON. If no [Marshaler.MarshalJSON] method is present but the value implements encoding.TextMarshaler instead, Marshal calls encoding.TextMarshaler.MarshalText and encodes the result as a JSON string. The nil pointer exception is not strictly necessary but mimics a similar, necessary exception in the behavior of [Unmarshaler.UnmarshalJSON]. Otherwise, Marshal uses the following type-dependent default encodings: Boolean values encode as JSON booleans. Floating point, integer, and Number values encode as JSON numbers. NaN and +/-Inf values will return an UnsupportedValueError. String values encode as JSON strings coerced to valid UTF-8, replacing invalid bytes with the Unicode replacement rune. So that the JSON will be safe to embed inside HTML \u003cscript\u003e tags, the string is encoded using HTMLEscape, which replaces \"\u003c\", \"\u003e\", \"\u0026\", U+2028, and U+2029 are escaped to \"\\u003c\",\"\\u003e\", \"\\u0026\", \"\\u2028\", and \"\\u2029\". This replacement can be disabled when using an Encoder, by calling Encoder.SetEscapeHTML(false). Array and slice values encode as JSON arrays, except that []byte encodes as a base64-encoded string, and a nil slice encodes as the null JSON value. Struct values encode as JSON objects. Each exported struct field becomes a member of the object, using the field name as the object key, unless the field is omitted for one of the reasons given below. The encoding of each struct field can be customized by the format string stored under the \"json\" key in the struct field's tag. The format string gives the name of the field, possibly followed by a comma-separated list of options. The name may be empty in order to specify options without overriding the default field name. The \"omitempty\" option specifies that the field should be omitted from the encoding if the field has an empty value, defined as false, 0, a nil pointer, a nil interface value, and any array, slice, map, or string of length zero. As a special case, if the field tag is \"-\", the field is always omitted. Note that a field with name \"-\" can still be generated using the tag \"-,\". Examples of struct field tags and their meanings: // Field appears in JSON as key \"myName\". Field int `json:\"myName\"` // Field appears in JSON as key \"myName\" and // the field is omitted from the object if its value is empty, // as defined above. Field int `json:\"myName,omitempty\"` // Field appears in JSON as key \"Field\" (the default), but // the field is skipped if empty. // Note the leading comma. Field int `json:\",omitempty\"` // Field is ignored by this package. Field int `json:\"-\"` // Field appears in JSON as key \"-\". Field int `json:\"-,\"` The \"omitzero\" option specifies that the field should be omitted from the encoding if the field has a zero value, according to rules: 1) If the field type has an \"IsZero() bool\" method, that will be used to determine whether the value is zero. 2) Otherwise, the value is zero if it is the zero value for its type. If both \"omitempty\" and \"omitzero\" are specified, the field will be omitted if the value is either empty or zero (or both). The \"string\" option signals that a field is stored as JSON inside a JSON-encoded string. It applies only to fields of string, floating point, integer, or boolean types. This extra level of encoding is sometimes used when communicating with JavaScript programs: Int64String int64 `json:\",string\"` The key name will be used if it's a non-empty string consisting of only Unicode letters, digits, and ASCII punctuation except quotation marks, backslash, and comma. Embedded struct fields are usually marshaled as if their inner exported fields were fields in the outer struct, subject to the usual Go visibility rules amended as described in the next paragraph. An anonymous struct field with a name given in its JSON tag is treated as having that name, rather than being anonymous. An anonymous struct field of interface type is treated the same as having that type as its name, rather than being anonymous. The Go visibility rules for struct fields are amended for JSON when deciding which field to marshal or unmarshal. If there are multiple fields at the same level, and that level is the least nested (and would therefore be the nesting level selected by the usual Go rules), the following extra rules apply: 1) Of those fields, if any are JSON-tagged, only tagged fields are considered, even if there are multiple untagged fields that would otherwise conflict. 2) If there is exactly one field (tagged or not according to the first rule), that is selected. 3) Otherwise there are multiple fields, and all are ignored; no error occurs. Handling of anonymous struct fields is new in Go 1.1. Prior to Go 1.1, anonymous struct fields were ignored. To force ignoring of an anonymous struct field in both current and earlier versions, give the field a JSON tag of \"-\". Map values encode as JSON objects. The map's key type must either be a string, an integer type, or implement encoding.TextMarshaler. The map keys are sorted and used as JSON object keys by applying the following rules, subject to the UTF-8 coercion described for string values above: keys of any string type are used directly keys that implement encoding.TextMarshaler are marshaled integer keys are converted to strings Pointer values encode as the value pointed to. A nil pointer encodes as the null JSON value. Interface values encode as the value contained in the interface. A nil interface value encodes as the null JSON value. Channel, complex, and function values cannot be encoded in JSON. Attempting to encode such a value causes Marshal to return an UnsupportedTypeError. JSON cannot represent cyclic data structures and Marshal does not handle them. Passing cyclic structures to Marshal will result in an error. Example ¶ package main import ( \"encoding/json\" \"fmt\" \"os\" ) func main() { type ColorGroup struct { ID int Name string Colors []string } group := ColorGroup{ ID: 1, Name: \"Reds\", Colors: []string{\"Crimson\", \"Red\", \"Ruby\", \"Maroon\"}, } b, err := json.Marshal(group) if err != nil { fmt.Println(\"error:\", err) } os.Stdout.Write(b) } Output: {\"ID\":1,\"Name\":\"Reds\",\"Colors\":[\"Crimson\",\"Red\",\"Ruby\",\"Maroon\"]} Share Format Run func MarshalIndent ¶ func MarshalIndent(v any, prefix, indent string) ([]byte, error) MarshalIndent is like Marshal but applies Indent to format the output. Each JSON element in the output will begin on a new line beginning with prefix followed by one or more copies of indent according to the indentation nesting. Example ¶ package main import ( \"encoding/json\" \"fmt\" \"log\" ) func main() { data := map[string]int{ \"a\": 1, \"b\": 2, } b, err := json.MarshalIndent(data, \"\u003cprefix\u003e\", \"\u003cindent\u003e\") if err != nil { log.Fatal(err) } fmt.Println(string(b)) } Output: { \u003cprefix\u003e\u003cindent\u003e\"a\": 1, \u003cprefix\u003e\u003cindent\u003e\"b\": 2 \u003cprefix\u003e} Share Format Run func Unmarshal ¶ func Unmarshal(data []byte, v any) error Unmarshal parses the JSON-encoded data and stores the result in the value pointed to by v. If v is nil or not a pointer, Unmarshal returns an InvalidUnmarshalError. Unmarshal uses the inverse of the encodings that Marshal uses, allocating maps, slices, and pointers as necessary, with the following additional rules: To unmarshal JSON into a pointer, Unmarshal first handles the case of the JSON being the JSON literal null. In that case, Unmarshal sets the pointer to nil. Otherwise, Unmarshal unmarshals the JSON into the value pointed at by the pointer. If the pointer is nil, Unmarshal allocates a new value for it to point to. To unmarshal JSON into a value implementing Unmarshaler, Unmarshal calls that value's [Unmarshaler.UnmarshalJSON] method, including when the input is a JSON null. Otherwise, if the value implements encoding.TextUnmarshaler and the input is a JSON quoted string, Unmarshal calls encoding.TextUnmarshaler.UnmarshalText with the unquoted form of the string. To unmarshal JSON into a struct, Unmarshal matches incoming object keys to the keys used by Marshal (either the struct field name or its tag), ignoring case. If multiple struct fields match an object key, an exact case match is preferred over a case-insensitive one. Incoming object members are processed in the order observed. If an object includes duplicate keys, later duplicates will replace or be merged into prior values. To unmarshal JSON into an interface value, Unmarshal stores one of these in the interface value: bool, for JSON booleans float64, for JSON numbers string, for JSON strings []any, for JSON arrays map[string]any, for JSON objects nil for JSON null To unmarshal a JSON array into a slice, Unmarshal resets the slice length to zero and then appends each element to the slice. As a special case, to unmarshal an empty JSON array into a slice, Unmarshal replaces the slice with a new empty slice. To unmarshal a JSON array into a Go array, Unmarshal decodes JSON array elements into corresponding Go array elements. If the Go array is smaller than the JSON array, the additional JSON array elements are discarded. If the JSON array is smaller than the Go array, the additional Go array elements are set to zero values. To unmarshal a JSON object into a map, Unmarshal first establishes a map to use. If the map is nil, Unmarshal allocates a new map. Otherwise Unmarshal reuses the existing map, keeping existing entries. Unmarshal then stores key-value pairs from the JSON object into the map. The map's key type must either be any string type, an integer, or implement encoding.TextUnmarshaler. If the JSON-encoded data contain a syntax error, Unmarshal returns a SyntaxError. If a JSON value is not appropriate for a given target type, or if a JSON number overflows the target type, Unmarshal skips that field and completes the unmarshaling as best it can. If no more serious errors are encountered, Unmarshal returns an UnmarshalTypeError describing the earliest such error. In any case, it's not guaranteed that all the remaining fields following the problematic one will be unmarshaled into the target object. The JSON null value unmarshals into an interface, map, pointer, or slice by setting that Go value to nil. Because null is often used in JSON to mean “not present,” unmarshaling a JSON null into any other Go type has no effect on the value and produces no error. When unmarshaling quoted strings, invalid UTF-8 or invalid UTF-16 surrogate pairs are not treated as an error. Instead, they are replaced by the Unicode replacement character U+FFFD. Example ¶ package main import ( \"encoding/json\" \"fmt\" ) func main() { var jsonBlob = []byte(`[ {\"Name\": \"Platypus\", \"Order\": \"Monotremata\"}, {\"Name\": \"Quoll\", \"Order\": \"Dasyuromorphia\"} ]`) type Animal struct { Name string Order string } var animals []Animal err := json.Unmarshal(jsonBlob, \u0026animals) if err != nil { fmt.Println(\"error:\", err) } fmt.Printf(\"%+v\", animals) } Output: [{Name:Platypus Order:Monotremata} {Name:Quoll Order:Dasyuromorphia}] Share Format Run func Valid ¶ added in go1.9 func Valid(data []byte) bool Valid reports whether data is a valid JSON encoding. Example ¶ package main import ( \"encoding/json\" \"fmt\" ) func main() { goodJSON := `{\"example\": 1}` badJSON := `{\"example\":2:]}}` fmt.Println(json.Valid([]byte(goodJSON)), json.Valid([]byte(badJSON))) } Output: true false Share Format Run Types ¶ type Decoder ¶ type Decoder struct { // contains filtered or unexported fields } A Decoder reads and decodes JSON values from an input stream. Example ¶ This example uses a Decoder to decode a stream of distinct JSON values. package main import ( \"encoding/json\" \"fmt\" \"io\" \"log\" \"strings\" ) func main() { const jsonStream = ` {\"Name\": \"Ed\", \"Text\": \"Knock knock.\"} {\"Name\": \"Sam\", \"Text\": \"Who's there?\"} {\"Name\": \"Ed\", \"Text\": \"Go fmt.\"} {\"Name\": \"Sam\", \"Text\": \"Go fmt who?\"} {\"Name\": \"Ed\", \"Text\": \"Go fmt yourself!\"} ` type Message struct { Name, Text string } dec := json.NewDecoder(strings.NewReader(jsonStream)) for { var m Message if err := dec.Decode(\u0026m); err == io.EOF { break } else if err != nil { log.Fatal(err) } fmt.Printf(\"%s: %s\\n\", m.Name, m.Text) } } Output: Ed: Knock knock. Sam: Who's there? Ed: Go fmt. Sam: Go fmt who? Ed: Go fmt yourself! Share Format Run func NewDecoder ¶ func NewDecoder(r io.Reader) *Decoder NewDecoder returns a new decoder that reads from r. The decoder introduces its own buffering and may read data from r beyond the JSON values requested. func (*Decoder) Buffered ¶ added in go1.1 func (dec *Decoder) Buffered() io.Reader Buffered returns a reader of the data remaining in the Decoder's buffer. The reader is valid until the next call to Decoder.Decode. func (*Decoder) Decode ¶ func (dec *Decoder) Decode(v any) error Decode reads the next JSON-encoded value from its input and stores it in the value pointed to by v. See the documentation for Unmarshal for details about the conversion of JSON into a Go value. Example (Stream) ¶ This example uses a Decoder to decode a streaming array of JSON objects. package main import ( \"encoding/json\" \"fmt\" \"log\" \"strings\" ) func main() { const jsonStream = ` [ {\"Name\": \"Ed\", \"Text\": \"Knock knock.\"}, {\"Name\": \"Sam\", \"Text\": \"Who's there?\"}, {\"Name\": \"Ed\", \"Text\": \"Go fmt.\"}, {\"Name\": \"Sam\", \"Text\": \"Go fmt who?\"}, {\"Name\": \"Ed\", \"Text\": \"Go fmt yourself!\"} ] ` type Message struct { Name, Text string } dec := json.NewDecoder(strings.NewReader(jsonStream)) // read open bracket t, err := dec.Token() if err != nil { log.Fatal(err) } fmt.Printf(\"%T: %v\\n\", t, t) // while the array contains values for dec.More() { var m Message // decode an array value (Message) err := dec.Decode(\u0026m) if err != nil { log.Fatal(err) } fmt.Printf(\"%v: %v\\n\", m.Name, m.Text) } // read closing bracket t, err = dec.Token() if err != nil { log.Fatal(err) } fmt.Printf(\"%T: %v\\n\", t, t) } Output: json.Delim: [ Ed: Knock knock. Sam: Who's there? Ed: Go fmt. Sam: Go fmt who? Ed: Go fmt yourself! json.Delim: ] Share Format Run func (*Decoder) DisallowUnknownFields ¶ added in go1.10 func (dec *Decoder) DisallowUnknownFields() DisallowUnknownFields causes the Decoder to return an error when the destination is a struct and the input contains object keys which do not match any non-ignored, exported fields in the destination. func (*Decoder) InputOffset ¶ added in go1.14 func (dec *Decoder) InputOffset() int64 InputOffset returns the input stream byte offset of the current decoder position. The offset gives the location of the end of the most recently returned token and the beginning of the next token. func (*Decoder) More ¶ added in go1.5 func (dec *Decoder) More() bool More reports whether there is another element in the current array or object being parsed. func (*Decoder) Token ¶ added in go1.5 func (dec *Decoder) Token() (Token, error) Token returns the next JSON token in the input stream. At the end of the input stream, Token returns nil, io.EOF. Token guarantees that the delimiters [ ] { } it returns are properly nested and matched: if Token encounters an unexpected delimiter in the input, it will return an error. The input stream consists of basic JSON values—bool, string, number, and null—along with delimiters [ ] { } of type Delim to mark the start and end of arrays and objects. Commas and colons are elided. Example ¶ This example uses a Decoder to decode a stream of distinct JSON values. package main import ( \"encoding/json\" \"fmt\" \"io\" \"log\" \"strings\" ) func main() { const jsonStream = ` {\"Message\": \"Hello\", \"Array\": [1, 2, 3], \"Null\": null, \"Number\": 1.234} ` dec := json.NewDecoder(strings.NewReader(jsonStream)) for { t, err := dec.Token() if err == io.EOF { break } if err != nil { log.Fatal(err) } fmt.Printf(\"%T: %v\", t, t) if dec.More() { fmt.Printf(\" (more)\") } fmt.Printf(\"\\n\") } } Output: json.Delim: { (more) string: Message (more) string: Hello (more) string: Array (more) json.Delim: [ (more) float64: 1 (more) float64: 2 (more) float64: 3 json.Delim: ] (more) string: Null (more) \u003cnil\u003e: \u003cnil\u003e (more) string: Number (more) float64: 1.234 json.Delim: } Share Format Run func (*Decoder) UseNumber ¶ added in go1.1 func (dec *Decoder) UseNumber() UseNumber causes the Decoder to unmarshal a number into an interface value as a Number instead of as a float64. type Delim ¶ added in go1.5 type Delim rune A Delim is a JSON array or object delimiter, one of [ ] { or }. func (Delim) String ¶ added in go1.5 func (d Delim) String() string type Encoder ¶ type Encoder struct { // contains filtered or unexported fields } An Encoder writes JSON values to an output stream. func NewEncoder ¶ func NewEncoder(w io.Writer) *Encoder NewEncoder returns a new encoder that writes to w. func (*Encoder) Encode ¶ func (enc *Encoder) Encode(v any) error Encode writes the JSON encoding of v to the stream, with insignificant space characters elided, followed by a newline character. See the documentation for Marshal for details about the conversion of Go values to JSON. func (*Encoder) SetEscapeHTML ¶ added in go1.7 func (enc *Encoder) SetEscapeHTML(on bool) SetEscapeHTML specifies whether problematic HTML characters should be escaped inside JSON quoted strings. The default behavior is to escape \u0026, \u003c, and \u003e to \\u0026, \\u003c, and \\u003e to avoid certain safety problems that can arise when embedding JSON in HTML. In non-HTML settings where the escaping interferes with the readability of the output, SetEscapeHTML(false) disables this behavior. func (*Encoder) SetIndent ¶ added in go1.7 func (enc *Encoder) SetIndent(prefix, indent string) SetIndent instructs the encoder to format each subsequent encoded value as if indented by the package-level function Indent(dst, src, prefix, indent). Calling SetIndent(\"\", \"\") disables indentation. type InvalidUTF8Error deprecated type InvalidUTF8Error struct { S string // the whole string value that caused the error } Before Go 1.2, an InvalidUTF8Error was returned by Marshal when attempting to encode a string value with invalid UTF-8 sequences. As of Go 1.2, Marshal instead coerces the string to valid UTF-8 by replacing invalid bytes with the Unicode replacement rune U+FFFD. Deprecated: No longer used; kept for compatibility. func (*InvalidUTF8Error) Error ¶ func (e *InvalidUTF8Error) Error() string type InvalidUnmarshalError ¶ type InvalidUnmarshalError struct { Type reflect.Type } An InvalidUnmarshalError describes an invalid argument passed to Unmarshal. (The argument to Unmarshal must be a non-nil pointer.) func (*InvalidUnmarshalError) Error ¶ func (e *InvalidUnmarshalError) Error() string type Marshaler ¶ type Marshaler interface { MarshalJSON() ([]byte, error) } Marshaler is the interface implemented by types that can marshal themselves into valid JSON. type MarshalerError ¶ type MarshalerError struct { Type reflect.Type Err error // contains filtered or unexported fields } A MarshalerError represents an error from calling a [Marshaler.MarshalJSON] or encoding.TextMarshaler.MarshalText method. func (*MarshalerError) Error ¶ func (e *MarshalerError) Error() string func (*MarshalerError) Unwrap ¶ added in go1.13 func (e *MarshalerError) Unwrap() error Unwrap returns the underlying error. type Number ¶ added in go1.1 type Number string A Number represents a JSON number literal. func (Number) Float64 ¶ added in go1.1 func (n Number) Float64() (float64, error) Float64 returns the number as a float64. func (Number) Int64 ¶ added in go1.1 func (n Number) Int64() (int64, error) Int64 returns the number as an int64. func (Number) String ¶ added in go1.1 func (n Number) String() string String returns the literal text of the number. type RawMessage ¶ type RawMessage []byte RawMessage is a raw encoded JSON value. It implements Marshaler and Unmarshaler and can be used to delay JSON decoding or precompute a JSON encoding. Example (Marshal) ¶ This example uses RawMessage to use a precomputed JSON during marshal. package main import ( \"encoding/json\" \"fmt\" \"os\" ) func main() { h := json.RawMessage(`{\"precomputed\": true}`) c := struct { Header *json.RawMessage `json:\"header\"` Body string `json:\"body\"` }{Header: \u0026h, Body: \"Hello Gophers!\"} b, err := json.MarshalIndent(\u0026c, \"\", \"\\t\") if err != nil { fmt.Println(\"error:\", err) } os.Stdout.Write(b) } Output: { \"header\": { \"precomputed\": true }, \"body\": \"Hello Gophers!\" } Share Format Run Example (Unmarshal) ¶ This example uses RawMessage to delay parsing part of a JSON message. package main import ( \"encoding/json\" \"fmt\" \"log\" ) func main() { type Color struct { Space string Point json.RawMessage // delay parsing until we know the color space } type RGB struct { R uint8 G uint8 B uint8 } type YCbCr struct { Y uint8 Cb int8 Cr int8 } var j = []byte(`[ {\"Space\": \"YCbCr\", \"Point\": {\"Y\": 255, \"Cb\": 0, \"Cr\": -10}}, {\"Space\": \"RGB\", \"Point\": {\"R\": 98, \"G\": 218, \"B\": 255}} ]`) var colors []Color err := json.Unmarshal(j, \u0026colors) if err != nil { log.Fatalln(\"error:\", err) } for _, c := range colors { var dst any switch c.Space { case \"RGB\": dst = new(RGB) case \"YCbCr\": dst = new(YCbCr) } err := json.Unmarshal(c.Point, dst) if err != nil { log.Fatalln(\"error:\", err) } fmt.Println(c.Space, dst) } } Output: YCbCr \u0026{255 0 -10} RGB \u0026{98 218 255} Share Format Run func (RawMessage) MarshalJSON ¶ func (m RawMessage) MarshalJSON() ([]byte, error) MarshalJSON returns m as the JSON encoding of m. func (*RawMessage) UnmarshalJSON ¶ func (m *RawMessage) UnmarshalJSON(data []byte) error UnmarshalJSON sets *m to a copy of data. type SyntaxError ¶ type SyntaxError struct { Offset int64 // error occurred after reading Offset bytes // contains filtered or unexported fields } A SyntaxError is a description of a JSON syntax error. Unmarshal will return a SyntaxError if the JSON can't be parsed. func (*SyntaxError) Error ¶ func (e *SyntaxError) Error() string type Token ¶ added in go1.5 type Token any A Token holds a value of one of these types: Delim, for the four JSON delimiters [ ] { } bool, for JSON booleans float64, for JSON numbers Number, for JSON numbers string, for JSON string literals nil, for JSON null type UnmarshalFieldError deprecated type UnmarshalFieldError struct { Key string Type reflect.Type Field reflect.StructField } An UnmarshalFieldError describes a JSON object key that led to an unexported (and therefore unwritable) struct field. Deprecated: No longer used; kept for compatibility. func (*UnmarshalFieldError) Error ¶ func (e *UnmarshalFieldError) Error() string type UnmarshalTypeError ¶ type UnmarshalTypeError struct { Value string // description of JSON value - \"bool\", \"array\", \"number -5\" Type reflect.Type // type of Go value it could not be assigned to Offset int64 // error occurred after reading Offset bytes Struct string // name of the struct type containing the field Field string // the full path from root node to the field, include embedded struct } An UnmarshalTypeError describes a JSON value that was not appropriate for a value of a specific Go type. func (*UnmarshalTypeError) Error ¶ func (e *UnmarshalTypeError) Error() string type Unmarshaler ¶ type Unmarshaler interface { UnmarshalJSON([]byte) error } Unmarshaler is the interface implemented by types that can unmarshal a JSON description of themselves. The input can be assumed to be a valid encoding of a JSON value. UnmarshalJSON must copy the JSON data if it wishes to retain the data after returning. type UnsupportedTypeError ¶ type UnsupportedTypeError struct { Type reflect.Type } An UnsupportedTypeError is returned by Marshal when attempting to encode an unsupported value type. func (*UnsupportedTypeError) Error ¶ func (e *UnsupportedTypeError) Error() string type UnsupportedValueError ¶ type UnsupportedValueError struct { Value reflect.Value Str string } An UnsupportedValueError is returned by Marshal when attempting to encode an unsupported value. func (*UnsupportedValueError) Error ¶ func (e *UnsupportedValueError) Error() string ## Functions (7) - `func Compact(dst *bytes.Buffer, src []byte) error` - `func HTMLEscape(dst *bytes.Buffer, src []byte)` - `func Indent(dst *bytes.Buffer, src []byte, prefix, indent string) error` - `func Marshal(v any) ([]byte, error)` - `func MarshalIndent(v any, prefix, indent string) ([]byte, error)` - `func Unmarshal(data []byte, v any) error` - `func Valid(data []byte) bool` ## Types (16) - `type Decoder ¶` (alias) - `type Delim ¶ added in go1.5` (alias) - `type Encoder ¶` (alias) - `type InvalidUTF8Error deprecated` (alias) - `type InvalidUnmarshalError ¶` (alias) - `type Marshaler ¶` (alias) - `type MarshalerError ¶` (alias) - `type Number ¶ added in go1.1` (alias) - `type RawMessage ¶` (alias) - `type SyntaxError ¶` (alias) - `type Token ¶ added in go1.5` (alias) - `type UnmarshalFieldError deprecated` (alias) - `type UnmarshalTypeError ¶` (alias) - `type Unmarshaler ¶` (alias) - `type UnsupportedTypeError ¶` (alias) - `type UnsupportedValueError ¶` (alias)", "term_freq": { "##": 3, "%+v": 1, "%d\\n": 2, "%d\\n*": 4, "%s": 1, "%s\\n": 1, "%t": 3, "%v": 2, "%v\\n": 3, "\u0026animals": 1, "\u0026c": 1, "\u0026colors": 1, "\u0026h": 1, "\u0026inventory": 1, "\u0026m": 2, "\u0026out": 2, "\u0026s": 1, "\u0026zoo": 1, "*a": 3, "*animal": 1, "*bytes": 9, "*decoder": 23, "*encoder": 11, "*invalidunmarshalerror": 3, "*invalidutf8error": 3, "*json": 1, "*m": 1, "*marshalererror": 6, "*rawmessage": 3, "*s": 3, "*size": 1, "*syntaxerror": 3, "*unmarshalfielderror": 3, "*unmarshaltypeerror": 3, "*unsupportedtypeerror": 3, "*unsupportedvalueerror": 3, "+/-inf": 1, "+=": 2, "-10": 2, "-5": 1, "//": 25, "//go": 3, "//golang": 1, "//pkg": 1, "10": 1, "13": 1, "14": 1, "16": 1, "218": 2, "234": 2, "255": 4, "29": 2, "51": 2, "7159": 3, "98": 2, "\u003cb\u003ehtml": 1, "\u003cindent\u003e": 1, "\u003cnil\u003e": 2, "\u003cprefix\u003e": 2, "\u003cprefix\u003e\u003cindent\u003e": 2, "\u003cscript\u003e": 3, "==": 2, "\\n": 1, "\\n*": 2, "\\t": 2, "\\u0026": 3, "\\u003c": 3, "\\u003cb\\u003ehtml": 1, "\\u003e": 3, "\\u2028": 2, "\\u2029": 2, "about": 2, "above": 2, "according": 4, "added": 20, "additional": 3, "after": 3, "alias": 16, "all": 2, "allocates": 2, "allocating": 1, "alternative": 1, "although": 1, "always": 1, "amended": 2, "an": 44, "and": 53, "animal": 9, "animals": 2, "anonymous": 7, "another": 1, "any": 25, "appears": 4, "appended": 1, "appends": 4, "applies": 2, "apply": 1, "applying": 1, "appropriate": 2, "are": 30, "argument": 2, "arise": 1, "armadillo": 1, "array": 23, "arrays": 3, "as": 44, "ascii": 1, "assigned": 1, "assumed": 1, "at": 5, "attempting": 4, "avoid": 1, "backslash": 1, "backwards": 1, "badjson": 2, "base64-encoded": 1, "basic": 1, "be": 28, "because": 1, "becomes": 1, "bee": 1, "been": 1, "before": 1, "begin": 2, "beginning": 4, "begins": 1, "behave": 1, "behavior": 3, "behaviors": 5, "being": 5, "below": 1, "best": 1, "between": 2, "beyond": 1, "blob": 4, "body": 4, "bool": 11, "boolean": 2, "booleans": 3, "both": 3, "bracket": 2, "break": 2, "browsers": 1, "buffer": 12, "buffered": 4, "buffering": 1, "build": 2, "but": 5, "by": 23, "byte": 42, "bytes": 9, "call": 1, "called": 1, "calling": 3, "calls": 4, "can": 10, "cannot": 3, "careful": 1, "carriage": 1, "case": 17, "case-insensitive": 2, "cause": 3, "caused": 1, "causes": 3, "cb": 2, "census": 7, "certain": 1, "changed": 2, "channel": 1, "character": 3, "characters": 6, "closing": 1, "coerced": 1, "coerces": 1, "coercion": 1, "colons": 1, "color": 3, "colorgroup": 2, "colors": 5, "comma": 2, "comma-separated": 1, "commas": 1, "communicating": 1, "compact": 5, "compatibility": 3, "completes": 1, "complex": 1, "conflict": 1, "considerations": 2, "considered": 2, "consistently": 1, "consisting": 1, "consists": 1, "const": 5, "constants": 1, "contain": 1, "contained": 1, "containing": 1, "contains": 7, "content\u003c/b\u003e": 1, "content\\u003c/b\\u003e": 1, "conversion": 2, "converted": 1, "copied": 1, "copies": 2, "copy": 2, "corresponding": 1, "could": 1, "counts": 7, "cr": 2, "creek": 2, "crimson": 2, "current": 3, "customized": 1, "custommarshaljson": 2, "cyclic": 2, "dasyuromorphia": 2, "data": 21, "dec": 24, "deciding": 1, "decode": 12, "decoder": 20, "decodes": 2, "decoding": 3, "default": 8, "defined": 4, "definition": 1, "delay": 3, "delim": 16, "delimiter": 2, "delimiters": 3, "depending": 1, "deprecated": 6, "described": 4, "describes": 3, "describing": 1, "description": 3, "destination": 2, "details": 2, "determine": 1, "dev/doc/go1compat": 1, "dev/encoding/json": 1, "diamond": 2, "differences": 1, "differently": 1, "differing": 1, "digits": 1, "directly": 1, "disabled": 1, "disables": 2, "disallowunknownfields": 5, "discarded": 1, "distinct": 2, "do": 1, "documentation": 5, "does": 2, "don": 1, "dropped": 1, "dst": 22, "due": 1, "duplicate": 2, "duplicates": 1, "during": 1, "each": 6, "earlier": 1, "earliest": 1, "easier": 1, "ed": 12, "effect": 1, "either": 4, "element": 4, "elements": 4, "elided": 3, "else": 1, "embed": 3, "embedded": 2, "embedding": 1, "empty": 9, "enc": 6, "encode": 16, "encoded": 4, "encoder": 9, "encodes": 5, "encoding": 21, "encoding/json": 13, "encodings": 2, "encountered": 2, "encounters": 1, "end": 4, "ends": 1, "entries": 1, "eof": 3, "err": 48, "error": 81, "errors": 1, "escape": 1, "escaped": 2, "escaping": 2, "establishes": 1, "even": 1, "exact": 1, "exactly": 1, "example": 21, "examples": 2, "except": 2, "exception": 2, "exhibits": 1, "existing": 2, "exported": 3, "extra": 2, "false": 4, "fashion": 1, "fatal": 9, "fatalln": 2, "field": 45, "fields": 19, "filtered": 4, "first": 3, "float64": 14, "floating": 2, "floating-point": 1, "fmt": 39, "followed": 4, "following": 6, "for": 38, "force": 1, "fork": 2, "form": 2, "format": 17, "formatted": 1, "four": 1, "from": 10, "full": 1, "func": 126, "function": 2, "functions": 4, "generated": 1, "give": 1, "given": 3, "gives": 2, "go": 37, "go-package": 1, "go1": 20, "goexperiment": 2, "goodjson": 2, "gopher": 9, "gophers": 4, "group": 2, "guaranteed": 1, "guarantees": 1, "handle": 1, "handles": 1, "handling": 1, "has": 6, "have": 2, "having": 2, "header": 4, "hello": 4, "historical": 1, "holds": 1, "honor": 1, "how": 1, "html": 6, "htmlescape": 8, "https": 3, "id": 3, "if": 54, "ignored": 4, "ignoring": 2, "implement": 3, "implementations": 2, "implemented": 2, "implementing": 1, "implements": 6, "import": 13, "in": 66, "include": 1, "includes": 1, "including": 1, "incoming": 2, "indent": 20, "indentation": 4, "indented": 3, "independent": 1, "index": 1, "inner": 1, "input": 11, "inputoffset": 4, "inside": 6, "insignificant": 2, "instead": 4, "instructs": 1, "int": 12, "int64": 12, "int64string": 1, "int8": 2, "integer": 5, "integers": 1, "interface": 13, "interferes": 1, "interopability": 1, "interoperability": 1, "into": 22, "introduces": 1, "introduction": 1, "invalid": 7, "invalidunmarshalerror": 6, "invalidutf8error": 4, "invalidutf8errordeprecated": 1, "inventory": 4, "inverse": 1, "io": 11, "iota": 2, "is": 52, "issues": 3, "iszero": 1, "it": 13, "its": 8, "javascript": 1, "json": 149, "json-encoded": 7, "json-tagged": 1, "jsonblob": 2, "jsonstream": 6, "jsonv2": 2, "keeping": 1, "kept": 2, "key": 12, "key-value": 1, "keys": 13, "knock": 8, "know": 1, "large": 11, "later": 2, "lax": 1, "leading": 2, "least": 1, "led": 1, "length": 2, "letters": 1, "level": 4, "library/encoding/json": 2, "like": 1, "line": 2, "list": 1, "literal": 3, "literals": 2, "location": 1, "log": 19, "longer": 2, "lose": 1, "main": 26, "make": 3, "many": 1, "map": 16, "mapping": 2, "maps": 2, "mark": 1, "marks": 1, "maroon": 2, "marshal": 31, "marshaled": 2, "marshaler": 10, "marshalererror": 5, "marshalindent": 8, "marshaljson": 9, "marshaltext": 3, "match": 3, "matched": 1, "matches": 1, "may": 6, "mean": 2, "meaning": 1, "meanings": 1, "member": 1, "members": 1, "merged": 3, "message": 8, "method": 4, "mimics": 1, "monotremata": 2, "more": 21, "most": 1, "multiple": 5, "must": 5, "myname": 4, "name": 43, "nan": 1, "necessary": 3, "neither": 1, "nested": 2, "nesting": 3, "new": 10, "newdecoder": 7, "newencoder": 4, "newline": 3, "newreader": 3, "next": 5, "nil": 33, "no": 8, "node": 1, "non-empty": 1, "non-html": 1, "non-ignored": 1, "non-nil": 1, "nor": 1, "normal": 1, "not": 12, "note": 2, "null": 13, "null—along": 1, "number": 33, "numbers": 4, "object": 22, "objects": 5, "observed": 2, "occurred": 2, "occurs": 1, "of": 65, "offset": 6, "often": 1, "omitempty": 4, "omitted": 6, "omitzero": 2, "on": 7, "one": 9, "only": 3, "open": 1, "option": 3, "options": 2, "or": 27, "order": 8, "org/doc/articles/json_and_go": 1, "os": 8, "other": 4, "otherwise": 7, "out": 4, "outer": 1, "output": 17, "over": 1, "overflows": 1, "overriding": 1, "overview": 1, "own": 1, "package": 21, "package-level": 1, "pairs": 2, "paragraph": 1, "parse": 1, "parsed": 3, "parser": 4, "parsers": 2, "parses": 1, "parsing": 5, "part": 1, "particular": 2, "passed": 1, "passing": 1, "path": 1, "platypus": 2, "point": 7, "pointed": 4, "pointer": 12, "pointers": 1, "position": 1, "possibly": 1, "precision": 1, "precompute": 1, "precomputed": 3, "preferred": 1, "prefix": 12, "present": 2, "preserved": 1, "printf": 10, "println": 6, "prior": 3, "problematic": 2, "problems": 1, "processed": 2, "produce": 1, "produces": 1, "programs": 1, "promise": 1, "properly": 1, "punctuation": 1, "purposes": 1, "quoll": 2, "quotation": 1, "quoted": 3, "range": 3, "rather": 2, "raw": 1, "rawmessage": 15, "read": 3, "readability": 1, "reader": 6, "reading": 2, "reads": 3, "reasons": 2, "recently": 1, "recursively": 1, "red": 2, "reds": 2, "reflect": 7, "regular": 1, "rely": 1, "remaining": 2, "replace": 2, "replaced": 3, "replacement": 5, "replaces": 2, "replacing": 2, "reports": 2, "represent": 1, "represents": 2, "requested": 1, "resets": 1, "result": 3, "retain": 1, "return": 11, "returned": 4, "returning": 1, "returns": 16, "reuses": 1, "rfc": 3, "rgb": 5, "road": 2, "roads": 2, "root": 1, "ruby": 2, "rule": 1, "rules": 7, "run": 13, "rune": 3, "safe": 2, "safety": 1, "sam": 8, "same": 3, "scenarios": 1, "section": 2, "security": 3, "see": 3, "selected": 2, "sequences": 1, "serious": 1, "set": 1, "setescapehtml": 6, "setindent": 5, "sets": 2, "setting": 1, "settings": 1, "share": 13, "sheep": 2, "should": 4, "signals": 1, "similar": 1, "size": 7, "skipped": 1, "skips": 1, "slice": 10, "slices": 1, "small": 11, "smaller": 2, "so": 4, "sometimes": 1, "sorted": 1, "space": 11, "spaces": 1, "special": 2, "specific": 1, "specified": 1, "specifies": 3, "specify": 1, "src": 17, "standard": 4, "start": 1, "stdout": 4, "still": 1, "stored": 2, "stores": 4, "str": 1, "stream": 11, "streaming": 1, "strictly": 1, "string": 90, "strings": 16, "struct": 42, "structfield": 1, "structs": 1, "structures": 2, "subject": 2, "subsequent": 1, "such": 3, "surrogate": 1, "switch": 5, "syntax": 2, "syntaxerror": 7, "systems": 2, "tab": 1, "tag": 6, "tagged": 2, "tags": 4, "target": 3, "text": 17, "textmarshaler": 5, "textmarshaljson": 2, "textunmarshaler": 3, "than": 4, "that": 33, "the": 209, "their": 2, "them": 1, "themselves": 2, "then": 2, "there": 10, "therefore": 2, "these": 4, "they": 2, "this": 14, "those": 1, "to": 84, "token": 21, "tolower": 2, "trailing": 3, "traverses": 1, "treated": 3, "true": 3, "type": 102, "type-dependent": 1, "types": 8, "u+2028": 2, "u+2029": 2, "u+fffd": 2, "uint8": 4, "under": 1, "underlying": 1, "understand": 1, "unexpected": 1, "unexported": 5, "unicode": 5, "unknown": 8, "unless": 2, "unmarshal": 51, "unmarshaled": 2, "unmarshaler": 9, "unmarshalfielderror": 4, "unmarshalfielderrordeprecated": 1, "unmarshaling": 3, "unmarshaljson": 9, "unmarshals": 2, "unmarshaltext": 2, "unmarshaltypeerror": 6, "unquoted": 1, "unrecognized": 7, "unsupported": 2, "unsupportedtypeerror": 6, "unsupportedvalueerror": 6, "untagged": 1, "until": 2, "unwrap": 4, "unwritable": 1, "use": 3, "used": 12, "usenumber": 4, "uses": 8, "using": 4, "usual": 2, "usually": 1, "utf-16": 1, "utf-8": 6, "valid": 14, "value": 50, "values": 26, "values—bool": 1, "var": 14, "variables": 1, "various": 1, "versions": 1, "visibility": 2, "was": 2, "ways": 1, "we": 1, "web": 1, "well": 1, "were": 2, "when": 13, "where": 1, "whether": 4, "which": 3, "while": 2, "who": 8, "whole": 1, "will": 17, "wishes": 1, "with": 18, "within": 1, "without": 1, "would": 2, "write": 2, "writer": 2, "writes": 3, "writeto": 2, "ycbcr": 5, "yourself": 4, "zebra": 8, "zebras": 2, "zero": 8, "zoo": 4, "¶": 82, "¶the": 1, "“not": 1, "”": 1 }, "length": 4873 }, { "id": "0702fcf2fb9ac8ff50abe65d", "doc_id": "b1934dd04b4b857a31ea20f5", "title": "json.func Compact", "url": "https://pkg.go.dev/encoding/json#func Compact ¶", "type": "go-function", "source": "go:encoding/json", "path": "devour_data/docs/json.func-compact.json", "content": "# json.func Compact ¶ ``` func Compact(dst *bytes.Buffer, src []byte) error ``` Compact appends to dst the JSON-encoded src with insignificant space characters elided.", "term_freq": { "*bytes": 1, "//pkg": 1, "appends": 1, "buffer": 1, "byte": 1, "characters": 1, "compact": 5, "dev/encoding/json#func": 1, "dst": 2, "elided": 1, "error": 1, "func": 3, "go": 1, "go-function": 1, "https": 1, "insignificant": 1, "json": 2, "json-encoded": 1, "space": 1, "src": 2, "the": 1, "to": 1, "with": 1, "¶": 2 }, "length": 34 }, { "id": "4e740a3ce76adb502f559bd5", "doc_id": "cc0f9451f104f7081ab29476", "title": "json.func HTMLEscape", "url": "https://pkg.go.dev/encoding/json#func HTMLEscape ¶", "type": "go-function", "source": "go:encoding/json", "path": "devour_data/docs/json.func-htmlescape.json", "content": "# json.func HTMLEscape ¶ ``` func HTMLEscape(dst *bytes.Buffer, src []byte) ``` HTMLEscape appends to dst the JSON-encoded src with \u003c, \u003e, \u0026, U+2028 and U+2029 characters inside string literals changed to \\u003c, \\u003e, \\u0026, \\u2028, \\u2029 so that the JSON will be safe to embed inside HTML \u003cscript\u003e tags. For historical reasons, web browsers don't honor standard HTML escaping within \u003cscript\u003e tags, so an alternative JSON encoding must be used.", "term_freq": { "*bytes": 1, "//pkg": 1, "\u003cscript\u003e": 2, "\\u0026": 1, "\\u003c": 1, "\\u003e": 1, "\\u2028": 1, "\\u2029": 1, "alternative": 1, "an": 1, "and": 1, "appends": 1, "be": 2, "browsers": 1, "buffer": 1, "byte": 1, "changed": 1, "characters": 1, "dev/encoding/json#func": 1, "don": 1, "dst": 2, "embed": 1, "encoding": 1, "escaping": 1, "for": 1, "func": 3, "go": 1, "go-function": 1, "historical": 1, "honor": 1, "html": 2, "htmlescape": 5, "https": 1, "inside": 2, "json": 4, "json-encoded": 1, "literals": 1, "must": 1, "reasons": 1, "safe": 1, "so": 2, "src": 2, "standard": 1, "string": 1, "tags": 2, "that": 1, "the": 2, "to": 3, "u+2028": 1, "u+2029": 1, "used": 1, "web": 1, "will": 1, "with": 1, "within": 1, "¶": 2 }, "length": 77 }, { "id": "18cc6971acc7a3035b0ffbdf", "doc_id": "806cb7f0683295913c960f99", "title": "json.func Indent", "url": "https://pkg.go.dev/encoding/json#func Indent ¶", "type": "go-function", "source": "go:encoding/json", "path": "devour_data/docs/json.func-indent.json", "content": "# json.func Indent ¶ ``` func Indent(dst *bytes.Buffer, src []byte, prefix, indent string) error ``` Indent appends to dst an indented form of the JSON-encoded src. Each element in a JSON object or array begins on a new, indented line beginning with prefix followed by one or more copies of indent according to the indentation nesting. The data appended to dst does not begin with the prefix nor any indentation, to make it easier to embed inside other formatted JSON data. Although leading space characters (space, tab, carriage return, newline) at the beginning of src are dropped, trailing space characters at the end of src are preserved and copied to dst. For example, if src has no trailing spaces, neither will dst; if src ends in a trailing newline, so will dst.", "term_freq": { "*bytes": 1, "//pkg": 1, "according": 1, "although": 1, "an": 1, "and": 1, "any": 1, "appended": 1, "appends": 1, "are": 2, "array": 1, "at": 2, "begin": 1, "beginning": 2, "begins": 1, "buffer": 1, "by": 1, "byte": 1, "carriage": 1, "characters": 2, "copied": 1, "copies": 1, "data": 2, "dev/encoding/json#func": 1, "does": 1, "dropped": 1, "dst": 6, "each": 1, "easier": 1, "element": 1, "embed": 1, "end": 1, "ends": 1, "error": 1, "example": 1, "followed": 1, "for": 1, "form": 1, "formatted": 1, "func": 3, "go": 1, "go-function": 1, "has": 1, "https": 1, "if": 2, "in": 2, "indent": 7, "indentation": 2, "indented": 2, "inside": 1, "it": 1, "json": 4, "json-encoded": 1, "leading": 1, "line": 1, "make": 1, "more": 1, "neither": 1, "nesting": 1, "new": 1, "newline": 2, "no": 1, "nor": 1, "not": 1, "object": 1, "of": 4, "on": 1, "one": 1, "or": 2, "other": 1, "prefix": 3, "preserved": 1, "return": 1, "so": 1, "space": 3, "spaces": 1, "src": 6, "string": 1, "tab": 1, "the": 6, "to": 6, "trailing": 3, "will": 2, "with": 2, "¶": 2 }, "length": 139 }, { "id": "3ee1a0bf9115aa46d069d423", "doc_id": "bc298c2cd570294cfcd22b55", "title": "json.func Marshal", "url": "https://pkg.go.dev/encoding/json#func Marshal ¶", "type": "go-function", "source": "go:encoding/json", "path": "devour_data/docs/json.func-marshal.json", "content": "# json.func Marshal ¶ ``` func Marshal(v any) ([]byte, error) ``` Marshal returns the JSON encoding of v.", "term_freq": { "//pkg": 1, "any": 1, "byte": 1, "dev/encoding/json#func": 1, "encoding": 1, "error": 1, "func": 3, "go": 1, "go-function": 1, "https": 1, "json": 3, "marshal": 5, "of": 1, "returns": 1, "the": 1, "¶": 2 }, "length": 25 }, { "id": "4e6e77ad6730ef9a95c95129", "doc_id": "96402bb52a5c1203e1c40a10", "title": "json.func MarshalIndent", "url": "https://pkg.go.dev/encoding/json#func MarshalIndent ¶", "type": "go-function", "source": "go:encoding/json", "path": "devour_data/docs/json.func-marshalindent.json", "content": "# json.func MarshalIndent ¶ ``` func MarshalIndent(v any, prefix, indent string) ([]byte, error) ``` MarshalIndent is like Marshal but applies Indent to format the output. Each JSON element in the output will begin on a new line beginning with prefix followed by one or more copies of indent according to the indentation nesting.", "term_freq": { "//pkg": 1, "according": 1, "any": 1, "applies": 1, "begin": 1, "beginning": 1, "but": 1, "by": 1, "byte": 1, "copies": 1, "dev/encoding/json#func": 1, "each": 1, "element": 1, "error": 1, "followed": 1, "format": 1, "func": 3, "go": 1, "go-function": 1, "https": 1, "in": 1, "indent": 3, "indentation": 1, "is": 1, "json": 3, "like": 1, "line": 1, "marshal": 1, "marshalindent": 5, "more": 1, "nesting": 1, "new": 1, "of": 1, "on": 1, "one": 1, "or": 1, "output": 2, "prefix": 2, "string": 1, "the": 3, "to": 2, "will": 1, "with": 1, "¶": 2 }, "length": 60 }, { "id": "92c0956c12e4a7c02af52dbe", "doc_id": "f0246916aeff3054541ad0f0", "title": "json.func Unmarshal", "url": "https://pkg.go.dev/encoding/json#func Unmarshal ¶", "type": "go-function", "source": "go:encoding/json", "path": "devour_data/docs/json.func-unmarshal.json", "content": "# json.func Unmarshal ¶ ``` func Unmarshal(data []byte, v any) error ``` Unmarshal parses the JSON-encoded data and stores the result in the value pointed to by v. If v is nil or not a pointer, Unmarshal returns an InvalidUnmarshalError.", "term_freq": { "//pkg": 1, "an": 1, "and": 1, "any": 1, "by": 1, "byte": 1, "data": 2, "dev/encoding/json#func": 1, "error": 1, "func": 3, "go": 1, "go-function": 1, "https": 1, "if": 1, "in": 1, "invalidunmarshalerror": 1, "is": 1, "json": 2, "json-encoded": 1, "nil": 1, "not": 1, "or": 1, "parses": 1, "pointed": 1, "pointer": 1, "result": 1, "returns": 1, "stores": 1, "the": 3, "to": 1, "unmarshal": 6, "value": 1, "¶": 2 }, "length": 45 }, { "id": "42683b836d1b73500adf8487", "doc_id": "4ecea39a5f13a93c88ebd94c", "title": "json.func Valid added in go1.9", "url": "https://pkg.go.dev/encoding/json#func Valid ¶\n \n \n added in\n go1.9", "type": "go-function", "source": "go:encoding/json", "path": "devour_data/docs/json.func-valid-added-in-go1.9.json", "content": "# json.func Valid ¶ added in go1.9 ``` func Valid(data []byte) bool ``` Valid reports whether data is a valid JSON encoding.", "term_freq": { "//pkg": 1, "added": 3, "bool": 1, "byte": 1, "data": 2, "dev/encoding/json#func": 1, "encoding": 1, "func": 3, "go": 1, "go-function": 1, "go1": 3, "https": 1, "in": 3, "is": 1, "json": 3, "reports": 1, "valid": 6, "whether": 1, "¶": 2 }, "length": 36 }, { "id": "045a47536442a3e0a99b8307", "doc_id": "0c948f59f519aee46b505c6b", "title": "json", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/response-helpers/json.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/json.json", "content": "--- title: json use_cases: \u003e- returning api data, action responses, cache control, revalidation strategies, server actions tags: - json - api - actions - queries - revalidation - response version: \"1.0\" description: \u003e- Return JSON data from actions with query revalidation control. Configure how route data updates after mutations for optimal performance. --- The `json` function returns a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object that contains the provided data. It is intended for sending JSON data from a [query](/solid-router/reference/data-apis/query) or [action](/solid-router/concepts/actions) while also allowing configuration of query revalidation. This works both in client and server (e.g., using a server function) environments. ## Import ```ts import { json } from \"@solidjs/router\"; ``` ## Type ```ts function json\u003cT\u003e( data: T, init: { revalidate?: string | string[]; headers?: HeadersInit; status?: number; statusText?: string; } = {} ): CustomResponse\u003cT\u003e; ``` ## Parameters ### `data` - **Type:** `T` - **Required:** Yes The data to be serialized as JSON in the response body. It must be a value that can be serialized with [`JSON.stringify`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify). ### `init` - **Type:** `{ revalidate?: string | string[]; headers?: HeadersInit; status?: number; statusText?: string; }` - **Required:** No An optional configuration object with the following properties: #### `revalidate` - **Type:** `string | string[]` - **Required:** No A query key or an array of query keys to revalidate. Passing an empty array (`[]`) disables query revalidation entirely. #### `headers` - **Type:** `HeadersInit` - **Required:** No An object containing any headers to be sent with the response. #### `status` - **Type:** `number` - **Required:** No The HTTP status code of the response. Defaults to [`200 OK`](http://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/200). #### `statusText` - **Type:** `string` - **Required:** No The status text associated with the status code. ## Examples ### Invalidating Data After a Mutation ```tsx import { For } from \"solid-js\"; import { query, action, json, createAsync } from \"@solidjs/router\"; const getCurrentUserQuery = query(async () =\u003e { return await fetch(\"/api/me\").then((response) =\u003e response.json()); }, \"currentUser\"); const getPostsQuery = query(async () =\u003e { return await fetch(\"/api/posts\").then((response) =\u003e response.json()); }, \"posts\"); const createPostAction = action(async (formData: FormData) =\u003e { const title = formData.get(\"title\")?.toString(); const newPost = await fetch(\"/api/posts\", { method: \"POST\", body: JSON.stringify({ title }), }).then((response) =\u003e response.json()); // Only revalidate the \"posts\" query. return json(newPost, { revalidate: \"posts\" }); }, \"createPost\"); function Posts() { const currentUser = createAsync(() =\u003e getCurrentUserQuery()); const posts = createAsync(() =\u003e getPostsQuery()); return ( \u003cdiv\u003e \u003cp\u003eWelcome back {currentUser()?.name}\u003c/p\u003e \u003cul\u003e \u003cFor each={posts()}\u003e{(post) =\u003e \u003cli\u003e{post.title}\u003c/li\u003e}\u003c/For\u003e \u003c/ul\u003e \u003cform action={createPostAction} method=\"post\"\u003e \u003cinput name=\"title\" /\u003e \u003cbutton\u003eCreate Post\u003c/button\u003e \u003c/form\u003e \u003c/div\u003e ); } ``` ## Related - [`query`](/solid-router/reference/data-apis/query) - [`action`](/solid-router/reference/data-apis/action)", "term_freq": { "##": 5, "###": 3, "####": 4, "**": 12, "**required": 6, "**type": 6, "---": 2, "//": 1, "//developer": 3, "//github": 1, "/\u003e": 1, "/api/me": 1, "/api/posts": 2, "/solid-router/concepts/actions": 1, "/solid-router/reference/data-apis/action": 1, "/solid-router/reference/data-apis/query": 2, "200": 1, "\u003c/div\u003e": 1, "\u003c/for\u003e": 1, "\u003c/form\u003e": 1, "\u003c/li\u003e": 1, "\u003c/p\u003e": 1, "\u003c/ul\u003e": 1, "\u003cbutton\u003ecreate": 1, "\u003cdiv\u003e": 1, "\u003cfor": 1, "\u003cform": 1, "\u003cinput": 1, "\u003cli\u003e": 1, "\u003cp\u003ewelcome": 1, "\u003cul\u003e": 1, "=\u003e": 9, "\u003e-": 2, "@solidjs/router": 2, "action": 5, "action=": 1, "actions": 3, "after": 2, "allowing": 1, "also": 1, "an": 4, "and": 1, "any": 1, "api": 2, "array": 2, "as": 1, "associated": 1, "async": 3, "await": 3, "back": 1, "be": 4, "body": 2, "both": 1, "cache": 1, "can": 1, "client": 1, "code": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/response-helpers/json": 1, "configuration": 2, "configure": 1, "const": 7, "containing": 1, "contains": 1, "control": 2, "createasync": 3, "createpost": 1, "createpostaction": 2, "currentuser": 3, "customresponse\u003ct\u003e": 1, "data": 9, "defaults": 1, "description": 1, "disables": 1, "each=": 1, "empty": 1, "entirely": 1, "environments": 1, "examples": 1, "fetch": 3, "following": 1, "for": 3, "formdata": 3, "from": 5, "function": 4, "get": 1, "getcurrentuserquery": 2, "getpostsquery": 2, "github-document": 1, "headers": 4, "headersinit": 3, "how": 1, "http": 2, "https": 3, "import": 4, "in": 2, "init": 2, "intended": 1, "invalidating": 1, "is": 1, "it": 2, "json": 15, "json\u003ct\u003e": 1, "key": 1, "keys": 1, "mdx": 1, "method": 1, "method=": 1, "mozilla": 3, "must": 1, "mutation": 1, "mutations": 1, "name": 1, "name=": 1, "newpost": 2, "no": 5, "number": 3, "object": 3, "of": 3, "ok": 1, "only": 1, "optimal": 1, "optional": 1, "or": 2, "org/en-us/docs/web/api/response": 1, "org/en-us/docs/web/http/reference/status/200": 1, "org/en-us/docs/web/javascript/reference/global_objects/json/stringify": 1, "parameters": 1, "passing": 1, "performance": 1, "post": 4, "post\u003c/button\u003e": 1, "posts": 6, "properties": 1, "provided": 1, "queries": 1, "query": 11, "related": 1, "response": 11, "responses": 1, "return": 5, "returning": 1, "returns": 1, "revalidate": 6, "revalidation": 5, "route": 1, "sending": 1, "sent": 1, "serialized": 2, "server": 3, "solid-js": 1, "status": 6, "statustext": 3, "strategies": 1, "string": 9, "stringify": 2, "tags": 1, "text": 1, "that": 2, "the": 11, "then": 3, "this": 1, "title": 6, "to": 4, "tostring": 1, "ts": 2, "tsx": 1, "type": 1, "updates": 1, "use_cases": 1, "using": 1, "value": 1, "version": 1, "while": 1, "with": 5, "works": 1, "yes": 1 }, "length": 406 }, { "id": "9cdfd71a4bef334b1e588414", "doc_id": "01fb0d74f35bb30747c0e3ac", "title": "json.type Decoder", "url": "https://pkg.go.dev/encoding/json#type Decoder ¶", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-decoder.json", "content": "# type json.type Decoder ¶ ``` type Decoder struct { // contains filtered or unexported fields } ``` A Decoder reads and decodes JSON values from an input stream.", "term_freq": { "//": 1, "//pkg": 1, "an": 1, "and": 1, "contains": 1, "decoder": 5, "decodes": 1, "dev/encoding/json#type": 1, "fields": 1, "filtered": 1, "from": 1, "go": 1, "go-type": 1, "https": 1, "input": 1, "json": 3, "or": 1, "reads": 1, "stream": 1, "struct": 1, "type": 4, "unexported": 1, "values": 1, "¶": 2 }, "length": 34 }, { "id": "f5b042a46ae72531f31572b5", "doc_id": "1a2cbc7ba9f7826cee359021", "title": "json.type Delim added in go1.5", "url": "https://pkg.go.dev/encoding/json#type Delim ¶\n \n \n added in\n go1.5", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-delim-added-in-go1.5.json", "content": "# type json.type Delim ¶ added in go1.5 ``` type Delim rune ``` A Delim is a JSON array or object delimiter, one of [ ] { or }.", "term_freq": { "//pkg": 1, "added": 3, "array": 1, "delim": 5, "delimiter": 1, "dev/encoding/json#type": 1, "go": 1, "go-type": 1, "go1": 3, "https": 1, "in": 3, "is": 1, "json": 3, "object": 1, "of": 1, "one": 1, "or": 2, "rune": 1, "type": 4, "¶": 2 }, "length": 37 }, { "id": "e4f9c1cb5ff9febf08668987", "doc_id": "db1b2e25ed3f92205d3c6c73", "title": "json.type Encoder", "url": "https://pkg.go.dev/encoding/json#type Encoder ¶", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-encoder.json", "content": "# type json.type Encoder ¶ ``` type Encoder struct { // contains filtered or unexported fields } ``` An Encoder writes JSON values to an output stream.", "term_freq": { "//": 1, "//pkg": 1, "an": 2, "contains": 1, "dev/encoding/json#type": 1, "encoder": 5, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "https": 1, "json": 3, "or": 1, "output": 1, "stream": 1, "struct": 1, "to": 1, "type": 4, "unexported": 1, "values": 1, "writes": 1, "¶": 2 }, "length": 33 }, { "id": "08658caf060136b9647bfb26", "doc_id": "406248de0d17d00a50d77f2c", "title": "json.type InvalidUnmarshalError", "url": "https://pkg.go.dev/encoding/json#type InvalidUnmarshalError ¶", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-invalidunmarshalerror.json", "content": "# type json.type InvalidUnmarshalError ¶ ``` type InvalidUnmarshalError struct { Type reflect.Type } ``` An InvalidUnmarshalError describes an invalid argument passed to Unmarshal. (The argument to Unmarshal must be a non-nil pointer.)", "term_freq": { "//pkg": 1, "an": 2, "argument": 2, "be": 1, "describes": 1, "dev/encoding/json#type": 1, "go": 1, "go-type": 1, "https": 1, "invalid": 1, "invalidunmarshalerror": 5, "json": 2, "must": 1, "non-nil": 1, "passed": 1, "pointer": 1, "reflect": 1, "struct": 1, "the": 1, "to": 2, "type": 6, "unmarshal": 2, "¶": 2 }, "length": 38 }, { "id": "4e8f9fb1d960e4722641e2ce", "doc_id": "2ea0df04aec4bc8006e9a923", "title": "json.type InvalidUTF8Error", "url": "https://pkg.go.dev/encoding/json#type InvalidUTF8Error\n deprecated", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-invalidutf8error.json", "content": "# type json.type InvalidUTF8Error deprecated ``` type InvalidUTF8Error struct { S string // the whole string value that caused the error } ``` Before Go 1.2, an InvalidUTF8Error was returned by Marshal when attempting to encode a string value with invalid UTF-8 sequences. As of Go 1.2, Marshal instead coerces the string to valid UTF-8 by replacing invalid bytes with the Unicode replacement rune U+FFFD.", "term_freq": { "//": 1, "//pkg": 1, "an": 1, "as": 1, "attempting": 1, "before": 1, "by": 2, "bytes": 1, "caused": 1, "coerces": 1, "deprecated": 2, "dev/encoding/json#type": 1, "encode": 1, "error": 1, "go": 3, "go-type": 1, "https": 1, "instead": 1, "invalid": 2, "invalidutf8error": 5, "json": 2, "marshal": 2, "of": 1, "replacement": 1, "replacing": 1, "returned": 1, "rune": 1, "sequences": 1, "string": 4, "struct": 1, "that": 1, "the": 4, "to": 2, "type": 4, "u+fffd": 1, "unicode": 1, "utf-8": 2, "valid": 1, "value": 2, "was": 1, "when": 1, "whole": 1, "with": 2 }, "length": 67 }, { "id": "c68219aa4d9e84da6d60c233", "doc_id": "f7f4fc48950cfecfa95dbad3", "title": "json.type Marshaler", "url": "https://pkg.go.dev/encoding/json#type Marshaler ¶", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-marshaler.json", "content": "# type json.type Marshaler ¶ ``` type Marshaler interface { MarshalJSON() ([]byte, error) } ``` Marshaler is the interface implemented by types that can marshal themselves into valid JSON.", "term_freq": { "//pkg": 1, "by": 1, "byte": 1, "can": 1, "dev/encoding/json#type": 1, "error": 1, "go": 1, "go-type": 1, "https": 1, "implemented": 1, "interface": 2, "into": 1, "is": 1, "json": 3, "marshal": 1, "marshaler": 5, "marshaljson": 1, "that": 1, "the": 1, "themselves": 1, "type": 4, "types": 1, "valid": 1, "¶": 2 }, "length": 35 }, { "id": "8068d08b3797b63a3099b554", "doc_id": "68834d412267d89675102d10", "title": "json.type MarshalerError", "url": "https://pkg.go.dev/encoding/json#type MarshalerError ¶", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-marshalererror.json", "content": "# type json.type MarshalerError ¶ ``` type MarshalerError struct { Type reflect.Type Err error // contains filtered or unexported fields } ``` A MarshalerError represents an error from calling a [Marshaler.MarshalJSON] or encoding.TextMarshaler.MarshalText method.", "term_freq": { "//": 1, "//pkg": 1, "an": 1, "calling": 1, "contains": 1, "dev/encoding/json#type": 1, "encoding": 1, "err": 1, "error": 2, "fields": 1, "filtered": 1, "from": 1, "go": 1, "go-type": 1, "https": 1, "json": 2, "marshaler": 1, "marshalererror": 5, "marshaljson": 1, "marshaltext": 1, "method": 1, "or": 2, "reflect": 1, "represents": 1, "struct": 1, "textmarshaler": 1, "type": 6, "unexported": 1, "¶": 2 }, "length": 42 }, { "id": "2d985ef63d693cf73188e94e", "doc_id": "ca0ac5da0ab10a8f2f9c2d0d", "title": "json.type Number added in go1.1", "url": "https://pkg.go.dev/encoding/json#type Number ¶\n \n \n added in\n go1.1", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-number-added-in-go1.1.json", "content": "# type json.type Number ¶ added in go1.1 ``` type Number string ``` A Number represents a JSON number literal.", "term_freq": { "//pkg": 1, "added": 3, "dev/encoding/json#type": 1, "go": 1, "go-type": 1, "go1": 3, "https": 1, "in": 3, "json": 3, "literal": 1, "number": 6, "represents": 1, "string": 1, "type": 4, "¶": 2 }, "length": 32 }, { "id": "f72d196bd192bb1cb89ea519", "doc_id": "e70d2d21ba01b8bdd5579a69", "title": "json.type RawMessage", "url": "https://pkg.go.dev/encoding/json#type RawMessage ¶", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-rawmessage.json", "content": "# type json.type RawMessage ¶ ``` type RawMessage []byte ``` RawMessage is a raw encoded JSON value. It implements Marshaler and Unmarshaler and can be used to delay JSON decoding or precompute a JSON encoding.", "term_freq": { "//pkg": 1, "and": 2, "be": 1, "byte": 1, "can": 1, "decoding": 1, "delay": 1, "dev/encoding/json#type": 1, "encoded": 1, "encoding": 1, "go": 1, "go-type": 1, "https": 1, "implements": 1, "is": 1, "it": 1, "json": 5, "marshaler": 1, "or": 1, "precompute": 1, "raw": 1, "rawmessage": 5, "to": 1, "type": 4, "unmarshaler": 1, "used": 1, "value": 1, "¶": 2 }, "length": 41 }, { "id": "d7c716d3ecd894a11d6c68fa", "doc_id": "ec9cc64342698cadcbe3afba", "title": "json.type SyntaxError", "url": "https://pkg.go.dev/encoding/json#type SyntaxError ¶", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-syntaxerror.json", "content": "# type json.type SyntaxError ¶ ``` type SyntaxError struct { Offset int64 // error occurred after reading Offset bytes // contains filtered or unexported fields } ``` A SyntaxError is a description of a JSON syntax error. Unmarshal will return a SyntaxError if the JSON can't be parsed.", "term_freq": { "//": 2, "//pkg": 1, "after": 1, "be": 1, "bytes": 1, "can": 1, "contains": 1, "description": 1, "dev/encoding/json#type": 1, "error": 2, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "https": 1, "if": 1, "int64": 1, "is": 1, "json": 4, "occurred": 1, "of": 1, "offset": 2, "or": 1, "parsed": 1, "reading": 1, "return": 1, "struct": 1, "syntax": 1, "syntaxerror": 6, "the": 1, "type": 4, "unexported": 1, "unmarshal": 1, "will": 1, "¶": 2 }, "length": 50 }, { "id": "8c9711b3acf5a6e612db67dd", "doc_id": "b934ee58ea65141cec9b1f10", "title": "json.type Token added in go1.5", "url": "https://pkg.go.dev/encoding/json#type Token ¶\n \n \n added in\n go1.5", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-token-added-in-go1.5.json", "content": "# type json.type Token ¶ added in go1.5 ``` type Token any ``` A Token holds a value of one of these types:", "term_freq": { "//pkg": 1, "added": 3, "any": 1, "dev/encoding/json#type": 1, "go": 1, "go-type": 1, "go1": 3, "holds": 1, "https": 1, "in": 3, "json": 2, "of": 2, "one": 1, "these": 1, "token": 5, "type": 4, "types": 1, "value": 1, "¶": 2 }, "length": 35 }, { "id": "8bf642bbfb62b0301c263b0e", "doc_id": "56ce65a2791a2ad3c8820362", "title": "json.type Unmarshaler", "url": "https://pkg.go.dev/encoding/json#type Unmarshaler ¶", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-unmarshaler.json", "content": "# type json.type Unmarshaler ¶ ``` type Unmarshaler interface { UnmarshalJSON([]byte) error } ``` Unmarshaler is the interface implemented by types that can unmarshal a JSON description of themselves. The input can be assumed to be a valid encoding of a JSON value. UnmarshalJSON must copy the JSON data if it wishes to retain the data after returning.", "term_freq": { "//pkg": 1, "after": 1, "assumed": 1, "be": 2, "by": 1, "byte": 1, "can": 2, "copy": 1, "data": 2, "description": 1, "dev/encoding/json#type": 1, "encoding": 1, "error": 1, "go": 1, "go-type": 1, "https": 1, "if": 1, "implemented": 1, "input": 1, "interface": 2, "is": 1, "it": 1, "json": 5, "must": 1, "of": 2, "retain": 1, "returning": 1, "that": 1, "the": 4, "themselves": 1, "to": 2, "type": 4, "types": 1, "unmarshal": 1, "unmarshaler": 5, "unmarshaljson": 2, "valid": 1, "value": 1, "wishes": 1, "¶": 2 }, "length": 62 }, { "id": "b70bef0e7726954ebfed2d31", "doc_id": "004bb3c84f6be9f1bb13a64b", "title": "json.type UnmarshalFieldError", "url": "https://pkg.go.dev/encoding/json#type UnmarshalFieldError\n deprecated", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-unmarshalfielderror.json", "content": "# type json.type UnmarshalFieldError deprecated ``` type UnmarshalFieldError struct { Key string Type reflect.Type Field reflect.StructField } ``` An UnmarshalFieldError describes a JSON object key that led to an unexported (and therefore unwritable) struct field.", "term_freq": { "//pkg": 1, "an": 2, "and": 1, "deprecated": 2, "describes": 1, "dev/encoding/json#type": 1, "field": 2, "go": 1, "go-type": 1, "https": 1, "json": 3, "key": 2, "led": 1, "object": 1, "reflect": 2, "string": 1, "struct": 2, "structfield": 1, "that": 1, "therefore": 1, "to": 1, "type": 6, "unexported": 1, "unmarshalfielderror": 5, "unwritable": 1 }, "length": 42 }, { "id": "5eaf1b8d62abb6d833ee557f", "doc_id": "f53562f83c3ee3d0099aa41e", "title": "json.type UnmarshalTypeError", "url": "https://pkg.go.dev/encoding/json#type UnmarshalTypeError ¶", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-unmarshaltypeerror.json", "content": "# type json.type UnmarshalTypeError ¶ ``` type UnmarshalTypeError struct { Value string // description of JSON value - \"bool\", \"array\", \"number -5\" Type reflect.Type // type of Go value it could not be assigned to Offset int64 // error occurred after reading Offset bytes Struct string // name of the struct type containing the field Field string // the full path from root node to the field, include embedded struct } ``` An UnmarshalTypeError describes a JSON value that was not appropriate for a value of a specific Go type.", "term_freq": { "-5": 1, "//": 5, "//pkg": 1, "after": 1, "an": 1, "appropriate": 1, "array": 1, "assigned": 1, "be": 1, "bool": 1, "bytes": 1, "containing": 1, "could": 1, "describes": 1, "description": 1, "dev/encoding/json#type": 1, "embedded": 1, "error": 1, "field": 3, "for": 1, "from": 1, "full": 1, "go": 3, "go-type": 1, "https": 1, "include": 1, "int64": 1, "it": 1, "json": 4, "name": 1, "node": 1, "not": 2, "number": 1, "occurred": 1, "of": 4, "offset": 2, "path": 1, "reading": 1, "reflect": 1, "root": 1, "specific": 1, "string": 3, "struct": 4, "that": 1, "the": 4, "to": 2, "type": 9, "unmarshaltypeerror": 5, "value": 5, "was": 1, "¶": 2 }, "length": 93 }, { "id": "7c3885f283909eb6a6aad7d3", "doc_id": "ee75cf685c08c430dd2d6a88", "title": "json.type UnsupportedTypeError", "url": "https://pkg.go.dev/encoding/json#type UnsupportedTypeError ¶", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-unsupportedtypeerror.json", "content": "# type json.type UnsupportedTypeError ¶ ``` type UnsupportedTypeError struct { Type reflect.Type } ``` An UnsupportedTypeError is returned by Marshal when attempting to encode an unsupported value type.", "term_freq": { "//pkg": 1, "an": 2, "attempting": 1, "by": 1, "dev/encoding/json#type": 1, "encode": 1, "go": 1, "go-type": 1, "https": 1, "is": 1, "json": 2, "marshal": 1, "reflect": 1, "returned": 1, "struct": 1, "to": 1, "type": 7, "unsupported": 1, "unsupportedtypeerror": 5, "value": 1, "when": 1, "¶": 2 }, "length": 35 }, { "id": "ad9950ecc0689a56026449c7", "doc_id": "d84c5e213f65232c990e3194", "title": "json.type UnsupportedValueError", "url": "https://pkg.go.dev/encoding/json#type UnsupportedValueError ¶", "type": "go-type", "source": "go:encoding/json", "path": "devour_data/docs/json.type-unsupportedvalueerror.json", "content": "# type json.type UnsupportedValueError ¶ ``` type UnsupportedValueError struct { Value reflect.Value Str string } ``` An UnsupportedValueError is returned by Marshal when attempting to encode an unsupported value.", "term_freq": { "//pkg": 1, "an": 2, "attempting": 1, "by": 1, "dev/encoding/json#type": 1, "encode": 1, "go": 1, "go-type": 1, "https": 1, "is": 1, "json": 2, "marshal": 1, "reflect": 1, "returned": 1, "str": 1, "string": 1, "struct": 1, "to": 1, "type": 4, "unsupported": 1, "unsupportedvalueerror": 5, "value": 3, "when": 1, "¶": 2 }, "length": 36 }, { "id": "e50056f5358e8f9bf7be3aac", "doc_id": "24821feb5cf3c7630bff6f1b", "title": "layouts", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/layouts.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/layouts.json", "content": "--- title: Layouts use_cases: \u003e- consistent headers/footers, shared navigation, admin panels, dashboard layouts, nested ui structure tags: - layouts - nesting - ui-structure - components - routing version: '1.0' description: \u003e- Create consistent page layouts in SolidJS with shared headers, footers, and nested structures for better UI organization. --- To maintain consistency across an application's page you can use layouts. Layouts are components that wrap the content of a route and can be used to define a common structure for all pages or specific sections of an application. ## Root-level layouts A root-level layout acts as a container surrounding all routes within your application. To define a root-level layout, pass the layout component to the `root` prop of the `Router` component: ```jsx import { render } from \"solid-js/web\"; import { Router, Route } from \"@solidjs/router\"; import Home from \"./pages/Home\"; const Layout = (props) =\u003e { return ( \u003c\u003e \u003cheader\u003eHeader\u003c/header\u003e {props.children} \u003cfooter\u003eFooter\u003c/footer\u003e \u003c/\u003e ); }; render( () =\u003e ( \u003cRouter root={Layout}\u003e \u003cRoute path=\"/\" component={Home} /\u003e \u003cRoute path=\"/hello-world\" component={() =\u003e \u003cdiv\u003eHello world!\u003c/div\u003e} /\u003e \u003c/Router\u003e ), document.getElementById(\"app\") ); ``` With the root-level layout, `props.children` will be replaced with the content of the current route. This means that while the words \"Header\" and \"Footer\" will be displayed on every page, the content between them will change depending on the current route. For example, when the route is `/hello-world`, you will see the text \"Hello world!\" between the header and footer. ## Nested layouts When you want to create a layout that is specific to a group of routes, you can nest routes within a layout component. This can be done by passing `props.children` to the component where the nested routes are defined: ```jsx function PageWrapper(props) { return ( \u003cdiv\u003e \u003ch1\u003e We love our users! \u003c/h1\u003e {props.children} \u003cA href=\"/\"\u003eBack Home\u003c/A\u003e \u003c/div\u003e ); } ``` While the routes are still configured the same, the route's elements will appear inside the parent element where the `props.children` was declared. For `PageWrapper` to be used as a layout, in this case, you can pass it as a component to the parent route: ```jsx \u003cRouter\u003e \u003cRoute path=\"/users\" component={PageWrapper}\u003e \u003cRoute path=\"/\" component={Users} /\u003e \u003cRoute path=\"/:id\" component={User} /\u003e \u003c/Route\u003e \u003c/Router\u003e ``` Now, when the route is `/users`, the content of the `Users` component will be displayed inside the `PageWrapper` component. Similarly, when navigating to `/users/1`, the content of the `User` component will be displayed inside the `PageWrapper` component as well.", "term_freq": { "##": 2, "---": 2, "//github": 1, "/\u003e": 4, "/hello-world": 2, "/pages/home": 1, "/users": 2, "/users/1": 1, "\u003c/\u003e": 1, "\u003c/div\u003e": 2, "\u003c/h1\u003e": 1, "\u003c/route\u003e": 1, "\u003c/router\u003e": 2, "\u003c\u003e": 1, "\u003ca": 1, "\u003cdiv\u003e": 1, "\u003cdiv\u003ehello": 1, "\u003cfooter\u003efooter\u003c/footer\u003e": 1, "\u003ch1\u003e": 1, "\u003cheader\u003eheader\u003c/header\u003e": 1, "\u003croute": 5, "\u003crouter": 1, "\u003crouter\u003e": 1, "=\u003e": 3, "\u003e-": 2, "\u003eback": 1, "@solidjs/router": 1, "across": 1, "acts": 1, "admin": 1, "all": 2, "an": 2, "and": 4, "app": 1, "appear": 1, "application": 3, "are": 3, "as": 4, "be": 7, "better": 1, "between": 2, "by": 1, "can": 5, "case": 1, "change": 1, "children": 5, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/concepts/layouts": 1, "common": 1, "component": 9, "component=": 5, "components": 2, "configured": 1, "consistency": 1, "consistent": 2, "const": 1, "container": 1, "content": 5, "create": 2, "current": 2, "dashboard": 1, "declared": 1, "define": 2, "defined": 1, "depending": 1, "description": 1, "displayed": 3, "document": 1, "done": 1, "element": 1, "elements": 1, "every": 1, "example": 1, "footer": 2, "footers": 1, "for": 4, "from": 3, "function": 1, "getelementbyid": 1, "github-document": 1, "group": 1, "header": 2, "headers": 1, "headers/footers": 1, "hello": 1, "home": 2, "home\u003c/a\u003e": 1, "href=": 1, "https": 1, "id": 1, "import": 3, "in": 2, "inside": 3, "is": 3, "it": 1, "jsx": 3, "layout": 9, "layouts": 9, "love": 1, "maintain": 1, "mdx": 1, "means": 1, "navigating": 1, "navigation": 1, "nest": 1, "nested": 4, "nesting": 1, "now": 1, "of": 7, "on": 2, "or": 1, "organization": 1, "our": 1, "page": 3, "pages": 1, "pagewrapper": 5, "panels": 1, "parent": 2, "pass": 2, "passing": 1, "path=": 5, "prop": 1, "props": 7, "render": 2, "replaced": 1, "return": 2, "root": 1, "root-level": 4, "root=": 1, "route": 8, "router": 2, "routes": 5, "routing": 1, "same": 1, "sections": 1, "see": 1, "shared": 2, "similarly": 1, "solid-js/web": 1, "solidjs": 1, "specific": 2, "still": 1, "structure": 2, "structures": 1, "surrounding": 1, "tags": 1, "text": 1, "that": 3, "the": 28, "them": 1, "this": 3, "title": 1, "to": 10, "ui": 2, "ui-structure": 1, "use": 1, "use_cases": 1, "used": 2, "user": 2, "users": 3, "version": 1, "want": 1, "was": 1, "we": 1, "well": 1, "when": 4, "where": 2, "while": 2, "will": 7, "with": 3, "within": 2, "words": 1, "world": 2, "wrap": 1, "you": 5, "your": 1 }, "length": 386 }, { "id": "c89b4653fbe32d2d4bd9dd25", "doc_id": "71cd3eaa25bd0d34d2d3af15", "title": "lazy-loading", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/advanced-concepts/lazy-loading.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/lazy-loading.json", "content": "--- title: Lazy loading use_cases: \u003e- optimizing bundle size, code splitting, reducing initial load, large apps, performance optimization tags: - lazy - performance - routing - optimization - splitting - loading version: '1.0' description: \u003e- Implement lazy loading in Solid Router to reduce initial bundle size. Load components on-demand for better performance in large applications. --- Lazy loading allows you to load only the necessary resources when they are needed. This can be useful when you have a large application with a lot of routes and components, and you want to reduce the initial load time. In Solid Router, you can lazy load components using the `lazy` function from Solid: ```jsx import { lazy } from \"solid-js\"; import { Router, Route } from \"@solidjs/router\"; const Home = lazy(() =\u003e import(\"./Home\")); const Users = lazy(() =\u003e import(\"./Users\")); const App = () =\u003e ( \u003cRouter\u003e \u003cRoute path=\"/\" component={Home} /\u003e \u003cRoute path=\"/users\" component={Users} /\u003e \u003c/Router\u003e ); ``` In the example above, the `Users` component is lazy loaded using the `lazy` function. The `lazy` function takes a function that returns a promise, which resolves to the component you want to load. When the route is matched, the component will be loaded and rendered.", "term_freq": { "---": 2, "//github": 1, "/\u003e": 2, "/home": 1, "/users": 2, "\u003c/router\u003e": 1, "\u003croute": 2, "\u003crouter\u003e": 1, "=\u003e": 3, "\u003e-": 2, "@solidjs/router": 1, "above": 1, "allows": 1, "and": 3, "app": 1, "application": 1, "applications": 1, "apps": 1, "are": 1, "be": 2, "better": 1, "bundle": 2, "can": 2, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/advanced-concepts/lazy-loading": 1, "component": 3, "component=": 2, "components": 3, "const": 3, "description": 1, "example": 1, "for": 1, "from": 3, "function": 4, "github-document": 1, "have": 1, "home": 2, "https": 1, "implement": 1, "import": 4, "in": 4, "initial": 3, "is": 2, "jsx": 1, "large": 3, "lazy": 12, "lazy-loading": 1, "load": 6, "loaded": 2, "loading": 4, "lot": 1, "matched": 1, "mdx": 1, "necessary": 1, "needed": 1, "of": 1, "on-demand": 1, "only": 1, "optimization": 2, "optimizing": 1, "path=": 2, "performance": 3, "promise": 1, "reduce": 2, "reducing": 1, "rendered": 1, "resolves": 1, "resources": 1, "returns": 1, "route": 2, "router": 3, "routes": 1, "routing": 1, "size": 2, "solid": 3, "solid-js": 1, "splitting": 2, "tags": 1, "takes": 1, "that": 1, "the": 10, "they": 1, "this": 1, "time": 1, "title": 1, "to": 5, "use_cases": 1, "useful": 1, "users": 3, "using": 2, "version": 1, "want": 2, "when": 3, "which": 1, "will": 1, "with": 1, "you": 5 }, "length": 188 }, { "id": "c517b1520b5ee5d23d23cf5c", "doc_id": "e1fbce3996389b2c4666191c", "title": "lazy", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/component-apis/lazy.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/lazy.json", "content": "--- title: lazy use_cases: \u003e- code splitting, performance optimization, reducing bundle size, dynamic imports, route-based splitting, lazy loading tags: - lazy-loading - code-splitting - performance - suspense - optimization - imports version: '1.0' description: \u003e- Lazy load components with code splitting to reduce bundle size and improve performance. Components load on-demand and integrate with Suspense. --- The `lazy` helper wraps a dynamic import and returns a component that loads on demand. Lazy components accept the same props as their eager counterparts and integrate with `\u003cSuspense\u003e` boundaries. ## Import ```tsx import { lazy } from \"solid-js\" ``` ## Type ```tsx function lazy\u003cT extends Component\u003cany\u003e\u003e( fn: () =\u003e Promise\u003c{ default: T }\u003e ): T \u0026 { preload: () =\u003e Promise\u003cT\u003e } ``` ## Parameters ### `fn` - **Type:** `() =\u003e Promise\u003c{ default: T }\u003e` - **Required:** Yes Dynamic import that resolves to the component module, exposing the component as the `default` export. ## Return value `lazy` returns a renderable component compatible with `T`. The component exposes a `preload()` method that resolves the underlying module. | Property | Type | Description | | -------- | ---- | ----------- | | `preload` | `() =\u003e Promise\u003cT\u003e` | Loads the module without rendering and returns the resolved component. | ## Examples ### Basic usage ```tsx title=\"app.tsx\" import { lazy } from \"solid-js\" const ComponentA = lazy(() =\u003e import(\"./ComponentA\")) function App(props: { title: string }) { return \u003cComponentA title={props.title} /\u003e } ``` ### Preloading nested lazy components ```tsx import { lazy } from \"solid-js\" import type { Component } from \"solid-js\" const Nested = lazy(() =\u003e import(\"./Nested\")) const ComponentWithPreload = () =\u003e { const [showNested, setShowNested] = createSignal(false) return ( \u003cdiv\u003e \u003cbutton onMouseEnter={() =\u003e Nested.preload()} onClick={() =\u003e setShowNested(true)} \u003ePreload Nested Component\u003c/button\u003e \u003cShow when={showNested()}\u003e \u003cNested /\u003e \u003c/Show\u003e \u003c/div\u003e ) } ``` ## See also - [`Suspense`](https://docs.solidjs.com/reference/components/suspense) - [Router preloading guide](/solid-router/advanced-concepts/preloading)", "term_freq": { "##": 6, "###": 3, "**": 2, "**required": 1, "**type": 1, "---": 2, "----": 1, "--------": 1, "-----------": 1, "//docs": 1, "//github": 1, "/\u003e": 2, "/componenta": 1, "/nested": 1, "/solid-router/advanced-concepts/preloading": 1, "\u003c/div\u003e": 1, "\u003c/show\u003e": 1, "\u003cbutton": 1, "\u003ccomponenta": 1, "\u003cdiv\u003e": 1, "\u003cnested": 1, "\u003cshow": 1, "\u003csuspense\u003e": 1, "=\u003e": 9, "\u003e-": 2, "\u003epreload": 1, "accept": 1, "also": 1, "and": 5, "app": 2, "as": 2, "basic": 1, "boundaries": 1, "bundle": 2, "code": 2, "code-splitting": 1, "com/reference/components/suspense": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/component-apis/lazy": 1, "compatible": 1, "component": 7, "component\u003c/button\u003e": 1, "component\u003cany\u003e\u003e": 1, "componenta": 1, "components": 4, "componentwithpreload": 1, "const": 4, "counterparts": 1, "createsignal": 1, "default": 3, "demand": 1, "description": 2, "dynamic": 3, "eager": 1, "examples": 1, "export": 1, "exposes": 1, "exposing": 1, "extends": 1, "false": 1, "fn": 2, "from": 4, "function": 2, "github-document": 1, "guide": 1, "helper": 1, "https": 2, "import": 9, "imports": 2, "improve": 1, "integrate": 2, "lazy": 13, "lazy-loading": 1, "lazy\u003ct": 1, "load": 2, "loading": 1, "loads": 2, "mdx": 1, "method": 1, "module": 3, "nested": 4, "on": 1, "on-demand": 1, "onclick=": 1, "onmouseenter=": 1, "optimization": 2, "parameters": 1, "performance": 3, "preload": 4, "preloading": 2, "promise\u003c": 2, "promise\u003ct\u003e": 2, "property": 1, "props": 3, "reduce": 1, "reducing": 1, "renderable": 1, "rendering": 1, "resolved": 1, "resolves": 2, "return": 3, "returns": 3, "route-based": 1, "router": 1, "same": 1, "see": 1, "setshownested": 2, "shownested": 2, "size": 2, "solid-js": 4, "solidjs": 1, "splitting": 3, "string": 1, "suspense": 3, "tags": 1, "that": 3, "the": 9, "their": 1, "title": 3, "title=": 2, "to": 2, "true": 1, "tsx": 5, "type": 3, "underlying": 1, "usage": 1, "use_cases": 1, "value": 1, "version": 1, "when=": 1, "with": 4, "without": 1, "wraps": 1, "yes": 1 }, "length": 261 }, { "id": "e979c7a9c4fbb0c056c42fd2", "doc_id": "5de5a9f8daa1fbadc9a15fa1", "title": "less", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/less.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/less.json", "content": "--- title: LESS order: 2 mainNavExclude: true use_cases: \u003e- css preprocessing, style variables, mixins, nested styles, programmatic styling tags: - styling - less - preprocessor - variables - mixins - css version: '1.0' description: \u003e- Integrate LESS preprocessor in Solid apps for variables, mixins, and programmatic CSS features to write cleaner stylesheets. --- [LESS](https://lesscss.org/) is a preprocessor based on JavaScript. It provides the ability to use mixins, variables, and other programmatic tools, making styling code cleaner and less redundant. ## Installation To utilize LESS in a Solid app, it will need to be installed as a development dependency: ```package-install-dev less ``` ## Using LESS in your app Start by creating a `.less` file in the `src` directory: ```less //styles.less .foo { color: red; } .bar { background-color: blue; } ``` The basic syntax of LESS is very similar to CSS. However, LESS allows the declaration and usage of variables: ```less //styles.less @plainred: red; @plainblue: blue; .foo { color: @plainred; } .bar { background-color: @plainblue; } ``` To use these styles in a Solid component, import the `.less` file: ```jsx //component.jsx import \"./styles.less\"; function Component() { return ( \u003c\u003e \u003cdiv class=\"foo bar\"\u003eHello, world!\u003c/div\u003e \u003c/\u003e ); } ``` By changing the file extension of the imported styles to `.less`, Vite will recognize it as a LESS file and compile it to CSS on demand.", "term_freq": { "##": 2, "---": 2, "//component": 1, "//github": 1, "//lesscss": 1, "//styles": 2, "/styles": 1, "\u003c/\u003e": 1, "\u003c/div\u003e": 1, "\u003c\u003e": 1, "\u003cdiv": 1, "\u003e-": 2, "\u003ehello": 1, "@plainblue": 2, "@plainred": 2, "ability": 1, "allows": 1, "and": 5, "app": 2, "apps": 1, "as": 2, "background-color": 2, "bar": 3, "based": 1, "basic": 1, "be": 1, "blue": 2, "by": 2, "changing": 1, "class=": 1, "cleaner": 2, "code": 1, "color": 2, "com/solidjs/solid-docs/blob/head/src/routes/guides/styling-components/less": 1, "compile": 1, "component": 2, "creating": 1, "css": 5, "declaration": 1, "demand": 1, "dependency": 1, "description": 1, "development": 1, "directory": 1, "extension": 1, "features": 1, "file": 4, "foo": 3, "for": 1, "function": 1, "github-document": 1, "however": 1, "https": 2, "import": 2, "imported": 1, "in": 5, "installation": 1, "installed": 1, "integrate": 1, "is": 2, "it": 4, "javascript": 1, "jsx": 2, "less": 20, "mainnavexclude": 1, "making": 1, "mdx": 1, "mixins": 4, "need": 1, "nested": 1, "of": 3, "on": 2, "order": 1, "org/": 1, "other": 1, "package-install-dev": 1, "preprocessing": 1, "preprocessor": 3, "programmatic": 3, "provides": 1, "recognize": 1, "red": 2, "redundant": 1, "return": 1, "similar": 1, "solid": 3, "src": 1, "start": 1, "style": 1, "styles": 3, "stylesheets": 1, "styling": 3, "syntax": 1, "tags": 1, "the": 7, "these": 1, "title": 1, "to": 8, "tools": 1, "true": 1, "usage": 1, "use": 2, "use_cases": 1, "using": 1, "utilize": 1, "variables": 5, "version": 1, "very": 1, "vite": 1, "will": 2, "world": 1, "write": 1, "your": 1 }, "length": 208 }, { "id": "023a8f6dcbb2b4bbba2763dc", "doc_id": "7676a1984eac44b31157b259", "title": "link", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/reference/meta/link.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/link.json", "content": "--- title: Link order: 2 use_cases: 'adding favicon, stylesheets, external resources, preloading assets, web fonts' tags: - link - favicon - stylesheet - assets - head - resources version: '1.0' description: \u003e- Add external resources like stylesheets and favicons to your Solid app. Learn to use the Link component for optimal resource loading and icons. --- The Link component establishes a connection between the page and an external resource. Commonly, this is used for linking stylesheets and other associations. This component renders a [`link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) element within the document's `\u003chead\u003e`. ```tsx twoslash import { Link } from \"@solidjs/meta\"; \u003cLink rel=\"icon\" href=\"/favicon.ico\" /\u003e; ``` ## Usage ### Adding a favicon To add a favicon in an app, `\u003cLink\u003e` can be used to point to the asset: ```tsx twoslash import { MetaProvider, Link } from \"@solidjs/meta\"; export default function Root() { return ( \u003cMetaProvider\u003e \u003cLink rel=\"icon\" href=\"/favicon.ico\" /\u003e \u003c/MetaProvider\u003e ); } ``` ### Using an emoji as a favicon To use an emoji as a favicon, first create a function that returns a data URI containing an SVG image: ```jsx const emojiSvg = (emoji) =\u003e { return ( `data:image/svg+xml;utf8,` + `\u003csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22\u003e\u003ctext y=%22.9em%22 font-size=%2290%22\u003e${emoji}\u003c/text\u003e\u003c/svg\u003e` ); }; ``` Following this, include the emoji as an argument within that function in the `href` property of the Link component: ```jsx import { MetaProvider, Link } from \"@solidjs/meta\"; export default function Root() { return ( \u003cMetaProvider\u003e \u003cLink rel=\"icon\" href={emojiSvg(\"😎\")} /\u003e \u003c/MetaProvider\u003e ); } ```", "term_freq": { "##": 1, "###": 2, "---": 2, "//developer": 1, "//github": 1, "//www": 1, "/\u003e": 3, "/favicon": 2, "100": 1, "100%22\u003e\u003ctext": 1, "9em%22": 1, "\u003c/metaprovider\u003e": 2, "\u003c/text\u003e\u003c/svg\u003e": 1, "\u003chead\u003e": 1, "\u003clink": 3, "\u003clink\u003e": 1, "\u003cmetaprovider\u003e": 2, "\u003csvg": 1, "=\u003e": 1, "\u003e-": 1, "@solidjs/meta": 3, "add": 2, "adding": 2, "an": 6, "and": 4, "app": 2, "argument": 1, "as": 3, "asset": 1, "assets": 2, "associations": 1, "be": 1, "between": 1, "can": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-meta/reference/meta/link": 1, "commonly": 1, "component": 4, "connection": 1, "const": 1, "containing": 1, "create": 1, "data": 2, "default": 2, "description": 1, "document": 1, "element": 1, "emoji": 5, "emojisvg": 2, "establishes": 1, "export": 2, "external": 3, "favicon": 6, "favicons": 1, "first": 1, "following": 1, "font-size=%2290%22\u003e$": 1, "fonts": 1, "for": 2, "from": 3, "function": 4, "github-document": 1, "head": 1, "href": 1, "href=": 3, "https": 2, "ico": 2, "icon": 3, "icons": 1, "image": 1, "image/svg+xml": 1, "import": 3, "in": 2, "include": 1, "is": 1, "jsx": 2, "learn": 1, "like": 1, "link": 10, "linking": 1, "loading": 1, "mdx": 1, "metaprovider": 2, "mozilla": 1, "of": 1, "optimal": 1, "order": 1, "org/2000/svg%22": 1, "org/en-us/docs/web/html/element/link": 1, "other": 1, "page": 1, "point": 1, "preloading": 1, "property": 1, "rel=": 3, "renders": 1, "resource": 2, "resources": 3, "return": 3, "returns": 1, "root": 2, "solid": 1, "stylesheet": 1, "stylesheets": 3, "svg": 1, "tags": 1, "that": 2, "the": 8, "this": 3, "title": 1, "to": 6, "tsx": 2, "twoslash": 2, "uri": 1, "usage": 1, "use": 2, "use_cases": 1, "used": 2, "using": 1, "utf8": 1, "version": 1, "viewbox=%220": 1, "w3": 1, "web": 1, "within": 2, "xmlns=%22http": 1, "y=%22": 1, "your": 1, "😎": 1 }, "length": 227 }, { "id": "a7dcc068fd33c09b11d83e46", "doc_id": "70a8f1bf2a0d7ee6b8a96a18", "title": "linking-routes", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/getting-started/linking-routes.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/linking-routes.json", "content": "--- title: Linking routes use_cases: \u003e- navigation between pages, creating menu bars, active link styling, internal linking, user navigation tags: - navigation - links - anchors - active-states - menu - ui version: '1.0' description: \u003e- Create navigation links between routes using anchor tags and the A component with active state styling and automatic base path handling. --- Once routes have been created within an application, using anchor tags will help users navigate between different views or pages. ```jsx {4-5} const App = (props) =\u003e ( \u003c\u003e \u003cnav\u003e \u003ca href=\"/users\"\u003eUsers\u003c/a\u003e \u003ca href=\"/\"\u003eHome\u003c/a\u003e \u003c/nav\u003e \u003ch1\u003eMy Site with lots of pages\u003c/h1\u003e {props.children} \u003c/\u003e ); render( () =\u003e ( \u003cRouter root={App}\u003e \u003cRoute path=\"/users\" component={Users} /\u003e \u003cRoute path=\"/\" component={Home} /\u003e \u003c/Router\u003e ), document.getElementById(\"app\") ); ``` ## `\u003cA\u003e` component Solid Router also offers an [`\u003cA\u003e`](/solid-router/reference/components/a) component. The `\u003cA\u003e` component is similar to the HTML anchor tag but supports automatically applying the base URL path and relative paths. ```jsx import { lazy } from \"solid-js\"; import { render } from \"solid-js/web\"; import { Router, Route, A } from \"@solidjs/router\"; const Users = lazy(() =\u003e import(\"./pages/Users\")); const Home = lazy(() =\u003e import(\"./pages/Home\")); const App = (props) =\u003e ( \u003c\u003e \u003cnav\u003e \u003cA href=\"/users\"\u003eUsers\u003c/A\u003e \u003cA href=\"/\"\u003eHome\u003c/A\u003e \u003c/nav\u003e \u003ch1\u003eMy Site with lots of pages\u003c/h1\u003e {props.children} \u003c/\u003e ); render( () =\u003e ( \u003cRouter root={App}\u003e \u003cRoute path=\"/users\" component={Users} /\u003e \u003cRoute path=\"/\" component={Home} /\u003e \u003c/Router\u003e ), document.getElementById(\"app\") ); ``` In addition, the `\u003cA\u003e` component has an `active` class if its `href` matches the current location, and `inactive` otherwise. This provides the link with a CSS class to show when the link is active or inactive. ```jsx \u003cA href=\"/users\" activeClass=\"underlined\" inactiveClass=\"default\"\u003e Users \u003c/A\u003e ``` By default, matching using the `\u003cA\u003e` component includes locations that are _descendants_ (eg. `/users` and `/users/123`). This component offers the `end` prop, which takes in a boolean to prevent matching these. This can be useful when links to the root route (`/`) would match everything.", "term_freq": { "##": 1, "---": 2, "//github": 1, "/\u003e": 4, "/pages/home": 1, "/pages/users": 1, "/solid-router/reference/components/a": 1, "/users": 6, "/users/123": 1, "4-5": 1, "\u003c/\u003e": 2, "\u003c/a\u003e": 1, "\u003c/nav\u003e": 2, "\u003c/router\u003e": 2, "\u003c\u003e": 2, "\u003ca": 5, "\u003ca\u003e": 5, "\u003ch1\u003emy": 2, "\u003cnav\u003e": 2, "\u003croute": 4, "\u003crouter": 2, "=\u003e": 6, "\u003e-": 2, "\u003ehome\u003c/a\u003e": 2, "\u003eusers\u003c/a\u003e": 2, "@solidjs/router": 1, "_descendants_": 1, "active": 4, "active-states": 1, "activeclass=": 1, "addition": 1, "also": 1, "an": 3, "anchor": 3, "anchors": 1, "and": 5, "app": 6, "application": 1, "applying": 1, "are": 1, "automatic": 1, "automatically": 1, "bars": 1, "base": 2, "be": 1, "been": 1, "between": 3, "boolean": 1, "but": 1, "by": 1, "can": 1, "children": 2, "class": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/getting-started/linking-routes": 1, "component": 7, "component=": 4, "const": 4, "create": 1, "created": 1, "creating": 1, "css": 1, "current": 1, "default": 2, "description": 1, "different": 1, "document": 2, "eg": 1, "end": 1, "everything": 1, "from": 3, "getelementbyid": 2, "github-document": 1, "handling": 1, "has": 1, "have": 1, "help": 1, "home": 3, "href": 1, "href=": 5, "html": 1, "https": 1, "if": 1, "import": 5, "in": 2, "inactive": 2, "inactiveclass=": 1, "includes": 1, "internal": 1, "is": 2, "its": 1, "jsx": 3, "lazy": 3, "link": 3, "linking": 2, "linking-routes": 1, "links": 3, "location": 1, "locations": 1, "lots": 2, "match": 1, "matches": 1, "matching": 2, "mdx": 1, "menu": 2, "navigate": 1, "navigation": 4, "of": 2, "offers": 2, "once": 1, "or": 2, "otherwise": 1, "pages": 2, "pages\u003c/h1\u003e": 2, "path": 2, "path=": 4, "paths": 1, "prevent": 1, "prop": 1, "props": 4, "provides": 1, "relative": 1, "render": 3, "root": 1, "root=": 2, "route": 2, "router": 2, "routes": 3, "show": 1, "similar": 1, "site": 2, "solid": 1, "solid-js": 1, "solid-js/web": 1, "state": 1, "styling": 2, "supports": 1, "tag": 1, "tags": 3, "takes": 1, "that": 1, "the": 11, "these": 1, "this": 3, "title": 1, "to": 4, "ui": 1, "underlined": 1, "url": 1, "use_cases": 1, "useful": 1, "user": 1, "users": 5, "using": 3, "version": 1, "views": 1, "when": 2, "which": 1, "will": 1, "with": 4, "within": 1, "would": 1 }, "length": 310 }, { "id": "e6e9b5fbfff86004be435e52", "doc_id": "df076802c4af9900216762b5", "title": "list-rendering", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/control-flow/list-rendering.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/list-rendering.json", "content": "--- title: List rendering order: 3 use_cases: \u003e- rendering arrays, dynamic lists, data iteration, tables, repeating elements, collection display, performance optimization tags: - lists - arrays - for - index - iteration - rendering - performance version: '1.0' description: \u003e- Efficiently render dynamic lists in Solid using For and Index components. Optimize performance for different data scenarios. --- List rendering allows you to generate multiple elements from a collection of data, such as an array or object, where each element corresponds to an item in the collection. When dealing with dynamic data, Solid offers two ways to render lists: the `\u003cFor\u003e` and `\u003cIndex\u003e` components. Both of these components help you loop over data collections to generate elements, however, they both cater to different scenarios. ## `\u003cFor\u003e` `\u003cFor\u003e` is a looping component that allows you to render elements based on the contents of an array or object. This component is designed to be used with **complex data structures**, such as arrays of objects, where the order and length of the list may change frequently. The sole property in `\u003cFor\u003e` is `each` , through which you can specify the data collection to loop over. This property expects an array, however, it can also accept objects that have been converted to arrays using utilities such as [`Object.entries`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries) or [`Object.values`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values). ```jsx import { For } from \"solid-js\" \u003cFor each={data()}\u003e {(item, index) =\u003e // rendering logic for each element } \u003c/For\u003e ``` Between the `\u003cFor\u003e` tags, the component requires a [callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) which will dictate how each item in the data collection should be rendered. This structure resembles the callback used within JavaScript's [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) method, providing a familiar pattern to follow. The function receives two arguments: - `item`: represents the current item in the data collection that is being rendered over. - `index`: the current item's index within the collection. You can access the current `item` and `index` to dynamically set attributes or content of the JSX elements. Index is a [*signal*](/concepts/signals) and must be called as a function to retrieve its value. ```jsx \u003cFor each={data()}\u003e {(item, index) =\u003e ( \u003cli style={{ color: index() % 2 === 0 ? \"red\" : \"blue\" }} \u003e {item.name} \u003c/li\u003e )} \u003c/For\u003e ``` ## `Index` `\u003cIndex\u003e`, similar to `\u003cFor\u003e`, is a looping component that allows you to render elements based on the contents of an array or object. However, when the order and length of the list remain _stable_, but the content may change frequently, `\u003cIndex\u003e` is a better option because it results in fewer re-renders. ```jsx import { Index } from \"solid-js\" \u003cIndex each={data()}\u003e {(item, index) =\u003e ( // rendering logic for each element )} \u003c/Index\u003e ``` Similar to the `\u003cFor\u003e` component, `\u003cIndex\u003e` accepts a single property named `each`, which is where you pass the structure you wish to loop over. Where the `index` is a signal with `\u003cFor\u003e`, it remains fixed with `\u003cIndex\u003e`. This is because `\u003cIndex\u003e` is more concerned with the **index** of the elements in the array. Because of this, the `item` is a signal, allowing the _content_ at each index to change without a re-render while the index remains fixed. ```jsx import { Index } from \"solid-js\" \u003cIndex each={data()}\u003e {(item, index) =\u003e ( \u003cli\u003e {item().name} - {item().completed} \u003c/li\u003e )} \u003c/Index\u003e ``` ## `\u003cIndex\u003e` vs `\u003cFor\u003e` `\u003cFor\u003e` is designed to be used when the *order* and *length* of the list may change frequently. When the list value changes in `\u003cFor\u003e`, the entire list is re-rendered. However, if the array undergoes a change, such as an element shifting position, `\u003cFor\u003e` will manage this by simply **moving** the corresponding DOM node and **updating** the index. `\u003cIndex\u003e`, however, is designed to be used when the **order** and **length** of the list remain _stable_, but the content may change frequently. When the list value changes in `\u003cIndex\u003e`, only the content at the specified index is updated. ### When to use `\u003cFor\u003e` In cases where signals, nested loops, or dynamic lists are not required, `\u003cFor\u003e` is the best option. For example, when creating a list of static elements, such as a list of links, `\u003cFor\u003e` is the best option to use. This is because it will only modify the indexes of the elements in the list, rather than re-rendering the entire list. ```jsx import { createSignal, For } from \"solid-js\" function StringList() { const [items, setItems] = createSignal([\"Item 1\", \"Item 2\", \"Item 3\"]) return ( \u003cul\u003e \u003cinput type=\"text\" onInput={(e) =\u003e { // add the new item to the list }} /\u003e \u003cFor each={items()}\u003e {(item, index) =\u003e ( \u003cli\u003e {item} - {index()} \u003c/li\u003e )} \u003c/For\u003e \u003c/ul\u003e ) } ``` If you are working with signals, [JavaScript primitives like strings and numbers](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) or input fields, `\u003cIndex\u003e` is the better option to use. If you were using `\u003cFor\u003e`, the entire list would be re-rendered when a value changes, even if the length of the list remains unchanged. `\u003cIndex\u003e`, instead, will update the content at the specified index, while the rest of the list remains unchanged. ```jsx import { createSignal, Index } from \"solid-js\" function FormList() { const [inputs, setInputs] = createSignal(['input1','input2','input3']) return( \u003cform\u003e \u003cIndex each={inputs()}\u003e {(input, index) =\u003e ( \u003cinput type=\"text\" value={input()} onInput={(e) =\u003e { // update the input value }} /\u003e )} \u003c/Index\u003e \u003c/form\u003e ) } ```", "term_freq": { "##": 3, "###": 1, "**complex": 1, "**index**": 1, "**length**": 1, "**moving**": 1, "**order**": 1, "**updating**": 1, "*length*": 1, "*order*": 1, "*signal*": 1, "---": 2, "//": 4, "//developer": 5, "//github": 1, "/\u003e": 2, "/concepts/signals": 1, "\u003c/for\u003e": 3, "\u003c/form\u003e": 1, "\u003c/index\u003e": 3, "\u003c/li\u003e": 3, "\u003c/ul\u003e": 1, "\u003cfor": 3, "\u003cfor\u003e": 16, "\u003cform\u003e": 1, "\u003cindex": 3, "\u003cindex\u003e": 11, "\u003cinput": 2, "\u003cli": 1, "\u003cli\u003e": 2, "\u003cul\u003e": 1, "===": 1, "=\u003e": 8, "\u003e-": 2, "_content_": 1, "_stable_": 2, "accept": 1, "accepts": 1, "access": 1, "add": 1, "allowing": 1, "allows": 3, "also": 1, "an": 6, "and": 10, "are": 2, "arguments": 1, "array": 6, "arrays": 4, "as": 6, "at": 3, "attributes": 1, "based": 2, "be": 6, "because": 4, "been": 1, "being": 1, "best": 2, "better": 2, "between": 1, "blue": 1, "both": 2, "but": 2, "by": 1, "callback": 2, "called": 1, "can": 3, "cases": 1, "cater": 1, "change": 6, "changes": 3, "collection": 7, "collections": 1, "color": 1, "com/solidjs/solid-docs/blob/head/src/routes/concepts/control-flow/list-rendering": 1, "completed": 1, "component": 5, "components": 3, "concerned": 1, "const": 2, "content": 5, "contents": 2, "converted": 1, "corresponding": 1, "corresponds": 1, "createsignal": 4, "creating": 1, "current": 3, "data": 13, "dealing": 1, "description": 1, "designed": 3, "dictate": 1, "different": 2, "display": 1, "dom": 1, "dynamic": 4, "dynamically": 1, "each": 7, "each=": 6, "efficiently": 1, "element": 4, "elements": 9, "entire": 3, "entries": 1, "even": 1, "example": 1, "expects": 1, "familiar": 1, "fewer": 1, "fields": 1, "fixed": 2, "follow": 1, "for": 8, "formlist": 1, "frequently": 4, "from": 6, "function": 5, "generate": 2, "github-document": 1, "have": 1, "help": 1, "how": 1, "however": 5, "https": 6, "if": 4, "import": 5, "in": 11, "index": 24, "indexes": 1, "input": 4, "input1": 1, "input2": 1, "input3": 1, "inputs": 2, "instead": 1, "is": 20, "it": 4, "item": 20, "items": 2, "iteration": 2, "its": 1, "javascript": 2, "jsx": 7, "length": 3, "like": 1, "links": 1, "list": 17, "list-rendering": 1, "lists": 5, "logic": 2, "loop": 3, "looping": 2, "loops": 1, "manage": 1, "map": 1, "may": 4, "mdx": 1, "method": 1, "modify": 1, "more": 1, "mozilla": 5, "multiple": 1, "must": 1, "name": 2, "named": 1, "nested": 1, "new": 1, "node": 1, "not": 1, "numbers": 1, "object": 5, "objects": 2, "of": 17, "offers": 1, "on": 2, "oninput=": 2, "only": 2, "optimization": 1, "optimize": 1, "option": 4, "or": 7, "order": 3, "org/en-us/docs/glossary/callback_function": 1, "org/en-us/docs/glossary/primitive": 1, "org/en-us/docs/web/javascript/reference/global_objects/map": 1, "org/en-us/docs/web/javascript/reference/global_objects/object/entries": 1, "org/en-us/docs/web/javascript/reference/global_objects/object/values": 1, "over": 4, "pass": 1, "pattern": 1, "performance": 3, "position": 1, "primitives": 1, "property": 3, "providing": 1, "rather": 1, "re-render": 1, "re-rendered": 2, "re-rendering": 1, "re-renders": 1, "receives": 1, "red": 1, "remain": 2, "remains": 4, "render": 4, "rendered": 2, "rendering": 6, "repeating": 1, "represents": 1, "required": 1, "requires": 1, "resembles": 1, "rest": 1, "results": 1, "retrieve": 1, "return": 2, "scenarios": 2, "set": 1, "setinputs": 1, "setitems": 1, "shifting": 1, "should": 1, "signal": 2, "signals": 2, "similar": 2, "simply": 1, "single": 1, "sole": 1, "solid": 2, "solid-js": 5, "specified": 2, "specify": 1, "static": 1, "stringlist": 1, "strings": 1, "structure": 2, "structures**": 1, "style=": 1, "such": 5, "tables": 1, "tags": 2, "text": 2, "than": 1, "that": 4, "the": 61, "these": 1, "they": 1, "this": 7, "through": 1, "title": 1, "to": 23, "two": 2, "type=": 2, "unchanged": 2, "undergoes": 1, "update": 2, "updated": 1, "use": 3, "use_cases": 1, "used": 4, "using": 3, "utilities": 1, "value": 5, "value=": 1, "values": 1, "version": 1, "vs": 1, "ways": 1, "were": 1, "when": 9, "where": 5, "which": 3, "while": 2, "will": 4, "wish": 1, "with": 6, "within": 2, "without": 1, "working": 1, "would": 1, "you": 10 }, "length": 830 }, { "id": "7dfa96eca14b7c7ae619eb8b", "doc_id": "a7d34eb5ed5a87274117c72a", "title": "macaron", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/macaron.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/macaron.json", "content": "--- title: Macaron order: 4 mainNavExclude: true use_cases: \u003e- css-in-js styling, type-safe styles, styled components, variant-based styling, compile-time css tags: - styling - css-in-js - macaron - styled-components - typescript - variants version: '1.0' description: \u003e- Style Solid components with Macaron's compile-time CSS-in-JS, offering type-safe styled components and variant-based styling. --- [Macaron](https://macaron.js.org/) is compile-time CSS-in-JS library that offers type safety. ## Installation 1. Install and set up the macaron plugin for your bundler: ```package-install @macaron-css/core @macaron-css/solid ``` 2. Within your `vite.config.js` folder, add the macaron plugin prior to other plugins: ```js import { macaronVitePlugin } from \"@macaron-css/vite\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [ macaronVitePlugin(), // other plugins ], }); ``` ## Usage 1. Import `styled` from `@macaron-css/solid` and create a styled component: ```jsx // button.tsx import { styled } from \"@macaron-css/solid\"; const Button = styled(\"button\", {}); ``` 2. Add styles that will be applied to the components by default: ```jsx import { styled } from \"@macaron-css/solid\"; const Button = styled(\"button\", { base: { backgroundColor: \"red\", borderRadius: \"10px\", }, }); ``` Variants can be added using the `variants` key: ```jsx import { styled } from \"@macaron-css/solid\"; const Button = styled(\"button\", { base: { backgroundColor: \"red\", borderRadius: \"10px\", }, variants: { color: { violet: { backgroundColor: \"violet\", }, gray: { backgroundColor: \"gray\", }, }, }, }); ``` Additionally, the `defaultVariants` feature is set to `variants` by default. This can be overridden at the time of usage: ```jsx import { styled } from \"@macaron-css/solid\"; const Button = styled(\"button\", { base: { backgroundColor: \"red\", borderRadius: \"10px\", }, variants: { color: { violet: { backgroundColor: \"violet\", }, gray: { backgroundColor: \"gray\", }, }, }, defaultVariants: { color: \"blue\", }, }); ``` These components can be used like any other Solid component, with type-safe props derived from your variants. For more information on how to use macaron, visit their [documentation](https://macaron.js.org/docs/installation/).", "term_freq": { "##": 2, "---": 2, "//": 2, "//github": 1, "//macaron": 2, "10px": 3, "\u003e-": 2, "@macaron-css/core": 1, "@macaron-css/solid": 6, "@macaron-css/vite": 1, "add": 2, "added": 1, "additionally": 1, "and": 3, "any": 1, "applied": 1, "at": 1, "backgroundcolor": 7, "base": 3, "be": 4, "blue": 1, "borderradius": 3, "bundler": 1, "button": 9, "by": 2, "can": 3, "color": 3, "com/solidjs/solid-docs/blob/head/src/routes/guides/styling-components/macaron": 1, "compile-time": 3, "component": 2, "components": 5, "config": 1, "const": 4, "create": 1, "css": 1, "css-in-js": 4, "default": 3, "defaultvariants": 2, "defineconfig": 2, "derived": 1, "description": 1, "documentation": 1, "export": 1, "feature": 1, "folder": 1, "for": 2, "from": 8, "github-document": 1, "gray": 4, "how": 1, "https": 3, "import": 7, "information": 1, "install": 1, "installation": 1, "is": 2, "js": 4, "jsx": 4, "key": 1, "library": 1, "like": 1, "macaron": 8, "macaronviteplugin": 2, "mainnavexclude": 1, "mdx": 1, "more": 1, "of": 1, "offering": 1, "offers": 1, "on": 1, "order": 1, "org/": 1, "org/docs/installation/": 1, "other": 3, "overridden": 1, "package-install": 1, "plugin": 2, "plugins": 3, "prior": 1, "props": 1, "red": 3, "safety": 1, "set": 2, "solid": 2, "style": 1, "styled": 12, "styled-components": 1, "styles": 2, "styling": 4, "tags": 1, "that": 2, "the": 6, "their": 1, "these": 1, "this": 1, "time": 1, "title": 1, "to": 4, "true": 1, "tsx": 1, "type": 1, "type-safe": 3, "typescript": 1, "up": 1, "usage": 2, "use": 1, "use_cases": 1, "used": 1, "using": 1, "variant-based": 2, "variants": 7, "version": 1, "violet": 4, "visit": 1, "vite": 2, "will": 1, "with": 2, "within": 1, "your": 3 }, "length": 261 }, { "id": "7fdf0cee56fd200b2c71e290", "doc_id": "46035bdfa1867064487f0374", "title": "map-array", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/map-array.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/map-array.json", "content": "--- title: mapArray use_cases: \u003e- efficient list rendering, dynamic arrays, cached list transformations, optimized updates, for loop alternatives tags: - arrays - lists - rendering - caching - optimization version: '1.0' description: \u003e- Efficiently map reactive arrays in SolidJS with cached transformations. Reduces unnecessary re-renders by tracking items by reference. --- ```ts import { mapArray } from \"solid-js\" function mapArray\u003cT, U\u003e( list: () =\u003e readonly T[], mapFn: (v: T, i: () =\u003e number) =\u003e U ): () =\u003e U[] ``` Reactive map helper that caches each item by reference to reduce unnecessary mapping on updates. It only runs the mapping function once per value and then moves or removes it as needed. The index argument is a signal. The map function itself is not tracking. Underlying helper for the `\u003cFor\u003e` control flow. ```ts const mapped = mapArray(source, (model) =\u003e { const [name, setName] = createSignal(model.name) const [description, setDescription] = createSignal(model.description) return { id: model.id, get name() { return name() }, get description() { return description() }, setName, setDescription, } }) ``` ## Arguments | Name | Type | Description | | :---- | :----------------------------- | :----------------------- | | list | `() =\u003e readonly T[]` | The source array to map. | | mapFn | `(v: T, i: () =\u003e number) =\u003e U` | The mapping function. |", "term_freq": { "##": 1, "---": 2, "----": 1, "-----------------------": 1, "-----------------------------": 1, "//github": 1, "\u003cfor\u003e": 1, "=\u003e": 8, "\u003e-": 2, "alternatives": 1, "and": 1, "argument": 1, "arguments": 1, "array": 1, "arrays": 3, "as": 1, "by": 3, "cached": 2, "caches": 1, "caching": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/map-array": 1, "const": 3, "control": 1, "createsignal": 2, "description": 6, "dynamic": 1, "each": 1, "efficient": 1, "efficiently": 1, "flow": 1, "for": 2, "from": 1, "function": 4, "get": 2, "github-document": 1, "helper": 2, "https": 1, "id": 2, "import": 1, "in": 1, "index": 1, "is": 2, "it": 2, "item": 1, "items": 1, "itself": 1, "list": 4, "lists": 1, "loop": 1, "map": 4, "map-array": 1, "maparray": 3, "maparray\u003ct": 1, "mapfn": 2, "mapped": 1, "mapping": 3, "mdx": 1, "model": 4, "moves": 1, "name": 5, "needed": 1, "not": 1, "number": 2, "on": 1, "once": 1, "only": 1, "optimization": 1, "optimized": 1, "or": 1, "per": 1, "re-renders": 1, "reactive": 2, "readonly": 2, "reduce": 1, "reduces": 1, "reference": 2, "removes": 1, "rendering": 2, "return": 3, "runs": 1, "setdescription": 2, "setname": 2, "signal": 1, "solid-js": 1, "solidjs": 1, "source": 2, "tags": 1, "that": 1, "the": 6, "then": 1, "title": 1, "to": 2, "tracking": 2, "transformations": 2, "ts": 2, "type": 1, "u\u003e": 1, "underlying": 1, "unnecessary": 2, "updates": 2, "use_cases": 1, "value": 1, "version": 1, "with": 1 }, "length": 174 }, { "id": "ea854aff98c4829bee54bc09", "doc_id": "edb2cd1b70fa4904abef7403", "title": "memory-router", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/components/memory-router.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/memory-router.json", "content": "--- title: MemoryRouter use_cases: \u003e- testing routing, controlled navigation, internal history, unit tests, programmatic routing tags: - testing - memory - history - component - navigation - programmatic version: '1.0' description: \u003e- MemoryRouter keeps routing history in memory for complete control, ideal for testing scenarios and programmatic navigation management. --- The `MemoryRouter` can be used to route while keeping the entire routing history within internal memory. Other routers keep history externally such as in the url like the [`\u003cHashRouter\u003e`](/solid-router/reference/components/hash-router) or in the browser history like [`\u003cRouter\u003e`](/solid-router/reference/components/memory-router). Keeping the history in memory is useful when you want full control over the routing history. Since `MemoryRouter` can manipulate `MemoryHistory`, it is often used for testing purposes. ```jsx import { MemoryRouter, createMemoryHistory, A } from \"@solidjs/router\"; import { Suspense } from \"solid-js\"; export default function App() { const history = createMemoryHistory(); const toHome = () =\u003e { history.set({ value: \"/\" }); }; const toAbout = () =\u003e { history.set({ value: \"/about\" }); }; return ( \u003c\u003e \u003cbutton onClick={toHome}\u003e{'\"/\"'}\u003c/button\u003e \u003cbutton onClick={toAbout}\u003e{'\"/about\"'}\u003c/button\u003e \u003cMemoryRouter history={history} root={(props) =\u003e \u003cSuspense\u003e{props.children}\u003c/Suspense\u003e} \u003e {/*... routes */} \u003c/MemoryRouter\u003e \u003c/\u003e ); } ``` In this example, a history object is pre-filled to navigate to the `/about` route, which is then passed to the `MemoryRouter`. ## Manipulating the history The `MemoryHistory` object contains the following methods, which you can use to control the navigation of your app. - The `get` method retrieves the current route as a string, while the `set` method navigates to a new route, allowing for optional parameters like replacing the current history entry or scrolling to a DOM element id. - The `back` and `forward` methods mimic the browser's back and forward buttons, respectively, and the `go` method navigates a specific number of steps in the history, either backward or forward. - The `listen` method registers a callback to be called on navigation change. ## Properties ### `MemoryHistory` | Method | Signature | Description | | --------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `get` | `get(): string` | Returns the current route. | | `set` | `set({ value: string, scroll?: boolean, replace?: boolean })` | Navigates to a new route. `value`: URL to navigate to. `scroll`: Scrolls to element by ID (default: `false`). `replace`: Replaces the current history entry (default: `false`). | | `back` | `back(): void` | Navigates 1 step back in the history. Corresponds to `go(-1)`. | | `forward` | `forward(): void` | Navigates 1 step forward in the history. Corresponds to `go(1)`. | | `go` | `go(n: number): void` | Navigates n steps in the history. Negative for back, positive for forward. Clamped to history length. | | `listen` | `listen(listener: (value: string) =\u003e void): () =\u003e void` | Registers a listener that will be called on navigation. | ### `MemoryRouter` | Property | Type | Description | | ------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------ | | children | `JSX.Element`, `RouteDefinition`, or `RouteDefinition[]` | The route definitions | | root | Component | Top level layout component | | base | string | Base url to use for matching routes | | actionBase | string | Root url for server actions, default: `/_server` | | preload | boolean | Enables/disables preloads globally, default: `true` | | explicitLinks | boolean | Disables all anchors being intercepted and instead requires `\u003cA\u003e`. default: `false` | | history | MemoryHistory | An optionally pre-filled and mutable history object which will store any navigation events |", "term_freq": { "##": 2, "###": 2, "*/": 1, "---": 2, "---------": 1, "-------------": 1, "--------------------------------------------------------": 1, "-------------------------------------------------------------": 1, "------------------------------------------------------------------------------------------": 1, "-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------": 1, "-1": 1, "/*": 1, "//github": 1, "/_server": 1, "/about": 3, "/solid-router/reference/components/hash-router": 1, "/solid-router/reference/components/memory-router": 1, "\u003c/\u003e": 1, "\u003c/button\u003e": 2, "\u003c/memoryrouter\u003e": 1, "\u003c/suspense\u003e": 1, "\u003c\u003e": 1, "\u003ca\u003e": 1, "\u003cbutton": 2, "\u003chashrouter\u003e": 1, "\u003cmemoryrouter": 1, "\u003crouter\u003e": 1, "\u003csuspense\u003e": 1, "=\u003e": 5, "\u003e-": 2, "@solidjs/router": 1, "actionbase": 1, "actions": 1, "all": 1, "allowing": 1, "an": 1, "anchors": 1, "and": 6, "any": 1, "app": 2, "as": 2, "back": 6, "backward": 1, "base": 2, "be": 3, "being": 1, "boolean": 4, "browser": 2, "buttons": 1, "by": 1, "callback": 1, "called": 2, "can": 3, "change": 1, "children": 2, "clamped": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/components/memory-router": 1, "complete": 1, "component": 3, "const": 3, "contains": 1, "control": 3, "controlled": 1, "corresponds": 2, "creatememoryhistory": 2, "current": 4, "default": 6, "definitions": 1, "description": 3, "disables": 1, "dom": 1, "either": 1, "element": 3, "enables/disables": 1, "entire": 1, "entry": 2, "events": 1, "example": 1, "explicitlinks": 1, "export": 1, "externally": 1, "false": 3, "following": 1, "for": 8, "forward": 7, "from": 2, "full": 1, "function": 1, "get": 3, "github-document": 1, "globally": 1, "go": 5, "history": 23, "history=": 1, "https": 1, "id": 2, "ideal": 1, "import": 2, "in": 9, "instead": 1, "intercepted": 1, "internal": 2, "is": 4, "it": 1, "jsx": 2, "keep": 1, "keeping": 2, "keeps": 1, "layout": 1, "length": 1, "level": 1, "like": 3, "listen": 3, "listener": 2, "management": 1, "manipulate": 1, "manipulating": 1, "matching": 1, "mdx": 1, "memory": 4, "memory-router": 1, "memoryhistory": 4, "memoryrouter": 7, "method": 5, "methods": 2, "mimic": 1, "mutable": 1, "navigate": 2, "navigates": 6, "navigation": 7, "negative": 1, "new": 2, "number": 2, "object": 3, "of": 2, "often": 1, "on": 2, "onclick=": 2, "optional": 1, "optionally": 1, "or": 4, "other": 1, "over": 1, "parameters": 1, "passed": 1, "positive": 1, "pre-filled": 2, "preload": 1, "preloads": 1, "programmatic": 3, "properties": 1, "property": 1, "props": 2, "purposes": 1, "registers": 2, "replace": 2, "replaces": 1, "replacing": 1, "requires": 1, "respectively": 1, "retrieves": 1, "return": 1, "returns": 1, "root": 2, "root=": 1, "route": 7, "routedefinition": 2, "routers": 1, "routes": 2, "routing": 5, "scenarios": 1, "scroll": 2, "scrolling": 1, "scrolls": 1, "server": 1, "set": 5, "signature": 1, "since": 1, "solid-js": 1, "specific": 1, "step": 2, "steps": 2, "store": 1, "string": 6, "such": 1, "suspense": 1, "tags": 1, "testing": 4, "tests": 1, "that": 1, "the": 28, "then": 1, "this": 1, "title": 1, "to": 16, "toabout": 2, "tohome": 2, "top": 1, "true": 1, "type": 1, "unit": 1, "url": 4, "use": 2, "use_cases": 1, "used": 2, "useful": 1, "value": 5, "version": 1, "void": 5, "want": 1, "when": 1, "which": 3, "while": 2, "will": 2, "within": 1, "you": 2, "your": 1 }, "length": 473 }, { "id": "377a6d754376d108d97e0b4d", "doc_id": "95c5308b663368aa2b2797d2", "title": "memos", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/derived-values/memos.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/memos.json", "content": "--- title: Memos order: 2 use_cases: \u003e- expensive computations, caching results, optimizing performance, derived state, avoiding re-calculations tags: - memo - performance - caching - optimization - reactivity - computed version: '1.0' description: \u003e- Optimize expensive computations with memos that cache results and only recalculate when dependencies actually change. --- Memos are a type of reactive value that can be used to memoize derived state or expensive computations. They are similar to [derived signals](/concepts/derived-values/derived-signals) in that they are reactive values that automatically re-evaluate when their dependencies change. However, unlike derived signals, memos are optimized to execute only once for each change in their dependencies. Memos expose a _read-only_ reactive value (like a [signal](/concepts/signals)) and track changes in their dependencies (similar to an [effect](/concepts/effects)). This makes them useful for caching the results of expensive or frequently accessed computations. By doing this, memos minimize unnecessary work within an application by retaining the results of a computation until its dependencies change. ## Using memos A memo is created using the `createMemo` function. Within this function, you can define the derived value or computations you wish to memoize. When called, `createMemo` will return a **getter** function that reads the current value of the memo: ```jsx import { createMemo, createSignal } from \"solid-js\" const [count, setCount] = createSignal(0) const isEven = createMemo(() =\u003e count() % 2 === 0) console.log(isEven()) // true setCount(3) console.log(isEven()) // false ``` While memos look similar to effects, they are different in that they _return a value_. This value is the result of the computation or derived state that you wish to memoize. ### Advantages of using memos While you can use a [derived signal](/concepts/derived-values/derived-signals) to achieve similar results, memos offer distinct advantages: - Memos are optimized to execute only once for each change in their dependencies. - When working with expensive computations, memos can be used to cache the results so they are not recomputed unnecessarily. - A memo will only recompute when its dependencies change, and will not trigger subsequent updates (as determined by [`===` or strict equality](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality)) if its dependencies change but its value remains the same. - Any signal or memo accessed within a memo's function is **tracked**. This means that the memo will re-evaluate automatically when these dependencies change. \u003cEraserLink href=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=ACJTLvgPnReEQszYSUwoLw\" preview=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=ACJTLvgPnReEQszYSUwoLw\u0026type=embed\" /\u003e ## Memo vs. effect Both memos and effects are important when managing reactive computations and side effects. They, however, serve different purposes and each has their own unique behaviors. | | Memos | Effects | | -------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | Return value | Yes - returns a getter for the result of the computation or derived state. | Does not return a value but executes a block of code in response to changes. | | Caches results | Yes | No | | Behavior | Function argument should be pure without reactive side effects. | Function argument can cause side effects like UI updates or data fetches. | | Dependency tracking. | Yes | Yes | | Example use cases | Transforming data structures, computing aggregated values, derived state, or other expensive computations. | UI updates, network requests, or external integrations. | ## Best practices ### Pure functions When working with memos, it is recommended that you leave them \"pure\". ```jsx import { createSignal, createMemo } from \"solid-js\" const [count, setCount] = createSignal(0) const isEven = createMemo(() =\u003e count() % 2 === 0) // example of a pure function ``` A pure function is one that does not cause any side effects. This means that the function's output should solely depend on its inputs. When you introduce side effects into a memo, it can complicate the reactivity chain. This can lead to unexpected behavior, such as infinite loops, that lead your application to crash. ```jsx import { createSignal, createMemo } from \"solid-js\" const [count, setCount] = createSignal(0) const [message, setMessage] = createSignal(\"\") const badMemo = createMemo(() =\u003e { if (count() \u003e 10) { setMessage(\"Count is too high!\") // side effect } return count() % 2 === 0 }) ``` These infinite loops can be triggered when a memo has a side effect that causes its dependencies to change. This will cause the memo to re-evaluate, which will then trigger the side effect again, and so on until the application crashes. This can be avoided by using a [`createEffect`](/reference/basic-reactivity/create-effect) to handle the side effects instead: ```jsx import { createSignal, createMemo, createEffect } from \"solid-js\" const [count, setCount] = createSignal(0) const [message, setMessage] = createSignal(\"\") const isEven = createMemo(() =\u003e count() % 2 === 0) createEffect(() =\u003e { if (count() \u003e 10) { setMessage(\"Count is too high!\") } }) ``` Here, the `createEffect` will handle the side effects, while the `isEven` memo will remain pure. ### Keep logic in memos Memos are optimized to execute only once for each change in their dependencies. This means that you can remove unnecessary effects that are triggered by a memo's dependencies. When working with derived state, memos are the recommended approach over effects. Keeping the logic in a memo prevents unnecessary re-renders that can occur when using an effect. Similarly, effects are better suited to handle side effects, such as DOM updates, rather than derived state. This separation of concerns can help keep your code clean and easy to understand. ```jsx // effect - runs whenever `count` changes createEffect(() =\u003e { if (count() \u003e 10) { setMessage(\"Count is too high!\") } else { setMessage(\"\") } }) // memo - only runs when `count` changes to or from a value greater than 10 const message = createMemo(() =\u003e { if (count() \u003e 10) { return \"Count is too high!\" } else { return \"\" } }) ```", "term_freq": { "##": 3, "###": 3, "**getter**": 1, "**tracked**": 1, "---": 2, "--------------------": 1, "----------------------------------------------------------------------------": 1, "----------------------------------------------------------------------------------------------------------": 1, "//": 6, "//app": 2, "//developer": 1, "//github": 1, "/\u003e": 1, "/concepts/derived-values/derived-signals": 2, "/concepts/effects": 1, "/concepts/signals": 1, "/reference/basic-reactivity/create-effect": 1, "10": 5, "\u003ceraserlink": 1, "===": 5, "=\u003e": 7, "\u003e-": 2, "_read-only_": 1, "_return": 1, "accessed": 2, "achieve": 1, "actually": 1, "advantages": 2, "again": 1, "aggregated": 1, "an": 3, "and": 8, "any": 2, "application": 3, "approach": 1, "are": 12, "argument": 2, "as": 3, "automatically": 2, "avoided": 1, "avoiding": 1, "badmemo": 1, "be": 5, "behavior": 2, "behaviors": 1, "best": 1, "better": 1, "block": 1, "both": 1, "but": 2, "by": 5, "cache": 2, "caches": 1, "caching": 3, "called": 1, "can": 12, "cases": 1, "cause": 3, "causes": 1, "chain": 1, "change": 10, "changes": 4, "clean": 1, "code": 2, "com/solidjs/solid-docs/blob/head/src/routes/concepts/derived-values/memos": 1, "complicate": 1, "computation": 3, "computations": 8, "computed": 1, "computing": 1, "concerns": 1, "console": 2, "const": 11, "count": 18, "crash": 1, "crashes": 1, "created": 1, "createeffect": 5, "creatememo": 11, "createsignal": 10, "current": 1, "data": 2, "define": 1, "depend": 1, "dependencies": 12, "dependency": 1, "derived": 11, "description": 1, "determined": 1, "different": 2, "distinct": 1, "does": 2, "doing": 1, "dom": 1, "each": 4, "easy": 1, "effect": 7, "effects": 14, "elements=acjtlvgpnreeqszysuwolw": 1, "elements=acjtlvgpnreeqszysuwolw\u0026type=embed": 1, "else": 2, "equality": 1, "eraser": 2, "example": 2, "execute": 3, "executes": 1, "expensive": 6, "expose": 1, "external": 1, "false": 1, "fetches": 1, "for": 5, "frequently": 1, "from": 5, "function": 9, "functions": 1, "getter": 1, "github-document": 1, "greater": 1, "handle": 3, "has": 2, "help": 1, "here": 1, "high": 4, "however": 2, "href=": 1, "https": 4, "if": 5, "import": 4, "important": 1, "in": 9, "infinite": 2, "inputs": 1, "instead": 1, "integrations": 1, "into": 1, "introduce": 1, "io/workspace/madvfw5oryupjowslyk9": 1, "io/workspace/madvfw5oryupjowslyk9/preview": 1, "is": 9, "iseven": 6, "it": 2, "its": 6, "jsx": 5, "keep": 2, "keeping": 1, "lead": 2, "leave": 1, "like": 2, "log": 2, "logic": 2, "look": 1, "loops": 2, "makes": 1, "managing": 1, "mdx": 1, "means": 3, "memo": 15, "memoize": 3, "memos": 19, "message": 3, "minimize": 1, "mozilla": 1, "network": 1, "no": 1, "not": 4, "occur": 1, "of": 10, "offer": 1, "on": 2, "once": 3, "one": 1, "only": 6, "optimization": 1, "optimize": 1, "optimized": 3, "optimizing": 1, "or": 11, "order": 1, "org/en-us/docs/web/javascript/reference/operators/strict_equality": 1, "other": 1, "output": 1, "over": 1, "own": 1, "performance": 2, "practices": 1, "prevents": 1, "preview=": 1, "pure": 6, "purposes": 1, "rather": 1, "re-calculations": 1, "re-evaluate": 3, "re-renders": 1, "reactive": 5, "reactivity": 2, "reads": 1, "recalculate": 1, "recommended": 2, "recompute": 1, "recomputed": 1, "remain": 1, "remains": 1, "remove": 1, "requests": 1, "response": 1, "result": 2, "results": 7, "retaining": 1, "return": 6, "returns": 1, "runs": 2, "same": 1, "separation": 1, "serve": 1, "setcount": 5, "setmessage": 6, "should": 2, "side": 11, "signal": 3, "signals": 2, "similar": 4, "similarly": 1, "so": 2, "solely": 1, "solid-js": 4, "state": 7, "strict": 1, "structures": 1, "subsequent": 1, "such": 2, "suited": 1, "tags": 1, "than": 2, "that": 16, "the": 24, "their": 6, "them": 2, "then": 1, "these": 2, "they": 6, "this": 11, "title": 1, "to": 20, "too": 4, "track": 1, "tracking": 1, "transforming": 1, "trigger": 2, "triggered": 2, "true": 1, "type": 1, "ui": 2, "understand": 1, "unexpected": 1, "unique": 1, "unlike": 1, "unnecessarily": 1, "unnecessary": 3, "until": 2, "updates": 4, "use": 2, "use_cases": 1, "used": 2, "useful": 1, "using": 5, "value": 9, "value_": 1, "values": 2, "version": 1, "vs": 1, "when": 13, "whenever": 1, "which": 1, "while": 3, "will": 8, "wish": 2, "with": 4, "within": 3, "without": 1, "work": 1, "working": 3, "yes": 4, "you": 7, "your": 2 }, "length": 847 }, { "id": "65dd569138fa0e3fc2702d1a", "doc_id": "27b93a03433fe3a2e7698ffe", "title": "merge-props", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/merge-props.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/merge-props.json", "content": "--- title: mergeProps use_cases: \u003e- component props, default values, prop cloning, prop merging, component configuration tags: - props - components - reactivity - defaults - cloning - merging version: '1.0' description: \u003e- Learn how to merge reactive props in SolidJS for setting component defaults, cloning props objects, and combining multiple prop sources dynamically. --- ```ts import { mergeProps } from \"solid-js\" function mergeProps(...sources: any): any ``` A reactive object **merge** method. Useful for setting default props for components in case caller doesn't provide them. Or cloning the props object including reactive properties. This method works by using a proxy and resolving properties in reverse order. This allows for dynamic tracking of properties that aren't present when the prop object is first merged. ```ts // default props props = mergeProps({ name: \"Smith\" }, props) // clone props newProps = mergeProps(props) // merge props props = mergeProps(props, otherProps) ```", "term_freq": { "**merge**": 1, "---": 2, "//": 3, "//github": 1, "\u003e-": 2, "allows": 1, "and": 2, "any": 2, "aren": 1, "by": 1, "caller": 1, "case": 1, "clone": 1, "cloning": 4, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/merge-props": 1, "combining": 1, "component": 3, "components": 2, "configuration": 1, "default": 3, "defaults": 2, "description": 1, "doesn": 1, "dynamic": 1, "dynamically": 1, "first": 1, "for": 4, "from": 1, "function": 1, "github-document": 1, "how": 1, "https": 1, "import": 1, "in": 3, "including": 1, "is": 1, "learn": 1, "mdx": 1, "merge": 2, "merge-props": 1, "merged": 1, "mergeprops": 6, "merging": 2, "method": 2, "multiple": 1, "name": 1, "newprops": 1, "object": 3, "objects": 1, "of": 1, "or": 1, "order": 1, "otherprops": 1, "present": 1, "prop": 4, "properties": 3, "props": 14, "provide": 1, "proxy": 1, "reactive": 3, "reactivity": 1, "resolving": 1, "reverse": 1, "setting": 2, "smith": 1, "solid-js": 1, "solidjs": 1, "sources": 2, "tags": 1, "that": 1, "the": 2, "them": 1, "this": 2, "title": 1, "to": 1, "tracking": 1, "ts": 2, "use_cases": 1, "useful": 1, "using": 1, "values": 1, "version": 1, "when": 1, "works": 1 }, "length": 139 }, { "id": "fecd9f6cb340a0c926fd76a1", "doc_id": "05176767c6a81ba91a30cc66", "title": "meta", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/reference/meta/meta.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/meta.json", "content": "--- title: Meta order: 3 use_cases: \u003e- seo optimization, social media tags, viewport settings, charset configuration, open graph tags: - meta - seo - viewport - metadata - head - tags version: '1.0' description: \u003e- Add SEO and viewport metadata to your Solid app with the Meta component. Configure description, keywords, and social media tags for better reach. --- The `\u003cMeta\u003e` component represents metadata that cannot be represented by other HTML elements. It is a wrapper for the native [`meta`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) element and has the same properties. ```tsx twoslash import { Meta } from \"@solidjs/meta\"; \u003cMeta name=\"description\" content=\"My site description\" /\u003e; ``` `Meta` components can be placed in the [`MetaProvider`](/solid-meta/reference/meta/metaprovider) or added throughout the application for additional metadata or override parents. `Meta` tags are considered the same and will be overridden if `name` attributes match. ## Usage ### Adding `meta` tag ```tsx twoslash {6-8} import { MetaProvider, Meta } from \"@solidjs/meta\"; export default function Root() { return ( \u003cMetaProvider\u003e \u003cMeta charset=\"utf-8\" /\u003e \u003cMeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e \u003cMeta name=\"description\" content=\"Hacker News Clone built with Solid\" /\u003e \u003c/MetaProvider\u003e ); } ```", "term_freq": { "##": 1, "###": 1, "---": 2, "//developer": 1, "//github": 1, "/\u003e": 4, "/solid-meta/reference/meta/metaprovider": 1, "6-8": 1, "\u003c/metaprovider\u003e": 1, "\u003cmeta": 4, "\u003cmeta\u003e": 1, "\u003cmetaprovider\u003e": 1, "\u003e-": 2, "@solidjs/meta": 2, "add": 1, "added": 1, "adding": 1, "additional": 1, "and": 4, "app": 1, "application": 1, "are": 1, "attributes": 1, "be": 3, "better": 1, "built": 1, "by": 1, "can": 1, "cannot": 1, "charset": 1, "charset=": 1, "clone": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-meta/reference/meta/meta": 1, "component": 2, "components": 1, "configuration": 1, "configure": 1, "considered": 1, "content=": 3, "default": 1, "description": 5, "element": 1, "elements": 1, "export": 1, "for": 3, "from": 2, "function": 1, "github-document": 1, "graph": 1, "hacker": 1, "has": 1, "head": 1, "html": 1, "https": 2, "if": 1, "import": 2, "in": 1, "initial-scale=1": 1, "is": 1, "it": 1, "keywords": 1, "match": 1, "mdx": 1, "media": 2, "meta": 10, "metadata": 4, "metaprovider": 2, "mozilla": 1, "my": 1, "name": 1, "name=": 3, "native": 1, "news": 1, "open": 1, "optimization": 1, "or": 2, "order": 1, "org/en-us/docs/web/html/element/meta": 1, "other": 1, "overridden": 1, "override": 1, "parents": 1, "placed": 1, "properties": 1, "reach": 1, "represented": 1, "represents": 1, "return": 1, "root": 1, "same": 2, "seo": 3, "settings": 1, "site": 1, "social": 2, "solid": 2, "tag": 1, "tags": 5, "that": 1, "the": 7, "throughout": 1, "title": 1, "to": 1, "tsx": 2, "twoslash": 2, "usage": 1, "use_cases": 1, "utf-8": 1, "version": 1, "viewport": 4, "width=device-width": 1, "will": 1, "with": 2, "wrapper": 1, "your": 1 }, "length": 178 }, { "id": "0e23d71d8b592406c06c814b", "doc_id": "f19621e6b70c05fef25230de", "title": "metaprovider", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/reference/meta/metaprovider.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/metaprovider.json", "content": "--- title: MetaProvider order: 6 use_cases: \u003e- initializing meta tags, wrapping app, head management setup, meta context, always in meta apps tags: - provider - meta - setup - context - wrapper - head version: '1.0' description: \u003e- MetaProvider wraps your Solid app to enable head tag management. Essential parent component for all metadata components to function properly. --- `MetaProvider` is a parent component responsible for wrapping all the metadata components. All components that are contained within this will be added to the application `\u003chead/\u003e` ```tsx twoslash import { MetaProvider } from \"@solidjs/meta\"; \u003cMetaProvider\u003e// add meta components\u003c/MetaProvider\u003e; ```", "term_freq": { "---": 2, "//github": 1, "\u003chead/\u003e": 1, "\u003cmetaprovider\u003e//": 1, "\u003e-": 2, "@solidjs/meta": 1, "add": 1, "added": 1, "all": 3, "always": 1, "app": 2, "application": 1, "apps": 1, "are": 1, "be": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-meta/reference/meta/metaprovider": 1, "component": 2, "components": 3, "components\u003c/metaprovider\u003e": 1, "contained": 1, "context": 2, "description": 1, "enable": 1, "essential": 1, "for": 2, "from": 1, "function": 1, "github-document": 1, "head": 3, "https": 1, "import": 1, "in": 1, "initializing": 1, "is": 1, "management": 2, "mdx": 1, "meta": 5, "metadata": 2, "metaprovider": 5, "order": 1, "parent": 2, "properly": 1, "provider": 1, "responsible": 1, "setup": 2, "solid": 1, "tag": 1, "tags": 2, "that": 1, "the": 2, "this": 1, "title": 1, "to": 3, "tsx": 1, "twoslash": 1, "use_cases": 1, "version": 1, "will": 1, "within": 1, "wrapper": 1, "wrapping": 2, "wraps": 1, "your": 1 }, "length": 92 }, { "id": "86975770a10fccecfe21a968", "doc_id": "36c7ae9bfdd55cf457b6540a", "title": "middleware", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/advanced/middleware.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/middleware.json", "content": "--- title: Middleware use_cases: \u003e- request interception, header management, global data sharing, request preprocessing, logging, redirects tags: - middleware - headers - interceptors - logging - preprocessing - locals version: '1.0' description: \u003e- Intercept HTTP requests with middleware for authentication, logging, and header management. Share request-scoped data across your app. --- Middleware intercepts HTTP requests and responses to perform tasks like authentication, redirection, logging, and more. It also enables sharing request-scoped data across the application using the `event.locals` object. ## Common use cases Here are some common use cases for middleware: - **Request and response header management:** Middleware allows modifying headers to control caching (e.g., `Cache-Control`), improve security (e.g., `Content-Security-Policy`), or implement custom behaviour based on request characteristics. - **Global data sharing:** The `event.locals` object allows storing and sharing request-scoped data between middleware and any server-side context (e.g., API routes, server-only queries/actions). This is useful for passing information like user authentication status, feature flags, or other request-related data. - **Server-side redirects:** Middleware can redirect users based on various request properties, such as locale, authentication state, or custom query parameters. - **Request preprocessing:** Middleware can perform lightweight preprocessing tasks, such as validating tokens or normalizing paths. ## Limitations While middleware is powerful, certain tasks are better handled in other parts of your application for performance, maintainability, or security reasons: - **Authorization:** Middleware does _not_ run on every request, especially during client-side navigations. Relying on it for authorization would create a significant security vulnerability. As a result, authorization checks should be performed as close to the data source as possible. This means it within API routes, server-only queries/actions, or other server-side utilities. - **Heavy computation or long-running processes:** Middleware should be lightweight and execute quickly to avoid impacting performance. CPU-intensive tasks, long-running processes, or blocking operations (e.g., complex calculations, external API calls) are best handled by dedicated route handlers, server-side utilities, or background jobs. - **Database operations:** Performing direct database queries within middleware can lead to performance bottlenecks and make your application harder to maintain. Database interactions should be handled by server-side utilities or route handlers, which will create better management of database connections and handling of potential errors. ## Basic usage Middleware is configured by exporting a configuration object from a dedicated file (e.g., `src/middleware/index.ts`). This object, created using the [`createMiddleware`](/solid-start/reference/server/create-middleware) function, defines when middleware functions execute throughout the request lifecycle. ```ts title=\"src/middleware/index.ts\" import { createMiddleware } from \"@solidjs/start/middleware\"; export default createMiddleware({ onRequest: (event) =\u003e { console.log(\"Request received:\", event.request.url); event.locals.startTime = Date.now(); }, onBeforeResponse: (event) =\u003e { const endTime = Date.now(); const duration = endTime - event.locals.startTime; console.log(`Request took ${duration}ms`); }, }); ``` For SolidStart to recognize the configuration object, the file path is declared in `app.config.ts`: ```ts title=\"app.config.ts\" import { defineConfig } from \"@solidjs/start/config\"; export default defineConfig({ middleware: \"src/middleware/index.ts\", }); ``` ## Lifecycle events A middleware function executes at specific points in the request lifecycle, using two key events: `onRequest` and `onBeforeResponse`. ### `onRequest` The `onRequest` event is triggered at the beginning of the request lifecycle, before the request is handled by the route handler. This is the ideal place to: - Store request-scoped data in `event.locals` for use in later middleware functions or route handlers. - Set or modify request headers. - Perform early redirects. ### `onBeforeResponse` The `onBeforeResponse` event is triggered after a request has been processed by the route handler but before the response is sent to the client. This is the ideal place to: - Set or modify response headers. - Log response metrics or perform other post-processing tasks. - Modify the response body. ## Locals In web applications, there's often a need to share request-specific data across different parts of the server-side code. This data might include user authentication status, trace IDs for debugging, or client metadata (e.g., user agent, geolocation). The `event.locals` is a plain JavaScript object that can hold any JavaScript value. This object provides a temporary, request-scoped storage layer to address this need. Any data stored within it is only available during the processing of a single HTTP request and is automatically cleared afterward. ```ts import { createMiddleware } from \"@solidjs/start/middleware\"; export default createMiddleware({ onRequest: (event) =\u003e { event.locals.user = { name: \"John Wick\", }; event.locals.sayHello = () =\u003e { return \"Hello, \" + event.locals.user.name; }; }, }); ``` Within middleware, `event.locals` can be accessed and modified directly. Other server-side contexts must use the [`getRequestEvent`](/reference/server-utilities/get-request-event) function to access the `event.locals` object. ```tsx title=\"src/routes/index.tsx\" import { getRequestEvent } from \"solid-js/web\"; import { query, createAsync } from \"@solidjs/router\"; const getUser = query(async () =\u003e { \"use server\"; const event = getRequestEvent(); return { name: event?.locals?.user?.name, greeting: event?.locals?.sayHello(), }; }, \"user\"); export default function Page() { const user = createAsync(() =\u003e getUser()); return ( \u003cdiv\u003e \u003cp\u003eName: {user()?.name}\u003c/p\u003e \u003cbutton onClick={() =\u003e alert(user()?.greeting)}\u003eSay Hello\u003c/button\u003e \u003c/div\u003e ); } ``` ## Headers Request and response headers can be accessed and modified using the `event.request.headers` and `event.response.headers` objects. These follow the [standard Web API `Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) interface, exposing built-in methods for reading/updating headers. ```ts import { createMiddleware } from \"@solidjs/start/middleware\"; export default createMiddleware({ onRequest: (event) =\u003e { // Reading client metadata for later use const userAgent = event.request.headers.get(\"user-agent\"); // Adding custom headers to request/response event.request.headers.set(\"x-custom-request-header\", \"hello\"); event.response.headers.set(\"x-custom-response-header1\", \"hello\"); }, onBeforeResponse: (event) =\u003e { // Finalizing response headers before sending to client event.response.headers.set(\"x-custom-response-header2\", \"hello\"); }, }); ``` Headers set in `onRequest` are applied **before** the route handler processes the request, allowing downstream middleware or route handlers to override them. Headers set in `onBeforeResponse` are applied **after** the route handler and are finalized for the client. ## Cookies HTTP cookies are accessible through the `Cookie` request header and `Set-Cookie` response header. While these headers can be manipulated directly, [Vinxi](https://vinxi.vercel.app), the underlying server toolkit powering SolidStart, provides helpers to simplify cookie management. See the [Vinxi Cookies documentation](https://vinxi.vercel.app/api/server/cookies.html) for more information. ```ts import { createMiddleware } from \"@solidjs/start/middleware\"; import { getCookie, setCookie } from \"vinxi/http\"; export default createMiddleware({ onRequest: (event) =\u003e { // Reading a cookie const theme = getCookie(event.nativeEvent, \"theme\"); // Setting a secure session cookie with expiration setCookie(event.nativeEvent, \"session\", \"abc123\", { httpOnly: true, secure: true, maxAge: 60 * 60 * 24, // 1 day }); }, }); ``` ## Custom responses Returning a value from a middleware function immediately terminates the request processing pipeline and sends the returned value as the response to the client. This means no further middleware functions or route handlers will be executed. ```ts import { createMiddleware } from \"@solidjs/start/middleware\"; export default createMiddleware({ onRequest: () =\u003e { return new Response(\"Unauthorized\", { status: 401 }); }, }); ``` Only [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) objects can be returned from middleware functions. Returning any other value will result in an error. ### Redirects [Solid Router](/solid-router) provides the [`redirect` helper function](/solid-router/reference/response-helpers/redirect) which simplifies creating redirect responses. ```ts import { createMiddleware } from \"@solidjs/start/middleware\"; import { redirect } from \"@solidjs/router\"; const REDIRECT_MAP: Record\u003cstring, string\u003e = { \"/signup\": \"/auth/signup\", \"/login\": \"/auth/login\", }; export default createMiddleware({ onRequest: (event) =\u003e { const { pathname } = new URL(event.request.url); // Redirecting legacy routes permanently to new paths if (pathname in REDIRECT_MAP) { return redirect(REDIRECT_MAP[pathname], 301); } }, }); ``` This example checks the requested path and returns a redirect response if it matches a predefined path. The 301 status code indicates a permanent redirect. Other redirect status codes (e.g., 302, 307) are available as needed. ### JSON responses Solid Router provides the [`json` helper function](/solid-router/reference/response-helpers/json) which simplifies sending custom JSON responses. ```ts import { createMiddleware } from \"@solidjs/start/middleware\"; import { json } from \"@solidjs/router\"; export default createMiddleware({ onRequest: (event) =\u003e { // Rejecting unauthorized API requests with a JSON error const authHeader = event.request.headers.get(\"Authorization\"); if (!authHeader) { return json({ error: \"Unauthorized\" }, { status: 401 }); } }, }); ``` ## Chaining middleware functions `onRequest` and `onBeforeResponse` options in `createMiddleware` can accept either a single function or an array of middleware functions. When an array is provided, these functions execute sequentially within the same lifecycle event. This enables composing smaller, more-focused middleware functions, rather than handling all logic in a single, large middleware function. ```ts import { createMiddleware } from \"@solidjs/start/middleware\"; import { type FetchEvent } from \"@solidjs/start/server\"; function middleware1(event: FetchEvent) { event.request.headers.set(\"x-custom-header1\", \"hello-from-middleware1\"); } function middleware2(event: FetchEvent) { event.request.headers.set(\"x-custom-header2\", \"hello-from-middleware2\"); } export default createMiddleware({ onRequest: [middleware1, middleware2], }); ``` The order of middleware functions in the array determines their execution order. Dependent middleware functions should be placed after the middleware functions they rely on. For example, authentication middleware should typically run before logging middleware.", "term_freq": { "##": 9, "###": 4, "**": 7, "**after**": 1, "**authorization": 1, "**before**": 1, "**database": 1, "**global": 1, "**heavy": 1, "**request": 2, "**server-side": 1, "---": 2, "//": 8, "//developer": 2, "//github": 1, "//vinxi": 2, "/auth/login": 1, "/auth/signup": 1, "/login": 1, "/reference/server-utilities/get-request-event": 1, "/signup": 1, "/solid-router": 1, "/solid-router/reference/response-helpers/json": 1, "/solid-router/reference/response-helpers/redirect": 1, "/solid-start/reference/server/create-middleware": 1, "24": 1, "301": 2, "302": 1, "307": 1, "401": 2, "60": 2, "\u003c/div\u003e": 1, "\u003c/p\u003e": 1, "\u003cbutton": 1, "\u003cdiv\u003e": 1, "\u003cp\u003ename": 1, "=\u003e": 13, "\u003e-": 2, "\u003esay": 1, "@solidjs/router": 3, "@solidjs/start/config": 1, "@solidjs/start/middleware": 8, "@solidjs/start/server": 1, "_not_": 1, "abc123": 1, "accept": 1, "access": 1, "accessed": 2, "accessible": 1, "across": 3, "adding": 1, "address": 1, "after": 2, "afterward": 1, "agent": 1, "alert": 1, "all": 1, "allowing": 1, "allows": 2, "also": 1, "an": 3, "and": 20, "any": 4, "api": 5, "app": 4, "app/api/server/cookies": 1, "application": 3, "applications": 1, "applied": 2, "are": 8, "array": 3, "as": 7, "async": 1, "at": 2, "authentication": 6, "authheader": 2, "authorization": 3, "automatically": 1, "available": 2, "avoid": 1, "background": 1, "based": 2, "basic": 1, "be": 9, "been": 1, "before": 4, "beginning": 1, "behaviour": 1, "best": 1, "better": 2, "between": 1, "blocking": 1, "body": 1, "bottlenecks": 1, "built-in": 1, "but": 1, "by": 5, "cache-control": 1, "caching": 1, "calculations": 1, "calls": 1, "can": 9, "cases": 2, "certain": 1, "chaining": 1, "characteristics": 1, "checks": 2, "cleared": 1, "client": 6, "client-side": 1, "close": 1, "code": 2, "codes": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/advanced/middleware": 1, "common": 2, "complex": 1, "composing": 1, "computation": 1, "config": 2, "configuration": 2, "configured": 1, "connections": 1, "console": 2, "const": 10, "content-security-policy": 1, "context": 1, "contexts": 1, "control": 1, "cookie": 4, "cookies": 3, "cpu-intensive": 1, "create": 2, "createasync": 2, "created": 1, "createmiddleware": 18, "creating": 1, "custom": 5, "data": 11, "database": 3, "date": 2, "day": 1, "debugging": 1, "declared": 1, "dedicated": 2, "default": 10, "defineconfig": 2, "defines": 1, "dependent": 1, "description": 1, "determines": 1, "different": 1, "direct": 1, "directly": 2, "documentation": 1, "does": 1, "downstream": 1, "duration": 2, "during": 2, "early": 1, "either": 1, "enables": 2, "endtime": 2, "error": 3, "errors": 1, "especially": 1, "event": 40, "events": 2, "every": 1, "example": 2, "execute": 3, "executed": 1, "executes": 1, "execution": 1, "expiration": 1, "export": 10, "exporting": 1, "exposing": 1, "external": 1, "feature": 1, "fetchevent": 3, "file": 2, "finalized": 1, "finalizing": 1, "flags": 1, "follow": 1, "for": 13, "from": 18, "function": 11, "functions": 11, "further": 1, "geolocation": 1, "get": 2, "getcookie": 2, "getrequestevent": 3, "getuser": 2, "github-document": 1, "global": 1, "greeting": 2, "handled": 4, "handler": 4, "handlers": 5, "handling": 2, "harder": 1, "has": 1, "header": 5, "headers": 22, "hello": 4, "hello-from-middleware1": 1, "hello-from-middleware2": 1, "hello\u003c/button\u003e": 1, "helper": 2, "helpers": 1, "here": 1, "hold": 1, "html": 1, "http": 4, "httponly": 1, "https": 5, "ideal": 2, "ids": 1, "if": 3, "immediately": 1, "impacting": 1, "implement": 1, "import": 15, "improve": 1, "in": 13, "include": 1, "indicates": 1, "information": 2, "interactions": 1, "intercept": 1, "interception": 1, "interceptors": 1, "intercepts": 1, "interface": 1, "is": 14, "it": 5, "javascript": 2, "jobs": 1, "john": 1, "json": 6, "key": 1, "large": 1, "later": 2, "layer": 1, "lead": 1, "legacy": 1, "lifecycle": 5, "lightweight": 2, "like": 2, "limitations": 1, "locale": 1, "locals": 15, "log": 3, "logging": 5, "logic": 1, "long-running": 2, "maintain": 1, "maintainability": 1, "make": 1, "management": 5, "manipulated": 1, "matches": 1, "maxage": 1, "mdx": 1, "means": 2, "metadata": 2, "methods": 1, "metrics": 1, "middleware": 33, "middleware1": 2, "middleware2": 2, "might": 1, "modified": 2, "modify": 3, "modifying": 1, "more": 2, "more-focused": 1, "mozilla": 2, "ms": 1, "must": 1, "name": 5, "nativeevent": 2, "navigations": 1, "need": 2, "needed": 1, "new": 3, "no": 1, "normalizing": 1, "now": 2, "object": 8, "objects": 2, "of": 8, "often": 1, "on": 5, "onbeforeresponse": 7, "onclick=": 1, "only": 2, "onrequest": 13, "operations": 2, "options": 1, "or": 18, "order": 2, "org/en-us/docs/web/api/headers": 1, "org/en-us/docs/web/api/response": 1, "other": 7, "override": 1, "page": 1, "parameters": 1, "parts": 2, "passing": 1, "path": 3, "pathname": 3, "paths": 2, "perform": 4, "performance": 3, "performed": 1, "performing": 1, "permanent": 1, "permanently": 1, "pipeline": 1, "place": 2, "placed": 1, "plain": 1, "points": 1, "possible": 1, "post-processing": 1, "potential": 1, "powerful": 1, "powering": 1, "predefined": 1, "preprocessing": 4, "processed": 1, "processes": 3, "processing": 2, "properties": 1, "provided": 1, "provides": 4, "queries": 1, "queries/actions": 2, "query": 3, "quickly": 1, "rather": 1, "reading": 2, "reading/updating": 1, "reasons": 1, "received": 1, "recognize": 1, "record\u003cstring": 1, "redirect": 8, "redirect_map": 3, "redirecting": 1, "redirection": 1, "redirects": 4, "rejecting": 1, "rely": 1, "relying": 1, "request": 26, "request-related": 1, "request-scoped": 5, "request-specific": 1, "request/response": 1, "requested": 1, "requests": 3, "response": 15, "responses": 5, "result": 2, "return": 6, "returned": 2, "returning": 2, "returns": 1, "route": 9, "router": 2, "routes": 3, "run": 2, "same": 1, "sayhello": 2, "secure": 2, "security": 3, "see": 1, "sending": 2, "sends": 1, "sent": 1, "sequentially": 1, "server": 2, "server-only": 2, "server-side": 6, "session": 2, "set": 9, "set-cookie": 1, "setcookie": 2, "setting": 1, "share": 2, "sharing": 4, "should": 5, "significant": 1, "simplifies": 2, "simplify": 1, "single": 3, "smaller": 1, "solid": 2, "solid-js/web": 1, "solidstart": 2, "some": 1, "source": 1, "specific": 1, "src/middleware/index": 3, "src/routes/index": 1, "standard": 1, "starttime": 2, "state": 1, "status": 6, "storage": 1, "store": 1, "stored": 1, "storing": 1, "string\u003e": 1, "such": 2, "tags": 1, "tasks": 5, "temporary": 1, "terminates": 1, "than": 1, "that": 1, "the": 47, "their": 1, "them": 1, "theme": 2, "there": 1, "these": 3, "they": 1, "this": 11, "through": 1, "throughout": 1, "title": 1, "title=": 3, "to": 19, "tokens": 1, "took": 1, "toolkit": 1, "trace": 1, "triggered": 2, "true": 2, "ts": 14, "tsx": 2, "two": 1, "type": 1, "typically": 1, "unauthorized": 3, "underlying": 1, "url": 3, "usage": 1, "use": 6, "use_cases": 1, "useful": 1, "user": 10, "user-agent": 1, "useragent": 1, "users": 1, "using": 4, "utilities": 3, "validating": 1, "value": 4, "various": 1, "vercel": 2, "version": 1, "vinxi": 2, "vinxi/http": 1, "vulnerability": 1, "web": 2, "when": 2, "which": 3, "while": 2, "wick": 1, "will": 3, "with": 3, "within": 5, "would": 1, "x-custom-header1": 1, "x-custom-header2": 1, "x-custom-request-header": 1, "x-custom-response-header1": 1, "x-custom-response-header2": 1, "your": 3 }, "length": 1354 }, { "id": "f0b83b08c29ab341011e89ea", "doc_id": "1667c3ec4c8cf00f2c593623", "title": "migration", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/guides/migration.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/migration.json", "content": "--- title: Migration from v0.9.x use_cases: \u003e- upgrading from v0.9, breaking changes, api migration, updating legacy code, version upgrade tags: - migration - upgrade - breaking-changes - v0.10 - api-changes - legacy version: '1.0' description: \u003e- Migrate your Solid Router application to v0.10 with this comprehensive guide covering removed APIs, new patterns, and Islands support changes. --- v0.10.0 brings some big changes to support the future of routing including Islands/Partial Hydration hybrid solutions. Most notably there is no Context API available in non-hydrating parts of the application. The biggest changes are around _removed APIs_ that need to be replaced. ## `\u003cOutlet\u003e`, `\u003cRoutes\u003e`, `useRoutes` These components are no longer present in the new router version. Instead, `props.children` is passed into the page components in the place of outlets. This keeps the outlet directly passed from its page and avoids trying to use context across Islands boundaries. Similarly, nested `\u003cRoutes\u003e` components cause waterfalls and are `\u003cOutlets\u003e` themselves thus sharing the same concerns. With no `\u003cRoutes\u003e` means the `\u003cRouter\u003e` API has changed. The `\u003cRouter\u003e` component acts as the `\u003cRoutes\u003e` component now and its children must now be `\u003cRoute\u003e` components. The top-level layout should go in the root prop of the router [as shown here](/solid-router/concepts/layouts#root-level-layouts). ## `element` prop removed from `Route` Related without Outlet component it has to be passed in manually. At which point the `element` prop has less value. Removing the second way to define route components to reduce confusion and edge cases. ## `data` functions \u0026 `useRouteData` `data` functions \u0026 `useRouteData` have been replaced by a load mechanism. This allows link hover preloads, since the preload function can be run as much as wanted without worrying about reactivity. This supports deduping/cache APIs which give more control over how things are cached. It also addresses TypeScript issues with getting the right types in the Component without `typeof` checks. That being said the old pattern can be reproduced by turning off preloads at the router level and then injecting your own Context: ```js import { lazy } from \"solid-js\"; import { Router, Route } from \"@solidjs/router\"; const User = lazy(() =\u003e import(\"./pages/users/[id].js\")); // preload function function preloadUser({ params, location }) { const [user] = createResource(() =\u003e params.id, fetchUser); return user; } // Pass it in the route definition \u003cRouter preload={false}\u003e \u003cRoute path=\"/users/:id\" component={User} preload={preloadUser} /\u003e \u003c/Router\u003e; ``` And then in your component taking the page props and putting them in a Context. ```js import { createContext, useContext } from \"solid-js\"; const UserContext = createContext(); function User(props) { \u003cUserContext.Provider value={props.data()}\u003e {/* my component content that includes \u003cUserDetails /\u003e in any depth */} \u003c/UserContext.Provider\u003e; } function UserDetails() { const user = useContext(UserContext); // render stuff } ```", "term_freq": { "##": 3, "*/": 1, "---": 2, "/*": 1, "//": 3, "//github": 1, "/\u003e": 2, "/pages/users/": 1, "/solid-router/concepts/layouts#root-level-layouts": 1, "/users/": 1, "10": 3, "\u003c/router\u003e": 1, "\u003c/usercontext": 1, "\u003coutlet\u003e": 1, "\u003coutlets\u003e": 1, "\u003croute": 1, "\u003croute\u003e": 1, "\u003crouter": 1, "\u003crouter\u003e": 2, "\u003croutes\u003e": 4, "\u003cusercontext": 1, "\u003cuserdetails": 1, "=\u003e": 2, "\u003e-": 2, "@solidjs/router": 1, "_removed": 1, "about": 1, "across": 1, "acts": 1, "addresses": 1, "allows": 1, "also": 1, "and": 8, "any": 1, "api": 3, "api-changes": 1, "apis": 2, "apis_": 1, "application": 2, "are": 4, "around": 1, "as": 4, "at": 2, "available": 1, "avoids": 1, "be": 5, "been": 1, "being": 1, "big": 1, "biggest": 1, "boundaries": 1, "breaking": 1, "breaking-changes": 1, "brings": 1, "by": 2, "cached": 1, "can": 2, "cases": 1, "cause": 1, "changed": 1, "changes": 4, "checks": 1, "children": 2, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/guides/migration": 1, "component": 6, "component=": 1, "components": 5, "comprehensive": 1, "concerns": 1, "confusion": 1, "const": 4, "content": 1, "context": 4, "control": 1, "covering": 1, "createcontext": 2, "createresource": 1, "data": 3, "deduping/cache": 1, "define": 1, "definition": 1, "depth": 1, "description": 1, "directly": 1, "edge": 1, "element": 2, "false": 1, "fetchuser": 1, "from": 7, "function": 5, "functions": 2, "future": 1, "getting": 1, "github-document": 1, "give": 1, "go": 1, "guide": 1, "has": 3, "have": 1, "here": 1, "hover": 1, "how": 1, "https": 1, "hybrid": 1, "hydration": 1, "id": 3, "import": 4, "in": 10, "includes": 1, "including": 1, "injecting": 1, "instead": 1, "into": 1, "is": 2, "islands": 2, "islands/partial": 1, "issues": 1, "it": 3, "its": 2, "js": 3, "keeps": 1, "layout": 1, "lazy": 2, "legacy": 2, "less": 1, "level": 1, "link": 1, "load": 1, "location": 1, "longer": 1, "manually": 1, "mdx": 1, "means": 1, "mechanism": 1, "migrate": 1, "migration": 4, "more": 1, "most": 1, "much": 1, "must": 1, "my": 1, "need": 1, "nested": 1, "new": 2, "no": 3, "non-hydrating": 1, "notably": 1, "now": 2, "of": 4, "off": 1, "old": 1, "outlet": 2, "outlets": 1, "over": 1, "own": 1, "page": 3, "params": 2, "parts": 1, "pass": 1, "passed": 3, "path=": 1, "pattern": 1, "patterns": 1, "place": 1, "point": 1, "preload": 2, "preload=": 2, "preloads": 2, "preloaduser": 2, "present": 1, "prop": 3, "props": 4, "provider": 1, "provider\u003e": 1, "putting": 1, "reactivity": 1, "reduce": 1, "related": 1, "removed": 2, "removing": 1, "render": 1, "replaced": 2, "reproduced": 1, "return": 1, "right": 1, "root": 1, "route": 4, "router": 5, "routing": 1, "run": 1, "said": 1, "same": 1, "second": 1, "sharing": 1, "should": 1, "shown": 1, "similarly": 1, "since": 1, "solid": 1, "solid-js": 2, "solutions": 1, "some": 1, "stuff": 1, "support": 2, "supports": 1, "tags": 1, "taking": 1, "that": 3, "the": 23, "them": 1, "themselves": 1, "then": 2, "there": 1, "these": 1, "things": 1, "this": 4, "thus": 1, "title": 1, "to": 7, "top-level": 1, "trying": 1, "turning": 1, "typeof": 1, "types": 1, "typescript": 1, "updating": 1, "upgrade": 2, "upgrading": 1, "use": 1, "use_cases": 1, "usecontext": 2, "user": 6, "usercontext": 2, "userdetails": 1, "useroutedata": 2, "useroutes": 1, "v0": 5, "value": 1, "value=": 1, "version": 3, "wanted": 1, "waterfalls": 1, "way": 1, "which": 2, "with": 3, "without": 3, "worrying": 1, "your": 3 }, "length": 438 }, { "id": "24926cab70193f779d766f1e", "doc_id": "3a62f93f0686a05a6100093e", "title": "modify-mutable", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/store-utilities/modify-mutable.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/modify-mutable.json", "content": "--- title: modifyMutable use_cases: \u003e- batch updates, mutable store modifications, performance optimization, multiple field changes, reconciliation tags: - store - mutable - batch - performance - updates version: '1.0' description: \u003e- Batch multiple mutable store changes with modifyMutable. Update multiple fields in one render cycle for better performance. --- `modifyMutable` streamlines the process of making multiple changes to a mutable Store, as obtained through the use of [`createMutable`](/reference/store-utilities/create-mutable). It operates within a single [`batch`](/reference/reactive-utilities/batch), ensuring that dependent computations are updated just once, rather than triggering updates for each individual change. ```tsx import { modifyMutable } from \"solid-js/store\" function modifyMutable\u003cT\u003e(mutable: T, modifier: (state: T) =\u003e T): void ``` The function takes two arguments: 1. The first argument is the mutable Store that needs modification. 2. The second argument is a Store modifier, which could be one of those returned by [`reconcile`](/reference/store-utilities/reconcile). :::caution When passing in your own modifier function, it's important to be aware that its argument is an unwrapped version of the store. ::: For example, if the UI depends on multiple fields of a mutable: ```tsx import { createMutable } from \"solid-js/store\" const state = createMutable({ user: { firstName: \"John\", lastName: \"Smith\", }, }); \u003ch1\u003eHello {state.user.firstName + \" \" + state.user.lastName}\u003c/h1\u003e; ``` Modifying n fields in sequence will cause the UI to update n times: ```tsx state.user.firstName = \"Jane\"; state.user.lastName = \"Doe\"; ``` To trigger just a single update, the fields can be modified using a `batch`: ```tsx import { batch } from \"solid-js\" batch(() =\u003e { state.user.firstName = \"Jane\"; state.user.lastName = \"Doe\"; }); ``` `modifyMutable` combined with [`reconcile`](/reference/store-utilities/reconcile) or [`produce`](/reference/store-utilities/produce) provides two alternate ways to do similar things: ```tsx import { modifyMutable, reconcile } from \"solid-js/store\" // Replace state.user with the specified object (deleting any other fields) modifyMutable( state.user, reconcile({ firstName: \"Jane\", lastName: \"Doe\", }) ); ``` ```tsx import { modifyMutable, produce } from \"solid-js/store\" // Modify two fields in a batch, triggering just one update modifyMutable( state, produce((state) =\u003e { state.user.firstName = \"Jane\"; state.user.lastName = \"Doe\"; }) ); ```", "term_freq": { "---": 2, "//": 2, "//github": 1, "/reference/reactive-utilities/batch": 1, "/reference/store-utilities/create-mutable": 1, "/reference/store-utilities/produce": 1, "/reference/store-utilities/reconcile": 2, "\u003c/h1\u003e": 1, "\u003ch1\u003ehello": 1, "=\u003e": 3, "\u003e-": 2, "alternate": 1, "an": 1, "any": 1, "are": 1, "argument": 3, "arguments": 1, "as": 1, "aware": 1, "batch": 8, "be": 3, "better": 1, "by": 1, "can": 1, "cause": 1, "caution": 1, "change": 1, "changes": 3, "com/solidjs/solid-docs/blob/head/src/routes/reference/store-utilities/modify-mutable": 1, "combined": 1, "computations": 1, "const": 1, "could": 1, "createmutable": 3, "cycle": 1, "deleting": 1, "dependent": 1, "depends": 1, "description": 1, "do": 1, "doe": 4, "each": 1, "ensuring": 1, "example": 1, "field": 1, "fields": 6, "first": 1, "firstname": 6, "for": 3, "from": 5, "function": 3, "github-document": 1, "https": 1, "if": 1, "import": 5, "important": 1, "in": 4, "individual": 1, "is": 3, "it": 2, "its": 1, "jane": 4, "john": 1, "just": 3, "lastname": 6, "making": 1, "mdx": 1, "modification": 1, "modifications": 1, "modified": 1, "modifier": 3, "modify": 1, "modify-mutable": 1, "modifying": 1, "modifymutable": 9, "modifymutable\u003ct\u003e": 1, "multiple": 5, "mutable": 7, "needs": 1, "object": 1, "obtained": 1, "of": 5, "on": 1, "once": 1, "one": 3, "operates": 1, "optimization": 1, "or": 1, "other": 1, "own": 1, "passing": 1, "performance": 3, "process": 1, "produce": 3, "provides": 1, "rather": 1, "reconcile": 4, "reconciliation": 1, "render": 1, "replace": 1, "returned": 1, "second": 1, "sequence": 1, "similar": 1, "single": 2, "smith": 1, "solid-js": 1, "solid-js/store": 4, "specified": 1, "state": 14, "store": 7, "streamlines": 1, "tags": 1, "takes": 1, "than": 1, "that": 3, "the": 11, "things": 1, "those": 1, "through": 1, "times": 1, "title": 1, "to": 5, "trigger": 1, "triggering": 2, "tsx": 6, "two": 3, "ui": 2, "unwrapped": 1, "update": 4, "updated": 1, "updates": 3, "use": 1, "use_cases": 1, "user": 11, "using": 1, "version": 2, "void": 1, "ways": 1, "when": 1, "which": 1, "will": 1, "with": 3, "within": 1, "your": 1 }, "length": 306 }, { "id": "f13fb76adac8c8656e59eab4", "doc_id": "84ee1b1b3bd0ac9ab72bcaee", "title": "mount", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/client/mount.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/mount.json", "content": "--- title: mount use_cases: \u003e- app initialization, entry point setup, bootstrapping, client rendering, hydration control tags: - mount - hydration - rendering - initialization - entry-client version: '1.0' description: \u003e- Bootstrap your SolidStart application with mount. Automatically handles hydration for SSR or client-only rendering modes. --- `mount` is a method that calls either [`hydrate`](/reference/rendering/hydrate) (server rendering) or [`render`](/reference/rendering/render) (client rendering) depending on the configuration. It is used in [`entry-client.tsx`](/solid-start/reference/entrypoints/entry-client) to bootstrap an application. ```tsx import { mount, StartClient } from \"@solidjs/start/client\"; mount(() =\u003e \u003cStartClient /\u003e, document.getElementById(\"app\")!); ``` If you set `{ ssr: false }` in the [`defineConfig`](/solid-start/reference/config/define-config), effectively deactivating hydration, then `mount` becomes the same as [`render`](/reference/rendering/render). ## Parameters | Prop | type | description | | ---- | ----------------- | ------------------------------------------- | | fn | () =\u003e JSX.Element | Function that returns the application code. | | el | MountableElement | DOM Element to mount the application to |", "term_freq": { "##": 1, "---": 2, "----": 1, "-----------------": 1, "-------------------------------------------": 1, "//github": 1, "/\u003e": 1, "/reference/rendering/hydrate": 1, "/reference/rendering/render": 2, "/solid-start/reference/config/define-config": 1, "/solid-start/reference/entrypoints/entry-client": 1, "\u003cstartclient": 1, "=\u003e": 2, "\u003e-": 2, "@solidjs/start/client": 1, "an": 1, "app": 2, "application": 4, "as": 1, "automatically": 1, "becomes": 1, "bootstrap": 2, "bootstrapping": 1, "calls": 1, "client": 2, "client-only": 1, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/client/mount": 1, "configuration": 1, "control": 1, "deactivating": 1, "defineconfig": 1, "depending": 1, "description": 2, "document": 1, "dom": 1, "effectively": 1, "either": 1, "el": 1, "element": 2, "entry": 1, "entry-client": 2, "false": 1, "fn": 1, "for": 1, "from": 1, "function": 1, "getelementbyid": 1, "github-document": 1, "handles": 1, "https": 1, "hydrate": 1, "hydration": 4, "if": 1, "import": 1, "in": 2, "initialization": 2, "is": 2, "it": 1, "jsx": 1, "mdx": 1, "method": 1, "modes": 1, "mount": 9, "mountableelement": 1, "on": 1, "or": 2, "parameters": 1, "point": 1, "prop": 1, "render": 2, "rendering": 5, "returns": 1, "same": 1, "server": 1, "set": 1, "setup": 1, "solidstart": 1, "ssr": 2, "startclient": 1, "tags": 1, "that": 2, "the": 5, "then": 1, "title": 1, "to": 3, "tsx": 2, "type": 1, "use_cases": 1, "used": 1, "version": 1, "with": 1, "you": 1, "your": 1 }, "length": 136 }, { "id": "73d1d226abf9de0a4c9d9025", "doc_id": "d07e6e630fef31f5be9f1ea1", "title": "navigate", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/components/navigate.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/navigate.json", "content": "--- title: Navigate use_cases: \u003e- automatic redirects, programmatic navigation, conditional routing, auth redirects, dynamic routing tags: - component - redirects - navigation - programmatic - dynamic version: '1.0' description: \u003e- Navigate component provides immediate programmatic navigation and redirects, perfect for authentication flows and conditional routing logic. --- Solid Router provides a `Navigate` component that works similarly to [`\u003cA\u003e`](/solid-router/reference/components/a), but it will _immediately_ navigate to the provided path as soon as the component is rendered. It also uses the `href` prop, but with the additional option of passing a function to `href` that returns a path to navigate to: ```jsx function getPath({ navigate, location }) { // navigate is the result of calling useNavigate(); location is the result of calling useLocation(). // You can use those to dynamically determine a path to navigate to return \"/some-path\"; } // Navigating to /redirect will redirect you to the result of getPath \u003cRoute path=\"/redirect\" component={() =\u003e \u003cNavigate href={getPath} /\u003e} /\u003e; ```", "term_freq": { "---": 2, "//": 3, "//github": 1, "/\u003e": 2, "/redirect": 2, "/solid-router/reference/components/a": 1, "/some-path": 1, "\u003ca\u003e": 1, "\u003cnavigate": 1, "\u003croute": 1, "=\u003e": 1, "\u003e-": 2, "_immediately_": 1, "additional": 1, "also": 1, "and": 2, "as": 2, "auth": 1, "authentication": 1, "automatic": 1, "but": 2, "calling": 2, "can": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/components/navigate": 1, "component": 4, "component=": 1, "conditional": 2, "description": 1, "determine": 1, "dynamic": 2, "dynamically": 1, "flows": 1, "for": 1, "function": 2, "getpath": 3, "github-document": 1, "href": 2, "href=": 1, "https": 1, "immediate": 1, "is": 3, "it": 2, "jsx": 1, "location": 2, "logic": 1, "mdx": 1, "navigate": 9, "navigating": 1, "navigation": 3, "of": 4, "option": 1, "passing": 1, "path": 3, "path=": 1, "perfect": 1, "programmatic": 3, "prop": 1, "provided": 1, "provides": 2, "redirect": 1, "redirects": 4, "rendered": 1, "result": 3, "return": 1, "returns": 1, "router": 1, "routing": 3, "similarly": 1, "solid": 1, "soon": 1, "tags": 1, "that": 2, "the": 7, "those": 1, "title": 1, "to": 10, "use": 1, "use_cases": 1, "uselocation": 1, "usenavigate": 1, "uses": 1, "version": 1, "will": 2, "with": 1, "works": 1, "you": 2 }, "length": 152 }, { "id": "0a3a2d6c204a93e05d47a83f", "doc_id": "e472138e3ac6a5b147fb77cf", "title": "navigation", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/navigation.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/navigation.json", "content": "--- title: Navigation use_cases: \u003e- page transitions, programmatic routing, user actions, form submissions, authentication flows, redirects tags: - navigation - links - redirects - routing - programmatic version: '1.0' description: \u003e- Navigate between routes in SolidJS using links, programmatic navigation, and redirects for seamless user experiences. --- When using Solid Router, you can use the standard standard HTML [`\u003ca\u003e` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), which triggers [soft navigation](/solid-router/reference/components/a#soft-navigation). In addition to using this, Solid Router offers other options for navigating between routes: - The [`\u003cA\u003e` component](/solid-router/reference/components/a). - The [`useNavigate` primitive](/solid-router/reference/primitives/use-navigate). - The [`redirect` function](/solid-router/reference/response-helpers/redirect). ## `\u003cA\u003e` component The `\u003cA\u003e` component extends the native `\u003ca\u003e` element by automatically applying the base URL path and, additionally, supports relative paths. ```tsx import { A } from \"@solidjs/router\"; function DashboardPage() { return ( \u003cmain\u003e \u003cnav\u003e \u003cA href=\"/\"\u003eHome\u003c/A\u003e \u003c/nav\u003e {/* This is a relative path that, from /dashboard, links to /dashboard/users */} \u003cA href=\"users\"\u003eUsers\u003c/A\u003e \u003c/main\u003e ); } ``` See the [`\u003cA\u003e` API reference](/solid-router/reference/components/a) for more information. ### Styling The `\u003cA\u003e` component allows you to style links based on their active state using the `activeClass` and `inactiveClass` props. When provided, these props apply the corresponding CSS classes to the link. If omitted, the default classes `active` and `inactive` are used. By default, a link is considered active when the current route matches the link's `href` or any of its descendant routes. For example, a link with `href=\"/dashboard\"` is active when the current route is `/dashboard`, `/dashboard/users`, or `/dashboard/users/1/profile`. To match an exact route, the prop `end` can be used. When `true`, it ensures that the link is only considered active if the `href` exactly matches the current route. This is useful for root route links (href=\"/\"), which might otherwise match all routes. ```tsx import { A } from \"@solidjs/router\"; function Navbar() { return ( \u003cnav\u003e \u003cA href=\"/\" end={true}\u003e Home \u003c/A\u003e \u003cA href=\"/login\" activeClass=\"text-blue-900\" inactiveClass=\"text-blue-500\" \u003e Login \u003c/A\u003e \u003c/nav\u003e ); } ``` ## `useNavigate` primitive The `useNavigate` primitive allows for programmatically navigating to a specified route. ```tsx import { useNavigate } from \"@solidjs/router\"; function LoginPage() { const navigate = useNavigate(); return ( \u003cbutton onClick={() =\u003e { // Login logic navigate(\"/dashboard\", { replace: true }); }} \u003e Login \u003c/button\u003e ); } ``` This example redirects the user to `/dashboard` after login. By using `replace: true`, the login page is removed from the browser's history stack and replaced with the `/dashboard` route. This prevents the user from navigating back to the login page using the back button. See the [`useNavigate` API reference](/solid-router/reference/primitives/use-navigate) for more information. ## `redirect` function The `redirect` function returns a [`Response` object](https://developer.mozilla.org/en-US/docs/Web/API/Response), which enables navigation to a specified route within [query](/solid-router/reference/data-apis/query) or [action](/solid-router/reference/data-apis/action). ```tsx import { action, redirect } from \"@solidjs/router\"; const logout = action(async () =\u003e { localStorage.remove(\"token\"); throw redirect(\"/\"); }); ``` See the [`redirect` API reference](/solid-router/reference/response-helpers/redirect) for more information.", "term_freq": { "##": 3, "###": 1, "*/": 1, "---": 2, "/*": 1, "//": 1, "//developer": 2, "//github": 1, "/dashboard": 6, "/dashboard/users": 2, "/dashboard/users/1/profile": 1, "/login": 1, "/solid-router/reference/components/a": 2, "/solid-router/reference/components/a#soft-navigation": 1, "/solid-router/reference/data-apis/action": 1, "/solid-router/reference/data-apis/query": 1, "/solid-router/reference/primitives/use-navigate": 2, "/solid-router/reference/response-helpers/redirect": 2, "\u003c/a\u003e": 2, "\u003c/button\u003e": 1, "\u003c/main\u003e": 1, "\u003c/nav\u003e": 2, "\u003ca": 4, "\u003ca\u003e": 7, "\u003cbutton": 1, "\u003cmain\u003e": 1, "\u003cnav\u003e": 2, "=\u003e": 2, "\u003e-": 2, "\u003ehome\u003c/a\u003e": 1, "\u003eusers\u003c/a\u003e": 1, "@solidjs/router": 4, "action": 3, "actions": 1, "active": 5, "activeclass": 1, "activeclass=": 1, "addition": 1, "additionally": 1, "after": 1, "all": 1, "allows": 2, "an": 1, "and": 5, "any": 1, "api": 3, "apply": 1, "applying": 1, "are": 1, "async": 1, "authentication": 1, "automatically": 1, "back": 2, "base": 1, "based": 1, "be": 1, "between": 2, "browser": 1, "button": 1, "by": 3, "can": 2, "classes": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/concepts/navigation": 1, "component": 4, "considered": 2, "const": 2, "corresponding": 1, "css": 1, "current": 3, "dashboardpage": 1, "default": 2, "descendant": 1, "description": 1, "element": 1, "elements": 1, "enables": 1, "end": 1, "end=": 1, "ensures": 1, "exact": 1, "exactly": 1, "example": 2, "experiences": 1, "extends": 1, "flows": 1, "for": 8, "form": 1, "from": 7, "function": 6, "github-document": 1, "history": 1, "home": 1, "href": 2, "href=": 6, "html": 1, "https": 3, "if": 2, "import": 4, "in": 2, "inactive": 1, "inactiveclass": 1, "inactiveclass=": 1, "information": 3, "is": 7, "it": 1, "its": 1, "link": 5, "links": 5, "localstorage": 1, "logic": 1, "login": 6, "loginpage": 1, "logout": 1, "match": 2, "matches": 2, "mdx": 1, "might": 1, "more": 3, "mozilla": 2, "native": 1, "navbar": 1, "navigate": 3, "navigating": 3, "navigation": 6, "object": 1, "of": 1, "offers": 1, "omitted": 1, "on": 1, "onclick=": 1, "only": 1, "options": 1, "or": 3, "org/en-us/docs/web/api/response": 1, "org/en-us/docs/web/html/element/a": 1, "other": 1, "otherwise": 1, "page": 3, "path": 2, "paths": 1, "prevents": 1, "primitive": 3, "programmatic": 3, "programmatically": 1, "prop": 1, "props": 2, "provided": 1, "query": 1, "redirect": 6, "redirects": 4, "reference": 3, "relative": 2, "remove": 1, "removed": 1, "replace": 2, "replaced": 1, "response": 1, "return": 3, "returns": 1, "root": 1, "route": 8, "router": 2, "routes": 4, "routing": 2, "seamless": 1, "see": 3, "soft": 1, "solid": 2, "solidjs": 1, "specified": 2, "stack": 1, "standard": 2, "state": 1, "style": 1, "styling": 1, "submissions": 1, "supports": 1, "tags": 1, "text-blue-500": 1, "text-blue-900": 1, "that": 2, "the": 31, "their": 1, "these": 1, "this": 5, "throw": 1, "title": 1, "to": 9, "token": 1, "transitions": 1, "triggers": 1, "true": 4, "tsx": 4, "url": 1, "use": 1, "use_cases": 1, "used": 2, "useful": 1, "usenavigate": 6, "user": 4, "users": 1, "using": 6, "version": 1, "when": 5, "which": 3, "with": 2, "within": 1, "you": 2 }, "length": 444 }, { "id": "1d5ed8932ee4a942c4495a5a", "doc_id": "725e4325edf011653d9ebe68", "title": "nesting", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/nesting.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/nesting.json", "content": "--- title: Nesting routes use_cases: \u003e- hierarchical pages, parent-child relationships, shared layouts, complex routing structures, admin sections tags: - nesting - hierarchy - routing - layouts - config version: '1.0' description: \u003e- Build nested route hierarchies in SolidJS for complex applications with parent-child relationships and shared layouts. --- Nested routes are a way to create a hierarchy of routes in your application. This is useful for creating a [layout](/solid-router/concepts/layouts) that is consistent across multiple pages, or for creating a relationship between pages that are related to each other. In Solid Router, the following two route definitions have the same result: ```jsx \u003cRoute path=\"/users/:id\" component={User} /\u003e // is equivalent to \u003cRoute path=\"/users\"\u003e \u003cRoute path=\"/:id\" component={User} /\u003e \u003c/Route\u003e ``` In both cases, the `User` component will render when the URL is `/users/:id`. The difference, however, is that in the first case, `/users/:id` is the only route, and in the second case, `/users` is also a route. **Note:** visit the [config-based nesting](#config-based-nesting) section for more information on how to nest routes using the configuration-based approach. ## Limitations When nesting routes, only the innermost `Route` component will become its own route. For example, if you were to nest a route, only the innermost route will become its own route, even if the parent routes are also specified and provided with a component: ```jsx \u003cRoute path=\"/users\" component={Users}\u003e \u003cRoute path=\"/:id\" component={User} /\u003e \u003c/Route\u003e ``` For a parent route to become its own route, it must be specified separately. This can be done by explicitly defining the parent route as well as the nested route: ```jsx \u003cRoute path=\"/users\" component={Users} /\u003e \u003cRoute path=\"/users/:id\" component={User} /\u003e ``` Another way to achieve the same result is to nest the routes and explicitly define the parent route through the use of an empty path, and then specify the nested route: ```jsx \u003cRoute path=\"/users\"\u003e \u003cRoute path=\"/\" component={Users} /\u003e \u003cRoute path=\"/:id\" component={User} /\u003e \u003c/Route\u003e ``` In both cases, the `Users` component will render when the URL is `/users`, and the `User` component will render when the URL is `/users/:id`. ## Config-based nesting When using configuration-based routing, nesting can be achieved through passing your route definitions into the `children` property of a parent route definition object: ```jsx import { render } from \"solid-js/web\"; import { Router } from \"@solidjs/router\"; const routes = { path: \"/\", component: lazy(() =\u003e import(\"/routes/index.js\")), children: [ { path: \"/users\", component: lazy(() =\u003e import(\"/routes/users.js\")), children: [ { path: \"/:id\", component: lazy(() =\u003e import(\"/routes/user.js\")), }, ], }, ], }; render(() =\u003e \u003cRouter\u003e{routes}\u003c/Router\u003e, document.getElementById(\"app\")); ``` In this example, when you navigate to `/users/:id`, the `User` component will render. Similarly, when you navigate to `/users`, the `Users` component will render.", "term_freq": { "##": 2, "#config-based-nesting": 1, "**": 1, "**note": 1, "---": 2, "//": 1, "//github": 1, "/\u003e": 7, "/routes/index": 1, "/routes/user": 1, "/routes/users": 1, "/solid-router/concepts/layouts": 1, "/users": 8, "/users/": 6, "\u003c/route\u003e": 3, "\u003c/router\u003e": 1, "\u003croute": 10, "\u003crouter\u003e": 1, "=\u003e": 4, "\u003e-": 2, "@solidjs/router": 1, "achieve": 1, "achieved": 1, "across": 1, "admin": 1, "also": 2, "an": 1, "and": 6, "another": 1, "app": 1, "application": 1, "applications": 1, "approach": 1, "are": 3, "as": 2, "be": 3, "become": 3, "between": 1, "both": 2, "build": 1, "by": 1, "can": 2, "case": 2, "cases": 2, "children": 3, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/concepts/nesting": 1, "complex": 2, "component": 10, "component=": 8, "config": 1, "config-based": 2, "configuration-based": 2, "consistent": 1, "const": 1, "create": 1, "creating": 2, "define": 1, "defining": 1, "definition": 1, "definitions": 2, "description": 1, "difference": 1, "document": 1, "done": 1, "each": 1, "empty": 1, "equivalent": 1, "even": 1, "example": 2, "explicitly": 2, "first": 1, "following": 1, "for": 6, "from": 2, "getelementbyid": 1, "github-document": 1, "have": 1, "hierarchical": 1, "hierarchies": 1, "hierarchy": 2, "how": 1, "however": 1, "https": 1, "id": 10, "if": 2, "import": 5, "in": 8, "information": 1, "innermost": 2, "into": 1, "is": 10, "it": 1, "its": 3, "js": 3, "jsx": 5, "layout": 1, "layouts": 3, "lazy": 3, "limitations": 1, "mdx": 1, "more": 1, "multiple": 1, "must": 1, "navigate": 2, "nest": 3, "nested": 4, "nesting": 7, "object": 1, "of": 3, "on": 1, "only": 3, "or": 1, "other": 1, "own": 3, "pages": 3, "parent": 5, "parent-child": 2, "passing": 1, "path": 4, "path=": 10, "property": 1, "provided": 1, "related": 1, "relationship": 1, "relationships": 2, "render": 7, "result": 2, "route": 17, "router": 2, "routes": 9, "routing": 3, "same": 2, "second": 1, "section": 1, "sections": 1, "separately": 1, "shared": 2, "similarly": 1, "solid": 1, "solid-js/web": 1, "solidjs": 1, "specified": 2, "specify": 1, "structures": 1, "tags": 1, "that": 3, "the": 27, "then": 1, "this": 3, "through": 2, "title": 1, "to": 10, "two": 1, "url": 3, "use": 1, "use_cases": 1, "useful": 1, "user": 8, "users": 5, "using": 2, "version": 1, "visit": 1, "way": 2, "well": 1, "were": 1, "when": 7, "will": 7, "with": 2, "you": 3, "your": 2 }, "length": 443 }, { "id": "68dd52af02eb8e2ce6401ad6", "doc_id": "03f258e51952cf21264c632d", "title": "netlify", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deployment-options/netlify.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/netlify.json", "content": "--- title: Netlify order: 4 mainNavExclude: true use_cases: \u003e- static site hosting, continuous deployment, git integration, web publishing, jamstack hosting tags: - netlify - deployment - hosting - git - cli - static version: '1.0' description: \u003e- Deploy Solid apps to Netlify with automatic builds from Git, instant rollbacks, and powerful deployment features included. --- [Netlify](https://www.netlify.com/) is a widely-used hosting platform suitable for various types of projects. For detailed guidance on build procedures, deployment options, and the range of features available, you can visit the [Netlify documentation](https://docs.netlify.com/). ## Using the Netlify web interface 1. Begin by navigating to [Netlify's website](https://app.netlify.com/) and logging in or creating a new Netlify. Once logged in, you will be take to your dashboard. Click the `New site from Git` button to start a new project. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=VMzcD7r0uwLqgogfyqiZZg\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=VMzcD7r0uwLqgogfyqiZZg\u0026type=embed\" /\u003e 2. On the following page, choose \"Connect to GitHub\" or your preferred Git repository hosting service. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=JZWtWwyL9QwUqu6pu4YnZg\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=JZWtWwyL9QwUqu6pu4YnZg\u0026type=embed\" /\u003e 3. After selecting your Solid project repository, you'll be directed to a configuration screen. Update the \"Publish directory\" field from `netlify` to `dist`. Then, click \"Deploy\" to start the deployment process. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=EIP0vYfg7GSc_PElbGGuXA\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=EIP0vYfg7GSc_PElbGGuXA\u0026type=embed\" /\u003e 4. Once the build and deployment are complete, you will be taken to a screen that displays the URL of your live site. ## Using the Netlify CLI 1. Install the Netlify CLI using your preferred package manager: ```package-install-global netlify-cli ``` **Note:** Before proceeding, ensure that your Netlify account and team are fully set up. This is crucial for a seamless project setup and deployment. 2. Open your terminal, navigate to your project directory, and run the `netlify init` command. Authenticate using one of the supported login options. 3. Follow the on-screen instructions from the CLI. When prompted for the 'Directory to deploy,' specify `dist` — this is where Solid stores the built project files. After completing the process, your project will be deployed on Netlify and can be accessed via the provided URL. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=GFp0g1qxMv214z7vjKVYjw\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=GFp0g1qxMv214z7vjKVYjw\u0026type=embed\" /\u003e", "term_freq": { "##": 2, "**": 1, "**note": 1, "---": 2, "//app": 9, "//docs": 1, "//github": 1, "//www": 1, "/\u003e": 4, "\u003ceraserlink": 4, "\u003e-": 2, "accessed": 1, "account": 1, "after": 2, "and": 8, "apps": 1, "are": 2, "authenticate": 1, "automatic": 1, "available": 1, "be": 5, "before": 1, "begin": 1, "build": 2, "builds": 1, "built": 1, "button": 1, "by": 1, "can": 2, "choose": 1, "cli": 4, "click": 2, "com/": 3, "com/solidjs/solid-docs/blob/head/src/routes/guides/deployment-options/netlify": 1, "command": 1, "complete": 1, "completing": 1, "configuration": 1, "connect": 1, "continuous": 1, "creating": 1, "crucial": 1, "dashboard": 1, "deploy": 3, "deployed": 1, "deployment": 7, "description": 1, "detailed": 1, "directed": 1, "directory": 3, "displays": 1, "dist": 2, "documentation": 1, "elements=eip0vyfg7gsc_pelbgguxa": 1, "elements=eip0vyfg7gsc_pelbgguxa\u0026type=embed": 1, "elements=gfp0g1qxmv214z7vjkvyjw": 1, "elements=gfp0g1qxmv214z7vjkvyjw\u0026type=embed": 1, "elements=jzwtwwyl9qwuqu6pu4ynzg": 1, "elements=jzwtwwyl9qwuqu6pu4ynzg\u0026type=embed": 1, "elements=vmzcd7r0uwlqgogfyqizzg": 1, "elements=vmzcd7r0uwlqgogfyqizzg\u0026type=embed": 1, "ensure": 1, "eraser": 8, "features": 2, "field": 1, "files": 1, "follow": 1, "following": 1, "for": 4, "from": 4, "fully": 1, "git": 5, "github": 1, "github-document": 1, "guidance": 1, "hosting": 5, "href=": 4, "https": 12, "in": 2, "included": 1, "init": 1, "install": 1, "instant": 1, "instructions": 1, "integration": 1, "interface": 1, "io/workspace/w9y9pnvjwsqdcepnteoe": 4, "io/workspace/w9y9pnvjwsqdcepnteoe/preview": 4, "is": 3, "jamstack": 1, "live": 1, "ll": 1, "logged": 1, "logging": 1, "login": 1, "mainnavexclude": 1, "manager": 1, "mdx": 1, "navigate": 1, "navigating": 1, "netlify": 18, "netlify-cli": 1, "new": 3, "of": 4, "on": 3, "on-screen": 1, "once": 2, "one": 1, "open": 1, "options": 2, "or": 2, "order": 1, "package": 1, "package-install-global": 1, "page": 1, "platform": 1, "powerful": 1, "preferred": 2, "preview=": 4, "procedures": 1, "proceeding": 1, "process": 2, "project": 6, "projects": 1, "prompted": 1, "provided": 1, "publish": 1, "publishing": 1, "range": 1, "repository": 2, "rollbacks": 1, "run": 1, "screen": 2, "seamless": 1, "selecting": 1, "service": 1, "set": 1, "setup": 1, "site": 3, "solid": 3, "specify": 1, "start": 2, "static": 2, "stores": 1, "suitable": 1, "supported": 1, "tags": 1, "take": 1, "taken": 1, "team": 1, "terminal": 1, "that": 2, "the": 19, "then": 1, "this": 2, "title": 1, "to": 11, "true": 1, "types": 1, "up": 1, "update": 1, "url": 2, "use_cases": 1, "using": 4, "various": 1, "version": 1, "via": 1, "visit": 1, "web": 2, "website": 1, "when": 1, "where": 1, "widely-used": 1, "will": 3, "with": 1, "you": 4, "your": 9, "—": 1 }, "length": 365 }, { "id": "12d10af6a8abed594ab67edd", "doc_id": "dc3cce64548329c22df06949", "title": "Network Concurrency Management | Remix", "url": "https://v2.remix.run/docs/discussion/concurrency", "type": "html", "source": "remix:does", "path": "devour_data/docs/network-concurrency-management---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsNetwork Concurrency ManagementGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageNatural Alignment with Browser BehaviorConcurrent Submissions and RevalidationPotential for Stale DataExampleConclusionOn this pageNatural Alignment with Browser BehaviorConcurrent Submissions and RevalidationPotential for Stale DataExampleConclusionNetwork Concurrency Management When building web applications, managing network requests can be a daunting task. The challenges of ensuring up-to-date data and handling simultaneous requests often lead to complex logic in the application to deal with interruptions and race conditions. Remix simplifies this process by automating network management, mirroring, and expanding the intuitive behavior of web browsers. To help understand how Remix works, remember from Fullstack Data Flow that after form submissions, Remix will fetch fresh data from the loaders. This is called revalidation. Natural Alignment with Browser Behavior Remix's handling of network concurrency is heavily inspired by the default behavior of web browsers when processing documents: Browser Link Navigation: When you click on a link in a browser and then click on another before the page transition completes, the browser prioritizes the most recent action. It cancels the initial request, focusing solely on the latest link clicked. Remix's Approach: Remix manages client-side navigation the same way. When a link is clicked within a Remix application, it initiates fetch requests for each loader tied to the target URL. If another navigation interrupts the initial navigation, Remix cancels the previous fetch requests, ensuring that only the latest requests proceed. Browser Form Submission: If you initiate a form submission in a browser and then quickly submit another form again, the browser disregards the first submission, processing only the latest one. Remix's Approach: Remix mimics this behavior when working with forms. If a form is submitted and another submission occurs before the first completes, Remix cancels the original fetch requests. It then waits for the latest submission to complete before triggering page revalidation again. Concurrent Submissions and Revalidation While standard browsers are limited to one request at a time for navigations and form submissions, Remix elevates this behavior. Unlike navigation, with useFetcher multiple requests can be in flight simultaneously. Remix is designed to handle multiple form submissions to server actions and concurrent revalidation requests efficiently. It ensures that as soon as new data is available, the state is updated promptly. However, Remix also safeguards against potential pitfalls by refraining from committing stale data when other actions introduce race conditions. For instance, if three form submissions are in progress, and one completes, Remix updates the UI with that data immediately without waiting for the other two so that the UI remains responsive and dynamic. As the remaining submissions finalize, Remix continues to update the UI, ensuring that the most recent data is displayed. To help understand some visualizations, below is a key for the symbols used in the diagrams: |: Submission begins ✓: Action complete, data revalidation begins ✅: Revalidated data is committed to the UI ❌: Request cancelled submission 1: |----✓-----✅ submission 2: |-----✓-----✅ submission 3: |-----✓-----✅ However, if a subsequent submission's revalidation completes before an earlier one, Remix discards the earlier data, ensuring that only the most up-to-date information is reflected in the UI. submission 1: |----✓---------❌ submission 2: |-----✓-----✅ submission 3: |-----✓-----✅ Because the revalidation from submission (2) started later and landed earlier than submission (1), the requests from submission (1) are canceled and only the data from submission (2) is committed to the UI. It was requested later, so it's more likely to contain the updated values from both (1) and (2). Potential for Stale Data It's unlikely your users will ever experience this, but there are still chances for the user to see stale data in very rare conditions with inconsistent infrastructure. Even though Remix cancels requests for stale data, they will still end up making it to the server. Cancelling a request in the browser simply releases browser resources for that request, it can't \"catch up\" and stop it from getting to the server. In extremely rare conditions, a canceled request may change data after the interrupting action's revalidation lands. Consider this diagram: 👇 interruption with new submission |----❌----------------------✓ |-------✓-----✅ 👆 initial request reaches the server after the interrupting submission has completed revalidation The user is now looking at different data than what is on the server. Note that this problem is both extremely rare and exists with default browser behavior, too. The chance of the initial request reaching the server later than both the submission and revalidation of the second is unexpected on any network and server infrastructure. If this is a concern in with your infrastructure, you can send time stamps with your form submissions and write server logic to ignore stale submissions. Example In UI components like combo boxes, each keystroke can trigger a network request. Managing such rapid, consecutive requests can be tricky, especially when ensuring that the displayed results match the most recent query. However, with Remix, this challenge is automatically handled, ensuring that users see the correct results without developers having to micromanage the network. import type { LoaderFunctionArgs } from \"@remix-run/node\"; // or cloudflare/deno import { json } from \"@remix-run/node\"; // or cloudflare/deno export async function loader({ request, }: LoaderFunctionArgs) { const { searchParams } = new URL(request.url); const cities = await searchCities(searchParams.get(\"q\")); return json(cities); } export function CitySearchCombobox() { const fetcher = useFetcher\u003ctypeof loader\u003e(); return ( \u003cfetcher.Form action=\"/city-search\"\u003e \u003cCombobox aria-label=\"Cities\"\u003e \u003cComboboxInput name=\"q\" onChange={(event) =\u003e // submit the form onChange to get the list of cities fetcher.submit(event.target.form) } /\u003e {/* render with the loader's data */} {fetcher.data ? ( \u003cComboboxPopover className=\"shadow-popup\"\u003e {fetcher.data.length \u003e 0 ? ( \u003cComboboxList\u003e {fetcher.data.map((city) =\u003e ( \u003cComboboxOption key={city.id} value={city.name} /\u003e ))} \u003c/ComboboxList\u003e ) : ( \u003cspan\u003eNo results found\u003c/span\u003e )} \u003c/ComboboxPopover\u003e ) : null} \u003c/Combobox\u003e \u003c/fetcher.Form\u003e ); } All the application needs to know is how to query the data and how to render it; Remix handles the network. Conclusion Remix offers developers an intuitive, browser-based approach to managing network requests. By mirroring browser behaviors and enhancing them where needed, it simplifies the complexities of concurrency, revalidation, and potential race conditions. Whether you're building a simple webpage or a sophisticated web application, Remix ensures that your user interactions are smooth, reliable, and always up to date.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_978\\\":-5,\\\"_979\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":977},{\\\"_18\\\":138},\\\"docs/discussion/concurrency.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"network-concurrency-management\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#network-concurrency-management\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNetwork Concurrency Management\\u003c/h1\\u003e\\\\n\\u003cp\\u003eWhen building web applications, managing network requests can be a daunting task. The challenges of ensuring up-to-date data and handling simultaneous requests often lead to complex logic in the application to deal with interruptions and race conditions. Remix simplifies this process by automating network management, mirroring, and expanding the intuitive behavior of web browsers.\\u003c/p\\u003e\\\\n\\u003cp\\u003eTo help understand how Remix works, remember from \\u003ca href=\\\\\\\"./data-flow\\\\\\\"\\u003eFullstack Data Flow\\u003c/a\\u003e that after \\u003ccode\\u003eform\\u003c/code\\u003e submissions, Remix will fetch fresh data from the loaders. This is called revalidation.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"natural-alignment-with-browser-behavior\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#natural-alignment-with-browser-behavior\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNatural Alignment with Browser Behavior\\u003c/h2\\u003e\\\\n\\u003cp\\u003eRemix's handling of network concurrency is heavily inspired by the default behavior of web browsers when processing documents:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eBrowser Link Navigation\\u003c/strong\\u003e: When you click on a link in a browser and then click on another before the page transition completes, the browser prioritizes the most recent \\u003ccode\\u003eaction\\u003c/code\\u003e. It cancels the initial request, focusing solely on the latest link clicked.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eRemix's Approach\\u003c/strong\\u003e: Remix manages client-side navigation the same way. When a link is clicked within a Remix application, it initiates fetch requests for each loader tied to the target URL. If another navigation interrupts the initial navigation, Remix cancels the previous fetch requests, ensuring that only the latest requests proceed.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eBrowser Form Submission\\u003c/strong\\u003e: If you initiate a form submission in a browser and then quickly submit another form again, the browser disregards the first submission, processing only the latest one.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eRemix's Approach\\u003c/strong\\u003e: Remix mimics this behavior when working with forms. If a form is submitted and another submission occurs before the first completes, Remix cancels the original fetch requests. It then waits for the latest submission to complete before triggering page revalidation again.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2 id=\\\\\\\"concurrent-submissions-and-revalidation\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#concurrent-submissions-and-revalidation\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eConcurrent Submissions and Revalidation\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhile standard browsers are limited to one request at a time for navigations and form submissions, Remix elevates this behavior. Unlike navigation, with \\u003ca href=\\\\\\\"../hooks/use-fetcher\\\\\\\"\\u003e\\u003ccode\\u003euseFetcher\\u003c/code\\u003e\\u003c/a\\u003e multiple requests can be in flight simultaneously.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix is designed to handle multiple form submissions to server \\u003ccode\\u003eaction\\u003c/code\\u003es and concurrent revalidation requests efficiently. It ensures that as soon as new data is available, the state is updated promptly. However, Remix also safeguards against potential pitfalls by refraining from committing stale data when other \\u003ccode\\u003eaction\\u003c/code\\u003es introduce race conditions.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor instance, if three form submissions are in progress, and one completes, Remix updates the UI with that data immediately without waiting for the other two so that the UI remains responsive and dynamic. As the remaining submissions finalize, Remix continues to update the UI, ensuring that the most recent data is displayed.\\u003c/p\\u003e\\\\n\\u003cp\\u003eTo help understand some visualizations, below is a key for the symbols used in the diagrams:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e|\\u003c/code\\u003e: Submission begins\\u003c/li\\u003e\\\\n\\u003cli\\u003e✓: Action complete, data revalidation begins\\u003c/li\\u003e\\\\n\\u003cli\\u003e✅: Revalidated data is committed to the UI\\u003c/li\\u003e\\\\n\\u003cli\\u003e❌: Request cancelled\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003esubmission 1: |----✓-----✅\\\\nsubmission 2: |-----✓-----✅\\\\nsubmission 3: |-----✓-----✅\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eHowever, if a subsequent submission's revalidation completes before an earlier one, Remix discards the earlier data, ensuring that only the most up-to-date information is reflected in the UI.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003esubmission 1: |----✓---------❌\\\\nsubmission 2: |-----✓-----✅\\\\nsubmission 3: |-----✓-----✅\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eBecause the revalidation from submission (2) started later and landed earlier than submission (1), the requests from submission (1) are canceled and only the data from submission (2) is committed to the UI. It was requested later, so it's more likely to contain the updated values from both (1) and (2).\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"potential-for-stale-data\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#potential-for-stale-data\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePotential for Stale Data\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIt's unlikely your users will ever experience this, but there are still chances for the user to see stale data in very rare conditions with inconsistent infrastructure. Even though Remix cancels requests for stale data, they will still end up making it to the server. Cancelling a request in the browser simply releases browser resources for that request, it can't \\\\\\\"catch up\\\\\\\" and stop it from getting to the server. In extremely rare conditions, a canceled request may change data after the interrupting \\u003ccode\\u003eaction\\u003c/code\\u003e's revalidation lands. Consider this diagram:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e 👇 interruption with new submission\\\\n|----❌----------------------✓\\\\n |-------✓-----✅\\\\n 👆\\\\n initial request reaches the server\\\\n after the interrupting submission\\\\n has completed revalidation\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eThe user is now looking at different data than what is on the server. Note that this problem is both extremely rare and exists with default browser behavior, too. The chance of the initial request reaching the server later than both the submission and revalidation of the second is unexpected on any network and server infrastructure. If this is a concern in with your infrastructure, you can send time stamps with your form submissions and write server logic to ignore stale submissions.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"example\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#example\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eExample\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIn UI components like combo boxes, each keystroke can trigger a network request. Managing such rapid, consecutive requests can be tricky, especially when ensuring that the displayed results match the most recent query. However, with Remix, this challenge is automatically handled, ensuring that users see the correct results without developers having to micromanage the network.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/city-search.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/city-search.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esearchParams\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003enew\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eURL\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eurl\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecities\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esearchCities\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esearchParams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eq\\u003c/span\\u003e\\\\\\\"));\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecities\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eCitySearchCombobox\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/city-search\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eCombobox\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003earia-label\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eCities\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eComboboxInput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eq\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonChange\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// submit the form onChange to get the list of cities\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esubmit\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etarget\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eform\\u003c/span\\u003e)\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* render with the loader's data */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eComboboxPopover\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eclassName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eshadow-popup\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edata\\u003c/span\\u003e.length \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u003e\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e0\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eComboboxList\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edata\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emap\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecity\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eComboboxOption\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ekey\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecity\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecity\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e ))\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eComboboxList\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003eNo results found\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e )\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eComboboxPopover\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eCombobox\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eAll the application needs to know is how to query the data and how to render it; Remix handles the network.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"conclusion\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#conclusion\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eConclusion\\u003c/h2\\u003e\\\\n\\u003cp\\u003eRemix offers developers an intuitive, browser-based approach to managing network requests. By mirroring browser behaviors and enhancing them where needed, it simplifies the complexities of concurrency, revalidation, and potential race conditions. Whether you're building a simple webpage or a sophisticated web application, Remix ensures that your user interactions are smooth, reliable, and always up to date.\\u003c/p\\u003e\\\",\\\"docs/discussion/concurrency\\\",\\\"headings\\\",[960,965,968,971,974],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Natural Alignment with Browser Behavior\\\",\\\"natural-alignment-with-browser-behavior\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"Concurrent Submissions and Revalidation\\\",\\\"concurrent-submissions-and-revalidation\\\",{\\\"_961\\\":962,\\\"_955\\\":969,\\\"_24\\\":970},\\\"Potential for Stale Data\\\",\\\"potential-for-stale-data\\\",{\\\"_961\\\":962,\\\"_955\\\":972,\\\"_24\\\":973},\\\"Example\\\",\\\"example\\\",{\\\"_961\\\":962,\\\"_955\\\":975,\\\"_24\\\":976},\\\"Conclusion\\\",\\\"conclusion\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#conclusion\\\\\\": 1, "#concurrent-submissions-and-revalidation\\\\\\": 1, "#example\\\\\\": 1, "#natural-alignment-with-browser-behavior\\\\\\": 1, "#network-concurrency-management\\\\\\": 1, "#potential-for-stale-data\\\\\\": 1, "$\\": 1, "$rc": 3, "*/": 1, "*/\\u003c/span\\u003e\\u003cspan": 1, "--base03": 4, "--base05": 1, "--base08": 26, "--base09": 2, "--base0a": 14, "--base0b": 7, "--base0d": 23, "--base0e": 29, "--base0f": 14, "-1\\\\\\": 6, "-5": 2, "/$": 1, "/*": 1, "//": 3, "//v2": 2, "/\u003e": 2, "/\\u003cspan": 5, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/city-search": 1, "/data-flow\\\\\\": 1, "/hooks/use-fetcher\\\\\\": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 2, "139": 1, "13\\\\\\": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 1, "1\\\\\\": 1, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "28\\\\\\": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "29\\\\\\": 1, "2\\\\\\": 1, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30\\\\\\": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "31\\\\\\": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "32\\\\\\": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "33\\\\\\": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "34\\\\\\": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "35\\\\\\": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "36\\\\\\": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "37\\\\\\": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "38\\\\\\": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "39\\\\\\": 1, "3\\\\\\": 1, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "40\\\\\\": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "41\\\\\\": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "42\\\\\\": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "43\\\\\\": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "44\\\\\\": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "45\\\\\\": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "46\\\\\\": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 1, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 5, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "976": 1, "977": 1, "98": 1, "99": 1, "9\\\\\\": 1, "\u003c/combobox\u003e": 1, "\u003c/comboboxlist\u003e": 1, "\u003c/comboboxpopover\u003e": 1, "\u003c/fetcher": 1, "\u003ccombobox": 1, "\u003ccomboboxinput": 1, "\u003ccomboboxlist\u003e": 1, "\u003ccomboboxoption": 1, "\u003ccomboboxpopover": 1, "\u003cfetcher": 1, "\u003cspan\u003eno": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 3, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 4, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 126, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eall": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 17, "\\n": 1, "\\u0026#x3c": 11, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ebrowser": 1, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003c/p\\u003e\\\\n\\u003ch2": 4, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efor": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eto": 2, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 2, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ebrowser": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e|\\u003c/code\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eremix": 2, "\\u003c/span\\u003e": 6, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 7, "\\u003c/span\\u003e\\u003cspan": 6, "\\u003ca": 2, "\\u003ccode\\u003eaction\\u003c/code\\u003e": 2, "\\u003ccode\\u003eaction\\u003c/code\\u003es": 2, "\\u003ccode\\u003eform\\u003c/code\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 90, "\\u003e": 58, "\\u003e/*": 1, "\\u003e//": 3, "\\u003e/city-search\\u003c/span\\u003e\\\\\\": 1, "\\u003e0\\u003c/span\\u003e": 1, "\\u003e=\\u003c/span\\u003e": 3, "\\u003e=\\u003c/span\\u003e\\\\\\": 4, "\\u003e=\\u003c/span\\u003e\\u003cspan": 3, "\\u003e=\\u003e\\u003c/span\\u003e": 1, "\\u003e=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 2, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 7, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003econclusion\\u003c/h2\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003econcurrent": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eexample\\u003c/h2\\u003e\\\\n\\u003cp\\u003ein": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003enatural": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003enetwork": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003epotential": 1, "\\u003e\\u003ca": 6, "\\u003e\\u003ccode\\u003e\\u003cspan": 1, "\\u003e\\u003ccode\\u003eusefetcher\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003cpre": 1, "\\u003e\\u003cspan": 10, "\\u003e\\u003e\\u003c/span\\u003e": 1, "\\u003eaction\\u003c/span\\u003e\\u003cspan": 1, "\\u003earia-label\\u003c/span\\u003e\\u003cspan": 1, "\\u003easync\\u003c/span\\u003e": 1, "\\u003eawait\\u003c/span\\u003e": 1, "\\u003ecities\\u003c/span\\u003e": 2, "\\u003ecities\\u003c/span\\u003e\\\\\\": 1, "\\u003ecity\\u003c/span\\u003e": 3, "\\u003ecitysearchcombobox\\u003c/span\\u003e": 1, "\\u003eclassname\\u003c/span\\u003e\\u003cspan": 1, "\\u003ecombobox\\u003c/span\\u003e": 1, "\\u003ecombobox\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003ecomboboxinput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003ecomboboxlist\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ecomboboxoption\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003ecomboboxpopover\\u003c/span\\u003e": 1, "\\u003ecomboboxpopover\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003econst\\u003c/span\\u003e": 3, "\\u003edata\\u003c/span\\u003e": 3, "\\u003eevent\\u003c/span\\u003e": 2, "\\u003eexport\\u003c/span\\u003e": 2, "\\u003efetcher": 2, "\\u003efetcher\\u003c/span\\u003e": 5, "\\u003eform\\u003c/span\\u003e": 1, "\\u003efrom\\u003c/span\\u003e": 2, "\\u003efullstack": 1, "\\u003efunction\\u003c/span\\u003e": 2, "\\u003eget\\u003c/span\\u003e": 1, "\\u003eid\\u003c/span\\u003e\\u003cspan": 1, "\\u003eimport\\u003c/span\\u003e": 2, "\\u003ejson\\u003c/span\\u003e": 2, "\\u003ekey\\u003c/span\\u003e\\u003cspan": 1, "\\u003eloader\\u003c/span\\u003e": 1, "\\u003eloader\\u003c/span\\u003e\\u003e": 1, "\\u003eloaderfunctionargs\\u003c/span\\u003e": 2, "\\u003emap\\u003c/span\\u003e": 1, "\\u003ename\\u003c/span\\u003e\\u003cspan": 2, "\\u003enew\\u003c/span\\u003e": 1, "\\u003enull\\u003c/span\\u003e\\u003cspan": 1, "\\u003eonchange\\u003c/span\\u003e\\u003cspan": 1, "\\u003eq\\u003c/span\\u003e\\\\\\": 2, "\\u003erequest\\u003c/span\\u003e": 2, "\\u003ereturn\\u003c/span\\u003e": 2, "\\u003esearchcities\\u003c/span\\u003e": 1, "\\u003esearchparams\\u003c/span\\u003e": 2, "\\u003eshadow-popup\\u003c/span\\u003e\\\\\\": 1, "\\u003espan\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003espan\\u003c/span\\u003e\\u003eno": 1, "\\u003esubmission": 2, "\\u003esubmit\\u003c/span\\u003e": 1, "\\u003etarget\\u003c/span\\u003e": 1, "\\u003etype\\u003c/span\\u003e": 1, "\\u003etypeof\\u003c/span\\u003e": 1, "\\u003eurl\\u003c/span\\u003e": 2, "\\u003eusefetcher\\u003c/span\\u003e\\u0026#x3c": 1, "\\u003evalue\\u003c/span\\u003e\\u003cspan": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 157, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 6, "_958\\": 1, "_961\\": 5, "_978\\": 1, "_979\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "action": 4, "action=": 1, "action\\": 1, "actiondata\\": 1, "actions": 2, "adapter": 3, "adapters": 3, "after": 6, "again": 4, "against": 2, "alignment": 5, "all": 2, "also": 2, "always": 2, "an": 5, "and": 58, "another": 8, "any": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 2, "app/routes/city-search": 2, "application": 8, "applications": 2, "approach": 5, "approach\\u003c/strong\\u003e": 2, "are": 10, "aria-hidden=\\\\\\": 6, "aria-label=": 1, "as": 9, "asked": 1, "asset": 3, "async": 1, "at": 5, "attrs\\": 1, "automatically": 2, "automating": 2, "available": 2, "await": 1, "await\\": 1, "b=document": 1, "backend": 3, "basename": 1, "be": 7, "because": 1, "been": 2, "before": 9, "begins": 2, "begins\\u003c/li\\u003e\\\\n\\u003cli\\u003e✅": 1, "begins\\u003c/li\\u003e\\\\n\\u003cli\\u003e✓": 1, "behavior": 11, "behavior\\": 1, "behavior\\u003c/h2\\u003e\\\\n\\u003cp\\u003eremix": 1, "behaviorconcurrent": 2, "behaviors": 2, "below": 2, "both": 6, "boxes": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 26, "browser-based": 2, "browsers": 6, "building": 4, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 2, "by": 8, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "called": 2, "can": 13, "canceled": 4, "cancelled": 1, "cancelled\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 1, "cancelling": 2, "cancels": 8, "catch": 3, "challenge": 2, "challenges": 2, "chance": 2, "chances": 2, "change": 2, "changelog": 2, "changelog\\": 1, "children\\": 1, "cities": 4, "cities\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "city": 3, "citysearchcombobox": 1, "class=\\\\\\": 55, "classname=": 1, "cli": 5, "cli\\": 1, "click": 4, "clicked": 4, "client": 12, "client-q2ogymm2": 1, "client-side": 2, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cloudflare/deno": 2, "cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "code": 4, "codeblock-line\\\\\\": 46, "color": 120, "combo": 2, "committed": 4, "committing": 2, "community": 3, "community\\": 1, "complete": 4, "completed": 2, "completes": 8, "complex": 2, "complexities": 2, "component": 2, "component\\": 1, "components": 3, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concern": 2, "conclusion": 1, "conclusion\\": 2, "conclusion\\\\\\": 1, "concurrency": 11, "concurrent": 4, "concurrent-submissions-and-revalidation\\": 1, "concurrent-submissions-and-revalidation\\\\\\": 1, "conditions": 10, "config": 3, "configuration": 2, "configuration\\": 1, "consecutive": 2, "consider": 2, "console": 1, "const": 3, "constraints": 2, "constraints\\": 1, "contain": 2, "continues": 2, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "correct": 2, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 15, "css\\": 1, "d=c": 2, "data": 54, "data-code-block=\\\\\\": 1, "data-filename=\\\\\\": 2, "data-lang=\\\\\\": 2, "data-line-number=\\\\\\": 46, "data-line-numbers=\\\\\\": 2, "data=": 1, "data\\": 3, "data\\u003c/h2\\u003e\\\\n\\u003cp\\u003eit": 1, "dataexampleconclusionnetwork": 1, "dataexampleconclusionon": 1, "date": 2, "daunting": 2, "deal": 2, "default": 4, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "designed": 2, "dev": 3, "developers": 4, "development": 3, "diagram": 2, "diagrams": 2, "different": 2, "disabling": 3, "discards": 2, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "displayed": 4, "disregards": 2, "do": 1, "doc\\": 1, "docs/discussion/concurrency": 1, "docs/discussion/concurrency\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsnetwork": 1, "document": 1, "documents": 2, "done": 1, "dynamic": 2, "e--": 1, "e=0": 1, "each": 4, "earlier": 6, "efficiently": 2, "elevates": 2, "else": 2, "end": 2, "enhancement": 2, "enhancement\\": 1, "enhancing": 2, "enqueue": 1, "ensures": 4, "ensuring": 12, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "especially": 2, "even": 2, "event": 2, "ever": 2, "everything": 1, "example": 1, "example\\": 2, "example\\\\\\": 1, "examples": 1, "execution": 2, "execution\\": 1, "exists": 2, "expanding": 2, "experience": 2, "explanation": 2, "explanation\\": 1, "export": 2, "extract": 2, "extract\\": 1, "extremely": 4, "f=a": 1, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 10, "fetch\\": 1, "fetcher": 7, "fetcher\\": 1, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "finalize": 2, "first": 4, "firstchild": 2, "flags": 2, "flags\\": 1, "flight": 2, "flow": 3, "flow\\": 1, "flow\\u003c/a\\u003e": 1, "focusing": 2, "for": 28, "form": 32, "form\u003e": 1, "form\\": 1, "form\\u003c/span\\u003e": 1, "form\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "forms": 2, "found": 3, "found\u003c/span\u003e": 1, "found\\u0026#x3c": 1, "frequently": 1, "fresh": 2, "from": 24, "frontend": 2, "frontend\\": 1, "fullstack": 4, "function": 3, "future": 4, "get": 7, "getelementbyid": 2, "getitem": 1, "getting": 4, "githubchat": 1, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "handle": 4, "handle\\": 1, "handled": 2, "handles": 2, "handling": 8, "handling\\": 2, "has": 4, "hascontent\\": 1, "having": 2, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "heavily": 2, "help": 5, "here": 1, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 7, "however": 5, "href=\\\\\\": 8, "html": 1, "html\\": 1, "https": 2, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 6, "icon-link\\\\\\": 6, "id": 1, "id=\\\\\\": 6, "if": 18, "ignore": 2, "immediately": 2, "import": 7, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 29, "inc": 1, "inconsistent": 2, "index": 3, "information": 2, "infrastructure": 6, "initial": 9, "initiate": 2, "initiates": 2, "insertbefore": 1, "inspired": 2, "instance": 2, "integrating": 1, "interactions": 3, "interrupting": 4, "interruption": 2, "interruptions": 2, "interrupts": 2, "into": 2, "introduce": 2, "introduction": 1, "intuitive": 4, "is": 39, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 23, "iterative": 1, "javascript": 2, "javascript\\": 1, "js": 7, "js\\": 1, "json": 5, "json\\": 1, "key": 6, "key=": 1, "keystroke": 2, "know": 3, "landed": 2, "lands": 2, "language-text\\\\\\": 3, "later": 6, "latest": 8, "lazy": 3, "lead": 2, "learning": 1, "length": 2, "let": 3, "licensed": 1, "like": 2, "likely": 2, "limited": 2, "link": 10, "link\\": 1, "links": 4, "links\\": 2, "list": 2, "livereload": 2, "livereload\\": 1, "loader": 7, "loader\u003e": 1, "loader\\": 1, "loaderdata\\": 1, "loaderfunctionargs": 2, "loaders": 2, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "logic": 4, "looking": 2, "makes": 1, "making": 2, "management": 8, "management\\": 2, "management\\u003c/h1\\u003e\\\\n\\u003cp\\u003ewhen": 1, "managementgetting": 1, "manages": 2, "managing": 6, "manual": 3, "map": 1, "match": 2, "math": 1, "may": 2, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "micromanage": 2, "migrating": 4, "mimics": 2, "mirroring": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 6, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "more": 2, "most": 9, "multiple": 4, "name": 1, "name=": 1, "naming": 2, "naming\\": 1, "natural": 2, "natural-alignment-with-browser-behavior\\": 1, "natural-alignment-with-browser-behavior\\\\\\": 1, "navigation": 9, "navigation\\u003c/strong\\u003e": 1, "navigations": 2, "navlink": 2, "navlink\\": 1, "need": 1, "needed": 2, "needs": 2, "network": 20, "network-concurrency-management\\\\\\": 1, "new": 7, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 3, "note": 2, "now": 2, "null": 2, "number": 1, "occurs": 2, "of": 19, "offers": 2, "often": 2, "on": 13, "once": 1, "onchange": 2, "onchange=": 1, "one": 9, "only": 8, "open": 1, "optimization": 2, "optimization\\": 1, "or": 7, "order\\": 1, "original": 2, "other": 7, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "page": 4, "pagenatural": 2, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "pitfalls": 2, "positions": 2, "postcss": 2, "postcss\\": 1, "potential": 6, "potential-for-stale-data\\": 1, "potential-for-stale-data\\\\\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previous": 2, "previoussibling": 1, "primary": 1, "prioritizes": 2, "problem": 2, "proceed": 2, "process": 2, "processing": 4, "progress": 2, "progressive": 3, "project": 1, "promptly": 2, "pull": 1, "query": 7, "questions": 1, "quick": 1, "quickest": 1, "quickly": 3, "race": 6, "random": 1, "rapid": 2, "rare": 6, "re": 2, "reaches": 2, "reaching": 2, "react": 8, "react-router-scroll-positions": 1, "readablestream": 1, "recent": 6, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "reflected": 2, "refraining": 2, "regular": 3, "related": 1, "released": 2, "releases": 2, "reliable": 2, "remaining": 2, "remains": 2, "remember": 2, "remix": 49, "remix\\": 2, "removechild": 2, "removeitem": 1, "render": 4, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 21, "requested": 2, "requests": 24, "resource": 3, "resources": 3, "responsive": 2, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "results": 6, "return": 2, "revalidated": 2, "revalidation": 20, "revalidation\\": 1, "revalidation\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003ethe": 1, "revalidation\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhile": 1, "revalidationpotential": 2, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 12, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/discussion/concurrency": 1, "run\\": 1, "running": 1, "runtimes": 3, "safeguards": 2, "same": 2, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "searchcities": 1, "searchparams": 2, "second": 2, "see": 4, "send": 2, "server": 30, "server\\": 3, "server\\\\n": 1, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shadow-popup": 1, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "simple": 2, "simplifies": 4, "simplifying": 1, "simply": 2, "simultaneous": 2, "simultaneously": 2, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "smooth": 2, "so": 4, "solely": 2, "some": 2, "soon": 2, "sophisticated": 2, "spa": 3, "ssr": 1, "stages": 1, "stale": 13, "stamps": 2, "standard": 2, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started": 2, "started\\": 1, "startedquick": 2, "state": 8, "still": 4, "stop": 2, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 120, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "submission": 31, "submission\\\\n": 1, "submission\\\\n|----❌----------------------✓\\\\n": 1, "submission\\u003c/strong\\u003e": 1, "submissions": 19, "submit": 5, "submitted": 2, "subsequent": 2, "such": 2, "support": 3, "support\\": 1, "symbols": 2, "tabindex=\\\\\\": 6, "tailwind": 2, "tailwind\\": 1, "target": 3, "task": 2, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "than": 6, "thank": 1, "that": 24, "the": 133, "them": 2, "then": 6, "there": 2, "they": 2, "this": 22, "though": 2, "three": 2, "through": 1, "tied": 2, "time": 4, "title\\": 1, "tls": 2, "tls\\": 1, "to": 56, "toc\\": 1, "too": 2, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "transition": 2, "tricky": 2, "trigger": 2, "triggering": 2, "true": 6, "true\\\\\\": 8, "try": 1, "ts": 2, "ts\\": 1, "tsx\\\\\\": 4, "tutorial": 3, "two": 2, "type": 1, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 15, "ui\\": 1, "ui\\u003c/li\\u003e\\\\n\\u003cli\\u003e❌": 1, "under": 1, "understand": 4, "unexpected": 2, "unlike": 2, "unlikely": 2, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 5, "up-to-date": 4, "up\\\\\\": 1, "update": 2, "updated": 4, "updates": 2, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 4, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 2, "usefetcher": 3, "usefetcher\u003ctypeof": 1, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 6, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "users": 4, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "value=": 1, "values": 2, "vanilla": 3, "var": 122, "variables": 2, "variables\\": 1, "very": 2, "view": 2, "visualizations": 2, "vite": 5, "vite\\": 1, "vs": 6, "waiting": 2, "waits": 2, "walk": 1, "was": 2, "way": 3, "web": 8, "webpage": 2, "what": 2, "when": 14, "where": 2, "whether": 2, "while": 2, "why": 1, "will": 8, "window": 11, "with": 31, "within": 2, "without": 4, "working": 2, "works": 2, "write": 2, "writes": 2, "writes\\": 1, "you": 13, "your": 11, "|-------✓-----✅": 1, "|-------✓-----✅\\\\n": 1, "|-----✓-----✅": 4, "|-----✓-----✅\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003ebecause": 1, "|-----✓-----✅\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003ehowever": 1, "|-----✓-----✅\\\\nsubmission": 2, "|----✓---------❌": 1, "|----✓---------❌\\\\nsubmission": 1, "|----✓-----✅": 1, "|----✓-----✅\\\\nsubmission": 1, "|----❌----------------------✓": 1, "||": 3, "©": 1, "•docs": 1, "✅": 1, "✓": 1, "❌": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2, "👆": 1, "👆\\\\n": 1, "👇": 2 }, "length": 6787 }, { "id": "3af6eb1e344e63f9c73a5d45", "doc_id": "61997aa26549f90ee783a3f2", "title": "no-hydration", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/no-hydration.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/no-hydration.json", "content": "--- title: \u003cNoHydration\u003e use_cases: \u003e- static content, ssr optimization, performance, reducing bundle size, server-only rendering tags: - ssr - hydration - optimization - performance - static - server-rendering version: '1.0' description: \u003e- Prevent client-side hydration for static content in SolidJS. Optimize performance by skipping hydration for server-rendered static elements. --- The `\u003cNoHydration\u003e` component prevents the client-side hydration process from being applied to its children. During server-side rendering, components and elements wrapped within `\u003cNoHydration\u003e` will render normally on the server, contributing to the initial HTML output. However, during client-side hydration, Solid bypasses the hydration process for the content within `\u003cNoHydration\u003e`. This means that elements within `\u003cNoHydration\u003e` will not have event listeners attached by Solid, and their state will not be managed reactively on the client-side after the initial render. :::note Placing a `\u003cHydration\u003e` component inside `\u003cNoHydration\u003e` has no effect and will not override the `\u003cNoHydration\u003e` behavior. ::: ## Example ```tsx import { NoHydration } from \"solid-js/web\"; import { InteractiveComponent, StaticContent } from \"./components\"; function Example() { return ( \u003cdiv\u003e \u003cInteractiveComponent /\u003e \u003cNoHydration\u003e \u003cStaticContent /\u003e \u003c/NoHydration\u003e \u003c/div\u003e ); } ```", "term_freq": { "##": 1, "---": 2, "//github": 1, "/\u003e": 2, "/components": 1, "\u003c/div\u003e": 1, "\u003c/nohydration\u003e": 1, "\u003cdiv\u003e": 1, "\u003chydration\u003e": 1, "\u003cinteractivecomponent": 1, "\u003cnohydration\u003e": 8, "\u003cstaticcontent": 1, "\u003e-": 2, "after": 1, "and": 3, "applied": 1, "attached": 1, "be": 1, "behavior": 1, "being": 1, "bundle": 1, "by": 2, "bypasses": 1, "children": 1, "client-side": 4, "com/solidjs/solid-docs/blob/head/src/routes/reference/components/no-hydration": 1, "component": 2, "components": 1, "content": 3, "contributing": 1, "description": 1, "during": 2, "effect": 1, "elements": 3, "event": 1, "example": 2, "for": 3, "from": 3, "function": 1, "github-document": 1, "has": 1, "have": 1, "however": 1, "html": 1, "https": 1, "hydration": 6, "import": 2, "in": 1, "initial": 2, "inside": 1, "interactivecomponent": 1, "its": 1, "listeners": 1, "managed": 1, "mdx": 1, "means": 1, "no": 1, "no-hydration": 1, "nohydration": 1, "normally": 1, "not": 3, "note": 1, "on": 2, "optimization": 2, "optimize": 1, "output": 1, "override": 1, "performance": 3, "placing": 1, "prevent": 1, "prevents": 1, "process": 2, "reactively": 1, "reducing": 1, "render": 2, "rendering": 2, "return": 1, "server": 1, "server-only": 1, "server-rendered": 1, "server-rendering": 1, "server-side": 1, "size": 1, "skipping": 1, "solid": 2, "solid-js/web": 1, "solidjs": 1, "ssr": 2, "state": 1, "static": 4, "staticcontent": 1, "tags": 1, "that": 1, "the": 9, "their": 1, "this": 1, "title": 1, "to": 2, "tsx": 1, "use_cases": 1, "version": 1, "will": 4, "within": 3, "wrapped": 1 }, "length": 166 }, { "id": "5639b6ba58bbe18b4de7c0b9", "doc_id": "47dbe15aeddc2cf9eefff2ae", "title": "observable", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/observable.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/observable.json", "content": "--- title: observable use_cases: \u003e- rxjs integration, observable patterns, signal interop, third-party libraries, reactive streams tags: - observables - rxjs - signals - integration - reactive - streams version: '1.0' description: \u003e- Convert SolidJS signals to Observables for seamless integration with RxJS and other reactive libraries using the observable utility function. --- ```ts import { observable } from \"solid-js\" function observable\u003cT\u003e(input: () =\u003e T): Observable\u003cT\u003e ``` This method takes a signal and produces an Observable. You can consume it from another Observable library of your choice, typically with the `from` operator. ```ts // How to integrate rxjs with a Solid signal import { observable } from \"solid-js\" import { from } from \"rxjs\" const [s, set] = createSignal(0) const obsv$ = from(observable(s)) obsv$.subscribe((v) =\u003e console.log(v)) ``` You can also use `from` without rxjs; check out this [page](/reference/reactive-utilities/from).", "term_freq": { "---": 2, "//": 1, "//github": 1, "/reference/reactive-utilities/from": 1, "=\u003e": 2, "\u003e-": 2, "also": 1, "an": 1, "and": 2, "another": 1, "can": 2, "check": 1, "choice": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/observable": 1, "console": 1, "const": 2, "consume": 1, "convert": 1, "createsignal": 1, "description": 1, "for": 1, "from": 8, "function": 2, "github-document": 1, "how": 1, "https": 1, "import": 3, "input": 1, "integrate": 1, "integration": 3, "interop": 1, "it": 1, "libraries": 2, "library": 1, "log": 1, "mdx": 1, "method": 1, "observable": 9, "observable\u003ct\u003e": 2, "observables": 2, "obsv$": 2, "of": 1, "operator": 1, "other": 1, "out": 1, "page": 1, "patterns": 1, "produces": 1, "reactive": 3, "rxjs": 6, "seamless": 1, "set": 1, "signal": 3, "signals": 2, "solid": 1, "solid-js": 2, "solidjs": 1, "streams": 2, "subscribe": 1, "tags": 1, "takes": 1, "the": 2, "third-party": 1, "this": 2, "title": 1, "to": 2, "ts": 2, "typically": 1, "use": 1, "use_cases": 1, "using": 1, "utility": 1, "version": 1, "with": 3, "without": 1, "you": 2, "your": 1 }, "length": 126 }, { "id": "ff27dc281bd3fbd91840195a", "doc_id": "9aaed4dd1850eda7977a5f67", "title": "on", "url": "file:///tmp/devour-github-216944658/src/routes/reference/jsx-attributes/on_.mdx", "type": "github-document", "source": "solid:solid-router", "path": "devour_data/docs/on-9aaed4dd.json", "content": "--- title: on* order: 3 use_cases: \u003e- user interactions, click handlers, form events, keyboard input, mouse events, touch handling tags: - events - handlers - interactions - click - input - delegation version: '1.0' description: \u003e- Handle user events efficiently in SolidJS with onClick and other event handlers. Optimized delegation system for improved performance at scale. --- Event handlers in Solid typically take the form of `onclick` or `onClick` depending on style. ```tsx \u003cdiv onClick={(e) =\u003e console.log(e.currentTarget)} /\u003e ``` Conceptually, this example attaches a `click` event listener (via [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)) to the `div`. However, Solid actually handles common UI events that bubble and are composed (such as `click`) at the document level, and then synthetically implements delegation (capturing and bubbling). This improves performance for these common events by reducing the number of event handlers. Note that `onClick` handles the event `click`; in general, event names get mapped to lower case. If you need to work with event names containing capital letters, or use listener options such once, passive, capture see [`on:`](/reference/jsx-attributes/on) which attaches event handlers directly (also avoiding fancy delegation via document). Solid also supports passing a two-element array to the event handler to bind a value to the first argument of the event handler. This doesn't use `bind` or create an additional closure, so it is a highly optimized way of delegating events. ```tsx function handler(itemId, e) { /*...*/ } \u003cul\u003e \u003cFor each={state.list}\u003e{(item) =\u003e \u003cli onClick={[handler, item.id]} /\u003e}\u003c/For\u003e \u003c/ul\u003e; ``` Events are never rebound and the bindings are not reactive, as it is expensive to attach and detach listeners. Since event handlers are called like any other function each time an event fires, there is no need for reactivity; shortcut your handler if desired. ```tsx // if defined, call it; otherwise don't. \u003cdiv onClick={() =\u003e props.handleClick?.()} /\u003e ``` Note that `onChange` and `onInput` work according to their native behavior (unlike, say, React). [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event) will fire immediately after the value has changed; for most `\u003cinput\u003e` fields, [`onChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) will only fire after the field loses focus. The event's `currentTarget` refers to the element that the event was attached to, while `target` gives the element that actually triggered the event (e.g. the user clicked on).", "term_freq": { "*/": 1, "---": 2, "/*": 1, "//": 1, "///tmp/devour-github-216944658/src/routes/reference/jsx-attributes/on_": 1, "//developer": 3, "/\u003e": 3, "/reference/jsx-attributes/on": 1, "\u003c/for\u003e": 1, "\u003c/ul\u003e": 1, "\u003cdiv": 2, "\u003cfor": 1, "\u003cinput\u003e": 1, "\u003cli": 1, "\u003cul\u003e": 1, "=\u003e": 3, "\u003e-": 2, "according": 1, "actually": 2, "addeventlistener": 1, "additional": 1, "after": 2, "also": 2, "an": 2, "and": 7, "any": 1, "are": 4, "argument": 1, "array": 1, "as": 2, "at": 2, "attach": 1, "attached": 1, "attaches": 2, "avoiding": 1, "behavior": 1, "bind": 2, "bindings": 1, "bubble": 1, "bubbling": 1, "by": 1, "call": 1, "called": 1, "capital": 1, "capture": 1, "capturing": 1, "case": 1, "changed": 1, "click": 5, "clicked": 1, "closure": 1, "common": 2, "composed": 1, "conceptually": 1, "console": 1, "containing": 1, "create": 1, "currenttarget": 2, "defined": 1, "delegating": 1, "delegation": 4, "depending": 1, "description": 1, "desired": 1, "detach": 1, "directly": 1, "div": 1, "document": 2, "doesn": 1, "don": 1, "each": 1, "each=": 1, "efficiently": 1, "element": 2, "event": 15, "events": 8, "example": 1, "expensive": 1, "fancy": 1, "field": 1, "fields": 1, "file": 1, "fire": 2, "fires": 1, "first": 1, "focus": 1, "for": 4, "form": 2, "function": 2, "general": 1, "get": 1, "github-document": 1, "gives": 1, "handle": 1, "handleclick": 1, "handler": 5, "handlers": 7, "handles": 2, "handling": 1, "has": 1, "highly": 1, "however": 1, "https": 3, "id": 1, "if": 3, "immediately": 1, "implements": 1, "improved": 1, "improves": 1, "in": 3, "input": 2, "interactions": 2, "is": 3, "it": 3, "item": 2, "itemid": 1, "keyboard": 1, "letters": 1, "level": 1, "like": 1, "list": 1, "listener": 2, "listeners": 1, "log": 1, "loses": 1, "lower": 1, "mapped": 1, "mdx": 1, "most": 1, "mouse": 1, "mozilla": 3, "names": 2, "native": 1, "need": 2, "never": 1, "no": 1, "not": 1, "note": 2, "number": 1, "of": 4, "on": 4, "on*": 1, "once": 1, "onchange": 2, "onclick": 4, "onclick=": 3, "oninput": 2, "only": 1, "optimized": 2, "options": 1, "or": 3, "order": 1, "org/en-us/docs/web/api/element/input_event": 1, "org/en-us/docs/web/api/eventtarget/addeventlistener": 1, "org/en-us/docs/web/api/htmlelement/change_event": 1, "other": 2, "otherwise": 1, "passing": 1, "passive": 1, "performance": 2, "props": 1, "react": 1, "reactive": 1, "reactivity": 1, "rebound": 1, "reducing": 1, "refers": 1, "say": 1, "scale": 1, "see": 1, "shortcut": 1, "since": 1, "so": 1, "solid": 3, "solidjs": 1, "state": 1, "style": 1, "such": 2, "supports": 1, "synthetically": 1, "system": 1, "tags": 1, "take": 1, "target": 1, "that": 5, "the": 17, "their": 1, "then": 1, "there": 1, "these": 1, "this": 3, "time": 1, "title": 1, "to": 10, "touch": 1, "triggered": 1, "tsx": 3, "two-element": 1, "typically": 1, "ui": 1, "unlike": 1, "use": 2, "use_cases": 1, "user": 3, "value": 2, "version": 1, "via": 2, "was": 1, "way": 1, "which": 1, "while": 1, "will": 2, "with": 2, "work": 2, "you": 1, "your": 1 }, "length": 372 }, { "id": "73d1564c8a4c4cd180ec731d", "doc_id": "70a26f18718fd510e5e54215", "title": "on-cleanup", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/lifecycle/on-cleanup.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/on-cleanup.json", "content": "--- title: onCleanup order: 5 use_cases: \u003e- component unmounting, memory leak prevention, event listener cleanup, side effect cleanup, resource disposal tags: - lifecycle - cleanup - memory - events - disposal version: '1.0' description: \u003e- Register cleanup methods in SolidJS to prevent memory leaks. Executes when components unmount or tracking scopes dispose. Essential for proper cleanup. --- `onCleanup` registers a cleanup method that executes on disposal and recalculation of the current tracking scope. Can be used anywhere to clean up any side effects left behind by initialization. When used in a Component, it runs when the component is unmounted. When used in tracking scope, such [`createEffect`](/reference/basic-reactivity/create-effect), [`createMemo`](/reference/basic-reactivity/create-memo) or a [`createRoot`](/reference/reactive-utilities/create-root), it runs when the tracking scope is disposed or refreshed. ```ts import { onCleanup } from \"solid-js\" function onCleanup(fn: () =\u003e void): void; ``` Without the `onCleanup` function, the event listener would remain attached to the `document` even after the component is removed from the page. This can cause memory leaks and other issues. ```tsx import { createSignal, onCleanup } from \"solid-js\" const Component = () =\u003e { const [count, setCount] = createSignal(0); const handleClick = () =\u003e setCount((value) =\u003e value + 1); document.addEventListener(\"click\", handleClick); /** * Remove the event listener when the component is removed/unmounted from the page. */ onCleanup(() =\u003e { document.removeEventListener(\"click\", handleClick); }); return \u003cmain\u003eDocument has been clicked {count()} times\u003c/main\u003e; }; ```", "term_freq": { "*/": 1, "---": 2, "/**": 1, "//github": 1, "/reference/basic-reactivity/create-effect": 1, "/reference/basic-reactivity/create-memo": 1, "/reference/reactive-utilities/create-root": 1, "\u003cmain\u003edocument": 1, "=\u003e": 5, "\u003e-": 2, "addeventlistener": 1, "after": 1, "and": 2, "any": 1, "anywhere": 1, "attached": 1, "be": 1, "been": 1, "behind": 1, "by": 1, "can": 2, "cause": 1, "clean": 1, "cleanup": 6, "click": 2, "clicked": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/lifecycle/on-cleanup": 1, "component": 6, "components": 1, "const": 3, "count": 2, "createeffect": 1, "creatememo": 1, "createroot": 1, "createsignal": 2, "current": 1, "description": 1, "disposal": 3, "dispose": 1, "disposed": 1, "document": 3, "effect": 1, "effects": 1, "essential": 1, "even": 1, "event": 3, "events": 1, "executes": 2, "fn": 1, "for": 1, "from": 4, "function": 2, "github-document": 1, "handleclick": 3, "has": 1, "https": 1, "import": 2, "in": 3, "initialization": 1, "is": 4, "issues": 1, "it": 2, "leak": 1, "leaks": 2, "left": 1, "lifecycle": 1, "listener": 3, "mdx": 1, "memory": 4, "method": 1, "methods": 1, "of": 1, "on": 1, "on-cleanup": 1, "oncleanup": 7, "or": 3, "order": 1, "other": 1, "page": 2, "prevent": 1, "prevention": 1, "proper": 1, "recalculation": 1, "refreshed": 1, "register": 1, "registers": 1, "remain": 1, "remove": 1, "removed": 1, "removed/unmounted": 1, "removeeventlistener": 1, "resource": 1, "return": 1, "runs": 2, "scope": 3, "scopes": 1, "setcount": 2, "side": 2, "solid-js": 2, "solidjs": 1, "such": 1, "tags": 1, "that": 1, "the": 11, "this": 1, "times\u003c/main\u003e": 1, "title": 1, "to": 3, "tracking": 4, "ts": 1, "tsx": 1, "unmount": 1, "unmounted": 1, "unmounting": 1, "up": 1, "use_cases": 1, "used": 3, "value": 2, "version": 1, "void": 2, "when": 6, "without": 1, "would": 1 }, "length": 211 }, { "id": "97aef03e09dad4dfb6f1d8e4", "doc_id": "dc9d80c9958c600c87f12cd8", "title": "on", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/on_.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/on-dc9d80c9.json", "content": "--- title: on* order: 3 use_cases: \u003e- user interactions, click handlers, form events, keyboard input, mouse events, touch handling tags: - events - handlers - interactions - click - input - delegation version: '1.0' description: \u003e- Handle user events efficiently in SolidJS with onClick and other event handlers. Optimized delegation system for improved performance at scale. --- Event handlers in Solid typically take the form of `onclick` or `onClick` depending on style. ```tsx \u003cdiv onClick={(e) =\u003e console.log(e.currentTarget)} /\u003e ``` Conceptually, this example attaches a `click` event listener (via [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)) to the `div`. However, Solid actually handles common UI events that bubble and are composed (such as `click`) at the document level, and then synthetically implements delegation (capturing and bubbling). This improves performance for these common events by reducing the number of event handlers. Note that `onClick` handles the event `click`; in general, event names get mapped to lower case. If you need to work with event names containing capital letters, or use listener options such once, passive, capture see [`on:`](/reference/jsx-attributes/on) which attaches event handlers directly (also avoiding fancy delegation via document). Solid also supports passing a two-element array to the event handler to bind a value to the first argument of the event handler. This doesn't use `bind` or create an additional closure, so it is a highly optimized way of delegating events. ```tsx function handler(itemId, e) { /*...*/ } \u003cul\u003e \u003cFor each={state.list}\u003e{(item) =\u003e \u003cli onClick={[handler, item.id]} /\u003e}\u003c/For\u003e \u003c/ul\u003e; ``` Events are never rebound and the bindings are not reactive, as it is expensive to attach and detach listeners. Since event handlers are called like any other function each time an event fires, there is no need for reactivity; shortcut your handler if desired. ```tsx // if defined, call it; otherwise don't. \u003cdiv onClick={() =\u003e props.handleClick?.()} /\u003e ``` Note that `onChange` and `onInput` work according to their native behavior (unlike, say, React). [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event) will fire immediately after the value has changed; for most `\u003cinput\u003e` fields, [`onChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) will only fire after the field loses focus. The event's `currentTarget` refers to the element that the event was attached to, while `target` gives the element that actually triggered the event (e.g. the user clicked on).", "term_freq": { "*/": 1, "---": 2, "/*": 1, "//": 1, "//developer": 3, "//github": 1, "/\u003e": 3, "/reference/jsx-attributes/on": 1, "\u003c/for\u003e": 1, "\u003c/ul\u003e": 1, "\u003cdiv": 2, "\u003cfor": 1, "\u003cinput\u003e": 1, "\u003cli": 1, "\u003cul\u003e": 1, "=\u003e": 3, "\u003e-": 2, "according": 1, "actually": 2, "addeventlistener": 1, "additional": 1, "after": 2, "also": 2, "an": 2, "and": 7, "any": 1, "are": 4, "argument": 1, "array": 1, "as": 2, "at": 2, "attach": 1, "attached": 1, "attaches": 2, "avoiding": 1, "behavior": 1, "bind": 2, "bindings": 1, "bubble": 1, "bubbling": 1, "by": 1, "call": 1, "called": 1, "capital": 1, "capture": 1, "capturing": 1, "case": 1, "changed": 1, "click": 5, "clicked": 1, "closure": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/jsx-attributes/on_": 1, "common": 2, "composed": 1, "conceptually": 1, "console": 1, "containing": 1, "create": 1, "currenttarget": 2, "defined": 1, "delegating": 1, "delegation": 4, "depending": 1, "description": 1, "desired": 1, "detach": 1, "directly": 1, "div": 1, "document": 2, "doesn": 1, "don": 1, "each": 1, "each=": 1, "efficiently": 1, "element": 2, "event": 15, "events": 8, "example": 1, "expensive": 1, "fancy": 1, "field": 1, "fields": 1, "fire": 2, "fires": 1, "first": 1, "focus": 1, "for": 4, "form": 2, "function": 2, "general": 1, "get": 1, "github-document": 1, "gives": 1, "handle": 1, "handleclick": 1, "handler": 5, "handlers": 7, "handles": 2, "handling": 1, "has": 1, "highly": 1, "however": 1, "https": 4, "id": 1, "if": 3, "immediately": 1, "implements": 1, "improved": 1, "improves": 1, "in": 3, "input": 2, "interactions": 2, "is": 3, "it": 3, "item": 2, "itemid": 1, "keyboard": 1, "letters": 1, "level": 1, "like": 1, "list": 1, "listener": 2, "listeners": 1, "log": 1, "loses": 1, "lower": 1, "mapped": 1, "mdx": 1, "most": 1, "mouse": 1, "mozilla": 3, "names": 2, "native": 1, "need": 2, "never": 1, "no": 1, "not": 1, "note": 2, "number": 1, "of": 4, "on": 4, "on*": 1, "once": 1, "onchange": 2, "onclick": 4, "onclick=": 3, "oninput": 2, "only": 1, "optimized": 2, "options": 1, "or": 3, "order": 1, "org/en-us/docs/web/api/element/input_event": 1, "org/en-us/docs/web/api/eventtarget/addeventlistener": 1, "org/en-us/docs/web/api/htmlelement/change_event": 1, "other": 2, "otherwise": 1, "passing": 1, "passive": 1, "performance": 2, "props": 1, "react": 1, "reactive": 1, "reactivity": 1, "rebound": 1, "reducing": 1, "refers": 1, "say": 1, "scale": 1, "see": 1, "shortcut": 1, "since": 1, "so": 1, "solid": 3, "solidjs": 1, "state": 1, "style": 1, "such": 2, "supports": 1, "synthetically": 1, "system": 1, "tags": 1, "take": 1, "target": 1, "that": 5, "the": 17, "their": 1, "then": 1, "there": 1, "these": 1, "this": 3, "time": 1, "title": 1, "to": 10, "touch": 1, "triggered": 1, "tsx": 3, "two-element": 1, "typically": 1, "ui": 1, "unlike": 1, "use": 2, "use_cases": 1, "user": 3, "value": 2, "version": 1, "via": 2, "was": 1, "way": 1, "which": 1, "while": 1, "will": 2, "with": 2, "work": 2, "you": 1, "your": 1 }, "length": 373 }, { "id": "0ee4a35f1e9fc9adc81d6de4", "doc_id": "7a76c6d17cdfda02389acce1", "title": "on-mount", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/lifecycle/on-mount.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/on-mount.json", "content": "--- title: onMount order: 5 use_cases: \u003e- initial setup, dom refs access, one-time initialization, component mounting, element manipulation after render tags: - lifecycle - mounting - refs - dom - initialization version: '1.0' description: \u003e- Run code after SolidJS components mount to the DOM. Perfect for accessing refs, setting up third-party libraries, and one-time initializations. --- Registers a method that runs after initial rendering is done and the elements are mounted to the page. Ideal for using [refs](/reference/jsx-attributes/ref) and managing other one-time setup. ```tsx import { onMount } from \"solid-js\" function onMount(fn: () =\u003e void): void ``` This is an alias for an effect that is non-tracking, meaning that it is equivalent to a [`createEffect`](/reference/basic-reactivity/create-effect) with no dependencies. ```tsx // example that shows how to use onMount to get a reference to an element import { onMount } from \"solid-js\" function MyComponent() { let ref: HTMLButtonElement // when the component is mounted, the button will be disabled onMount(() =\u003e { ref.disabled = true }) return \u003cbutton ref={ref}\u003eFocus me!\u003c/button\u003e } ```", "term_freq": { "---": 2, "//": 2, "//github": 1, "/reference/basic-reactivity/create-effect": 1, "/reference/jsx-attributes/ref": 1, "\u003c/button\u003e": 1, "\u003cbutton": 1, "=\u003e": 2, "\u003e-": 2, "\u003efocus": 1, "access": 1, "accessing": 1, "after": 3, "alias": 1, "an": 3, "and": 3, "are": 1, "be": 1, "button": 1, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/lifecycle/on-mount": 1, "component": 2, "components": 1, "createeffect": 1, "dependencies": 1, "description": 1, "disabled": 2, "dom": 3, "done": 1, "effect": 1, "element": 2, "elements": 1, "equivalent": 1, "example": 1, "fn": 1, "for": 3, "from": 2, "function": 2, "get": 1, "github-document": 1, "how": 1, "htmlbuttonelement": 1, "https": 1, "ideal": 1, "import": 2, "initial": 2, "initialization": 2, "initializations": 1, "is": 5, "it": 1, "let": 1, "libraries": 1, "lifecycle": 1, "managing": 1, "manipulation": 1, "mdx": 1, "me": 1, "meaning": 1, "method": 1, "mount": 1, "mounted": 2, "mounting": 2, "mycomponent": 1, "no": 1, "non-tracking": 1, "on-mount": 1, "one-time": 3, "onmount": 6, "order": 1, "other": 1, "page": 1, "perfect": 1, "ref": 3, "ref=": 1, "reference": 1, "refs": 4, "registers": 1, "render": 1, "rendering": 1, "return": 1, "run": 1, "runs": 1, "setting": 1, "setup": 2, "shows": 1, "solid-js": 2, "solidjs": 1, "tags": 1, "that": 4, "the": 5, "third-party": 1, "this": 1, "title": 1, "to": 6, "true": 1, "tsx": 2, "up": 1, "use": 1, "use_cases": 1, "using": 1, "version": 1, "void": 2, "when": 1, "will": 1, "with": 1 }, "length": 161 }, { "id": "4108dfb648216574b82f7e27", "doc_id": "14e4ed234688c25c31cba1fa", "title": "on-util", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/on-util.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/on-util.json", "content": "--- title: 'on' use_cases: \u003e- explicit dependencies, effect control, conditional tracking, deferred execution, store tracking tags: - effects - dependencies - tracking - stores - reactive - defer version: '1.0' description: \u003e- Control effect dependencies explicitly with SolidJS's on utility. Define when effects run and manage tracking behavior for precise reactivity. --- ```ts import { on } from \"solid-js\" function on\u003cT extends Array\u003c() =\u003e any\u003e | (() =\u003e any), U\u003e( deps: T, fn: (input: T, prevInput: T, prevValue?: U) =\u003e U, options: { defer?: boolean } = {} ): (prevValue?: U) =\u003e U | undefined ``` `on` is designed to be passed into a computation to make its dependencies explicit. If an array of dependencies is passed, `input` and `prevInput` are arrays. ```ts createEffect(on(a, (v) =\u003e console.log(v, b()))); // is equivalent to: createEffect(() =\u003e { const v = a(); untrack(() =\u003e console.log(v, b())); }); ``` You can also not run the computation immediately and instead opt in for it to only run on change by setting the defer option to true. ```ts // doesn't run immediately createEffect(on(a, (v) =\u003e console.log(v), { defer: true })); setA(\"new\"); // now it runs ``` ## Using `on` with stores :::note Please note that on stores and mutable, adding or removing a property from the parent object will trigger an effect. See [`createMutable`](/reference/store-utilities/create-mutable) ::: ```ts const [state, setState] = createStore({ a: 1, b: 2 }); // this will not work createEffect(on(state.a, (v) =\u003e console.log(v))); setState({ a: 3 }); // logs nothing // instead, use an arrow function createEffect( on( () =\u003e state.a, (v) =\u003e console.log(v) ) ); setState({ a: 4 }); // logs 4 ``` ## Arguments and options | Argument | Type | Description | | :------- | :--------------------------------------------- | :------------------------------------------------ | | deps | `T` | The dependencies to watch. | | fn | `(input: T, prevInput: T, prevValue?: U) =\u003e U` | The function to run when the dependencies change. | | options | `{ defer?: boolean }` | Options to configure the effect. |", "term_freq": { "##": 2, "---": 2, "-------": 1, "---------------------------------------------": 1, "------------------------------------------------": 1, "//": 7, "//github": 1, "/reference/store-utilities/create-mutable": 1, "=\u003e": 12, "\u003e-": 2, "adding": 1, "also": 1, "an": 3, "and": 5, "any": 1, "any\u003e": 1, "are": 1, "argument": 1, "arguments": 1, "array": 1, "array\u003c": 1, "arrays": 1, "arrow": 1, "be": 1, "behavior": 1, "boolean": 2, "by": 1, "can": 1, "change": 2, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/on-util": 1, "computation": 2, "conditional": 1, "configure": 1, "console": 5, "const": 2, "control": 2, "createeffect": 5, "createmutable": 1, "createstore": 1, "defer": 5, "deferred": 1, "define": 1, "dependencies": 7, "deps": 2, "description": 2, "designed": 1, "doesn": 1, "effect": 4, "effects": 2, "equivalent": 1, "execution": 1, "explicit": 2, "explicitly": 1, "extends": 1, "fn": 2, "for": 2, "from": 2, "function": 3, "github-document": 1, "https": 1, "if": 1, "immediately": 2, "import": 1, "in": 1, "input": 3, "instead": 2, "into": 1, "is": 3, "it": 2, "its": 1, "log": 5, "logs": 2, "make": 1, "manage": 1, "mdx": 1, "mutable": 1, "new": 1, "not": 2, "note": 2, "nothing": 1, "now": 1, "object": 1, "of": 1, "on": 11, "on-util": 1, "on\u003ct": 1, "only": 1, "opt": 1, "option": 1, "options": 4, "or": 1, "parent": 1, "passed": 2, "please": 1, "precise": 1, "previnput": 3, "prevvalue": 3, "property": 1, "reactive": 1, "reactivity": 1, "removing": 1, "run": 5, "runs": 1, "see": 1, "seta": 1, "setstate": 3, "setting": 1, "solid-js": 1, "solidjs": 1, "state": 3, "store": 1, "stores": 3, "tags": 1, "that": 1, "the": 7, "this": 1, "title": 1, "to": 8, "tracking": 4, "trigger": 1, "true": 2, "ts": 4, "type": 1, "u\u003e": 1, "undefined": 1, "untrack": 1, "use": 1, "use_cases": 1, "using": 1, "utility": 1, "version": 1, "watch": 1, "when": 2, "will": 2, "with": 2, "work": 1, "you": 1 }, "length": 263 }, { "id": "e5ef379724bd9a79144f4ca9", "doc_id": "1e47937d47b3b7e18e1ec841", "title": "on", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/on.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/on.json", "content": "--- title: 'on:*' order: 4 use_cases: \u003e- custom events, non-bubbling events, capture phase handling, passive listeners, special event options tags: - events - listeners - dom - capture - passive - handlers version: '1.0' description: \u003e- Attach non-delegated event handlers with on:* in SolidJS. Control capture, passive, and once options for advanced event handling requirements. --- For events with capital letters, listener options, or if you need to attach event handlers directly to a DOM element instead of optimized delegating via the document, use `on:*` in place of `on*`. ```tsx \u003cdiv on:DOMContentLoaded={(e) =\u003e console.log(\"Welcome!\")} /\u003e ``` This directly attaches an event handler (via [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)) to the `div`. :::note \u003cspan\u003eNew in v1.9.0\u003c/span\u003e ::: An aditional special syntax that allows full control of [`capture`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#capture), [`passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive), [`once`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#once) and [`signal`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#signal) is an intersection or combination of `EventListenerObject` \u0026 `AddEventListenerOptions`, as follows: ```tsx const handler = { handleEvent(e) { console.log(e) }, once:true, passive:false, capture:true } \u003cdiv on:wheel={handler} /\u003e // or inline \u003cdiv on:click={{passive:true, handleEvent(e) { console.log(\"Weeeee!\")}}} /\u003e ``` This new syntax replaces the now deprecated `oncapture:` and it's future proof for any posible new event listener options.", "term_freq": { "---": 2, "//": 1, "//developer": 5, "//github": 1, "/\u003e": 3, "0\u003c/span\u003e": 1, "\u003cdiv": 3, "\u003cspan\u003enew": 1, "=\u003e": 1, "\u003e-": 2, "addeventlistener": 1, "addeventlisteneroptions": 1, "aditional": 1, "advanced": 1, "allows": 1, "an": 3, "and": 3, "any": 1, "as": 1, "attach": 2, "attaches": 1, "capital": 1, "capture": 5, "click=": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/jsx-attributes/on": 1, "combination": 1, "console": 3, "const": 1, "control": 2, "custom": 1, "delegating": 1, "deprecated": 1, "description": 1, "directly": 2, "div": 1, "document": 1, "dom": 2, "domcontentloaded=": 1, "element": 1, "event": 6, "eventlistenerobject": 1, "events": 4, "false": 1, "follows": 1, "for": 3, "full": 1, "future": 1, "github-document": 1, "handleevent": 2, "handler": 3, "handlers": 3, "handling": 2, "https": 6, "if": 1, "in": 3, "inline": 1, "instead": 1, "intersection": 1, "is": 1, "it": 1, "letters": 1, "listener": 2, "listeners": 2, "log": 3, "mdx": 1, "mozilla": 5, "need": 1, "new": 2, "non-bubbling": 1, "non-delegated": 1, "note": 1, "now": 1, "of": 4, "on": 7, "on*": 1, "oncapture": 1, "once": 3, "optimized": 1, "options": 4, "or": 3, "order": 1, "org/en-us/docs/web/api/eventtarget/addeventlistener": 1, "org/en-us/docs/web/api/eventtarget/addeventlistener#capture": 1, "org/en-us/docs/web/api/eventtarget/addeventlistener#once": 1, "org/en-us/docs/web/api/eventtarget/addeventlistener#passive": 1, "org/en-us/docs/web/api/eventtarget/addeventlistener#signal": 1, "passive": 6, "phase": 1, "place": 1, "posible": 1, "proof": 1, "replaces": 1, "requirements": 1, "signal": 1, "solidjs": 1, "special": 2, "syntax": 2, "tags": 1, "that": 1, "the": 3, "this": 2, "title": 1, "to": 3, "true": 3, "tsx": 2, "use": 1, "use_cases": 1, "v1": 1, "version": 1, "via": 2, "weeeee": 1, "welcome": 1, "wheel=": 1, "with": 2, "you": 1 }, "length": 204 }, { "id": "ba9a9d774a6e4af883adf4b7", "doc_id": "a5769ef189dead0675fda33d", "title": "once", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/once.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/once.json", "content": "--- title: '@once' order: 5 use_cases: \u003e- performance optimization, static props, non-reactive values, compile-time optimization, reducing overhead tags: - optimization - performance - static - compiler - jsx version: '1.0' description: \u003e- Optimize SolidJS components with @once decorator for static values. Prevent unnecessary reactive wrapping and improve runtime performance. --- Solid's compiler uses a heuristic for reactive wrapping and lazy evaluation of JSX expressions. Does it contain a function call, a property access, or JSX? If yes we wrap it in a getter when passed to components or in an effect if passed to native elements. Knowing this heuristic and its limitations, we can reduce overhead of things we know will never change by accessing them outside of the JSX. A lone variable will never be wrapped. We can also tell the compiler not to wrap them by starting the expression with a comment decorator `/* @once */`. ```tsx \u003cMyComponent static={/*@once*/ state.wontUpdate} /\u003e ``` This also works on children. ```tsx \u003cMyComponent\u003e{/*@once*/ state.wontUpdate}\u003c/MyComponent\u003e ```", "term_freq": { "*/": 1, "---": 2, "/*": 1, "/*@once*/": 2, "//github": 1, "/\u003e": 1, "\u003c/mycomponent\u003e": 1, "\u003cmycomponent": 1, "\u003cmycomponent\u003e": 1, "\u003e-": 2, "@once": 3, "access": 1, "accessing": 1, "also": 2, "an": 1, "and": 3, "be": 1, "by": 2, "call": 1, "can": 2, "change": 1, "children": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/jsx-attributes/once": 1, "comment": 1, "compile-time": 1, "compiler": 3, "components": 2, "contain": 1, "decorator": 2, "description": 1, "does": 1, "effect": 1, "elements": 1, "evaluation": 1, "expression": 1, "expressions": 1, "for": 2, "function": 1, "getter": 1, "github-document": 1, "heuristic": 2, "https": 1, "if": 2, "improve": 1, "in": 2, "it": 2, "its": 1, "jsx": 4, "know": 1, "knowing": 1, "lazy": 1, "limitations": 1, "lone": 1, "mdx": 1, "native": 1, "never": 2, "non-reactive": 1, "not": 1, "of": 3, "on": 1, "once": 1, "optimization": 3, "optimize": 1, "or": 2, "order": 1, "outside": 1, "overhead": 2, "passed": 2, "performance": 3, "prevent": 1, "property": 1, "props": 1, "reactive": 2, "reduce": 1, "reducing": 1, "runtime": 1, "solid": 1, "solidjs": 1, "starting": 1, "state": 2, "static": 3, "static=": 1, "tags": 1, "tell": 1, "the": 3, "them": 2, "things": 1, "this": 2, "title": 1, "to": 3, "tsx": 2, "unnecessary": 1, "use_cases": 1, "uses": 1, "values": 2, "variable": 1, "version": 1, "we": 4, "when": 1, "will": 2, "with": 2, "wontupdate": 2, "works": 1, "wrap": 2, "wrapped": 1, "wrapping": 2, "yes": 1 }, "length": 159 }, { "id": "7de1a4c37f1a8a326fc7d052", "doc_id": "b3f63d2ef7117e9df28a0693", "title": "parse - Standard library/text/template/parse", "url": "https://pkg.go.dev/parse", "type": "go-package", "source": "go:parse", "path": "devour_data/docs/parse---standard-library-text-template-parse.json", "content": "# Package Standard library/text/template/parse Package parse builds parse trees for templates as defined by text/template and html/template. Clients should use those packages to construct templates rather than this one, which provides shared in... ## Documentation Overview ¶ Package parse builds parse trees for templates as defined by text/template and html/template. Clients should use those packages to construct templates rather than this one, which provides shared internal data structures not intended for general use. Index ¶ func IsEmptyTree(n Node) bool func Parse(name, text, leftDelim, rightDelim string, funcs ...map[string]any) (map[string]*Tree, error) type ActionNode func (a *ActionNode) Copy() Node func (a *ActionNode) String() string type BoolNode func (b *BoolNode) Copy() Node func (b *BoolNode) String() string type BranchNode func (b *BranchNode) Copy() Node func (b *BranchNode) String() string type BreakNode func (b *BreakNode) Copy() Node func (b *BreakNode) String() string type ChainNode func (c *ChainNode) Add(field string) func (c *ChainNode) Copy() Node func (c *ChainNode) String() string type CommandNode func (c *CommandNode) Copy() Node func (c *CommandNode) String() string type CommentNode func (c *CommentNode) Copy() Node func (c *CommentNode) String() string type ContinueNode func (c *ContinueNode) Copy() Node func (c *ContinueNode) String() string type DotNode func (d *DotNode) Copy() Node func (d *DotNode) String() string func (d *DotNode) Type() NodeType type FieldNode func (f *FieldNode) Copy() Node func (f *FieldNode) String() string type IdentifierNode func NewIdentifier(ident string) *IdentifierNode func (i *IdentifierNode) Copy() Node func (i *IdentifierNode) SetPos(pos Pos) *IdentifierNode func (i *IdentifierNode) SetTree(t *Tree) *IdentifierNode func (i *IdentifierNode) String() string type IfNode func (i *IfNode) Copy() Node type ListNode func (l *ListNode) Copy() Node func (l *ListNode) CopyList() *ListNode func (l *ListNode) String() string type Mode type NilNode func (n *NilNode) Copy() Node func (n *NilNode) String() string func (n *NilNode) Type() NodeType type Node type NodeType func (t NodeType) Type() NodeType type NumberNode func (n *NumberNode) Copy() Node func (n *NumberNode) String() string type PipeNode func (p *PipeNode) Copy() Node func (p *PipeNode) CopyPipe() *PipeNode func (p *PipeNode) String() string type Pos func (p Pos) Position() Pos type RangeNode func (r *RangeNode) Copy() Node type StringNode func (s *StringNode) Copy() Node func (s *StringNode) String() string type TemplateNode func (t *TemplateNode) Copy() Node func (t *TemplateNode) String() string type TextNode func (t *TextNode) Copy() Node func (t *TextNode) String() string type Tree func New(name string, funcs ...map[string]any) *Tree func (t *Tree) Copy() *Tree func (t *Tree) ErrorContext(n Node) (location, context string) func (t *Tree) Parse(text, leftDelim, rightDelim string, treeSet map[string]*Tree, ...) (tree *Tree, err error) type VariableNode func (v *VariableNode) Copy() Node func (v *VariableNode) String() string type WithNode func (w *WithNode) Copy() Node Constants ¶ This section is empty. Variables ¶ This section is empty. Functions ¶ func IsEmptyTree ¶ func IsEmptyTree(n Node) bool IsEmptyTree reports whether this tree (node) is empty of everything but space or comments. func Parse ¶ func Parse(name, text, leftDelim, rightDelim string, funcs ...map[string]any) (map[string]*Tree, error) Parse returns a map from template name to Tree, created by parsing the templates described in the argument string. The top-level template will be given the specified name. If an error is encountered, parsing stops and an empty map is returned with the error. Types ¶ type ActionNode ¶ type ActionNode struct { NodeType Pos Line int // The line number in the input. Deprecated: Kept for compatibility. Pipe *PipeNode // The pipeline in the action. // contains filtered or unexported fields } ActionNode holds an action (something bounded by delimiters). Control actions have their own nodes; ActionNode represents simple ones such as field evaluations and parenthesized pipelines. func (*ActionNode) Copy ¶ func (a *ActionNode) Copy() Node func (*ActionNode) String ¶ func (a *ActionNode) String() string type BoolNode ¶ type BoolNode struct { NodeType Pos True bool // The value of the boolean constant. // contains filtered or unexported fields } BoolNode holds a boolean constant. func (*BoolNode) Copy ¶ func (b *BoolNode) Copy() Node func (*BoolNode) String ¶ func (b *BoolNode) String() string type BranchNode ¶ type BranchNode struct { NodeType Pos Line int // The line number in the input. Deprecated: Kept for compatibility. Pipe *PipeNode // The pipeline to be evaluated. List *ListNode // What to execute if the value is non-empty. ElseList *ListNode // What to execute if the value is empty (nil if absent). // contains filtered or unexported fields } BranchNode is the common representation of if, range, and with. func (*BranchNode) Copy ¶ added in go1.4 func (b *BranchNode) Copy() Node func (*BranchNode) String ¶ func (b *BranchNode) String() string type BreakNode ¶ added in go1.18 type BreakNode struct { NodeType Pos Line int // contains filtered or unexported fields } BreakNode represents a {{break}} action. func (*BreakNode) Copy ¶ added in go1.18 func (b *BreakNode) Copy() Node func (*BreakNode) String ¶ added in go1.18 func (b *BreakNode) String() string type ChainNode ¶ added in go1.1 type ChainNode struct { NodeType Pos Node Node Field []string // The identifiers in lexical order. // contains filtered or unexported fields } ChainNode holds a term followed by a chain of field accesses (identifier starting with '.'). The names may be chained ('.x.y'). The periods are dropped from each ident. func (*ChainNode) Add ¶ added in go1.1 func (c *ChainNode) Add(field string) Add adds the named field (which should start with a period) to the end of the chain. func (*ChainNode) Copy ¶ added in go1.1 func (c *ChainNode) Copy() Node func (*ChainNode) String ¶ added in go1.1 func (c *ChainNode) String() string type CommandNode ¶ type CommandNode struct { NodeType Pos Args []Node // Arguments in lexical order: Identifier, field, or constant. // contains filtered or unexported fields } CommandNode holds a command (a pipeline inside an evaluating action). func (*CommandNode) Copy ¶ func (c *CommandNode) Copy() Node func (*CommandNode) String ¶ func (c *CommandNode) String() string type CommentNode ¶ added in go1.16 type CommentNode struct { NodeType Pos Text string // Comment text. // contains filtered or unexported fields } CommentNode holds a comment. func (*CommentNode) Copy ¶ added in go1.16 func (c *CommentNode) Copy() Node func (*CommentNode) String ¶ added in go1.16 func (c *CommentNode) String() string type ContinueNode ¶ added in go1.18 type ContinueNode struct { NodeType Pos Line int // contains filtered or unexported fields } ContinueNode represents a {{continue}} action. func (*ContinueNode) Copy ¶ added in go1.18 func (c *ContinueNode) Copy() Node func (*ContinueNode) String ¶ added in go1.18 func (c *ContinueNode) String() string type DotNode ¶ type DotNode struct { NodeType Pos // contains filtered or unexported fields } DotNode holds the special identifier '.'. func (*DotNode) Copy ¶ func (d *DotNode) Copy() Node func (*DotNode) String ¶ func (d *DotNode) String() string func (*DotNode) Type ¶ func (d *DotNode) Type() NodeType type FieldNode ¶ type FieldNode struct { NodeType Pos Ident []string // The identifiers in lexical order. // contains filtered or unexported fields } FieldNode holds a field (identifier starting with '.'). The names may be chained ('.x.y'). The period is dropped from each ident. func (*FieldNode) Copy ¶ func (f *FieldNode) Copy() Node func (*FieldNode) String ¶ func (f *FieldNode) String() string type IdentifierNode ¶ type IdentifierNode struct { NodeType Pos Ident string // The identifier's name. // contains filtered or unexported fields } IdentifierNode holds an identifier. func NewIdentifier ¶ func NewIdentifier(ident string) *IdentifierNode NewIdentifier returns a new IdentifierNode with the given identifier name. func (*IdentifierNode) Copy ¶ func (i *IdentifierNode) Copy() Node func (*IdentifierNode) SetPos ¶ added in go1.1 func (i *IdentifierNode) SetPos(pos Pos) *IdentifierNode SetPos sets the position. NewIdentifier is a public method so we can't modify its signature. Chained for convenience. TODO: fix one day? func (*IdentifierNode) SetTree ¶ added in go1.4 func (i *IdentifierNode) SetTree(t *Tree) *IdentifierNode SetTree sets the parent tree for the node. NewIdentifier is a public method so we can't modify its signature. Chained for convenience. TODO: fix one day? func (*IdentifierNode) String ¶ func (i *IdentifierNode) String() string type IfNode ¶ type IfNode struct { BranchNode } IfNode represents an {{if}} action and its commands. func (*IfNode) Copy ¶ func (i *IfNode) Copy() Node type ListNode ¶ type ListNode struct { NodeType Pos Nodes []Node // The element nodes in lexical order. // contains filtered or unexported fields } ListNode holds a sequence of nodes. func (*ListNode) Copy ¶ func (l *ListNode) Copy() Node func (*ListNode) CopyList ¶ func (l *ListNode) CopyList() *ListNode func (*ListNode) String ¶ func (l *ListNode) String() string type Mode ¶ added in go1.16 type Mode uint A Mode value is a set of flags (or 0). Modes control parser behavior. const ( ParseComments Mode = 1 \u003c\u003c iota // parse comments and add them to AST SkipFuncCheck // do not check that functions are defined ) type NilNode ¶ added in go1.1 type NilNode struct { NodeType Pos // contains filtered or unexported fields } NilNode holds the special identifier 'nil' representing an untyped nil constant. func (*NilNode) Copy ¶ added in go1.1 func (n *NilNode) Copy() Node func (*NilNode) String ¶ added in go1.1 func (n *NilNode) String() string func (*NilNode) Type ¶ added in go1.1 func (n *NilNode) Type() NodeType type Node ¶ type Node interface { Type() NodeType String() string // Copy does a deep copy of the Node and all its components. // To avoid type assertions, some XxxNodes also have specialized // CopyXxx methods that return *XxxNode. Copy() Node Position() Pos // byte position of start of node in full original input string // contains filtered or unexported methods } A Node is an element in the parse tree. The interface is trivial. The interface contains an unexported method so that only types local to this package can satisfy it. type NodeType ¶ type NodeType int NodeType identifies the type of a parse tree node. const ( NodeText NodeType = iota // Plain text. NodeAction // A non-control action such as a field evaluation. NodeBool // A boolean constant. NodeChain // A sequence of field accesses. NodeCommand // An element of a pipeline. NodeDot // The cursor, dot. NodeField // A field or method name. NodeIdentifier // An identifier; always a function name. NodeIf // An if action. NodeList // A list of Nodes. NodeNil // An untyped nil constant. NodeNumber // A numerical constant. NodePipe // A pipeline of commands. NodeRange // A range action. NodeString // A string constant. NodeTemplate // A template invocation action. NodeVariable // A $ variable. NodeWith // A with action. NodeComment // A comment. NodeBreak // A break action. NodeContinue // A continue action. ) func (NodeType) Type ¶ func (t NodeType) Type() NodeType Type returns itself and provides an easy default implementation for embedding in a Node. Embedded in all non-trivial Nodes. type NumberNode ¶ type NumberNode struct { NodeType Pos IsInt bool // Number has an integral value. IsUint bool // Number has an unsigned integral value. IsFloat bool // Number has a floating-point value. IsComplex bool // Number is complex. Int64 int64 // The signed integer value. Uint64 uint64 // The unsigned integer value. Float64 float64 // The floating-point value. Complex128 complex128 // The complex value. Text string // The original textual representation from the input. // contains filtered or unexported fields } NumberNode holds a number: signed or unsigned integer, float, or complex. The value is parsed and stored under all the types that can represent the value. This simulates in a small amount of code the behavior of Go's ideal constants. func (*NumberNode) Copy ¶ func (n *NumberNode) Copy() Node func (*NumberNode) String ¶ func (n *NumberNode) String() string type PipeNode ¶ type PipeNode struct { NodeType Pos Line int // The line number in the input. Deprecated: Kept for compatibility. IsAssign bool // The variables are being assigned, not declared. Decl []*VariableNode // Variables in lexical order. Cmds []*CommandNode // The commands in lexical order. // contains filtered or unexported fields } PipeNode holds a pipeline with optional declaration func (*PipeNode) Copy ¶ func (p *PipeNode) Copy() Node func (*PipeNode) CopyPipe ¶ func (p *PipeNode) CopyPipe() *PipeNode func (*PipeNode) String ¶ func (p *PipeNode) String() string type Pos ¶ added in go1.1 type Pos int Pos represents a byte position in the original input text from which this template was parsed. func (Pos) Position ¶ added in go1.1 func (p Pos) Position() Pos type RangeNode ¶ type RangeNode struct { BranchNode } RangeNode represents a {{range}} action and its commands. func (*RangeNode) Copy ¶ func (r *RangeNode) Copy() Node type StringNode ¶ type StringNode struct { NodeType Pos Quoted string // The original text of the string, with quotes. Text string // The string, after quote processing. // contains filtered or unexported fields } StringNode holds a string constant. The value has been \"unquoted\". func (*StringNode) Copy ¶ func (s *StringNode) Copy() Node func (*StringNode) String ¶ func (s *StringNode) String() string type TemplateNode ¶ type TemplateNode struct { NodeType Pos Line int // The line number in the input. Deprecated: Kept for compatibility. Name string // The name of the template (unquoted). Pipe *PipeNode // The command to evaluate as dot for the template. // contains filtered or unexported fields } TemplateNode represents a {{template}} action. func (*TemplateNode) Copy ¶ func (t *TemplateNode) Copy() Node func (*TemplateNode) String ¶ func (t *TemplateNode) String() string type TextNode ¶ type TextNode struct { NodeType Pos Text []byte // The text; may span newlines. // contains filtered or unexported fields } TextNode holds plain text. func (*TextNode) Copy ¶ func (t *TextNode) Copy() Node func (*TextNode) String ¶ func (t *TextNode) String() string type Tree ¶ type Tree struct { Name string // name of the template represented by the tree. ParseName string // name of the top-level template during parsing, for error messages. Root *ListNode // top-level root of the tree. Mode Mode // parsing mode. // contains filtered or unexported fields } Tree is the representation of a single parsed template. func New ¶ func New(name string, funcs ...map[string]any) *Tree New allocates a new parse tree with the given name. func (*Tree) Copy ¶ added in go1.2 func (t *Tree) Copy() *Tree Copy returns a copy of the Tree. Any parsing state is discarded. func (*Tree) ErrorContext ¶ added in go1.1 func (t *Tree) ErrorContext(n Node) (location, context string) ErrorContext returns a textual representation of the location of the node in the input text. The receiver is only used when the node does not have a pointer to the tree inside, which can occur in old code. func (*Tree) Parse ¶ func (t *Tree) Parse(text, leftDelim, rightDelim string, treeSet map[string]*Tree, funcs ...map[string]any) (tree *Tree, err error) Parse parses the template definition string to construct a representation of the template for execution. If either action delimiter string is empty, the default (\"{{\" or \"}}\") is used. Embedded template definitions are added to the treeSet map. type VariableNode ¶ type VariableNode struct { NodeType Pos Ident []string // Variable name and fields in lexical order. // contains filtered or unexported fields } VariableNode holds a list of variable names, possibly with chained field accesses. The dollar sign is part of the (first) name. func (*VariableNode) Copy ¶ func (v *VariableNode) Copy() Node func (*VariableNode) String ¶ func (v *VariableNode) String() string type WithNode ¶ type WithNode struct { BranchNode } WithNode represents a {{with}} action and its commands. func (*WithNode) Copy ¶ func (w *WithNode) Copy() Node ## Functions (2) - `func IsEmptyTree(n Node) bool` - `func Parse(name, text, leftDelim, rightDelim string, funcs ...map[string]any) (map[string]*Tree, error)` ## Types (27) - `type ActionNode ¶` (alias) - `type BoolNode ¶` (alias) - `type BranchNode ¶` (alias) - `type BreakNode ¶ added in go1.18` (alias) - `type ChainNode ¶ added in go1.1` (alias) - `type CommandNode ¶` (alias) - `type CommentNode ¶ added in go1.16` (alias) - `type ContinueNode ¶ added in go1.18` (alias) - `type DotNode ¶` (alias) - `type FieldNode ¶` (alias) - `type IdentifierNode ¶` (alias) - `type IfNode ¶` (alias) - `type ListNode ¶` (alias) - `type Mode ¶ added in go1.16` (alias) - `type NilNode ¶ added in go1.1` (alias) - `type Node ¶` (alias) - `type NodeType ¶` (alias) - `type NumberNode ¶` (alias) - `type PipeNode ¶` (alias) - `type Pos ¶ added in go1.1` (alias) - `type RangeNode ¶` (alias) - `type StringNode ¶` (alias) - `type TemplateNode ¶` (alias) - `type TextNode ¶` (alias) - `type Tree ¶` (alias) - `type VariableNode ¶` (alias) - `type WithNode ¶` (alias)", "term_freq": { "##": 3, "*actionnode": 6, "*boolnode": 6, "*branchnode": 6, "*breaknode": 6, "*chainnode": 9, "*commandnode": 7, "*commentnode": 6, "*continuenode": 6, "*dotnode": 9, "*fieldnode": 6, "*identifiernode": 18, "*ifnode": 3, "*listnode": 14, "*nilnode": 9, "*numbernode": 6, "*pipenode": 14, "*rangenode": 3, "*stringnode": 6, "*templatenode": 6, "*textnode": 6, "*tree": 22, "*variablenode": 7, "*withnode": 3, "*xxxnode": 1, "//": 85, "//pkg": 1, "16": 6, "18": 8, "27": 1, "\u003c\u003c": 1, "absent": 1, "accesses": 3, "action": 17, "actionnode": 6, "actions": 1, "add": 5, "added": 33, "adds": 1, "after": 1, "alias": 27, "all": 3, "allocates": 1, "also": 1, "always": 1, "amount": 1, "an": 16, "and": 13, "any": 7, "are": 4, "args": 1, "argument": 1, "arguments": 1, "as": 5, "assertions": 1, "assigned": 1, "ast": 1, "avoid": 1, "be": 4, "been": 1, "behavior": 2, "being": 1, "bool": 9, "boolean": 3, "boolnode": 5, "bounded": 1, "branchnode": 8, "break": 2, "breaknode": 5, "builds": 2, "but": 1, "by": 6, "byte": 3, "can": 5, "chain": 2, "chained": 5, "chainnode": 5, "check": 1, "clients": 2, "cmds": 1, "code": 2, "command": 2, "commandnode": 5, "commands": 5, "comment": 3, "commentnode": 5, "comments": 2, "common": 1, "compatibility": 4, "complex": 3, "complex128": 2, "components": 1, "const": 2, "constant": 9, "constants": 2, "construct": 3, "contains": 22, "context": 2, "continue": 2, "continuenode": 5, "control": 2, "convenience": 2, "copy": 74, "copylist": 3, "copypipe": 3, "copyxxx": 1, "created": 1, "cursor": 1, "data": 1, "day": 2, "decl": 1, "declaration": 1, "declared": 1, "deep": 1, "default": 2, "defined": 3, "definition": 1, "definitions": 1, "delimiter": 1, "delimiters": 1, "deprecated": 4, "described": 1, "dev/parse": 1, "discarded": 1, "do": 1, "documentation": 1, "does": 2, "dollar": 1, "dot": 2, "dotnode": 5, "dropped": 2, "during": 1, "each": 2, "easy": 1, "either": 1, "element": 3, "elselist": 1, "embedded": 2, "embedding": 1, "empty": 6, "encountered": 1, "end": 1, "err": 2, "error": 8, "errorcontext": 4, "evaluate": 1, "evaluated": 1, "evaluating": 1, "evaluation": 1, "evaluations": 1, "everything": 1, "execute": 2, "execution": 1, "field": 12, "fieldnode": 5, "fields": 21, "filtered": 21, "first": 1, "fix": 2, "flags": 1, "float": 1, "float64": 2, "floating-point": 2, "followed": 1, "for": 14, "from": 5, "full": 1, "func": 173, "funcs": 6, "function": 1, "functions": 3, "general": 1, "given": 3, "go": 2, "go-package": 1, "go1": 32, "has": 4, "have": 3, "holds": 15, "html/template": 2, "https": 1, "ideal": 1, "ident": 7, "identifier": 9, "identifiernode": 6, "identifiers": 2, "identifies": 1, "if": 8, "ifnode": 5, "implementation": 1, "in": 54, "index": 1, "input": 8, "inside": 2, "int": 8, "int64": 2, "integer": 3, "integral": 2, "intended": 1, "interface": 3, "internal": 1, "invocation": 1, "iota": 2, "is": 22, "isassign": 1, "iscomplex": 1, "isemptytree": 5, "isfloat": 1, "isint": 1, "isuint": 1, "it": 1, "its": 6, "itself": 1, "kept": 4, "leftdelim": 5, "lexical": 7, "library/text/template/parse": 2, "line": 10, "list": 3, "listnode": 5, "local": 1, "location": 3, "map": 14, "may": 3, "messages": 1, "method": 4, "methods": 2, "mode": 9, "modes": 1, "modify": 2, "name": 19, "named": 1, "names": 3, "new": 6, "newidentifier": 6, "newlines": 1, "nil": 4, "nilnode": 5, "node": 67, "nodeaction": 1, "nodebool": 1, "nodebreak": 1, "nodechain": 1, "nodecommand": 1, "nodecomment": 1, "nodecontinue": 1, "nodedot": 1, "nodefield": 1, "nodeidentifier": 1, "nodeif": 1, "nodelist": 1, "nodenil": 1, "nodenumber": 1, "nodepipe": 1, "noderange": 1, "nodes": 6, "nodestring": 1, "nodetemplate": 1, "nodetext": 1, "nodetype": 35, "nodevariable": 1, "nodewith": 1, "non-control": 1, "non-empty": 1, "non-trivial": 1, "not": 4, "number": 9, "numbernode": 5, "numerical": 1, "occur": 1, "of": 29, "old": 1, "one": 4, "ones": 1, "only": 2, "optional": 1, "or": 28, "order": 7, "original": 4, "overview": 1, "own": 1, "package": 4, "packages": 2, "parent": 1, "parenthesized": 1, "parse": 18, "parsecomments": 1, "parsed": 3, "parsename": 1, "parser": 1, "parses": 1, "parsing": 5, "part": 1, "period": 2, "periods": 1, "pipe": 3, "pipeline": 6, "pipelines": 1, "pipenode": 5, "plain": 2, "pointer": 1, "pos": 34, "position": 7, "possibly": 1, "processing": 1, "provides": 3, "public": 2, "quote": 1, "quoted": 1, "quotes": 1, "range": 3, "rangenode": 5, "rather": 2, "receiver": 1, "reports": 1, "represent": 1, "representation": 5, "represented": 1, "representing": 1, "represents": 8, "return": 1, "returned": 1, "returns": 5, "rightdelim": 5, "root": 2, "satisfy": 1, "section": 2, "sequence": 2, "set": 1, "setpos": 4, "sets": 2, "settree": 4, "shared": 2, "should": 3, "sign": 1, "signature": 2, "signed": 2, "simple": 1, "simulates": 1, "single": 1, "skipfunccheck": 1, "small": 1, "so": 3, "some": 1, "something": 1, "space": 1, "span": 1, "special": 2, "specialized": 1, "specified": 1, "standard": 2, "start": 2, "starting": 2, "state": 1, "stops": 1, "stored": 1, "string": 140, "stringnode": 5, "struct": 23, "structures": 1, "such": 2, "template": 13, "templatenode": 5, "templates": 5, "term": 1, "text": 16, "text/template": 2, "textnode": 5, "textual": 2, "than": 2, "that": 4, "the": 85, "their": 1, "them": 1, "this": 8, "those": 2, "to": 14, "todo": 2, "top-level": 3, "tree": 17, "trees": 2, "treeset": 3, "trivial": 1, "true": 1, "type": 121, "types": 4, "uint": 1, "uint64": 2, "under": 1, "unexported": 22, "unquoted": 2, "unsigned": 3, "untyped": 2, "use": 3, "used": 2, "value": 14, "variable": 3, "variablenode": 5, "variables": 3, "was": 1, "we": 2, "what": 2, "when": 1, "whether": 1, "which": 5, "will": 1, "with": 12, "withnode": 5, "xxxnodes": 1, "¶": 117 }, "length": 2529 }, { "id": "61af94500321e4c3cd09ea0e", "doc_id": "1b0a30983f0d17d228bcdbc3", "title": "parse.func IsEmptyTree", "url": "https://pkg.go.dev/parse#func IsEmptyTree ¶", "type": "go-function", "source": "go:parse", "path": "devour_data/docs/parse.func-isemptytree.json", "content": "# parse.func IsEmptyTree ¶ ``` func IsEmptyTree(n Node) bool ``` IsEmptyTree reports whether this tree (node) is empty of everything but space or comments.", "term_freq": { "//pkg": 1, "bool": 1, "but": 1, "comments": 1, "dev/parse#func": 1, "empty": 1, "everything": 1, "func": 3, "go": 1, "go-function": 1, "https": 1, "is": 1, "isemptytree": 5, "node": 2, "of": 1, "or": 1, "parse": 2, "reports": 1, "space": 1, "this": 1, "tree": 1, "whether": 1, "¶": 2 }, "length": 32 }, { "id": "8d14d55c19142f9fa635cce2", "doc_id": "4dd2d82df3b96a79d4690767", "title": "parse.func Parse", "url": "https://pkg.go.dev/parse#func Parse ¶", "type": "go-function", "source": "go:parse", "path": "devour_data/docs/parse.func-parse.json", "content": "# parse.func Parse ¶ ``` func Parse(name, text, leftDelim, rightDelim string, funcs ...map[string]any) (map[string]*Tree, error) ``` Parse returns a map from template name to Tree, created by parsing the templates described in the argument string. The top-level template will be given the specified name. If an error is encountered, parsing stops and an empty map is returned with the error.", "term_freq": { "*tree": 1, "//pkg": 1, "an": 2, "and": 1, "any": 1, "argument": 1, "be": 1, "by": 1, "created": 1, "described": 1, "dev/parse#func": 1, "empty": 1, "encountered": 1, "error": 3, "from": 1, "func": 3, "funcs": 1, "given": 1, "go": 1, "go-function": 1, "https": 1, "if": 1, "in": 1, "is": 2, "leftdelim": 1, "map": 4, "name": 3, "parse": 7, "parsing": 2, "returned": 1, "returns": 1, "rightdelim": 1, "specified": 1, "stops": 1, "string": 4, "template": 2, "templates": 1, "text": 1, "the": 5, "to": 1, "top-level": 1, "tree": 1, "will": 1, "with": 1, "¶": 2 }, "length": 72 }, { "id": "61b13b065bef13c46d575a57", "doc_id": "d0a0682930b3b03d13d1ba13", "title": "parse.type ActionNode", "url": "https://pkg.go.dev/parse#type ActionNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-actionnode.json", "content": "# type parse.type ActionNode ¶ ``` type ActionNode struct { NodeType Pos Line int // The line number in the input. Deprecated: Kept for compatibility. Pipe *PipeNode // The pipeline in the action. // contains filtered or unexported fields } ``` ActionNode holds an action (something bounded by delimiters). Control actions have their own nodes; ActionNode represents simple ones such as field evaluations and parenthesized pipelines.", "term_freq": { "*pipenode": 1, "//": 3, "//pkg": 1, "action": 2, "actionnode": 6, "actions": 1, "an": 1, "and": 1, "as": 1, "bounded": 1, "by": 1, "compatibility": 1, "contains": 1, "control": 1, "delimiters": 1, "deprecated": 1, "dev/parse#type": 1, "evaluations": 1, "field": 1, "fields": 1, "filtered": 1, "for": 1, "go": 1, "go-type": 1, "have": 1, "holds": 1, "https": 1, "in": 2, "input": 1, "int": 1, "kept": 1, "line": 2, "nodes": 1, "nodetype": 1, "number": 1, "ones": 1, "or": 1, "own": 1, "parenthesized": 1, "parse": 2, "pipe": 1, "pipeline": 1, "pipelines": 1, "pos": 1, "represents": 1, "simple": 1, "something": 1, "struct": 1, "such": 1, "the": 4, "their": 1, "type": 4, "unexported": 1, "¶": 2 }, "length": 72 }, { "id": "fdefcbe4cd184c2bf9bd7f7e", "doc_id": "3e190840aaa1c4f2e9e7c151", "title": "parse.type BoolNode", "url": "https://pkg.go.dev/parse#type BoolNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-boolnode.json", "content": "# type parse.type BoolNode ¶ ``` type BoolNode struct { NodeType Pos True bool // The value of the boolean constant. // contains filtered or unexported fields } ``` BoolNode holds a boolean constant.", "term_freq": { "//": 2, "//pkg": 1, "bool": 1, "boolean": 2, "boolnode": 5, "constant": 2, "contains": 1, "dev/parse#type": 1, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "holds": 1, "https": 1, "nodetype": 1, "of": 1, "or": 1, "parse": 2, "pos": 1, "struct": 1, "the": 2, "true": 1, "type": 4, "unexported": 1, "value": 1, "¶": 2 }, "length": 39 }, { "id": "c4f36149fdeee5f41518f901", "doc_id": "9974cf23fa6c7f911a610638", "title": "parse.type BranchNode", "url": "https://pkg.go.dev/parse#type BranchNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-branchnode.json", "content": "# type parse.type BranchNode ¶ ``` type BranchNode struct { NodeType Pos Line int // The line number in the input. Deprecated: Kept for compatibility. Pipe *PipeNode // The pipeline to be evaluated. List *ListNode // What to execute if the value is non-empty. ElseList *ListNode // What to execute if the value is empty (nil if absent). // contains filtered or unexported fields } ``` BranchNode is the common representation of if, range, and with.", "term_freq": { "*listnode": 2, "*pipenode": 1, "//": 5, "//pkg": 1, "absent": 1, "and": 1, "be": 1, "branchnode": 5, "common": 1, "compatibility": 1, "contains": 1, "deprecated": 1, "dev/parse#type": 1, "elselist": 1, "empty": 1, "evaluated": 1, "execute": 2, "fields": 1, "filtered": 1, "for": 1, "go": 1, "go-type": 1, "https": 1, "if": 4, "in": 1, "input": 1, "int": 1, "is": 3, "kept": 1, "line": 2, "list": 1, "nil": 1, "nodetype": 1, "non-empty": 1, "number": 1, "of": 1, "or": 1, "parse": 2, "pipe": 1, "pipeline": 1, "pos": 1, "range": 1, "representation": 1, "struct": 1, "the": 6, "to": 3, "type": 4, "unexported": 1, "value": 2, "what": 2, "with": 1, "¶": 2 }, "length": 82 }, { "id": "62a78e96771c397875865c0b", "doc_id": "fbd27702aebcab436bc10c42", "title": "parse.type BreakNode added in go1.18", "url": "https://pkg.go.dev/parse#type BreakNode ¶\n \n \n added in\n go1.18", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-breaknode-added-in-go1.18.json", "content": "# type parse.type BreakNode ¶ added in go1.18 ``` type BreakNode struct { NodeType Pos Line int // contains filtered or unexported fields } ``` BreakNode represents a {{break}} action.", "term_freq": { "//": 1, "//pkg": 1, "18": 3, "action": 1, "added": 3, "break": 1, "breaknode": 5, "contains": 1, "dev/parse#type": 1, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "go1": 3, "https": 1, "in": 3, "int": 1, "line": 1, "nodetype": 1, "or": 1, "parse": 2, "pos": 1, "represents": 1, "struct": 1, "type": 4, "unexported": 1, "¶": 2 }, "length": 44 }, { "id": "34dd3c13e6c5177196fa23ed", "doc_id": "bc7091407c43c1b61d2e60ef", "title": "parse.type ChainNode added in go1.1", "url": "https://pkg.go.dev/parse#type ChainNode ¶\n \n \n added in\n go1.1", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-chainnode-added-in-go1.1.json", "content": "# type parse.type ChainNode ¶ added in go1.1 ``` type ChainNode struct { NodeType Pos Node Node Field []string // The identifiers in lexical order. // contains filtered or unexported fields } ``` ChainNode holds a term followed by a chain of field accesses (identifier starting with '.'). The names may be chained ('.x.y'). The periods are dropped from each ident.", "term_freq": { "//": 2, "//pkg": 1, "accesses": 1, "added": 3, "are": 1, "be": 1, "by": 1, "chain": 1, "chained": 1, "chainnode": 5, "contains": 1, "dev/parse#type": 1, "dropped": 1, "each": 1, "field": 2, "fields": 1, "filtered": 1, "followed": 1, "from": 1, "go": 1, "go-type": 1, "go1": 3, "holds": 1, "https": 1, "ident": 1, "identifier": 1, "identifiers": 1, "in": 4, "lexical": 1, "may": 1, "names": 1, "node": 2, "nodetype": 1, "of": 1, "or": 1, "order": 1, "parse": 2, "periods": 1, "pos": 1, "starting": 1, "string": 1, "struct": 1, "term": 1, "the": 3, "type": 4, "unexported": 1, "with": 1, "¶": 2 }, "length": 69 }, { "id": "abfc45ac3ef2c1e259c3fdf9", "doc_id": "2ad80c4ce75723c97cb02e07", "title": "parse.type CommandNode", "url": "https://pkg.go.dev/parse#type CommandNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-commandnode.json", "content": "# type parse.type CommandNode ¶ ``` type CommandNode struct { NodeType Pos Args []Node // Arguments in lexical order: Identifier, field, or constant. // contains filtered or unexported fields } ``` CommandNode holds a command (a pipeline inside an evaluating action).", "term_freq": { "//": 2, "//pkg": 1, "action": 1, "an": 1, "args": 1, "arguments": 1, "command": 1, "commandnode": 5, "constant": 1, "contains": 1, "dev/parse#type": 1, "evaluating": 1, "field": 1, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "holds": 1, "https": 1, "identifier": 1, "in": 1, "inside": 1, "lexical": 1, "node": 1, "nodetype": 1, "or": 2, "order": 1, "parse": 2, "pipeline": 1, "pos": 1, "struct": 1, "type": 4, "unexported": 1, "¶": 2 }, "length": 45 }, { "id": "d66333c016f5dd6921129955", "doc_id": "374ee328927b9467ad611955", "title": "parse.type CommentNode added in go1.16", "url": "https://pkg.go.dev/parse#type CommentNode ¶\n \n \n added in\n go1.16", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-commentnode-added-in-go1.16.json", "content": "# type parse.type CommentNode ¶ added in go1.16 ``` type CommentNode struct { NodeType Pos Text string // Comment text. // contains filtered or unexported fields } ``` CommentNode holds a comment.", "term_freq": { "//": 2, "//pkg": 1, "16": 3, "added": 3, "comment": 2, "commentnode": 5, "contains": 1, "dev/parse#type": 1, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "go1": 3, "holds": 1, "https": 1, "in": 3, "nodetype": 1, "or": 1, "parse": 2, "pos": 1, "string": 1, "struct": 1, "text": 2, "type": 4, "unexported": 1, "¶": 2 }, "length": 46 }, { "id": "9cb6d46877a0f07ad7ca4674", "doc_id": "1c40cd23485fb27524805b62", "title": "parse.type ContinueNode added in go1.18", "url": "https://pkg.go.dev/parse#type ContinueNode ¶\n \n \n added in\n go1.18", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-continuenode-added-in-go1.18.json", "content": "# type parse.type ContinueNode ¶ added in go1.18 ``` type ContinueNode struct { NodeType Pos Line int // contains filtered or unexported fields } ``` ContinueNode represents a {{continue}} action.", "term_freq": { "//": 1, "//pkg": 1, "18": 3, "action": 1, "added": 3, "contains": 1, "continue": 1, "continuenode": 5, "dev/parse#type": 1, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "go1": 3, "https": 1, "in": 3, "int": 1, "line": 1, "nodetype": 1, "or": 1, "parse": 2, "pos": 1, "represents": 1, "struct": 1, "type": 4, "unexported": 1, "¶": 2 }, "length": 44 }, { "id": "5e92a4ab6a47b1dfe525c3e0", "doc_id": "303fd04aa37cd2a580eb434d", "title": "parse.type DotNode", "url": "https://pkg.go.dev/parse#type DotNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-dotnode.json", "content": "# type parse.type DotNode ¶ ``` type DotNode struct { NodeType Pos // contains filtered or unexported fields } ``` DotNode holds the special identifier '.'.", "term_freq": { "//": 1, "//pkg": 1, "contains": 1, "dev/parse#type": 1, "dotnode": 5, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "holds": 1, "https": 1, "identifier": 1, "nodetype": 1, "or": 1, "parse": 2, "pos": 1, "special": 1, "struct": 1, "the": 1, "type": 4, "unexported": 1, "¶": 2 }, "length": 31 }, { "id": "c980b8b84e409606474825d8", "doc_id": "3f1e4feaeb4f679a1b2e9c61", "title": "parse.type FieldNode", "url": "https://pkg.go.dev/parse#type FieldNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-fieldnode.json", "content": "# type parse.type FieldNode ¶ ``` type FieldNode struct { NodeType Pos Ident []string // The identifiers in lexical order. // contains filtered or unexported fields } ``` FieldNode holds a field (identifier starting with '.'). The names may be chained ('.x.y'). The period is dropped from each ident.", "term_freq": { "//": 2, "//pkg": 1, "be": 1, "chained": 1, "contains": 1, "dev/parse#type": 1, "dropped": 1, "each": 1, "field": 1, "fieldnode": 5, "fields": 1, "filtered": 1, "from": 1, "go": 1, "go-type": 1, "holds": 1, "https": 1, "ident": 2, "identifier": 1, "identifiers": 1, "in": 1, "is": 1, "lexical": 1, "may": 1, "names": 1, "nodetype": 1, "or": 1, "order": 1, "parse": 2, "period": 1, "pos": 1, "starting": 1, "string": 1, "struct": 1, "the": 3, "type": 4, "unexported": 1, "with": 1, "¶": 2 }, "length": 52 }, { "id": "91605e7bb67c6db26885b089", "doc_id": "cda96b5572403b7120911e67", "title": "parse.type IdentifierNode", "url": "https://pkg.go.dev/parse#type IdentifierNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-identifiernode.json", "content": "# type parse.type IdentifierNode ¶ ``` type IdentifierNode struct { NodeType Pos Ident string // The identifier's name. // contains filtered or unexported fields } ``` IdentifierNode holds an identifier.", "term_freq": { "//": 2, "//pkg": 1, "an": 1, "contains": 1, "dev/parse#type": 1, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "holds": 1, "https": 1, "ident": 1, "identifier": 2, "identifiernode": 5, "name": 1, "nodetype": 1, "or": 1, "parse": 2, "pos": 1, "string": 1, "struct": 1, "the": 1, "type": 4, "unexported": 1, "¶": 2 }, "length": 36 }, { "id": "a72a57de432bf3b3a9186da5", "doc_id": "14f09f46f9f78817e63ee143", "title": "parse.type IfNode", "url": "https://pkg.go.dev/parse#type IfNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-ifnode.json", "content": "# type parse.type IfNode ¶ ``` type IfNode struct { BranchNode } ``` IfNode represents an {{if}} action and its commands.", "term_freq": { "//pkg": 1, "action": 1, "an": 1, "and": 1, "branchnode": 1, "commands": 1, "dev/parse#type": 1, "go": 1, "go-type": 1, "https": 1, "if": 1, "ifnode": 5, "its": 1, "parse": 2, "represents": 1, "struct": 1, "type": 4, "¶": 2 }, "length": 27 }, { "id": "ddfedf2092281bafedca947d", "doc_id": "546d14d551662371f863bf6a", "title": "parse.type ListNode", "url": "https://pkg.go.dev/parse#type ListNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-listnode.json", "content": "# type parse.type ListNode ¶ ``` type ListNode struct { NodeType Pos Nodes []Node // The element nodes in lexical order. // contains filtered or unexported fields } ``` ListNode holds a sequence of nodes.", "term_freq": { "//": 2, "//pkg": 1, "contains": 1, "dev/parse#type": 1, "element": 1, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "holds": 1, "https": 1, "in": 1, "lexical": 1, "listnode": 5, "node": 1, "nodes": 3, "nodetype": 1, "of": 1, "or": 1, "order": 1, "parse": 2, "pos": 1, "sequence": 1, "struct": 1, "the": 1, "type": 4, "unexported": 1, "¶": 2 }, "length": 40 }, { "id": "9beb5eac9d60aee81866ebac", "doc_id": "3f54e2267540961b4050e335", "title": "parse.type Mode added in go1.16", "url": "https://pkg.go.dev/parse#type Mode ¶\n \n \n added in\n go1.16", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-mode-added-in-go1.16.json", "content": "# type parse.type Mode ¶ added in go1.16 ``` type Mode uint ``` A Mode value is a set of flags (or 0). Modes control parser behavior.", "term_freq": { "//pkg": 1, "16": 3, "added": 3, "behavior": 1, "control": 1, "dev/parse#type": 1, "flags": 1, "go": 1, "go-type": 1, "go1": 3, "https": 1, "in": 3, "is": 1, "mode": 5, "modes": 1, "of": 1, "or": 1, "parse": 2, "parser": 1, "set": 1, "type": 4, "uint": 1, "value": 1, "¶": 2 }, "length": 41 }, { "id": "3884e6bff2c4f126284b018e", "doc_id": "1cd8b0351e966a641775c36a", "title": "parse.type NilNode added in go1.1", "url": "https://pkg.go.dev/parse#type NilNode ¶\n \n \n added in\n go1.1", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-nilnode-added-in-go1.1.json", "content": "# type parse.type NilNode ¶ added in go1.1 ``` type NilNode struct { NodeType Pos // contains filtered or unexported fields } ``` NilNode holds the special identifier 'nil' representing an untyped nil constant.", "term_freq": { "//": 1, "//pkg": 1, "added": 3, "an": 1, "constant": 1, "contains": 1, "dev/parse#type": 1, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "go1": 3, "holds": 1, "https": 1, "identifier": 1, "in": 3, "nil": 2, "nilnode": 5, "nodetype": 1, "or": 1, "parse": 2, "pos": 1, "representing": 1, "special": 1, "struct": 1, "the": 1, "type": 4, "unexported": 1, "untyped": 1, "¶": 2 }, "length": 46 }, { "id": "6592afad5262d1d236ebf3a3", "doc_id": "119607276a2c29c097a57ee2", "title": "parse.type Node", "url": "https://pkg.go.dev/parse#type Node ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-node.json", "content": "# type parse.type Node ¶ ``` type Node interface { Type() NodeType String() string // Copy does a deep copy of the Node and all its components. // To avoid type assertions, some XxxNodes also have specialized // CopyXxx methods that return *XxxNode. Copy() Node Position() Pos // byte position of start of node in full original input string // contains filtered or unexported methods } ``` A Node is an element in the parse tree. The interface is trivial. The interface contains an unexported method so that only types local to this package can satisfy it.", "term_freq": { "*xxxnode": 1, "//": 5, "//pkg": 1, "all": 1, "also": 1, "an": 2, "and": 1, "assertions": 1, "avoid": 1, "byte": 1, "can": 1, "components": 1, "contains": 2, "copy": 3, "copyxxx": 1, "deep": 1, "dev/parse#type": 1, "does": 1, "element": 1, "filtered": 1, "full": 1, "go": 1, "go-type": 1, "have": 1, "https": 1, "in": 2, "input": 1, "interface": 3, "is": 2, "it": 1, "its": 1, "local": 1, "method": 1, "methods": 2, "node": 8, "nodetype": 1, "of": 3, "only": 1, "or": 1, "original": 1, "package": 1, "parse": 3, "pos": 1, "position": 2, "return": 1, "satisfy": 1, "so": 1, "some": 1, "specialized": 1, "start": 1, "string": 3, "that": 2, "the": 4, "this": 1, "to": 2, "tree": 1, "trivial": 1, "type": 6, "types": 1, "unexported": 2, "xxxnodes": 1, "¶": 2 }, "length": 101 }, { "id": "7d081f2def5ab1af1b06dd38", "doc_id": "effe1371772126c2e870de1f", "title": "parse.type NodeType", "url": "https://pkg.go.dev/parse#type NodeType ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-nodetype.json", "content": "# type parse.type NodeType ¶ ``` type NodeType int ``` NodeType identifies the type of a parse tree node.", "term_freq": { "//pkg": 1, "dev/parse#type": 1, "go": 1, "go-type": 1, "https": 1, "identifies": 1, "int": 1, "node": 1, "nodetype": 5, "of": 1, "parse": 3, "the": 1, "tree": 1, "type": 5, "¶": 2 }, "length": 26 }, { "id": "797d383e08e262c4bfcf0732", "doc_id": "06613dfa7e5d3e0d85f14e2d", "title": "parse.type NumberNode", "url": "https://pkg.go.dev/parse#type NumberNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-numbernode.json", "content": "# type parse.type NumberNode ¶ ``` type NumberNode struct { NodeType Pos IsInt bool // Number has an integral value. IsUint bool // Number has an unsigned integral value. IsFloat bool // Number has a floating-point value. IsComplex bool // Number is complex. Int64 int64 // The signed integer value. Uint64 uint64 // The unsigned integer value. Float64 float64 // The floating-point value. Complex128 complex128 // The complex value. Text string // The original textual representation from the input. // contains filtered or unexported fields } ``` NumberNode holds a number: signed or unsigned integer, float, or complex. The value is parsed and stored under all the types that can represent the value. This simulates in a small amount of code the behavior of Go's ideal constants.", "term_freq": { "//": 10, "//pkg": 1, "all": 1, "amount": 1, "an": 2, "and": 1, "behavior": 1, "bool": 4, "can": 1, "code": 1, "complex": 3, "complex128": 2, "constants": 1, "contains": 1, "dev/parse#type": 1, "fields": 1, "filtered": 1, "float": 1, "float64": 2, "floating-point": 2, "from": 1, "go": 2, "go-type": 1, "has": 3, "holds": 1, "https": 1, "ideal": 1, "in": 1, "input": 1, "int64": 2, "integer": 3, "integral": 2, "is": 2, "iscomplex": 1, "isfloat": 1, "isint": 1, "isuint": 1, "nodetype": 1, "number": 5, "numbernode": 5, "of": 2, "or": 3, "original": 1, "parse": 2, "parsed": 1, "pos": 1, "represent": 1, "representation": 1, "signed": 2, "simulates": 1, "small": 1, "stored": 1, "string": 1, "struct": 1, "text": 1, "textual": 1, "that": 1, "the": 10, "this": 1, "type": 4, "types": 1, "uint64": 2, "under": 1, "unexported": 1, "unsigned": 3, "value": 9, "¶": 2 }, "length": 130 }, { "id": "67f7170faf96b3e608129960", "doc_id": "5f5d9a9a2821de9e2fd351a4", "title": "parse.type PipeNode", "url": "https://pkg.go.dev/parse#type PipeNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-pipenode.json", "content": "# type parse.type PipeNode ¶ ``` type PipeNode struct { NodeType Pos Line int // The line number in the input. Deprecated: Kept for compatibility. IsAssign bool // The variables are being assigned, not declared. Decl []*VariableNode // Variables in lexical order. Cmds []*CommandNode // The commands in lexical order. // contains filtered or unexported fields } ``` PipeNode holds a pipeline with optional declaration", "term_freq": { "*commandnode": 1, "*variablenode": 1, "//": 5, "//pkg": 1, "are": 1, "assigned": 1, "being": 1, "bool": 1, "cmds": 1, "commands": 1, "compatibility": 1, "contains": 1, "decl": 1, "declaration": 1, "declared": 1, "deprecated": 1, "dev/parse#type": 1, "fields": 1, "filtered": 1, "for": 1, "go": 1, "go-type": 1, "holds": 1, "https": 1, "in": 3, "input": 1, "int": 1, "isassign": 1, "kept": 1, "lexical": 2, "line": 2, "nodetype": 1, "not": 1, "number": 1, "optional": 1, "or": 1, "order": 2, "parse": 2, "pipeline": 1, "pipenode": 5, "pos": 1, "struct": 1, "the": 4, "type": 4, "unexported": 1, "variables": 2, "with": 1, "¶": 2 }, "length": 70 }, { "id": "ac1edbcb69df7db5e86cb10f", "doc_id": "ac860c015fda3a3aa0aa0f3f", "title": "parse.type Pos added in go1.1", "url": "https://pkg.go.dev/parse#type Pos ¶\n \n \n added in\n go1.1", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-pos-added-in-go1.1.json", "content": "# type parse.type Pos ¶ added in go1.1 ``` type Pos int ``` Pos represents a byte position in the original input text from which this template was parsed.", "term_freq": { "//pkg": 1, "added": 3, "byte": 1, "dev/parse#type": 1, "from": 1, "go": 1, "go-type": 1, "go1": 3, "https": 1, "in": 4, "input": 1, "int": 1, "original": 1, "parse": 2, "parsed": 1, "pos": 5, "position": 1, "represents": 1, "template": 1, "text": 1, "the": 1, "this": 1, "type": 4, "was": 1, "which": 1, "¶": 2 }, "length": 42 }, { "id": "3834ab91d47df3004b182ca3", "doc_id": "93ea2ffdb81e2433a7257aa7", "title": "parse.type RangeNode", "url": "https://pkg.go.dev/parse#type RangeNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-rangenode.json", "content": "# type parse.type RangeNode ¶ ``` type RangeNode struct { BranchNode } ``` RangeNode represents a {{range}} action and its commands.", "term_freq": { "//pkg": 1, "action": 1, "and": 1, "branchnode": 1, "commands": 1, "dev/parse#type": 1, "go": 1, "go-type": 1, "https": 1, "its": 1, "parse": 2, "range": 1, "rangenode": 5, "represents": 1, "struct": 1, "type": 4, "¶": 2 }, "length": 26 }, { "id": "3e8e3abcbe921a29a8348a2e", "doc_id": "8715831b964b5eb0bbaf1751", "title": "parse.type StringNode", "url": "https://pkg.go.dev/parse#type StringNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-stringnode.json", "content": "# type parse.type StringNode ¶ ``` type StringNode struct { NodeType Pos Quoted string // The original text of the string, with quotes. Text string // The string, after quote processing. // contains filtered or unexported fields } ``` StringNode holds a string constant. The value has been \"unquoted\".", "term_freq": { "//": 3, "//pkg": 1, "after": 1, "been": 1, "constant": 1, "contains": 1, "dev/parse#type": 1, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "has": 1, "holds": 1, "https": 1, "nodetype": 1, "of": 1, "or": 1, "original": 1, "parse": 2, "pos": 1, "processing": 1, "quote": 1, "quoted": 1, "quotes": 1, "string": 5, "stringnode": 5, "struct": 1, "text": 2, "the": 4, "type": 4, "unexported": 1, "unquoted": 1, "value": 1, "with": 1, "¶": 2 }, "length": 54 }, { "id": "8e0a1b01a399f5c0f3ede7f0", "doc_id": "738116db18502e4ece52f7be", "title": "parse.type TemplateNode", "url": "https://pkg.go.dev/parse#type TemplateNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-templatenode.json", "content": "# type parse.type TemplateNode ¶ ``` type TemplateNode struct { NodeType Pos Line int // The line number in the input. Deprecated: Kept for compatibility. Name string // The name of the template (unquoted). Pipe *PipeNode // The command to evaluate as dot for the template. // contains filtered or unexported fields } ``` TemplateNode represents a {{template}} action.", "term_freq": { "*pipenode": 1, "//": 4, "//pkg": 1, "action": 1, "as": 1, "command": 1, "compatibility": 1, "contains": 1, "deprecated": 1, "dev/parse#type": 1, "dot": 1, "evaluate": 1, "fields": 1, "filtered": 1, "for": 2, "go": 1, "go-type": 1, "https": 1, "in": 1, "input": 1, "int": 1, "kept": 1, "line": 2, "name": 2, "nodetype": 1, "number": 1, "of": 1, "or": 1, "parse": 2, "pipe": 1, "pos": 1, "represents": 1, "string": 1, "struct": 1, "template": 3, "templatenode": 5, "the": 6, "to": 1, "type": 4, "unexported": 1, "unquoted": 1, "¶": 2 }, "length": 64 }, { "id": "26fcf88eea4c30a265a007cd", "doc_id": "b4c775197dfc19f1cc67166f", "title": "parse.type TextNode", "url": "https://pkg.go.dev/parse#type TextNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-textnode.json", "content": "# type parse.type TextNode ¶ ``` type TextNode struct { NodeType Pos Text []byte // The text; may span newlines. // contains filtered or unexported fields } ``` TextNode holds plain text.", "term_freq": { "//": 2, "//pkg": 1, "byte": 1, "contains": 1, "dev/parse#type": 1, "fields": 1, "filtered": 1, "go": 1, "go-type": 1, "holds": 1, "https": 1, "may": 1, "newlines": 1, "nodetype": 1, "or": 1, "parse": 2, "plain": 1, "pos": 1, "span": 1, "struct": 1, "text": 3, "textnode": 5, "the": 1, "type": 4, "unexported": 1, "¶": 2 }, "length": 38 }, { "id": "151462e53c6165585222dcef", "doc_id": "6a58242bf463b2ffea441579", "title": "parse.type Tree", "url": "https://pkg.go.dev/parse#type Tree ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-tree.json", "content": "# type parse.type Tree ¶ ``` type Tree struct { Name string // name of the template represented by the tree. ParseName string // name of the top-level template during parsing, for error messages. Root *ListNode // top-level root of the tree. Mode Mode // parsing mode. // contains filtered or unexported fields } ``` Tree is the representation of a single parsed template.", "term_freq": { "*listnode": 1, "//": 5, "//pkg": 1, "by": 1, "contains": 1, "dev/parse#type": 1, "during": 1, "error": 1, "fields": 1, "filtered": 1, "for": 1, "go": 1, "go-type": 1, "https": 1, "is": 1, "messages": 1, "mode": 3, "name": 3, "of": 4, "or": 1, "parse": 2, "parsed": 1, "parsename": 1, "parsing": 2, "representation": 1, "represented": 1, "root": 2, "single": 1, "string": 2, "struct": 1, "template": 3, "the": 5, "top-level": 2, "tree": 7, "type": 4, "unexported": 1, "¶": 2 }, "length": 69 }, { "id": "8635f2b14f258c37e1469355", "doc_id": "8bf43e7d353ac36a1580c42e", "title": "parse.type VariableNode", "url": "https://pkg.go.dev/parse#type VariableNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-variablenode.json", "content": "# type parse.type VariableNode ¶ ``` type VariableNode struct { NodeType Pos Ident []string // Variable name and fields in lexical order. // contains filtered or unexported fields } ``` VariableNode holds a list of variable names, possibly with chained field accesses. The dollar sign is part of the (first) name.", "term_freq": { "//": 2, "//pkg": 1, "accesses": 1, "and": 1, "chained": 1, "contains": 1, "dev/parse#type": 1, "dollar": 1, "field": 1, "fields": 2, "filtered": 1, "first": 1, "go": 1, "go-type": 1, "holds": 1, "https": 1, "ident": 1, "in": 1, "is": 1, "lexical": 1, "list": 1, "name": 2, "names": 1, "nodetype": 1, "of": 2, "or": 1, "order": 1, "parse": 2, "part": 1, "pos": 1, "possibly": 1, "sign": 1, "string": 1, "struct": 1, "the": 2, "type": 4, "unexported": 1, "variable": 2, "variablenode": 5, "with": 1, "¶": 2 }, "length": 56 }, { "id": "b1f27c4f54f63649dd6f5cfa", "doc_id": "8da70c00afa975077df86db9", "title": "parse.type WithNode", "url": "https://pkg.go.dev/parse#type WithNode ¶", "type": "go-type", "source": "go:parse", "path": "devour_data/docs/parse.type-withnode.json", "content": "# type parse.type WithNode ¶ ``` type WithNode struct { BranchNode } ``` WithNode represents a {{with}} action and its commands.", "term_freq": { "//pkg": 1, "action": 1, "and": 1, "branchnode": 1, "commands": 1, "dev/parse#type": 1, "go": 1, "go-type": 1, "https": 1, "its": 1, "parse": 2, "represents": 1, "struct": 1, "type": 4, "with": 1, "withnode": 5, "¶": 2 }, "length": 26 }, { "id": "5c01260e54d1fbab82106c67", "doc_id": "8167ab42f078ad91629aa3db", "title": "path-parameters", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/path-parameters.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/path-parameters.json", "content": "--- title: Path parameters use_cases: \u003e- dynamic content, user profiles, resource ids, filtering data, validation, flexible routing tags: - parameters - validation - dynamic - wildcards - routing version: '1.0' description: \u003e- Capture and validate dynamic URL parameters in SolidJS routes for flexible content display and data-driven pages. --- Parameters within a route are used to capture dynamic values from the URL. This is useful for creating routes that are more flexible and can handle different values. ```jsx \u003cRoute path=\"/users/:id\" component={User} /\u003e ``` In this example, the `:id` parameter will capture any value that comes after `/users/` in the URL. The colon `:` is used to denote a parameter, and `id` is the name of the parameter. When a URL matches this route, the `User` component will be rendered. :::note[Animations \u0026 Transitions] Routes that share the same path match will be treated as the same route. If a force re-render is needed, you can wrap your component in a keyed [`Show`](/reference/components/show) component: ```jsx \u003cShow when={params.something} keyed\u003e \u003cMyComponent /\u003e \u003c/Show\u003e ``` ::: ## Accessing parameters You can retrieve the values captured by parameters using [`useParams`](/solid-router/reference/primitives/use-params). ```jsx frame=\"terminal\" title=\"http://localhost:3000/users/123\" import { useParams } from \"@solidjs/router\"; function User() { const params = useParams(); return \u003cdiv\u003eUser ID: {params.id}\u003c/div\u003e; {/* Output: User ID: 123 */} } ``` ## Validating parameters Each path parameter can be validated using the `MatchFilter` on the `Route` component. Rather than checking for the presence of a parameter manually, you can use a `MatchFilter` to ensure that the parameter is in the correct format. ```jsx import { lazy } from \"solid-js\"; import { render } from \"solid-js/web\"; import { Router, Route } from \"@solidjs/router\"; const User = import(\"./pages/User\"); const filters = { parent: [\"mom\", \"dad\"], // allow enum values id: /^\\d+$/, // only allow numbers withHtmlExtension: (v: string) =\u003e v.length \u003e 5 \u0026\u0026 v.endsWith(\".html\"), // we want an `*.html` extension }; render(() =\u003e ( \u003cRouter\u003e \u003cRoute path=\"/users/:parent/:id/:withHtmlExtension\" component={User} matchFilters={filters} /\u003e \u003c/Router\u003e ), document.getElementById(\"app\")); ``` Here, the `matchFilter` prop validates the `parent`, `id`, and `withHtmlExtension` parameters against the specified filters defined in the `filters` object. If the validation fails, the route will not match and the component will not be rendered. In this example, that means: - `/users/mom/123/contact.html` would match, - `/users/dad/456/about.html` would match, - `/users/aunt/123/contact.html` would not match as `:parent` is not 'mom' or 'dad', - `/users/mom/me/contact.html` would not match as `:id` is not a number, - `/users/dad/123/contact` would not match as `:withHtmlExtension` is missing .html. ## Optional parameters Parameters can be made optional by adding a `?` after the parameter name. ```jsx \u003cRoute path=\"/users/:id?\" component={User} /\u003e ``` With this setup, the route would match both `/users` and `/users/123`. However, it is important to note that the `?` only makes the parameter optional for the last segment of the path. As a result, paths beyond the optional parameter will _not_ be matched. For instance, `/users/123/contact` would not match. ## Wildcard routes Wildcard routes can be used to match any number of segments in a path. To create a wildcard route, use `*` followed by the parameter name. ```jsx \u003cRoute path=\"/users/*\" component={User} /\u003e ``` Using an asterisk `*` as a parameter will match any number of segments after `/users`. This includes `/users`, `/users/123`, `/users/123/contact`, and so on. If you need to expose the wildcard segments of the path, you can name them: ```jsx \u003cRoute path=\"/users/*rest\" component={User} /\u003e ``` In this case, `rest` will contain the rest of the path after `/users/`. It is important to note that wildcard routes must be located at the **end of the path**. If you place a wildcard route before the end, such as `/users/*rest/:id`, no routes will be matched.", "term_freq": { "##": 4, "\u0026\u0026": 1, "**end": 1, "*/": 1, "---": 2, "/*": 1, "//": 3, "//github": 1, "//localhost": 1, "/\u003e": 6, "/^\\d+$/": 1, "/pages/user": 1, "/reference/components/show": 1, "/solid-router/reference/primitives/use-params": 1, "/users": 3, "/users/": 5, "/users/*": 1, "/users/*rest": 1, "/users/*rest/": 1, "/users/123": 2, "/users/123/contact": 2, "/users/aunt/123/contact": 1, "/users/dad/123/contact": 1, "/users/dad/456/about": 1, "/users/mom/123/contact": 1, "/users/mom/me/contact": 1, "123": 1, "3000/users/123": 1, "\u003c/div\u003e": 1, "\u003c/router\u003e": 1, "\u003c/show\u003e": 1, "\u003cdiv\u003euser": 1, "\u003cmycomponent": 1, "\u003croute": 5, "\u003crouter\u003e": 1, "\u003cshow": 1, "=\u003e": 2, "\u003e-": 2, "@solidjs/router": 2, "_not_": 1, "accessing": 1, "adding": 1, "after": 4, "against": 1, "allow": 2, "an": 2, "and": 8, "animations": 1, "any": 3, "app": 1, "are": 2, "as": 7, "asterisk": 1, "at": 1, "be": 9, "before": 1, "beyond": 1, "both": 1, "by": 3, "can": 8, "capture": 3, "captured": 1, "case": 1, "checking": 1, "colon": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/concepts/path-parameters": 1, "comes": 1, "component": 5, "component=": 5, "const": 3, "contain": 1, "content": 2, "correct": 1, "create": 1, "creating": 1, "dad": 2, "data": 1, "data-driven": 1, "defined": 1, "denote": 1, "description": 1, "different": 1, "display": 1, "document": 1, "dynamic": 4, "each": 1, "end": 1, "endswith": 1, "ensure": 1, "enum": 1, "example": 2, "expose": 1, "extension": 1, "fails": 1, "filtering": 1, "filters": 4, "flexible": 3, "followed": 1, "for": 5, "force": 1, "format": 1, "frame=": 1, "from": 5, "function": 1, "getelementbyid": 1, "github-document": 1, "handle": 1, "here": 1, "however": 1, "html": 7, "http": 1, "https": 1, "id": 11, "id/": 1, "ids": 1, "if": 4, "import": 5, "important": 2, "in": 9, "includes": 1, "instance": 1, "is": 10, "it": 2, "jsx": 7, "keyed": 1, "keyed\u003e": 1, "last": 1, "lazy": 1, "length": 1, "located": 1, "made": 1, "makes": 1, "manually": 1, "match": 11, "matched": 2, "matches": 1, "matchfilter": 3, "matchfilters=": 1, "mdx": 1, "means": 1, "missing": 1, "mom": 2, "more": 1, "must": 1, "name": 4, "need": 1, "needed": 1, "no": 1, "not": 8, "note": 3, "number": 3, "numbers": 1, "object": 1, "of": 8, "on": 2, "only": 2, "optional": 4, "or": 1, "output": 1, "pages": 1, "parameter": 11, "parameters": 10, "params": 3, "parent": 3, "parent/": 1, "path": 7, "path**": 1, "path-parameters": 1, "path=": 5, "paths": 1, "place": 1, "presence": 1, "profiles": 1, "prop": 1, "rather": 1, "re-render": 1, "render": 2, "rendered": 2, "resource": 1, "rest": 2, "result": 1, "retrieve": 1, "return": 1, "route": 9, "router": 1, "routes": 7, "routing": 2, "same": 2, "segment": 1, "segments": 3, "setup": 1, "share": 1, "show": 1, "so": 1, "solid-js": 1, "solid-js/web": 1, "solidjs": 1, "something": 1, "specified": 1, "string": 1, "such": 1, "tags": 1, "terminal": 1, "than": 1, "that": 7, "the": 37, "them": 1, "this": 7, "title": 1, "title=": 1, "to": 8, "transitions": 1, "treated": 1, "url": 4, "use": 2, "use_cases": 1, "used": 3, "useful": 1, "useparams": 3, "user": 10, "using": 3, "validate": 1, "validated": 1, "validates": 1, "validating": 1, "validation": 3, "value": 1, "values": 4, "version": 1, "want": 1, "we": 1, "when": 1, "when=": 1, "wildcard": 6, "wildcards": 1, "will": 9, "with": 1, "withhtmlextension": 4, "within": 1, "would": 7, "wrap": 1, "you": 6, "your": 1 }, "length": 586 }, { "id": "5b8cc299ff02319ac27d7b8a", "doc_id": "2891232b52db9c185a596e80", "title": "Pending UI | Remix", "url": "https://v2.remix.run/docs/discussion/pending-ui", "type": "html", "source": "remix:does", "path": "devour_data/docs/pending-ui---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsPending UIGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pagePending UI MechanismsGuiding Principles for SelectionExamplesPage NavigationPending LinksRecord CreationRecord UpdatesDeferred Data LoadingConclusionOn this pagePending UI MechanismsGuiding Principles for SelectionExamplesPage NavigationPending LinksRecord CreationRecord UpdatesDeferred Data LoadingConclusionPending and Optimistic UI The difference between a great user experience on the web and a mediocre one is how well the developer implements network-aware user interface by providing visual cues during network-intensive actions. There are three main types of pending UI: busy indicators, optimistic UI, and skeleton fallbacks. This document provides guidelines for selecting and implementing the appropriate mechanism based on specific scenarios. Pending UI Mechanisms Busy Indicators: Busy indicators display visual cues to users while the server is processing an action. This mechanism is used when the application cannot predict the outcome of the action and must wait for the server's response before updating the UI. Optimistic UI: Optimistic UI enhances perceived speed and responsiveness by immediately updating the UI with an expected state before the server's response is received. This approach is used when the application can predict the outcome of an action based on context and user input, allowing for an immediate response to actions. Skeleton Fallbacks: Skeleton fallbacks are used when the UI is initially loading, providing users with a visual placeholder that outlines the structure of the upcoming content. This mechanism is particularly useful to render something useful as soon as possible. Guiding Principles for Selection Use Optimistic UI: Next State Predictability: The application can accurately predict the next state of the UI based on the user's action. Error Handling: Robust error handling mechanisms are in place to address potential errors that may occur during the process. URL Stability: The action does not result in a change of the URL, ensuring that the user remains within the same page. Use Busy Indicators: Next State Uncertainty: The outcome of the action cannot be reliably predicted, necessitating waiting for the server's response. URL Change: The action leads to a change in the URL, indicating navigation to a new page or section. Error Boundaries: The error handling approach primarily relies on error boundaries that manage exceptions and unexpected behavior. Side Effects: The action triggers side effects that involve critical processes, such as sending email, processing payments, etc. Use Skeleton Fallbacks: Initial Loading: The UI is in the process of loading, providing users with a visual indication of the upcoming content structure. Critical Data: The data is not critical for the initial rendering of the page, allowing the skeleton fallback to be displayed while the data is loading. App-Like Feel: The application is designed to resemble the behavior of a standalone app, allowing for immediate transitions to the fallbacks. Examples Page Navigation Busy Indicator: You can indicate the user is navigating to a new page with useNavigation: import { useNavigation } from \"@remix-run/react\"; function PendingNavigation() { const navigation = useNavigation(); return navigation.state === \"loading\" ? ( \u003cdiv className=\"spinner\" /\u003e ) : null; } Pending Links Busy Indicator: You can indicate on the nav link itself that the user is navigating to it with the \u003cNavLink className\u003e callback. import { NavLink } from \"@remix-run/react\"; export function ProjectList({ projects }) { return ( \u003cnav\u003e {projects.map((project) =\u003e ( \u003cNavLink key={project.id} to={project.id} className={({ isPending }) =\u003e isPending ? \"pending\" : null } \u003e {project.name} \u003c/NavLink\u003e ))} \u003c/nav\u003e ); } Or add a spinner next to it by inspecting params: import { useParams } from \"@remix-run/react\"; export function ProjectList({ projects }) { const params = useParams(); return ( \u003cnav\u003e {projects.map((project) =\u003e ( \u003cNavLink key={project.id} to={project.id}\u003e {project.name} {params.projectId === project.id ? ( \u003cSpinner /\u003e ) : null} \u003c/NavLink\u003e ))} \u003c/nav\u003e ); } While localized indicators on links are nice, they are incomplete. There are many other ways a navigation can be triggered: form submissions, back and forward button clicks in the browser, action redirects, and imperative navigate(path) calls, so you'll typically want a global indicator to capture everything. Record Creation Busy Indicator: It's typically best to wait for a record to be created instead of using an optimistic UI since things like IDs and other fields are unknown until it completes. Also note this action redirects to the new record from the action. import type { ActionFunctionArgs } from \"@remix-run/node\"; // or cloudflare/deno import { redirect } from \"@remix-run/node\"; // or cloudflare/deno import { useNavigation } from \"@remix-run/react\"; export async function action({ request, }: ActionFunctionArgs) { const formData = await request.formData(); const project = await createRecord({ name: formData.get(\"name\"), owner: formData.get(\"owner\"), }); return redirect(`/projects/${project.id}`); } export default function CreateProject() { const navigation = useNavigation(); // important to check you're submitting to the action // for the pending UI, not just any action const isSubmitting = navigation.formAction === \"/create-project\"; return ( \u003cForm method=\"post\" action=\"/create-project\"\u003e \u003cfieldset disabled={isSubmitting}\u003e \u003clabel\u003e Name: \u003cinput type=\"text\" name=\"projectName\" /\u003e \u003c/label\u003e \u003clabel\u003e Owner: \u003cUserSelect /\u003e \u003c/label\u003e \u003cbutton type=\"submit\"\u003eCreate\u003c/button\u003e \u003c/fieldset\u003e {isSubmitting ? \u003cBusyIndicator /\u003e : null} \u003c/Form\u003e ); } You can do the same with useFetcher, which is useful if you aren't changing the URL (maybe adding the record to a list) import { useFetcher } from \"@remix-run/react\"; function CreateProject() { const fetcher = useFetcher(); const isSubmitting = fetcher.state === \"submitting\"; return ( \u003cfetcher.Form method=\"post\" action=\"/create-project\"\u003e {/* ... */} \u003c/fetcher.Form\u003e ); } Record Updates Optimistic UI: When the UI simply updates a field on a record, an optimistic UI is a great choice. Many, if not most user interactions in a web app tend to be updates, so this is a common pattern. import { useFetcher } from \"@remix-run/react\"; function ProjectListItem({ project }) { const fetcher = useFetcher(); const starred = fetcher.formData ? // use optimistic value if submitting fetcher.formData.get(\"starred\") === \"1\" : // fall back to the database state project.starred; return ( \u003c\u003e \u003cdiv\u003e{project.name}\u003c/div\u003e \u003cfetcher.Form method=\"post\"\u003e \u003cbutton type=\"submit\" name=\"starred\" // use optimistic value to allow interruptions value={starred ? \"0\" : \"1\"} \u003e {/* 👇 display optimistic value */} {starred ? \"★\" : \"☆\"} \u003c/button\u003e \u003c/fetcher.Form\u003e \u003c/\u003e ); } Deferred Data Loading Skeleton Fallback: When data is deferred, you can add fallbacks with \u003cSuspense\u003e. This allows the UI to render without waiting for the data to load, speeding up the perceived and actual performance of the application. import type { LoaderFunctionArgs } from \"@remix-run/node\"; // or cloudflare/deno import { defer } from \"@remix-run/node\"; // or cloudflare/deno import { Await } from \"@remix-run/react\"; import { Suspense } from \"react\"; export async function loader({ params, }: LoaderFunctionArgs) { const reviewsPromise = getReviews(params.productId); const product = await getProduct(params.productId); return defer({ product: product, reviews: reviewsPromise, }); } export default function ProductRoute() { const { product, reviews } = useLoaderData\u003ctypeof loader\u003e(); return ( \u003c\u003e \u003cProductPage product={product} /\u003e \u003cSuspense fallback={\u003cReviewsSkeleton /\u003e}\u003e \u003cAwait resolve={reviews}\u003e {(reviews) =\u003e \u003cReviews reviews={reviews} /\u003e} \u003c/Await\u003e \u003c/Suspense\u003e \u003c/\u003e ); } When creating skeleton fallbacks, consider the following principles: Consistent Size: Ensure that the skeleton fallbacks match the dimensions of the actual content. This prevents sudden layout shifts, providing a smoother and more visually cohesive loading experience. In terms of web performance, this trade-off minimizes Cumulative Layout Shift (CLS) in favor of improving First Contentful Paint (FCP). You can minimize the trade with accurate dimensions in the fallback. Critical Data: Avoid using fallbacks for essential information—the main content of the page. This is especially important for SEO and meta tags. If you delay showing critical data, accurate meta-tags can't be provided, and search engines won't correctly index your page. App-Like Feel: For web application UI that doesn't have SEO concerns, it can be beneficial to use skeleton fallbacks more extensively. This creates an interface that resembles the behavior of a standalone app. When users click on links, they get an instantaneous transition to the skeleton fallbacks. Link Prefetching: Using \u003cLink prefetch=\"intent\"\u003e can often skip the fallbacks completely. When users hover or focus on the link, this method preloads the necessary data, allowing the network a quick moment to fetch content before the user clicks. This often results in an immediate navigation to the next page. Conclusion Creating a network-aware UI via busy indicators, optimistic UI, and skeleton fallbacks significantly improves the user experience by showing visual cues during actions that require network interaction. Getting good at this is the best way to build applications your users trust.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_991\\\":-5,\\\"_992\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":990},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"docs/discussion/pending-ui.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"pending-and-optimistic-ui\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#pending-and-optimistic-ui\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePending and Optimistic UI\\u003c/h1\\u003e\\\\n\\u003cp\\u003eThe difference between a great user experience on the web and a mediocre one is how well the developer implements network-aware user interface by providing visual cues during network-intensive actions. There are three main types of pending UI: busy indicators, optimistic UI, and skeleton fallbacks. This document provides guidelines for selecting and implementing the appropriate mechanism based on specific scenarios.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"pending-ui- -mechanisms\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#pending-ui- -mechanisms\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePending UI Mechanisms\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eBusy Indicators\\u003c/strong\\u003e: Busy indicators display visual cues to users while the server is processing an \\u003ccode\\u003eaction\\u003c/code\\u003e. This mechanism is used when the application cannot predict the outcome of the action and must wait for the server's response before updating the UI.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eOptimistic UI\\u003c/strong\\u003e: Optimistic UI enhances perceived speed and responsiveness by immediately updating the UI with an expected state before the server's response is received. This approach is used when the application can predict the outcome of an action based on context and user input, allowing for an immediate response to actions.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eSkeleton Fallbacks\\u003c/strong\\u003e: Skeleton fallbacks are used when the UI is initially loading, providing users with a visual placeholder that outlines the structure of the upcoming content. This mechanism is particularly useful to render something useful as soon as possible.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"guiding-principles-for- -selection\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#guiding-principles-for- -selection\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eGuiding Principles for Selection\\u003c/h2\\u003e\\\\n\\u003cp\\u003eUse Optimistic UI:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eNext State Predictability\\u003c/strong\\u003e: The application can accurately predict the next state of the UI based on the user's action.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eError Handling\\u003c/strong\\u003e: Robust error handling mechanisms are in place to address potential errors that may occur during the process.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eURL Stability\\u003c/strong\\u003e: The action does not result in a change of the URL, ensuring that the user remains within the same page.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eUse Busy Indicators:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eNext State Uncertainty\\u003c/strong\\u003e: The outcome of the action cannot be reliably predicted, necessitating waiting for the server's response.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eURL Change\\u003c/strong\\u003e: The action leads to a change in the URL, indicating navigation to a new page or section.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eError Boundaries\\u003c/strong\\u003e: The error handling approach primarily relies on error boundaries that manage exceptions and unexpected behavior.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eSide Effects\\u003c/strong\\u003e: The action triggers side effects that involve critical processes, such as sending email, processing payments, etc.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eUse Skeleton Fallbacks:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eInitial Loading\\u003c/strong\\u003e: The UI is in the process of loading, providing users with a visual indication of the upcoming content structure.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eCritical Data\\u003c/strong\\u003e: The data is not critical for the initial rendering of the page, allowing the skeleton fallback to be displayed while the data is loading.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eApp-Like Feel\\u003c/strong\\u003e: The application is designed to resemble the behavior of a standalone app, allowing for immediate transitions to the fallbacks.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2 id=\\\\\\\"examples\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#examples\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eExamples\\u003c/h2\\u003e\\\\n\\u003ch3 id=\\\\\\\"page-navigation\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#page-navigation\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePage Navigation\\u003c/h3\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eBusy Indicator\\u003c/strong\\u003e: You can indicate the user is navigating to a new page with \\u003ca href=\\\\\\\"../hooks/use-navigation\\\\\\\"\\u003e\\u003ccode\\u003euseNavigation\\u003c/code\\u003e\\u003c/a\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ePendingNavigation\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eloading\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eclassName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003espinner\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3 id=\\\\\\\"pending-links\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#pending-links\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePending Links\\u003c/h3\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eBusy Indicator\\u003c/strong\\u003e: You can indicate on the nav link itself that the user is navigating to it with the \\u003ca href=\\\\\\\"../components/nav-link#classname-callback\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;NavLink className\\u003e\\u003c/code\\u003e\\u003c/a\\u003e callback.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eNavLink\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eProjectList\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprojects\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enav\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprojects\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emap\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eNavLink\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ekey\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eto\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eclassName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisPending\\u003c/span\\u003e }) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisPending\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epending\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eNavLink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e ))\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enav\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eOr add a spinner next to it by inspecting params:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseParams\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eProjectList\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprojects\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseParams\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enav\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprojects\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emap\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eNavLink\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ekey\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eto\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprojectId\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eSpinner\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eNavLink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e ))\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enav\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eWhile localized indicators on links are nice, they are incomplete. There are many other ways a navigation can be triggered: form submissions, back and forward button clicks in the browser, action redirects, and imperative \\u003ccode\\u003enavigate(path)\\u003c/code\\u003e calls, so you'll typically want a global indicator to capture everything.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"record-creation\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#record-creation\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRecord Creation\\u003c/h3\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eBusy Indicator\\u003c/strong\\u003e: It's typically best to wait for a record to be created instead of using an optimistic UI since things like IDs and other fields are unknown until it completes. Also note this action redirects to the new record from the action.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/create-project.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/create-project.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eredirect\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateRecord\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e name: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ename\\u003c/span\\u003e\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e owner: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eowner\\u003c/span\\u003e\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eredirect\\u003c/span\\u003e(`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/projects/\\u003c/span\\u003e${\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e}`);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eCreateProject\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// important to check you're submitting to the action\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// for the pending UI, not just any action\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisSubmitting\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformAction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/create-project\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/create-project\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efieldset\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edisabled\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisSubmitting\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e Name: \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etext\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eprojectName\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e Owner: \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eUserSelect\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003eCreate\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efieldset\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisSubmitting\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eBusyIndicator\\u003c/span\\u003e /\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eYou can do the same with \\u003ca href=\\\\\\\"../hooks/use-fetcher\\\\\\\"\\u003e\\u003ccode\\u003euseFetcher\\u003c/code\\u003e\\u003c/a\\u003e, which is useful if you aren't changing the URL (maybe adding the record to a list)\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eCreateProject\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisSubmitting\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmitting\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/create-project\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* ... */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3 id=\\\\\\\"record-updates\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#record-updates\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRecord Updates\\u003c/h3\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eOptimistic UI\\u003c/strong\\u003e: When the UI simply updates a field on a record, an optimistic UI is a great choice. Many, if not most user interactions in a web app tend to be updates, so this is a common pattern.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eProjectListItem\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estarred\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// use optimistic value if submitting\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003estarred\\u003c/span\\u003e\\\\\\\") \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e1\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// fall back to the database state\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estarred\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003estarred\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// use optimistic value to allow interruptions\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estarred\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e0\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e1\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* 👇 display optimistic value */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estarred\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e★\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e☆\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u0026#x3C;/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"deferred-data-loading\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#deferred-data-loading\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eDeferred Data Loading\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eSkeleton Fallback\\u003c/strong\\u003e: When data is deferred, you can add fallbacks with \\u003ca href=\\\\\\\"https://react.dev/reference/react/Suspense\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Suspense\\u003e\\u003c/code\\u003e\\u003c/a\\u003e. This allows the UI to render without waiting for the data to load, speeding up the perceived and actual performance of the application.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefer\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eAwait\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eSuspense\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ereact\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ereviewsPromise\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetReviews\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproductId\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproduct\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetProduct\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproductId\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefer\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e product: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproduct\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e reviews: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ereviewsPromise\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eProductRoute\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproduct\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ereviews\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eProductPage\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eproduct\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eproduct\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eSuspense\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efallback\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eReviewsSkeleton\\u003c/span\\u003e /\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eAwait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eresolve\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ereviews\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ereviews\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eReviews\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ereviews\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ereviews\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eAwait\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eSuspense\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eWhen creating skeleton fallbacks, consider the following principles:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eConsistent Size:\\u003c/strong\\u003e Ensure that the skeleton fallbacks match the dimensions of the actual content. This prevents sudden layout shifts, providing a smoother and more visually cohesive loading experience. In terms of web performance, this trade-off minimizes \\u003ca href=\\\\\\\"https://web.dev/cls\\\\\\\"\\u003eCumulative Layout Shift\\u003c/a\\u003e (CLS) in favor of improving \\u003ca href=\\\\\\\"https://web.dev/fcp\\\\\\\"\\u003eFirst Contentful Paint\\u003c/a\\u003e (FCP). You can minimize the trade with accurate dimensions in the fallback.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eCritical Data:\\u003c/strong\\u003e Avoid using fallbacks for essential information—the main content of the page. This is especially important for SEO and meta tags. If you delay showing critical data, accurate meta-tags can't be provided, and search engines won't correctly index your page.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eApp-Like Feel\\u003c/strong\\u003e: For web application UI that doesn't have SEO concerns, it can be beneficial to use skeleton fallbacks more extensively. This creates an interface that resembles the behavior of a standalone app. When users click on links, they get an instantaneous transition to the skeleton fallbacks.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eLink Prefetching:\\u003c/strong\\u003e Using \\u003ca href=\\\\\\\"../components/link#prefetch\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Link prefetch=\\\\\\\"intent\\\\\\\"\\u003e\\u003c/code\\u003e\\u003c/a\\u003e can often skip the fallbacks completely. When users hover or focus on the link, this method preloads the necessary data, allowing the network a quick moment to fetch content before the user clicks. This often results in an immediate navigation to the next page.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2 id=\\\\\\\"conclusion\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#conclusion\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eConclusion\\u003c/h2\\u003e\\\\n\\u003cp\\u003eCreating a network-aware UI via busy indicators, optimistic UI, and skeleton fallbacks significantly improves the user experience by showing visual cues during actions that require network interaction. Getting good at this is the best way to build applications your users trust.\\u003c/p\\u003e\\\",\\\"docs/discussion/pending-ui\\\",\\\"headings\\\",[960,965,968,971,975,978,981,984,987],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Pending UI Mechanisms\\\",\\\"pending-ui- -mechanisms\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"Guiding Principles for Selection\\\",\\\"guiding-principles-for- -selection\\\",{\\\"_961\\\":962,\\\"_955\\\":969,\\\"_24\\\":970},\\\"Examples\\\",\\\"examples\\\",{\\\"_961\\\":972,\\\"_955\\\":973,\\\"_24\\\":974},\\\"h3\\\",\\\"Page Navigation\\\",\\\"page-navigation\\\",{\\\"_961\\\":972,\\\"_955\\\":976,\\\"_24\\\":977},\\\"Pending Links\\\",\\\"pending-links\\\",{\\\"_961\\\":972,\\\"_955\\\":979,\\\"_24\\\":980},\\\"Record Creation\\\",\\\"record-creation\\\",{\\\"_961\\\":972,\\\"_955\\\":982,\\\"_24\\\":983},\\\"Record Updates\\\",\\\"record-updates\\\",{\\\"_961\\\":962,\\\"_955\\\":985,\\\"_24\\\":986},\\\"Deferred Data Loading\\\",\\\"deferred-data-loading\\\",{\\\"_961\\\":962,\\\"_955\\\":988,\\\"_24\\\":989},\\\"Conclusion\\\",\\\"conclusion\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#conclusion\\\\\\": 1, "#deferred-data-loading\\\\\\": 1, "#examples\\\\\\": 1, "#guiding-principles-for-": 1, "#page-navigation\\\\\\": 1, "#pending-and-optimistic-ui\\\\\\": 1, "#pending-links\\\\\\": 1, "#pending-ui-": 1, "#record-creation\\\\\\": 1, "#record-updates\\\\\\": 1, "$\\": 1, "$rc": 3, "*/": 2, "*/\\u003c/span\\u003e\\u003cspan": 2, "--base03": 11, "--base05": 7, "--base08": 104, "--base09": 4, "--base0a": 35, "--base0b": 36, "--base0d": 62, "--base0e": 105, "--base0f": 44, "-1\\\\\\": 10, "-5": 2, "-mechanisms\\": 1, "-mechanisms\\\\\\": 2, "-selection\\": 1, "-selection\\\\\\": 2, "/$": 1, "/*": 2, "//": 9, "//react": 1, "//v2": 2, "//web": 2, "/\u003e": 8, "/\\u003cspan": 15, "/\\u003e": 1, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 7, "/\\u003e\\u003cspan": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/components/link#prefetch\\\\\\": 1, "/components/nav-link#classname-callback\\\\\\": 1, "/create-project": 3, "/hooks/use-fetcher\\\\\\": 1, "/hooks/use-navigation\\\\\\": 1, "/projects/$": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 6, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 6, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 2, "125": 2, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 6, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 5, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 5, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 5, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 5, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 5, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 4, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 4, "1\\\\\\": 7, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 3, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 3, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 3, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 3, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 3, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 3, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 3, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 3, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "28\\\\\\": 3, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "29\\\\\\": 2, "2\\\\\\": 7, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30\\\\\\": 2, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "31\\\\\\": 2, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "32\\\\\\": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "33\\\\\\": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "34\\\\\\": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "35\\\\\\": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "36\\\\\\": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "37\\\\\\": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "38\\\\\\": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 7, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 7, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 7, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 7, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 7, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 7, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 5, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 4, "973": 1, "974": 1, "975": 1, "976": 1, "977": 1, "978": 1, "979": 1, "98": 1, "980": 1, "981": 1, "982": 1, "983": 1, "984": 1, "985": 1, "986": 1, "987": 1, "988": 1, "989": 1, "99": 1, "990": 1, "9\\\\\\": 6, "\u003c/\u003e": 2, "\u003c/await\u003e": 1, "\u003c/button\u003e": 1, "\u003c/div\u003e": 1, "\u003c/fetcher": 2, "\u003c/fieldset\u003e": 1, "\u003c/form\u003e": 1, "\u003c/label\u003e": 2, "\u003c/nav\u003e": 2, "\u003c/navlink\u003e": 2, "\u003c/suspense\u003e": 1, "\u003c\u003e": 2, "\u003cawait": 1, "\u003cbusyindicator": 1, "\u003cbutton": 2, "\u003cdiv": 1, "\u003cdiv\u003e": 1, "\u003cfetcher": 2, "\u003cfieldset": 1, "\u003cform": 1, "\u003cinput": 1, "\u003clabel\u003e": 2, "\u003clink": 1, "\u003cnav\u003e": 2, "\u003cnavlink": 3, "\u003cproductpage": 1, "\u003creviews": 1, "\u003creviewsskeleton": 1, "\u003cspinner": 1, "\u003csuspense": 1, "\u003csuspense\u003e": 1, "\u003cuserselect": 1, "===": 6, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 5, "\u003ecreate\u003c/button\u003e": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 6, "@remix-run/node\\": 1, "@remix-run/react": 7, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 440, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eor": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ewhen": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ewhile": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 64, "\\n": 1, "\\u0026#x3c": 39, "\\u003c/code\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2": 2, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003euse": 2, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eapp-like": 2, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003ecritical": 2, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eerror": 2, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003elink": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eside": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eurl": 2, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 7, "\\u003c/p\\u003e\\\\n\\u003ch2": 2, "\\u003c/p\\u003e\\\\n\\u003ch3": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eoptimistic": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eskeleton": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003econsistent": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003einitial": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003enext": 2, "\\u003c/span\\u003e": 21, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 14, "\\u003c/span\\u003e\\u0026#x3c": 2, "\\u003c/span\\u003e\\u003cspan": 19, "\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "\\u003c/strong\\u003e": 3, "\\u003ca": 7, "\\u003ccode\\u003eaction\\u003c/code\\u003e": 1, "\\u003ccode\\u003enavigate": 1, "\\u003ch1": 1, "\\u003cspan": 295, "\\u003e": 177, "\\u003e/*": 2, "\\u003e//": 9, "\\u003e/create-project\\u003c/span\\u003e\\\\\\": 3, "\\u003e/projects/\\u003c/span\\u003e$": 1, "\\u003e0\\u003c/span\\u003e\\\\\\": 1, "\\u003e1\\u003c/span\\u003e\\\\\\": 2, "\\u003e===\\u003c/span\\u003e": 5, "\\u003e=\\u003c/span\\u003e": 11, "\\u003e=\\u003c/span\\u003e\\\\\\": 11, "\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003e=\\u003c/span\\u003e\\u003cspan": 11, "\\u003e=\\u003e\\u003c/span\\u003e": 3, "\\u003e=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 4, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 7, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 22, "\\u003e\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003econclusion\\u003c/h2\\u003e\\\\n\\u003cp\\u003ecreating": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003edeferred": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eexamples\\u003c/h2\\u003e\\\\n\\u003ch3": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eguiding": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003epage": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003epending": 3, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003erecord": 2, "\\u003e\\u003ca": 10, "\\u003e\\u003ccode\\u003e\\u0026#x3c": 3, "\\u003e\\u003ccode\\u003e\\u003cspan": 7, "\\u003e\\u003ccode\\u003eusefetcher\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eusenavigation\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003cpre": 7, "\\u003e\\u003cspan": 31, "\\u003eaction\\u003c/span\\u003e": 1, "\\u003eaction\\u003c/span\\u003e\\u003cspan": 2, "\\u003eactionfunctionargs\\u003c/span\\u003e": 2, "\\u003easync\\u003c/span\\u003e": 2, "\\u003eawait\\u003c/span\\u003e": 5, "\\u003eawait\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003ebusyindicator\\u003c/span\\u003e": 1, "\\u003ebutton\\u003c/span\\u003e": 1, "\\u003ebutton\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eclassname\\u003c/span\\u003e\\u003cspan": 2, "\\u003econst\\u003c/span\\u003e": 13, "\\u003ecreate\\u0026#x3c": 1, "\\u003ecreateproject\\u003c/span\\u003e": 2, "\\u003ecreaterecord\\u003c/span\\u003e": 1, "\\u003ecumulative": 1, "\\u003edefault\\u003c/span\\u003e": 2, "\\u003edefer\\u003c/span\\u003e": 2, "\\u003edisabled\\u003c/span\\u003e\\u003cspan": 1, "\\u003ediv\\u003c/span\\u003e": 1, "\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003ediv\\u003c/span\\u003e\\u003e\\u003cspan": 1, "\\u003eexport\\u003c/span\\u003e": 6, "\\u003efallback\\u003c/span\\u003e\\u003cspan": 1, "\\u003efetcher": 4, "\\u003efetcher\\u003c/span\\u003e": 5, "\\u003efieldset\\u003c/span\\u003e": 1, "\\u003efieldset\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003efirst": 1, "\\u003eform\\u003c/span\\u003e": 1, "\\u003eform\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eformaction\\u003c/span\\u003e": 1, "\\u003eformdata\\u003c/span\\u003e": 5, "\\u003eformdata\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003efrom\\u003c/span\\u003e": 12, "\\u003efunction\\u003c/span\\u003e": 9, "\\u003eget\\u003c/span\\u003e": 3, "\\u003egetproduct\\u003c/span\\u003e": 1, "\\u003egetreviews\\u003c/span\\u003e": 1, "\\u003eid\\u003c/span\\u003e": 2, "\\u003eid\\u003c/span\\u003e\\u003cspan": 4, "\\u003eimport\\u003c/span\\u003e": 12, "\\u003einput\\u003c/span\\u003e": 1, "\\u003eispending\\u003c/span\\u003e": 2, "\\u003eissubmitting\\u003c/span\\u003e": 3, "\\u003eissubmitting\\u003c/span\\u003e\\u003cspan": 1, "\\u003ekey\\u003c/span\\u003e\\u003cspan": 2, "\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "\\u003eloader\\u003c/span\\u003e": 1, "\\u003eloader\\u003c/span\\u003e\\u003e": 1, "\\u003eloaderfunctionargs\\u003c/span\\u003e": 2, "\\u003eloading\\u003c/span\\u003e\\\\\\": 1, "\\u003emap\\u003c/span\\u003e": 2, "\\u003emethod\\u003c/span\\u003e\\u003cspan": 3, "\\u003ename\\u003c/span\\u003e\\\\\\": 1, "\\u003ename\\u003c/span\\u003e\\u003cspan": 5, "\\u003enav\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "\\u003enavigation\\u003c/span\\u003e": 4, "\\u003enavlink\\u003c/span\\u003e": 2, "\\u003enavlink\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003enavlink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003enull\\u003c/span\\u003e": 1, "\\u003enull\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003enull\\u003c/span\\u003e\\u003cspan": 2, "\\u003eowner\\u003c/span\\u003e\\\\\\": 1, "\\u003eparams\\u003c/span\\u003e": 5, "\\u003epending\\u003c/span\\u003e\\\\\\": 1, "\\u003ependingnavigation\\u003c/span\\u003e": 1, "\\u003epost\\u003c/span\\u003e\\\\\\": 3, "\\u003eproduct\\u003c/span\\u003e": 3, "\\u003eproduct\\u003c/span\\u003e\\u003cspan": 2, "\\u003eproductid\\u003c/span\\u003e": 2, "\\u003eproductpage\\u003c/span\\u003e": 1, "\\u003eproductroute\\u003c/span\\u003e": 1, "\\u003eproject\\u003c/span\\u003e": 14, "\\u003eprojectid\\u003c/span\\u003e": 1, "\\u003eprojectlist\\u003c/span\\u003e": 2, "\\u003eprojectlistitem\\u003c/span\\u003e": 1, "\\u003eprojectname\\u003c/span\\u003e\\\\\\": 1, "\\u003eprojects\\u003c/span\\u003e": 4, "\\u003ereact\\u003c/span\\u003e\\\\\\": 1, "\\u003eredirect\\u003c/span\\u003e": 2, "\\u003erequest\\u003c/span\\u003e": 2, "\\u003eresolve\\u003c/span\\u003e\\u003cspan": 1, "\\u003ereturn\\u003c/span\\u003e": 9, "\\u003ereviews\\u003c/span\\u003e": 3, "\\u003ereviews\\u003c/span\\u003e\\u003cspan": 3, "\\u003ereviewspromise\\u003c/span\\u003e": 2, "\\u003ereviewsskeleton\\u003c/span\\u003e": 1, "\\u003espinner\\u003c/span\\u003e": 1, "\\u003espinner\\u003c/span\\u003e\\\\\\": 1, "\\u003estarred\\u003c/span\\u003e": 4, "\\u003estarred\\u003c/span\\u003e\\\\\\": 2, "\\u003estate\\u003c/span\\u003e": 2, "\\u003esubmit\\u003c/span\\u003e\\\\\\": 2, "\\u003esubmitting\\u003c/span\\u003e\\\\\\": 1, "\\u003esuspense\\u003c/span\\u003e": 2, "\\u003esuspense\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003etext\\u003c/span\\u003e\\\\\\": 1, "\\u003eto\\u003c/span\\u003e\\u003cspan": 2, "\\u003etype\\u003c/span\\u003e": 2, "\\u003etype\\u003c/span\\u003e\\u003cspan": 3, "\\u003etypeof\\u003c/span\\u003e": 1, "\\u003eusefetcher\\u003c/span\\u003e": 4, "\\u003euseloaderdata\\u003c/span\\u003e\\u0026#x3c": 1, "\\u003eusenavigation\\u003c/span\\u003e": 4, "\\u003euseparams\\u003c/span\\u003e": 2, "\\u003euserselect\\u003c/span\\u003e": 1, "\\u003evalue\\u003c/span\\u003e\\u003cspan": 1, "\\u003e★\\u003c/span\\u003e\\\\\\": 1, "\\u003e☆\\u003c/span\\u003e\\\\\\": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 28, "_22\\": 152, "_24\\": 161, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 10, "_958\\": 1, "_961\\": 9, "_991\\": 1, "_992\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "accurate": 4, "accurately": 2, "action": 24, "action=": 2, "action\\": 1, "action\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "actiondata\\": 1, "actionfunctionargs": 2, "actions": 6, "actual": 4, "adapter": 3, "adapters": 3, "add": 4, "adding": 2, "address": 2, "all": 1, "allow": 2, "allowing": 8, "allows": 2, "also": 2, "an": 19, "and": 41, "any": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 8, "app-like": 2, "app/routes/create-project": 2, "application": 12, "applications": 2, "approach": 5, "appropriate": 2, "are": 14, "aren": 2, "aria-hidden=\\\\\\": 10, "as": 9, "asked": 1, "asset": 3, "async": 2, "at": 3, "attrs\\": 1, "avoid": 2, "await": 4, "await\\": 1, "b=document": 1, "back": 4, "backend": 3, "based": 6, "basename": 1, "be": 15, "been": 2, "before": 7, "behavior": 6, "beneficial": 2, "best": 4, "between": 2, "boundaries": 3, "boundaries\\u003c/strong\\u003e": 1, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 5, "build": 2, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "busy": 12, "button": 2, "by": 8, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "callback": 2, "calls": 2, "can": 23, "cannot": 4, "capture": 2, "catch": 1, "change": 5, "change\\u003c/strong\\u003e": 1, "changelog": 2, "changelog\\": 1, "changing": 2, "check": 2, "children\\": 1, "choice": 2, "class=\\\\\\": 163, "classname=": 2, "classname\u003e": 1, "classname\\u003e\\u003c/code\\u003e\\u003c/a\\u003e": 1, "cli": 5, "cli\\": 1, "click": 2, "clicks": 4, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cloudflare/deno": 4, "cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "cls": 2, "code": 4, "codeblock-line\\\\\\": 153, "cohesive": 2, "color": 408, "common": 2, "community": 3, "community\\": 1, "completely": 2, "completes": 2, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concerns": 2, "conclusion": 1, "conclusion\\": 2, "conclusion\\\\\\": 1, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "consider": 2, "consistent": 1, "console": 1, "const": 13, "constraints": 2, "constraints\\": 1, "content": 10, "contentful": 2, "context": 2, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "correctly": 2, "create-remix": 3, "created": 2, "createproject": 2, "createrecord": 1, "createremixstub": 2, "createremixstub\\": 1, "creates": 2, "creating": 3, "creation": 1, "creation\\": 1, "creation\\u003c/h3\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ebusy": 1, "creationrecord": 2, "critical": 8, "css": 15, "css\\": 1, "cues": 6, "cumulative": 1, "d=c": 2, "data": 36, "data-code-block=\\\\\\": 7, "data-filename=\\\\\\": 2, "data-highlight=\\\\\\": 29, "data-lang=\\\\\\": 14, "data-line-number=\\\\\\": 153, "data-line-numbers=\\\\\\": 14, "data=": 1, "data\\": 2, "data\\u003c/strong\\u003e": 1, "database": 2, "default": 2, "defer": 4, "defer\\": 1, "deferred": 5, "deferred-data-loading\\": 1, "deferred-data-loading\\\\\\": 1, "delay": 2, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "designed": 2, "dev": 3, "dev/cls\\\\\\": 1, "dev/fcp\\\\\\": 1, "dev/reference/react/suspense\\\\\\": 1, "developer": 2, "development": 3, "difference": 2, "dimensions": 4, "disabled=": 1, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "display": 4, "displayed": 2, "do": 3, "doc\\": 1, "docs/discussion/pending-ui": 1, "docs/discussion/pending-ui\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docspending": 1, "document": 3, "does": 2, "doesn": 2, "done": 1, "during": 6, "e--": 1, "e=0": 1, "effects": 3, "effects\\u003c/strong\\u003e": 1, "else": 2, "email": 2, "engines": 2, "enhancement": 2, "enhancement\\": 1, "enhances": 2, "enqueue": 1, "ensure": 2, "ensuring": 2, "entry": 6, "environment": 3, "error": 14, "errorboundary": 2, "errorboundary\\": 1, "errors": 2, "errors\\": 1, "especially": 2, "essential": 2, "etc": 2, "everything": 3, "examples": 2, "examples\\": 2, "examples\\\\\\": 1, "exceptions": 2, "execution": 2, "execution\\": 1, "expected": 2, "experience": 6, "explanation": 2, "explanation\\": 1, "export": 6, "extensively": 2, "extract": 2, "extract\\": 1, "f=a": 1, "fall": 2, "fallback": 5, "fallback=": 1, "fallback\\u003c/strong\\u003e": 1, "fallbacks": 25, "fallbacks\\u003c/strong\\u003e": 1, "false": 3, "faqs": 2, "faqs\\": 1, "favor": 2, "fcp": 2, "features": 1, "feel": 2, "feel\\u003c/strong\\u003e": 2, "fetch": 4, "fetch\\": 1, "fetcher": 7, "fetcher\\": 1, "field": 2, "fields": 2, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "first": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "focus": 2, "following": 2, "for": 35, "form": 15, "form\u003e": 2, "form\\": 1, "form\\u003c/span\\u003e": 2, "form\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "formaction": 1, "formdata": 6, "forward": 2, "found": 3, "frequently": 1, "from": 20, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 10, "future": 4, "get": 9, "getelementbyid": 2, "getitem": 1, "getproduct": 1, "getreviews": 1, "getting": 4, "githubchat": 1, "global": 2, "good": 2, "gotchas": 2, "gotchas\\": 1, "great": 4, "guide": 3, "guide\\": 1, "guidelines": 2, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "guiding": 2, "guiding-principles-for-": 2, "h2\\": 1, "h3\\": 1, "handle": 2, "handle\\": 1, "handling": 9, "handling\\": 2, "handling\\u003c/strong\\u003e": 1, "has": 2, "hascontent\\": 1, "have": 2, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 1, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "hover": 2, "how": 3, "href=\\\\\\": 17, "html": 1, "html\\": 1, "https": 5, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 10, "icon-link\\\\\\": 10, "id": 6, "id=\\\\\\": 10, "ids": 2, "if": 14, "immediate": 6, "immediately": 2, "imperative": 2, "implementing": 2, "implements": 2, "import": 17, "import\\\\\\": 1, "important": 4, "imports": 4, "imports\\": 2, "improves": 2, "improving": 2, "in": 26, "inc": 1, "incomplete": 2, "index": 5, "indicate": 4, "indicating": 2, "indication": 2, "indicator": 5, "indicator\\u003c/strong\\u003e": 3, "indicators": 11, "indicators\\u003c/strong\\u003e": 1, "information—the": 2, "initial": 4, "initially": 2, "input": 2, "insertbefore": 1, "inspecting": 2, "instantaneous": 2, "instead": 2, "integrating": 1, "intent": 1, "intent\\\\\\": 1, "interaction": 2, "interactions": 3, "interface": 4, "interruptions": 1, "interruptions\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "into": 2, "introduction": 1, "involve": 2, "is": 39, "ispending": 2, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "issubmitting": 4, "it": 10, "iterative": 1, "itself": 2, "javascript": 2, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "just": 2, "key": 4, "key=": 2, "know": 1, "layout": 4, "lazy": 3, "leads": 2, "learning": 1, "let": 3, "licensed": 1, "like": 2, "link": 8, "link\\": 1, "links": 9, "links\\": 3, "links\\u003c/h3\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ebusy": 1, "linksrecord": 2, "list": 2, "livereload": 2, "livereload\\": 1, "ll": 2, "load": 2, "loader": 3, "loader\u003e": 1, "loader\\": 1, "loaderdata\\": 1, "loaderfunctionargs": 2, "loading": 14, "loading\\": 2, "loading\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eskeleton": 1, "loading\\u003c/strong\\u003e": 1, "loadingconclusionon": 1, "loadingconclusionpending": 1, "local": 3, "localhost\\": 1, "localized": 2, "main": 4, "makes": 1, "manage": 2, "management": 4, "management\\": 2, "manual": 3, "many": 4, "map": 2, "match": 2, "math": 1, "may": 2, "maybe": 2, "md\\": 152, "mdx": 3, "mdx\\": 1, "mechanism": 6, "mechanisms": 3, "mechanisms\\": 1, "mechanisms\\u003c/h2\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ebusy": 1, "mechanismsguiding": 2, "mediocre": 2, "menu\\": 1, "meta": 6, "meta-tags": 2, "meta\\": 2, "method": 2, "method=": 3, "migrating": 4, "minimize": 2, "minimizes": 2, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 6, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "moment": 2, "more": 4, "most": 3, "must": 2, "name": 8, "name=": 2, "naming": 2, "naming\\": 1, "nav": 2, "navigate": 1, "navigating": 4, "navigation": 11, "navigation\\": 1, "navigation\\u003c/h3\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ebusy": 1, "navigationpending": 2, "navlink": 4, "navlink\\": 1, "necessary": 2, "necessitating": 2, "need": 1, "network": 7, "network-aware": 4, "network-intensive": 2, "new": 8, "new\\": 1, "next": 8, "nextsibling": 2, "nice": 2, "nodetype": 1, "noindex\\": 1, "not": 11, "note": 2, "null": 5, "number": 1, "occur": 2, "of": 39, "often": 4, "on": 23, "once": 1, "one": 3, "open": 1, "optimistic": 22, "optimization": 2, "optimization\\": 1, "or": 14, "order\\": 1, "other": 7, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outcome": 6, "outlet": 2, "outlet\\": 1, "outlines": 2, "owner": 5, "page": 16, "page-navigation\\": 1, "page-navigation\\\\\\": 1, "pagepending": 2, "paint": 1, "paint\\u003c/a\\u003e": 1, "param": 2, "param\\": 1, "params": 7, "parentnode": 2, "parse": 1, "particularly": 2, "path": 2, "pattern": 2, "payments": 2, "pending": 13, "pending-and-optimistic-ui\\\\\\": 1, "pending-links\\": 1, "pending-links\\\\\\": 1, "pending-ui-": 2, "pendingnavigation": 1, "perceived": 4, "performance": 6, "performance\\": 1, "pipethrough": 1, "place": 2, "placeholder": 2, "positions": 2, "possible": 2, "post": 3, "postcss": 2, "postcss\\": 1, "potential": 2, "predict": 6, "predictability": 1, "predictability\\u003c/strong\\u003e": 1, "predicted": 2, "prefetch=": 1, "prefetch=\\\\\\": 1, "prefetching": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "preloads": 2, "presets": 2, "presets\\": 1, "prevents": 2, "previoussibling": 1, "primarily": 2, "primary": 1, "principles": 7, "process": 4, "processes": 2, "processing": 4, "product": 6, "product=": 1, "productid": 2, "productroute": 1, "progressive": 3, "project": 15, "projectid": 1, "projectlist": 2, "projectlistitem": 1, "projectname": 1, "projects": 4, "provided": 2, "provides": 2, "providing": 8, "pull": 1, "query": 3, "questions": 1, "quick": 3, "quickest": 1, "quickly": 1, "random": 1, "re": 2, "react": 9, "react-router-scroll-positions": 1, "readablestream": 1, "received": 2, "record": 12, "record-creation\\": 1, "record-creation\\\\\\": 1, "record-updates\\": 1, "record-updates\\\\\\": 1, "redirect": 4, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "redirects": 4, "regular": 3, "related": 1, "released": 2, "reliably": 2, "relies": 2, "remains": 2, "remix": 10, "remix\\": 2, "removechild": 2, "removeitem": 1, "render": 4, "rendering": 2, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 3, "require": 2, "resemble": 2, "resembles": 2, "resolve=": 1, "resource": 3, "resources": 1, "response": 8, "responsiveness": 2, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "result": 2, "results": 2, "return": 9, "reviews": 6, "reviews=": 1, "reviewspromise": 2, "robust": 2, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 12, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/discussion/pending-ui": 1, "run\\": 1, "running": 1, "runtimes": 3, "same": 4, "scenarios": 2, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "search": 2, "section": 2, "selecting": 2, "selection": 1, "selection\\": 1, "selection\\u003c/h2\\u003e\\\\n\\u003cp\\u003euse": 1, "selectionexamplespage": 2, "sending": 2, "seo": 4, "server": 23, "server\\": 3, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shift": 1, "shift\\u003c/a\\u003e": 1, "shifts": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "showing": 4, "side": 3, "significantly": 2, "simplifying": 1, "simply": 2, "since": 2, "single": 3, "siteurl\\": 1, "size": 2, "skeleton": 20, "skip": 2, "slice": 1, "slug\\": 1, "smoother": 2, "so": 4, "something": 2, "soon": 2, "spa": 3, "specific": 2, "speed": 2, "speeding": 2, "spinner": 3, "ssr": 1, "stability": 1, "stability\\u003c/strong\\u003e": 1, "stages": 1, "standalone": 4, "starred": 6, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 17, "state\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "structure": 4, "style=\\\\\\": 408, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "submissions": 2, "submit": 2, "submitting": 4, "submitting\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "such": 2, "sudden": 2, "support": 3, "support\\": 1, "suspense": 1, "suspense\\u003e\\u003c/code\\u003e\\u003c/a\\u003e": 1, "tabindex=\\\\\\": 10, "tags": 2, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "tend": 2, "terms": 2, "text": 1, "textencoderstream": 1, "thank": 1, "that": 20, "the": 163, "there": 4, "they": 4, "things": 2, "this": 32, "three": 2, "through": 1, "title\\": 1, "tls": 2, "tls\\": 1, "to": 68, "to=": 2, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "trade": 2, "trade-off": 2, "transition": 2, "transitions": 2, "triggered": 2, "triggers": 2, "true": 6, "true\\\\\\": 53, "trust": 2, "try": 1, "ts": 2, "ts\\": 1, "tsx\\\\\\": 16, "tutorial": 3, "type": 2, "type=": 3, "typeof": 1, "types": 2, "typescript": 2, "typescript\\": 1, "typically": 4, "ui": 45, "ui\\": 1, "ui\\u003c/h1\\u003e\\\\n\\u003cp\\u003ethe": 1, "ui\\u003c/strong\\u003e": 2, "uigetting": 1, "uncertainty": 1, "uncertainty\\u003c/strong\\u003e": 1, "under": 1, "unexpected": 2, "unknown": 2, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "until": 2, "up": 2, "upcoming": 4, "updates": 5, "updates\\": 1, "updates\\u003c/h3\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eoptimistic": 1, "updatesdeferred": 2, "updating": 4, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 8, "use": 9, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 6, "usefetcher": 7, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "useful": 6, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\u003ctypeof": 1, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 7, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 4, "useparams\\": 1, "user": 20, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "users": 12, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 6, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "value": 6, "value=": 1, "vanilla": 3, "var": 410, "variables": 2, "variables\\": 1, "via": 2, "view": 2, "visual": 10, "visually": 2, "vite": 5, "vite\\": 1, "vs": 6, "wait": 4, "waiting": 4, "walk": 1, "want": 2, "way": 3, "ways": 2, "web": 8, "well": 2, "when": 16, "which": 2, "while": 6, "why": 1, "will": 2, "window": 11, "with": 20, "within": 2, "without": 2, "won": 2, "writes": 2, "writes\\": 1, "you": 22, "your": 7, "||": 3, "©": 1, "•docs": 1, "★": 1, "☆": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2, "👇": 2 }, "length": 10046 }, { "id": "e790729ea96a9abfd6d7b1bb", "doc_id": "2ea9f082ecd8103b137577c6", "title": "portal", "url": "file:///tmp/devour-github-216944658/src/routes/reference/components/portal.mdx", "type": "github-document", "source": "solid:solid-router", "path": "devour_data/docs/portal-2ea9f082.json", "content": "--- title: \u003cPortal\u003e use_cases: 'modals, tooltips, overlays, popups, dropdowns, ui layers, escape dom hierarchy' tags: - portal - modals - dom - overlays - tooltips - components version: '1.0' description: \u003e- Render SolidJS components outside parent DOM hierarchy with Portal. Perfect for modals, tooltips, and overlays that need to escape layout. --- `\u003cPortal\u003e` is a component that allows you to render children into a DOM node that exists outside the DOM hierarchy of the parent component. This is useful when your UI has some elements that need to appear on top of everything else, such as modals and tooltips. ```tsx import { Portal } from \"solid-js/web\" import type { JSX } from \"solid-js\" function Portal(props: { mount?: Node useShadow?: boolean isSVG?: boolean children: JSX.Element }): Text ``` This inserts the element in the mount node. Useful for inserting Modals outside of the page layout. Events still propagate through the component hierarchy, however `\u003cPortal\u003e` will only run on the client and has hydration _disabled_. The portal is mounted in a `\u003cdiv\u003e` unless the target is the document head. `useShadow` places the element in a Shadow Root for style isolation, and `isSVG` is required if inserting into an SVG element so that the `\u003cdiv\u003e` is not inserted. ```tsx \u003cPortal mount={document.getElementById(\"modal\")}\u003e \u003cdiv\u003eMy Content\u003c/div\u003e \u003c/Portal\u003e ``` ## Props | Name | Type | Default | Description | | :---------- | :-------- | :------------ | :------------------------------------------------ | | `mount` | `Node` | document.body | The DOM node to mount the portal in. | | `useShadow` | `boolean` | false | Whether to use a Shadow Root for style isolation. | | `isSVG` | `boolean` | false | Whether the mount node is an SVG element. |", "term_freq": { "##": 1, "---": 2, "--------": 1, "----------": 1, "------------": 1, "------------------------------------------------": 1, "///tmp/devour-github-216944658/src/routes/reference/components/portal": 1, "\u003c/portal\u003e": 1, "\u003cdiv\u003e": 2, "\u003cdiv\u003emy": 1, "\u003cportal": 1, "\u003cportal\u003e": 3, "\u003e-": 1, "_disabled_": 1, "allows": 1, "an": 2, "and": 4, "appear": 1, "as": 1, "body": 1, "boolean": 4, "children": 2, "client": 1, "component": 3, "components": 2, "content\u003c/div\u003e": 1, "default": 1, "description": 2, "document": 3, "dom": 6, "dropdowns": 1, "element": 5, "elements": 1, "else": 1, "escape": 2, "events": 1, "everything": 1, "exists": 1, "false": 2, "file": 1, "for": 4, "from": 2, "function": 1, "getelementbyid": 1, "github-document": 1, "has": 2, "head": 1, "hierarchy": 4, "however": 1, "hydration": 1, "if": 1, "import": 2, "in": 4, "inserted": 1, "inserting": 2, "inserts": 1, "into": 2, "is": 7, "isolation": 2, "issvg": 3, "jsx": 2, "layers": 1, "layout": 2, "mdx": 1, "modal": 1, "modals": 5, "mount": 5, "mount=": 1, "mounted": 1, "name": 1, "need": 2, "node": 6, "not": 1, "of": 3, "on": 2, "only": 1, "outside": 3, "overlays": 3, "page": 1, "parent": 2, "perfect": 1, "places": 1, "popups": 1, "portal": 7, "propagate": 1, "props": 2, "render": 2, "required": 1, "root": 2, "run": 1, "shadow": 2, "so": 1, "solid-js": 1, "solid-js/web": 1, "solidjs": 1, "some": 1, "still": 1, "style": 2, "such": 1, "svg": 2, "tags": 1, "target": 1, "text": 1, "that": 5, "the": 15, "this": 2, "through": 1, "title": 1, "to": 5, "tooltips": 4, "top": 1, "tsx": 2, "type": 2, "ui": 2, "unless": 1, "use": 1, "use_cases": 1, "useful": 2, "useshadow": 3, "version": 1, "when": 1, "whether": 2, "will": 1, "with": 1, "you": 1, "your": 1 }, "length": 247 }, { "id": "d1d0f6803808904323f1aae2", "doc_id": "56a878d0dc79f9740d3ae8e8", "title": "portal", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/portal.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/portal-56a878d0.json", "content": "--- title: \u003cPortal\u003e use_cases: 'modals, tooltips, overlays, popups, dropdowns, ui layers, escape dom hierarchy' tags: - portal - modals - dom - overlays - tooltips - components version: '1.0' description: \u003e- Render SolidJS components outside parent DOM hierarchy with Portal. Perfect for modals, tooltips, and overlays that need to escape layout. --- `\u003cPortal\u003e` is a component that allows you to render children into a DOM node that exists outside the DOM hierarchy of the parent component. This is useful when your UI has some elements that need to appear on top of everything else, such as modals and tooltips. ```tsx import { Portal } from \"solid-js/web\" import type { JSX } from \"solid-js\" function Portal(props: { mount?: Node useShadow?: boolean isSVG?: boolean children: JSX.Element }): Text ``` This inserts the element in the mount node. Useful for inserting Modals outside of the page layout. Events still propagate through the component hierarchy, however `\u003cPortal\u003e` will only run on the client and has hydration _disabled_. The portal is mounted in a `\u003cdiv\u003e` unless the target is the document head. `useShadow` places the element in a Shadow Root for style isolation, and `isSVG` is required if inserting into an SVG element so that the `\u003cdiv\u003e` is not inserted. ```tsx \u003cPortal mount={document.getElementById(\"modal\")}\u003e \u003cdiv\u003eMy Content\u003c/div\u003e \u003c/Portal\u003e ``` ## Props | Name | Type | Default | Description | | :---------- | :-------- | :------------ | :------------------------------------------------ | | `mount` | `Node` | document.body | The DOM node to mount the portal in. | | `useShadow` | `boolean` | false | Whether to use a Shadow Root for style isolation. | | `isSVG` | `boolean` | false | Whether the mount node is an SVG element. |", "term_freq": { "##": 1, "---": 2, "--------": 1, "----------": 1, "------------": 1, "------------------------------------------------": 1, "//github": 1, "\u003c/portal\u003e": 1, "\u003cdiv\u003e": 2, "\u003cdiv\u003emy": 1, "\u003cportal": 1, "\u003cportal\u003e": 3, "\u003e-": 1, "_disabled_": 1, "allows": 1, "an": 2, "and": 4, "appear": 1, "as": 1, "body": 1, "boolean": 4, "children": 2, "client": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/components/portal": 1, "component": 3, "components": 2, "content\u003c/div\u003e": 1, "default": 1, "description": 2, "document": 3, "dom": 6, "dropdowns": 1, "element": 5, "elements": 1, "else": 1, "escape": 2, "events": 1, "everything": 1, "exists": 1, "false": 2, "for": 4, "from": 2, "function": 1, "getelementbyid": 1, "github-document": 1, "has": 2, "head": 1, "hierarchy": 4, "however": 1, "https": 1, "hydration": 1, "if": 1, "import": 2, "in": 4, "inserted": 1, "inserting": 2, "inserts": 1, "into": 2, "is": 7, "isolation": 2, "issvg": 3, "jsx": 2, "layers": 1, "layout": 2, "mdx": 1, "modal": 1, "modals": 5, "mount": 5, "mount=": 1, "mounted": 1, "name": 1, "need": 2, "node": 6, "not": 1, "of": 3, "on": 2, "only": 1, "outside": 3, "overlays": 3, "page": 1, "parent": 2, "perfect": 1, "places": 1, "popups": 1, "portal": 7, "propagate": 1, "props": 2, "render": 2, "required": 1, "root": 2, "run": 1, "shadow": 2, "so": 1, "solid-js": 1, "solid-js/web": 1, "solidjs": 1, "some": 1, "still": 1, "style": 2, "such": 1, "svg": 2, "tags": 1, "target": 1, "text": 1, "that": 5, "the": 15, "this": 2, "through": 1, "title": 1, "to": 5, "tooltips": 4, "top": 1, "tsx": 2, "type": 2, "ui": 2, "unless": 1, "use": 1, "use_cases": 1, "useful": 2, "useshadow": 3, "version": 1, "when": 1, "whether": 2, "will": 1, "with": 1, "you": 1, "your": 1 }, "length": 248 }, { "id": "742f8b4c62911623a6cfda74", "doc_id": "93c544efe6e99a69bafbf7f5", "title": "portal", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/control-flow/portal.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/portal.json", "content": "--- title: Portal order: 3 use_cases: \u003e- modals, popups, tooltips, dropdowns, z-index issues, overflow clipping, rendering outside parent container tags: - portal - modal - popup - dom - z-index - overflow version: '1.0' description: \u003e- Learn how Portal renders elements outside the normal DOM flow to solve z-index and overflow issues for modals and popups. --- When an element requires rendering outside of the usual document flow, challenges related to stacking contents and z-index can interfere with the desired intention or look of an application. `\u003cPortal\u003e` helps with this by putting elements in a different place in the document, bringing an element into the document flow so they can render as expected. ```jsx import { Portal } from \"solid-js/web\" \u003cPortal\u003e \u003cdiv class=\"popup\"\u003e...\u003c/div\u003e \u003c/Portal\u003e ``` The content nested within `\u003cPortal\u003e` is rendered and positioned by default at the end of the document body. \u003cEraserLink href=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=IEPk0uiH2OC365hkpKf3wA\" preview=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=IEPk0uiH2OC365hkpKf3wA\u0026type=embed\" /\u003e This can be changed by passing a `mount` prop to `\u003cPortal\u003e`. The `mount` prop accepts a [DOM node](https://developer.mozilla.org/en-US/docs/Web/API/Node), which will be used as the mount point for the portal content. ```jsx import { Portal } from \"solid-js/web\" \u003cPortal mount={document.querySelector(\"main\")}\u003e \u003cdiv class=\"popup\"\u003e...\u003c/div\u003e \u003c/Portal\u003e ``` Using `\u003cPortal\u003e` can be particularly useful in cases where elements, like information popups, might be clipped or obscured due to the overflow settings of their parent elements. By putting the element outside of the parent element, it is no longer bound by the overflow settings of its parent. This creates a more accessible experience for users, as the content is no longer obscured. :::note `\u003cPortal\u003e` will render wrapped unless specifically targeting `document.head`. This is so events propagate through the Portal according to the component hierarchy instead of the elements hierarchy. By default, children will wrap in a `\u003cdiv\u003e`. If you portal into an SVG, then the `isSVG` prop must be used to avoid wrapping the children in a `\u003cdiv\u003e` and wrap in a `\u003cg\u003e` instead. ```jsx import { Portal } from \"solid-js/web\" function Rect() { return ( \u003cPortal mount={document.querySelector(\"svg\")} isSVG={true}\u003e \u003crect fill=\"red\" x=\"25\" y=\"25\" height=\"50\" width=\"50\" /\u003e \u003c/Portal\u003e ); } function SVG() { return \u003csvg xmlns=\"http://www.w3.org/2000/svg\" /\u003e; } ``` :::", "term_freq": { "---": 2, "//app": 2, "//developer": 1, "//github": 1, "//www": 1, "/\u003e": 3, "25": 2, "50": 2, "\u003c/div\u003e": 2, "\u003c/portal\u003e": 3, "\u003cdiv": 2, "\u003cdiv\u003e": 2, "\u003ceraserlink": 1, "\u003cg\u003e": 1, "\u003cportal": 2, "\u003cportal\u003e": 6, "\u003crect": 1, "\u003csvg": 1, "\u003e-": 2, "accepts": 1, "accessible": 1, "according": 1, "an": 4, "and": 5, "application": 1, "as": 3, "at": 1, "avoid": 1, "be": 5, "body": 1, "bound": 1, "bringing": 1, "by": 6, "can": 4, "cases": 1, "challenges": 1, "changed": 1, "children": 2, "class=": 2, "clipped": 1, "clipping": 1, "com/solidjs/solid-docs/blob/head/src/routes/concepts/control-flow/portal": 1, "component": 1, "container": 1, "content": 3, "contents": 1, "creates": 1, "default": 2, "description": 1, "desired": 1, "different": 1, "document": 7, "dom": 3, "dropdowns": 1, "due": 1, "element": 4, "elements": 5, "elements=iepk0uih2oc365hkpkf3wa": 1, "elements=iepk0uih2oc365hkpkf3wa\u0026type=embed": 1, "end": 1, "eraser": 2, "events": 1, "expected": 1, "experience": 1, "fill=": 1, "flow": 3, "for": 3, "from": 3, "function": 2, "github-document": 1, "head": 1, "height=": 1, "helps": 1, "hierarchy": 2, "how": 1, "href=": 1, "http": 1, "https": 4, "if": 1, "import": 3, "in": 6, "information": 1, "instead": 2, "intention": 1, "interfere": 1, "into": 2, "io/workspace/madvfw5oryupjowslyk9": 1, "io/workspace/madvfw5oryupjowslyk9/preview": 1, "is": 4, "issues": 2, "issvg": 1, "issvg=": 1, "it": 1, "its": 1, "jsx": 3, "learn": 1, "like": 1, "longer": 2, "look": 1, "main": 1, "mdx": 1, "might": 1, "modal": 1, "modals": 2, "more": 1, "mount": 3, "mount=": 2, "mozilla": 1, "must": 1, "nested": 1, "no": 2, "node": 1, "normal": 1, "note": 1, "obscured": 2, "of": 7, "or": 2, "order": 1, "org/2000/svg": 1, "org/en-us/docs/web/api/node": 1, "outside": 4, "overflow": 5, "parent": 4, "particularly": 1, "passing": 1, "place": 1, "point": 1, "popup": 3, "popups": 3, "portal": 10, "positioned": 1, "preview=": 1, "prop": 3, "propagate": 1, "putting": 2, "queryselector": 2, "rect": 1, "red": 1, "related": 1, "render": 2, "rendered": 1, "rendering": 2, "renders": 1, "requires": 1, "return": 2, "settings": 2, "so": 2, "solid-js/web": 3, "solve": 1, "specifically": 1, "stacking": 1, "svg": 3, "tags": 1, "targeting": 1, "the": 21, "their": 1, "then": 1, "they": 1, "this": 4, "through": 1, "title": 1, "to": 6, "tooltips": 1, "true": 1, "unless": 1, "use_cases": 1, "used": 2, "useful": 1, "users": 1, "using": 1, "usual": 1, "version": 1, "w3": 1, "when": 1, "where": 1, "which": 1, "width=": 1, "will": 3, "with": 2, "within": 1, "wrap": 2, "wrapped": 1, "wrapping": 1, "x=": 1, "xmlns=": 1, "y=": 1, "you": 1, "z-index": 4 }, "length": 360 }, { "id": "cc87c29ce70669d1b5478260", "doc_id": "274b913dda7235c1f68b7877", "title": "preload-data", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/data-fetching/how-to/preload-data.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/preload-data.json", "content": "--- title: \"Preload data\" --- Preloading data improves perceived performance by fetching the data for an upcoming page before the user navigates to it. Solid Router initiates preloading in two scenarios: - When a user indicates intent to navigate to the page (e.g., by hovering over a link). - When the route's component is rendering. This ensures data fetching starts as early as possible, often making data ready once the component renders. Preloading is configured using the [`preload`](/solid-router/reference/preload-functions/preload) prop on a [`Route`](/solid-router/reference/components/route). This prop accepts a function that calls one or more queries. When triggered, the queries execute and their results are stored in a short-lived internal cache. Once the user navigates and the destination route’s component renders, any `createAsync` calls within the page will consume the preloaded data. Thanks to the [deduplication mechanism](#deduplication), no redundant network requests are made. ```tsx {18-20,27} import { Show } from \"solid-js\"; import { Route, query, createAsync } from \"@solidjs/router\"; const getProductQuery = query(async (id: string) =\u003e { // ... Fetches product details for the given ID. }, \"product\"); function ProductDetails(props) { const product = createAsync(() =\u003e getProductQuery(props.params.id)); return ( \u003cShow when={product()}\u003e \u003ch1\u003e{product().name}\u003c/h1\u003e \u003c/Show\u003e ); } function preloadProduct({ params }: { params: { id: string } }) { getProductQuery(params.id); } function Routes() { return ( \u003cRoute path=\"/products/:id\" component={ProductDetails} preload={preloadProduct} /\u003e ); } ``` In this example, hovering a link to `/products/:id` triggers `preloadProduct`. When the `ProductDetails` component renders, its `createAsync` call will instantly resolve with the preloaded data.", "term_freq": { "#deduplication": 1, "---": 2, "//": 1, "//github": 1, "/\u003e": 1, "/products/": 2, "/solid-router/reference/components/route": 1, "/solid-router/reference/preload-functions/preload": 1, "18-20": 1, "27": 1, "\u003c/h1\u003e": 1, "\u003c/show\u003e": 1, "\u003ch1\u003e": 1, "\u003croute": 1, "\u003cshow": 1, "=\u003e": 2, "@solidjs/router": 1, "accepts": 1, "an": 1, "and": 2, "any": 1, "are": 2, "as": 2, "async": 1, "before": 1, "by": 2, "cache": 1, "call": 1, "calls": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/data-fetching/how-to/preload-data": 1, "component": 4, "component=": 1, "configured": 1, "const": 2, "consume": 1, "createasync": 4, "data": 7, "deduplication": 1, "destination": 1, "details": 1, "early": 1, "ensures": 1, "example": 1, "execute": 1, "fetches": 1, "fetching": 2, "for": 2, "from": 2, "function": 4, "getproductquery": 3, "github-document": 1, "given": 1, "hovering": 2, "https": 1, "id": 7, "import": 2, "improves": 1, "in": 3, "indicates": 1, "initiates": 1, "instantly": 1, "intent": 1, "internal": 1, "is": 2, "it": 1, "its": 1, "link": 2, "made": 1, "making": 1, "mdx": 1, "mechanism": 1, "more": 1, "name": 1, "navigate": 1, "navigates": 2, "network": 1, "no": 1, "often": 1, "on": 1, "once": 2, "one": 1, "or": 1, "over": 1, "page": 3, "params": 4, "path=": 1, "perceived": 1, "performance": 1, "possible": 1, "preload": 2, "preload-data": 1, "preload=": 1, "preloaded": 2, "preloading": 3, "preloadproduct": 3, "product": 5, "productdetails": 3, "prop": 2, "props": 2, "queries": 2, "query": 2, "ready": 1, "redundant": 1, "rendering": 1, "renders": 3, "requests": 1, "resolve": 1, "results": 1, "return": 2, "route": 3, "router": 1, "routes": 1, "route’s": 1, "scenarios": 1, "short-lived": 1, "show": 1, "solid": 1, "solid-js": 1, "starts": 1, "stored": 1, "string": 2, "thanks": 1, "that": 1, "the": 15, "their": 1, "this": 3, "title": 1, "to": 5, "triggered": 1, "triggers": 1, "tsx": 1, "two": 1, "upcoming": 1, "user": 3, "using": 1, "when": 4, "when=": 1, "will": 2, "with": 1, "within": 1 }, "length": 236 }, { "id": "c66738ca093d8e46e0b5bb73", "doc_id": "98c8929c207f4d94101e6b04", "title": "preload", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/preload-functions/preload.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/preload.json", "content": "--- title: preload use_cases: \u003e- route preloading, hover prefetch, parallel loading, performance optimization, lazy routes, code splitting tags: - preload - performance - routing - prefetch - lazy - optimization version: '1.0' description: \u003e- Preload route data and code in parallel to eliminate waterfalls. Enable hover prefetching for instant page transitions. --- The `preload` function is a property on a route definition that initiates data fetching before a user navigates to the route. `preload` runs in two separate phases: - **Preload phase:** Triggered by user intent (e.g., hovering over a link), the function is called to initiate data fetching. - **Rendering phase:** Triggered by actual navigation, the function is called a second time to provide the fetched data to the component. ## Import ```tsx import { Route } from \"@solidjs/router\"; ``` ## Type ```tsx type RoutePreloadFunc\u003cT = unknown\u003e = (args: RoutePreloadFuncArgs) =\u003e T; interface RoutePreloadFuncArgs { params: Params; location: Location; intent: \"initial\" | \"native\" | \"navigate\" | \"preload\"; } ``` ## Parameters ### `params` - **Type:** `Params` An object containing the parameters for the matched route. It corresponds to the value returned by the [`useParams` primitive](/solid-router/reference/primitives/use-params). ### `location` - **Type:** `Location` The router's location object for the destination URL. It corresponds to the value returned by the [`useLocation` primitive](/solid-router/reference/primitives/use-location). ### `intent` - **Type:** `\"initial\" | \"native\" | \"navigate\" | \"preload\"` A string indicating the context in which the function is called. - `\"preload\"`: The function is running to initiate data fetching. - `\"navigate\"`: The function is running during navigation to the route. - `\"initial\"`: The function is running for the first route on page load. ## Return value The value returned by `preload` is passed to the route's component as the `data` prop. - In the **preload phase** (`intent: \"preload\"`), the return value is **ignored**. - In the **rendering phase** (`intent: \"navigate\"` or `\"initial\"`), the return value is **captured** and provided to the component. ## Examples ```tsx import { Route, query, createAsync } from \"@solidjs/router\"; const getProductQuery = query(async (id: string) =\u003e { // ... Fetches a product from the server. }, \"product\"); function ProductPage(props) { const product = createAsync(() =\u003e getProductQuery(props.params.id)); return \u003cdiv\u003e{product()?.title}\u003c/div\u003e; } function preloadData({ params }) { getProductQuery(params.id); } function ProductRoutes() { return ( \u003cRoute path=\"/products/:id\" component={ProductPage} preload={preloadData} /\u003e ); } ```", "term_freq": { "##": 5, "###": 3, "**": 5, "**captured**": 1, "**ignored**": 1, "**preload": 2, "**rendering": 2, "**type": 3, "---": 2, "//": 1, "//github": 1, "/\u003e": 1, "/products/": 1, "/solid-router/reference/primitives/use-location": 1, "/solid-router/reference/primitives/use-params": 1, "\u003c/div\u003e": 1, "\u003cdiv\u003e": 1, "\u003croute": 1, "=\u003e": 3, "\u003e-": 2, "@solidjs/router": 2, "actual": 1, "an": 1, "and": 2, "args": 1, "as": 1, "async": 1, "before": 1, "by": 5, "called": 3, "code": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/preload-functions/preload": 1, "component": 3, "component=": 1, "const": 2, "containing": 1, "context": 1, "corresponds": 2, "createasync": 2, "data": 6, "definition": 1, "description": 1, "destination": 1, "during": 1, "eliminate": 1, "enable": 1, "examples": 1, "fetched": 1, "fetches": 1, "fetching": 3, "first": 1, "for": 4, "from": 3, "function": 10, "getproductquery": 3, "github-document": 1, "hover": 2, "hovering": 1, "https": 1, "id": 4, "import": 3, "in": 5, "indicating": 1, "initial": 4, "initiate": 2, "initiates": 1, "instant": 1, "intent": 5, "interface": 1, "is": 10, "it": 2, "lazy": 2, "link": 1, "load": 1, "loading": 1, "location": 5, "matched": 1, "mdx": 1, "native": 2, "navigate": 4, "navigates": 1, "navigation": 2, "object": 2, "on": 2, "optimization": 2, "or": 1, "over": 1, "page": 2, "parallel": 2, "parameters": 2, "params": 7, "passed": 1, "path=": 1, "performance": 2, "phase": 2, "phase**": 2, "phases": 1, "prefetch": 2, "prefetching": 1, "preload": 11, "preload=": 1, "preloaddata": 2, "preloading": 1, "primitive": 2, "product": 4, "productpage": 2, "productroutes": 1, "prop": 1, "property": 1, "props": 2, "provide": 1, "provided": 1, "query": 2, "return": 5, "returned": 3, "route": 10, "routepreloadfunc\u003ct": 1, "routepreloadfuncargs": 2, "router": 1, "routes": 1, "routing": 1, "running": 3, "runs": 1, "second": 1, "separate": 1, "server": 1, "splitting": 1, "string": 2, "tags": 1, "that": 1, "the": 30, "time": 1, "title": 2, "to": 11, "transitions": 1, "triggered": 2, "tsx": 3, "two": 1, "type": 2, "unknown\u003e": 1, "url": 1, "use_cases": 1, "uselocation": 1, "useparams": 1, "user": 2, "value": 6, "version": 1, "waterfalls": 1, "which": 1 }, "length": 345 }, { "id": "e1e067bb3e363102e94e592a", "doc_id": "709daf5c603c9a004d761d2b", "title": "preloading", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/advanced-concepts/preloading.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/preloading.json", "content": "--- title: Preloading --- Preloading smooths navigation by resolving route code and data before a user completes a transition. Solid Router listens for intent signals, such as hover and focus, and primes the matching route after a short delay to balance responsiveness and network cost. Understanding the timing and scope of this work lets you decide when to rely on the default behaviour and when to layer custom strategies. | user action | route behaviour | | ----------- | --------------- | | hover | waits roughly 20 ms before preloading | | focus | preloads immediately | ## How Solid Router Detects Intent Anchors registered with Solid Router emit hover and focus events that feed a small scheduler. The router debounces the hover signal for 20ms to ignore incidental pointer passes while still reacting quickly to purposeful movement. When the delay elapses, the router loads the route module and runs its preload routine so that navigation has the assets it needs when the user commits. Route modules can export a [`preload`](/solid-router/reference/preload-functions/preload) function that receives params, search values, and router context. The function lets you seed caches, warm derived computations, or coordinate streaming behaviours without blocking the eventual render. \u003e [!NOTE] \u003e SSR invokes route `preload` functions during the initial server render and resumes them on the client during hydration. \u003e Keep these functions pure so the hydrated client does not need to undo server work when it takes over. ## Imperative Preloading Hooks Not every interaction funnels through an anchor element. The [`usePreloadRoute`](/solid-router/reference/primitives/use-preload-route) primitive exposes the same scheduling behaviour for imperative flows like flyout previews, timers, or observer driven experiences. This helper mirrors the router behaviour by resolving the module, optionally running the loader, and caching the result for the eventual navigation. Empirical tuning of delay values helps you avoid excessive prefetching in dense UIs while still keeping high intent interactions snappy. ## Coordinating Nested Lazy Components Nested lazy components live outside the router hierarchy, so route preloading does not automatically warm them. The component API [`lazy()`](/reference/component-apis/lazy) exposes a `preload()` method that resolves a component without rendering it. Calling both the route preload and the nested component preload can keep large detail panels responsive when a user hovers or focuses on the entry point. Balancing manual preloading requires observing real user flows so you avoid prefetching large bundles that the user never requests. Profiling tools help you spot whether preloading reduces long tasks or simply shifts work earlier without net gains. To learn more about lazy loading components, see the [lazy documentation](/reference/component-apis/lazy#preloading-data-in-nested-lazy-components).", "term_freq": { "##": 3, "---": 2, "-----------": 1, "---------------": 1, "//github": 1, "/reference/component-apis/lazy": 1, "/reference/component-apis/lazy#preloading-data-in-nested-lazy-components": 1, "/solid-router/reference/preload-functions/preload": 1, "/solid-router/reference/primitives/use-preload-route": 1, "20": 1, "20ms": 1, "about": 1, "action": 1, "after": 1, "an": 1, "anchor": 1, "anchors": 1, "and": 12, "api": 1, "as": 1, "assets": 1, "automatically": 1, "avoid": 2, "balance": 1, "balancing": 1, "before": 2, "behaviour": 4, "behaviours": 1, "blocking": 1, "both": 1, "bundles": 1, "by": 2, "caches": 1, "caching": 1, "calling": 1, "can": 2, "client": 2, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/advanced-concepts/preloading": 1, "commits": 1, "completes": 1, "component": 3, "components": 3, "computations": 1, "context": 1, "coordinate": 1, "coordinating": 1, "cost": 1, "custom": 1, "data": 1, "debounces": 1, "decide": 1, "default": 1, "delay": 3, "dense": 1, "derived": 1, "detail": 1, "detects": 1, "documentation": 1, "does": 2, "driven": 1, "during": 2, "earlier": 1, "elapses": 1, "element": 1, "emit": 1, "empirical": 1, "entry": 1, "events": 1, "eventual": 2, "every": 1, "excessive": 1, "experiences": 1, "export": 1, "exposes": 2, "feed": 1, "flows": 2, "flyout": 1, "focus": 3, "focuses": 1, "for": 4, "function": 2, "functions": 2, "funnels": 1, "gains": 1, "github-document": 1, "has": 1, "help": 1, "helper": 1, "helps": 1, "hierarchy": 1, "high": 1, "hooks": 1, "hover": 4, "hovers": 1, "how": 1, "https": 1, "hydrated": 1, "hydration": 1, "ignore": 1, "immediately": 1, "imperative": 2, "in": 1, "incidental": 1, "initial": 1, "intent": 3, "interaction": 1, "interactions": 1, "invokes": 1, "it": 3, "its": 1, "keep": 2, "keeping": 1, "large": 2, "layer": 1, "lazy": 5, "learn": 1, "lets": 2, "like": 1, "listens": 1, "live": 1, "loader": 1, "loading": 1, "loads": 1, "long": 1, "manual": 1, "matching": 1, "mdx": 1, "method": 1, "mirrors": 1, "module": 2, "modules": 1, "more": 1, "movement": 1, "ms": 1, "navigation": 3, "need": 1, "needs": 1, "nested": 3, "net": 1, "network": 1, "never": 1, "not": 3, "note": 1, "observer": 1, "observing": 1, "of": 2, "on": 3, "optionally": 1, "or": 4, "outside": 1, "over": 1, "panels": 1, "params": 1, "passes": 1, "point": 1, "pointer": 1, "prefetching": 2, "preload": 6, "preloading": 8, "preloads": 1, "previews": 1, "primes": 1, "primitive": 1, "profiling": 1, "pure": 1, "purposeful": 1, "quickly": 1, "reacting": 1, "real": 1, "receives": 1, "reduces": 1, "registered": 1, "rely": 1, "render": 2, "rendering": 1, "requests": 1, "requires": 1, "resolves": 1, "resolving": 2, "responsive": 1, "responsiveness": 1, "result": 1, "resumes": 1, "roughly": 1, "route": 8, "router": 8, "routine": 1, "running": 1, "runs": 1, "same": 1, "scheduler": 1, "scheduling": 1, "scope": 1, "search": 1, "see": 1, "seed": 1, "server": 2, "shifts": 1, "short": 1, "signal": 1, "signals": 1, "simply": 1, "small": 1, "smooths": 1, "snappy": 1, "so": 4, "solid": 3, "spot": 1, "ssr": 1, "still": 2, "strategies": 1, "streaming": 1, "such": 1, "takes": 1, "tasks": 1, "that": 5, "the": 29, "them": 2, "these": 1, "this": 2, "through": 1, "timers": 1, "timing": 1, "title": 1, "to": 7, "tools": 1, "transition": 1, "tuning": 1, "uis": 1, "understanding": 1, "undo": 1, "usepreloadroute": 1, "user": 6, "values": 2, "waits": 1, "warm": 2, "when": 6, "whether": 1, "while": 2, "with": 1, "without": 3, "work": 3, "you": 5 }, "length": 409 }, { "id": "b7921d50a08a4ceb3bd42c3e", "doc_id": "98cfefa5909035fe892680e2", "title": "produce", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/store-utilities/produce.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/produce.json", "content": "--- title: produce use_cases: \u003e- immutable updates, immer-style mutations, store modifications, complex state changes, nested updates tags: - store - immutable - updates - immer - mutations version: '1.0' description: \u003e- Use Immer-inspired produce API to mutate Solid stores immutably. Simplify complex nested updates with familiar mutation syntax. --- `produce` is an [Immer](https://immerjs.github.io/immer/) inspired API for Solid's Store objects that allows the store to be mutated inside the `produce` function. ```ts import { produce } from \"solid-js/store\" import type { NotWrappable, Store } from \"solid-js/store\" function produce\u003cT\u003e( fn: (state: T) =\u003e void ): ( state: T extends NotWrappable ? T : Store\u003cT\u003e ) =\u003e T extends NotWrappable ? T : Store\u003cT\u003e; ``` For use with `createStore`: ```tsx import { produce } from \"solid-js/store\"; const [state, setState] = createStore({ user: { name: \"John\", age: 30, }, list: [\"book\", \"pen\"], }); setState( produce((state) =\u003e { state.user.name = \"Jane\"; state.list.push(\"pencil\"); }) ); ```", "term_freq": { "---": 2, "//github": 1, "//immerjs": 1, "30": 1, "=\u003e": 3, "\u003e-": 2, "age": 1, "allows": 1, "an": 1, "api": 2, "be": 1, "book": 1, "changes": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/store-utilities/produce": 1, "complex": 2, "const": 1, "createstore": 2, "description": 1, "extends": 2, "familiar": 1, "fn": 1, "for": 2, "from": 3, "function": 2, "github": 1, "github-document": 1, "https": 2, "immer": 2, "immer-inspired": 1, "immer-style": 1, "immutable": 2, "immutably": 1, "import": 3, "inside": 1, "inspired": 1, "io/immer/": 1, "is": 1, "jane": 1, "john": 1, "list": 2, "mdx": 1, "modifications": 1, "mutate": 1, "mutated": 1, "mutation": 1, "mutations": 2, "name": 2, "nested": 2, "notwrappable": 3, "objects": 1, "pen": 1, "pencil": 1, "produce": 8, "produce\u003ct\u003e": 1, "push": 1, "setstate": 2, "simplify": 1, "solid": 2, "solid-js/store": 3, "state": 7, "store": 5, "store\u003ct\u003e": 2, "stores": 1, "syntax": 1, "tags": 1, "that": 1, "the": 2, "title": 1, "to": 2, "ts": 1, "tsx": 1, "type": 1, "updates": 4, "use": 2, "use_cases": 1, "user": 2, "version": 1, "void": 1, "with": 2 }, "length": 132 }, { "id": "5dcfbbe0368f39cfe86770c3", "doc_id": "3212d2fa3a123c87a360465d", "title": "Progressive Enhancement | Remix", "url": "https://v2.remix.run/docs/discussion/progressive-enhancement", "type": "html", "source": "remix:does", "path": "devour_data/docs/progressive-enhancement---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsProgressive EnhancementGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Progressive Enhancement Progressive enhancement is a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, whilst users with additional browser features or faster Internet access receive the enhanced version instead. - Wikipedia Coined in 2003 by Steven Champeon \u0026 Nick Finck, the phrase emerged during a time of varied CSS and JavaScript support across different browsers, with many users actually browsing the web with JavaScript disabled. Today, we are fortunate to develop for a much more consistent web and where the majority of users have JavaScript enabled. However, we still believe in the core principles of progressive enhancement in Remix. It leads to fast and resilient apps with simple development workflows. Performance: While it's easy to think that only 5% of your users have slow connections, the reality is that 100% of your users have slow connections 5% of the time. Resilience: Everybody has JavaScript disabled until it's loaded. Simplicity: Building your apps in a progressively enhanced way with Remix is actually simpler than building a traditional SPA. Performance Sending HTML from the server allows your app to do more things in parallel than a typical Single Page App (SPA), making the initial loading experience and subsequent navigations faster. Typical SPAs send a blank document and only start doing work when JavaScript has loaded. HTML |---| JavaScript |---------| Data |---------------| page rendered 👆 A Remix app can start doing work the moment the request hits the server and stream the response so that the browser can start downloading JavaScript, other assets, and data in parallel. 👇 first byte HTML |---|-----------| JavaScript |---------| Data |---------------| page rendered 👆 Resilience and Accessibility While your users probably don't browse the web with JavaScript disabled, everybody has JavaScript disabled until it has finished loading. As soon as you begin server rendering your UI, you need to account for what happens when they try to interact with your app before JavaScript has loaded. Remix embraces progressive enhancement by building its abstraction on top of HTML. This means that you can build your app in a way that works without JavaScript and then layer on JavaScript to enhance the experience. The simplest case is a \u003cLink to=\"/account\"\u003e. These render an \u003ca href=\"/account\"\u003e tag that works without JavaScript. When JavaScript loads, Remix will intercept clicks and handle the navigation with client side routing. This gives you more control over the UX instead of just spinning favicons in the browser tab--but it works either way. Now consider a simple \"add to cart\" button. export function AddToCart({ id }) { return ( \u003cForm method=\"post\" action=\"/add-to-cart\"\u003e \u003cinput type=\"hidden\" name=\"id\" value={id} /\u003e \u003cbutton type=\"submit\"\u003eAdd To Cart\u003c/button\u003e \u003c/Form\u003e ); } Whether JavaScript has loaded or not doesn't matter; this button will add the product to the cart. When JavaScript loads, Remix will intercept the form submission and handle it client side. This allows you to add your own pending UI, or other client side behavior. Simplicity When you start to rely on basic features of the web like HTML and URLs, you will find that you reach for client side state and state management much less. Consider the button from before, with no fundamental change to the code; we can pepper in some client side behavior: import { useFetcher } from \"@remix-run/react\"; export function AddToCart({ id }) { const fetcher = useFetcher(); return ( \u003cfetcher.Form method=\"post\" action=\"/add-to-cart\"\u003e \u003cinput name=\"id\" value={id} /\u003e \u003cbutton type=\"submit\"\u003e {fetcher.state === \"submitting\" ? \"Adding...\" : \"Add To Cart\"} \u003c/button\u003e \u003c/fetcher.Form\u003e ); } This feature continues to work the very same as it did before when JavaScript was loading, but once JavaScript loads: useFetcher no longer causes a navigation like \u003cForm\u003e does, so the user can stay on the same page and keep shopping The app code determines the pending UI instead of spinning favicons in the browser It's not about building it two different ways–once for JavaScript and once without–it's about building it in iterations. Start with the simplest version of the feature and ship it; then iterate to an enhanced user experience. Not only will the user get a progressively enhanced experience, but the app developer gets to \"progressively enhance\" the UI without changing the fundamental design of the feature. Another example where progressive enhancement leads to simplicity is with the URL. When you start with a URL, you don't need to worry about client side state management. You can use the URL as the source of truth for the UI. export function SearchBox() { return ( \u003cForm method=\"get\" action=\"/search\"\u003e \u003cinput type=\"search\" name=\"query\" /\u003e \u003cSearchIcon /\u003e \u003c/Form\u003e ); } This component doesn't need any state management. It just renders a form that submits to /search. When JavaScript loads, Remix will intercept the form submission and handle it client side. This allows you to add your own pending UI, or other client side behavior. Here's the next iteration: import { useNavigation } from \"@remix-run/react\"; export function SearchBox() { const navigation = useNavigation(); const isSearching = navigation.location.pathname === \"/search\"; return ( \u003cForm method=\"get\" action=\"/search\"\u003e \u003cinput type=\"search\" name=\"query\" /\u003e {isSearching ? \u003cSpinner /\u003e : \u003cSearchIcon /\u003e} \u003c/Form\u003e ); } No fundamental change in architecture, simply a progressive enhancement for both the user and the code. See also: State Management© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_971\\\":-5,\\\"_972\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":970},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"docs/discussion/progressive-enhancement.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"progressive-enhancement\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#progressive-enhancement\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eProgressive Enhancement\\u003c/h1\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003eProgressive enhancement is a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, whilst users with additional browser features or faster Internet access receive the enhanced version instead.\\u003c/p\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003cp\\u003e\\u003ccite\\u003e- \\u003ca href=\\\\\\\"https://en.wikipedia.org/wiki/Progressive_enhancement\\\\\\\"\\u003eWikipedia\\u003c/a\\u003e\\u003c/cite\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eCoined in 2003 by Steven Champeon \\u0026#x26; Nick Finck, the phrase emerged during a time of varied CSS and JavaScript support across different browsers, with many users actually browsing the web with JavaScript disabled.\\u003c/p\\u003e\\\\n\\u003cp\\u003eToday, we are fortunate to develop for a much more consistent web and where the majority of users have JavaScript enabled.\\u003c/p\\u003e\\\\n\\u003cp\\u003eHowever, we still believe in the core principles of progressive enhancement in Remix. It leads to fast and resilient apps with simple development workflows.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ePerformance\\u003c/strong\\u003e: While it's easy to think that only 5% of your users have slow connections, the reality is that 100% of your users have slow connections 5% of the time.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eResilience\\u003c/strong\\u003e: Everybody has JavaScript disabled until it's loaded.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eSimplicity\\u003c/strong\\u003e: Building your apps in a progressively enhanced way with Remix is actually simpler than building a traditional SPA.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"performance\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#performance\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePerformance\\u003c/h2\\u003e\\\\n\\u003cp\\u003eSending HTML from the server allows your app to do more things in parallel than a typical Single Page App (SPA), making the initial loading experience and subsequent navigations faster.\\u003c/p\\u003e\\\\n\\u003cp\\u003eTypical SPAs send a blank document and only start doing work when JavaScript has loaded.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003eHTML |---|\\\\nJavaScript |---------|\\\\nData |---------------|\\\\n page rendered 👆\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eA Remix app can start doing work the moment the request hits the server and stream the response so that the browser can start downloading JavaScript, other assets, and data in parallel.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003e 👇 first byte\\\\nHTML |---|-----------|\\\\nJavaScript |---------|\\\\nData |---------------|\\\\n page rendered 👆\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch2 id=\\\\\\\"resilience-and-accessibility\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#resilience-and-accessibility\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eResilience and Accessibility\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhile your users probably don't browse the web with JavaScript disabled, everybody has JavaScript disabled until it has finished loading. As soon as you begin server rendering your UI, you need to account for what happens when they try to interact with your app before JavaScript has loaded.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix embraces progressive enhancement by building its abstraction on top of HTML. This means that you can build your app in a way that works without JavaScript and then layer on JavaScript to enhance the experience.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe simplest case is a \\u003ccode\\u003e\\u0026#x3C;Link to=\\\\\\\"/account\\\\\\\"\\u003e\\u003c/code\\u003e. These render an \\u003ccode\\u003e\\u0026#x3C;a href=\\\\\\\"/account\\\\\\\"\\u003e\\u003c/code\\u003e tag that works without JavaScript. When JavaScript loads, Remix will intercept clicks and handle the navigation with client side routing. This gives you more control over the UX instead of just spinning favicons in the browser tab--but it works either way.\\u003c/p\\u003e\\\\n\\u003cp\\u003eNow consider a simple \\\\\\\"add to cart\\\\\\\" button.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eAddToCart\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/add-to-cart\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ehidden\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eid\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003eAdd To Cart\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eWhether JavaScript has loaded or not doesn't matter; this button will add the product to the cart.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWhen JavaScript loads, Remix will intercept the form submission and handle it client side. This allows you to add your own pending UI, or other client side behavior.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"simplicity\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#simplicity\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSimplicity\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhen you start to rely on basic features of the web like HTML and URLs, you will find that you reach for client side state and state management much less.\\u003c/p\\u003e\\\\n\\u003cp\\u003eConsider the button from before, with no fundamental change to the code; we can pepper in some client side behavior:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eAddToCart\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/add-to-cart\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eid\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmitting\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eAdding...\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eAdd To Cart\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThis feature continues to work the very same as it did before when JavaScript was loading, but once JavaScript loads:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003euseFetcher\\u003c/code\\u003e no longer causes a navigation like \\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e does, so the user can stay on the same page and keep shopping\\u003c/li\\u003e\\\\n\\u003cli\\u003eThe app code determines the pending UI instead of spinning favicons in the browser\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eIt's not about building it two different ways–once for JavaScript and once without–it's about building it in iterations. Start with the simplest version of the feature and ship it; then iterate to an enhanced user experience.\\u003c/p\\u003e\\\\n\\u003cp\\u003eNot only will the user get a progressively enhanced experience, but the app developer gets to \\\\\\\"progressively enhance\\\\\\\" the UI without changing the fundamental design of the feature.\\u003c/p\\u003e\\\\n\\u003cp\\u003eAnother example where progressive enhancement leads to simplicity is with the URL. When you start with a URL, you don't need to worry about client side state management. You can use the URL as the source of truth for the UI.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eSearchBox\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eget\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/search\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003equery\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eSearchIcon\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThis component doesn't need any state management. It just renders a form that submits to \\u003ccode\\u003e/search\\u003c/code\\u003e. When JavaScript loads, Remix will intercept the form submission and handle it client side. This allows you to add your own pending UI, or other client side behavior. Here's the next iteration:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eSearchBox\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisSearching\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elocation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epathname\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/search\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eget\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/search\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003equery\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisSearching\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eSpinner\\u003c/span\\u003e /\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eSearchIcon\\u003c/span\\u003e /\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNo fundamental change in architecture, simply a progressive enhancement for both the user and the code.\\u003c/p\\u003e\\\\n\\u003cp\\u003eSee also: \\u003ca href=\\\\\\\"./state-management\\\\\\\"\\u003eState Management\\u003c/a\\u003e\\u003c/p\\u003e\\\",\\\"docs/discussion/progressive-enhancement\\\",\\\"headings\\\",[960,964,967],{\\\"_961\\\":962,\\\"_955\\\":889,\\\"_24\\\":963},\\\"headingLevel\\\",\\\"h2\\\",\\\"performance\\\",{\\\"_961\\\":962,\\\"_955\\\":965,\\\"_24\\\":966},\\\"Resilience and Accessibility\\\",\\\"resilience-and-accessibility\\\",{\\\"_961\\\":962,\\\"_955\\\":968,\\\"_24\\\":969},\\\"Simplicity\\\",\\\"simplicity\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#performance\\\\\\": 1, "#progressive-enhancement\\\\\\": 1, "#resilience-and-accessibility\\\\\\": 1, "#simplicity\\\\\\": 1, "$\\": 1, "$rc": 3, "--base05": 4, "--base08": 22, "--base0a": 14, "--base0b": 23, "--base0d": 30, "--base0e": 40, "--base0f": 8, "-1\\\\\\": 4, "-5": 2, "/$": 1, "//en": 1, "//v2": 2, "/\u003e": 7, "/\\u003cspan": 6, "/\\u003e": 1, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 5, "/\\u003e\\u003cspan": 1, "/account": 2, "/account\\\\\\": 2, "/add-to-cart": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/search": 4, "/state-management\\\\\\": 1, "0===e": 1, "10": 43, "100": 1, "100%": 2, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 2, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 2, "118": 3, "119": 1, "11\\\\\\": 2, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 2, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 2, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 2, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "1\\\\\\": 4, "200": 1, "2003": 2, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 4, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 4, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 4, "5%": 4, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 4, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 4, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 4, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 2, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 4, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 3, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "98": 1, "99": 1, "9\\\\\\": 2, "\u003c/button\u003e": 1, "\u003c/fetcher": 1, "\u003c/form\u003e": 3, "\u003ca": 1, "\u003cbutton": 2, "\u003cfetcher": 1, "\u003cform": 3, "\u003cform\u003e": 1, "\u003cinput": 4, "\u003clink": 1, "\u003csearchicon": 2, "\u003cspinner": 1, "===": 3, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 1, "\u003eadd": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/react": 2, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 154, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eno": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethis": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ewhether": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 19, "\\n": 1, "\\u0026#x26": 1, "\\u0026#x3c": 18, "\\u003c/p\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003cp\\u003e\\u003ccite\\u003e-": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 4, "\\u003c/p\\u003e\\\\n\\u003ch2": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eperformance\\u003c/strong\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eresilience\\u003c/strong\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003esimplicity\\u003c/strong\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eanother": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003econsider": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ehowever": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003enot": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003enow": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003esee": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003etoday": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003etypical": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewhen": 1, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003ehtml": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eusefetcher\\u003c/code\\u003e": 1, "\\u003c/span\\u003e": 6, "\\u003c/span\\u003e\\\\\\": 1, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003c/span\\u003e\\u003cspan": 4, "\\u003ca": 2, "\\u003ccode\\u003e/search\\u003c/code\\u003e": 1, "\\u003ccode\\u003e\\u0026#x3c": 3, "\\u003ch1": 1, "\\u003cspan": 97, "\\u003e": 48, "\\u003e/add-to-cart\\u003c/span\\u003e\\\\\\": 2, "\\u003e/search\\u003c/span\\u003e\\\\\\": 3, "\\u003e===\\u003c/span\\u003e": 2, "\\u003e=\\u003c/span\\u003e": 2, "\\u003e=\\u003c/span\\u003e\\\\\\": 17, "\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e=\\u003c/span\\u003e\\u003cspan": 2, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 2, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 9, "\\u003e\\u003c/code\\u003e": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eperformance\\u003c/h2\\u003e\\\\n\\u003cp\\u003esending": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eprogressive": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eresilience": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003esimplicity\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhen": 1, "\\u003e\\u003ca": 4, "\\u003e\\u003ccode\\u003e\\u003cspan": 4, "\\u003e\\u003cpre": 4, "\\u003e\\u003cspan": 10, "\\u003eaction\\u003c/span\\u003e\\u003cspan": 4, "\\u003eadd": 2, "\\u003eadding": 1, "\\u003eaddtocart\\u003c/span\\u003e": 2, "\\u003ebutton\\u003c/span\\u003e": 2, "\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003econst\\u003c/span\\u003e": 3, "\\u003eexport\\u003c/span\\u003e": 4, "\\u003efetcher": 2, "\\u003efetcher\\u003c/span\\u003e": 2, "\\u003eform\\u003c/span\\u003e": 3, "\\u003eform\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003efrom\\u003c/span\\u003e": 2, "\\u003efunction\\u003c/span\\u003e": 4, "\\u003eget\\u003c/span\\u003e\\\\\\": 2, "\\u003ehidden\\u003c/span\\u003e\\\\\\": 1, "\\u003eid\\u003c/span\\u003e": 2, "\\u003eid\\u003c/span\\u003e\\\\\\": 2, "\\u003eid\\u003c/span\\u003e\\u003cspan": 2, "\\u003eimport\\u003c/span\\u003e": 2, "\\u003einput\\u003c/span\\u003e": 4, "\\u003eissearching\\u003c/span\\u003e": 2, "\\u003elocation\\u003c/span\\u003e": 1, "\\u003emethod\\u003c/span\\u003e\\u003cspan": 4, "\\u003ename\\u003c/span\\u003e\\u003cspan": 4, "\\u003enavigation\\u003c/span\\u003e": 2, "\\u003epathname\\u003c/span\\u003e": 1, "\\u003epost\\u003c/span\\u003e\\\\\\": 2, "\\u003equery\\u003c/span\\u003e\\\\\\": 2, "\\u003ereturn\\u003c/span\\u003e": 4, "\\u003esearch\\u003c/span\\u003e\\\\\\": 2, "\\u003esearchbox\\u003c/span\\u003e": 2, "\\u003esearchicon\\u003c/span\\u003e": 2, "\\u003espinner\\u003c/span\\u003e": 1, "\\u003estate": 1, "\\u003estate\\u003c/span\\u003e": 1, "\\u003esubmit\\u003c/span\\u003e\\\\\\": 2, "\\u003esubmitting\\u003c/span\\u003e\\\\\\": 1, "\\u003etype\\u003c/span\\u003e\\u003cspan": 5, "\\u003eusefetcher\\u003c/span\\u003e": 2, "\\u003eusenavigation\\u003c/span\\u003e": 2, "\\u003evalue\\u003c/span\\u003e\\u003cspan": 2, "\\u003ewikipedia\\u003c/a\\u003e\\u003c/cite\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ecoined": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 28, "_22\\": 152, "_24\\": 155, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 4, "_958\\": 1, "_961\\": 3, "_971\\": 1, "_972\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 7, "abstraction": 2, "access": 4, "accessibility": 1, "accessibility\\": 2, "accessibility\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhile": 1, "account": 2, "across": 2, "action=": 4, "action\\": 1, "actiondata\\": 1, "actually": 4, "adapter": 3, "adapters": 3, "add": 9, "adding": 1, "additional": 2, "addtocart": 2, "all": 1, "allowing": 2, "allows": 6, "also": 2, "an": 5, "and": 48, "another": 1, "any": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 16, "approach": 1, "apps": 4, "architecture": 2, "are": 2, "aria-hidden=\\\\\\": 4, "as": 11, "asked": 1, "asset": 3, "assets": 2, "at": 1, "attrs\\": 1, "await\\": 1, "b=document": 1, "backend": 3, "basename": 1, "basic": 4, "be": 1, "been": 2, "before": 7, "begin": 2, "behavior": 6, "believe": 2, "blank": 2, "both": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browse": 2, "browser": 10, "browser\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eit": 1, "browsers": 2, "browsing": 2, "build": 2, "building": 10, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 4, "button": 6, "by": 4, "byte": 1, "byte\\\\nhtml": 1, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "can": 13, "cart": 4, "cart\u003c/button\u003e": 1, "cart\\\\\\": 1, "cart\\u0026#x3c": 1, "cart\\u003c/span\\u003e\\\\\\": 1, "case": 2, "catch": 1, "causes": 2, "champeon": 2, "change": 4, "changelog": 2, "changelog\\": 1, "changing": 2, "children\\": 1, "class=\\\\\\": 50, "cli": 5, "cli\\": 1, "clicks": 2, "client": 28, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "code": 10, "codeblock-line\\\\\\": 46, "coined": 1, "color": 141, "community": 3, "community\\": 1, "component": 4, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "connections": 4, "consider": 3, "consistent": 2, "console": 1, "const": 3, "constraints": 2, "constraints\\": 1, "content": 4, "continues": 2, "contributing": 3, "contributing\\": 1, "control": 2, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "core": 2, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 17, "css\\": 1, "d=c": 2, "data": 20, "data-code-block=\\\\\\": 4, "data-highlight=\\\\\\": 12, "data-lang=\\\\\\": 8, "data-line-number=\\\\\\": 46, "data-line-numbers=\\\\\\": 8, "data=": 1, "data\\": 2, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "design": 4, "determines": 2, "dev": 3, "develop": 2, "developer": 2, "development": 5, "did": 2, "different": 4, "disabled": 8, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 3, "doc\\": 1, "docs/discussion/progressive-enhancement": 1, "docs/discussion/progressive-enhancement\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsprogressive": 1, "document": 3, "does": 2, "doesn": 4, "doing": 4, "don": 4, "done": 1, "downloading": 2, "during": 2, "e--": 1, "e=0": 1, "easy": 2, "either": 2, "else": 2, "embraces": 2, "emerged": 2, "emphasis": 2, "enabled": 2, "enhance": 3, "enhance\\\\\\": 1, "enhanced": 8, "enhancement": 14, "enhancement\\": 1, "enhancement\\u003c/h1\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003eprogressive": 1, "enhancementgetting": 1, "enqueue": 1, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "everybody": 4, "everyone": 2, "everything": 1, "example": 2, "examples": 1, "execution": 2, "execution\\": 1, "experience": 8, "explanation": 2, "explanation\\": 1, "export": 4, "extract": 2, "extract\\": 1, "f=a": 1, "false": 3, "faqs": 2, "faqs\\": 1, "fast": 2, "faster": 4, "favicons": 4, "feature": 6, "features": 5, "fetch": 2, "fetch\\": 1, "fetcher": 4, "fetcher\\": 1, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "finck": 2, "find": 2, "finished": 2, "first": 4, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "for": 18, "form": 18, "form\u003e": 1, "form\\": 1, "form\\u003c/span\\u003e": 1, "form\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "form\\u003e\\u003c/code\\u003e": 1, "fortunate": 2, "found": 3, "frequently": 1, "from": 12, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 5, "functionality": 2, "fundamental": 6, "future": 4, "get": 8, "getelementbyid": 2, "getitem": 1, "gets": 2, "getting": 2, "githubchat": 1, "gives": 2, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "handle": 8, "handle\\": 1, "handling": 4, "handling\\": 2, "happens": 2, "has": 14, "hascontent\\": 1, "have": 6, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 3, "hidden": 1, "history": 4, "hits": 2, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "however": 1, "href=": 1, "href=\\\\\\": 7, "html": 9, "html\\": 1, "https": 3, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 4, "icon-link\\\\\\": 4, "id": 6, "id=\\\\\\": 4, "if": 6, "import": 7, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 32, "inc": 1, "index": 3, "initial": 3, "insertbefore": 1, "instead": 6, "integrating": 1, "interact": 2, "interactions": 1, "intercept": 6, "internet": 2, "into": 2, "introduction": 1, "is": 11, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "issearching": 2, "isspamode": 1, "it": 25, "iterate": 2, "iteration": 2, "iterations": 2, "iterative": 1, "its": 2, "javascript": 42, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "just": 4, "keep": 2, "key": 4, "know": 1, "layer": 2, "lazy": 3, "leads": 4, "learning": 1, "less": 2, "let": 3, "licensed": 1, "like": 4, "link": 3, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "loaded": 8, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 9, "loading\\": 1, "loads": 8, "local": 3, "localhost\\": 1, "location": 1, "longer": 2, "majority": 2, "makes": 1, "making": 2, "management": 10, "management\\": 2, "management\\u003c/a\\u003e\\u003c/p\\u003e\\": 1, "management©": 1, "manual": 3, "many": 2, "math": 1, "matter": 2, "md\\": 152, "mdx": 3, "mdx\\": 1, "means": 2, "menu\\": 1, "meta": 4, "meta\\": 2, "method=": 4, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 6, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "moment": 2, "more": 6, "most": 1, "much": 4, "name=": 4, "naming": 2, "naming\\": 1, "navigation": 6, "navigations": 2, "navlink": 2, "navlink\\": 1, "need": 7, "network": 3, "new": 2, "new\\": 1, "next": 2, "nextsibling": 2, "nick": 2, "no": 5, "nodetype": 1, "noindex\\": 1, "not": 8, "now": 1, "null": 1, "number": 1, "of": 31, "on": 12, "once": 5, "one": 1, "only": 6, "open": 1, "optimization": 2, "optimization\\": 1, "or": 9, "order\\": 1, "org/wiki/progressive_enhancement\\\\\\": 1, "other": 9, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "over": 2, "own": 4, "page": 10, "parallel": 4, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pathname": 1, "pending": 9, "pepper": 2, "performance": 4, "performance\\": 2, "performance\\\\\\": 1, "phrase": 2, "pipethrough": 1, "positions": 2, "post": 2, "postcss": 2, "postcss\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "principles": 2, "probably": 2, "product": 2, "progressive": 14, "progressive-enhancement\\\\\\": 1, "progressively": 6, "project": 1, "pull": 1, "puts": 2, "query": 5, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "reach": 2, "react": 8, "react-router-scroll-positions": 1, "readablestream": 1, "reality": 2, "receive": 2, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regular": 3, "related": 1, "released": 2, "rely": 2, "remix": 23, "remix\\": 2, "removechild": 2, "removeitem": 1, "render": 2, "rendered": 4, "rendering": 2, "renders": 2, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 3, "resilience": 3, "resilience-and-accessibility\\": 1, "resilience-and-accessibility\\\\\\": 1, "resilient": 2, "resource": 3, "resources": 1, "response": 2, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 4, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 12, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "routing": 2, "run/docs/discussion/progressive-enhancement": 1, "run\\": 1, "running": 1, "runtimes": 3, "same": 4, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "search": 2, "searchbox": 2, "see": 1, "send": 2, "sending": 1, "server": 21, "server\\": 3, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "ship": 2, "shopify": 1, "shopping": 1, "shopping\\u003c/li\\u003e\\\\n\\u003cli\\u003ethe": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "side": 16, "simple": 4, "simpler": 2, "simplest": 4, "simplicity": 4, "simplicity\\": 2, "simplicity\\\\\\": 1, "simplifying": 1, "simply": 2, "single": 5, "siteurl\\": 1, "slice": 1, "slow": 4, "slug\\": 1, "so": 4, "some": 2, "soon": 2, "source": 2, "spa": 7, "spas": 2, "spinning": 4, "ssr": 1, "stages": 1, "start": 16, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 16, "stay": 2, "steven": 2, "still": 2, "storagekey2": 3, "storedy": 3, "strategy": 4, "strategy\\": 1, "stream": 4, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 141, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "submission": 4, "submit": 2, "submits": 2, "submitting": 1, "subsequent": 2, "support": 5, "support\\": 1, "tab--but": 2, "tabindex=\\\\\\": 4, "tag": 2, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "than": 4, "thank": 1, "that": 18, "the": 100, "then": 4, "these": 2, "they": 2, "things": 2, "think": 2, "this": 14, "through": 1, "time": 4, "title\\": 1, "tls": 2, "tls\\": 1, "to": 54, "to=": 1, "to=\\\\\\": 1, "toc\\": 1, "today": 1, "top": 2, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "traditional": 2, "true": 6, "true\\\\\\": 24, "truth": 2, "try": 3, "ts": 2, "ts\\": 1, "tsx\\\\\\": 8, "tutorial": 3, "two": 2, "type=": 5, "typeof": 1, "typescript": 2, "typescript\\": 1, "typical": 3, "ui": 14, "ui\\": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "until": 4, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 6, "urls": 2, "use": 2, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 5, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 4, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 8, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "users": 12, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "ux": 2, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "value=": 2, "vanilla": 3, "var": 143, "variables": 2, "variables\\": 1, "varied": 2, "version": 4, "very": 2, "view": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "was": 2, "way": 7, "ways–once": 2, "we": 6, "web": 14, "what": 2, "when": 15, "where": 4, "whether": 1, "while": 4, "whilst": 2, "why": 1, "wikipedia": 2, "will": 14, "window": 11, "with": 28, "without": 6, "without–it": 2, "work": 6, "workflows": 2, "works": 6, "worry": 2, "writes": 2, "writes\\": 1, "you": 29, "your": 23, "|---------------|": 2, "|---------------|\\\\n": 2, "|---------|": 2, "|---------|\\\\ndata": 2, "|---|": 1, "|---|-----------|": 1, "|---|-----------|\\\\njavascript": 1, "|---|\\\\njavascript": 1, "||": 3, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2, "👆": 2, "👆\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch2": 1, "👆\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003ea": 1, "👇": 2 }, "length": 6689 }, { "id": "05a11acef784533482ab2c78", "doc_id": "d673cf6cca66aed7e1cd718c", "title": "prop", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/prop.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/prop.json", "content": "--- title: 'prop:*' order: 6 use_cases: \u003e- dom properties, scrolltop manipulation, custom properties, property vs attribute, direct property access tags: - properties - dom - attributes - manipulation - custom version: '1.0' description: \u003e- Force DOM property assignment with prop:* in SolidJS. Set properties directly instead of attributes for specific DOM manipulation needs. --- Forces the prop to be treated as a property instead of an attribute. ```tsx \u003cdiv prop:scrollTop={props.scrollPos + \"px\"} /\u003e ``` :::note[Strong-Typing Custom Properties] Type definitions are required when using TypeScript. See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples. :::", "term_freq": { "---": 2, "//github": 1, "/\u003e": 1, "/configuration/typescript#forcing-properties-and-custom-attributes": 1, "\u003cdiv": 1, "\u003e-": 2, "access": 1, "an": 1, "are": 1, "as": 1, "assignment": 1, "attribute": 2, "attributes": 2, "be": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/jsx-attributes/prop": 1, "custom": 3, "definitions": 1, "description": 1, "direct": 1, "directly": 1, "dom": 4, "examples": 1, "for": 2, "force": 1, "forces": 1, "github-document": 1, "https": 1, "in": 1, "instead": 2, "manipulation": 3, "mdx": 1, "needs": 1, "note": 1, "of": 2, "order": 1, "page": 1, "prop": 5, "properties": 5, "property": 4, "props": 1, "px": 1, "required": 1, "scrollpos": 1, "scrolltop": 1, "scrolltop=": 1, "see": 1, "set": 1, "solidjs": 1, "specific": 1, "strong-typing": 1, "tags": 1, "the": 2, "title": 1, "to": 1, "treated": 1, "tsx": 1, "type": 1, "typescript": 2, "use_cases": 1, "using": 1, "version": 1, "vs": 1, "when": 1, "with": 1 }, "length": 91 }, { "id": "a99d3b005fd95e45af973b9a", "doc_id": "b30113718c9097059d85ed83", "title": "props", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/components/props.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/props.json", "content": "--- title: Props use_cases: \u003e- passing data between components, parent-child communication, component configuration, default values, prop management tags: - props - components - data - communication - mergeprops - splitprops version: '1.0' description: \u003e- Pass and manage component props in Solid while maintaining reactivity. Learn mergeProps, splitProps, and best practices. --- Props are a way to pass state from a parent component to a child component. These read-only properties are passed to components as attributes within JSX and are accessible within the component via the `props` object: ```tsx function App() { // Passing a prop named \"name\" to the MyComponent component return ( \u003cdiv\u003e \u003cMyComponent name=\"Ryan Carniato\" /\u003e \u003c/div\u003e ); } ``` To access the props in the child component, you use the `props` object: ```tsx function MyComponent(props) { return \u003cdiv\u003eHello {props.name}\u003c/div\u003e; } ``` ## `mergeProps` [`mergeProps`](/reference/reactive-utilities/merge-props) is a Solid utility function designed to merge multiple potentially reactive objects together. It behaves similar to [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) but will retain the reactivity of the properties being merged. This helps ensure that when individual properties within the merged object change, their reactivity is not lost. ```typescript import { mergeProps } from \"solid-js\"; function MyComponent(props) { // Using mergeProps to set default values for props const finalProps = mergeProps({ defaultName: \"Ryan Carniato\" }, props); return \u003cdiv\u003eHello {finalProps.defaultName}\u003c/div\u003e; } // Usage: \u003cMyComponent defaultName=\"Ryan Carniato\" /\u003e ``` When merging props, if there is no existing value for a property, the value from the first object will be used. However, if a value already exists, it will be used instead, all while retaining the reactivity of the property. ## Destructuring props Props are read-only so that child components do not directly modify the data passed by the parent. This also encourages one-way data flow, a pattern often seen to promote more predictable data management. With Solid, destructuring props is not recommended as it can break reactivity. Instead, you should access props directly from the `props` object, or wrap them in a function to ensure they are always up-to-date: ```typescript function MyComponent(props) { const { name } = props; // ❌: breaks reactivity and will not update when the prop value changes const name = props.name; // ❌: another example of breaking reactivity const name = () =\u003e props.name; // ✓: by wrapping `props.name` into a function, `name()` always retrieves its current value } ``` ### `splitProps` [`splitProps`](/reference/reactive-utilities/split-props) is a utility function designed to help split a single props object into multiple sets of props, retaining the reactivity of the individual properties. It provides a way to destructure props without breaking reactivity. `splitProps` gives you the ability to define one or more arrays of keys that you wish to extract into separate props objects, all while retaining the reactivity of the individual properties. It will return an array of props objects related to each set of keys, plus an additional props object containing any remaining keys. When passing props to child components, you can use `splitProps` to split the props into multiple groups, and then pass each group to the appropriate child component: ```typescript import { splitProps } from \"solid-js\"; function ParentComponent(props) { // Splitting props into two groups: 'name' and 'age' const [greetingProps, personalInfoProps, restProps] = splitProps( props, [\"name\"], [\"age\"] ); // Using greetingProps and personalInfoProps in the current component return ( \u003cdiv\u003e \u003cGreeting {...greetingProps} /\u003e \u003cPersonalInfo {...personalInfoProps} /\u003e {/* restProps can be passed down or used as needed */} \u003c/div\u003e ); } ``` ## Passing props to children In most instances, simply using `props` within JSX will work without any issues. However, there are some cases where accessing `props.children` multiple times can introduce problems and unexpected behaviours, such as repeated creation of child components or elements. For instances like these, Solid provides a [`children`](/reference/component-apis/children) helper that ensures you always get the right child components without anything unwanted happening. ```typescript import { children } from \"solid-js\"; function ColoredList(props) { const safeChildren = children(() =\u003e props.children); return \u003c\u003e{safeChildren()}\u003c/\u003e; } ``` ## Prop drilling Prop drilling is a term used to describe the process of passing props through multiple layers of components. While it can be a useful pattern, it can also lead to problems. When components are nested deeply, passing props through each component can become difficult to manage. Additionally, this can lead to components receiving props that they do not need, unnecessary re-renders, and trouble refactoring. Since components in Solid do not own state, props are not needed to pass state between components, but may be used. Because of this, there may be times when you need to pass props through multiple layers of components. A common solution to this problem is to use [Context](/concepts/context) to pass state to deeply nested components without having to pass props through each component in between.", "term_freq": { "##": 4, "###": 1, "*/": 1, "---": 2, "/*": 1, "//": 8, "//developer": 1, "//github": 1, "/\u003e": 4, "/concepts/context": 1, "/reference/component-apis/children": 1, "/reference/reactive-utilities/merge-props": 1, "/reference/reactive-utilities/split-props": 1, "\u003c/\u003e": 1, "\u003c/div\u003e": 4, "\u003c\u003e": 1, "\u003cdiv\u003e": 2, "\u003cdiv\u003ehello": 2, "\u003cgreeting": 1, "\u003cmycomponent": 2, "\u003cpersonalinfo": 1, "=\u003e": 2, "\u003e-": 2, "ability": 1, "access": 2, "accessible": 1, "accessing": 1, "additional": 1, "additionally": 1, "age": 2, "all": 2, "already": 1, "also": 2, "always": 3, "an": 2, "and": 9, "another": 1, "any": 2, "anything": 1, "app": 1, "appropriate": 1, "are": 8, "array": 1, "arrays": 1, "as": 4, "assign": 1, "attributes": 1, "be": 6, "because": 1, "become": 1, "behaves": 1, "behaviours": 1, "being": 1, "best": 1, "between": 3, "break": 1, "breaking": 2, "breaks": 1, "but": 2, "by": 2, "can": 8, "carniato": 3, "cases": 1, "change": 1, "changes": 1, "child": 7, "children": 6, "coloredlist": 1, "com/solidjs/solid-docs/blob/head/src/routes/concepts/components/props": 1, "common": 1, "communication": 2, "component": 11, "components": 14, "configuration": 1, "const": 6, "containing": 1, "context": 1, "creation": 1, "current": 2, "data": 5, "deeply": 2, "default": 2, "defaultname": 2, "defaultname=": 1, "define": 1, "describe": 1, "description": 1, "designed": 2, "destructure": 1, "destructuring": 2, "difficult": 1, "directly": 2, "do": 3, "down": 1, "drilling": 2, "each": 4, "elements": 1, "encourages": 1, "ensure": 2, "ensures": 1, "example": 1, "existing": 1, "exists": 1, "extract": 1, "finalprops": 2, "first": 1, "flow": 1, "for": 3, "from": 6, "function": 10, "get": 1, "github-document": 1, "gives": 1, "greetingprops": 3, "group": 1, "groups": 2, "happening": 1, "having": 1, "help": 1, "helper": 1, "helps": 1, "however": 2, "https": 2, "if": 2, "import": 3, "in": 7, "individual": 3, "instances": 2, "instead": 2, "into": 5, "introduce": 1, "is": 7, "issues": 1, "it": 7, "its": 1, "jsx": 2, "keys": 3, "layers": 2, "lead": 2, "learn": 1, "like": 1, "lost": 1, "maintaining": 1, "manage": 2, "management": 2, "may": 2, "mdx": 1, "merge": 1, "merged": 2, "mergeprops": 7, "merging": 1, "modify": 1, "more": 2, "most": 1, "mozilla": 1, "multiple": 6, "mycomponent": 4, "name": 11, "name=": 1, "named": 1, "need": 2, "needed": 2, "nested": 2, "no": 1, "not": 7, "object": 8, "objects": 3, "of": 14, "often": 1, "one": 1, "one-way": 1, "or": 4, "org/en-us/docs/web/javascript/reference/global_objects/object/assign": 1, "own": 1, "parent": 2, "parent-child": 1, "parentcomponent": 1, "pass": 7, "passed": 3, "passing": 6, "pattern": 2, "personalinfoprops": 3, "plus": 1, "potentially": 1, "practices": 1, "predictable": 1, "problem": 1, "problems": 2, "process": 1, "promote": 1, "prop": 5, "properties": 5, "property": 2, "props": 46, "provides": 2, "re-renders": 1, "reactive": 1, "reactivity": 10, "read-only": 2, "receiving": 1, "recommended": 1, "refactoring": 1, "related": 1, "remaining": 1, "repeated": 1, "restprops": 2, "retain": 1, "retaining": 3, "retrieves": 1, "return": 6, "right": 1, "ryan": 3, "safechildren": 2, "seen": 1, "separate": 1, "set": 2, "sets": 1, "should": 1, "similar": 1, "simply": 1, "since": 1, "single": 1, "so": 1, "solid": 5, "solid-js": 3, "solution": 1, "some": 1, "split": 2, "splitprops": 8, "splitting": 1, "state": 4, "such": 1, "tags": 1, "term": 1, "that": 5, "the": 27, "their": 1, "them": 1, "then": 1, "there": 3, "these": 2, "they": 2, "this": 5, "through": 4, "times": 2, "title": 1, "to": 30, "together": 1, "trouble": 1, "tsx": 2, "two": 1, "typescript": 4, "unexpected": 1, "unnecessary": 1, "unwanted": 1, "up-to-date": 1, "update": 1, "usage": 1, "use": 3, "use_cases": 1, "used": 5, "useful": 1, "using": 3, "utility": 2, "value": 5, "values": 2, "version": 1, "via": 1, "way": 2, "when": 6, "where": 1, "while": 4, "will": 6, "wish": 1, "with": 1, "within": 4, "without": 4, "work": 1, "wrap": 1, "wrapping": 1, "you": 7, "✓": 1, "❌": 2 }, "length": 755 }, { "id": "7d2401d9027a67d8fdd561a7", "doc_id": "cde37efcd2de6b28df1d9aeb", "title": "push", "url": "file:///tmp/tmp.zEIFaVVxAD/push.md", "type": "local-markdown", "source": "local-push", "path": "devour_data/docs/push.json", "content": "# Push Test Using middleware in express.", "term_freq": { "///tmp/tmp": 1, "express": 1, "file": 1, "in": 1, "local-markdown": 1, "md": 1, "middleware": 1, "push": 2, "test": 1, "using": 1, "zeifavvxad/push": 1 }, "length": 12 }, { "id": "f252e95bab7356052eb85b11", "doc_id": "26d6a069e77bbf769284ff2e", "title": "Python 3.14.3 documentation - Python", "url": "https://docs.python.org/3/", "type": "python-module", "source": "3", "path": "devour_data/docs/python_3_14_3_documentation_-_python_0.json", "content": "# Module Python 3.14.3 documentation Welcome! This is the official documentation for Python 3.14.3. Welcome! This is the official documentation for Python 3.14.3.", "term_freq": { "//docs": 1, "14": 4, "documentation": 4, "for": 2, "https": 1, "is": 2, "module": 1, "official": 2, "org/3/": 1, "python": 6, "python-module": 1, "the": 2, "this": 2, "welcome": 2 }, "length": 31 }, { "id": "19283a9936645688678091c2", "doc_id": "dad131e68319e4ddabca57bf", "title": "queries", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/data-fetching/queries.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/queries.json", "content": "--- title: \"Queries\" --- Queries are the core building blocks for data fetching in Solid Router. They provide an elegant solution for managing data fetching. ## Defining queries They are defined using the [`query` function](/solid-router/reference/data-apis/query). It wraps the data-fetching logic and extends it with powerful capabilities like [request deduplication](#deduplication) and [automatic revalidation](#revalidation). The `query` function takes two parameters: a **fetcher** and a **name**. - The **fetcher** is an asynchronous function that fetches data from any source, such as a remote API. - The **name** is a unique string used to identify the query. When a query is called, Solid Router uses this name and the arguments passed to the query to create a unique key, which is used for the internal deduplication mechanism. ```tsx import { query } from \"@solidjs/router\"; const getUserProfileQuery = query(async (userId: string) =\u003e { const response = await fetch( `https://api.example.com/users/${encodeURIComponent(userId)}` ); const json = await response.json(); if (!response.ok) { throw new Error(json?.message ?? \"Failed to load user profile.\"); } return json; }, \"userProfile\"); ``` In this example, the defined query fetches a user's profile from an API. If the request fails, the fetcher will throw an error that will be caught by the nearest [`\u003cErrorBoundary\u003e`](/reference/components/error-boundary) in the component tree. ## Using queries in components Defining a query does not by itself fetch any data. To access its data, the query can be used with the [`createAsync` primitive](/solid-router/reference/data-apis/create-async). `createAsync` takes an asynchronous function, such as a query, and returns a signal that tracks its result. ```tsx import { For, Show } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getArticlesQuery = query(async () =\u003e { // ... Fetches a list of articles from an API. }, \"articles\"); function Articles() { const articles = createAsync(() =\u003e getArticlesQuery()); return ( \u003cShow when={articles()}\u003e \u003cFor each={articles()}\u003e{(article) =\u003e \u003cp\u003e{article.title}\u003c/p\u003e}\u003c/For\u003e \u003c/Show\u003e ); } ``` In this example, `createAsync` is used to call the query. Once the query completes, `articles` holds the result, which is then rendered. :::tip When working with complex data types, such as arrays or deeply nested objects, the [`createAsyncStore` primitive](/solid-router/reference/data-apis/create-async-store) offers a more ergonomic and performant solution. It works like `createAsync`, but returns a [store](/concepts/stores) for easier state management.. ::: ## Deduplication A key feature of queries is their ability to deduplicate requests, preventing redundant data fetching in quick succession. One common use case is preloading: when a user hovers over a link, the application can begin preloading the data for the destination page. If the user then clicks the link, the query has already been completed, and the data is available instantly without triggering another network request. This mechanism is fundamental to the performance of Solid Router applications. Deduplication also applies when multiple components on the same page use the same query. As long as at least one component is actively using the query, Solid Router will reuse the cached result instead of refetching the data.", "term_freq": { "##": 3, "#deduplication": 1, "#revalidation": 1, "**fetcher**": 2, "**name**": 2, "---": 2, "//": 1, "//api": 1, "//github": 1, "/concepts/stores": 1, "/reference/components/error-boundary": 1, "/solid-router/reference/data-apis/create-async": 1, "/solid-router/reference/data-apis/create-async-store": 1, "/solid-router/reference/data-apis/query": 1, "\u003c/for\u003e": 1, "\u003c/p\u003e": 1, "\u003c/show\u003e": 1, "\u003cerrorboundary\u003e": 1, "\u003cfor": 1, "\u003cp\u003e": 1, "\u003cshow": 1, "=\u003e": 4, "@solidjs/router": 2, "ability": 1, "access": 1, "actively": 1, "already": 1, "also": 1, "an": 6, "and": 7, "another": 1, "any": 2, "api": 3, "application": 1, "applications": 1, "applies": 1, "are": 2, "arguments": 1, "arrays": 1, "article": 2, "articles": 7, "as": 5, "async": 2, "asynchronous": 2, "at": 1, "automatic": 1, "available": 1, "await": 2, "be": 2, "been": 1, "begin": 1, "blocks": 1, "building": 1, "but": 1, "by": 2, "cached": 1, "call": 1, "called": 1, "can": 2, "capabilities": 1, "case": 1, "caught": 1, "clicks": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/data-fetching/queries": 1, "com/users/$": 1, "common": 1, "completed": 1, "completes": 1, "complex": 1, "component": 2, "components": 2, "const": 5, "core": 1, "create": 1, "createasync": 6, "createasyncstore": 1, "data": 10, "data-fetching": 1, "deduplicate": 1, "deduplication": 4, "deeply": 1, "defined": 2, "defining": 2, "destination": 1, "does": 1, "each=": 1, "easier": 1, "elegant": 1, "encodeuricomponent": 1, "ergonomic": 1, "error": 2, "example": 3, "extends": 1, "failed": 1, "fails": 1, "feature": 1, "fetch": 2, "fetcher": 1, "fetches": 3, "fetching": 3, "for": 6, "from": 6, "function": 5, "fundamental": 1, "getarticlesquery": 2, "getuserprofilequery": 1, "github-document": 1, "has": 1, "holds": 1, "hovers": 1, "https": 2, "identify": 1, "if": 3, "import": 3, "in": 6, "instantly": 1, "instead": 1, "internal": 1, "is": 11, "it": 3, "its": 2, "itself": 1, "json": 4, "key": 2, "least": 1, "like": 2, "link": 2, "list": 1, "load": 1, "logic": 1, "long": 1, "management": 1, "managing": 1, "mdx": 1, "mechanism": 2, "message": 1, "more": 1, "multiple": 1, "name": 1, "nearest": 1, "nested": 1, "network": 1, "new": 1, "not": 1, "objects": 1, "of": 4, "offers": 1, "ok": 1, "on": 1, "once": 1, "one": 2, "or": 1, "over": 1, "page": 2, "parameters": 1, "passed": 1, "performance": 1, "performant": 1, "powerful": 1, "preloading": 2, "preventing": 1, "primitive": 2, "profile": 2, "provide": 1, "queries": 6, "query": 18, "quick": 1, "redundant": 1, "refetching": 1, "remote": 1, "rendered": 1, "request": 3, "requests": 1, "response": 3, "result": 3, "return": 2, "returns": 2, "reuse": 1, "revalidation": 1, "router": 4, "same": 2, "show": 1, "signal": 1, "solid": 4, "solid-js": 1, "solution": 2, "source": 1, "state": 1, "store": 1, "string": 2, "succession": 1, "such": 3, "takes": 2, "that": 3, "the": 34, "their": 1, "then": 2, "they": 2, "this": 4, "throw": 2, "tip": 1, "title": 2, "to": 8, "tracks": 1, "tree": 1, "triggering": 1, "tsx": 2, "two": 1, "types": 1, "unique": 2, "use": 2, "used": 4, "user": 4, "userid": 2, "userprofile": 1, "uses": 1, "using": 3, "when": 4, "when=": 1, "which": 2, "will": 3, "with": 3, "without": 1, "working": 1, "works": 1, "wraps": 1 }, "length": 464 }, { "id": "7d0eaca90e3152c36958c724", "doc_id": "e7fc46ce09e05836de309ca5", "title": "query", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/query.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/query.json", "content": "--- title: query use_cases: \u003e- api calls, data fetching, caching, deduplication, preloading routes, preventing waterfalls, ssr tags: - query - cache - data-fetching - deduplication - preload - ssr - api version: '1.0' description: \u003e- Cache and deduplicate API calls with query. Prevent waterfalls, enable preloading, and manage server-side rendering efficiently. --- The `query` function wraps an asynchronous function (the fetcher) and returns a query. The primary purpose of a query is to prevent redundant data fetching. When a query is called, a key is generated from its name and arguments. This key is used to internally cache the result of the fetcher. If a query with the same key is called, the cached result is used in these scenarios: - **For preloading:** After a route's data is preloaded, a subsequent call to the same query within a 5-second window uses the preloaded data. - **For active subscriptions:** When a query is actively being used by a component (e.g., via [`createAsync`](/solid-router/reference/data-apis/create-async)), its data is reused without expiration. - **On native history navigation:** When navigating with the browser's back or forward buttons, the data is reused instead of being re-fetched. - **For server-side deduplication:** Within a single server-side rendering (SSR) request, repeated calls to the same query reuse the same value. - **During client hydration:** If SSR has provided data for a key, that data is used immediately on the client without a new network request. ## Import ```tsx import { query } from \"@solidjs/router\"; ``` ## Type ```tsx function query\u003cT extends (...args: any) =\u003e any\u003e( fn: T, name: string ): CachedFunction\u003cT\u003e; ``` ## Parameters ### `fetcher` - **Type:** `T extends (...args: any) =\u003e any` - **Required:** Yes An asynchronous function that handles the logic for fetching data. All arguments passed to this function must be JSON-serializable. ### `name` - **Type:** `string` - **Required:** Yes A string used as a namespace for the query. Solid Router combines this with the query's arguments to generate a unique key for deduplication. ## Return value `query` returns a new function with the same call signature as the fetcher. This returned function has the following properties attached to it: ### `key` The base key for the query, derived from its name. ### `keyFor` A function that takes the same arguments as the fetcher and returns a string representing a specific key for that set of arguments. ## Example ### Basic usage ```tsx import { query } from \"@solidjs/router\"; const getUserProfileQuery = query(async (userId: string) =\u003e { const response = await fetch( `https://api.example.com/users/${encodeURIComponent(userId)}` ); const json = await response.json(); if (!response.ok) { throw new Error(json?.message ?? \"Failed to load user profile.\"); } return json; }, \"userProfile\"); ```", "term_freq": { "##": 5, "###": 5, "**": 9, "**during": 1, "**for": 3, "**on": 1, "**required": 2, "**type": 2, "---": 2, "//api": 1, "//github": 1, "/solid-router/reference/data-apis/create-async": 1, "5-second": 1, "=\u003e": 3, "\u003e-": 2, "@solidjs/router": 2, "active": 1, "actively": 1, "after": 1, "all": 1, "an": 2, "and": 5, "any": 3, "any\u003e": 1, "api": 3, "args": 2, "arguments": 5, "as": 3, "async": 1, "asynchronous": 2, "attached": 1, "await": 2, "back": 1, "base": 1, "basic": 1, "be": 1, "being": 2, "browser": 1, "buttons": 1, "by": 1, "cache": 3, "cached": 1, "cachedfunction\u003ct\u003e": 1, "caching": 1, "call": 2, "called": 2, "calls": 3, "client": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/data-apis/query": 1, "com/users/$": 1, "combines": 1, "component": 1, "const": 3, "createasync": 1, "data": 9, "data-fetching": 1, "deduplicate": 1, "deduplication": 4, "derived": 1, "description": 1, "efficiently": 1, "enable": 1, "encodeuricomponent": 1, "error": 1, "example": 2, "expiration": 1, "extends": 2, "failed": 1, "fetch": 1, "fetcher": 5, "fetching": 3, "fn": 1, "following": 1, "for": 6, "forward": 1, "from": 4, "function": 8, "generate": 1, "generated": 1, "getuserprofilequery": 1, "github-document": 1, "handles": 1, "has": 2, "history": 1, "https": 2, "hydration": 1, "if": 3, "immediately": 1, "import": 3, "in": 1, "instead": 1, "internally": 1, "is": 11, "it": 1, "its": 3, "json": 4, "json-serializable": 1, "key": 8, "keyfor": 1, "load": 1, "logic": 1, "manage": 1, "mdx": 1, "message": 1, "must": 1, "name": 4, "namespace": 1, "native": 1, "navigating": 1, "navigation": 1, "network": 1, "new": 3, "of": 4, "ok": 1, "on": 1, "or": 1, "parameters": 1, "passed": 1, "preload": 1, "preloaded": 2, "preloading": 3, "prevent": 2, "preventing": 1, "primary": 1, "profile": 1, "properties": 1, "provided": 1, "purpose": 1, "query": 19, "query\u003ct": 1, "re-fetched": 1, "redundant": 1, "rendering": 2, "repeated": 1, "representing": 1, "request": 2, "response": 3, "result": 2, "return": 2, "returned": 1, "returns": 3, "reuse": 1, "reused": 2, "route": 1, "router": 1, "routes": 1, "same": 6, "scenarios": 1, "server-side": 3, "set": 1, "signature": 1, "single": 1, "solid": 1, "specific": 1, "ssr": 4, "string": 5, "subscriptions": 1, "subsequent": 1, "tags": 1, "takes": 1, "that": 4, "the": 24, "these": 1, "this": 4, "throw": 1, "title": 1, "to": 8, "tsx": 3, "type": 1, "unique": 1, "usage": 1, "use_cases": 1, "used": 5, "user": 1, "userid": 2, "userprofile": 1, "uses": 1, "value": 2, "version": 1, "via": 1, "waterfalls": 2, "when": 3, "window": 1, "with": 5, "within": 2, "without": 2, "wraps": 1, "yes": 2 }, "length": 410 }, { "id": "ae859888886f50d2846128c2", "doc_id": "b424de5b4375012d1928d92b", "title": "Quick Start (5m) | Remix", "url": "https://v2.remix.run/docs/start/quickstart", "type": "html", "source": "remix:does", "path": "devour_data/docs/quick-start--5m----remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsQuick Start (5m)Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageInstallationVite ConfigThe Root RouteBuild and RunBring Your Own ServerDevelopment WorkflowControlling Server and Browser EntriesSummaryOn this pageInstallationVite ConfigThe Root RouteBuild and RunBring Your Own ServerDevelopment WorkflowControlling Server and Browser EntriesSummaryQuick Start Just getting started with Remix? The latest version of Remix is now React Router v7. If you want to use the latest features, you should use the React Router docs to get started. This guide will get you familiar with the basic plumbing required to run a Remix app as quickly as possible. While there are many starter templates with different runtimes, deploy targets, and databases, we're going to create a bare-bones project from scratch. Installation If you prefer to initialize a batteries-included Remix project, you can use the create-remix CLI: npx create-remix@latest However, this guide will explain everything the CLI does to set up your project, and instead of using the CLI, you can follow these steps. If you're just getting started with Remix, we recommend following this guide to understand all the different pieces that make up a Remix app. mkdir my-remix-app cd my-remix-app npm init -y # install runtime dependencies npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react@18 react-dom@18 # install dev dependencies npm i -D @remix-run/dev vite Vite Config touch vite.config.js Since Remix uses Vite, you'll need to provide a Vite config with the Remix Vite plugin. Here's the basic configuration you'll need: import { vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [remix()], }); The Root Route mkdir app touch app/root.jsx app/root.jsx is what we call the \"Root Route\". It's the root layout of your entire app. Here's the basic set of elements you'll need for any project: import { Links, Meta, Outlet, Scripts, } from \"@remix-run/react\"; export default function App() { return ( \u003chtml\u003e \u003chead\u003e \u003clink rel=\"icon\" href=\"data:image/x-icon;base64,AA\" /\u003e \u003cMeta /\u003e \u003cLinks /\u003e \u003c/head\u003e \u003cbody\u003e \u003ch1\u003eHello world!\u003c/h1\u003e \u003cOutlet /\u003e \u003cScripts /\u003e \u003c/body\u003e \u003c/html\u003e ); } Build and Run First you will need to specify the type as module in package.json to satisfy esmodule requirements for remix-run and future versions of vite. { \"type\": \"module\" // ... } Next build the app for production: npx remix vite:build You should now see a build folder containing a server folder (the server version of your app) and a client folder (the browser version) with some build artifacts in them. (This is all configurable.) 👉 Run the app with remix-serve Now you can run your app with remix-serve: # note the dash! npx remix-serve build/server/index.js You should be able to open up http://localhost:3000 and see the \"hello world\" page. Aside from the unholy amount of code in node_modules, our Remix app is just three files: ├── app/ │ └── root.jsx ├── package.json └── vite.config.js Bring Your Own Server The build/server directory created by remix vite:build is just a module that you run inside a server like Express, Cloudflare Workers, Netlify, Vercel, Fastly, AWS, Deno, Azure, Fastify, Firebase, ... anywhere. If you don't care to set up your own server, you can use remix-serve. It's a simple express-based server maintained by the Remix team. However, Remix is specifically designed to run in any JavaScript environment so that you own your stack. It is expected many —if not most— production apps will have their own server. You can read more about this in Runtimes, Adapters, and Stacks. Just for kicks, let's stop using remix-serve and use express instead. 👉 Install Express, the Remix Express adapter, and cross-env for running in production mode npm i express@4 @remix-run/express cross-env # not going to use this anymore npm uninstall @remix-run/serve 👉 Create an Express server touch server.js import { createRequestHandler } from \"@remix-run/express\"; import express from \"express\"; // notice that the result of `remix vite:build` is \"just a module\" import * as build from \"./build/server/index.js\"; const app = express(); app.use(express.static(\"build/client\")); // and your app is \"just a request handler\" app.all(\"*\", createRequestHandler({ build })); app.listen(3000, () =\u003e { console.log(\"App listening on http://localhost:3000\"); }); 👉 Run your app with express node server.js Now that you own your server, you can debug your app with whatever tooling your server has. For example, you can inspect your app with chrome devtools with the Node.js inspect flag: node --inspect server.js Development Workflow Instead of stopping, rebuilding, and starting your server all the time, you can run Remix in development using Vite in middleware mode. This enables instant to changes in your app with React Refresh (Hot Module Replacement) and Remix Hot Data Revalidation. First, as a convenience, add dev and start commands in package.json that will run your server in development and production modes respectively: 👉 Add a \"scripts\" entry to package.json { \"scripts\": { \"dev\": \"node ./server.js\", \"start\": \"cross-env NODE_ENV=production node ./server.js\" } // ... } 👉 Add Vite development middleware to your server Vite middleware is not applied if process.env.NODE_ENV is set to \"production\", in which case you'll still be running the regular build output as you did earlier. import { createRequestHandler } from \"@remix-run/express\"; import express from \"express\"; const viteDevServer = process.env.NODE_ENV === \"production\" ? null : await import(\"vite\").then((vite) =\u003e vite.createServer({ server: { middlewareMode: true }, }) ); const app = express(); app.use( viteDevServer ? viteDevServer.middlewares : express.static(\"build/client\") ); const build = viteDevServer ? () =\u003e viteDevServer.ssrLoadModule( \"virtual:remix/server-build\" ) : await import(\"./build/server/index.js\"); app.all(\"*\", createRequestHandler({ build })); app.listen(3000, () =\u003e { console.log(\"App listening on http://localhost:3000\"); }); 👉 Start the dev server npm run dev Now you can work on your app with immediate . Give it a try, change the text in root.jsx and watch! Controlling Server and Browser Entries There are default magic files Remix is using that most apps don't need to mess with, but if you want to customize Remix's entry points to the server and browser you can run remix reveal and they'll get dumped into your project. npx remix reveal Entry file entry.client created at app/entry.client.tsx. Entry file entry.server created at app/entry.server.tsx. Summary Congrats, you can add Remix to your resume! Summing things up, we've learned: Remix compiles your app into two things: A request handler that you add to your own JavaScript server A pile of static assets in your public directory for the browser You can bring your own server with adapters to deploy anywhere You can set up a development workflow with HMR built-in In general, Remix is a bit \"guts out\". A few minutes of boilerplate but now you own your stack. What's next? Tutorial © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_987\\\":-5,\\\"_988\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":986},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"docs/start/quickstart.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"quick-start\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#quick-start\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eQuick Start\\u003c/h1\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003eJust getting started with Remix? The latest version of \\u003ca href=\\\\\\\"https://remix.run/blog/incremental-path-to-react-19\\\\\\\"\\u003eRemix is now React Router v7\\u003c/a\\u003e. If you want to use the latest features, you should use the \\u003ca href=\\\\\\\"https://reactrouter.com/start/framework/installation\\\\\\\"\\u003eReact Router docs to get started\\u003c/a\\u003e.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eThis guide will get you familiar with the basic plumbing required to run a Remix app as quickly as possible. While there are many starter \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/tree/v2/templates\\\\\\\"\\u003etemplates\\u003c/a\\u003e with different runtimes, deploy targets, and databases, we're going to create a bare-bones project from scratch.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"installation\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#installation\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eInstallation\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIf you prefer to initialize a batteries-included Remix project, you can use the \\u003ca href=\\\\\\\"../other-api/create-remix\\\\\\\"\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e CLI\\u003c/a\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpx\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecreate-remix@latest\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eHowever, this guide will explain everything the CLI does to set up your project, and instead of using the CLI, you can follow these steps. If you're just getting started with Remix, we recommend following this guide to understand all the different pieces that make up a Remix app.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003emkdir\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003emy-remix-app\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecd\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003emy-remix-app\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003einit\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e-y\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e# install runtime dependencies\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ei\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/serve\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eisbot@4\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ereact@18\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ereact-dom@18\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e# install dev dependencies\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ei\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e-D\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/dev\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"vite-config\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#vite-config\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eVite Config\\u003c/h2\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etouch\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite.config.js\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eSince Remix uses \\u003ca href=\\\\\\\"https://vitejs.dev\\\\\\\"\\u003eVite\\u003c/a\\u003e, you'll need to provide a \\u003ca href=\\\\\\\"https://vitejs.dev/config\\\\\\\"\\u003eVite config\\u003c/a\\u003e with the Remix Vite plugin. Here's the basic configuration you'll need:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evitePlugin\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eas\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e plugins: [\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e()],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"the-root-route\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#the-root-route\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eThe Root Route\\u003c/h2\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003emkdir\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eapp\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etouch\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eapp/root.jsx\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003eapp/root.jsx\\u003c/code\\u003e is what we call the \\\\\\\"Root Route\\\\\\\". It's the root layout of your entire app. Here's the basic set of elements you'll need for any project:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.jsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"jsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.jsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"jsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinks\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eMeta\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScripts\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elink\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erel\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eicon\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehref\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edata:image/x-icon;base64,AA\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eMeta\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinks\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003eHello world!\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScripts\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"build-and-run\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#build-and-run\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eBuild and Run\\u003c/h2\\u003e\\\\n\\u003cp\\u003eFirst you will need to specify the type as \\u003ccode\\u003emodule\\u003c/code\\u003e in \\u003ccode\\u003epackage.json\\u003c/code\\u003e to satisfy esmodule requirements for \\u003ccode\\u003eremix-run\\u003c/code\\u003e and future versions of \\u003ccode\\u003evite\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-jsonc\\\\\\\"\\u003e{\\\\n \\\\\\\"type\\\\\\\": \\\\\\\"module\\\\\\\"\\\\n // ...\\\\n}\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eNext build the app for production:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpx\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eremix\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite:build\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eYou should now see a \\u003ccode\\u003ebuild\\u003c/code\\u003e folder containing a \\u003ccode\\u003eserver\\u003c/code\\u003e folder (the server version of your app) and a \\u003ccode\\u003eclient\\u003c/code\\u003e folder (the browser version) with some build artifacts in them. (This is all \\u003ca href=\\\\\\\"../file-conventions/vite-config\\\\\\\"\\u003econfigurable\\u003c/a\\u003e.)\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eRun the app with \\u003ccode\\u003eremix-serve\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eNow you can run your app with \\u003ccode\\u003eremix-serve\\u003c/code\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e# note the dash!\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpx\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eremix-serve\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebuild/server/index.js\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eYou should be able to open up \\u003ca href=\\\\\\\"http://localhost:3000\\\\\\\"\\u003ehttp://localhost:3000\\u003c/a\\u003e and see the \\\\\\\"hello world\\\\\\\" page.\\u003c/p\\u003e\\\\n\\u003cp\\u003eAside from the unholy amount of code in \\u003ccode\\u003enode_modules\\u003c/code\\u003e, our Remix app is just three files:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003e├── app/\\\\n│ └── root.jsx\\\\n├── package.json\\\\n└── vite.config.js\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch2 id=\\\\\\\"bring-your-own-server\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#bring-your-own-server\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eBring Your Own Server\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe \\u003ccode\\u003ebuild/server\\u003c/code\\u003e directory created by \\u003ccode\\u003eremix vite:build\\u003c/code\\u003e is just a module that you run inside a server like Express, Cloudflare Workers, Netlify, Vercel, Fastly, AWS, Deno, Azure, Fastify, Firebase, ... anywhere.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you don't care to set up your own server, you can use \\u003ccode\\u003eremix-serve\\u003c/code\\u003e. It's a simple express-based server maintained by the Remix team. However, Remix is specifically designed to run in \\u003cem\\u003eany\\u003c/em\\u003e JavaScript environment so that you own your stack. It is expected many —if not most— production apps will have their own server. You can read more about this in \\u003ca href=\\\\\\\"../discussion/runtimes\\\\\\\"\\u003eRuntimes, Adapters, and Stacks\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eJust for kicks, let's stop using \\u003ccode\\u003eremix-serve\\u003c/code\\u003e and use express instead.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eInstall Express, the Remix Express adapter, and \\u003ca href=\\\\\\\"https://www.npmjs.com/package/cross-env\\\\\\\"\\u003ecross-env\\u003c/a\\u003e for running in production mode\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ei\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eexpress@4\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/express\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecross-env\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e# not going to use this anymore\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003euninstall\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/serve\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eCreate an Express server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etouch\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eserver.js\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"server.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"server.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecreateRequestHandler\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/express\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eexpress\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eexpress\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// notice that the result of `remix vite:build` is \\\\\\\"just a module\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e*\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eas\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebuild\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./build/server/index.js\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eapp\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eexpress\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eapp\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euse\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eexpress\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003estatic\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebuild/client\\u003c/span\\u003e\\\\\\\"));\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// and your app is \\\\\\\"just a request handler\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eapp\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eall\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e*\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateRequestHandler\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebuild\\u003c/span\\u003e }));\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eapp\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elisten\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e3000\\u003c/span\\u003e, () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econsole\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elog\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eApp listening on http://localhost:3000\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eRun your app with express\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enode\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eserver.js\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNow that you own your server, you can debug your app with whatever tooling your server has. For example, you can inspect your app with chrome devtools with the \\u003ca href=\\\\\\\"https://nodejs.org/en/docs/guides/debugging-getting-started/\\\\\\\"\\u003eNode.js inspect flag\\u003c/a\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enode\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e--inspect\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eserver.js\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"development-workflow\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#development-workflow\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eDevelopment Workflow\\u003c/h2\\u003e\\\\n\\u003cp\\u003eInstead of stopping, rebuilding, and starting your server all the time, you can run Remix in development using \\u003ca href=\\\\\\\"https://vitejs.dev/guide/ssr#setting-up-the-dev-server\\\\\\\"\\u003eVite in middleware mode\\u003c/a\\u003e. This enables instant to changes in your app with React Refresh (Hot Module Replacement) and Remix Hot Data Revalidation.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFirst, as a convenience, add \\u003ccode\\u003edev\\u003c/code\\u003e and \\u003ccode\\u003estart\\u003c/code\\u003e commands in \\u003ccode\\u003epackage.json\\u003c/code\\u003e that will run your server in development and production modes respectively:\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdd a \\\\\\\"scripts\\\\\\\" entry to \\u003ccode\\u003epackage.json\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-jsonc\\\\\\\"\\u003e{\\\\n \\\\\\\"scripts\\\\\\\": {\\\\n \\\\\\\"dev\\\\\\\": \\\\\\\"node ./server.js\\\\\\\",\\\\n \\\\\\\"start\\\\\\\": \\\\\\\"cross-env NODE_ENV=production node ./server.js\\\\\\\"\\\\n }\\\\n // ...\\\\n}\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdd Vite development middleware to your server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eVite middleware is not applied if \\u003ccode\\u003eprocess.env.NODE_ENV\\u003c/code\\u003e is set to \\u003ccode\\u003e\\\\\\\"production\\\\\\\"\\u003c/code\\u003e, in which case you'll still be running the regular build output as you did earlier.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"server.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"server.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecreateRequestHandler\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/express\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eexpress\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eexpress\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eviteDevServer\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprocess\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eenv\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eNODE_ENV\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eproduction\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\\\\").\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ethen\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evite\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evite\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateServer\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e server: { middlewareMode: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e })\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eapp\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eexpress\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eapp\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euse\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eviteDevServer\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eviteDevServer\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emiddlewares\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eexpress\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003estatic\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebuild/client\\u003c/span\\u003e\\\\\\\")\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebuild\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eviteDevServer\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eviteDevServer\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003essrLoadModule\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evirtual:remix/server-build\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e )\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./build/server/index.js\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eapp\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eall\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e*\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateRequestHandler\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebuild\\u003c/span\\u003e }));\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eapp\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elisten\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e3000\\u003c/span\\u003e, () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econsole\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elog\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eApp listening on http://localhost:3000\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eStart the dev server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003erun\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edev\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNow you can work on your app with immediate . Give it a try, change the text in \\u003ccode\\u003eroot.jsx\\u003c/code\\u003e and watch!\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"controlling-server-and-browser-entries\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#controlling-server-and-browser-entries\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eControlling Server and Browser Entries\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThere are default magic files Remix is using that most apps don't need to mess with, but if you want to customize Remix's entry points to the server and browser you can run \\u003ccode\\u003eremix reveal\\u003c/code\\u003e and they'll get dumped into your project.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpx\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eremix\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ereveal\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003eEntry file entry.client created at app/entry.client.tsx.\\\\nEntry file entry.server created at app/entry.server.tsx.\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch2 id=\\\\\\\"summary\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#summary\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSummary\\u003c/h2\\u003e\\\\n\\u003cp\\u003eCongrats, you can add Remix to your resume! Summing things up, we've learned:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRemix compiles your app into two things:\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eA request handler that you add to your own JavaScript server\\u003c/li\\u003e\\\\n\\u003cli\\u003eA pile of static assets in your public directory for the browser\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eYou can bring your own server with adapters to deploy anywhere\\u003c/li\\u003e\\\\n\\u003cli\\u003eYou can set up a development workflow with HMR built-in\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eIn general, Remix is a bit \\\\\\\"guts out\\\\\\\". A few minutes of boilerplate but now you own your stack.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWhat's next?\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"/docs/start/tutorial\\\\\\\"\\u003eTutorial\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\",\\\"docs/start/quickstart\\\",\\\"headings\\\",[960,965,968,971,974,977,980,983],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Installation\\\",\\\"installation\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"Vite Config\\\",\\\"vite-config\\\",{\\\"_961\\\":962,\\\"_955\\\":969,\\\"_24\\\":970},\\\"The Root Route\\\",\\\"the-root-route\\\",{\\\"_961\\\":962,\\\"_955\\\":972,\\\"_24\\\":973},\\\"Build and Run\\\",\\\"build-and-run\\\",{\\\"_961\\\":962,\\\"_955\\\":975,\\\"_24\\\":976},\\\"Bring Your Own Server\\\",\\\"bring-your-own-server\\\",{\\\"_961\\\":962,\\\"_955\\\":978,\\\"_24\\\":979},\\\"Development Workflow\\\",\\\"development-workflow\\\",{\\\"_961\\\":962,\\\"_955\\\":981,\\\"_24\\\":982},\\\"Controlling Server and Browser Entries\\\",\\\"controlling-server-and-browser-entries\\\",{\\\"_961\\\":962,\\\"_955\\\":984,\\\"_24\\\":985},\\\"Summary\\\",\\\"summary\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#bring-your-own-server\\\\\\": 1, "#build-and-run\\\\\\": 1, "#controlling-server-and-browser-entries\\\\\\": 1, "#development-workflow\\\\\\": 1, "#installation\\\\\\": 1, "#quick-start\\\\\\": 1, "#summary\\\\\\": 1, "#the-root-route\\\\\\": 1, "#vite-config\\\\\\": 1, "$\\": 1, "$rc": 3, "--base03": 6, "--base05": 16, "--base08": 46, "--base09": 5, "--base0a": 25, "--base0b": 57, "--base0d": 29, "--base0e": 40, "--inspect": 1, "-1\\\\\\": 9, "-5": 2, "-d": 1, "-y": 1, "/$": 1, "//": 6, "//github": 1, "//localhost": 7, "//nodejs": 1, "//reactrouter": 1, "//remix": 1, "//v2": 2, "//vitejs": 3, "//www": 1, "/\u003e": 5, "/\\u003cspan": 4, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 5, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/build/server/index": 4, "/discussion/runtimes\\\\\\": 1, "/docs/start/tutorial\\\\\\": 1, "/file-conventions/vite-config\\\\\\": 1, "/other-api/create-remix\\\\\\": 1, "/server": 4, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 3, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 3, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 3, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 3, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 3, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 3, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 2, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 2, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 2, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 2, "1\\\\\\": 4, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 2, "21": 4, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 2, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 2, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 2, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 2, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 2, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 2, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 2, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "28\\\\\\": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "29\\\\\\": 1, "2\\\\\\": 4, "30": 1, "300": 1, "3000": 5, "3000\\\\\\": 1, "3000\\u003c/a\\u003e": 1, "3000\\u003c/span\\u003e\\\\\\": 2, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30\\\\\\": 1, "30m": 3, "31": 2, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "31\\\\\\": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 4, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 4, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 4, "5m": 5, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 4, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 3, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 3, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 8, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "976": 1, "977": 1, "978": 1, "979": 1, "98": 1, "980": 1, "981": 1, "982": 1, "983": 1, "984": 1, "985": 1, "986": 1, "99": 1, "9\\\\\\": 3, "\u003c/body\u003e": 1, "\u003c/h1\u003e": 1, "\u003c/head\u003e": 1, "\u003c/html\u003e": 1, "\u003cbody\u003e": 1, "\u003ch1\u003ehello": 1, "\u003chead\u003e": 1, "\u003chtml\u003e": 1, "\u003clink": 1, "\u003clinks": 1, "\u003cmeta": 1, "\u003coutlet": 1, "\u003cscripts": 1, "===": 2, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 5, "@remix-run/": 1, "@remix-run/dev": 3, "@remix-run/express": 3, "@remix-run/node": 3, "@remix-run/node\\": 1, "@remix-run/react": 2, "@remix-run/serve": 4, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 296, "\\\\n": 9, "\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch2": 1, "\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003enext": 1, "\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003e👉": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉": 2, "\\\\n\\u003c/span\\u003e\\u003cspan": 41, "\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ea": 1, "\\\\nentry": 1, "\\n": 1, "\\u0026#x3c": 13, "\\u003c/code\\u003e": 1, "\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 9, "\\u003c/p\\u003e\\\\n\\u003ch2": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003easide": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efirst": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eif": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ejust": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewhat": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉": 3, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 1, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003e├──": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eremix": 1, "\\u003c/span\\u003e": 6, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003ca": 12, "\\u003ccode\\u003e\\\\\\": 1, "\\u003ccode\\u003ebuild/server\\u003c/code\\u003e": 1, "\\u003ccode\\u003ebuild\\u003c/code\\u003e": 1, "\\u003ccode\\u003eclient\\u003c/code\\u003e": 1, "\\u003ccode\\u003edev\\u003c/code\\u003e": 1, "\\u003ccode\\u003emodule\\u003c/code\\u003e": 1, "\\u003ccode\\u003enode_modules\\u003c/code\\u003e": 1, "\\u003ccode\\u003epackage": 3, "\\u003ccode\\u003eprocess": 1, "\\u003ccode\\u003eremix": 2, "\\u003ccode\\u003eremix-run\\u003c/code\\u003e": 1, "\\u003ccode\\u003eremix-serve\\u003c/code\\u003e": 3, "\\u003ccode\\u003eremix-serve\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003enow": 1, "\\u003ccode\\u003eroot": 1, "\\u003ccode\\u003eserver\\u003c/code\\u003e": 1, "\\u003ccode\\u003estart\\u003c/code\\u003e": 1, "\\u003ccode\\u003evite\\u003c/code\\u003e": 1, "\\u003cem\\u003eany\\u003c/em\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 158, "\\u003cstrong\\u003eadd": 2, "\\u003cstrong\\u003ecreate": 1, "\\u003cstrong\\u003einstall": 1, "\\u003cstrong\\u003erun": 2, "\\u003cstrong\\u003estart": 1, "\\u003e": 55, "\\u003e#": 4, "\\u003e*\\u003c/span\\u003e": 1, "\\u003e*\\u003c/span\\u003e\\\\\\": 2, "\\u003e--inspect\\u003c/span\\u003e": 1, "\\u003e-d\\u003c/span\\u003e": 1, "\\u003e-y\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e//": 2, "\\u003e3000\\u003c/span\\u003e": 2, "\\u003e===\\u003c/span\\u003e": 1, "\\u003e=\\u003c/span\\u003e": 3, "\\u003e=\\u003c/span\\u003e\\\\\\": 2, "\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e=\\u003e\\u003c/span\\u003e": 2, "\\u003e=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003e@remix-run/dev\\u003c/span\\u003e": 1, "\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\": 1, "\\u003e@remix-run/express\\u003c/span\\u003e": 1, "\\u003e@remix-run/express\\u003c/span\\u003e\\\\\\": 2, "\\u003e@remix-run/node\\u003c/span\\u003e": 1, "\\u003e@remix-run/react\\u003c/span\\u003e": 1, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 1, "\\u003e@remix-run/serve\\u003c/span\\u003e": 1, "\\u003e@remix-run/serve\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 15, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebring": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebuild": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003econtrolling": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003edevelopment": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003einstallation\\u003c/h2\\u003e\\\\n\\u003cp\\u003eif": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003equick": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003esummary\\u003c/h2\\u003e\\\\n\\u003cp\\u003econgrats": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003evite": 1, "\\u003e\\u003ca": 9, "\\u003e\\u003ccode\\u003e\\u003cspan": 16, "\\u003e\\u003ccode\\u003ecreate-remix\\u003c/code\\u003e": 1, "\\u003e\\u003cpre": 16, "\\u003e\\u003cspan": 53, "\\u003eall\\u003c/span\\u003e": 2, "\\u003eapp": 2, "\\u003eapp/root": 1, "\\u003eapp\\u003c/span\\u003e": 9, "\\u003eapp\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eas\\u003c/span\\u003e": 2, "\\u003eawait\\u003c/span\\u003e": 2, "\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ebuild/client\\u003c/span\\u003e\\\\\\": 2, "\\u003ebuild/server/index": 1, "\\u003ebuild\\u003c/span\\u003e": 4, "\\u003ecd\\u003c/span\\u003e": 1, "\\u003econfigurable\\u003c/a\\u003e": 1, "\\u003econsole\\u003c/span\\u003e": 2, "\\u003econst\\u003c/span\\u003e": 4, "\\u003ecreate-remix@latest\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ehowever": 1, "\\u003ecreaterequesthandler\\u003c/span\\u003e": 4, "\\u003ecreateserver\\u003c/span\\u003e": 1, "\\u003ecross-env\\u003c/a\\u003e": 1, "\\u003ecross-env\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003edata": 1, "\\u003edefault\\u003c/span\\u003e": 2, "\\u003edefineconfig\\u003c/span\\u003e": 2, "\\u003edev\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enow": 1, "\\u003eenv\\u003c/span\\u003e": 1, "\\u003eexport\\u003c/span\\u003e": 2, "\\u003eexpress@4\\u003c/span\\u003e": 1, "\\u003eexpress\\u003c/span\\u003e": 6, "\\u003eexpress\\u003c/span\\u003e\\\\\\": 2, "\\u003efrom\\u003c/span\\u003e": 8, "\\u003efunction\\u003c/span\\u003e": 1, "\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eh1\\u003c/span\\u003e\\u003ehello": 1, "\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ehref\\u003c/span\\u003e\\u003cspan": 1, "\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ehttp": 1, "\\u003ei\\u003c/span\\u003e": 3, "\\u003eicon\\u003c/span\\u003e\\\\\\": 1, "\\u003eimport\\u003c/span\\u003e": 10, "\\u003einit\\u003c/span\\u003e": 1, "\\u003eisbot@4\\u003c/span\\u003e": 1, "\\u003elink\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003elinks\\u003c/span\\u003e": 2, "\\u003elisten\\u003c/span\\u003e": 2, "\\u003elog\\u003c/span\\u003e": 2, "\\u003emeta\\u003c/span\\u003e": 2, "\\u003emiddlewares\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003emkdir\\u003c/span\\u003e": 2, "\\u003emy-remix-app\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003enode": 1, "\\u003enode\\u003c/span\\u003e": 2, "\\u003enode_env\\u003c/span\\u003e": 1, "\\u003enpm\\u003c/span\\u003e": 6, "\\u003enpx\\u003c/span\\u003e": 4, "\\u003enull\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eoutlet\\u003c/span\\u003e": 2, "\\u003eprocess\\u003c/span\\u003e": 1, "\\u003eproduction\\u003c/span\\u003e\\\\\\": 1, "\\u003ereact": 1, "\\u003ereact-dom@18\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003ereact@18\\u003c/span\\u003e": 1, "\\u003erel\\u003c/span\\u003e\\u003cspan": 1, "\\u003eremix": 1, "\\u003eremix-serve\\u003c/span\\u003e": 1, "\\u003eremix\\u003c/span\\u003e": 4, "\\u003ereturn\\u003c/span\\u003e": 1, "\\u003ereveal\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003eentry": 1, "\\u003erun\\u003c/span\\u003e": 1, "\\u003eruntimes": 1, "\\u003escripts\\u003c/span\\u003e": 2, "\\u003eserver": 3, "\\u003essrloadmodule\\u003c/span\\u003e": 1, "\\u003estatic\\u003c/span\\u003e": 2, "\\u003etemplates\\u003c/a\\u003e": 1, "\\u003ethen\\u003c/span\\u003e": 1, "\\u003etouch\\u003c/span\\u003e": 3, "\\u003etrue\\u003c/span\\u003e": 1, "\\u003etutorial\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\": 1, "\\u003euninstall\\u003c/span\\u003e": 1, "\\u003euse\\u003c/span\\u003e": 2, "\\u003evirtual": 1, "\\u003evite": 4, "\\u003evite\\u003c/a\\u003e": 1, "\\u003evite\\u003c/span\\u003e": 2, "\\u003evite\\u003c/span\\u003e\\\\\\": 2, "\\u003evite\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "\\u003evitedevserver\\u003c/span\\u003e": 3, "\\u003evitedevserver\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eviteplugin\\u003c/span\\u003e": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 28, "_22\\": 152, "_24\\": 160, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 9, "_958\\": 1, "_961\\": 8, "_987\\": 1, "_988\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "aa": 1, "aa\\u003c/span\\u003e\\\\\\": 1, "able": 2, "about": 3, "accessibility\\": 1, "action\\": 1, "actiondata\\": 1, "adapter": 5, "adapters": 7, "add": 8, "all": 9, "amount": 2, "an": 3, "and": 51, "any": 3, "anymore": 1, "anymore\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "anywhere": 3, "anywhere\\u003c/li\\u003e\\\\n\\u003cli\\u003eyou": 1, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 44, "app/": 1, "app/\\\\n│": 1, "app/entry": 4, "app/root": 4, "applied": 2, "approach": 1, "apps": 4, "are": 4, "aria-hidden=\\\\\\": 9, "artifacts": 2, "as": 15, "aside": 1, "asked": 1, "asset": 3, "assets": 2, "at": 5, "attrs\\": 1, "await": 2, "await\\": 1, "aws": 2, "azure": 2, "b=document": 1, "backend": 3, "bare-bones": 2, "base64": 2, "basename": 1, "basic": 6, "batteries-included": 2, "be": 5, "been": 2, "before": 1, "bit": 2, "boilerplate": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "bring": 4, "bring-your-own-server\\": 1, "bring-your-own-server\\\\\\": 1, "browser": 13, "browser\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003eyou": 1, "build": 17, "build-and-run\\": 1, "build-and-run\\\\\\": 1, "build/client": 2, "build/server": 1, "build/server/index": 1, "build\\u003c/code\\u003e": 1, "build\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eyou": 1, "built": 1, "built-in": 1, "built-in\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003ein": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 4, "by": 4, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "call": 2, "can": 27, "care": 2, "case": 2, "catch": 1, "cd": 1, "change": 2, "changelog": 2, "changelog\\": 1, "changes": 2, "children\\": 1, "chrome": 2, "class=\\\\\\": 115, "cli": 10, "cli\\": 1, "cli\\u003c/a\\u003e": 1, "client": 17, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cloudflare": 2, "code": 6, "codeblock-line\\\\\\": 104, "color": 224, "com/package/cross-env\\\\\\": 1, "com/remix-run/remix/tree/v2/templates\\\\\\": 1, "com/start/framework/installation\\\\\\": 1, "commands": 2, "community": 3, "community\\": 1, "compiles": 2, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 11, "config\\": 1, "config\\u003c/a\\u003e": 1, "config\\u003c/h2\\u003e\\\\n\\u003cdiv": 1, "configthe": 2, "configurable": 1, "configuration": 4, "configuration\\": 1, "congrats": 1, "console": 3, "const": 4, "constraints": 2, "constraints\\": 1, "containing": 2, "contributing": 3, "contributing\\": 1, "controller": 2, "controlling": 2, "controlling-server-and-browser-entries\\": 1, "controlling-server-and-browser-entries\\\\\\": 1, "convenience": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create": 3, "create-remix": 4, "create-remix@latest": 1, "created": 6, "createremixstub": 2, "createremixstub\\": 1, "createrequesthandler": 4, "createserver": 1, "cross-env": 4, "css": 15, "css\\": 1, "customize": 2, "d=c": 2, "dash": 2, "data": 19, "data-code-block=\\\\\\": 16, "data-filename=\\\\\\": 8, "data-highlight=\\\\\\": 19, "data-lang=\\\\\\": 32, "data-line-number=\\\\\\": 79, "data-line-numbers=\\\\\\": 32, "data-nonumber=\\\\\\": 24, "data=": 1, "data\\": 2, "databases": 2, "debug": 2, "default": 4, "defer": 2, "defer\\": 1, "deferred": 1, "defineconfig": 2, "deno": 2, "dependencies": 2, "dependencies\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "dependency": 3, "deploy": 4, "deployment": 4, "deployment\\": 2, "description\\": 1, "designed": 2, "dev": 10, "dev/config\\\\\\": 1, "dev/guide/ssr#setting-up-the-dev-server\\\\\\": 1, "dev\\\\\\": 2, "development": 13, "development-workflow\\": 1, "development-workflow\\\\\\": 1, "devtools": 2, "did": 2, "different": 4, "directory": 4, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 1, "doc\\": 1, "docs": 2, "docs/start/quickstart": 1, "docs/start/quickstart\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsquick": 1, "document": 1, "does": 2, "don": 4, "done": 1, "dumped": 2, "e--": 1, "e=0": 1, "earlier": 2, "elements": 2, "else": 2, "enables": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entire": 2, "entries": 1, "entries\\": 1, "entries\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethere": 1, "entriessummaryon": 1, "entriessummaryquick": 1, "entry": 16, "env": 3, "environment": 5, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "esmodule": 2, "everything": 3, "example": 2, "examples": 1, "execution": 2, "execution\\": 1, "expected": 2, "explain": 2, "explanation": 2, "explanation\\": 1, "export": 2, "express": 19, "express-based": 2, "express@4": 1, "express\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "extract": 2, "extract\\": 1, "f=a": 1, "false": 3, "false\\\\\\": 24, "familiar": 2, "faqs": 2, "faqs\\": 1, "fastify": 2, "fastly": 2, "features": 3, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "few": 2, "file": 13, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 6, "files\\": 1, "firebase": 2, "first": 2, "firstchild": 2, "flag": 1, "flag\\u003c/a\\u003e": 1, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "folder": 6, "follow": 2, "following": 2, "for": 20, "form": 11, "form\\": 1, "found": 3, "frequently": 1, "from": 18, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 2, "future": 6, "general": 2, "get": 10, "getelementbyid": 2, "getitem": 1, "getting": 7, "githubchat": 1, "give": 2, "going": 4, "gotchas": 2, "gotchas\\": 1, "guide": 9, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "guts": 2, "h2\\": 1, "handle": 2, "handle\\": 1, "handler": 3, "handler\\\\\\": 1, "handling": 4, "handling\\": 2, "has": 4, "hascontent\\": 1, "have": 2, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "hello": 2, "help": 1, "here": 5, "history": 4, "hmr": 2, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 7, "how": 1, "however": 3, "href=": 1, "href=\\\\\\": 22, "html": 1, "html\\": 1, "http": 6, "https": 10, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 10, "icon-link\\\\\\": 9, "id=\\\\\\": 9, "if": 16, "image/x-icon": 2, "immediate": 2, "import": 15, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 35, "inc": 1, "index": 3, "init": 1, "initial": 1, "initialize": 2, "insertbefore": 1, "inside": 2, "inspect": 4, "install": 5, "installation": 1, "installation\\": 2, "installation\\\\\\": 1, "instant": 2, "instead": 5, "integrating": 1, "interactions": 1, "into": 6, "introduction": 1, "is": 27, "isbot@4": 1, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 8, "iterative": 1, "javascript": 6, "javascript\\": 1, "javascript\\\\\\": 6, "js": 19, "js\\": 1, "js\\\\\\": 8, "js\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch2": 1, "js\\u003c/span\\u003e\\\\\\": 2, "js\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv": 1, "js\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "js\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enow": 1, "js\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003esince": 1, "js\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eyou": 1, "json": 7, "json\\": 1, "json\\\\n└──": 1, "json\\u003c/code\\u003e": 2, "json\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 1, "jsx": 4, "jsx\\\\\\": 4, "jsx\\\\n├──": 1, "jsx\\u003c/code\\u003e": 2, "jsx\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003eapp/root": 1, "just": 12, "key": 4, "kicks": 2, "know": 1, "language-jsonc\\\\\\": 2, "latest": 4, "layout": 2, "lazy": 3, "learned": 2, "learning": 1, "let": 5, "licensed": 1, "like": 2, "link": 2, "link\\": 1, "links": 5, "links\\": 2, "listen": 2, "listening": 4, "livereload": 2, "livereload\\": 1, "ll": 10, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "log": 2, "magic": 2, "maintained": 2, "make": 2, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "many": 4, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "mess": 2, "meta": 5, "meta\\": 2, "middleware": 6, "middlewaremode": 2, "middlewares": 1, "migrating": 4, "minutes": 2, "mitedit": 1, "mkdir": 2, "mode": 5, "mode\\": 1, "mode\\u003c/a\\u003e": 1, "mode\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "modes": 2, "module": 13, "module\\": 1, "module\\\\\\": 2, "moduleaction": 2, "modules": 6, "modules\\": 3, "more": 2, "most": 3, "most—": 2, "my-remix-app": 2, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 11, "netlify": 2, "network": 3, "new": 2, "new\\": 1, "next": 3, "nextsibling": 2, "node": 7, "node_env": 2, "node_env=production": 2, "node_env\\u003c/code\\u003e": 1, "node_modules": 1, "nodetype": 1, "noindex\\": 1, "not": 9, "note": 2, "notice": 2, "now": 9, "npm": 6, "npmjs": 1, "npx": 4, "null": 2, "number": 1, "of": 25, "on": 9, "once": 1, "one": 1, "open": 3, "optimization": 2, "optimization\\": 1, "or": 1, "order\\": 1, "org/en/docs/guides/debugging-getting-started/\\\\\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "our": 2, "out": 2, "out\\\\\\": 1, "outlet": 3, "outlet\\": 1, "output": 2, "own": 19, "package": 5, "page": 2, "pageinstallationvite": 2, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "pieces": 2, "pile": 2, "pipethrough": 1, "plugin": 2, "plugins": 2, "plumbing": 2, "points": 2, "positions": 2, "possible": 2, "postcss": 2, "postcss\\": 1, "prefer": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "process": 2, "production": 10, "production\\\\\\": 1, "progressive": 3, "project": 11, "provide": 2, "public": 2, "pull": 1, "query": 3, "questions": 1, "quick": 2, "quick-start\\\\\\": 1, "quickest": 1, "quickly": 3, "random": 1, "re": 4, "react": 13, "react-dom@18": 1, "react-router-scroll-positions": 1, "react@18": 1, "read": 2, "readablestream": 1, "rebuilding": 2, "recommend": 2, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "refresh": 2, "regular": 5, "rel=": 1, "related": 1, "released": 2, "remix": 54, "remix-run": 1, "remix-serve": 5, "remix/server-build": 1, "remix/server-build\\u003c/span\\u003e\\\\\\": 1, "remix\\": 2, "removechild": 2, "removeitem": 1, "replace": 2, "replace\\": 1, "replacement": 4, "replacement\\": 1, "replacestate": 1, "request": 5, "required": 2, "requirements": 2, "resource": 3, "resources": 1, "respectively": 2, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "result": 2, "resume": 2, "return": 1, "revalidation": 2, "reveal": 2, "reveal\\u003c/code\\u003e": 1, "rocking": 1, "rolling": 1, "root": 15, "root\\": 1, "route": 14, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 2, "route\\\\\\": 1, "route\\u003c/h2\\u003e\\\\n\\u003cdiv": 1, "routebuild": 2, "routediscovery": 1, "router": 11, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run": 18, "run/blog/incremental-path-to-react-19\\\\\\": 1, "run/docs/start/quickstart": 1, "run\\": 2, "run\\u003c/h2\\u003e\\\\n\\u003cp\\u003efirst": 1, "runbring": 2, "running": 5, "runtime": 2, "runtimes": 6, "satisfy": 2, "scratch": 2, "scripts": 5, "scripts\\": 1, "scripts\\\\\\": 2, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "see": 4, "server": 61, "server\\": 4, "server\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "server\\u003c/li\\u003e\\\\n\\u003cli\\u003ea": 1, "server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 2, "server\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003evite": 1, "serverdevelopment": 2, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 10, "shellscript\\\\\\": 24, "shopify": 1, "should": 6, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "simple": 2, "simplifying": 1, "since": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "so": 2, "some": 2, "spa": 3, "specifically": 2, "specify": 2, "ssr": 1, "ssrloadmodule": 1, "stack": 4, "stacks": 1, "stacks\\u003c/a\\u003e": 1, "stages": 1, "start": 10, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "start\\\\\\": 1, "start\\u003c/h1\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003ejust": 1, "started": 5, "started\\": 1, "started\\u003c/a\\u003e": 1, "startedquick": 2, "starter": 2, "starting": 2, "state": 6, "static": 4, "steps": 2, "still": 2, "stop": 2, "stopping": 2, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 224, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "summary": 1, "summary\\": 2, "summary\\\\\\": 1, "summing": 2, "support": 3, "support\\": 1, "tabindex=\\\\\\": 9, "tailwind": 2, "tailwind\\": 1, "targets": 2, "team": 2, "technical": 3, "technologies\\": 1, "templates": 6, "templates\\": 1, "text": 2, "textencoderstream": 1, "thank": 1, "that": 16, "the": 71, "the-root-route\\": 1, "the-root-route\\\\\\": 1, "their": 2, "them": 2, "then": 1, "there": 3, "these": 2, "they": 2, "things": 4, "this": 17, "three": 2, "through": 1, "time": 2, "title\\": 1, "tls": 2, "tls\\": 1, "to": 58, "toc\\": 1, "tooling": 2, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "touch": 3, "true": 7, "true\\\\\\": 36, "try": 3, "ts": 2, "ts\\": 1, "tsx": 4, "tutorial": 4, "two": 2, "type": 3, "type\\\\\\": 1, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 2, "ui\\": 1, "under": 1, "understand": 2, "unholy": 2, "uninstall": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 12, "upgrading": 3, "uploads": 2, "uploads\\": 1, "use": 14, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "uses": 2, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 8, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 3, "v7\\u003c/a\\u003e": 1, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 226, "variables": 2, "variables\\": 1, "ve": 2, "vercel": 2, "version": 6, "versions": 2, "view": 2, "virtual": 1, "vite": 31, "vite-config\\": 1, "vite-config\\\\\\": 1, "vite\\": 1, "vitedevserver": 5, "viteplugin": 1, "vs": 6, "walk": 1, "want": 4, "watch": 2, "way": 1, "we": 8, "what": 3, "whatever": 2, "when": 1, "which": 2, "while": 3, "why": 1, "will": 12, "window": 11, "with": 38, "work": 2, "workers": 2, "workflow": 3, "workflow\\": 1, "workflow\\u003c/h2\\u003e\\\\n\\u003cp\\u003einstead": 1, "workflowcontrolling": 2, "world": 3, "world\\\\\\": 1, "writes": 2, "writes\\": 1, "you": 67, "your": 56, "||": 3, "©": 1, "—if": 2, "•docs": 1, "│": 1, "└──": 3, "├──": 2, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2, "👉": 7 }, "length": 8236 }, { "id": "9b58a84012a37fbdbc7e7c05", "doc_id": "66c64c6631a5fc0281ed759c", "title": "quick-start", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/quick-start.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/quick-start.json", "content": "--- title: Quick start use_cases: \u003e- starting new project, project setup, first app, development environment, templates tags: - quickstart - setup - templates - getting-started - playground version: '1.0' description: \u003e- Start building with Solid quickly. Try the playground, create projects with templates, and get your first Solid app running in minutes. --- ## Try Solid online To experiment with Solid directly in your browser, head over to our [interactive playground](https://playground.solidjs.com/). Prefer a full development setup? You can set up a complete environment using StackBlitz. Start with the [TypeScript](https://stackblitz.com/github/solidjs/templates/tree/master/ts) or [JavaScript](https://stackblitz.com/github/solidjs/templates/tree/master/js) templates. ## Create a Solid project :::note[Prerequisites] - Familiarity with the command line. - A recent version of [Node.js](https://nodejs.org/en), [Bun](https://bun.sh/), or [Deno](https://deno.com/). The latest LTS version is recommended. ::: To create a new Solid application, navigate to the directory where you want to create your project and run the following command: ```package-create solid ``` This command installs and runs [create-solid](https://github.com/solidjs-community/solid-cli/tree/main/packages/create-solid), the official project scaffolding tool for Solid. The CLI will guide you through a series of prompts, allowing you to choose options such as [starter templates](https://github.com/solidjs/templates), TypeScript support, and whether to include [Solid's full-stack framework, SolidStart](/solid-start): ```shell ◆ Project Name | \u003csolid-project\u003e ◆ Is this a SolidStart project? | ● Yes / ○ No ◆ Which template would you like to use? │ ● ts │ ○ ts-vitest │ ○ ts-uvu │ ○ ts-unocss │ ○ ts-tailwindcss ◆ Use TypeScript? │ ● Yes / ○ No ``` Once the project is created, follow the instructions to install the dependencies and start the development server: ```sh title=\"npm\" tab=\"package-manager\" │ cd solid-project │ npm install │ npm run dev ``` ```sh title=\"pnpm\" tab=\"package-manager\" │ cd solid-project │ pnpm install │ pnpm dev ``` ```sh title=\"yarn\" tab=\"package-manager\" │ cd solid-project │ yarn install │ yarn dev ``` ```sh title=\"bun\" tab=\"package-manager\" │ cd solid-project │ bun install │ bun run dev ``` ```sh title=\"deno\" tab=\"package-manager\" │ cd solid-project │ deno install │ deno run dev ``` You should now have your Solid project running!", "term_freq": { "##": 2, "---": 2, "//bun": 1, "//deno": 1, "//github": 3, "//nodejs": 1, "//playground": 1, "//stackblitz": 2, "/solid-start": 1, "\u003csolid-project\u003e": 1, "\u003e-": 2, "allowing": 1, "and": 5, "app": 2, "application": 1, "as": 1, "browser": 1, "building": 1, "bun": 4, "can": 1, "cd": 5, "choose": 1, "cli": 1, "com/": 2, "com/github/solidjs/templates/tree/master/js": 1, "com/github/solidjs/templates/tree/master/ts": 1, "com/solidjs-community/solid-cli/tree/main/packages/create-solid": 1, "com/solidjs/solid-docs/blob/head/src/routes/quick-start": 1, "com/solidjs/templates": 1, "command": 3, "complete": 1, "create": 4, "create-solid": 1, "created": 1, "deno": 4, "dependencies": 1, "description": 1, "dev": 5, "development": 3, "directly": 1, "directory": 1, "environment": 2, "experiment": 1, "familiarity": 1, "first": 2, "follow": 1, "following": 1, "for": 1, "framework": 1, "full": 1, "full-stack": 1, "get": 1, "getting-started": 1, "github-document": 1, "guide": 1, "have": 1, "head": 1, "https": 9, "in": 2, "include": 1, "install": 6, "installs": 1, "instructions": 1, "interactive": 1, "is": 3, "javascript": 1, "js": 1, "latest": 1, "like": 1, "line": 1, "lts": 1, "mdx": 1, "minutes": 1, "name": 1, "navigate": 1, "new": 2, "no": 2, "node": 1, "note": 1, "now": 1, "npm": 3, "of": 2, "official": 1, "once": 1, "online": 1, "options": 1, "or": 2, "org/en": 1, "our": 1, "over": 1, "package-create": 1, "package-manager": 5, "playground": 3, "pnpm": 3, "prefer": 1, "prerequisites": 1, "project": 9, "projects": 1, "prompts": 1, "quick": 1, "quick-start": 1, "quickly": 1, "quickstart": 1, "recent": 1, "recommended": 1, "run": 4, "running": 2, "runs": 1, "scaffolding": 1, "series": 1, "server": 1, "set": 1, "setup": 3, "sh": 5, "sh/": 1, "shell": 1, "should": 1, "solid": 10, "solid-project": 5, "solidjs": 1, "solidstart": 2, "stackblitz": 1, "start": 4, "starter": 1, "starting": 1, "such": 1, "support": 1, "tab=": 5, "tags": 1, "template": 1, "templates": 5, "the": 12, "this": 2, "through": 1, "title": 1, "title=": 5, "to": 9, "tool": 1, "try": 2, "ts": 1, "ts-tailwindcss": 1, "ts-unocss": 1, "ts-uvu": 1, "ts-vitest": 1, "typescript": 3, "up": 1, "use": 2, "use_cases": 1, "using": 1, "version": 3, "want": 1, "where": 1, "whether": 1, "which": 1, "will": 1, "with": 5, "would": 1, "yarn": 3, "yes": 2, "you": 6, "your": 4, "│": 21, "◆": 4, "○": 6, "●": 3 }, "length": 348 }, { "id": "6bd907affde369127b8a5a7c", "doc_id": "d18128797925ef9d925cc4b8", "title": "railway", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deployment-options/railway.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/railway.json", "content": "--- title: Railway order: 5 mainNavExclude: true use_cases: \u003e- web app deployment, cloud hosting, github deployment, production hosting, quick deployment tags: - railway - deployment - hosting - cloud - github - cli version: '1.0' description: \u003e- Deploy Solid projects to Railway platform with GitHub integration, custom domains, and straightforward deployment process. --- [Railway](https://railway.app/) is a well-known platform for deploying a variety of web and cloud-based projects. For an in-depth look at the features offered by Railway, as well as detailed deployment guidelines, you can consult the [Railway documentation](https://docs.railway.app/). ## Adjust the Start command To begin, you need to update the start command in your `package.json` file to make it compatible with Railway. Change the start command to `npx http-server ./dist` instead of using `vite`. This adjustment means you will need to build the app to generate the `dist` folder. For local development, continue using the original `dev` command. Reserve the modified start command specifically for Railway deployments. Below is an example of how your `package.json` may be configured: ```jsonl \"scripts\": { \"start\": \"npx http-server ./dist\", \"dev\": \"vite\", \"build\": \"vite build\", \"serve\": \"vite preview\", \"predeploy\": \"npm run build\", \"deploy\": \"gh-pages -d build\" }, ``` ## Using the Railway web interface 1. Visit Railway's homepage and click \"Start a New Project.\" You will be redirected to connect with GitHub. Log in or create an account using your GitHub credentials and authorize Railway to access your account. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=Ow2cGMhUtdPVAMoioe4fPA\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=Ow2cGMhUtdPVAMoioe4fPA\u0026type=embed\" /\u003e 2. After authorization, choose the repository that has your Solid project. During this step, you can also add any required environment variables. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=XA18EOcjo3gQeBRlzIubIw\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=XA18EOcjo3gQeBRlzIubIw\u0026type=embed\" /\u003e 3. Once your project is configured, click \"Deploy Now.\" After a successful deployment, a confirmation screen will appear. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=nFgehyw9gH9l7ezv5W4EvQ\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=nFgehyw9gH9l7ezv5W4EvQ\u0026type=embed\" /\u003e 4. Railway does not automatically assign a domain to your project. To do this, go to the settings and manually generate a domain for your deployed project. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=2y6TnvBnztCwN8ecamrffQ\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=2y6TnvBnztCwN8ecamrffQ\u0026type=embed\" /\u003e Once a domain has been generated, your Solid project should be live. ## Using the Railway CLI 1. Using your preferred package manager and install the Railway CLI: ```package-install-global @railway/cli ``` 2. Open your terminal and run the following command to log in: ```bash frame=\"none\" railway login ``` 3. You have the option to link your local Solid project to an existing Railway project using railway link. Alternatively, you can create a new project with `railway init` and follow the on-screen prompts. 4. To deploy your project to Railway, use the following command: ```bash frame=\"none\" railway up # or railway up --detach # if you prefer to avoid logs ``` Your project will now be live on Railway.", "term_freq": { "##": 3, "---": 2, "--detach": 1, "-d": 1, "//app": 8, "//docs": 1, "//github": 1, "//railway": 1, "/\u003e": 4, "/dist": 2, "\u003ceraserlink": 4, "\u003e-": 2, "@railway/cli": 1, "access": 1, "account": 2, "add": 1, "adjust": 1, "adjustment": 1, "after": 2, "also": 1, "alternatively": 1, "an": 4, "and": 8, "any": 1, "app": 2, "app/": 2, "appear": 1, "as": 2, "assign": 1, "at": 1, "authorization": 1, "authorize": 1, "automatically": 1, "avoid": 1, "bash": 2, "be": 4, "been": 1, "begin": 1, "below": 1, "build": 5, "by": 1, "can": 3, "change": 1, "choose": 1, "cli": 3, "click": 2, "cloud": 2, "cloud-based": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/deployment-options/railway": 1, "command": 7, "compatible": 1, "configured": 2, "confirmation": 1, "connect": 1, "consult": 1, "continue": 1, "create": 2, "credentials": 1, "custom": 1, "deploy": 4, "deployed": 1, "deploying": 1, "deployment": 7, "deployments": 1, "description": 1, "detailed": 1, "dev": 2, "development": 1, "dist": 1, "do": 1, "documentation": 1, "does": 1, "domain": 3, "domains": 1, "during": 1, "elements=2y6tnvbnztcwn8ecamrffq": 1, "elements=2y6tnvbnztcwn8ecamrffq\u0026type=embed": 1, "elements=nfgehyw9gh9l7ezv5w4evq": 1, "elements=nfgehyw9gh9l7ezv5w4evq\u0026type=embed": 1, "elements=ow2cgmhutdpvamoioe4fpa": 1, "elements=ow2cgmhutdpvamoioe4fpa\u0026type=embed": 1, "elements=xa18eocjo3gqebrlziubiw": 1, "elements=xa18eocjo3gqebrlziubiw\u0026type=embed": 1, "environment": 1, "eraser": 8, "example": 1, "existing": 1, "features": 1, "file": 1, "folder": 1, "follow": 1, "following": 2, "for": 5, "frame=": 2, "generate": 2, "generated": 1, "gh-pages": 1, "github": 5, "github-document": 1, "go": 1, "guidelines": 1, "has": 2, "have": 1, "homepage": 1, "hosting": 3, "how": 1, "href=": 4, "http-server": 2, "https": 11, "if": 1, "in": 3, "in-depth": 1, "init": 1, "install": 1, "instead": 1, "integration": 1, "interface": 1, "io/workspace/w9y9pnvjwsqdcepnteoe": 4, "io/workspace/w9y9pnvjwsqdcepnteoe/preview": 4, "is": 3, "it": 1, "json": 2, "jsonl": 1, "link": 2, "live": 2, "local": 2, "log": 2, "login": 1, "logs": 1, "look": 1, "mainnavexclude": 1, "make": 1, "manager": 1, "manually": 1, "may": 1, "mdx": 1, "means": 1, "modified": 1, "need": 2, "new": 2, "none": 2, "not": 1, "now": 2, "npm": 1, "npx": 2, "of": 3, "offered": 1, "on": 1, "on-screen": 1, "once": 2, "open": 1, "option": 1, "or": 2, "order": 1, "original": 1, "package": 3, "package-install-global": 1, "platform": 2, "predeploy": 1, "prefer": 1, "preferred": 1, "preview": 1, "preview=": 4, "process": 1, "production": 1, "project": 11, "projects": 2, "prompts": 1, "quick": 1, "railway": 24, "redirected": 1, "repository": 1, "required": 1, "reserve": 1, "run": 2, "screen": 1, "scripts": 1, "serve": 1, "settings": 1, "should": 1, "solid": 4, "specifically": 1, "start": 6, "step": 1, "straightforward": 1, "successful": 1, "tags": 1, "terminal": 1, "that": 1, "the": 18, "this": 3, "title": 1, "to": 18, "true": 1, "up": 2, "update": 1, "use": 1, "use_cases": 1, "using": 7, "variables": 1, "variety": 1, "version": 1, "visit": 1, "vite": 4, "web": 3, "well": 1, "well-known": 1, "will": 4, "with": 4, "you": 8, "your": 14 }, "length": 460 }, { "id": "2ed01dc223a8ea1a9e661507", "doc_id": "2bb43be9da4cadfad47696b2", "title": "React Router | Remix", "url": "https://v2.remix.run/docs/discussion/react-router", "type": "html", "source": "remix:does", "path": "devour_data/docs/react-router---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsReact RouterGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite React Router While Remix works as a multipage app, when JavaScript is loaded, it uses client side routing for a full Single Page App user experience, with all the speed and network efficiency that comes along with it. Remix is built on top of React Router and maintained by the same team. This means that you can use all the features of React Router in your Remix app. This also means that the 90% of Remix is really just React Router: a very old, very stable library that is perhaps the largest dependency in the React ecosystem. Remix simply adds a server behind it. Importing Components and Hooks Remix re-exports all the components and hooks from React Router DOM, so you don't need to install React Router yourself. 🚫 Don't do this: import { useLocation } from \"react-router-dom\"; ✅ Do this: import { useLocation } from \"@remix-run/react\"; Extended Behavior Some components and hooks have been extended to work with Remix's server-rendering and data fetching features. For example, Link can prefetch data and resources in Remix, where the React Router version cannot. 🚫 Don't do this: import { Link } from \"react-router-dom\"; // this won't do anything \u003cLink prefetch=\"intent\" /\u003e; ✅ Do this: import { Link } from \"@remix-run/react\"; // this will prefetch data and assets \u003cLink prefetch=\"intent\" /\u003e; © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_969\\\":-5,\\\"_970\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":968},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"docs/discussion/react-router.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"react-router\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#react-router\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eReact Router\\u003c/h1\\u003e\\\\n\\u003cp\\u003eWhile Remix works as a multipage app, when JavaScript is loaded, it uses client side routing for a full Single Page App user experience, with all the speed and network efficiency that comes along with it.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix is built on top of \\u003ca href=\\\\\\\"https://reactrouter.com\\\\\\\"\\u003eReact Router\\u003c/a\\u003e and maintained by the same team. This means that you can use all the features of React Router in your Remix app.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThis also means that the 90% of Remix is really just React Router: a very old, very stable library that is perhaps the largest dependency in the React ecosystem. Remix simply adds a server behind it.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"importing-components-and-hooks\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#importing-components-and-hooks\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eImporting Components and Hooks\\u003c/h2\\u003e\\\\n\\u003cp\\u003eRemix re-exports all the components and hooks from React Router DOM, so you don't need to install React Router yourself.\\u003c/p\\u003e\\\\n\\u003cp\\u003e🚫 Don't do this:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLocation\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ereact-router-dom\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e✅ Do this:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLocation\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"extended-behavior\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#extended-behavior\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eExtended Behavior\\u003c/h2\\u003e\\\\n\\u003cp\\u003eSome components and hooks have been extended to work with Remix's server-rendering and data fetching features. For example, \\u003ccode\\u003eLink\\u003c/code\\u003e can prefetch data and resources in Remix, where the React Router version cannot.\\u003c/p\\u003e\\\\n\\u003cp\\u003e🚫 Don't do this:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLink\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ereact-router-dom\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// this won't do anything\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLink\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eprefetch\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eintent\\u003c/span\\u003e\\\\\\\" /\\u003e;\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e✅ Do this:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLink\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// this will prefetch data and assets\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLink\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eprefetch\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eintent\\u003c/span\\u003e\\\\\\\" /\\u003e;\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\",\\\"docs/discussion/react-router\\\",\\\"headings\\\",[960,965],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Importing Components and Hooks\\\",\\\"importing-components-and-hooks\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"Extended Behavior\\\",\\\"extended-behavior\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#extended-behavior\\\\\\": 1, "#importing-components-and-hooks\\\\\\": 1, "#react-router\\\\\\": 1, "$\\": 1, "$rc": 3, "--base03": 2, "--base05": 4, "--base08": 4, "--base0a": 2, "--base0b": 6, "--base0d": 2, "--base0e": 10, "-1\\\\\\": 3, "-5": 2, "/$": 1, "//": 2, "//reactrouter": 1, "//v2": 2, "/\u003e": 2, "/\\u003e": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "110": 2, "111": 4, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "1\\\\\\": 4, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 2, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 2, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 2, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "90": 1, "90%": 2, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 2, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "97": 1, "98": 1, "99": 1, "\u003clink": 2, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/react": 2, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 47, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e✅": 2, "\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\n": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 4, "\\u003c/p\\u003e\\\\n\\u003ch2": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e🚫": 2, "\\u003ca": 1, "\\u003ccode\\u003elink\\u003c/code\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 18, "\\u003e//": 2, "\\u003e=\\u003c/span\\u003e\\\\\\": 2, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 2, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003e\\u0026#x3c": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eextended": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eimporting": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ereact": 1, "\\u003e\\u003ca": 3, "\\u003e\\u003ccode\\u003e\\u003cspan": 4, "\\u003e\\u003cpre": 4, "\\u003e\\u003cspan": 9, "\\u003efrom\\u003c/span\\u003e": 4, "\\u003eimport\\u003c/span\\u003e": 4, "\\u003eintent\\u003c/span\\u003e\\\\\\": 2, "\\u003elink\\u003c/span\\u003e": 4, "\\u003eprefetch\\u003c/span\\u003e\\u003cspan": 2, "\\u003ereact": 1, "\\u003ereact-router-dom\\u003c/span\\u003e\\\\\\": 2, "\\u003euselocation\\u003c/span\\u003e": 2, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 28, "_22\\": 152, "_24\\": 154, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 3, "_958\\": 1, "_961\\": 2, "_969\\": 1, "_970\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "adds": 2, "all": 7, "along": 2, "also": 2, "an": 1, "and": 26, "anything": 1, "anything\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 8, "approach": 1, "aria-hidden=\\\\\\": 3, "as": 5, "asked": 1, "asset": 3, "assets": 1, "assets\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "at": 1, "attrs\\": 1, "await\\": 1, "b=document": 1, "backend": 3, "basename": 1, "be": 1, "been": 4, "before": 1, "behavior": 1, "behavior\\": 1, "behavior\\u003c/h2\\u003e\\\\n\\u003cp\\u003esome": 1, "behind": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 3, "built": 3, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "by": 2, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "can": 5, "cannot": 2, "catch": 1, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 13, "cli": 5, "cli\\": 1, "client": 14, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "code": 4, "codeblock-line\\\\\\": 10, "color": 30, "com\\\\\\": 1, "comes": 2, "community": 3, "community\\": 1, "component": 2, "component\\": 1, "components": 8, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 1, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 15, "css\\": 1, "d=c": 2, "data": 22, "data-bad=\\\\\\": 4, "data-code-block=\\\\\\": 4, "data-good=\\\\\\": 4, "data-lang=\\\\\\": 8, "data-line-number=\\\\\\": 10, "data-line-numbers=\\\\\\": 8, "data=": 1, "data\\": 2, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 5, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "development": 3, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 11, "doc\\": 1, "docs/discussion/react-router": 1, "docs/discussion/react-router\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsreact": 1, "document": 1, "dom": 2, "don": 6, "done": 1, "e--": 1, "e=0": 1, "ecosystem": 2, "efficiency": 2, "else": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "everything": 1, "example": 2, "examples": 1, "execution": 2, "execution\\": 1, "experience": 2, "explanation": 2, "explanation\\": 1, "extended": 4, "extended-behavior\\": 1, "extended-behavior\\\\\\": 1, "extract": 2, "extract\\": 1, "f=a": 1, "false": 3, "faqs": 2, "faqs\\": 1, "features": 5, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "fetching": 2, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "for": 10, "form": 11, "form\\": 1, "found": 3, "frequently": 1, "from": 12, "frontend": 2, "frontend\\": 1, "full": 2, "fullstack": 3, "function": 1, "future": 4, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "handle": 2, "handle\\": 1, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "have": 2, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 1, "history": 4, "hooks": 5, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 3, "hooks\\u003c/h2\\u003e\\\\n\\u003cp\\u003eremix": 1, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href=\\\\\\": 4, "html": 1, "html\\": 1, "https": 3, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 3, "icon-link\\\\\\": 3, "id=\\\\\\": 3, "if": 6, "import": 9, "import\\\\\\": 1, "importing": 2, "importing-components-and-hooks\\": 1, "importing-components-and-hooks\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 12, "inc": 1, "index": 3, "initial": 1, "insertbefore": 1, "install": 2, "integrating": 1, "intent": 2, "interactions": 1, "into": 2, "introduction": 1, "is": 9, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 6, "iterative": 1, "javascript": 4, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "just": 2, "key": 4, "know": 1, "largest": 2, "lazy": 3, "learning": 1, "let": 3, "library": 2, "licensed": 1, "link": 5, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "loaded": 2, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "maintained": 2, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "means": 4, "menu\\": 1, "meta": 4, "meta\\": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 6, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "most": 1, "multipage": 2, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 3, "network": 5, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 3, "null": 1, "number": 1, "of": 9, "old": 2, "on": 4, "once": 1, "one": 1, "open": 1, "optimization": 2, "optimization\\": 1, "or": 1, "order\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "page": 2, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "perhaps": 2, "pipethrough": 1, "positions": 2, "postcss": 2, "postcss\\": 1, "prefetch": 4, "prefetch=": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "re-exports": 2, "react": 23, "react-router-dom": 2, "react-router-scroll-positions": 1, "react-router\\\\\\": 1, "readablestream": 1, "really": 2, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regular": 3, "related": 1, "released": 2, "remix": 24, "remix\\": 2, "removechild": 2, "removeitem": 1, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 3, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 12, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 20, "router\\": 2, "router\\u003c/a\\u003e": 1, "router\\u003c/h1\\u003e\\\\n\\u003cp\\u003ewhile": 1, "routergetting": 1, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "routing": 2, "run/docs/discussion/react-router": 1, "run\\": 1, "running": 1, "runtimes": 3, "same": 2, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "server": 17, "server-rendering": 2, "server\\": 3, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "side": 2, "simplifying": 1, "simply": 2, "single": 5, "siteurl\\": 1, "slice": 1, "slug\\": 1, "so": 2, "some": 1, "spa": 3, "speed": 2, "ssr": 1, "stable": 2, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 30, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 3, "support\\": 1, "tabindex=\\\\\\": 3, "tailwind": 2, "tailwind\\": 1, "team": 2, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 8, "the": 22, "this": 17, "through": 1, "title\\": 1, "tls": 2, "tls\\": 1, "to": 14, "toc\\": 1, "top": 2, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 6, "true\\\\\\": 11, "try": 1, "ts": 2, "ts\\": 1, "tsx\\\\\\": 8, "tutorial": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 2, "ui\\": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "use": 2, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 4, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 2, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "uses": 2, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 32, "variables": 2, "variables\\": 1, "version": 2, "very": 4, "view": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "way": 1, "when": 3, "where": 2, "while": 2, "why": 1, "will": 4, "window": 11, "with": 10, "won": 2, "work": 2, "works": 2, "writes": 2, "writes\\": 1, "you": 9, "your": 5, "yourself": 2, "||": 3, "©": 1, "•docs": 1, "✅": 2, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2, "🚫": 2 }, "length": 4462 }, { "id": "36078fcefe3a28011b8d7e55", "doc_id": "adca6a3c36698e26bf84b1ed", "title": "React API Reference", "type": "markdown", "source": "local", "path": "devour_data/docs/react_api_reference_0.md", "content": "# React API Reference # React API Reference Hooks: 0, Components: 1, APIs: 0 URL: https://react.dev/reference/react/hooks", "term_freq": { "//react": 1, "api": 3, "apis": 1, "components": 1, "dev/reference/react/hooks": 1, "hooks": 1, "https": 1, "markdown": 1, "react": 3, "reference": 3, "url": 1 }, "length": 17 }, { "id": "0db90ebc5edd1d48c9db8836", "doc_id": "54da764c3594b9a08d0697cf", "title": "React Server Components", "type": "markdown", "source": "local", "path": "devour_data/docs/react_server_components_1.md", "content": "# React Server Components # \u003cReact Server Components /\u003e URL: https://react.dev/reference/react/hooks#React Server Components", "term_freq": { "//react": 1, "/\u003e": 1, "\u003creact": 1, "components": 4, "dev/reference/react/hooks#react": 1, "https": 1, "markdown": 1, "react": 2, "server": 4, "url": 1 }, "length": 17 }, { "id": "1a05d313bac87b24bbcba47d", "doc_id": "dd96ed7ba002e5bd98621429", "title": "README", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/README.md", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/readme.json", "content": "\u003cp\u003e \u003cimg src=\"https://assets.solidjs.com/banner?project=Solid%20Documentation\u0026type=core\" alt=\"Solid Documentation\" /\u003e \u003c/p\u003e Welcome to Solid's documentation! This is the repo for [docs.solidjs.com](https://docs.solidjs.com/). This repo contains all the source code that we use to build our docs. [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/solidjs/solid-docs-next) [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/github/solidjs/solid-docs-next/) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/solidjs/solid-docs-next) ## What is Solid? Solid is a JavaScript framework used for building high-performance user-interfaces. Using a reactive approach and component-based architecture, we want to empower developers in creating efficient and scalable web applications. ## Thank you for being here! You can help make our docs better for the community! Your feedback is welcomed. In addition, any editing, translating, designing, and developing skills are welcomed. We are grateful to welcome you into our community! If you want to see how you can contribute, check out our [How You Can Help](#how-you-can-help) section. ## Chat with us You can learn more about Solid, get support, and meet other devs and contributors in our [Discord community](https://discord.com/invite/solidjs). ## Raise an issue Have you noticed something is missing, confusing, or is wrong in our documentation? Check to see if it has [already been mentioned ](https://github.com/solidjs/solid-docs-next/issues) and, if not, [create an issue](https://github.com/solidjs/solid-docs-next/issues/new/choose) to bring it to our attention! ## Share an idea Do you think something could be better? Have an idea you feel could make the docs better? Discussion threads are where you can offer feedback on things that might not be problems that need addressing, but are ideas to be explored. Join us in the [Discussions section](https://github.com/solidjs/solid-docs-next/discussions/280) where we can brainstorm these ideas, ask questions, and share goals! ## Suggest a fix or contribute Have you found a typo, broken link, or another item with an obvious quick fix? If you can see what the problem is, and you know how to fix it, you can make a PR (pull request) with the change and contribute to the docs repo yourself. If you're looking to make a larger contribution, please see our [CONTRIBUTING.md](https://github.com/solidjs/solid-docs-next/blob/main/CONTRIBUTING.md) first! ## Running the Site Locally At the moment, we recommend running the site locally through either [CodeSandbox](https://codesandbox.io/p/github/solidjs/solid-docs-next/), [Gitpod](https://gitpod.io/#https://github.com/solidjs/solid-docs-next), or [StackBlitz](https://stackblitz.com/github/solidjs/solid-docs-next). These are the quickest and easiest way to browse and edit the project files and run the site locally. The app uses [pnpm](https://pnpm.io) as the package manager and it runs on Node.js `v18+`. Install dependencies: ```sh pnpm i ``` And run the local dev server: ```sh pnpm dev ``` This will start your the app at [localhost:3000](http://localhost:3000) or the next available port. ### Collections and virtual modules The builds an [Astro](https://docs.astro.build/en/guides/content-collections/) inspired collection navigation, it will bring all routes and generate a couple of files at `/.solid`. These files are exposed to your app via [Vite virtual modules](https://vitejs.dev/guide/api-plugin#virtual-modules-convention). This task is perform via our `sync` script (`pnpm sync`), ran before every build. If changes are made to the navigation (new entry, or repositioning entry), it is necessary to restart the server for changes to take effect.", "term_freq": { "##": 7, "###": 1, "#how-you-can-help": 1, "//assets": 2, "//codesandbox": 2, "//developer": 1, "//discord": 1, "//docs": 2, "//github": 7, "//gitpod": 3, "//localhost": 1, "//pnpm": 1, "//stackblitz": 2, "//vitejs": 1, "/\u003e": 1, "3000": 2, "\u003c/p\u003e": 1, "\u003cimg": 1, "\u003cp\u003e": 1, "about": 1, "addition": 1, "addressing": 1, "all": 2, "alt=": 1, "an": 6, "and": 16, "another": 1, "any": 1, "app": 3, "applications": 1, "approach": 1, "architecture": 1, "are": 7, "as": 1, "ask": 1, "astro": 2, "at": 3, "attention": 1, "available": 1, "be": 3, "been": 1, "before": 1, "being": 1, "better": 3, "brainstorm": 1, "bring": 2, "broken": 1, "browse": 1, "build": 2, "build/en/guides/content-collections/": 1, "building": 1, "builds": 1, "but": 1, "can": 8, "change": 1, "changes": 2, "chat": 1, "check": 2, "code": 1, "codesandbox": 2, "collection": 1, "collections": 1, "com": 1, "com/": 1, "com/banner": 1, "com/github/solidjs/solid-docs-next": 2, "com/img/open_in_stackblitz": 1, "com/invite/solidjs": 1, "com/solidjs/solid-docs-next": 2, "com/solidjs/solid-docs-next/blob/main/contributing": 1, "com/solidjs/solid-docs-next/discussions/280": 1, "com/solidjs/solid-docs-next/issues": 1, "com/solidjs/solid-docs-next/issues/new/choose": 1, "com/solidjs/solid-docs/blob/head/readme": 1, "community": 3, "component-based": 1, "confusing": 1, "contains": 1, "contribute": 3, "contribution": 1, "contributors": 1, "could": 2, "couple": 1, "creating": 1, "dependencies": 1, "designing": 1, "dev": 2, "dev/guide/api-plugin#virtual-modules-convention": 1, "developers": 1, "developing": 1, "devs": 1, "discussion": 1, "do": 1, "docs": 4, "documentation": 3, "easiest": 1, "edit": 1, "editing": 1, "effect": 1, "efficient": 1, "either": 1, "empower": 1, "entry": 2, "every": 1, "explored": 1, "exposed": 1, "feedback": 2, "feel": 1, "files": 3, "first": 1, "fix": 3, "for": 5, "found": 1, "framework": 1, "generate": 1, "get": 1, "github-document": 1, "gitpod": 1, "goals": 1, "grateful": 1, "has": 1, "have": 3, "help": 2, "here": 1, "high-performance": 1, "how": 2, "http": 1, "https": 20, "idea": 2, "ideas": 2, "if": 6, "in": 7, "inspired": 1, "install": 1, "into": 1, "io": 1, "io/#https": 2, "io/button/open-in-gitpod": 1, "io/github/button-edit-lime": 1, "io/p/github/solidjs/solid-docs-next/": 2, "is": 9, "issue": 2, "it": 6, "item": 1, "javascript": 1, "join": 1, "js": 1, "know": 1, "larger": 1, "learn": 1, "link": 1, "local": 1, "localhost": 1, "locally": 3, "looking": 1, "made": 1, "make": 4, "manager": 1, "md": 3, "meet": 1, "mentioned": 1, "might": 1, "missing": 1, "modules": 2, "moment": 1, "more": 1, "navigation": 2, "necessary": 1, "need": 1, "new": 1, "next": 1, "node": 1, "not": 2, "noticed": 1, "obvious": 1, "of": 1, "offer": 1, "on": 2, "open": 3, "or": 6, "other": 1, "our": 9, "out": 1, "package": 1, "perform": 1, "please": 1, "pnpm": 4, "port": 1, "pr": 1, "problem": 1, "problems": 1, "project": 1, "project=solid%20documentation\u0026type=core": 1, "pull": 1, "questions": 1, "quick": 1, "quickest": 1, "raise": 1, "ran": 1, "re": 1, "reactive": 1, "readme": 1, "recommend": 1, "repo": 3, "repositioning": 1, "request": 1, "restart": 1, "routes": 1, "run": 2, "running": 2, "runs": 1, "scalable": 1, "script": 1, "section": 2, "see": 4, "server": 2, "sh": 2, "share": 2, "site": 3, "skills": 1, "solid": 6, "solidjs": 3, "something": 2, "source": 1, "src=": 1, "stackblitz": 2, "start": 1, "suggest": 1, "support": 1, "svg": 3, "sync": 2, "take": 1, "task": 1, "thank": 1, "that": 3, "the": 22, "these": 3, "things": 1, "think": 1, "this": 4, "threads": 1, "through": 1, "to": 17, "translating": 1, "typo": 1, "us": 2, "use": 1, "used": 1, "user-interfaces": 1, "uses": 1, "using": 1, "v18+": 1, "via": 2, "virtual": 2, "vite": 1, "want": 2, "way": 1, "we": 5, "web": 1, "welcome": 2, "welcomed": 2, "what": 2, "where": 2, "will": 2, "with": 4, "wrong": 1, "you": 16, "your": 3, "yourself": 1, "already": 1, "codesandbox": 1, "contributing": 1, "create": 1, "discord": 1, "discussions": 1, "docs": 1, "gitpod": 1, "how": 1, "stackblitz": 1 }, "length": 552 }, { "id": "48280a3598d681273baef4f4", "doc_id": "c200dfe99d2c9f1680cd1e4d", "title": "reconcile", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/store-utilities/reconcile.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/reconcile.json", "content": "--- title: reconcile use_cases: \u003e- api responses, data synchronization, immutable data diffing, observable subscriptions, large data updates tags: - store - diffing - api - synchronization - immutable version: '1.0' description: \u003e- Efficiently diff and merge data changes with reconcile. Perfect for syncing API responses or handling immutable data updates. --- `reconcile` is designed for diffing data changes in situations where granular updates cannot be applied. This is useful when dealing with immutable data from stores or handling large API responses. ```tsx import { reconcile } from \"solid-js/store\" import type { NotWrappable, Store } from \"solid-js/store\" function reconcile\u003cT\u003e( value: T | Store\u003cT\u003e, options?: { key?: string | null; merge?: boolean; } = { key: \"id\" } ): ( state: T extends NotWrappable ? T : Store\u003cT\u003e ) =\u003e T extends NotWrappable ? T : Store\u003cT\u003e ``` `reconcile` has a `key` option that can be used when available to match items. The `value` accepts either a value of type `T` or a Store containing values of type `T`. This represents the data to be reconciled. The `reconcile` function helps manage data changes by performing a diffing process, making it particularly handy in scenarios where applying granular updates is challenging or inefficient. The `key` and `merge` options provide flexibility to customize the reconciliation process based on specific needs. ```ts // subscribing to an observable const unsubscribe = store.subscribe(({ todos }) =\u003e ( setState('todos', reconcile(todos)); ); onCleanup(() =\u003e unsubscribe()); ``` ##### Options | Option | Type | Default | Description | | ------ | ------- | ------- | ---------------------------------- | | key | string | \"id\" | Specifies the key to be used for matching items during reconciliation | | merge | boolean | false | When merge is false, referential checks are performed where possible to determine equality, and items that are not referentially equal are replaced. When merge is true, all diffing is pushed to the leaves, effectively morphing the previous data to the new value. |", "term_freq": { "#####": 1, "---": 2, "------": 1, "-------": 2, "----------------------------------": 1, "//": 1, "//github": 1, "=\u003e": 3, "\u003e-": 2, "accepts": 1, "all": 1, "an": 1, "and": 3, "api": 4, "applied": 1, "applying": 1, "are": 3, "available": 1, "based": 1, "be": 4, "boolean": 2, "by": 1, "can": 1, "cannot": 1, "challenging": 1, "changes": 3, "checks": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/store-utilities/reconcile": 1, "const": 1, "containing": 1, "customize": 1, "data": 10, "dealing": 1, "default": 1, "description": 2, "designed": 1, "determine": 1, "diff": 1, "diffing": 5, "during": 1, "effectively": 1, "efficiently": 1, "either": 1, "equal": 1, "equality": 1, "extends": 2, "false": 2, "flexibility": 1, "for": 3, "from": 3, "function": 2, "github-document": 1, "granular": 2, "handling": 2, "handy": 1, "has": 1, "helps": 1, "https": 1, "id": 2, "immutable": 4, "import": 2, "in": 2, "inefficient": 1, "is": 6, "it": 1, "items": 3, "key": 6, "large": 2, "leaves": 1, "making": 1, "manage": 1, "match": 1, "matching": 1, "mdx": 1, "merge": 6, "morphing": 1, "needs": 1, "new": 1, "not": 1, "notwrappable": 3, "null": 1, "observable": 2, "of": 2, "on": 1, "oncleanup": 1, "option": 2, "options": 3, "or": 4, "particularly": 1, "perfect": 1, "performed": 1, "performing": 1, "possible": 1, "previous": 1, "process": 2, "provide": 1, "pushed": 1, "reconcile": 8, "reconcile\u003ct\u003e": 1, "reconciled": 1, "reconciliation": 2, "referential": 1, "referentially": 1, "replaced": 1, "represents": 1, "responses": 3, "scenarios": 1, "setstate": 1, "situations": 1, "solid-js/store": 2, "specific": 1, "specifies": 1, "state": 1, "store": 4, "store\u003ct\u003e": 3, "stores": 1, "string": 2, "subscribe": 1, "subscribing": 1, "subscriptions": 1, "synchronization": 2, "syncing": 1, "tags": 1, "that": 2, "the": 9, "this": 2, "title": 1, "to": 8, "todos": 3, "true": 1, "ts": 1, "tsx": 1, "type": 4, "unsubscribe": 2, "updates": 4, "use_cases": 1, "used": 2, "useful": 1, "value": 4, "values": 1, "version": 1, "when": 4, "where": 3, "with": 2 }, "length": 274 }, { "id": "e6521db986e46b5b6ce6162c", "doc_id": "8f37cd806e69ca3c55582fb3", "title": "redirect", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/response-helpers/redirect.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/redirect.json", "content": "--- title: redirect use_cases: \u003e- authentication flows, login redirects, form submissions, route guards, user authorization, navigation control tags: - redirect - authentication - navigation - routing - authorization - forms version: \"1.0\" description: \u003e- Redirect users between routes with proper status codes. Handle authentication flows, form submissions, and protected route access. --- The `redirect` function returns a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object that instructs the router to navigate to a different route when returned or thrown from a [query](/solid-router/reference/data-apis/query) or [action](/solid-router/concepts/actions). This works both in client and server (e.g., using a server function) environments. ## Import ```ts import { redirect } from \"@solidjs/router\"; ``` ## Type ```ts function redirect( url: string, init?: | number | { revalidate?: string | string[]; headers?: HeadersInit; status?: number; statusText?: string; } ): CustomResponse\u003cnever\u003e; ``` ## Parameters ### `url` - **Type:** `string` - **Required:** Yes The absolute or relative URL to which the redirect should occur. ### `init` - **Type:** `number | { revalidate?: string | string[]; headers?: HeadersInit; status?: number; statusText?: string; }` - **Required:** No Either a number representing the status code or a configuration object with the following properties: #### `revalidate` - **Type:** `string | string[]` - **Required:** No A query key or an array of query keys to revalidate on the destination route. #### `status` - **Type:** `number` - **Required:** No The HTTP status code for the redirect. Defaults to [`302 Found`)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/302). ## Examples ### Basic Usage ```ts import { query, redirect } from \"@solidjs/router\"; const getCurrentUserQuery = query(async () =\u003e { const response = await fetch(\"/api/me\"); if (response.status === 401) { return redirect(\"/login\"); } return await response.json(); }, \"currentUser\"); ``` ### Configuring Query Revalidation ```ts import { action, redirect } from \"@solidjs/router\"; const loginAction = action(async (formData: FormData) =\u003e { const username = formData.get(\"username\")?.toString(); const password = formData.get(\"password\")?.toString(); await fetch(\"/api/login\", { method: \"POST\", body: JSON.stringify({ username, password }), }).then((response) =\u003e response.json()); return redirect(\"/users\", { revalidate: [\"currentUser\"] }); }, \"login\"); ``` ## Related - [`query`](/solid-router/reference/data-apis/query) - [`action`](/solid-router/reference/data-apis/action)", "term_freq": { "##": 5, "###": 4, "####": 2, "**": 8, "**required": 4, "**type": 4, "---": 2, "//developer": 2, "//github": 1, "/api/login": 1, "/api/me": 1, "/login": 1, "/solid-router/concepts/actions": 1, "/solid-router/reference/data-apis/action": 1, "/solid-router/reference/data-apis/query": 2, "/users": 1, "302": 1, "401": 1, "===": 1, "=\u003e": 3, "\u003e-": 2, "@solidjs/router": 3, "absolute": 1, "access": 1, "action": 4, "an": 1, "and": 2, "array": 1, "async": 2, "authentication": 3, "authorization": 2, "await": 3, "basic": 1, "between": 1, "body": 1, "both": 1, "client": 1, "code": 2, "codes": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/response-helpers/redirect": 1, "configuration": 1, "configuring": 1, "const": 5, "control": 1, "currentuser": 2, "customresponse\u003cnever\u003e": 1, "defaults": 1, "description": 1, "destination": 1, "different": 1, "either": 1, "environments": 1, "examples": 1, "fetch": 2, "flows": 2, "following": 1, "for": 1, "form": 2, "formdata": 4, "forms": 1, "found": 1, "from": 4, "function": 3, "get": 2, "getcurrentuserquery": 1, "github-document": 1, "guards": 1, "handle": 1, "headers": 2, "headersinit": 2, "http": 1, "https": 3, "if": 1, "import": 4, "in": 1, "init": 2, "instructs": 1, "json": 3, "key": 1, "keys": 1, "login": 2, "loginaction": 1, "mdx": 1, "method": 1, "mozilla": 2, "navigate": 1, "navigation": 2, "no": 3, "number": 6, "object": 2, "occur": 1, "of": 1, "on": 1, "or": 5, "org/en-us/docs/web/api/response": 1, "org/en-us/docs/web/http/reference/status/302": 1, "parameters": 1, "password": 3, "post": 1, "proper": 1, "properties": 1, "protected": 1, "query": 7, "redirect": 13, "redirects": 1, "related": 1, "relative": 1, "representing": 1, "response": 6, "return": 3, "returned": 1, "returns": 1, "revalidate": 5, "revalidation": 1, "route": 4, "router": 1, "routes": 1, "routing": 1, "server": 2, "should": 1, "status": 7, "statustext": 2, "string": 10, "stringify": 1, "submissions": 2, "tags": 1, "that": 1, "the": 9, "then": 1, "this": 1, "thrown": 1, "title": 1, "to": 5, "tostring": 2, "ts": 4, "type": 1, "url": 3, "usage": 1, "use_cases": 1, "user": 1, "username": 3, "users": 1, "using": 1, "version": 1, "when": 1, "which": 1, "with": 2, "works": 1, "yes": 1 }, "length": 304 }, { "id": "553a7eda72323602680322d2", "doc_id": "b423e74b65631f109171f832", "title": "ref", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/ref.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/ref.json", "content": "--- title: ref order: 7 use_cases: \u003e- dom access, element manipulation, focus management, measurements, third-party libraries, animations tags: - refs - dom - elements - access - manipulation - components version: '1.0' description: \u003e- Access DOM elements directly in SolidJS with refs. Get references to rendered elements for imperative operations and third-party integrations. --- Refs are a way of getting access to underlying DOM elements in our JSX. While it is true one could just assign an element to a variable, it is more optimal to leave components in the flow of JSX. Refs are assigned at render time but before the elements are connected to the DOM. They come in 2 flavors. ```tsx // variable assigned directly by ref let myDiv; // use onMount or createEffect to read after connected to the DOM onMount(() =\u003e console.log(myDiv)); \u003cdiv ref={myDiv} /\u003e // Or, callback function (called before connected to the DOM) \u003cdiv ref={el =\u003e console.log(el)} /\u003e ``` Refs can also be used on Components. They still need to be attached on the other side. ```tsx function MyComp(props) { return \u003cdiv ref={props.ref} /\u003e } function App() { let myDiv onMount(() =\u003e console.log(myDiv.clientWidth)) return \u003cMyComp ref={myDiv} /\u003e } ```", "term_freq": { "---": 2, "//": 3, "//github": 1, "/\u003e": 4, "\u003cdiv": 3, "\u003cmycomp": 1, "=\u003e": 3, "\u003e-": 2, "access": 4, "after": 1, "also": 1, "an": 1, "and": 1, "animations": 1, "app": 1, "are": 3, "assign": 1, "assigned": 2, "at": 1, "attached": 1, "be": 2, "before": 2, "but": 1, "by": 1, "callback": 1, "called": 1, "can": 1, "clientwidth": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/jsx-attributes/ref": 1, "come": 1, "components": 3, "connected": 3, "console": 3, "could": 1, "createeffect": 1, "description": 1, "directly": 2, "dom": 7, "el": 2, "element": 2, "elements": 5, "flavors": 1, "flow": 1, "focus": 1, "for": 1, "function": 3, "get": 1, "getting": 1, "github-document": 1, "https": 1, "imperative": 1, "in": 4, "integrations": 1, "is": 2, "it": 2, "jsx": 2, "just": 1, "leave": 1, "let": 2, "libraries": 1, "log": 3, "management": 1, "manipulation": 2, "mdx": 1, "measurements": 1, "more": 1, "mycomp": 1, "mydiv": 6, "need": 1, "of": 2, "on": 2, "one": 1, "onmount": 3, "operations": 1, "optimal": 1, "or": 2, "order": 1, "other": 1, "our": 1, "props": 2, "read": 1, "ref": 4, "ref=": 4, "references": 1, "refs": 5, "render": 1, "rendered": 1, "return": 2, "side": 1, "solidjs": 1, "still": 1, "tags": 1, "the": 6, "they": 2, "third-party": 2, "time": 1, "title": 1, "to": 9, "true": 1, "tsx": 2, "underlying": 1, "use": 1, "use_cases": 1, "used": 1, "variable": 2, "version": 1, "way": 1, "while": 1, "with": 1 }, "length": 198 }, { "id": "3861bb1c3687d5856d9b9675", "doc_id": "0732712dd1914959d7b3eb80", "title": "refs", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/refs.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/refs.json", "content": "--- title: Refs use_cases: \u003e- dom access, element references, focus management, third-party libraries, canvas manipulation, forwarding refs tags: - refs - dom - elements - directives - access - forward version: '1.0' description: \u003e- Access and manipulate DOM elements directly using refs, forward refs between components, and create custom directives. --- Refs, or references, are a special attribute that can be attached to any element, and are used to reference a DOM element or a component instance. They are particularly useful when you need to access the DOM nodes directly or invoke methods on a component. ## Accessing DOM elements One way of accessing DOM elements is through [element selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) such as [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) or [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById). Since elements in Solid can be added or removed from the DOM based on state, you need to wait until the element is attached to the DOM before accessing it. This can be done by using [`onMount`](/reference/lifecycle/on-mount) to wait until the element is attached to the DOM before accessing it: Accessing DOM elements through element selectors is not recommended for this reason. As elements with the same selectors are added and removed from the DOM, the first element that matches the selector will be returned, which may not be the element you want. ## JSX as a value JSX can be used as a value and assigned to a variable when looking to directly access DOM elements. ```tsx function Component() { const myElement = \u003cp\u003eMy Element\u003c/p\u003e return \u003cdiv\u003e{myElement}\u003c/div\u003e } ``` This lets you create and access DOM elements similar to [`document.createElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) but without having to wait until it is attached to the DOM. It can be used multiple times without having to worry about duplicate selectors. The downside of this approach is that it separates the element and any child elements from the rest of the JSX structure. This makes the component's JSX structure more difficult to read and understand. ## Refs in Solid Solid provides a ref system to access DOM elements directly inside the JSX template, which keeps the structure of the elements intact. To use [`ref`](/reference/jsx-attributes/ref), you declare a variable and use it as the `ref` attribute: ```tsx {6} function Component() { let myElement; return ( \u003cdiv\u003e \u003cp ref={myElement}\u003eMy Element\u003c/p\u003e \u003c/div\u003e ) } ``` These assignments occur at _creation time_ prior to the element being added to the DOM. If access to an element is needed before it is added to the DOM, you can use the callback form of `ref`: ```jsx \u003cp ref={(el) =\u003e { myElement = el // el is created but not yet added to the DOM }}\u003e My Element \u003c/p\u003e ``` :::note In TypeScript, you must use a definitive assignment assertion. Since Solid takes care of assigning the variable when the component is rendered, this signals to TypeScript that the variable will be assigned, even if it can't confirm it. ```tsx let myElement!: HTMLDivElement; ``` ::: ### Signals as refs [Signals](/concepts/signals) can also be used as refs. This is useful when you want to access the element directly, but the element may not exist when the component is first rendered, or may be removed from the DOM at some point. ```jsx function App() { const [show, setShow] = createSignal(false) let element!: HTMLParagraphElement return ( \u003cdiv\u003e \u003cbutton onClick={() =\u003e setShow((isShown) =\u003e !isShown)}\u003eToggle\u003c/button\u003e \u003cShow when={show()}\u003e \u003cp ref={element}\u003eThis is the ref element\u003c/p\u003e \u003c/Show\u003e \u003c/div\u003e ) } ``` In this example, the paragraph element is only rendered when the `show` signal is `true`. When the component initializes, the paragraph element does not exist, so the `element` variable is not assigned. Once the `show` signal is set to `true`, the paragraph element is rendered, and the `element` variable is assigned to the paragraph element. You can see a detailed view of the ref update lifecycle in this [Solid playground example](https://playground.solidjs.com/anonymous/22a1abfa-a0f5-44a6-bbe6-40387cf63b95). ## Forwarding refs Forwarding refs is a technique that allows you to pass a ref from a parent component to a child component. This is useful when you want to access the DOM element of a child component from the parent component. To forward a ref, you need to pass the ref to the child component, and then assign the ref to the child component's element. When a child component receives a `ref` attribute from its parent, the `ref` is passed as a callback function. This is regardless of whether the parent passed it as a simple assignment or a callback. Once the child component receives the `ref`, it can be assigned to the element that the child component wants to expose through the `ref` attribute. To access the `ref` in the child component, it is passed as a prop: ```tsx // Parent component import { Canvas } from \"./Canvas.jsx\" function ParentComponent() { let canvasRef const animateCanvas = () =\u003e { // Manipulate the canvas using canvasRef... } return ( \u003cdiv\u003e \u003cCanvas ref={canvasRef} /\u003e \u003cbutton onClick={animateCanvas}\u003eAnimate Canvas\u003c/button\u003e \u003c/div\u003e ) } // Child component function Canvas(props) { return ( \u003cdiv className=\"canvas-container\"\u003e \u003ccanvas ref={props.ref} /\u003e {/* Assign the ref to the canvas element */} \u003c/div\u003e ) } ``` In this example, the `canvas` element is directly assigned the `ref` attribute through the `props.ref` variable. This forwards the reference to the parent component, giving it direct access to the `canvas` element. ## Directives Directives allow the attachment of reusable behaviours to DOM elements. The [`use:`](/reference/jsx-attributes/use) prefix is used to denote these custom directives. Unlike props or attributes, directives operate at a lower level through providing fine-grained control over the elements they are attached to. Directives are like callback refs but they enable two extra features: - Having multiple directives on an element. - Passing in reactive data to the callback. A directive is essentially a function with a specific signature: ```typescript function directive(element: Element, accessor: () =\u003e any): void ``` - `element`: The DOM element that the directive is applied to. - `accessor`: A function that gives access to the value(s) passed to the directive. The directive functions are called at render time, but are called before the element is added to the DOM. Due to this order, elements are fully primed with their attributes, properties, or event listeners, therefore minimizing unexpected behaviors or premature interactions. Within directives, you're able to perform a variety of tasks, including: - creating [signals](/concepts/signals) - initiating [effects](/guides/state-management#reacting-to-changes) - adding [event listeners](/concepts/components/event-handlers) - and more. To learn more about directives and how they work with TypeScript, refer to our [TypeScript for Solid guide](/configuration/typescript).", "term_freq": { "##": 5, "###": 1, "*/": 1, "---": 2, "/*": 1, "//": 4, "//developer": 4, "//github": 1, "//playground": 1, "/\u003e": 2, "/canvas": 1, "/concepts/components/event-handlers": 1, "/concepts/signals": 2, "/configuration/typescript": 1, "/guides/state-management#reacting-to-changes": 1, "/reference/jsx-attributes/ref": 1, "/reference/jsx-attributes/use": 1, "/reference/lifecycle/on-mount": 1, "\u003c/div\u003e": 5, "\u003c/p\u003e": 1, "\u003c/show\u003e": 1, "\u003cbutton": 2, "\u003ccanvas": 2, "\u003cdiv": 1, "\u003cdiv\u003e": 4, "\u003cp": 3, "\u003cp\u003emy": 1, "\u003cshow": 1, "=\u003e": 5, "\u003e-": 2, "\u003eanimate": 1, "\u003emy": 1, "\u003ethis": 1, "\u003etoggle\u003c/button\u003e": 1, "_creation": 1, "able": 1, "about": 2, "access": 13, "accessing": 5, "accessor": 2, "added": 6, "adding": 1, "allow": 1, "allows": 1, "also": 1, "an": 2, "and": 13, "animatecanvas": 2, "any": 3, "app": 1, "applied": 1, "approach": 1, "are": 9, "as": 10, "assertion": 1, "assign": 2, "assigned": 6, "assigning": 1, "assignment": 2, "assignments": 1, "at": 4, "attached": 5, "attachment": 1, "attribute": 5, "attributes": 2, "based": 1, "be": 11, "before": 4, "behaviors": 1, "behaviours": 1, "being": 1, "between": 1, "but": 5, "by": 1, "callback": 5, "called": 2, "can": 10, "canvas": 7, "canvas-container": 1, "canvas\u003c/button\u003e": 1, "canvasref": 3, "care": 1, "child": 10, "classname=": 1, "com/anonymous/22a1abfa-a0f5-44a6-bbe6-40387cf63b95": 1, "com/solidjs/solid-docs/blob/head/src/routes/concepts/refs": 1, "component": 21, "components": 1, "confirm": 1, "const": 3, "control": 1, "create": 2, "created": 1, "createelement": 1, "createsignal": 1, "creating": 1, "custom": 2, "data": 1, "declare": 1, "definitive": 1, "denote": 1, "description": 1, "detailed": 1, "difficult": 1, "direct": 1, "directive": 5, "directives": 10, "directly": 6, "document": 3, "does": 1, "dom": 24, "done": 1, "downside": 1, "due": 1, "duplicate": 1, "effects": 1, "el": 3, "element": 35, "element\u003c/p\u003e": 3, "elements": 15, "enable": 1, "essentially": 1, "even": 1, "event": 2, "example": 3, "exist": 2, "expose": 1, "extra": 1, "false": 1, "features": 1, "fine-grained": 1, "first": 2, "focus": 1, "for": 2, "form": 1, "forward": 3, "forwarding": 3, "forwards": 1, "from": 8, "fully": 1, "function": 9, "functions": 1, "getelementbyid": 1, "github-document": 1, "gives": 1, "giving": 1, "guide": 1, "having": 3, "how": 1, "htmldivelement": 1, "htmlparagraphelement": 1, "https": 6, "if": 2, "import": 1, "in": 8, "including": 1, "initializes": 1, "initiating": 1, "inside": 1, "instance": 1, "intact": 1, "interactions": 1, "invoke": 1, "is": 29, "isshown": 2, "it": 13, "its": 1, "jsx": 8, "keeps": 1, "learn": 1, "let": 4, "lets": 1, "level": 1, "libraries": 1, "lifecycle": 1, "like": 1, "listeners": 2, "looking": 1, "lower": 1, "makes": 1, "management": 1, "manipulate": 2, "manipulation": 1, "matches": 1, "may": 3, "mdx": 1, "methods": 1, "minimizing": 1, "more": 3, "mozilla": 4, "multiple": 2, "must": 1, "my": 1, "myelement": 6, "need": 3, "needed": 1, "nodes": 1, "not": 6, "note": 1, "occur": 1, "of": 11, "on": 3, "once": 2, "onclick=": 2, "one": 1, "only": 1, "onmount": 1, "operate": 1, "or": 10, "order": 1, "org/en-us/docs/web/api/document/createelement": 1, "org/en-us/docs/web/api/document/getelementbyid": 1, "org/en-us/docs/web/api/document/queryselector": 1, "org/en-us/docs/web/api/document_object_model/locating_dom_elements_using_selectors": 1, "our": 1, "over": 1, "paragraph": 4, "parent": 6, "parentcomponent": 1, "particularly": 1, "pass": 2, "passed": 4, "passing": 1, "perform": 1, "playground": 1, "point": 1, "prefix": 1, "premature": 1, "primed": 1, "prior": 1, "prop": 1, "properties": 1, "props": 4, "provides": 1, "providing": 1, "queryselector": 1, "re": 1, "reactive": 1, "read": 1, "reason": 1, "receives": 2, "recommended": 1, "ref": 19, "ref=": 5, "refer": 1, "reference": 2, "references": 2, "refs": 13, "regardless": 1, "removed": 3, "render": 1, "rendered": 4, "rest": 1, "return": 5, "returned": 1, "reusable": 1, "same": 1, "see": 1, "selector": 1, "selectors": 4, "separates": 1, "set": 1, "setshow": 2, "show": 4, "signal": 2, "signals": 4, "signature": 1, "similar": 1, "simple": 1, "since": 2, "so": 1, "solid": 6, "solidjs": 1, "some": 1, "special": 1, "specific": 1, "state": 1, "structure": 3, "such": 1, "system": 1, "tags": 1, "takes": 1, "tasks": 1, "technique": 1, "template": 1, "that": 8, "the": 79, "their": 1, "then": 1, "therefore": 1, "these": 2, "they": 4, "third-party": 1, "this": 14, "through": 5, "time": 1, "time_": 1, "times": 1, "title": 1, "to": 50, "true": 2, "tsx": 4, "two": 1, "typescript": 5, "understand": 1, "unexpected": 1, "unlike": 1, "until": 3, "update": 1, "use": 5, "use_cases": 1, "used": 5, "useful": 3, "using": 3, "value": 3, "variable": 7, "variety": 1, "version": 1, "view": 1, "void": 1, "wait": 3, "want": 3, "wants": 1, "way": 1, "when": 9, "when=": 1, "whether": 1, "which": 2, "will": 2, "with": 4, "within": 1, "without": 2, "work": 1, "worry": 1, "yet": 1, "you": 13 }, "length": 1038 }, { "id": "5292d6dd9014dd8b0025cb11", "doc_id": "f244654f589d265f7644ab96", "title": "reload", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/response-helpers/reload.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/reload.json", "content": "--- title: reload use_cases: \u003e- data refresh, cache invalidation, after mutations, updating queries, form submissions, data synchronization tags: - reload - cache - revalidation - mutations - queries - refresh version: \"1.0\" description: \u003e- Reload and revalidate specific queries after mutations. Efficiently update cached data without full page refreshes for better UX. --- The `reload` function returns a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object that instructs the router to revalidate specific queries when returned or thrown from a [query](/solid-router/reference/data-apis/query) or [action](/solid-router/concepts/actions). ## Import ```ts import { reload } from \"@solidjs/router\"; ``` ## Type ```ts function reload(init?: { revalidate?: string | string[]; headers?: HeadersInit; status?: number; statusText?: string; }): CustomResponse\u003cnever\u003e; ``` ## Parameters ### `init` - **Type:** `{ revalidate?: string | string[]; headers?: HeadersInit; status?: number; statusText?: string; }` - **Required:** No An optional configuration object with the following properties: #### `revalidate` - **Type:** `string | string[]` - **Required:** No A query key or an array of query keys to revalidate. #### `headers` - **Type:** `HeadersInit` - **Required:** No An object containing any headers to be sent with the response. #### `status` - **Type:** `number` - **Required:** No The HTTP status code of the response. Defaults to [`200 OK`](http://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/200). #### `statusText` - **Type:** `string` - **Required:** No The status text associated with the status code. ## Examples ### Basic Usage ```ts import { action, reload } from \"@solidjs/router\"; const savePreferencesAction = action(async () =\u003e { // ... Saves the user preferences. // Only revalidate the \"userPreferences\" query. return reload({ revalidate: [\"userPreferences\"] }); }, \"savePreferences\"); ```", "term_freq": { "##": 4, "###": 2, "####": 4, "**": 10, "**required": 5, "**type": 5, "---": 2, "//": 2, "//developer": 2, "//github": 1, "/solid-router/concepts/actions": 1, "/solid-router/reference/data-apis/query": 1, "200": 1, "=\u003e": 1, "\u003e-": 2, "@solidjs/router": 2, "action": 3, "after": 2, "an": 3, "and": 1, "any": 1, "array": 1, "associated": 1, "async": 1, "basic": 1, "be": 1, "better": 1, "cache": 2, "cached": 1, "code": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/response-helpers/reload": 1, "configuration": 1, "const": 1, "containing": 1, "customresponse\u003cnever\u003e": 1, "data": 3, "defaults": 1, "description": 1, "efficiently": 1, "examples": 1, "following": 1, "for": 1, "form": 1, "from": 3, "full": 1, "function": 2, "github-document": 1, "headers": 4, "headersinit": 3, "http": 2, "https": 2, "import": 3, "init": 2, "instructs": 1, "invalidation": 1, "key": 1, "keys": 1, "mdx": 1, "mozilla": 2, "mutations": 3, "no": 5, "number": 3, "object": 3, "of": 2, "ok": 1, "only": 1, "optional": 1, "or": 3, "org/en-us/docs/web/api/response": 1, "org/en-us/docs/web/http/reference/status/200": 1, "page": 1, "parameters": 1, "preferences": 1, "properties": 1, "queries": 4, "query": 4, "refresh": 2, "refreshes": 1, "reload": 9, "response": 3, "return": 1, "returned": 1, "returns": 1, "revalidate": 8, "revalidation": 1, "router": 1, "savepreferences": 1, "savepreferencesaction": 1, "saves": 1, "sent": 1, "specific": 2, "status": 6, "statustext": 3, "string": 9, "submissions": 1, "synchronization": 1, "tags": 1, "text": 1, "that": 1, "the": 10, "thrown": 1, "title": 1, "to": 4, "ts": 3, "type": 1, "update": 1, "updating": 1, "usage": 1, "use_cases": 1, "user": 1, "userpreferences": 2, "ux": 1, "version": 1, "when": 1, "with": 3, "without": 1 }, "length": 238 }, { "id": "e2c684f38fa880e5d386df86", "doc_id": "18110af79420f4a19e911f92", "title": "remix.config.js | Remix", "url": "https://v2.remix.run/docs/file-conventions/remix-config", "type": "html", "source": "remix:routes", "path": "devour_data/docs/remix.config.js---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsremix.config.jsGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageappDirectoryassetsBuildDirectorybrowserNodeBuiltinsPolyfillcacheDirectoryfutureignoredRouteFilespublicPathpostcssroutesserverserverBuildPathserverConditionsserverDependenciesToBundleserverMainFieldsserverMinifyserverModuleFormatserverNodeBuiltinsPolyfillserverPlatformtailwindwatchPathsFile Name ConventionsOn this pageappDirectoryassetsBuildDirectorybrowserNodeBuiltinsPolyfillcacheDirectoryfutureignoredRouteFilespublicPathpostcssroutesserverserverBuildPathserverConditionsserverDependenciesToBundleserverMainFieldsserverMinifyserverModuleFormatserverNodeBuiltinsPolyfillserverPlatformtailwindwatchPathsFile Name Conventionsremix.config.js remix.config.js is only relevant when using the Classic Remix Compiler. When using Remix Vite, this file should not be present in your project. Instead, Remix configuration should be provided to the Remix plugin in your Vite config. This file has a few build and development configuration options but does not run on your server. /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { appDirectory: \"app\", assetsBuildDirectory: \"public/build\", future: { /* any enabled future flags */ }, ignoredRouteFiles: [\"**/*.css\"], publicPath: \"/build/\", routes(defineRoutes) { return defineRoutes((route) =\u003e { route(\"/somewhere/cool/*\", \"catchall.tsx\"); }); }, serverBuildPath: \"build/index.js\", }; appDirectory The path to the app directory, relative to remix.config.js. Defaults to \"app\". // default exports.appDirectory = \"./app\"; // custom exports.appDirectory = \"./elsewhere\"; assetsBuildDirectory The path to the browser build, relative to remix.config.js. Defaults to \"public/build\". Should be deployed to static hosting. browserNodeBuiltinsPolyfill The Node.js polyfills to include in the browser build. Polyfills are provided by JSPM and configured via esbuild-plugins-node-modules-polyfill. /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { browserNodeBuiltinsPolyfill: { modules: { buffer: true, // Provide a JSPM polyfill fs: \"empty\", // Provide an empty polyfill }, globals: { Buffer: true, }, }, }; When using this option and targeting non-Node.js server platforms, you may also want to configure Node.js polyfills for the server via serverNodeBuiltinsPolyfill. cacheDirectory The path to a directory Remix can use for caching things in development, relative to remix.config.js. Defaults to \".cache\". future The future config lets you opt-into future breaking changes via Future Flags. Please see the Current Future Flags section for a list of all available Future Flags. ignoredRouteFiles This is an array of globs (via minimatch) that Remix will match to files while reading your app/routes directory. If a file matches, it will be ignored rather than treated like a route module. This is useful for ignoring CSS/test files you wish to colocate. publicPath The URL prefix of the browser build with a trailing slash. Defaults to \"/build/\". This is the path the browser will use to find assets. /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { publicPath: \"/assets/\", }; If you wish to serve static assets from a separate domain, you may also specify an absolute path: /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { publicPath: \"https://static.example.com/assets/\", }; postcss Whether to process CSS using PostCSS if a PostCSS config file is present. Defaults to true. /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { postcss: false, }; routes A function for defining custom routes, in addition to those already defined using the filesystem convention in app/routes. Both sets of routes will be merged. exports.routes = async (defineRoutes) =\u003e { // If you need to do async work, do it before calling `defineRoutes`, we use // the call stack of `route` inside to set nesting. return defineRoutes((route) =\u003e { // A common use for this is catchall routes. // - The first argument is the React Router path to match against // - The second is the relative filename of the route handler route(\"/some/path/*\", \"catchall.tsx\"); // if you want to nest routes, use the optional callback argument route(\"some/:path\", \"some/route/file.js\", () =\u003e { // - path is relative to parent path // - filenames are still relative to the app directory route(\"relative/path\", \"some/other/file\"); }); }); }; server A server entrypoint, relative to the root directory that becomes your server's main module. If specified, Remix will compile this file along with your application into a single file to be deployed to your server. This file can use either a .js or .ts file extension. serverBuildPath The path to the server build file, relative to remix.config.js. This file should end in a .js extension and should be deployed to your server. Defaults to \"build/index.js\". serverConditions The order of conditions to use when resolving server dependencies' exports field in package.json. serverDependenciesToBundle A list of regex patterns that determines if a module is transpiled and included in the server bundle. This can be useful when consuming ESM only packages in a CJS build or when consuming packages with CSS side effect imports. For example, the unified ecosystem is all ESM-only. Let's also say we're using a @sindresorhus/slugify which is ESM-only as well. Here's how you would be able to consume those packages in a CJS app without having to use dynamic imports: /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { appDirectory: \"app\", assetsBuildDirectory: \"public/build\", publicPath: \"/build/\", serverBuildPath: \"build/index.js\", ignoredRouteFiles: [\"**/*.css\"], serverDependenciesToBundle: [ /^rehype.*/, /^remark.*/, /^unified.*/, \"@sindresorhus/slugify\", ], }; If you want to bundle all server dependencies, you can set serverDependenciesToBundle to \"all\". serverMainFields The order of main fields to use when resolving server dependencies. Defaults to [\"main\", \"module\"] when serverModuleFormat is set to \"cjs\". Defaults to [\"module\", \"main\"] when serverModuleFormat is set to \"esm\". serverMinify Whether to minify the server build in production or not. Defaults to false. serverModuleFormat The output format of the server build, which can either be \"cjs\" or \"esm\". Defaults to \"esm\". serverNodeBuiltinsPolyfill The Node.js polyfills to include in the server build when targeting non-Node.js server platforms. Polyfills are provided by JSPM and configured via esbuild-plugins-node-modules-polyfill. /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { serverNodeBuiltinsPolyfill: { modules: { buffer: true, // Provide a JSPM polyfill fs: \"empty\", // Provide an empty polyfill }, globals: { Buffer: true, }, }, }; When using this option, you may also want to configure Node.js polyfills for the browser via browserNodeBuiltinsPolyfill. serverPlatform The platform the server build is targeting, which can either be \"neutral\" or \"node\". Defaults to \"node\". tailwind Whether to support Tailwind CSS functions and directives in CSS files if tailwindcss is installed. Defaults to true. /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { tailwind: false, }; watchPaths An array, string, or async function that defines custom directories, relative to the project root, to watch while running remix dev. These directories are in addition to appDirectory. exports.watchPaths = async () =\u003e { return [\"./some/path/*\"]; }; // also valid exports.watchPaths = [\"./some/path/*\"]; File Name Conventions There are a few conventions that Remix uses you should be aware of. Dilum Sanjaya made an awesome visualization of how routes in the file system map to the URL in your app that might help you understand these conventions.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_1023\\\":-5,\\\"_1024\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":956,\\\"_957\\\":958,\\\"_24\\\":959,\\\"_960\\\":961,\\\"_27\\\":1022},{\\\"_18\\\":954,\\\"_955\\\":34},\\\"remix.config.js\\\",\\\"hidden\\\",\\\"docs/file-conventions/remix-config.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"remixconfigjs\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#remixconfigjs\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eremix.config.js\\u003c/h1\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003e\\u003ccode\\u003eremix.config.js\\u003c/code\\u003e is only relevant when using the \\u003ca href=\\\\\\\"../guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\\"\\u003eClassic Remix Compiler\\u003c/a\\u003e. When using \\u003ca href=\\\\\\\"../guides/vite\\\\\\\"\\u003eRemix Vite\\u003c/a\\u003e, this file should not be present in your project. Instead, Remix configuration should be provided to the Remix plugin in your \\u003ca href=\\\\\\\"./vite-config\\\\\\\"\\u003eVite config\\u003c/a\\u003e.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eThis file has a few build and development configuration options but does not run on your server.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e appDirectory: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eapp\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e assetsBuildDirectory: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epublic/build\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* any enabled future flags */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e ignoredRouteFiles: [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e**/*.css\\u003c/span\\u003e\\\\\\\"],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e publicPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/build/\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroutes\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eroute\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/somewhere/cool/*\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecatchall.tsx\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e serverBuildPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebuild/index.js\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"appdirectory\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#appdirectory\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eappDirectory\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe path to the \\u003ccode\\u003eapp\\u003c/code\\u003e directory, relative to remix.config.js. Defaults to\\\\n\\u003ccode\\u003e\\\\\\\"app\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eappDirectory\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./app\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// custom\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eappDirectory\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./elsewhere\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"assetsbuilddirectory\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#assetsbuilddirectory\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eassetsBuildDirectory\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe path to the browser build, relative to remix.config.js. Defaults to\\\\n\\u003ccode\\u003e\\\\\\\"public/build\\\\\\\"\\u003c/code\\u003e. Should be deployed to static hosting.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"browsernodebuiltinspolyfill\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#browsernodebuiltinspolyfill\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebrowserNodeBuiltinsPolyfill\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe Node.js polyfills to include in the browser build. Polyfills are provided by \\u003ca href=\\\\\\\"https://github.com/jspm/jspm-core\\\\\\\"\\u003eJSPM\\u003c/a\\u003e and configured via \\u003ca href=\\\\\\\"https://npm.im/esbuild-plugins-node-modules-polyfill\\\\\\\"\\u003eesbuild-plugins-node-modules-polyfill\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e browserNodeBuiltinsPolyfill: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e modules: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e buffer: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// Provide a JSPM polyfill\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e fs: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eempty\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// Provide an empty polyfill\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e globals: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e Buffer: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eWhen using this option and targeting non-Node.js server platforms, you may also want to configure Node.js polyfills for the server via \\u003ca href=\\\\\\\"#servernodebuiltinspolyfill\\\\\\\"\\u003e\\u003ccode\\u003eserverNodeBuiltinsPolyfill\\u003c/code\\u003e\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"cachedirectory\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#cachedirectory\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ecacheDirectory\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe path to a directory Remix can use for caching things in development,\\\\nrelative to \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e. Defaults to \\u003ccode\\u003e\\\\\\\".cache\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"future\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#future\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003efuture\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe \\u003ccode\\u003efuture\\u003c/code\\u003e config lets you opt-into future breaking changes via \\u003ca href=\\\\\\\"../start/future-flags\\\\\\\"\\u003eFuture Flags\\u003c/a\\u003e. Please see the \\u003ca href=\\\\\\\"../start/future-flags#current-future-flags\\\\\\\"\\u003eCurrent Future Flags\\u003c/a\\u003e section for a list of all available Future Flags.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"ignoredroutefiles\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#ignoredroutefiles\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eignoredRouteFiles\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThis is an array of globs (via \\u003ca href=\\\\\\\"https://npm.im/minimatch\\\\\\\"\\u003eminimatch\\u003c/a\\u003e) that Remix will match to\\\\nfiles while reading your \\u003ccode\\u003eapp/routes\\u003c/code\\u003e directory. If a file matches, it will be\\\\nignored rather than treated like a route module. This is useful for ignoring\\\\nCSS/test files you wish to colocate.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"publicpath\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#publicpath\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003epublicPath\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe URL prefix of the browser build with a trailing slash. Defaults to\\\\n\\u003ccode\\u003e\\\\\\\"/build/\\\\\\\"\\u003c/code\\u003e. This is the path the browser will use to find assets.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e publicPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/assets/\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eIf you wish to serve static assets from a separate domain, you may also specify an absolute path:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e publicPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ehttps://static.example.com/assets/\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"postcss\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#postcss\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003epostcss\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhether to process CSS using \\u003ca href=\\\\\\\"https://postcss.org\\\\\\\"\\u003ePostCSS\\u003c/a\\u003e if a PostCSS config file is present. Defaults to \\u003ccode\\u003etrue\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e postcss: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"routes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#routes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroutes\\u003c/h2\\u003e\\\\n\\u003cp\\u003eA function for defining custom routes, in addition to those already defined\\\\nusing the filesystem convention in \\u003ccode\\u003eapp/routes\\u003c/code\\u003e. Both sets of routes will be merged.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroutes\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// If you need to do async work, do it before calling `defineRoutes`, we use\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// the call stack of `route` inside to set nesting.\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eroute\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// A common use for this is catchall routes.\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// - The first argument is the React Router path to match against\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// - The second is the relative filename of the route handler\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/some/path/*\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecatchall.tsx\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// if you want to nest routes, use the optional callback argument\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esome/:path\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esome/route/file.js\\u003c/span\\u003e\\\\\\\", () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// - path is relative to parent path\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// - filenames are still relative to the app directory\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003erelative/path\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esome/other/file\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"server\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#server\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserver\\u003c/h2\\u003e\\\\n\\u003cp\\u003eA server entrypoint, relative to the root directory that becomes your server's\\\\nmain module. If specified, Remix will compile this file along with your\\\\napplication into a single file to be deployed to your server. This file can use\\\\neither a \\u003ccode\\u003e.js\\u003c/code\\u003e or \\u003ccode\\u003e.ts\\u003c/code\\u003e file extension.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"serverbuildpath\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#serverbuildpath\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverBuildPath\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe path to the server build file, relative to \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e. This file\\\\nshould end in a \\u003ccode\\u003e.js\\u003c/code\\u003e extension and should be deployed to your server. Defaults\\\\nto \\u003ccode\\u003e\\\\\\\"build/index.js\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"serverconditions\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#serverconditions\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverConditions\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe order of conditions to use when resolving server dependencies' \\u003ccode\\u003eexports\\u003c/code\\u003e\\\\nfield in \\u003ccode\\u003epackage.json\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"serverdependenciestobundle\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#serverdependenciestobundle\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverDependenciesToBundle\\u003c/h2\\u003e\\\\n\\u003cp\\u003eA list of regex patterns that determines if a module is transpiled and included\\\\nin the server bundle. This can be useful when consuming ESM only packages in a\\\\nCJS build or when consuming packages with \\u003ca href=\\\\\\\"../styling/css-imports\\\\\\\"\\u003eCSS side effect\\\\nimports\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor example, the \\u003ccode\\u003eunified\\u003c/code\\u003e ecosystem is all ESM-only. Let's also say we're using\\\\na \\u003ccode\\u003e@sindresorhus/slugify\\u003c/code\\u003e which is ESM-only as well. Here's how you would be\\\\nable to consume those packages in a CJS app without having to use dynamic\\\\nimports:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e appDirectory: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eapp\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e assetsBuildDirectory: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epublic/build\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e publicPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/build/\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e serverBuildPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebuild/index.js\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e ignoredRouteFiles: [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e**/*.css\\u003c/span\\u003e\\\\\\\"],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e serverDependenciesToBundle: [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e /\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e^\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003erehype.\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e*\\u003c/span\\u003e/,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e /\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e^\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eremark.\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e*\\u003c/span\\u003e/,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e /\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e^\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eunified.\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e*\\u003c/span\\u003e/,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@sindresorhus/slugify\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e ],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eIf you want to bundle all server dependencies, you can set\\\\n\\u003ccode\\u003eserverDependenciesToBundle\\u003c/code\\u003e to \\u003ccode\\u003e\\\\\\\"all\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"servermainfields\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#servermainfields\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverMainFields\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe order of main fields to use when resolving server dependencies. Defaults to\\\\n\\u003ccode\\u003e[\\\\\\\"main\\\\\\\", \\\\\\\"module\\\\\\\"]\\u003c/code\\u003e when \\u003ccode\\u003eserverModuleFormat\\u003c/code\\u003e is set to \\u003ccode\\u003e\\\\\\\"cjs\\\\\\\"\\u003c/code\\u003e. Defaults to\\\\n\\u003ccode\\u003e[\\\\\\\"module\\\\\\\", \\\\\\\"main\\\\\\\"]\\u003c/code\\u003e when \\u003ccode\\u003eserverModuleFormat\\u003c/code\\u003e is set to \\u003ccode\\u003e\\\\\\\"esm\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"serverminify\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#serverminify\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverMinify\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhether to minify the server build in production or not. Defaults to \\u003ccode\\u003efalse\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"servermoduleformat\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#servermoduleformat\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverModuleFormat\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe output format of the server build, which can either be \\u003ccode\\u003e\\\\\\\"cjs\\\\\\\"\\u003c/code\\u003e or \\u003ccode\\u003e\\\\\\\"esm\\\\\\\"\\u003c/code\\u003e.\\\\nDefaults to \\u003ccode\\u003e\\\\\\\"esm\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"servernodebuiltinspolyfill\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#servernodebuiltinspolyfill\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverNodeBuiltinsPolyfill\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe Node.js polyfills to include in the server build when targeting non-Node.js server platforms. Polyfills are provided by \\u003ca href=\\\\\\\"https://github.com/jspm/jspm-core\\\\\\\"\\u003eJSPM\\u003c/a\\u003e and configured via \\u003ca href=\\\\\\\"https://npm.im/esbuild-plugins-node-modules-polyfill\\\\\\\"\\u003eesbuild-plugins-node-modules-polyfill\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e serverNodeBuiltinsPolyfill: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e modules: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e buffer: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// Provide a JSPM polyfill\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e fs: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eempty\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// Provide an empty polyfill\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e globals: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e Buffer: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eWhen using this option, you may also want to configure Node.js polyfills for the browser via \\u003ca href=\\\\\\\"#browsernodebuiltinspolyfill\\\\\\\"\\u003e\\u003ccode\\u003ebrowserNodeBuiltinsPolyfill\\u003c/code\\u003e\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"serverplatform\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#serverplatform\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverPlatform\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe platform the server build is targeting, which can either be \\u003ccode\\u003e\\\\\\\"neutral\\\\\\\"\\u003c/code\\u003e or\\\\n\\u003ccode\\u003e\\\\\\\"node\\\\\\\"\\u003c/code\\u003e. Defaults to \\u003ccode\\u003e\\\\\\\"node\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"tailwind\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#tailwind\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003etailwind\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhether to support \\u003ca href=\\\\\\\"https://tailwindcss.com/docs/functions-and-directives\\\\\\\"\\u003eTailwind CSS functions and directives\\u003c/a\\u003e in CSS files if \\u003ccode\\u003etailwindcss\\u003c/code\\u003e is installed. Defaults to \\u003ccode\\u003etrue\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e tailwind: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"watchpaths\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#watchpaths\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ewatchPaths\\u003c/h2\\u003e\\\\n\\u003cp\\u003eAn array, string, or async function that defines custom directories, relative to the project root, to watch while running \\u003ca href=\\\\\\\"../other-api/dev#remix-dev\\\\\\\"\\u003eremix dev\\u003c/a\\u003e. These directories are in addition to \\u003ca href=\\\\\\\"#appdirectory\\\\\\\"\\u003e\\u003ccode\\u003eappDirectory\\u003c/code\\u003e\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ewatchPaths\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./some/path/*\\u003c/span\\u003e\\\\\\\"];\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// also valid\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ewatchPaths\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./some/path/*\\u003c/span\\u003e\\\\\\\"];\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"file-name-conventions\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#file-name-conventions\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eFile Name Conventions\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThere are a few conventions that Remix uses you should be aware of.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003e\\u003ca href=\\\\\\\"https://twitter.com/DilumSanjaya\\\\\\\"\\u003eDilum Sanjaya\\u003c/a\\u003e made \\u003ca href=\\\\\\\"https://interactive-remix-routing-v2.netlify.app\\\\\\\"\\u003ean awesome visualization\\u003c/a\\u003e of how routes in the file system map to the URL in your app that might help you understand these conventions.\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\",\\\"docs/file-conventions/remix-config\\\",\\\"headings\\\",[962,967,970,973,976,978,981,984,986,988,990,993,996,999,1002,1005,1008,1011,1014,1016,1019],{\\\"_963\\\":964,\\\"_957\\\":965,\\\"_24\\\":966},\\\"headingLevel\\\",\\\"h2\\\",\\\"appDirectory\\\",\\\"appdirectory\\\",{\\\"_963\\\":964,\\\"_957\\\":968,\\\"_24\\\":969},\\\"assetsBuildDirectory\\\",\\\"assetsbuilddirectory\\\",{\\\"_963\\\":964,\\\"_957\\\":971,\\\"_24\\\":972},\\\"browserNodeBuiltinsPolyfill\\\",\\\"browsernodebuiltinspolyfill\\\",{\\\"_963\\\":964,\\\"_957\\\":974,\\\"_24\\\":975},\\\"cacheDirectory\\\",\\\"cachedirectory\\\",{\\\"_963\\\":964,\\\"_957\\\":977,\\\"_24\\\":977},\\\"future\\\",{\\\"_963\\\":964,\\\"_957\\\":979,\\\"_24\\\":980},\\\"ignoredRouteFiles\\\",\\\"ignoredroutefiles\\\",{\\\"_963\\\":964,\\\"_957\\\":982,\\\"_24\\\":983},\\\"publicPath\\\",\\\"publicpath\\\",{\\\"_963\\\":964,\\\"_957\\\":985,\\\"_24\\\":985},\\\"postcss\\\",{\\\"_963\\\":964,\\\"_957\\\":987,\\\"_24\\\":987},\\\"routes\\\",{\\\"_963\\\":964,\\\"_957\\\":989,\\\"_24\\\":989},\\\"server\\\",{\\\"_963\\\":964,\\\"_957\\\":991,\\\"_24\\\":992},\\\"serverBuildPath\\\",\\\"serverbuildpath\\\",{\\\"_963\\\":964,\\\"_957\\\":994,\\\"_24\\\":995},\\\"serverConditions\\\",\\\"serverconditions\\\",{\\\"_963\\\":964,\\\"_957\\\":997,\\\"_24\\\":998},\\\"serverDependenciesToBundle\\\",\\\"serverdependenciestobundle\\\",{\\\"_963\\\":964,\\\"_957\\\":1000,\\\"_24\\\":1001},\\\"serverMainFields\\\",\\\"servermainfields\\\",{\\\"_963\\\":964,\\\"_957\\\":1003,\\\"_24\\\":1004},\\\"serverMinify\\\",\\\"serverminify\\\",{\\\"_963\\\":964,\\\"_957\\\":1006,\\\"_24\\\":1007},\\\"serverModuleFormat\\\",\\\"servermoduleformat\\\",{\\\"_963\\\":964,\\\"_957\\\":1009,\\\"_24\\\":1010},\\\"serverNodeBuiltinsPolyfill\\\",\\\"servernodebuiltinspolyfill\\\",{\\\"_963\\\":964,\\\"_957\\\":1012,\\\"_24\\\":1013},\\\"serverPlatform\\\",\\\"serverplatform\\\",{\\\"_963\\\":964,\\\"_957\\\":1015,\\\"_24\\\":1015},\\\"tailwind\\\",{\\\"_963\\\":964,\\\"_957\\\":1017,\\\"_24\\\":1018},\\\"watchPaths\\\",\\\"watchpaths\\\",{\\\"_963\\\":964,\\\"_957\\\":1020,\\\"_24\\\":1021},\\\"File Name Conventions\\\",\\\"file-name-conventions\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#appdirectory\\\\\\": 2, "#assetsbuilddirectory\\\\\\": 1, "#browsernodebuiltinspolyfill\\\\\\": 2, "#cachedirectory\\\\\\": 1, "#file-name-conventions\\\\\\": 1, "#future\\\\\\": 1, "#ignoredroutefiles\\\\\\": 1, "#postcss\\\\\\": 1, "#publicpath\\\\\\": 1, "#remixconfigjs\\\\\\": 1, "#routes\\\\\\": 1, "#server\\\\\\": 1, "#serverbuildpath\\\\\\": 1, "#serverconditions\\\\\\": 1, "#serverdependenciestobundle\\\\\\": 1, "#servermainfields\\\\\\": 1, "#serverminify\\\\\\": 1, "#servermoduleformat\\\\\\": 1, "#servernodebuiltinspolyfill\\\\\\": 2, "#serverplatform\\\\\\": 1, "#tailwind\\\\\\": 1, "#watchpaths\\\\\\": 1, "$\\": 1, "$rc": 3, "**/*": 2, "*/": 12, "*/\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 9, "--base03": 40, "--base05": 11, "--base08": 7, "--base09": 6, "--base0a": 16, "--base0b": 27, "--base0c": 24, "--base0d": 14, "--base0e": 24, "-1\\\\\\": 22, "-5": 2, "/$": 1, "/*": 1, "/**": 8, "//": 15, "//github": 2, "//interactive-remix-routing-v2": 1, "//npm": 3, "//postcss": 1, "//static": 2, "//tailwindcss": 1, "//twitter": 1, "//v2": 2, "/\\u003cspan": 3, "/^rehype": 1, "/^remark": 1, "/^unified": 1, "/app": 1, "/app\\u003c/span\\u003e\\\\\\": 1, "/assets/": 1, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/build/": 3, "/build/\\\\\\": 1, "/elsewhere": 1, "/elsewhere\\u003c/span\\u003e\\\\\\": 1, "/guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\": 1, "/guides/vite\\\\\\": 1, "/other-api/dev#remix-dev\\\\\\": 1, "/some/path/*": 3, "/some/path/*\\u003c/span\\u003e\\\\\\": 2, "/somewhere/cool/*": 1, "/start/future-flags#current-future-flags\\\\\\": 1, "/start/future-flags\\\\\\": 1, "/styling/css-imports\\\\\\": 1, "/vite-config\\\\\\": 1, "0===e": 1, "10": 43, "100": 1, "1000": 1, "1001": 1, "1002": 1, "1003": 1, "1004": 1, "1005": 1, "1006": 1, "1007": 1, "1008": 1, "1009": 1, "101": 1, "1010": 1, "1011": 1, "1012": 1, "1013": 1, "1014": 1, "1015": 2, "1016": 1, "1017": 1, "1018": 1, "1019": 1, "102": 1, "1020": 1, "1021": 1, "1022": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 5, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 5, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 5, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 3, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 3, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 2, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 2, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "1\\\\\\": 11, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 11, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 147, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 11, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 11, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 7, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 6, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 5, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 5, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "958": 1, "959": 1, "96": 1, "961": 1, "962": 1, "964": 21, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "976": 1, "977": 2, "978": 1, "979": 1, "98": 1, "980": 1, "981": 1, "982": 1, "983": 1, "984": 1, "985": 2, "986": 1, "987": 2, "988": 1, "989": 2, "99": 1, "990": 1, "991": 1, "992": 1, "993": 1, "994": 1, "995": 1, "996": 1, "997": 1, "998": 1, "999": 1, "9\\\\\\": 5, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 6, "@remix-run/": 1, "@remix-run/dev": 17, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "@sindresorhus/slugify": 2, "@type": 8, "\\\\\\": 212, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 7, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eif": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ewhen": 2, "\\\\n\\u003c/span\\u003e\\u003cspan": 60, "\\\\ndefaults": 1, "\\\\nrelative": 1, "\\n": 1, "\\u003c/code\\u003e": 16, "\\u003c/docs-info\\u003e\\u003c/p\\u003e\\": 1, "\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 11, "\\u003c/p\\u003e\\\\n\\u003ch2": 14, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003e\\u003ca": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efor": 1, "\\u003c/span\\u003e": 8, "\\u003c/span\\u003e@\\u003cspan": 8, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003c/span\\u003e\\u003cspan": 3, "\\u003ca": 18, "\\u003ccode\\u003e": 3, "\\u003ccode\\u003e@sindresorhus/slugify\\u003c/code\\u003e": 1, "\\u003ccode\\u003e\\\\\\": 10, "\\u003ccode\\u003eapp/routes\\u003c/code\\u003e": 2, "\\u003ccode\\u003eapp\\u003c/code\\u003e": 1, "\\u003ccode\\u003eexports\\u003c/code\\u003e\\\\nfield": 1, "\\u003ccode\\u003efalse\\u003c/code\\u003e": 1, "\\u003ccode\\u003efuture\\u003c/code\\u003e": 1, "\\u003ccode\\u003epackage": 1, "\\u003ccode\\u003eremix": 2, "\\u003ccode\\u003eservermoduleformat\\u003c/code\\u003e": 2, "\\u003ccode\\u003etailwindcss\\u003c/code\\u003e": 1, "\\u003ccode\\u003etrue\\u003c/code\\u003e": 2, "\\u003ccode\\u003eunified\\u003c/code\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 109, "\\u003e": 91, "\\u003e**/*": 2, "\\u003e*\\u003c/span\\u003e/": 3, "\\u003e/*": 1, "\\u003e/**": 8, "\\u003e//": 15, "\\u003e/assets/\\u003c/span\\u003e\\\\\\": 1, "\\u003e/build/\\u003c/span\\u003e\\\\\\": 2, "\\u003e/some/path/*\\u003c/span\\u003e\\\\\\": 1, "\\u003e/somewhere/cool/*\\u003c/span\\u003e\\\\\\": 1, "\\u003e=\\u003c/span\\u003e": 13, "\\u003e=\\u003e\\u003c/span\\u003e": 5, "\\u003e@sindresorhus/slugify\\u003c/span\\u003e\\\\\\": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eappdirectory\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eassetsbuilddirectory\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebrowsernodebuiltinspolyfill\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ecachedirectory\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003efile": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003efuture\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eignoredroutefiles\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003epostcss\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhether": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003epublicpath\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eremix": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroutes\\u003c/h2\\u003e\\\\n\\u003cp\\u003ea": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserver\\u003c/h2\\u003e\\\\n\\u003cp\\u003ea": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverbuildpath\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverconditions\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverdependenciestobundle\\u003c/h2\\u003e\\\\n\\u003cp\\u003ea": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eservermainfields\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverminify\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhether": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eservermoduleformat\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eservernodebuiltinspolyfill\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverplatform\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003etailwind\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhether": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ewatchpaths\\u003c/h2\\u003e\\\\n\\u003cp\\u003ean": 1, "\\u003e\\u003ca": 22, "\\u003e\\u003ccode\\u003e\\u003cspan": 11, "\\u003e\\u003ccode\\u003eappdirectory\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003ebrowsernodebuiltinspolyfill\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eservernodebuiltinspolyfill\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003cpre": 11, "\\u003e\\u003cspan": 46, "\\u003e^\\u003c/span\\u003e\\u003cspan": 3, "\\u003ean": 1, "\\u003eapp\\u003c/span\\u003e\\\\\\": 2, "\\u003eappdirectory\\u003c/span\\u003e": 2, "\\u003easync\\u003c/span\\u003e": 2, "\\u003ebuild/index": 2, "\\u003ecatchall": 2, "\\u003eclassic": 1, "\\u003ecss": 1, "\\u003ecurrent": 1, "\\u003edefineroutes\\u003c/span\\u003e": 4, "\\u003edilum": 1, "\\u003eempty\\u003c/span\\u003e\\\\\\": 2, "\\u003eesbuild-plugins-node-modules-polyfill\\u003c/a\\u003e": 2, "\\u003eexports\\u003c/span\\u003e": 13, "\\u003efalse\\u003c/span\\u003e": 2, "\\u003efuture": 1, "\\u003ehttps": 1, "\\u003eimport": 8, "\\u003ejspm\\u003c/a\\u003e": 2, "\\u003eminimatch\\u003c/a\\u003e": 1, "\\u003emodule\\u003c/span\\u003e": 8, "\\u003epostcss\\u003c/a\\u003e": 1, "\\u003epublic/build\\u003c/span\\u003e\\\\\\": 2, "\\u003erehype": 1, "\\u003erelative/path\\u003c/span\\u003e\\\\\\": 1, "\\u003eremark": 1, "\\u003eremix": 2, "\\u003ereturn\\u003c/span\\u003e": 3, "\\u003eroute\\u003c/span\\u003e": 6, "\\u003eroutes\\u003c/span\\u003e": 2, "\\u003esome/": 1, "\\u003esome/other/file\\u003c/span\\u003e\\\\\\": 1, "\\u003esome/route/file": 1, "\\u003etailwind": 1, "\\u003etrue\\u003c/span\\u003e": 4, "\\u003etype\\u003c/span\\u003e\\u003cspan": 8, "\\u003eunified": 1, "\\u003evite": 1, "\\u003ewatchpaths\\u003c/span\\u003e": 2, "_-b4drxahv": 1, "_1023\\": 1, "_1024\\": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 173, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 1, "_957\\": 22, "_960\\": 1, "_963\\": 21, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "a\\\\ncjs": 1, "able": 1, "about": 1, "absolute": 2, "accessibility\\": 1, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "addition": 4, "against": 1, "against\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "all": 8, "all\\\\\\": 1, "along": 2, "already": 2, "also": 10, "an": 11, "and": 23, "any": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 12, "app/routes": 2, "app\\\\\\": 2, "appconfig": 8, "appconfig\\u003c/span\\u003e": 8, "appdirectory": 8, "appdirectory\\": 2, "appdirectory\\\\\\": 1, "application": 1, "approach": 1, "are": 10, "argument": 3, "argument\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "aria-hidden=\\\\\\": 22, "array": 4, "as": 5, "asked": 1, "asset": 3, "assets": 4, "assetsbuilddirectory": 5, "assetsbuilddirectory\\": 2, "assetsbuilddirectory\\\\\\": 1, "async": 6, "at": 1, "attrs\\": 1, "available": 2, "await\\": 1, "aware": 2, "awesome": 2, "b=document": 1, "backend": 3, "basename": 1, "be": 23, "be\\\\nable": 1, "be\\\\nignored": 1, "becomes": 2, "been": 2, "before": 3, "both": 2, "breadcrumbs": 3, "break": 1, "breaking": 2, "breeze": 1, "browser": 13, "browsernodebuiltinspolyfill": 4, "browsernodebuiltinspolyfill\\": 2, "browsernodebuiltinspolyfill\\\\\\": 1, "buffer": 8, "build": 20, "build/index": 4, "built": 1, "bundle": 4, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 2, "by": 4, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "cache": 1, "cache\\\\\\": 1, "cachedirectory": 1, "cachedirectory\\": 2, "cachedirectory\\\\\\": 1, "caching": 2, "call": 2, "callback": 2, "calling": 2, "can": 13, "catch": 1, "catchall": 4, "changelog": 2, "changelog\\": 1, "changes": 2, "children\\": 1, "cjs": 5, "cjs\\\\\\": 2, "class=\\\\\\": 121, "classic": 1, "cli": 5, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "code": 4, "codeblock-line\\\\\\": 99, "colocate": 2, "color": 169, "com/assets/": 1, "com/assets/\\u003c/span\\u003e\\\\\\": 1, "com/dilumsanjaya\\\\\\": 1, "com/docs/functions-and-directives\\\\\\": 1, "com/jspm/jspm-core\\\\\\": 2, "common": 2, "community": 3, "community\\": 1, "compile": 2, "compiler": 1, "compiler\\u003c/a\\u003e": 1, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "conditions": 2, "config": 45, "config\\u003c/a\\u003e": 1, "configuration": 6, "configuration\\": 1, "configure": 4, "configured": 4, "console": 1, "constraints": 2, "constraints\\": 1, "consume": 2, "consuming": 4, "contributing": 3, "contributing\\": 1, "controller": 2, "convention": 2, "conventions": 7, "conventions\\": 2, "conventions\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethere": 1, "conventionson": 1, "conventionsremix": 1, "cookies\\": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 24, "css/test": 1, "css\\": 1, "css\\u003c/span\\u003e\\\\\\": 2, "current": 1, "custom": 5, "custom\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "d=c": 2, "data": 16, "data-code-block=\\\\\\": 11, "data-filename=\\\\\\": 22, "data-highlight=\\\\\\": 6, "data-lang=\\\\\\": 22, "data-line-number=\\\\\\": 99, "data-line-numbers=\\\\\\": 22, "data=": 1, "data\\": 2, "default": 1, "default\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "defaults": 22, "defaults\\\\nto": 1, "defer": 2, "defer\\": 1, "deferred": 1, "defined": 1, "defined\\\\nusing": 1, "defineroutes": 6, "defines": 2, "defining": 2, "dependencies": 6, "dependency": 3, "deployed": 6, "deployment": 4, "deployment\\": 2, "description\\": 1, "determines": 2, "dev": 4, "dev\\u003c/a\\u003e": 1, "development": 7, "dilum": 1, "directives": 1, "directives\\u003c/a\\u003e": 1, "directories": 4, "directory": 9, "directory\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 5, "doc\\": 1, "docs/file-conventions/remix-config": 1, "docs/file-conventions/remix-config\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsremix": 1, "document": 1, "does": 2, "domain": 2, "done": 1, "dynamic": 1, "dynamic\\\\nimports": 1, "e--": 1, "e=0": 1, "ecosystem": 2, "effect": 1, "effect\\\\nimports\\u003c/a\\u003e": 1, "either": 5, "else": 2, "empty": 6, "enabled": 2, "end": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entry": 6, "entrypoint": 2, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "esbuild-plugins-node-modules-polyfill": 2, "esm": 5, "esm-only": 4, "esm\\\\\\": 3, "everything": 1, "example": 4, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "exports": 14, "extension": 4, "extract": 2, "extract\\": 1, "f=a": 1, "false": 6, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "few": 4, "field": 1, "fields": 2, "file": 32, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "file-name-conventions\\": 1, "file-name-conventions\\\\\\": 1, "file\\\\nshould": 1, "filename": 2, "filename\\": 1, "filenames": 2, "files": 7, "files\\": 1, "filesystem": 2, "find": 2, "first": 2, "firstchild": 2, "flags": 8, "flags\\": 1, "flags\\u003c/a\\u003e": 2, "flow": 2, "flow\\": 1, "for": 21, "form": 11, "form\\": 1, "format": 2, "found": 3, "frequently": 1, "from": 8, "frontend": 2, "frontend\\": 1, "fs": 4, "fullstack": 3, "function": 5, "functions": 2, "future": 17, "future\\": 1, "future\\\\\\": 1, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "globals": 4, "globs": 2, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "handle": 2, "handle\\": 1, "handler": 1, "handler\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "handling": 4, "handling\\": 2, "has": 4, "hascontent\\": 1, "having": 2, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 3, "here": 3, "hidden\\": 1, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hosting": 2, "hot": 3, "how": 5, "href=\\\\\\": 41, "html": 1, "html\\": 1, "https": 12, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 22, "icon-link\\\\\\": 22, "id=\\\\\\": 22, "if": 22, "ignored": 1, "ignoredroutefiles": 5, "ignoredroutefiles\\": 2, "ignoredroutefiles\\\\\\": 1, "ignoring": 1, "ignoring\\\\ncss/test": 1, "im/esbuild-plugins-node-modules-polyfill\\\\\\": 2, "im/minimatch\\\\\\": 1, "import": 13, "import\\\\\\": 1, "imports": 6, "imports\\": 2, "in": 39, "inc": 1, "include": 4, "included": 1, "included\\\\nin": 1, "index": 3, "initial": 1, "insertbefore": 1, "inside": 2, "installed": 2, "instead": 2, "integrating": 1, "interactions": 1, "into": 4, "introduction": 1, "is": 33, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 4, "iterative": 1, "javascript": 2, "javascript\\": 1, "javascript\\\\\\": 22, "js": 34, "js\\": 2, "js\\\\\\": 23, "js\\u003c/code\\u003e": 5, "js\\u003c/h1\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003e\\u003ccode\\u003eremix": 1, "js\\u003c/span\\u003e\\\\\\": 3, "jsgetting": 1, "json": 4, "json\\": 1, "json\\u003c/code\\u003e": 1, "jspm": 6, "key": 4, "know": 1, "lazy": 3, "learning": 1, "let": 5, "lets": 2, "licensed": 1, "like": 2, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "list": 4, "livereload": 2, "livereload\\": 1, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "made": 2, "main": 5, "main\\\\\\": 2, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "map": 2, "match": 4, "matches": 2, "math": 1, "may": 6, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "merged": 2, "meta": 4, "meta\\": 2, "might": 2, "migrating": 4, "minify": 2, "minimatch": 1, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 22, "module\\": 1, "module\\\\\\": 2, "moduleaction": 2, "modules": 10, "modules\\": 3, "most": 1, "name": 5, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 3, "nest": 2, "nesting": 2, "netlify": 1, "network": 3, "neutral": 1, "neutral\\\\\\": 1, "new": 2, "new\\": 1, "nextsibling": 2, "node": 10, "node\\\\\\": 2, "nodetype": 1, "noindex\\": 1, "non-node": 4, "not": 9, "null": 1, "number": 1, "of": 27, "on": 5, "once": 1, "one": 1, "only": 4, "open": 1, "opt-into": 2, "optimization": 2, "optimization\\": 1, "option": 4, "optional": 2, "options": 2, "or": 12, "or\\\\n\\u003ccode\\u003e\\\\\\": 1, "order": 4, "order\\": 1, "org\\\\\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "output": 2, "package": 1, "packages": 6, "pageappdirectoryassetsbuilddirectorybrowsernodebuiltinspolyfillcachedirectoryfutureignoredroutefilespublicpathpostcssroutesserverserverbuildpathserverconditionsserverdependenciestobundleservermainfieldsserverminifyservermoduleformatservernodebuiltinspolyfillserverplatformtailwindwatchpathsfile": 2, "param": 2, "param\\": 1, "parent": 2, "parentnode": 2, "parse": 1, "path": 18, "path\\u003c/span\\u003e\\\\\\": 1, "path\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "patterns": 2, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "platform": 2, "platforms": 4, "please": 2, "plugin": 2, "polyfill": 4, "polyfill\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "polyfills": 12, "positions": 2, "postcss": 8, "postcss\\": 2, "postcss\\\\\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "prefix": 2, "present": 4, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "process": 2, "production": 2, "progressive": 3, "project": 5, "provide": 8, "provided": 6, "public/build": 3, "public/build\\\\\\": 1, "publicpath": 9, "publicpath\\": 2, "publicpath\\\\\\": 1, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "rather": 2, "re": 2, "react": 10, "react-router-scroll-positions": 1, "readablestream": 1, "reading": 2, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regex": 2, "regular": 3, "related": 1, "relative": 17, "relative/path": 1, "released": 2, "relevant": 2, "remix": 57, "remix\\": 2, "remixconfigjs\\\\\\": 1, "removechild": 2, "removeitem": 1, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resolving": 4, "resource": 3, "resources": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 3, "rocking": 1, "rolling": 1, "root": 7, "root\\": 1, "route": 24, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 9, "router\\": 2, "routes": 18, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 3, "routes\\\\\\": 1, "run": 2, "run/docs/file-conventions/remix-config": 1, "run\\": 1, "running": 3, "runtimes": 3, "s\\\\nmain": 1, "sanjaya": 1, "sanjaya\\u003c/a\\u003e": 1, "say": 2, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "second": 2, "section": 2, "see": 2, "separate": 2, "serve": 2, "server": 50, "server\\": 4, "server\\\\\\": 1, "serverbuildpath": 5, "serverbuildpath\\": 2, "serverbuildpath\\\\\\": 1, "serverconditions": 1, "serverconditions\\": 2, "serverconditions\\\\\\": 1, "serverdependenciestobundle": 4, "serverdependenciestobundle\\": 2, "serverdependenciestobundle\\\\\\": 1, "servermainfields": 1, "servermainfields\\": 2, "servermainfields\\\\\\": 1, "serverminify": 1, "serverminify\\": 2, "serverminify\\\\\\": 1, "servermoduleformat": 3, "servermoduleformat\\": 2, "servermoduleformat\\\\\\": 1, "servernodebuiltinspolyfill": 4, "servernodebuiltinspolyfill\\": 2, "servernodebuiltinspolyfill\\\\\\": 1, "serverplatform": 1, "serverplatform\\": 2, "serverplatform\\\\\\": 1, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 7, "set\\\\n\\u003ccode\\u003eserverdependenciestobundle\\u003c/code\\u003e": 1, "sets": 2, "shopify": 1, "should": 11, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "side": 2, "simplifying": 1, "single": 5, "siteurl\\": 1, "slash": 2, "slice": 1, "slug\\": 1, "some/": 1, "some/other/file": 1, "some/route/file": 1, "spa": 3, "specified": 2, "specify": 2, "ssr": 1, "stack": 2, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "static": 4, "still": 2, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "string": 2, "style=\\\\\\": 169, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 5, "support\\": 1, "system": 2, "tabindex=\\\\\\": 22, "tailwind": 6, "tailwind\\": 2, "tailwind\\\\\\": 1, "tailwindcss": 1, "targeting": 6, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "than": 2, "thank": 1, "that": 12, "the": 80, "there": 1, "these": 4, "things": 2, "this": 26, "those": 4, "through": 1, "title\\": 1, "tls": 2, "tls\\": 1, "to": 115, "to\\\\n\\u003ccode\\u003e": 2, "to\\\\n\\u003ccode\\u003e\\\\\\": 3, "to\\\\nfiles": 1, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "trailing": 2, "transpiled": 2, "treated": 2, "true": 12, "true\\\\\\": 50, "try": 1, "ts": 3, "ts\\": 1, "ts\\u003c/code\\u003e": 1, "tsx": 2, "tsx\\u003c/span\\u003e\\\\\\": 2, "tutorial": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 2, "ui\\": 1, "under": 1, "understand": 2, "unified": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 4, "use": 16, "use\\\\neither": 1, "use\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "useful": 4, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "uses": 2, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 12, "using\\\\na": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "valid": 1, "valid\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 171, "variables": 2, "variables\\": 1, "via": 12, "view": 2, "visualization": 1, "visualization\\u003c/a\\u003e": 1, "vite": 7, "vite\\": 1, "vite\\u003c/a\\u003e": 1, "vs": 6, "walk": 1, "want": 8, "watch": 2, "watchpaths": 3, "watchpaths\\": 2, "watchpaths\\\\\\": 1, "way": 1, "we": 4, "well": 2, "when": 21, "whether": 3, "which": 6, "while": 5, "why": 1, "will": 12, "window": 11, "wish": 4, "with": 10, "without": 2, "work": 2, "would": 2, "writes": 2, "writes\\": 1, "you": 31, "your": 20, "your\\\\napplication": 1, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 8107 }, { "id": "dce449c8864fba1ca080f41d", "doc_id": "a94cc1e883bc0b07668b7bdf", "title": "render-to-stream", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/rendering/render-to-stream.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/render-to-stream.json", "content": "--- title: renderToStream use_cases: \u003e- streaming ssr, progressive rendering, async data loading, suspense boundaries, large page optimization tags: - ssr - streaming - async - suspense - performance version: '1.0' description: \u003e- Stream HTML progressively with renderToStream. Render content synchronously then stream async resources as they complete for faster loading. --- ```ts import { renderToStream } from \"solid-js/web\" function renderToStream\u003cT\u003e( fn: () =\u003e T, options?: { nonce?: string renderId?: string onCompleteShell?: () =\u003e void onCompleteAll?: () =\u003e void } ): { pipe: (writable: { write: (v: string) =\u003e void }) =\u003e void pipeTo: (writable: WritableStream) =\u003e void } ``` This method renders to a stream. It renders the content synchronously including any Suspense fallback placeholders, and then continues to stream the data and HTML from any async resource as it completes. ```ts // node renderToStream(App).pipe(res) // web stream const { readable, writable } = new TransformStream() renderToStream(App).pipeTo(writable) ``` `onCompleteShell` fires when synchronous rendering is complete before writing the first flush to the stream out to the browser. `onCompleteAll` is called when all server Suspense boundaries have settled. `renderId` is used to namespace renders when having multiple top level roots. :::note This API replaces the previous pipeToWritable and pipeToNodeWritable APIs. ::: ## Options | Name | Type | Description | | --------------- | ---------- | ---------------------------------------------------------------- | | nonce | string | The nonce to use for inline scripts. | | renderId | string | The id to use for this render. | | onCompleteShell | () =\u003e void | A callback that fires when the shell is complete. | | onCompleteAll | () =\u003e void | A callback that fires when all Suspense boundaries have settled. |", "term_freq": { "##": 1, "---": 2, "----------": 1, "---------------": 1, "----------------------------------------------------------------": 1, "//": 2, "//github": 1, "=\u003e": 8, "\u003e-": 2, "all": 2, "and": 3, "any": 2, "api": 1, "apis": 1, "app": 2, "as": 2, "async": 4, "before": 1, "boundaries": 3, "browser": 1, "callback": 2, "called": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/rendering/render-to-stream": 1, "complete": 3, "completes": 1, "const": 1, "content": 2, "continues": 1, "data": 2, "description": 2, "fallback": 1, "faster": 1, "fires": 3, "first": 1, "flush": 1, "fn": 1, "for": 3, "from": 2, "function": 1, "github-document": 1, "have": 2, "having": 1, "html": 2, "https": 1, "id": 1, "import": 1, "including": 1, "inline": 1, "is": 4, "it": 2, "large": 1, "level": 1, "loading": 2, "mdx": 1, "method": 1, "multiple": 1, "name": 1, "namespace": 1, "new": 1, "node": 1, "nonce": 3, "note": 1, "oncompleteall": 3, "oncompleteshell": 3, "optimization": 1, "options": 2, "out": 1, "page": 1, "performance": 1, "pipe": 2, "pipeto": 2, "pipetonodewritable": 1, "pipetowritable": 1, "placeholders": 1, "previous": 1, "progressive": 1, "progressively": 1, "readable": 1, "render": 2, "render-to-stream": 1, "renderid": 3, "rendering": 2, "renders": 3, "rendertostream": 5, "rendertostream\u003ct\u003e": 1, "replaces": 1, "res": 1, "resource": 1, "resources": 1, "roots": 1, "scripts": 1, "server": 1, "settled": 2, "shell": 1, "solid-js/web": 1, "ssr": 2, "stream": 6, "streaming": 2, "string": 5, "suspense": 5, "synchronous": 1, "synchronously": 2, "tags": 1, "that": 2, "the": 9, "then": 2, "they": 1, "this": 3, "title": 1, "to": 7, "top": 1, "transformstream": 1, "ts": 2, "type": 1, "use": 2, "use_cases": 1, "used": 1, "version": 1, "void": 7, "web": 1, "when": 5, "with": 1, "writable": 4, "writablestream": 1, "write": 1, "writing": 1 }, "length": 234 }, { "id": "3824dbdfcb844e71b9bb5db0", "doc_id": "92446eaffcb765afeb199a9c", "title": "render-to-string-async", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/rendering/render-to-string-async.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/render-to-string-async.json", "content": "--- title: renderToStringAsync use_cases: \u003e- ssr with async data, suspense resolution, complete page rendering, data serialization, seo optimization tags: - ssr - async - suspense - serialization - rendering version: '1.0' description: \u003e- Render complete HTML with async data using renderToStringAsync. Waits for all Suspense boundaries before returning serialized results. --- ```ts import { renderToStringAsync } from \"solid-js/web\" function renderToStringAsync\u003cT\u003e( fn: () =\u003e T, options?: { timeoutMs?: number renderId?: string nonce?: string } ): Promise\u003cstring\u003e ``` Same as `renderToString` except that it will wait for all `\u003cSuspense\u003e` boundaries to resolve before returning the results. Resource data is automatically serialized into the script tag and will be hydrated on client load. `renderId` is used to namespace renders when having multiple top level roots. ```ts const html = await renderToStringAsync(App) ``` ## Options | Name | Type | Description | | ----------- | -------- | -------------------------------------------------------------------------------------------- | | `timeoutMs` | `number` | The number of milliseconds to wait for a `\u003cSuspense\u003e` boundary to resolve before timing out. | | `renderId` | `string` | The id to use for the render. | | `nonce` | `string` | The nonce to use for the script tag. |", "term_freq": { "##": 1, "---": 2, "--------": 1, "-----------": 1, "--------------------------------------------------------------------------------------------": 1, "//github": 1, "\u003csuspense\u003e": 2, "=\u003e": 1, "\u003e-": 2, "all": 2, "and": 1, "app": 1, "as": 1, "async": 3, "automatically": 1, "await": 1, "be": 1, "before": 3, "boundaries": 2, "boundary": 1, "client": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/rendering/render-to-string-async": 1, "complete": 2, "const": 1, "data": 4, "description": 2, "except": 1, "fn": 1, "for": 5, "from": 1, "function": 1, "github-document": 1, "having": 1, "html": 2, "https": 1, "hydrated": 1, "id": 1, "import": 1, "into": 1, "is": 2, "it": 1, "level": 1, "load": 1, "mdx": 1, "milliseconds": 1, "multiple": 1, "name": 1, "namespace": 1, "nonce": 3, "number": 3, "of": 1, "on": 1, "optimization": 1, "options": 2, "out": 1, "page": 1, "promise\u003cstring\u003e": 1, "render": 2, "render-to-string-async": 1, "renderid": 3, "rendering": 2, "renders": 1, "rendertostring": 1, "rendertostringasync": 4, "rendertostringasync\u003ct\u003e": 1, "resolution": 1, "resolve": 2, "resource": 1, "results": 2, "returning": 2, "roots": 1, "same": 1, "script": 2, "seo": 1, "serialization": 2, "serialized": 2, "solid-js/web": 1, "ssr": 2, "string": 4, "suspense": 3, "tag": 2, "tags": 1, "that": 1, "the": 7, "timeoutms": 2, "timing": 1, "title": 1, "to": 6, "top": 1, "ts": 2, "type": 1, "use": 2, "use_cases": 1, "used": 1, "using": 1, "version": 1, "wait": 2, "waits": 1, "when": 1, "will": 2, "with": 2 }, "length": 163 }, { "id": "cd035d88911926788fdaef6f", "doc_id": "8018923d4113e472e785aa0e", "title": "render-to-string", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/rendering/render-to-string.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/render-to-string.json", "content": "--- title: renderToString use_cases: \u003e- basic ssr, static site generation, synchronous rendering, progressive hydration, seo pages tags: - ssr - rendering - hydration - synchronous - static version: '1.0' description: \u003e- Generate HTML strings synchronously with renderToString. Perfect for SSR with progressive hydration and static site generation needs. --- ```ts import { renderToString } from \"solid-js/web\" function renderToString\u003cT\u003e( fn: () =\u003e T, options?: { nonce?: string renderId?: string } ): string ``` Renders to a string synchronously. The function also generates a script tag for progressive hydration. Options include eventNames to listen to before the page loads and play back on hydration, and nonce to put on the script tag. `renderId` is used to namespace renders when having multiple top level roots. ```ts const html = renderToString(App) ``` ## Options | Name | Type | Description | | ---------- | -------- | ------------------------------------ | | `nonce` | `string` | The nonce to use for the script tag. | | `renderId` | `string` | The id to use for the script tag. |", "term_freq": { "##": 1, "---": 2, "--------": 1, "----------": 1, "------------------------------------": 1, "//github": 1, "=\u003e": 1, "\u003e-": 2, "also": 1, "and": 3, "app": 1, "back": 1, "basic": 1, "before": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/rendering/render-to-string": 1, "const": 1, "description": 2, "eventnames": 1, "fn": 1, "for": 4, "from": 1, "function": 2, "generate": 1, "generates": 1, "generation": 2, "github-document": 1, "having": 1, "html": 2, "https": 1, "hydration": 5, "id": 1, "import": 1, "include": 1, "is": 1, "level": 1, "listen": 1, "loads": 1, "mdx": 1, "multiple": 1, "name": 1, "namespace": 1, "needs": 1, "nonce": 4, "on": 2, "options": 3, "page": 1, "pages": 1, "perfect": 1, "play": 1, "progressive": 3, "put": 1, "render-to-string": 1, "renderid": 3, "rendering": 2, "renders": 2, "rendertostring": 4, "rendertostring\u003ct\u003e": 1, "roots": 1, "script": 4, "seo": 1, "site": 2, "solid-js/web": 1, "ssr": 3, "static": 3, "string": 6, "strings": 1, "synchronous": 2, "synchronously": 2, "tag": 4, "tags": 1, "the": 7, "title": 1, "to": 7, "top": 1, "ts": 2, "type": 1, "use": 2, "use_cases": 1, "used": 1, "version": 1, "when": 1, "with": 2 }, "length": 145 }, { "id": "15c5f874b523f100d785f507", "doc_id": "11f1ed15519f1c0f5562e354", "title": "render", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/rendering/render.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/render.json", "content": "--- title: render use_cases: \u003e- app initialization, mounting components, spa entry point, client-side rendering, dom manipulation tags: - mounting - initialization - spa - dom - client - entry version: '1.0' description: \u003e- Mount your Solid app to the DOM with render. The essential browser entry point for initializing and disposing client-side applications. --- ```ts import { render } from \"solid-js/web\" import type { JSX } from \"solid-js\" import type { MountableElement } from \"solid-js/web\" function render( code: () =\u003e JSX.Element, element: MountableElement ): () =\u003e void ``` This is the browser app entry point. Provide a top-level component function and an element to mount to. It is recommended this element be empty: while `render` will just append children, the returned dispose function will remove all children. ```ts const dispose = render(App, document.getElementById(\"app\")) // or const dispose = render(() =\u003e \u003cApp /\u003e, document.getElementById(\"app\")) ``` It's important that the first argument is a function: do not pass JSX directly (as in `render(\u003cApp/\u003e, ...)`), because this will call App before render can set up a root to track signal dependencies within App. ## Parameters | Argument | Type | Description | | -------------------- | ------------------- | ----------------------------------------------- | | code | `() =\u003e JSX.Element` | Function that returns the application code. | | element | MountableElement | DOM Element to mount the application to |", "term_freq": { "##": 1, "---": 2, "-------------------": 1, "--------------------": 1, "-----------------------------------------------": 1, "//": 1, "//github": 1, "/\u003e": 1, "\u003capp": 1, "\u003capp/\u003e": 1, "=\u003e": 4, "\u003e-": 2, "all": 1, "an": 1, "and": 2, "app": 8, "append": 1, "application": 2, "applications": 1, "argument": 2, "as": 1, "be": 1, "because": 1, "before": 1, "browser": 2, "call": 1, "can": 1, "children": 2, "client": 1, "client-side": 2, "code": 3, "com/solidjs/solid-docs/blob/head/src/routes/reference/rendering/render": 1, "component": 1, "components": 1, "const": 2, "dependencies": 1, "description": 2, "directly": 1, "dispose": 3, "disposing": 1, "do": 1, "document": 2, "dom": 4, "element": 7, "empty": 1, "entry": 4, "essential": 1, "first": 1, "for": 1, "from": 3, "function": 5, "getelementbyid": 2, "github-document": 1, "https": 1, "import": 3, "important": 1, "in": 1, "initialization": 2, "initializing": 1, "is": 3, "it": 2, "jsx": 4, "just": 1, "manipulation": 1, "mdx": 1, "mount": 3, "mountableelement": 3, "mounting": 2, "not": 1, "or": 1, "parameters": 1, "pass": 1, "point": 3, "provide": 1, "recommended": 1, "remove": 1, "render": 10, "rendering": 1, "returned": 1, "returns": 1, "root": 1, "set": 1, "signal": 1, "solid": 1, "solid-js": 1, "solid-js/web": 2, "spa": 2, "tags": 1, "that": 2, "the": 7, "this": 3, "title": 1, "to": 6, "top-level": 1, "track": 1, "ts": 2, "type": 3, "up": 1, "use_cases": 1, "version": 1, "void": 1, "while": 1, "will": 3, "with": 1, "within": 1, "your": 1 }, "length": 196 }, { "id": "182c5ba3a1449d9132910fa8", "doc_id": "81b6f5fa8412815129caa411", "title": "request-events", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/advanced/request-events.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/request-events.json", "content": "--- title: Request events use_cases: \u003e- server context access, local data storage, request handling, server functions, event access tags: - events - server - context - locals - requests - functions version: '1.0' description: \u003e- Access request events and local context in SolidStart server functions. Type-safe locals and native event handling for server code. --- Request events in SolidStart are retrieved using the [`getRequestEvent`](/reference/server-utilities/get-request-event) from `@solidjs/web`. These requests happen anywhere on the server. ## Locals SolidStart uses `event.locals` to pass around a local context where needed. When adding fields to `event.locals`, the fields can be typed: ```tsx title=\"global.d.ts\" /// \u003creference types=\"@solidjs/start/env\" /\u003e declare module App { interface RequestEventLocals { /** * Declare your getRequestEvent().locals here */ } } ``` ## nativeEvent Sometimes access is still needed to the underlying event from [Vinxi](https://vinxi.vercel.app/). This can be accessed that using the `.nativeEvent` property, which is the underlying H3Event used, and can be passed to the helpers available in the ecosystem. Note that Vinxi HTTP helpers _do not_ treeshake so you can only import them in files that do not contain client or isomorphic code. Many of these events support Async Local Storage so this may not be needed.", "term_freq": { "##": 2, "*/": 1, "---": 2, "/**": 1, "///": 1, "//github": 1, "//vinxi": 1, "/\u003e": 1, "/reference/server-utilities/get-request-event": 1, "\u003creference": 1, "\u003e-": 2, "@solidjs/start/env": 1, "@solidjs/web": 1, "_do": 1, "access": 4, "accessed": 1, "adding": 1, "and": 3, "anywhere": 1, "app": 1, "app/": 1, "are": 1, "around": 1, "async": 1, "available": 1, "be": 4, "can": 4, "client": 1, "code": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/advanced/request-events": 1, "contain": 1, "context": 4, "data": 1, "declare": 2, "description": 1, "do": 1, "ecosystem": 1, "event": 5, "events": 5, "fields": 2, "files": 1, "for": 1, "from": 2, "functions": 3, "getrequestevent": 2, "github-document": 1, "global": 1, "h3event": 1, "handling": 2, "happen": 1, "helpers": 2, "here": 1, "http": 1, "https": 2, "import": 1, "in": 4, "interface": 1, "is": 2, "isomorphic": 1, "local": 4, "locals": 6, "many": 1, "may": 1, "mdx": 1, "module": 1, "native": 1, "nativeevent": 2, "needed": 3, "not": 2, "not_": 1, "note": 1, "of": 1, "on": 1, "only": 1, "or": 1, "pass": 1, "passed": 1, "property": 1, "request": 4, "request-events": 1, "requesteventlocals": 1, "requests": 2, "retrieved": 1, "server": 6, "so": 2, "solidstart": 3, "sometimes": 1, "still": 1, "storage": 2, "support": 1, "tags": 1, "that": 3, "the": 8, "them": 1, "these": 2, "this": 2, "title": 1, "title=": 1, "to": 4, "treeshake": 1, "ts": 1, "tsx": 1, "type-safe": 1, "typed": 1, "types=": 1, "underlying": 2, "use_cases": 1, "used": 1, "uses": 1, "using": 2, "vercel": 1, "version": 1, "vinxi": 2, "when": 1, "where": 1, "which": 1, "you": 1, "your": 1 }, "length": 199 }, { "id": "53be6076ae3f60a71d6b3204", "doc_id": "e05a7cee7291ecbc1e1b739b", "title": "return-responses", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/advanced/return-responses.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/return-responses.json", "content": "--- title: Returning responses use_cases: \u003e- server function responses, error handling, response types, api responses, typescript typing tags: - responses - server - functions - typescript - errors - api version: '1.0' description: \u003e- Return typed Response objects from server functions. Handle redirects, reloads, and JSON responses with proper TypeScript support. --- In SolidStart, it is possible to return a Response object from a server function. [`solid-router`](/solid-router) knows how to handle certain responses with its [`query`](/solid-router/reference/data-apis/query) and [`action`](/solid-router/reference/data-apis/action) APIs. For TypeScript, when returning a response using `solid-router`'s `redirect`, `reload`, or `json` helpers, they will not impact the return value of the server function. While we suggest depending on the type of the function to handle errors differently, you can always return or throw a response. ## Examples In the following example, the `hello` function will return a value of type `Promise\u003c{ hello: string }\u003e`: ```tsx import { json } from \"@solidjs/router\"; import { GET } from \"@solidjs/start\"; const hello = GET(async (name: string) =\u003e { \"use server\"; return json( { hello: new Promise\u003cstring\u003e((r) =\u003e setTimeout(() =\u003e r(name), 1000)) }, { headers: { \"cache-control\": \"max-age=60\" } } ); }); ``` However, in this example, since `redirect` and `reload` return `never` as their type, `getUser` can only return a value of type `Promise\u003cUser\u003e`: ```tsx { 4, 10, 14} export async function getUser() { \"use server\"; const session = await getSession(); const userId = session.data.userId; if (userId === undefined) return redirect(\"/login\"); try { const user: User = await db.user.findUnique({ where: { id: userId } }); // throwing can be awkward. if (!user) return redirect(\"/login\"); return user; } catch { // do stuff throw redirect(\"/login\"); } } ```", "term_freq": { "##": 1, "---": 2, "//": 2, "//github": 1, "/login": 3, "/solid-router": 1, "/solid-router/reference/data-apis/action": 1, "/solid-router/reference/data-apis/query": 1, "10": 1, "1000": 1, "14": 1, "===": 1, "=\u003e": 3, "\u003e-": 2, "@solidjs/router": 1, "@solidjs/start": 1, "action": 1, "always": 1, "and": 3, "api": 2, "apis": 1, "as": 1, "async": 2, "await": 2, "awkward": 1, "be": 1, "cache-control": 1, "can": 3, "catch": 1, "certain": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/advanced/return-responses": 1, "const": 4, "data": 1, "db": 1, "depending": 1, "description": 1, "differently": 1, "do": 1, "error": 1, "errors": 2, "example": 2, "examples": 1, "export": 1, "findunique": 1, "following": 1, "for": 1, "from": 4, "function": 6, "functions": 2, "get": 2, "getsession": 1, "getuser": 2, "github-document": 1, "handle": 3, "handling": 1, "headers": 1, "hello": 4, "helpers": 1, "how": 1, "however": 1, "https": 1, "id": 1, "if": 2, "impact": 1, "import": 2, "in": 3, "is": 1, "it": 1, "its": 1, "json": 4, "knows": 1, "max-age=60": 1, "mdx": 1, "name": 2, "never": 1, "new": 1, "not": 1, "object": 1, "objects": 1, "of": 4, "on": 1, "only": 1, "or": 2, "possible": 1, "promise\u003c": 1, "promise\u003cstring\u003e": 1, "promise\u003cuser\u003e": 1, "proper": 1, "query": 1, "redirect": 5, "redirects": 1, "reload": 2, "reloads": 1, "response": 5, "responses": 6, "return": 11, "return-responses": 1, "returning": 2, "server": 7, "session": 2, "settimeout": 1, "since": 1, "solid-router": 2, "solidstart": 1, "string": 2, "stuff": 1, "suggest": 1, "support": 1, "tags": 1, "the": 6, "their": 1, "they": 1, "this": 1, "throw": 2, "throwing": 1, "title": 1, "to": 3, "try": 1, "tsx": 2, "type": 4, "typed": 1, "types": 1, "typescript": 4, "typing": 1, "undefined": 1, "use": 2, "use_cases": 1, "user": 5, "userid": 4, "using": 1, "value": 3, "version": 1, "we": 1, "when": 1, "where": 1, "while": 1, "will": 2, "with": 2, "you": 1 }, "length": 247 }, { "id": "3553e7493afa52f250c6b52d", "doc_id": "0d261abfd8c636473ac51300", "title": "revalidate", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/revalidate.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/revalidate.json", "content": "--- title: revalidate use_cases: \u003e- refresh data, invalidate cache, polling, real-time updates, manual refetch, stale data tags: - revalidate - cache - refresh - invalidation - polling - refetch version: \"1.0\" description: \u003e- Manually revalidate cached queries to refresh stale data, implement polling, or trigger updates after mutations in SolidJS. --- The `revalidate` function triggers revalidation of [queries](/solid-router/data-fetching/queries) by their keys. Each query with active subscribers re-executes and updates its dependents; queries without subscribers are marked stale but don't execute until subscribed. ## Import ```tsx import { revalidate } from \"@solidjs/router\"; ``` ## Type ```tsx function revalidate( key?: string | string[] | void, force?: boolean ): Promise\u003cvoid\u003e; ``` ## Parameters ### `key` - **Type:** `string | string[] | void` - **Required:** No The query key or array of query keys to revalidate. If not provided, all queries on the current page are revalidated. ### `force` - **Type:** `boolean` - **Required:** No - **Default:** `true` When `true`, clears the internal cache used for deduplication. When `false`, allows cached data to be reused if available. ## Return value `revalidate` returns a `Promise` that resolves when the revalidation transition completes. ## Examples ### Basic usage ```tsx import { query, createAsync, revalidate } from \"@solidjs/router\"; const getUserQuery = query(async () =\u003e { // ... Fetches user data. return { name: \"John\" }; }, \"user\"); function UserProfile() { const user = createAsync(() =\u003e getUserQuery()); function refreshUser() { revalidate(getUserQuery.key); } return ( \u003cdiv\u003e \u003cbutton onClick={refreshUser}\u003eRefresh\u003c/button\u003e \u003cp\u003e{user()?.name}\u003c/p\u003e \u003c/div\u003e ); } ``` ### Revalidating multiple queries ```tsx import { query, revalidate } from \"@solidjs/router\"; const getUsersQuery = query(async () =\u003e { // ... Fetches users. }, \"users\"); const getPostsQuery = query(async () =\u003e { // ... Fetches posts. }, \"posts\"); function refreshAll() { revalidate([getUsersQuery.key, getPostsQuery.key]); } ``` ## Related - [`query`](/solid-router/reference/data-apis/query) - [`createAsync`](/solid-router/reference/data-apis/create-async)", "term_freq": { "##": 6, "###": 4, "**": 5, "**default": 1, "**required": 2, "**type": 2, "---": 2, "//": 3, "//github": 1, "/solid-router/data-fetching/queries": 1, "/solid-router/reference/data-apis/create-async": 1, "/solid-router/reference/data-apis/query": 1, "\u003c/div\u003e": 1, "\u003c/p\u003e": 1, "\u003cbutton": 1, "\u003cdiv\u003e": 1, "\u003cp\u003e": 1, "=\u003e": 4, "\u003e-": 2, "\u003erefresh\u003c/button\u003e": 1, "@solidjs/router": 3, "active": 1, "after": 1, "all": 1, "allows": 1, "and": 1, "are": 2, "array": 1, "async": 3, "available": 1, "basic": 1, "be": 1, "boolean": 2, "but": 1, "by": 1, "cache": 3, "cached": 2, "clears": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/data-apis/revalidate": 1, "completes": 1, "const": 4, "createasync": 3, "current": 1, "data": 5, "deduplication": 1, "dependents": 1, "description": 1, "don": 1, "each": 1, "examples": 1, "execute": 1, "false": 1, "fetches": 3, "for": 1, "force": 2, "from": 3, "function": 5, "getpostsquery": 2, "getuserquery": 3, "getusersquery": 2, "github-document": 1, "https": 1, "if": 2, "implement": 1, "import": 4, "in": 1, "internal": 1, "invalidate": 1, "invalidation": 1, "its": 1, "john": 1, "key": 6, "keys": 2, "manual": 1, "manually": 1, "marked": 1, "mdx": 1, "multiple": 1, "mutations": 1, "name": 2, "no": 2, "not": 1, "of": 2, "on": 1, "onclick=": 1, "or": 2, "page": 1, "parameters": 1, "polling": 3, "posts": 2, "promise": 1, "promise\u003cvoid\u003e": 1, "provided": 1, "queries": 5, "query": 9, "re-executes": 1, "real-time": 1, "refetch": 2, "refresh": 3, "refreshall": 1, "refreshuser": 2, "related": 1, "resolves": 1, "return": 3, "returns": 1, "reused": 1, "revalidate": 13, "revalidated": 1, "revalidating": 1, "revalidation": 2, "solidjs": 1, "stale": 3, "string": 4, "subscribed": 1, "subscribers": 2, "tags": 1, "that": 1, "the": 5, "their": 1, "title": 1, "to": 3, "transition": 1, "trigger": 1, "triggers": 1, "true": 2, "tsx": 4, "type": 1, "until": 1, "updates": 3, "usage": 1, "use_cases": 1, "used": 1, "user": 4, "userprofile": 1, "users": 2, "value": 1, "version": 1, "void": 2, "when": 3, "with": 1, "without": 1 }, "length": 266 }, { "id": "e57addda7f8190dd0ca3642e", "doc_id": "afc22c7ea92458d05f6146af", "title": "revalidation", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/data-fetching/revalidation.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/revalidation.json", "content": "--- title: \"Revalidation\" --- Since server data can change, Solid Router provides mechanisms to revalidate queries and keep the UI up to date. The most common case is **automatic revalidation**. After an [action](/solid-router/concepts/actions) completes successfully, Solid Router automatically revalidates all active queries on the page. For more details, see the [actions documentation](/solid-router/concepts/actions#automatic-data-revalidation). For more fine-grained control, you can trigger revalidation manually with the [`revalidate` function](/solid-router/reference/data-apis/revalidate). It accepts a query key (or an array of keys) to target specific queries. Each query exposes two properties for this: `key` and `keyFor`. - `query.key` is the base key for a query and targets all of its instances. Using this key will revalidate all data fetched by that query, regardless of the arguments provided. - `query.keyFor(arguments)` generates a key for a specific set of arguments, allowing you to target and revalidate only that particular query. ```tsx import { For } from \"solid-js\"; import { query, createAsync, revalidate } from \"@solidjs/router\"; const getProjectsQuery = query(async () =\u003e { // ... Fetches a list of projects. }, \"projects\"); const getProjectTasksQuery = query(async (projectId: string) =\u003e { // ... Fetches a list of tasks for a project. }, \"projectTasks\"); function Projects() { const projects = createAsync(() =\u003e getProjectsQuery()); function refetchAllTasks() { revalidate(getProjectTasksQuery.key); } return ( \u003cdiv\u003e \u003cbutton onClick={refetchAllTasks}\u003eRefetch all tasks\u003c/button\u003e \u003cFor each={projects()}\u003e{(project) =\u003e \u003cProject id={project.id} /\u003e}\u003c/For\u003e \u003c/div\u003e ); } function Project(props: { id: string }) { const tasks = createAsync(() =\u003e getProjectTasksQuery(props.id)); function refetchTasks() { revalidate(getProjectTasksQuery.keyFor(props.id)); } return ( \u003cdiv\u003e \u003cbutton onClick={refetchTasks}\u003eRefetch tasks for this project\u003c/button\u003e \u003cFor each={project.tasks}\u003e{(task) =\u003e \u003cdiv\u003e{task.title}\u003c/div\u003e}\u003c/For\u003e \u003c/div\u003e ); } ```", "term_freq": { "**automatic": 1, "---": 2, "//": 2, "//github": 1, "/\u003e": 1, "/solid-router/concepts/actions": 1, "/solid-router/concepts/actions#automatic-data-revalidation": 1, "/solid-router/reference/data-apis/revalidate": 1, "\u003c/div\u003e": 3, "\u003c/for\u003e": 2, "\u003cbutton": 2, "\u003cdiv\u003e": 3, "\u003cfor": 2, "\u003cproject": 1, "=\u003e": 6, "\u003erefetch": 2, "@solidjs/router": 1, "accepts": 1, "action": 1, "actions": 1, "active": 1, "after": 1, "all": 4, "allowing": 1, "an": 2, "and": 4, "arguments": 3, "array": 1, "async": 2, "automatically": 1, "base": 1, "by": 1, "can": 2, "case": 1, "change": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/data-fetching/revalidation": 1, "common": 1, "completes": 1, "const": 4, "control": 1, "createasync": 3, "data": 2, "date": 1, "details": 1, "documentation": 1, "each": 1, "each=": 2, "exposes": 1, "fetched": 1, "fetches": 2, "fine-grained": 1, "for": 8, "from": 2, "function": 5, "generates": 1, "getprojectsquery": 2, "getprojecttasksquery": 4, "github-document": 1, "https": 1, "id": 4, "id=": 1, "import": 2, "instances": 1, "is": 2, "it": 1, "its": 1, "keep": 1, "key": 7, "keyfor": 3, "keys": 1, "list": 2, "manually": 1, "mdx": 1, "mechanisms": 1, "more": 2, "most": 1, "of": 6, "on": 1, "onclick=": 2, "only": 1, "or": 1, "page": 1, "particular": 1, "project": 5, "project\u003c/button\u003e": 1, "projectid": 1, "projects": 5, "projecttasks": 1, "properties": 1, "props": 3, "provided": 1, "provides": 1, "queries": 3, "query": 10, "refetchalltasks": 2, "refetchtasks": 2, "regardless": 1, "return": 2, "revalidate": 7, "revalidates": 1, "revalidation": 3, "revalidation**": 1, "router": 2, "see": 1, "server": 1, "set": 1, "since": 1, "solid": 2, "solid-js": 1, "specific": 2, "string": 2, "successfully": 1, "target": 2, "targets": 1, "task": 2, "tasks": 4, "tasks\u003c/button\u003e": 1, "that": 2, "the": 7, "this": 3, "title": 2, "to": 4, "trigger": 1, "tsx": 1, "two": 1, "ui": 1, "up": 1, "using": 1, "will": 1, "with": 1, "you": 2 }, "length": 257 }, { "id": "42614d54b835daf715869abc", "doc_id": "963d44334b9b84d3949da304", "title": "root | Remix", "url": "https://v2.remix.run/docs/file-conventions/root", "type": "html", "source": "remix:does", "path": "devour_data/docs/root---remix-963d4433.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsrootGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Root Route The \"root\" route (app/root.tsx) is the only required route in your Remix application because it is the parent to all routes in your routes/ directory and is in charge of rendering the root \u003chtml\u003e document. Beyond that, it's mostly just like any other route and supports all the standard route exports: headers meta links loader clientLoader action clientAction default ErrorBoundary HydrateFallback handle shouldRevalidate Because the root route manages your document, it is the proper place to render a handful of \"document-level\" components Remix provides. These components are to be used once inside your root route, and they include everything Remix figured out or built in order for your page to render properly. import type { LinksFunction } from \"@remix-run/node\"; // or cloudflare/deno import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, } from \"@remix-run/react\"; import globalStylesheetUrl from \"./global-styles.css\"; export const links: LinksFunction = () =\u003e { return [{ rel: \"stylesheet\", href: globalStylesheetUrl }]; }; export default function App() { return ( \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cmeta charSet=\"utf-8\" /\u003e \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e {/* All `meta` exports on all routes will render here */} \u003cMeta /\u003e {/* All `link` exports on all routes will render here */} \u003cLinks /\u003e \u003c/head\u003e \u003cbody\u003e {/* Child routes render here */} \u003cOutlet /\u003e {/* Manages scroll position for client-side transitions */} {/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */} \u003cScrollRestoration /\u003e {/* Script tags go here */} {/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */} \u003cScripts /\u003e {/* Sets up automatic reload when you change code */} {/* and only does anything during development */} {/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */} \u003cLiveReload /\u003e \u003c/body\u003e \u003c/html\u003e ); } Layout Export Because the root route manages the document for all routes, it also supports an additional optional Layout export. You can read the details in this RFC but the layout route serves two purposes: Avoid duplicating your document/\"app shell\" across your root component, HydrateFallback, and ErrorBoundary Avoids React from re-mounting your app shell elements when switching between the root component/HydrateFallback/ErrorBoundary which can cause a FOUC if React removes and re-adds \u003clink rel=\"stylesheet\"\u003e tags from your \u003cLinks\u003e component. import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, } from \"@remix-run/react\"; export function Layout({ children }) { return ( \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cmeta charSet=\"utf-8\" /\u003e \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e \u003cMeta /\u003e \u003cLinks /\u003e \u003c/head\u003e \u003cbody\u003e {/* children will be the root Component, ErrorBoundary, or HydrateFallback */} {children} \u003cScripts /\u003e \u003cScrollRestoration /\u003e \u003cLiveReload /\u003e \u003c/body\u003e \u003c/html\u003e ); } export default function App() { return \u003cOutlet /\u003e; } export function ErrorBoundary() { const error = useRouteError(); if (isRouteErrorResponse(error)) { return ( \u003c\u003e \u003ch1\u003e {error.status} {error.statusText} \u003c/h1\u003e \u003cp\u003e{error.data}\u003c/p\u003e \u003c/\u003e ); } return ( \u003c\u003e \u003ch1\u003eError!\u003c/h1\u003e \u003cp\u003e{error?.message ?? \"Unknown error\"}\u003c/p\u003e \u003c/\u003e ); } A note on useLoaderDatain the Layout Component useLoaderData is not permitted to be used in ErrorBoundary components because it is intended for the happy-path route rendering, and its typings have a built-in assumption that the loader ran successfully and returned something. That assumption doesn't hold in an ErrorBoundary because it could have been the loader that threw and triggered the boundary! To access loader data in ErrorBoundary's, you can use useRouteLoaderData which accounts for the loader data potentially being undefined. Because your Layout component is used in both success and error flows, this same restriction holds. If you need to fork logic in your Layout depending on if it was a successful request or not, you can use useRouteLoaderData(\"root\") and useRouteError(). Because your \u003cLayout\u003e component is used for rendering the ErrorBoundary, you should be very defensive to ensure that you can render your ErrorBoundary without encountering any render errors. If your Layout throws another error trying to render the boundary, then it can't be used and your UI will fall back to the very minimal built-in default ErrorBoundary. export function Layout({ children, }: { children: React.ReactNode; }) { const data = useRouteLoaderData(\"root\"); const error = useRouteError(); return ( \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cmeta charSet=\"utf-8\" /\u003e \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e \u003cMeta /\u003e \u003cLinks /\u003e \u003cstyle dangerouslySetInnerHTML={{ __html: ` :root { --themeVar: ${ data?.themeVar || defaultThemeVar } } `, }} /\u003e \u003c/head\u003e \u003cbody\u003e {data ? ( \u003cAnalytics token={data.analyticsToken} /\u003e ) : null} {children} \u003cScrollRestoration /\u003e \u003cScripts /\u003e \u003c/body\u003e \u003c/html\u003e ); } See also: \u003cMeta\u003e \u003cLinks\u003e \u003cOutlet\u003e \u003cScrollRestoration\u003e \u003cScripts\u003e \u003cLiveReload\u003e © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_966\\\":-5,\\\"_967\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":965},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"docs/file-conventions/root.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"root-route\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#root-route\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRoot Route\\u003c/h1\\u003e\\\\n\\u003cp\\u003eThe \\\\\\\"root\\\\\\\" route (\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e) is the only \\u003cem\\u003erequired\\u003c/em\\u003e route in your Remix application because it is the parent to all routes in your \\u003ccode\\u003eroutes/\\u003c/code\\u003e directory and is in charge of rendering the root \\u003ccode\\u003e\\u0026#x3C;html\\u003e\\u003c/code\\u003e document.\\u003c/p\\u003e\\\\n\\u003cp\\u003eBeyond that, it's mostly just like any other route and supports all the standard route exports:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/headers\\\\\\\"\\u003e\\u003ccode\\u003eheaders\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/meta\\\\\\\"\\u003e\\u003ccode\\u003emeta\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/links\\\\\\\"\\u003e\\u003ccode\\u003elinks\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/loader\\\\\\\"\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/client-loader\\\\\\\"\\u003e\\u003ccode\\u003eclientLoader\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/action\\\\\\\"\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/client-action\\\\\\\"\\u003e\\u003ccode\\u003eclientAction\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/component\\\\\\\"\\u003e\\u003ccode\\u003edefault\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/error-boundary\\\\\\\"\\u003e\\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/hydrate-fallback\\\\\\\"\\u003e\\u003ccode\\u003eHydrateFallback\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/handle\\\\\\\"\\u003e\\u003ccode\\u003ehandle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/should-revalidate\\\\\\\"\\u003e\\u003ccode\\u003eshouldRevalidate\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eBecause the root route manages your document, it is the proper place to render a handful of \\\\\\\"document-level\\\\\\\" components Remix provides. These components are to be used once inside your root route, and they include everything Remix figured out or built in order for your page to render properly.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinksFunction\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinks\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLiveReload\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eMeta\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScripts\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eglobalStylesheetUrl\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./global-styles.css\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elinks\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinksFunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e [{ rel: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003estylesheet\\u003c/span\\u003e\\\\\\\", href: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eglobalStylesheetUrl\\u003c/span\\u003e }];\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003echarSet\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eutf-8\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eviewport\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003econtent\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ewidth=device-width, initial-scale=1\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* All `meta` exports on all routes will render here */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eMeta\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* All `link` exports on all routes will render here */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinks\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* Child routes render here */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* Manages scroll position for client-side transitions */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* Script tags go here */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScripts\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* Sets up automatic reload when you change code */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* and only does anything during development */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLiveReload\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"50\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"51\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"52\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"layout-export\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#layout-export\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eLayout Export\\u003c/h2\\u003e\\\\n\\u003cp\\u003eBecause the root route manages the document for all routes, it also supports an additional optional \\u003ccode\\u003eLayout\\u003c/code\\u003e export. You can read the details in this \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/discussions/8702\\\\\\\"\\u003eRFC\\u003c/a\\u003e but the layout route serves two purposes:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eAvoid duplicating your document/\\\\\\\"app shell\\\\\\\" across your root component, \\u003ccode\\u003eHydrateFallback\\u003c/code\\u003e, and \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eAvoids React from re-mounting your app shell elements when switching between the root component/\\u003ccode\\u003eHydrateFallback\\u003c/code\\u003e/\\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e which can cause a FOUC if React removes and re-adds \\u003ccode\\u003e\\u0026#x3C;link rel=\\\\\\\"stylesheet\\\\\\\"\\u003e\\u003c/code\\u003e tags from your \\u003ccode\\u003e\\u0026#x3C;Links\\u003e\\u003c/code\\u003e component.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinks\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLiveReload\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eMeta\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScripts\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eLayout\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003echarSet\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eutf-8\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eviewport\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003econtent\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ewidth=device-width, initial-scale=1\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eMeta\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinks\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* children will be the root Component, ErrorBoundary, or HydrateFallback */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScripts\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLiveReload\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e /\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eErrorBoundary\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseRouteError\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eisRouteErrorResponse\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e)) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e \\u0026#x3C;\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estatus\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estatusText\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e \\u0026#x3C;/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"50\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"51\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"52\\\\\\\"\\u003e \\u0026#x3C;\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"53\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003eError!\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"54\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e?.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emessage\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e??\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eUnknown error\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"55\\\\\\\"\\u003e \\u0026#x3C;/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"56\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"57\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eA note on \\u003ccode\\u003euseLoaderData\\u003c/code\\u003ein the \\u003ccode\\u003eLayout\\u003c/code\\u003e Component\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003euseLoaderData\\u003c/code\\u003e is not permitted to be used in \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e components because it is intended for the happy-path route rendering, and its typings have a built-in assumption that the \\u003ccode\\u003eloader\\u003c/code\\u003e ran successfully and returned something. That assumption doesn't hold in an \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e because it could have been the \\u003ccode\\u003eloader\\u003c/code\\u003e that threw and triggered the boundary! To access loader data in \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e's, you can use \\u003ccode\\u003euseRouteLoaderData\\u003c/code\\u003e which accounts for the loader data potentially being \\u003ccode\\u003eundefined\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eBecause your \\u003ccode\\u003eLayout\\u003c/code\\u003e component is used in both success and error flows, this same restriction holds. If you need to fork logic in your \\u003ccode\\u003eLayout\\u003c/code\\u003e depending on if it was a successful request or not, you can use \\u003ccode\\u003euseRouteLoaderData(\\\\\\\"root\\\\\\\")\\u003c/code\\u003e and \\u003ccode\\u003euseRouteError()\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warn\\u003eBecause your \\u003ccode\\u003e\\u0026#x3C;Layout\\u003e\\u003c/code\\u003e component is used for rendering the \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e, you should be \\u003cem\\u003every defensive\\u003c/em\\u003e to ensure that you can render your \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e without encountering any render errors. If your \\u003ccode\\u003eLayout\\u003c/code\\u003e throws another error trying to render the boundary, then it can't be used and your UI will fall back to the very minimal built-in default \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e.\\u003c/docs-warn\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"\\u0026#x22;app/root.tsx\\u0026#x22;\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"\\u0026#x22;app/root.tsx\\u0026#x22;\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eLayout\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eReact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eReactNode\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e}) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseRouteLoaderData\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eroot\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseRouteError\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003echarSet\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eutf-8\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eviewport\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003econtent\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ewidth=device-width, initial-scale=1\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eMeta\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinks\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estyle\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edangerouslySetInnerHTML\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e{\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e __html: `\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e :root {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e --themeVar: \\u003c/span\\u003e${\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e?.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ethemeVar\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e||\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefaultThemeVar\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u003c/span\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e }\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u003c/span\\u003e`,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eAnalytics\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etoken\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eanalyticsToken\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScripts\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eSee also:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/meta\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Meta\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/links\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Links\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/outlet\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Outlet\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/scroll-restoration\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;ScrollRestoration\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/scripts\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Scripts\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/live-reload\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;LiveReload\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\",\\\"docs/file-conventions/root\\\",\\\"headings\\\",[960],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Layout Export\\\",\\\"layout-export\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#layout-export\\\\\\": 1, "#root-route\\\\\\": 1, "$\\": 1, "$rc": 3, "*/": 11, "*/\\u003c/span\\u003e\\u003cspan": 11, "--base03": 12, "--base05": 3, "--base08": 71, "--base09": 1, "--base0a": 24, "--base0b": 27, "--base0d": 30, "--base0e": 50, "--base0f": 40, "--themevar": 2, "-1\\\\\\": 2, "-5": 2, "/$": 1, "/*": 11, "//": 1, "//github": 1, "//v2": 2, "/\u003e": 24, "/\\u003cspan": 13, "/\\u003e": 1, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 25, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/components/links\\\\\\": 1, "/components/live-reload\\\\\\": 1, "/components/meta\\\\\\": 1, "/components/outlet\\\\\\": 1, "/components/scripts\\\\\\": 1, "/components/scroll-restoration\\\\\\": 1, "/global-styles": 2, "/route/action\\\\\\": 1, "/route/client-action\\\\\\": 1, "/route/client-loader\\\\\\": 1, "/route/component\\\\\\": 1, "/route/error-boundary\\\\\\": 1, "/route/handle\\\\\\": 1, "/route/headers\\\\\\": 1, "/route/hydrate-fallback\\\\\\": 1, "/route/links\\\\\\": 1, "/route/loader\\\\\\": 1, "/route/meta\\\\\\": 1, "/route/should-revalidate\\\\\\": 1, "0===e": 1, "10": 44, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 3, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 3, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 3, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 3, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 3, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 3, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 3, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 3, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 3, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 3, "1\\\\\\": 3, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 3, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 3, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 3, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 3, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 3, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 3, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 3, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 3, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "28\\\\\\": 3, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "29\\\\\\": 3, "2\\\\\\": 3, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30\\\\\\": 3, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "31\\\\\\": 3, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "32\\\\\\": 3, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "33\\\\\\": 3, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "34\\\\\\": 3, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "35\\\\\\": 3, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "36\\\\\\": 3, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "37\\\\\\": 3, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "38\\\\\\": 3, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "39\\\\\\": 3, "3\\\\\\": 3, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "40\\\\\\": 3, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "41\\\\\\": 3, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "42\\\\\\": 2, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "43\\\\\\": 2, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "44\\\\\\": 2, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "45\\\\\\": 2, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "46\\\\\\": 2, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "47\\\\\\": 2, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "48\\\\\\": 2, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "49\\\\\\": 2, "4\\\\\\": 3, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "50\\\\\\": 2, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "51\\\\\\": 2, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "52\\\\\\": 2, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "53\\\\\\": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "54\\\\\\": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "55\\\\\\": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "56\\\\\\": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "57\\\\\\": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 3, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 3, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 3, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 3, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 1, "963": 1, "964": 1, "965": 1, "97": 1, "98": 1, "99": 1, "9\\\\\\": 3, "\u003c/\u003e": 2, "\u003c/body\u003e": 3, "\u003c/h1\u003e": 2, "\u003c/head\u003e": 3, "\u003c/html\u003e": 3, "\u003c/p\u003e": 2, "\u003c\u003e": 2, "\u003canalytics": 1, "\u003cbody\u003e": 3, "\u003ch1\u003e": 1, "\u003ch1\u003eerror": 1, "\u003chead\u003e": 3, "\u003chtml": 3, "\u003chtml\u003e": 1, "\u003clayout\u003e": 1, "\u003clink": 1, "\u003clinks": 3, "\u003clinks\u003e": 2, "\u003clivereload": 2, "\u003clivereload\u003e": 1, "\u003cmeta": 9, "\u003cmeta\u003e": 1, "\u003coutlet": 2, "\u003coutlet\u003e": 1, "\u003cp\u003e": 2, "\u003cscripts": 3, "\u003cscripts\u003e": 1, "\u003cscrollrestoration": 3, "\u003cscrollrestoration\u003e": 1, "\u003cstyle": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 2, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 3, "@remix-run/node\\": 1, "@remix-run/react": 2, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 274, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ea": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003esee": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 59, "\\n": 1, "\\u0026#x22": 2, "\\u0026#x3c": 52, "\\u003c/code\\u003e": 2, "\\u003c/docs-warn\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cdiv": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warn\\u003ebecause": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ebecause": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ebeyond": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 2, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eavoid": 1, "\\u003c/span\\u003e": 11, "\\u003c/span\\u003e$": 1, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 18, "\\u003c/span\\u003e\\u0026#x3c": 2, "\\u003c/span\\u003e\\u003cspan": 22, "\\u003ca": 1, "\\u003ccode\\u003e\\u0026#x3c": 4, "\\u003ccode\\u003eapp/root": 1, "\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e": 6, "\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eavoids": 1, "\\u003ccode\\u003ehydratefallback\\u003c/code\\u003e": 1, "\\u003ccode\\u003elayout\\u003c/code\\u003e": 5, "\\u003ccode\\u003eloader\\u003c/code\\u003e": 2, "\\u003ccode\\u003eroutes/\\u003c/code\\u003e": 1, "\\u003ccode\\u003eundefined\\u003c/code\\u003e": 1, "\\u003ccode\\u003euseloaderdata\\u003c/code\\u003ein": 1, "\\u003ccode\\u003euserouteerror": 1, "\\u003ccode\\u003euserouteloaderdata": 1, "\\u003ccode\\u003euserouteloaderdata\\u003c/code\\u003e": 1, "\\u003cem\\u003erequired\\u003c/em\\u003e": 1, "\\u003cem\\u003every": 1, "\\u003ch1": 1, "\\u003cspan": 164, "\\u003e": 175, "\\u003e/*": 11, "\\u003e//": 1, "\\u003e=\\u003c/span\\u003e": 4, "\\u003e=\\u003c/span\\u003e\\\\\\": 12, "\\u003e=\\u003c/span\\u003e\\u003cspan": 2, "\\u003e=\\u003e\\u003c/span\\u003e": 1, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 1, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 2, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 19, "\\u003e\\u003c/code\\u003e": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003elayout": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroot": 1, "\\u003e\\u003ca": 2, "\\u003e\\u003ccode\\u003e\\u0026#x3c": 6, "\\u003e\\u003ccode\\u003e\\u003cspan": 3, "\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eclientaction\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eclientloader\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003edefault\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003ehandle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eheaders\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003ehydratefallback\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003elinks\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003emeta\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eshouldrevalidate\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003ebecause": 1, "\\u003e\\u003cpre": 3, "\\u003e\\u003cspan": 18, "\\u003eanalytics\\u003c/span\\u003e": 1, "\\u003eanalyticstoken\\u003c/span\\u003e\\u003cspan": 1, "\\u003eapp\\u003c/span\\u003e": 2, "\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 6, "\\u003echarset\\u003c/span\\u003e\\u003cspan": 3, "\\u003echildren\\u003c/span\\u003e": 2, "\\u003echildren\\u003c/span\\u003e\\u003cspan": 3, "\\u003econst\\u003c/span\\u003e": 4, "\\u003econtent\\u003c/span\\u003e\\u003cspan": 3, "\\u003edangerouslysetinnerhtml\\u003c/span\\u003e\\u003cspan": 1, "\\u003edata\\u003c/span\\u003e": 4, "\\u003edata\\u003c/span\\u003e\\u003cspan": 1, "\\u003edefault\\u003c/span\\u003e": 2, "\\u003edefaultthemevar\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003een\\u003c/span\\u003e\\\\\\": 3, "\\u003eerror\\u003c/span\\u003e": 7, "\\u003eerrorboundary\\u003c/span\\u003e": 1, "\\u003eexport\\u003c/span\\u003e": 6, "\\u003efrom\\u003c/span\\u003e": 4, "\\u003efunction\\u003c/span\\u003e": 5, "\\u003eglobalstylesheeturl\\u003c/span\\u003e": 2, "\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003eh1\\u003c/span\\u003e\\u003eerror": 1, "\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 6, "\\u003ehtml\\u003c/span\\u003e": 3, "\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003eif\\u003c/span\\u003e": 1, "\\u003eimport\\u003c/span\\u003e": 4, "\\u003eisrouteerrorresponse\\u003c/span\\u003e": 1, "\\u003elang\\u003c/span\\u003e\\u003cspan": 3, "\\u003elayout\\u003c/span\\u003e": 2, "\\u003elinks\\u003c/span\\u003e": 5, "\\u003elinks\\u003c/span\\u003e\\u003cspan": 1, "\\u003elinksfunction\\u003c/span\\u003e": 2, "\\u003elivereload\\u003c/span\\u003e": 4, "\\u003emessage\\u003c/span\\u003e": 1, "\\u003emeta\\u003c/span\\u003e": 8, "\\u003emeta\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003ename\\u003c/span\\u003e\\u003cspan": 3, "\\u003enull\\u003c/span\\u003e\\u003cspan": 1, "\\u003eoutlet\\u003c/span\\u003e": 4, "\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan": 2, "\\u003ereact\\u003c/span\\u003e": 1, "\\u003ereactnode\\u003c/span\\u003e": 1, "\\u003ereturn\\u003c/span\\u003e": 7, "\\u003erfc\\u003c/a\\u003e": 1, "\\u003eroot\\u003c/span\\u003e\\\\\\": 1, "\\u003escripts\\u003c/span\\u003e": 5, "\\u003escrollrestoration\\u003c/span\\u003e": 5, "\\u003estatus\\u003c/span\\u003e\\u003cspan": 1, "\\u003estatustext\\u003c/span\\u003e\\u003cspan": 1, "\\u003estyle\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003estylesheet\\u003c/span\\u003e\\\\\\": 1, "\\u003ethemevar\\u003c/span\\u003e\\u003cspan": 1, "\\u003etoken\\u003c/span\\u003e\\u003cspan": 1, "\\u003etype\\u003c/span\\u003e": 1, "\\u003eunknown": 1, "\\u003euserouteerror\\u003c/span\\u003e": 2, "\\u003euserouteloaderdata\\u003c/span\\u003e": 1, "\\u003eutf-8\\u003c/span\\u003e\\\\\\": 3, "\\u003eviewport\\u003c/span\\u003e\\\\\\": 3, "\\u003ewidth=device-width": 3, "\\u003e||\\u003c/span\\u003e\\u003cspan": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 32, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 153, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 2, "_958\\": 1, "_961\\": 1, "_966\\": 1, "_967\\": 1, "_9\\": 1, "__html": 2, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "access": 2, "accessibility\\": 1, "accounts": 2, "across": 2, "action": 1, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "additional": 2, "all": 15, "also": 4, "an": 5, "analyticstoken": 1, "and": 33, "another": 2, "any": 4, "anything": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 8, "app/root": 7, "application": 2, "approach": 1, "are": 2, "aria-hidden=\\\\\\": 2, "as": 9, "asked": 1, "asset": 3, "assumption": 4, "at": 1, "attrs\\": 1, "automatic": 2, "avoid": 1, "avoids": 1, "await\\": 1, "b=document": 1, "back": 2, "backend": 3, "basename": 1, "be": 11, "because": 10, "been": 4, "before": 1, "being": 2, "between": 2, "beyond": 1, "both": 2, "boundary": 4, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 3, "built": 3, "built-in": 4, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 2, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "can": 13, "catch": 1, "cause": 2, "change": 2, "changelog": 2, "changelog\\": 1, "charge": 2, "charset=": 3, "child": 2, "children": 7, "children\\": 1, "class=\\\\\\": 152, "cli": 5, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client-side": 2, "client\\": 2, "clientaction": 3, "clientaction\\": 1, "clientloader": 3, "clientloader\\": 1, "close": 1, "cloudflare/deno": 1, "cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "code": 6, "codeblock-line\\\\\\": 150, "color": 258, "com/remix-run/remix/discussions/8702\\\\\\": 1, "community": 3, "community\\": 1, "component": 13, "component/\\u003ccode\\u003ehydratefallback\\u003c/code\\u003e/\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e": 1, "component/hydratefallback/errorboundary": 1, "component\\": 1, "component\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003euseloaderdata\\u003c/code\\u003e": 1, "components": 7, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 1, "const": 4, "constraints": 2, "constraints\\": 1, "content": 6, "content=": 3, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "could": 2, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 16, "css\\": 1, "css\\u003c/span\\u003e\\\\\\": 1, "d=c": 2, "dangerouslysetinnerhtml=": 1, "data": 25, "data-code-block=\\\\\\": 3, "data-filename=\\\\\\": 6, "data-highlight=\\\\\\": 38, "data-lang=\\\\\\": 6, "data-line-number=\\\\\\": 150, "data-line-numbers=\\\\\\": 6, "data=": 1, "data\\": 2, "default": 5, "defaultthemevar": 1, "defensive": 1, "defensive\\u003c/em\\u003e": 1, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 3, "depending": 2, "deployment": 4, "deployment\\": 2, "description\\": 1, "details": 2, "dev": 3, "development": 5, "directory": 2, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 1, "doc\\": 1, "docs/file-conventions/root": 1, "docs/file-conventions/root\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsrootgetting": 1, "document": 7, "document-level": 1, "document-level\\\\\\": 1, "document/": 1, "document/\\\\\\": 1, "does": 2, "doesn": 2, "done": 1, "duplicating": 2, "during": 2, "e--": 1, "e=0": 1, "elements": 2, "else": 2, "en": 3, "encountering": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "ensure": 2, "entry": 6, "environment": 3, "error": 18, "error\\u003c/span\\u003e\\\\\\": 1, "errorboundary": 13, "errorboundary\\": 1, "errors": 2, "errors\\": 1, "everything": 3, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "export": 9, "export\\": 1, "export\\u003c/h2\\u003e\\\\n\\u003cp\\u003ebecause": 1, "exports": 6, "extract": 2, "extract\\": 1, "f=a": 1, "fall": 2, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "figured": 2, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "flows": 2, "for": 24, "fork": 2, "form": 11, "form\\": 1, "fouc": 2, "found": 3, "frequently": 1, "from": 14, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 6, "future": 4, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "globalstylesheeturl": 2, "go": 2, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "handful": 2, "handle": 3, "handle\\": 1, "handling": 4, "handling\\": 2, "happy-path": 2, "has": 2, "hascontent\\": 1, "have": 4, "headers": 3, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 15, "history": 4, "hold": 2, "holds": 2, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href": 2, "href=\\\\\\": 21, "html": 1, "html\\": 1, "html\\u003e\\u003c/code\\u003e": 1, "https": 3, "hydratefallback": 6, "hydratefallback\\": 1, "icon": 2, "icon-link\\\\\\": 2, "id=\\\\\\": 2, "if": 21, "import": 9, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 26, "inc": 1, "include": 2, "index": 3, "initial": 1, "initial-scale=1": 3, "initial-scale=1\\u003c/span\\u003e\\\\\\": 3, "insertbefore": 1, "inside": 2, "integrating": 1, "intended": 2, "interactions": 1, "into": 2, "introduction": 1, "is": 17, "isrouteerrorresponse": 3, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 16, "iterative": 1, "its": 2, "javascript": 2, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "just": 2, "key": 4, "know": 1, "lang=": 3, "layout": 11, "layout-export\\": 1, "layout-export\\\\\\": 1, "layout\\u003e\\u003c/code\\u003e": 1, "lazy": 3, "learning": 1, "let": 3, "licensed": 1, "like": 2, "link": 5, "link\\": 1, "links": 8, "links\\": 2, "links\\u003e\\u003c/code\\u003e": 1, "links\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "linksfunction": 2, "livereload": 4, "livereload\\": 1, "livereload\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\": 1, "loader": 9, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "logic": 2, "makes": 1, "management": 4, "management\\": 2, "manages": 6, "manual": 3, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "message": 1, "meta": 9, "meta\\": 2, "meta\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "migrating": 4, "minimal": 2, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 6, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "most": 1, "mostly": 2, "must": 6, "name=": 3, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 3, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "nonce": 12, "nonce-based": 6, "not": 7, "note": 2, "null": 2, "number": 1, "of": 7, "omit": 6, "on": 10, "once": 3, "one": 1, "only": 4, "open": 1, "optimization": 2, "optimization\\": 1, "optional": 2, "or": 9, "order": 2, "order\\": 1, "other": 5, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "otherwise": 6, "out": 3, "outlet": 4, "outlet\\": 1, "outlet\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "page": 2, "param": 2, "param\\": 1, "parent": 2, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "permitted": 2, "pipethrough": 1, "place": 2, "policy": 6, "position": 2, "positions": 2, "postcss": 2, "postcss\\": 1, "potentially": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "prop": 12, "proper": 2, "properly": 2, "provide": 6, "provides": 2, "pull": 1, "purposes": 2, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "ran": 2, "random": 1, "re-adds": 2, "re-mounting": 2, "react": 13, "react-router-scroll-positions": 1, "reactnode": 1, "read": 2, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regular": 3, "rel": 2, "rel=": 1, "rel=\\\\\\": 1, "related": 1, "released": 2, "reload": 2, "remix": 16, "remix\\": 2, "removechild": 2, "removeitem": 1, "removes": 2, "render": 16, "rendering": 6, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 3, "required": 1, "resource": 3, "resources": 1, "restorekey": 2, "restriction": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 7, "returned": 2, "rfc": 1, "rocking": 1, "rolling": 1, "root": 24, "root-route\\\\\\": 1, "root\\": 1, "root\\\\\\": 2, "route": 31, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "route\\u003c/h1\\u003e\\\\n\\u003cp\\u003ethe": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 15, "routes/": 1, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/file-conventions/root": 1, "run\\": 1, "running": 1, "runtimes": 3, "same": 2, "script": 2, "scripts": 10, "scripts\\": 1, "scripts\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "scroll": 2, "scrollrestoration": 4, "scrollrestoration\\": 1, "scrollrestoration\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "scrollto": 1, "security": 6, "see": 1, "server": 15, "server\\": 3, "serves": 2, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "sets": 2, "shell": 3, "shell\\\\\\": 1, "shopify": 1, "should": 2, "shouldrevalidate": 3, "shouldrevalidate\\": 1, "shown": 6, "simplifying": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "something": 2, "spa": 3, "ssr": 1, "stages": 1, "standard": 2, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "status": 1, "statustext": 1, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 258, "stylesheet": 2, "stylesheet\\\\\\": 1, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "success": 2, "successful": 2, "successfully": 2, "support": 3, "support\\": 1, "supports": 4, "switching": 2, "tabindex=\\\\\\": 2, "tags": 4, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 10, "the": 61, "themevar": 1, "then": 2, "these": 2, "they": 2, "this": 6, "threw": 2, "through": 1, "throws": 2, "title\\": 1, "tls": 2, "tls\\": 1, "to": 30, "toc\\": 1, "token=": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "transitions": 2, "triggered": 2, "true": 6, "true\\\\\\": 46, "try": 1, "trying": 2, "ts": 2, "ts\\": 1, "tsx": 1, "tsx\\\\\\": 10, "tsx\\u0026#x22": 2, "tsx\\u003c/code\\u003e": 1, "tutorial": 3, "two": 2, "type": 1, "typeof": 1, "typescript": 2, "typescript\\": 1, "typings": 2, "ui": 4, "ui\\": 1, "undefined": 1, "under": 1, "unknown": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 2, "upgrading": 3, "uploads": 2, "uploads\\": 1, "use": 10, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 10, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 3, "useloaderdata\\": 1, "useloaderdatain": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror": 3, "userouteerror\\": 1, "userouteloaderdata": 3, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "utf-8": 3, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 260, "variables": 2, "variables\\": 1, "very": 3, "view": 2, "viewport": 3, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "was": 2, "way": 1, "when": 5, "which": 4, "while": 1, "why": 1, "width=device-width": 3, "will": 10, "window": 11, "with": 4, "without": 2, "writes": 2, "writes\\": 1, "you": 31, "your": 33, "||": 4, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 7847 }, { "id": "260933ad49389367355339b2", "doc_id": "963d44334b9b84d3949da304", "title": "root | Remix", "url": "https://v2.remix.run/docs/file-conventions/root", "type": "html", "source": "remix:routes", "path": "devour_data/docs/root---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsrootGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Root Route The \"root\" route (app/root.tsx) is the only required route in your Remix application because it is the parent to all routes in your routes/ directory and is in charge of rendering the root \u003chtml\u003e document. Beyond that, it's mostly just like any other route and supports all the standard route exports: headers meta links loader clientLoader action clientAction default ErrorBoundary HydrateFallback handle shouldRevalidate Because the root route manages your document, it is the proper place to render a handful of \"document-level\" components Remix provides. These components are to be used once inside your root route, and they include everything Remix figured out or built in order for your page to render properly. import type { LinksFunction } from \"@remix-run/node\"; // or cloudflare/deno import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, } from \"@remix-run/react\"; import globalStylesheetUrl from \"./global-styles.css\"; export const links: LinksFunction = () =\u003e { return [{ rel: \"stylesheet\", href: globalStylesheetUrl }]; }; export default function App() { return ( \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cmeta charSet=\"utf-8\" /\u003e \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e {/* All `meta` exports on all routes will render here */} \u003cMeta /\u003e {/* All `link` exports on all routes will render here */} \u003cLinks /\u003e \u003c/head\u003e \u003cbody\u003e {/* Child routes render here */} \u003cOutlet /\u003e {/* Manages scroll position for client-side transitions */} {/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */} \u003cScrollRestoration /\u003e {/* Script tags go here */} {/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */} \u003cScripts /\u003e {/* Sets up automatic reload when you change code */} {/* and only does anything during development */} {/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */} \u003cLiveReload /\u003e \u003c/body\u003e \u003c/html\u003e ); } Layout Export Because the root route manages the document for all routes, it also supports an additional optional Layout export. You can read the details in this RFC but the layout route serves two purposes: Avoid duplicating your document/\"app shell\" across your root component, HydrateFallback, and ErrorBoundary Avoids React from re-mounting your app shell elements when switching between the root component/HydrateFallback/ErrorBoundary which can cause a FOUC if React removes and re-adds \u003clink rel=\"stylesheet\"\u003e tags from your \u003cLinks\u003e component. import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, } from \"@remix-run/react\"; export function Layout({ children }) { return ( \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cmeta charSet=\"utf-8\" /\u003e \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e \u003cMeta /\u003e \u003cLinks /\u003e \u003c/head\u003e \u003cbody\u003e {/* children will be the root Component, ErrorBoundary, or HydrateFallback */} {children} \u003cScripts /\u003e \u003cScrollRestoration /\u003e \u003cLiveReload /\u003e \u003c/body\u003e \u003c/html\u003e ); } export default function App() { return \u003cOutlet /\u003e; } export function ErrorBoundary() { const error = useRouteError(); if (isRouteErrorResponse(error)) { return ( \u003c\u003e \u003ch1\u003e {error.status} {error.statusText} \u003c/h1\u003e \u003cp\u003e{error.data}\u003c/p\u003e \u003c/\u003e ); } return ( \u003c\u003e \u003ch1\u003eError!\u003c/h1\u003e \u003cp\u003e{error?.message ?? \"Unknown error\"}\u003c/p\u003e \u003c/\u003e ); } A note on useLoaderDatain the Layout Component useLoaderData is not permitted to be used in ErrorBoundary components because it is intended for the happy-path route rendering, and its typings have a built-in assumption that the loader ran successfully and returned something. That assumption doesn't hold in an ErrorBoundary because it could have been the loader that threw and triggered the boundary! To access loader data in ErrorBoundary's, you can use useRouteLoaderData which accounts for the loader data potentially being undefined. Because your Layout component is used in both success and error flows, this same restriction holds. If you need to fork logic in your Layout depending on if it was a successful request or not, you can use useRouteLoaderData(\"root\") and useRouteError(). Because your \u003cLayout\u003e component is used for rendering the ErrorBoundary, you should be very defensive to ensure that you can render your ErrorBoundary without encountering any render errors. If your Layout throws another error trying to render the boundary, then it can't be used and your UI will fall back to the very minimal built-in default ErrorBoundary. export function Layout({ children, }: { children: React.ReactNode; }) { const data = useRouteLoaderData(\"root\"); const error = useRouteError(); return ( \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cmeta charSet=\"utf-8\" /\u003e \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e \u003cMeta /\u003e \u003cLinks /\u003e \u003cstyle dangerouslySetInnerHTML={{ __html: ` :root { --themeVar: ${ data?.themeVar || defaultThemeVar } } `, }} /\u003e \u003c/head\u003e \u003cbody\u003e {data ? ( \u003cAnalytics token={data.analyticsToken} /\u003e ) : null} {children} \u003cScrollRestoration /\u003e \u003cScripts /\u003e \u003c/body\u003e \u003c/html\u003e ); } See also: \u003cMeta\u003e \u003cLinks\u003e \u003cOutlet\u003e \u003cScrollRestoration\u003e \u003cScripts\u003e \u003cLiveReload\u003e © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_966\\\":-5,\\\"_967\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":965},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"docs/file-conventions/root.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"root-route\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#root-route\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRoot Route\\u003c/h1\\u003e\\\\n\\u003cp\\u003eThe \\\\\\\"root\\\\\\\" route (\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e) is the only \\u003cem\\u003erequired\\u003c/em\\u003e route in your Remix application because it is the parent to all routes in your \\u003ccode\\u003eroutes/\\u003c/code\\u003e directory and is in charge of rendering the root \\u003ccode\\u003e\\u0026#x3C;html\\u003e\\u003c/code\\u003e document.\\u003c/p\\u003e\\\\n\\u003cp\\u003eBeyond that, it's mostly just like any other route and supports all the standard route exports:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/headers\\\\\\\"\\u003e\\u003ccode\\u003eheaders\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/meta\\\\\\\"\\u003e\\u003ccode\\u003emeta\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/links\\\\\\\"\\u003e\\u003ccode\\u003elinks\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/loader\\\\\\\"\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/client-loader\\\\\\\"\\u003e\\u003ccode\\u003eclientLoader\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/action\\\\\\\"\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/client-action\\\\\\\"\\u003e\\u003ccode\\u003eclientAction\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/component\\\\\\\"\\u003e\\u003ccode\\u003edefault\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/error-boundary\\\\\\\"\\u003e\\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/hydrate-fallback\\\\\\\"\\u003e\\u003ccode\\u003eHydrateFallback\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/handle\\\\\\\"\\u003e\\u003ccode\\u003ehandle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/should-revalidate\\\\\\\"\\u003e\\u003ccode\\u003eshouldRevalidate\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eBecause the root route manages your document, it is the proper place to render a handful of \\\\\\\"document-level\\\\\\\" components Remix provides. These components are to be used once inside your root route, and they include everything Remix figured out or built in order for your page to render properly.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinksFunction\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinks\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLiveReload\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eMeta\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScripts\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eglobalStylesheetUrl\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./global-styles.css\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elinks\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinksFunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e [{ rel: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003estylesheet\\u003c/span\\u003e\\\\\\\", href: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eglobalStylesheetUrl\\u003c/span\\u003e }];\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003echarSet\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eutf-8\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eviewport\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003econtent\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ewidth=device-width, initial-scale=1\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* All `meta` exports on all routes will render here */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eMeta\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* All `link` exports on all routes will render here */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinks\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* Child routes render here */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* Manages scroll position for client-side transitions */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* Script tags go here */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScripts\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* Sets up automatic reload when you change code */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* and only does anything during development */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLiveReload\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"50\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"51\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"52\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"layout-export\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#layout-export\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eLayout Export\\u003c/h2\\u003e\\\\n\\u003cp\\u003eBecause the root route manages the document for all routes, it also supports an additional optional \\u003ccode\\u003eLayout\\u003c/code\\u003e export. You can read the details in this \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/discussions/8702\\\\\\\"\\u003eRFC\\u003c/a\\u003e but the layout route serves two purposes:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eAvoid duplicating your document/\\\\\\\"app shell\\\\\\\" across your root component, \\u003ccode\\u003eHydrateFallback\\u003c/code\\u003e, and \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eAvoids React from re-mounting your app shell elements when switching between the root component/\\u003ccode\\u003eHydrateFallback\\u003c/code\\u003e/\\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e which can cause a FOUC if React removes and re-adds \\u003ccode\\u003e\\u0026#x3C;link rel=\\\\\\\"stylesheet\\\\\\\"\\u003e\\u003c/code\\u003e tags from your \\u003ccode\\u003e\\u0026#x3C;Links\\u003e\\u003c/code\\u003e component.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinks\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLiveReload\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eMeta\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScripts\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eLayout\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003echarSet\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eutf-8\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eviewport\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003econtent\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ewidth=device-width, initial-scale=1\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eMeta\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinks\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* children will be the root Component, ErrorBoundary, or HydrateFallback */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScripts\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLiveReload\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e /\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eErrorBoundary\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseRouteError\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eisRouteErrorResponse\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e)) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e \\u0026#x3C;\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estatus\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estatusText\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e \\u0026#x3C;/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"50\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"51\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"52\\\\\\\"\\u003e \\u0026#x3C;\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"53\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003eError!\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"54\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e?.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emessage\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e??\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eUnknown error\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"55\\\\\\\"\\u003e \\u0026#x3C;/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"56\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"57\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eA note on \\u003ccode\\u003euseLoaderData\\u003c/code\\u003ein the \\u003ccode\\u003eLayout\\u003c/code\\u003e Component\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003euseLoaderData\\u003c/code\\u003e is not permitted to be used in \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e components because it is intended for the happy-path route rendering, and its typings have a built-in assumption that the \\u003ccode\\u003eloader\\u003c/code\\u003e ran successfully and returned something. That assumption doesn't hold in an \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e because it could have been the \\u003ccode\\u003eloader\\u003c/code\\u003e that threw and triggered the boundary! To access loader data in \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e's, you can use \\u003ccode\\u003euseRouteLoaderData\\u003c/code\\u003e which accounts for the loader data potentially being \\u003ccode\\u003eundefined\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eBecause your \\u003ccode\\u003eLayout\\u003c/code\\u003e component is used in both success and error flows, this same restriction holds. If you need to fork logic in your \\u003ccode\\u003eLayout\\u003c/code\\u003e depending on if it was a successful request or not, you can use \\u003ccode\\u003euseRouteLoaderData(\\\\\\\"root\\\\\\\")\\u003c/code\\u003e and \\u003ccode\\u003euseRouteError()\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warn\\u003eBecause your \\u003ccode\\u003e\\u0026#x3C;Layout\\u003e\\u003c/code\\u003e component is used for rendering the \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e, you should be \\u003cem\\u003every defensive\\u003c/em\\u003e to ensure that you can render your \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e without encountering any render errors. If your \\u003ccode\\u003eLayout\\u003c/code\\u003e throws another error trying to render the boundary, then it can't be used and your UI will fall back to the very minimal built-in default \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e.\\u003c/docs-warn\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"\\u0026#x22;app/root.tsx\\u0026#x22;\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"\\u0026#x22;app/root.tsx\\u0026#x22;\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eLayout\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eReact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eReactNode\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e}) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseRouteLoaderData\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eroot\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseRouteError\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003echarSet\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eutf-8\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eviewport\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003econtent\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ewidth=device-width, initial-scale=1\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eMeta\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinks\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estyle\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edangerouslySetInnerHTML\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e{\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e __html: `\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e :root {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e --themeVar: \\u003c/span\\u003e${\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e?.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ethemeVar\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e||\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefaultThemeVar\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u003c/span\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e }\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u003c/span\\u003e`,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eAnalytics\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etoken\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eanalyticsToken\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScripts\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eSee also:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/meta\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Meta\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/links\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Links\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/outlet\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Outlet\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/scroll-restoration\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;ScrollRestoration\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/scripts\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Scripts\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../components/live-reload\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;LiveReload\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\",\\\"docs/file-conventions/root\\\",\\\"headings\\\",[960],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Layout Export\\\",\\\"layout-export\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#layout-export\\\\\\": 1, "#root-route\\\\\\": 1, "$\\": 1, "$rc": 3, "*/": 11, "*/\\u003c/span\\u003e\\u003cspan": 11, "--base03": 12, "--base05": 3, "--base08": 71, "--base09": 1, "--base0a": 24, "--base0b": 27, "--base0d": 30, "--base0e": 50, "--base0f": 40, "--themevar": 2, "-1\\\\\\": 2, "-5": 2, "/$": 1, "/*": 11, "//": 1, "//github": 1, "//v2": 2, "/\u003e": 24, "/\\u003cspan": 13, "/\\u003e": 1, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 25, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/components/links\\\\\\": 1, "/components/live-reload\\\\\\": 1, "/components/meta\\\\\\": 1, "/components/outlet\\\\\\": 1, "/components/scripts\\\\\\": 1, "/components/scroll-restoration\\\\\\": 1, "/global-styles": 2, "/route/action\\\\\\": 1, "/route/client-action\\\\\\": 1, "/route/client-loader\\\\\\": 1, "/route/component\\\\\\": 1, "/route/error-boundary\\\\\\": 1, "/route/handle\\\\\\": 1, "/route/headers\\\\\\": 1, "/route/hydrate-fallback\\\\\\": 1, "/route/links\\\\\\": 1, "/route/loader\\\\\\": 1, "/route/meta\\\\\\": 1, "/route/should-revalidate\\\\\\": 1, "0===e": 1, "10": 44, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 3, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 3, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 3, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 3, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 3, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 3, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 3, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 3, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 3, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 3, "1\\\\\\": 3, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 3, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 3, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 3, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 3, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 3, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 3, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 3, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 3, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "28\\\\\\": 3, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "29\\\\\\": 3, "2\\\\\\": 3, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30\\\\\\": 3, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "31\\\\\\": 3, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "32\\\\\\": 3, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "33\\\\\\": 3, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "34\\\\\\": 3, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "35\\\\\\": 3, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "36\\\\\\": 3, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "37\\\\\\": 3, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "38\\\\\\": 3, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "39\\\\\\": 3, "3\\\\\\": 3, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "40\\\\\\": 3, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "41\\\\\\": 3, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "42\\\\\\": 2, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "43\\\\\\": 2, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "44\\\\\\": 2, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "45\\\\\\": 2, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "46\\\\\\": 2, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "47\\\\\\": 2, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "48\\\\\\": 2, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "49\\\\\\": 2, "4\\\\\\": 3, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "50\\\\\\": 2, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "51\\\\\\": 2, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "52\\\\\\": 2, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "53\\\\\\": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "54\\\\\\": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "55\\\\\\": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "56\\\\\\": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "57\\\\\\": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 3, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 3, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 3, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 3, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 1, "963": 1, "964": 1, "965": 1, "97": 1, "98": 1, "99": 1, "9\\\\\\": 3, "\u003c/\u003e": 2, "\u003c/body\u003e": 3, "\u003c/h1\u003e": 2, "\u003c/head\u003e": 3, "\u003c/html\u003e": 3, "\u003c/p\u003e": 2, "\u003c\u003e": 2, "\u003canalytics": 1, "\u003cbody\u003e": 3, "\u003ch1\u003e": 1, "\u003ch1\u003eerror": 1, "\u003chead\u003e": 3, "\u003chtml": 3, "\u003chtml\u003e": 1, "\u003clayout\u003e": 1, "\u003clink": 1, "\u003clinks": 3, "\u003clinks\u003e": 2, "\u003clivereload": 2, "\u003clivereload\u003e": 1, "\u003cmeta": 9, "\u003cmeta\u003e": 1, "\u003coutlet": 2, "\u003coutlet\u003e": 1, "\u003cp\u003e": 2, "\u003cscripts": 3, "\u003cscripts\u003e": 1, "\u003cscrollrestoration": 3, "\u003cscrollrestoration\u003e": 1, "\u003cstyle": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 2, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 3, "@remix-run/node\\": 1, "@remix-run/react": 2, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 274, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ea": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003esee": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 59, "\\n": 1, "\\u0026#x22": 2, "\\u0026#x3c": 52, "\\u003c/code\\u003e": 2, "\\u003c/docs-warn\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cdiv": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warn\\u003ebecause": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ebecause": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ebeyond": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 2, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eavoid": 1, "\\u003c/span\\u003e": 11, "\\u003c/span\\u003e$": 1, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 18, "\\u003c/span\\u003e\\u0026#x3c": 2, "\\u003c/span\\u003e\\u003cspan": 22, "\\u003ca": 1, "\\u003ccode\\u003e\\u0026#x3c": 4, "\\u003ccode\\u003eapp/root": 1, "\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e": 6, "\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eavoids": 1, "\\u003ccode\\u003ehydratefallback\\u003c/code\\u003e": 1, "\\u003ccode\\u003elayout\\u003c/code\\u003e": 5, "\\u003ccode\\u003eloader\\u003c/code\\u003e": 2, "\\u003ccode\\u003eroutes/\\u003c/code\\u003e": 1, "\\u003ccode\\u003eundefined\\u003c/code\\u003e": 1, "\\u003ccode\\u003euseloaderdata\\u003c/code\\u003ein": 1, "\\u003ccode\\u003euserouteerror": 1, "\\u003ccode\\u003euserouteloaderdata": 1, "\\u003ccode\\u003euserouteloaderdata\\u003c/code\\u003e": 1, "\\u003cem\\u003erequired\\u003c/em\\u003e": 1, "\\u003cem\\u003every": 1, "\\u003ch1": 1, "\\u003cspan": 164, "\\u003e": 175, "\\u003e/*": 11, "\\u003e//": 1, "\\u003e=\\u003c/span\\u003e": 4, "\\u003e=\\u003c/span\\u003e\\\\\\": 12, "\\u003e=\\u003c/span\\u003e\\u003cspan": 2, "\\u003e=\\u003e\\u003c/span\\u003e": 1, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 1, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 2, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 19, "\\u003e\\u003c/code\\u003e": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003elayout": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroot": 1, "\\u003e\\u003ca": 2, "\\u003e\\u003ccode\\u003e\\u0026#x3c": 6, "\\u003e\\u003ccode\\u003e\\u003cspan": 3, "\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eclientaction\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eclientloader\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003edefault\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003ehandle\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eheaders\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003ehydratefallback\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003elinks\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003emeta\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eshouldrevalidate\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003ebecause": 1, "\\u003e\\u003cpre": 3, "\\u003e\\u003cspan": 18, "\\u003eanalytics\\u003c/span\\u003e": 1, "\\u003eanalyticstoken\\u003c/span\\u003e\\u003cspan": 1, "\\u003eapp\\u003c/span\\u003e": 2, "\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 6, "\\u003echarset\\u003c/span\\u003e\\u003cspan": 3, "\\u003echildren\\u003c/span\\u003e": 2, "\\u003echildren\\u003c/span\\u003e\\u003cspan": 3, "\\u003econst\\u003c/span\\u003e": 4, "\\u003econtent\\u003c/span\\u003e\\u003cspan": 3, "\\u003edangerouslysetinnerhtml\\u003c/span\\u003e\\u003cspan": 1, "\\u003edata\\u003c/span\\u003e": 4, "\\u003edata\\u003c/span\\u003e\\u003cspan": 1, "\\u003edefault\\u003c/span\\u003e": 2, "\\u003edefaultthemevar\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003een\\u003c/span\\u003e\\\\\\": 3, "\\u003eerror\\u003c/span\\u003e": 7, "\\u003eerrorboundary\\u003c/span\\u003e": 1, "\\u003eexport\\u003c/span\\u003e": 6, "\\u003efrom\\u003c/span\\u003e": 4, "\\u003efunction\\u003c/span\\u003e": 5, "\\u003eglobalstylesheeturl\\u003c/span\\u003e": 2, "\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003eh1\\u003c/span\\u003e\\u003eerror": 1, "\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 6, "\\u003ehtml\\u003c/span\\u003e": 3, "\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003eif\\u003c/span\\u003e": 1, "\\u003eimport\\u003c/span\\u003e": 4, "\\u003eisrouteerrorresponse\\u003c/span\\u003e": 1, "\\u003elang\\u003c/span\\u003e\\u003cspan": 3, "\\u003elayout\\u003c/span\\u003e": 2, "\\u003elinks\\u003c/span\\u003e": 5, "\\u003elinks\\u003c/span\\u003e\\u003cspan": 1, "\\u003elinksfunction\\u003c/span\\u003e": 2, "\\u003elivereload\\u003c/span\\u003e": 4, "\\u003emessage\\u003c/span\\u003e": 1, "\\u003emeta\\u003c/span\\u003e": 8, "\\u003emeta\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003ename\\u003c/span\\u003e\\u003cspan": 3, "\\u003enull\\u003c/span\\u003e\\u003cspan": 1, "\\u003eoutlet\\u003c/span\\u003e": 4, "\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan": 2, "\\u003ereact\\u003c/span\\u003e": 1, "\\u003ereactnode\\u003c/span\\u003e": 1, "\\u003ereturn\\u003c/span\\u003e": 7, "\\u003erfc\\u003c/a\\u003e": 1, "\\u003eroot\\u003c/span\\u003e\\\\\\": 1, "\\u003escripts\\u003c/span\\u003e": 5, "\\u003escrollrestoration\\u003c/span\\u003e": 5, "\\u003estatus\\u003c/span\\u003e\\u003cspan": 1, "\\u003estatustext\\u003c/span\\u003e\\u003cspan": 1, "\\u003estyle\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003estylesheet\\u003c/span\\u003e\\\\\\": 1, "\\u003ethemevar\\u003c/span\\u003e\\u003cspan": 1, "\\u003etoken\\u003c/span\\u003e\\u003cspan": 1, "\\u003etype\\u003c/span\\u003e": 1, "\\u003eunknown": 1, "\\u003euserouteerror\\u003c/span\\u003e": 2, "\\u003euserouteloaderdata\\u003c/span\\u003e": 1, "\\u003eutf-8\\u003c/span\\u003e\\\\\\": 3, "\\u003eviewport\\u003c/span\\u003e\\\\\\": 3, "\\u003ewidth=device-width": 3, "\\u003e||\\u003c/span\\u003e\\u003cspan": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 32, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 153, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 2, "_958\\": 1, "_961\\": 1, "_966\\": 1, "_967\\": 1, "_9\\": 1, "__html": 2, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "access": 2, "accessibility\\": 1, "accounts": 2, "across": 2, "action": 1, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "additional": 2, "all": 15, "also": 4, "an": 5, "analyticstoken": 1, "and": 33, "another": 2, "any": 4, "anything": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 8, "app/root": 7, "application": 2, "approach": 1, "are": 2, "aria-hidden=\\\\\\": 2, "as": 9, "asked": 1, "asset": 3, "assumption": 4, "at": 1, "attrs\\": 1, "automatic": 2, "avoid": 1, "avoids": 1, "await\\": 1, "b=document": 1, "back": 2, "backend": 3, "basename": 1, "be": 11, "because": 10, "been": 4, "before": 1, "being": 2, "between": 2, "beyond": 1, "both": 2, "boundary": 4, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 3, "built": 3, "built-in": 4, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 2, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "can": 13, "catch": 1, "cause": 2, "change": 2, "changelog": 2, "changelog\\": 1, "charge": 2, "charset=": 3, "child": 2, "children": 7, "children\\": 1, "class=\\\\\\": 152, "cli": 5, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client-side": 2, "client\\": 2, "clientaction": 3, "clientaction\\": 1, "clientloader": 3, "clientloader\\": 1, "close": 1, "cloudflare/deno": 1, "cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "code": 6, "codeblock-line\\\\\\": 150, "color": 258, "com/remix-run/remix/discussions/8702\\\\\\": 1, "community": 3, "community\\": 1, "component": 13, "component/\\u003ccode\\u003ehydratefallback\\u003c/code\\u003e/\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e": 1, "component/hydratefallback/errorboundary": 1, "component\\": 1, "component\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003euseloaderdata\\u003c/code\\u003e": 1, "components": 7, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 1, "const": 4, "constraints": 2, "constraints\\": 1, "content": 6, "content=": 3, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "could": 2, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 16, "css\\": 1, "css\\u003c/span\\u003e\\\\\\": 1, "d=c": 2, "dangerouslysetinnerhtml=": 1, "data": 25, "data-code-block=\\\\\\": 3, "data-filename=\\\\\\": 6, "data-highlight=\\\\\\": 38, "data-lang=\\\\\\": 6, "data-line-number=\\\\\\": 150, "data-line-numbers=\\\\\\": 6, "data=": 1, "data\\": 2, "default": 5, "defaultthemevar": 1, "defensive": 1, "defensive\\u003c/em\\u003e": 1, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 3, "depending": 2, "deployment": 4, "deployment\\": 2, "description\\": 1, "details": 2, "dev": 3, "development": 5, "directory": 2, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 1, "doc\\": 1, "docs/file-conventions/root": 1, "docs/file-conventions/root\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsrootgetting": 1, "document": 7, "document-level": 1, "document-level\\\\\\": 1, "document/": 1, "document/\\\\\\": 1, "does": 2, "doesn": 2, "done": 1, "duplicating": 2, "during": 2, "e--": 1, "e=0": 1, "elements": 2, "else": 2, "en": 3, "encountering": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "ensure": 2, "entry": 6, "environment": 3, "error": 18, "error\\u003c/span\\u003e\\\\\\": 1, "errorboundary": 13, "errorboundary\\": 1, "errors": 2, "errors\\": 1, "everything": 3, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "export": 9, "export\\": 1, "export\\u003c/h2\\u003e\\\\n\\u003cp\\u003ebecause": 1, "exports": 6, "extract": 2, "extract\\": 1, "f=a": 1, "fall": 2, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "figured": 2, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "flows": 2, "for": 24, "fork": 2, "form": 11, "form\\": 1, "fouc": 2, "found": 3, "frequently": 1, "from": 14, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 6, "future": 4, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "globalstylesheeturl": 2, "go": 2, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "handful": 2, "handle": 3, "handle\\": 1, "handling": 4, "handling\\": 2, "happy-path": 2, "has": 2, "hascontent\\": 1, "have": 4, "headers": 3, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 15, "history": 4, "hold": 2, "holds": 2, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href": 2, "href=\\\\\\": 21, "html": 1, "html\\": 1, "html\\u003e\\u003c/code\\u003e": 1, "https": 3, "hydratefallback": 6, "hydratefallback\\": 1, "icon": 2, "icon-link\\\\\\": 2, "id=\\\\\\": 2, "if": 21, "import": 9, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 26, "inc": 1, "include": 2, "index": 3, "initial": 1, "initial-scale=1": 3, "initial-scale=1\\u003c/span\\u003e\\\\\\": 3, "insertbefore": 1, "inside": 2, "integrating": 1, "intended": 2, "interactions": 1, "into": 2, "introduction": 1, "is": 17, "isrouteerrorresponse": 3, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 16, "iterative": 1, "its": 2, "javascript": 2, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "just": 2, "key": 4, "know": 1, "lang=": 3, "layout": 11, "layout-export\\": 1, "layout-export\\\\\\": 1, "layout\\u003e\\u003c/code\\u003e": 1, "lazy": 3, "learning": 1, "let": 3, "licensed": 1, "like": 2, "link": 5, "link\\": 1, "links": 8, "links\\": 2, "links\\u003e\\u003c/code\\u003e": 1, "links\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "linksfunction": 2, "livereload": 4, "livereload\\": 1, "livereload\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\": 1, "loader": 9, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "logic": 2, "makes": 1, "management": 4, "management\\": 2, "manages": 6, "manual": 3, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "message": 1, "meta": 9, "meta\\": 2, "meta\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "migrating": 4, "minimal": 2, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 6, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "most": 1, "mostly": 2, "must": 6, "name=": 3, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 3, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "nonce": 12, "nonce-based": 6, "not": 7, "note": 2, "null": 2, "number": 1, "of": 7, "omit": 6, "on": 10, "once": 3, "one": 1, "only": 4, "open": 1, "optimization": 2, "optimization\\": 1, "optional": 2, "or": 9, "order": 2, "order\\": 1, "other": 5, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "otherwise": 6, "out": 3, "outlet": 4, "outlet\\": 1, "outlet\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "page": 2, "param": 2, "param\\": 1, "parent": 2, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "permitted": 2, "pipethrough": 1, "place": 2, "policy": 6, "position": 2, "positions": 2, "postcss": 2, "postcss\\": 1, "potentially": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "prop": 12, "proper": 2, "properly": 2, "provide": 6, "provides": 2, "pull": 1, "purposes": 2, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "ran": 2, "random": 1, "re-adds": 2, "re-mounting": 2, "react": 13, "react-router-scroll-positions": 1, "reactnode": 1, "read": 2, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regular": 3, "rel": 2, "rel=": 1, "rel=\\\\\\": 1, "related": 1, "released": 2, "reload": 2, "remix": 16, "remix\\": 2, "removechild": 2, "removeitem": 1, "removes": 2, "render": 16, "rendering": 6, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 3, "required": 1, "resource": 3, "resources": 1, "restorekey": 2, "restriction": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 7, "returned": 2, "rfc": 1, "rocking": 1, "rolling": 1, "root": 24, "root-route\\\\\\": 1, "root\\": 1, "root\\\\\\": 2, "route": 31, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "route\\u003c/h1\\u003e\\\\n\\u003cp\\u003ethe": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 15, "routes/": 1, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/file-conventions/root": 1, "run\\": 1, "running": 1, "runtimes": 3, "same": 2, "script": 2, "scripts": 10, "scripts\\": 1, "scripts\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "scroll": 2, "scrollrestoration": 4, "scrollrestoration\\": 1, "scrollrestoration\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "scrollto": 1, "security": 6, "see": 1, "server": 15, "server\\": 3, "serves": 2, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "sets": 2, "shell": 3, "shell\\\\\\": 1, "shopify": 1, "should": 2, "shouldrevalidate": 3, "shouldrevalidate\\": 1, "shown": 6, "simplifying": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "something": 2, "spa": 3, "ssr": 1, "stages": 1, "standard": 2, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "status": 1, "statustext": 1, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 258, "stylesheet": 2, "stylesheet\\\\\\": 1, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "success": 2, "successful": 2, "successfully": 2, "support": 3, "support\\": 1, "supports": 4, "switching": 2, "tabindex=\\\\\\": 2, "tags": 4, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 10, "the": 61, "themevar": 1, "then": 2, "these": 2, "they": 2, "this": 6, "threw": 2, "through": 1, "throws": 2, "title\\": 1, "tls": 2, "tls\\": 1, "to": 30, "toc\\": 1, "token=": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "transitions": 2, "triggered": 2, "true": 6, "true\\\\\\": 46, "try": 1, "trying": 2, "ts": 2, "ts\\": 1, "tsx": 1, "tsx\\\\\\": 10, "tsx\\u0026#x22": 2, "tsx\\u003c/code\\u003e": 1, "tutorial": 3, "two": 2, "type": 1, "typeof": 1, "typescript": 2, "typescript\\": 1, "typings": 2, "ui": 4, "ui\\": 1, "undefined": 1, "under": 1, "unknown": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 2, "upgrading": 3, "uploads": 2, "uploads\\": 1, "use": 10, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 10, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 3, "useloaderdata\\": 1, "useloaderdatain": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror": 3, "userouteerror\\": 1, "userouteloaderdata": 3, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "utf-8": 3, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 260, "variables": 2, "variables\\": 1, "very": 3, "view": 2, "viewport": 3, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "was": 2, "way": 1, "when": 5, "which": 4, "while": 1, "why": 1, "width=device-width": 3, "will": 10, "window": 11, "with": 4, "without": 2, "writes": 2, "writes\\": 1, "you": 31, "your": 33, "||": 4, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 7847 }, { "id": "b6a7c2b55dccee42300ff27e", "doc_id": "264b59efe9bb0f4cd34c5cf5", "title": "Route Configuration | Remix", "url": "https://v2.remix.run/docs/discussion/routes", "type": "html", "source": "remix:does", "path": "devour_data/docs/route-configuration---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsRoute ConfigurationGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageModular DesignParallel LoadingConventional Route ConfigurationConventional Route FoldersManual Route ConfigurationOn this pageModular DesignParallel LoadingConventional Route ConfigurationConventional Route FoldersManual Route ConfigurationRoute Configuration One of the foundational concepts in Remix's routing system is the use of nested routes, an approach that traces its roots back to Ember.js. With nested routes, segments of the URL are coupled to both data dependencies and the UI's component hierarchy. A URL like /sales/invoices/102000 not only reveals a clear path in the application but also delineates the relationships and dependencies for different components. Modular Design Nested routes provide clarity by segmenting URLs into multiple parts. Each segment directly correlates with a particular data requirement and component. For instance, in the URL /sales/invoices/102000, each segment - sales, invoices, and 102000 - can be associated with specific data points and UI sections, making it intuitive to manage in the codebase. A feature of nested routing is the ability for several routes in the nested route tree to match a single URL. This granularity ensures that each route is primarily focused on its specific URL segment and related slice of UI. This approach champions the principles of modularity and separation of concerns, ensuring each route remains focused on its core responsibilities. Parallel Loading In some web applications, the sequential loading of data and assets can sometimes lead to an artificially slow user experience. Even when data dependencies aren't interdependent, they may be loaded sequentially because they are coupled to rendering hierarchy, creating an undesirable chain of requests. Remix leverages its nested routing system to optimize load times. When a URL matches multiple routes, Remix will load the required data and assets for all matching routes in parallel. By doing this, Remix effectively sidesteps the conventional pitfall of chained request sequences. This strategy, combined with modern browsers' ability to handle multiple concurrent requests efficiently, positions Remix as a front-runner in delivering highly responsive and swift web applications. It's not just about making your data fetching fast; it's about fetching it in an organized way to provide the best possible experience for the end user. Conventional Route Configuration Remix introduces a key convention to help streamline the routing process: the app/routes folder. When a developer introduces a file within this folder, Remix inherently understands it as a route. This convention simplifies the process of defining routes, associating them with URLs, and rendering the associated components. Here's a sample directory that uses the routes folder convention: app/ ├── routes/ │ ├── _index.tsx │ ├── about.tsx │ ├── concerts._index.tsx │ ├── concerts.$city.tsx │ ├── concerts.trending.tsx │ └── concerts.tsx └── root.tsx All the routes that start with app/routes/concerts. will be child routes of app/routes/concerts.tsx. URL Matched Route Layout / app/routes/_index.tsx app/root.tsx /about app/routes/about.tsx app/root.tsx /concerts app/routes/concerts._index.tsx app/routes/concerts.tsx /concerts/trending app/routes/concerts.trending.tsx app/routes/concerts.tsx /concerts/salt-lake-city app/routes/concerts.$city.tsx app/routes/concerts.tsx Conventional Route Folders For routes that require additional modules or assets, a folder inside of app/routes with a route.tsx file can be used. This method: Co-locates Modules: It gathers all elements connected to a particular route, ensuring logic, styles, and components are closely knit. Simplifies Imports: With related modules in one place, managing imports becomes straightforward, enhancing code maintainability. Facilitates Automatic Code Organization: Using the route.tsx setup inherently promotes a well-organized codebase, beneficial as the application scales. The same routes from above could instead be organized like this: app/ ├── routes/ │ ├── _index/ │ │ ├── signup-form.tsx │ │ └── route.tsx │ ├── about/ │ │ ├── header.tsx │ │ └── route.tsx │ ├── concerts/ │ │ ├── favorites-cookie.ts │ │ └── route.tsx │ ├── concerts.$city/ │ │ └── route.tsx │ ├── concerts._index/ │ │ ├── featured.tsx │ │ └── route.tsx │ └── concerts.trending/ │ ├── card.tsx │ ├── route.tsx │ └── sponsored.tsx └── root.tsx You can read more about the specific patterns in the file names and other features in the Route File Conventions reference. Only the folders directly beneath app/routes will be registered as a route. Deeply nested folders are ignored. The file at app/routes/about/header/route.tsx will not create a route. app/ ├── routes/ │ └── about/ │ ├── header/ │ │ └── route.tsx │ └── route.tsx └── root.tsx Manual Route Configuration While the app/routes folder offers a convenient convention for developers, Remix appreciates that one size doesn't fit all. There are times when the provided convention might not align with specific project requirements or a developer's preferences. In such cases, Remix allows for manual route configuration via vite.config.ts. This flexibility ensures developers can structure their application in a way that makes sense for their project. If you have not yet migrated to Vite and are still using the Classic Remix Compiler, you can configure routes manually in your remix.config.js file. A common way to structure an app is by top-level features folders. Consider that routes related to a particular theme, like concerts, likely share several modules. Organizing them under a single folder makes sense: app/ ├── about/ │ └── route.tsx ├── concerts/ │ ├── card.tsx │ ├── city.tsx │ ├── favorites-cookie.ts │ ├── home.tsx │ ├── layout.tsx │ ├── sponsored.tsx │ └── trending.tsx ├── home/ │ ├── header.tsx │ └── route.tsx └── root.tsx To configure this structure into the same URLs as the previous examples, you can use the routes function in vite.config.ts: import { vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [ remix({ routes(defineRoutes) { return defineRoutes((route) =\u003e { route(\"/\", \"home/route.tsx\", { index: true }); route(\"about\", \"about/route.tsx\"); route(\"concerts\", \"concerts/layout.tsx\", () =\u003e { route(\"\", \"concerts/home.tsx\", { index: true }); route(\"trending\", \"concerts/trending.tsx\"); route(\":city\", \"concerts/city.tsx\"); }); }); }, }), ], }); Remix's route configuration approach blends convention with flexibility. You can use the app/routes folder for an easy, organized way to set up your routes. If you want more control, dislike the file names, or have unique needs, there's vite.config.ts. It is expected that many apps forgo the routes folder convention in favor of vite.config.ts.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_978\\\":-5,\\\"_979\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":977},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"docs/discussion/routes.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"route-configuration\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#route-configuration\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRoute Configuration\\u003c/h1\\u003e\\\\n\\u003cp\\u003eOne of the foundational concepts in Remix's routing system is the use of nested routes, an approach that traces its roots back to Ember.js. With nested routes, segments of the URL are coupled to both data dependencies and the UI's component hierarchy. A URL like \\u003ccode\\u003e/sales/invoices/102000\\u003c/code\\u003e not only reveals a clear path in the application but also delineates the relationships and dependencies for different components.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"modular-design\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#modular-design\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eModular Design\\u003c/h2\\u003e\\\\n\\u003cp\\u003eNested routes provide clarity by segmenting URLs into multiple parts. Each segment directly correlates with a particular data requirement and component. For instance, in the URL \\u003ccode\\u003e/sales/invoices/102000\\u003c/code\\u003e, each segment - \\u003ccode\\u003esales\\u003c/code\\u003e, \\u003ccode\\u003einvoices\\u003c/code\\u003e, and \\u003ccode\\u003e102000\\u003c/code\\u003e - can be associated with specific data points and UI sections, making it intuitive to manage in the codebase.\\u003c/p\\u003e\\\\n\\u003cp\\u003eA feature of nested routing is the ability for several routes in the nested route tree to match a single URL. This granularity ensures that each route is primarily focused on its specific URL segment and related slice of UI. This approach champions the principles of modularity and separation of concerns, ensuring each route remains focused on its core responsibilities.\\u003c/p\\u003e\\\\n\\u003ciframe src=\\\\\\\"/_docs/routing\\\\\\\" class=\\\\\\\"w-full aspect-[1/1] rounded-lg overflow-hidden pb-4\\\\\\\"\\u003e\\u003c/iframe\\u003e\\\\n\\u003ch2 id=\\\\\\\"parallel-loading\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#parallel-loading\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eParallel Loading\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIn some web applications, the sequential loading of data and assets can sometimes lead to an artificially slow user experience. Even when data dependencies aren't interdependent, they may be loaded sequentially because they are coupled to rendering hierarchy, creating an undesirable chain of requests.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix leverages its nested routing system to optimize load times. When a URL matches multiple routes, Remix will load the required data and assets for all matching routes in parallel. By doing this, Remix effectively sidesteps the conventional pitfall of chained request sequences.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThis strategy, combined with modern browsers' ability to handle multiple concurrent requests efficiently, positions Remix as a front-runner in delivering highly responsive and swift web applications. It's not just about making your data fetching fast; it's about fetching it in an organized way to provide the best possible experience for the end user.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"conventional-route-configuration\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#conventional-route-configuration\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eConventional Route Configuration\\u003c/h2\\u003e\\\\n\\u003cp\\u003eRemix introduces a key convention to help streamline the routing process: the \\u003ccode\\u003eapp/routes\\u003c/code\\u003e folder. When a developer introduces a file within this folder, Remix inherently understands it as a route. This convention simplifies the process of defining routes, associating them with URLs, and rendering the associated components.\\u003c/p\\u003e\\\\n\\u003cp\\u003eHere's a sample directory that uses the routes folder convention:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003eapp/\\\\n├── routes/\\\\n│ ├── _index.tsx\\\\n│ ├── about.tsx\\\\n│ ├── concerts._index.tsx\\\\n│ ├── concerts.$city.tsx\\\\n│ ├── concerts.trending.tsx\\\\n│ └── concerts.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eAll the routes that start with \\u003ccode\\u003eapp/routes/concerts.\\u003c/code\\u003e will be child routes of \\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003cth\\u003eLayout\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts._index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/trending\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.trending.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.$city.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003ch2 id=\\\\\\\"conventional-route-folders\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#conventional-route-folders\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eConventional Route Folders\\u003c/h2\\u003e\\\\n\\u003cp\\u003eFor routes that require additional modules or assets, a folder inside of \\u003ccode\\u003eapp/routes\\u003c/code\\u003e with a \\u003ccode\\u003eroute.tsx\\u003c/code\\u003e file can be used. This method:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eCo-locates Modules\\u003c/strong\\u003e: It gathers all elements connected to a particular route, ensuring logic, styles, and components are closely knit.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eSimplifies Imports\\u003c/strong\\u003e: With related modules in one place, managing imports becomes straightforward, enhancing code maintainability.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eFacilitates Automatic Code Organization\\u003c/strong\\u003e: Using the \\u003ccode\\u003eroute.tsx\\u003c/code\\u003e setup inherently promotes a well-organized codebase, beneficial as the application scales.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eThe same routes from above could instead be organized like this:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003eapp/\\\\n├── routes/\\\\n│ ├── _index/\\\\n│ │ ├── signup-form.tsx\\\\n│ │ └── route.tsx\\\\n│ ├── about/\\\\n│ │ ├── header.tsx\\\\n│ │ └── route.tsx\\\\n│ ├── concerts/\\\\n│ │ ├── favorites-cookie.ts\\\\n│ │ └── route.tsx\\\\n│ ├── concerts.$city/\\\\n│ │ └── route.tsx\\\\n│ ├── concerts._index/\\\\n│ │ ├── featured.tsx\\\\n│ │ └── route.tsx\\\\n│ └── concerts.trending/\\\\n│ ├── card.tsx\\\\n│ ├── route.tsx\\\\n│ └── sponsored.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eYou can read more about the specific patterns in the file names and other features in the \\u003ca href=\\\\\\\"../file-conventions/routes\\\\\\\"\\u003eRoute File Conventions\\u003c/a\\u003e reference.\\u003c/p\\u003e\\\\n\\u003cp\\u003eOnly the folders directly beneath \\u003ccode\\u003eapp/routes\\u003c/code\\u003e will be registered as a route. Deeply nested folders are ignored. The file at \\u003ccode\\u003eapp/routes/about/header/route.tsx\\u003c/code\\u003e will not create a route.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003eapp/\\\\n├── routes/\\\\n│ └── about/\\\\n│ ├── header/\\\\n│ │ └── route.tsx\\\\n│ └── route.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch2 id=\\\\\\\"manual-route-configuration\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#manual-route-configuration\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eManual Route Configuration\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhile the \\u003ccode\\u003eapp/routes\\u003c/code\\u003e folder offers a convenient convention for developers, Remix appreciates that \\u003ca href=\\\\\\\"../file-conventions/routes#disclaimer\\\\\\\"\\u003eone size doesn't fit all\\u003c/a\\u003e. There are times when the provided convention might not align with specific project requirements or a developer's preferences. In such cases, Remix allows for manual route configuration via \\u003ca href=\\\\\\\"../file-conventions/vite-config#routes\\\\\\\"\\u003e\\u003ccode\\u003evite.config.ts\\u003c/code\\u003e\\u003c/a\\u003e. This flexibility ensures developers can structure their application in a way that makes sense for their project.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003eIf you have not yet migrated to \\u003ca href=\\\\\\\"../guides/vite\\\\\\\"\\u003eVite\\u003c/a\\u003e and are still using the \\u003ca href=\\\\\\\"../guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\\"\\u003eClassic Remix Compiler\\u003c/a\\u003e, you can configure routes manually in your \\u003ca href=\\\\\\\"../file-conventions/remix-config\\\\\\\"\\u003e\\u003ccode\\u003eremix.config.js\\u003c/code\\u003e\\u003c/a\\u003e file.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eA common way to structure an app is by top-level features folders. Consider that routes related to a particular theme, like concerts, likely share several modules. Organizing them under a single folder makes sense:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003eapp/\\\\n├── about/\\\\n│ └── route.tsx\\\\n├── concerts/\\\\n│ ├── card.tsx\\\\n│ ├── city.tsx\\\\n│ ├── favorites-cookie.ts\\\\n│ ├── home.tsx\\\\n│ ├── layout.tsx\\\\n│ ├── sponsored.tsx\\\\n│ └── trending.tsx\\\\n├── home/\\\\n│ ├── header.tsx\\\\n│ └── route.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eTo configure this structure into the same URLs as the previous examples, you can use the \\u003ccode\\u003eroutes\\u003c/code\\u003e function in \\u003ccode\\u003evite.config.ts\\u003c/code\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evitePlugin\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eas\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e plugins: [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroutes\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eroute\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ehome/route.tsx\\u003c/span\\u003e\\\\\\\", { index: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eabout\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eabout/route.tsx\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econcerts\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econcerts/layout.tsx\\u003c/span\\u003e\\\\\\\", () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econcerts/home.tsx\\u003c/span\\u003e\\\\\\\", { index: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etrending\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econcerts/trending.tsx\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e:city\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econcerts/city.tsx\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e }),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e ],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eRemix's route configuration approach blends convention with flexibility. You can use the \\u003ccode\\u003eapp/routes\\u003c/code\\u003e folder for an easy, organized way to set up your routes. If you want more control, dislike the file names, or have unique needs, there's \\u003ccode\\u003evite.config.ts\\u003c/code\\u003e. It is expected that many apps forgo the routes folder convention in favor of \\u003ccode\\u003evite.config.ts\\u003c/code\\u003e.\\u003c/p\\u003e\\\",\\\"docs/discussion/routes\\\",\\\"headings\\\",[960,965,968,971,974],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Modular Design\\\",\\\"modular-design\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"Parallel Loading\\\",\\\"parallel-loading\\\",{\\\"_961\\\":962,\\\"_955\\\":969,\\\"_24\\\":970},\\\"Conventional Route Configuration\\\",\\\"conventional-route-configuration\\\",{\\\"_961\\\":962,\\\"_955\\\":972,\\\"_24\\\":973},\\\"Conventional Route Folders\\\",\\\"conventional-route-folders\\\",{\\\"_961\\\":962,\\\"_955\\\":975,\\\"_24\\\":976},\\\"Manual Route Configuration\\\",\\\"manual-route-configuration\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#conventional-route-configuration\\\\\\": 1, "#conventional-route-folders\\\\\\": 1, "#manual-route-configuration\\\\\\": 1, "#modular-design\\\\\\": 1, "#parallel-loading\\\\\\": 1, "#route-configuration\\\\\\": 1, "$\\": 1, "$city": 4, "$city/": 1, "$city/\\\\n│": 1, "$rc": 3, "--base05": 1, "--base08": 5, "--base09": 2, "--base0b": 13, "--base0d": 12, "--base0e": 8, "-1\\\\\\": 6, "-5": 2, "/$": 1, "//v2": 2, "/_docs/routing\\\\\\": 1, "/about": 1, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/concerts": 1, "/concerts/salt-lake-city": 1, "/concerts/trending": 1, "/file-conventions/remix-config\\\\\\": 1, "/file-conventions/routes#disclaimer\\\\\\": 1, "/file-conventions/routes\\\\\\": 1, "/file-conventions/vite-config#routes\\\\\\": 1, "/guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\": 1, "/guides/vite\\\\\\": 1, "/sales/invoices/102000": 2, "0===e": 1, "1/1": 1, "10": 43, "100": 1, "101": 1, "102": 1, "102000": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 1, "1\\\\\\": 1, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 1, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 1, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 6, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 1, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 2, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 5, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "976": 1, "977": 1, "98": 1, "99": 1, "9\\\\\\": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 3, "@remix-run/": 1, "@remix-run/dev": 2, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 58, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 18, "\\n": 1, "\\u003c/code\\u003e": 1, "\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ea": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003efacilitates": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003esimplifies": 1, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003c/p\\u003e\\\\n\\u003ch2": 2, "\\u003c/p\\u003e\\\\n\\u003ciframe": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003eif": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ea": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ehere": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eonly": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 4, "\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eurl\\u003c/th\\u003e\\\\n\\u003cth\\u003ematched": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eco-locates": 1, "\\u003ca": 6, "\\u003ccode\\u003e/sales/invoices/102000\\u003c/code\\u003e": 2, "\\u003ccode\\u003e102000\\u003c/code\\u003e": 1, "\\u003ccode\\u003eapp/routes/about/header/route": 1, "\\u003ccode\\u003eapp/routes/concerts": 2, "\\u003ccode\\u003eapp/routes\\u003c/code\\u003e": 5, "\\u003ccode\\u003einvoices\\u003c/code\\u003e": 1, "\\u003ccode\\u003eroute": 2, "\\u003ccode\\u003eroutes\\u003c/code\\u003e": 1, "\\u003ccode\\u003esales\\u003c/code\\u003e": 1, "\\u003ccode\\u003evite": 3, "\\u003ch1": 1, "\\u003cspan": 37, "\\u003e": 17, "\\u003e/\\u003c/span\\u003e\\\\\\": 1, "\\u003e=\\u003e\\u003c/span\\u003e": 2, "\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e\\u003c/iframe\\u003e\\\\n\\u003ch2": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003econventional": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003emanual": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003emodular": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eparallel": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroute": 1, "\\u003e\\u003ca": 6, "\\u003e\\u003ccode\\u003e\\u003cspan": 1, "\\u003e\\u003ccode\\u003eremix": 1, "\\u003e\\u003ccode\\u003evite": 1, "\\u003e\\u003cpre": 1, "\\u003e\\u003cspan": 9, "\\u003eabout/route": 1, "\\u003eabout\\u003c/span\\u003e\\\\\\": 1, "\\u003eapp/\\\\n├──": 4, "\\u003eas\\u003c/span\\u003e": 1, "\\u003eclassic": 1, "\\u003econcerts/city": 1, "\\u003econcerts/home": 1, "\\u003econcerts/layout": 1, "\\u003econcerts/trending": 1, "\\u003econcerts\\u003c/span\\u003e\\\\\\": 1, "\\u003edefault\\u003c/span\\u003e": 1, "\\u003edefineconfig\\u003c/span\\u003e": 2, "\\u003edefineroutes\\u003c/span\\u003e": 2, "\\u003eexport\\u003c/span\\u003e": 1, "\\u003efrom\\u003c/span\\u003e": 2, "\\u003ehome/route": 1, "\\u003eimport\\u003c/span\\u003e": 2, "\\u003eone": 1, "\\u003eremix\\u003c/span\\u003e": 2, "\\u003ereturn\\u003c/span\\u003e": 1, "\\u003eroute": 1, "\\u003eroute\\u003c/span\\u003e": 7, "\\u003eroutes\\u003c/span\\u003e": 1, "\\u003etrending\\u003c/span\\u003e\\\\\\": 1, "\\u003etrue\\u003c/span\\u003e": 2, "\\u003evite\\u003c/a\\u003e": 1, "\\u003evite\\u003c/span\\u003e\\\\\\": 1, "\\u003eviteplugin\\u003c/span\\u003e": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 28, "_22\\": 152, "_24\\": 157, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 6, "_958\\": 1, "_961\\": 5, "_978\\": 1, "_979\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_index": 6, "_index/": 2, "_index/\\\\n│": 2, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "ability": 4, "about": 10, "about/": 3, "about/\\\\n│": 3, "about/route": 1, "above": 2, "accessibility\\": 1, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "additional": 2, "align": 2, "all": 7, "all\\u003c/a\\u003e": 1, "allows": 2, "also": 2, "an": 13, "and": 37, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 4, "app/": 4, "app/root": 2, "app/routes": 5, "app/routes/_index": 1, "app/routes/about": 1, "app/routes/about/header/route": 1, "app/routes/concerts": 8, "application": 6, "applications": 4, "appreciates": 2, "approach": 7, "apps": 2, "are": 12, "aren": 2, "aria-hidden=\\\\\\": 6, "artificially": 2, "as": 14, "asked": 1, "aspect-": 1, "asset": 3, "assets": 6, "associated": 4, "associating": 2, "at": 3, "attrs\\": 1, "automatic": 2, "await\\": 1, "b=document": 1, "back": 2, "backend": 3, "basename": 1, "be": 13, "because": 2, "becomes": 2, "been": 2, "before": 1, "beneath": 2, "beneficial": 2, "best": 2, "blends": 2, "both": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 3, "browsers": 2, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 2, "by": 6, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "can": 17, "card": 4, "cases": 2, "catch": 1, "chain": 2, "chained": 2, "champions": 2, "changelog": 2, "changelog\\": 1, "child": 2, "children\\": 1, "city": 3, "city\\u003c/span\\u003e\\\\\\": 1, "clarity": 2, "class=\\\\\\": 31, "classic": 1, "clear": 2, "cli": 5, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "closely": 2, "co-locates": 1, "code": 8, "codebase": 4, "codeblock-line\\\\\\": 20, "color": 41, "combined": 2, "common": 2, "community": 3, "community\\": 1, "compiler": 1, "compiler\\u003c/a\\u003e": 1, "component": 6, "component\\": 1, "components": 7, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concepts": 2, "concerns": 2, "concerts": 17, "concerts/": 2, "concerts/\\\\n│": 2, "concerts/city": 1, "concerts/home": 1, "concerts/layout": 1, "concerts/trending": 1, "concurrency": 3, "concurrent": 2, "config": 15, "configuration": 10, "configuration\\": 3, "configuration\\u003c/h1\\u003e\\\\n\\u003cp\\u003eone": 1, "configuration\\u003c/h2\\u003e\\\\n\\u003cp\\u003eremix": 1, "configuration\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhile": 1, "configurationconventional": 2, "configurationgetting": 1, "configurationon": 1, "configurationroute": 1, "configure": 4, "connected": 2, "consider": 2, "console": 1, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "control": 2, "controller": 2, "convenient": 2, "convention": 14, "conventional": 6, "conventional-route-configuration\\": 1, "conventional-route-configuration\\\\\\": 1, "conventional-route-folders\\": 1, "conventional-route-folders\\\\\\": 1, "conventions": 3, "conventions\\": 1, "conventions\\u003c/a\\u003e": 1, "cookies\\": 1, "core": 2, "correlates": 2, "could": 2, "coupled": 4, "create": 2, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "creating": 2, "css": 15, "css\\": 1, "d=c": 2, "data": 30, "data-code-block=\\\\\\": 1, "data-filename=\\\\\\": 2, "data-lang=\\\\\\": 2, "data-line-number=\\\\\\": 20, "data-line-numbers=\\\\\\": 2, "data=": 1, "data\\": 2, "deeply": 2, "default": 1, "defer": 2, "defer\\": 1, "deferred": 1, "defineconfig": 2, "defineroutes": 2, "defining": 2, "delineates": 2, "delivering": 2, "dependencies": 6, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "design": 1, "design\\": 1, "design\\u003c/h2\\u003e\\\\n\\u003cp\\u003enested": 1, "designparallel": 2, "dev": 3, "developer": 4, "developers": 4, "development": 3, "different": 2, "directly": 4, "directory": 2, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "dislike": 2, "do": 1, "doc\\": 1, "docs/discussion/routes": 1, "docs/discussion/routes\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsroute": 1, "document": 1, "doesn": 2, "doing": 2, "done": 1, "e--": 1, "e=0": 1, "each": 8, "easy": 2, "effectively": 2, "efficiently": 2, "elements": 2, "else": 2, "ember": 2, "end": 2, "enhancement": 2, "enhancement\\": 1, "enhancing": 2, "enqueue": 1, "ensures": 4, "ensuring": 4, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "even": 2, "everything": 1, "examples": 3, "execution": 2, "execution\\": 1, "expected": 2, "experience": 4, "explanation": 2, "explanation\\": 1, "export": 1, "extract": 2, "extract\\": 1, "f=a": 1, "facilitates": 1, "false": 3, "faqs": 2, "faqs\\": 1, "fast": 2, "favor": 2, "favorites-cookie": 4, "feature": 2, "featured": 2, "features": 5, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "fetching": 4, "file": 23, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "firstchild": 2, "fit": 2, "flags": 2, "flags\\": 1, "flexibility": 4, "flow": 2, "flow\\": 1, "focused": 4, "folder": 16, "folders": 7, "folders\\": 1, "folders\\u003c/h2\\u003e\\\\n\\u003cp\\u003efor": 1, "foldersmanual": 2, "for": 25, "forgo": 2, "form": 11, "form\\": 1, "found": 3, "foundational": 2, "frequently": 1, "from": 10, "front-runner": 2, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 3, "future": 4, "gathers": 2, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "gotchas": 2, "gotchas\\": 1, "granularity": 2, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "handle": 4, "handle\\": 1, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "have": 4, "header": 4, "header/": 1, "header/\\\\n│": 1, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 3, "here": 2, "hierarchy": 4, "highly": 2, "history": 4, "home": 2, "home/": 1, "home/\\\\n│": 1, "home/route": 1, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href=\\\\\\": 12, "html": 1, "html\\": 1, "https": 2, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 6, "icon-link\\\\\\": 6, "id=\\\\\\": 6, "if": 9, "ignored": 2, "import": 7, "import\\\\\\": 1, "imports": 7, "imports\\": 2, "imports\\u003c/strong\\u003e": 1, "in": 39, "inc": 1, "index": 7, "inherently": 4, "initial": 1, "insertbefore": 1, "inside": 2, "instance": 2, "instead": 2, "integrating": 1, "interactions": 1, "interdependent": 2, "into": 6, "introduces": 4, "introduction": 1, "intuitive": 2, "invoices": 1, "is": 11, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 14, "iterative": 1, "its": 8, "javascript": 2, "javascript\\": 1, "js": 10, "js\\": 1, "js\\u003c/code\\u003e\\u003c/a\\u003e": 1, "json": 3, "json\\": 1, "just": 2, "key": 6, "knit": 2, "know": 1, "language-text\\\\\\": 4, "layout": 3, "lazy": 3, "lead": 2, "learning": 1, "let": 3, "leverages": 2, "licensed": 1, "like": 6, "likely": 2, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "load": 4, "loaded": 2, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 6, "loading\\": 2, "loading\\u003c/h2\\u003e\\\\n\\u003cp\\u003ein": 1, "loadingconventional": 2, "local": 3, "localhost\\": 1, "logic": 2, "maintainability": 2, "makes": 5, "making": 4, "manage": 2, "management": 4, "management\\": 2, "managing": 2, "manual": 7, "manual-route-configuration\\": 1, "manual-route-configuration\\\\\\": 1, "manually": 2, "many": 2, "match": 2, "matched": 1, "matches": 2, "matching": 2, "math": 1, "may": 2, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "method": 2, "might": 2, "migrated": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "modern": 2, "modular": 2, "modular-design\\": 1, "modular-design\\\\\\": 1, "modularity": 2, "module": 6, "module\\": 1, "moduleaction": 2, "modules": 13, "modules\\": 3, "modules\\u003c/strong\\u003e": 1, "more": 4, "most": 1, "multiple": 6, "names": 4, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 1, "needs": 2, "nested": 13, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 13, "null": 1, "number": 1, "of": 31, "offers": 2, "on": 7, "once": 1, "one": 5, "only": 3, "open": 1, "optimization": 2, "optimization\\": 1, "optimize": 2, "or": 7, "order\\": 1, "organization": 1, "organization\\u003c/strong\\u003e": 1, "organized": 6, "organizing": 2, "other": 5, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "overflow-hidden": 1, "pagemodular": 2, "parallel": 4, "parallel-loading\\": 1, "parallel-loading\\\\\\": 1, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "particular": 6, "parts": 2, "path": 2, "patterns": 2, "pb-4\\\\\\": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "pitfall": 2, "place": 2, "plugins": 2, "points": 2, "positions": 4, "possible": 2, "postcss": 2, "postcss\\": 1, "preferences": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previous": 2, "previoussibling": 1, "primarily": 2, "primary": 1, "principles": 2, "process": 4, "progressive": 3, "project": 5, "promotes": 2, "provide": 4, "provided": 2, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "react": 8, "react-router-scroll-positions": 1, "read": 2, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "reference": 2, "registered": 2, "regular": 3, "related": 7, "relationships": 2, "released": 2, "remains": 2, "remix": 32, "remix\\": 2, "removechild": 2, "removeitem": 1, "rendering": 4, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 3, "requests": 4, "require": 2, "required": 2, "requirement": 2, "requirements": 2, "resource": 3, "resources": 1, "responsibilities": 2, "responsive": 2, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 1, "reveals": 2, "rocking": 1, "rolling": 1, "root": 11, "root\\": 1, "roots": 2, "rounded-lg": 1, "route": 77, "route-configuration\\\\\\": 1, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "route\\u003c/th\\u003e\\\\n\\u003cth\\u003elayout\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 39, "routes/": 3, "routes/\\\\n│": 3, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "routing": 8, "run/docs/discussion/routes": 1, "run\\": 1, "running": 1, "runtimes": 3, "sales": 1, "same": 4, "sample": 2, "scales": 2, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "sections": 2, "segment": 6, "segmenting": 2, "segments": 2, "sense": 4, "separation": 2, "sequences": 2, "sequential": 2, "sequentially": 2, "server": 15, "server\\": 3, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 2, "setup": 2, "several": 4, "share": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "sidesteps": 2, "signup-form": 2, "simplifies": 3, "simplifying": 1, "single": 7, "siteurl\\": 1, "size": 2, "slice": 3, "slow": 2, "slug\\": 1, "some": 2, "sometimes": 2, "spa": 3, "specific": 8, "sponsored": 4, "src=\\\\\\": 1, "ssr": 1, "stages": 1, "start": 6, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "still": 2, "storagekey2": 3, "storedy": 3, "straightforward": 2, "strategy": 4, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "streamline": 2, "structure": 6, "style=\\\\\\": 41, "styles": 2, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "such": 2, "support": 3, "support\\": 1, "swift": 2, "system": 4, "tabindex=\\\\\\": 6, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 18, "the": 83, "their": 4, "them": 4, "theme": 2, "there": 4, "they": 4, "this": 23, "through": 1, "times": 4, "title\\": 1, "tls": 2, "tls\\": 1, "to": 41, "toc\\": 1, "top-level": 2, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "traces": 2, "tree": 2, "trending": 7, "trending/": 1, "trending/\\\\n│": 1, "true": 8, "true\\\\\\": 8, "try": 1, "ts": 8, "ts\\": 1, "ts\\\\\\": 2, "ts\\\\n│": 2, "ts\\u003c/code\\u003e": 3, "ts\\u003c/code\\u003e\\u003c/a\\u003e": 1, "tsx": 52, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch2": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eall": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eto": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eyou": 1, "tsx\\\\n│": 22, "tsx\\\\n└──": 4, "tsx\\\\n├──": 2, "tsx\\u003c/code\\u003e": 4, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003ch2": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/trending\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root": 2, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts": 3, "tsx\\u003c/span\\u003e\\\\\\": 6, "tutorial": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "typescript\\\\\\": 2, "ui": 8, "ui\\": 1, "under": 3, "understands": 2, "undesirable": 2, "unique": 2, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 2, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 13, "urls": 6, "use": 6, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 2, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 4, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "uses": 2, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 4, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 43, "variables": 2, "variables\\": 1, "via": 2, "view": 2, "vite": 13, "vite\\": 1, "viteplugin": 1, "vs": 6, "w-full": 1, "walk": 1, "want": 2, "way": 9, "web": 4, "well-organized": 2, "when": 9, "while": 2, "why": 1, "will": 10, "window": 11, "with": 24, "within": 2, "writes": 2, "writes\\": 1, "yet": 2, "you": 16, "your": 9, "||": 3, "©": 1, "•docs": 1, "│": 58, "└──": 32, "├──": 54, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 6185 }, { "id": "7d5821286b96f3a6e429f257", "doc_id": "ea23df76f6b19fe71c00f254", "title": "Route File Naming | Remix", "url": "https://v2.remix.run/docs/file-conventions/routes", "type": "html", "source": "remix:does", "path": "devour_data/docs/route-file-naming---remix-ea23df76.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsRoute File NamingGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageDisclaimerRoot RouteBasic RoutesDot DelimitersDynamic SegmentsNested RoutesNested URLs without Layout NestingNested Layouts without Nested URLsOptional SegmentsSplat RoutesEscaping Special CharactersFolders for OrganizationScalingOn this pageDisclaimerRoot RouteBasic RoutesDot DelimitersDynamic SegmentsNested RoutesNested URLs without Layout NestingNested Layouts without Nested URLsOptional SegmentsSplat RoutesEscaping Special CharactersFolders for OrganizationScalingRoute File Naming While you can configure routes via the \"routes\" plugin option, most routes are created with this file system convention. Add a file, get a route. Please note that you can use either .js, .jsx, .ts or .tsx file extensions. We'll stick with .tsx in the examples to avoid duplication. Dilum Sanjaya made an awesome visualization of how routes in the file system map to the URL in your app that might help you understand these conventions. Disclaimer Before we go too far into the Remix convention, though, we'd like to point out that file-based routing is an incredibly subjective idea. Some folks love the \"flat\" routes idea, some folks hate it and would prefer nesting routes in folders. Some folks simply hate file-based routing and would prefer to configure routes via JSON. Some folks would prefer to configure routes via JSX like they did in their React Router SPA's. The point is, we are well aware of this and from the get-go, Remix has always given you a first-class way to opt-out via the routes/ignoredRouteFiles and configure your routes manually. But, there has to be some default so that folks can get up and running quickly and easily - and we think that the flat routes convention document below is a pretty good default that scales well for small-to-medium sized apps. Large applications with hundreds or thousands of routes will always be a bit chaotic no matter what convention you use — and the idea is that via the routes config, you get to build exactly the convention that works best for your application/team. It would be quite literally impossible for Remix to have a default convention that made everyone happy. We'd much rather give you a fairly straightforward default and then let the community build any number of conventions you can pick and choose from. So, before we dive into the details of the Remix default convention, here are some community alternatives you can check out if you decide that our default is not your cup of tea. remix-flat-routes - The Remix default is basically a simplified version of this package. The author has continued to iterate on and evolve this package, so if you generally like the \"flat routes\" idea but want a bit more power (including a hybrid approach of files and folders), definitely check this one out. remix-custom-routes - If you want even more customization, this package lets you define that types of files should be treated as routes. This lets you go beyond the simple flat/nested concept and do something such as \"any file with an extension of .route.tsx is a route\". remix-json-routes - If you just want to specify your routes via a config file, this is your jam — provide Remix a JSON object with your routes and skip the flat/nested concept entirely. There's even a JSX option in there too. Root Route app/ ├── routes/ └── root.tsx The file in app/root.tsx is your root layout, or \"root route\" (very sorry for those of you who pronounce those words the same way!). It works just like all other routes, so you can export a loader, action, etc. The root route typically looks something like this. It serves as the root layout of the entire app, all other routes will render inside the \u003cOutlet /\u003e. import { Links, Meta, Outlet, Scripts, ScrollRestoration, } from \"@remix-run/react\"; export default function Root() { return ( \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cLinks /\u003e \u003cMeta /\u003e \u003c/head\u003e \u003cbody\u003e \u003cOutlet /\u003e \u003cScrollRestoration /\u003e \u003cScripts /\u003e \u003c/body\u003e \u003c/html\u003e ); } Basic Routes Any JavaScript or TypeScript files in the app/routes directory will become routes in your application. The filename maps to the route's URL pathname, except for _index.tsx which is the index route for the root route. app/ ├── routes/ │ ├── _index.tsx │ └── about.tsx └── root.tsx URL Matched Routes / app/routes/_index.tsx /about app/routes/about.tsx Note that these routes will be rendered in the outlet of app/root.tsx because of nested routing. Dot Delimiters Adding a . to a route filename will create a / in the URL. app/ ├── routes/ │ ├── _index.tsx │ ├── about.tsx │ ├── concerts.trending.tsx │ ├── concerts.salt-lake-city.tsx │ └── concerts.san-diego.tsx └── root.tsx URL Matched Route / app/routes/_index.tsx /about app/routes/about.tsx /concerts/trending app/routes/concerts.trending.tsx /concerts/salt-lake-city app/routes/concerts.salt-lake-city.tsx /concerts/san-diego app/routes/concerts.san-diego.tsx The dot delimiter also creates nesting, see the nesting section for more information. Dynamic Segments Usually your URLs aren't static but data-driven. Dynamic segments allow you to match segments of the URL and use that value in your code. You create them with the $ prefix. app/ ├── routes/ │ ├── _index.tsx │ ├── about.tsx │ ├── concerts.$city.tsx │ └── concerts.trending.tsx └── root.tsx URL Matched Route / app/routes/_index.tsx /about app/routes/about.tsx /concerts/trending app/routes/concerts.trending.tsx /concerts/salt-lake-city app/routes/concerts.$city.tsx /concerts/san-diego app/routes/concerts.$city.tsx Remix will parse the value from the URL and pass it to various APIs. We call these values \"URL Parameters\". The most useful places to access the URL params are in loaders and actions. export async function loader({ params, }: LoaderFunctionArgs) { return fakeDb.getAllConcertsForCity(params.city); } You'll note the property name on the params object maps directly to the name of your file: $city.tsx becomes params.city. Routes can have multiple dynamic segments, like concerts.$city.$date, both are accessed on the params object by name: export async function loader({ params, }: LoaderFunctionArgs) { return fake.db.getConcerts({ date: params.date, city: params.city, }); } See the routing guide for more information. Nested Routes Nested Routing is the general idea of coupling segments of the URL to component hierarchy and data. You can read more about it in the Routing Guide. You create nested routes with dot delimiters. If the filename before the . matches another route filename, it automatically becomes a child route to the matching parent. Consider these routes: app/ ├── routes/ │ ├── _index.tsx │ ├── about.tsx │ ├── concerts._index.tsx │ ├── concerts.$city.tsx │ ├── concerts.trending.tsx │ └── concerts.tsx └── root.tsx All the routes that start with app/routes/concerts. will be child routes of app/routes/concerts.tsx and render inside the parent route's outlet_component. URL Matched Route Layout / app/routes/_index.tsx app/root.tsx /about app/routes/about.tsx app/root.tsx /concerts app/routes/concerts._index.tsx app/routes/concerts.tsx /concerts/trending app/routes/concerts.trending.tsx app/routes/concerts.tsx /concerts/salt-lake-city app/routes/concerts.$city.tsx app/routes/concerts.tsx Note you typically want to add an index route when you add nested routes so that something renders inside the parent's outlet when users visit the parent URL directly. For example, if the URL is /concerts/salt-lake-city then the UI hierarchy will look like this: \u003cRoot\u003e \u003cConcerts\u003e \u003cCity /\u003e \u003c/Concerts\u003e \u003c/Root\u003e Nested URLs without Layout Nesting Sometimes you want the URL to be nested, but you don't want the automatic layout nesting. You can opt out of nesting with a trailing underscore on the parent segment: app/ ├── routes/ │ ├── _index.tsx │ ├── about.tsx │ ├── concerts.$city.tsx │ ├── concerts.trending.tsx │ ├── concerts.tsx │ └── concerts_.mine.tsx └── root.tsx URL Matched Route Layout / app/routes/_index.tsx app/root.tsx /about app/routes/about.tsx app/root.tsx /concerts/mine app/routes/concerts_.mine.tsx app/root.tsx /concerts/trending app/routes/concerts.trending.tsx app/routes/concerts.tsx /concerts/salt-lake-city app/routes/concerts.$city.tsx app/routes/concerts.tsx Note that /concerts/mine does not nest with app/routes/concerts.tsx anymore, but app/root.tsx. The trailing_ underscore creates a path segment, but it does not create layout nesting. Think of the trailing_ underscore as the long bit at the end of your parent's signature, writing you out of the will, removing the segment that follows from the layout nesting. Nested Layouts without Nested URLs We call these Pathless Routes Sometimes you want to share a layout with a group of routes without adding any path segments to the URL. A common example is a set of authentication routes that have a different header/footer than the public pages or the logged-in-app experience. You can do this with a _leading underscore. app/ ├── routes/ │ ├── _auth.login.tsx │ ├── _auth.register.tsx │ ├── _auth.tsx │ ├── _index.tsx │ ├── concerts.$city.tsx │ └── concerts.tsx └── root.tsx URL Matched Route Layout / app/routes/_index.tsx app/root.tsx /login app/routes/_auth.login.tsx app/routes/_auth.tsx /register app/routes/_auth.register.tsx app/routes/_auth.tsx /concerts app/routes/concerts.tsx app/root.tsx /concerts/salt-lake-city app/routes/concerts.$city.tsx app/routes/concerts.tsx Think of the _leading underscore as a blanket you're pulling over the filename, hiding the filename from the URL. Optional Segments Wrapping a route segment in parentheses will make the segment optional. app/ ├── routes/ │ ├── ($lang)._index.tsx │ ├── ($lang).$productId.tsx │ └── ($lang).categories.tsx └── root.tsx URL Matched Route / app/routes/($lang)._index.tsx /categories app/routes/($lang).categories.tsx /en/categories app/routes/($lang).categories.tsx /fr/categories app/routes/($lang).categories.tsx /american-flag-speedo app/routes/($lang)._index.tsx /en/american-flag-speedo app/routes/($lang).$productId.tsx /fr/american-flag-speedo app/routes/($lang).$productId.tsx You may wonder why /american-flag-speedo is matching the ($lang)._index.tsx route instead of ($lang).$productId.tsx. This is because when you have an optional dynamic param segment followed by another dynamic param, Remix cannot reliably determine if a single-segment URL such as /american-flag-speedo should match /:lang /:productId. Optional segments match eagerly and thus it will match /:lang. If you have this type of setup, it's recommended to look at params.lang in the ($lang)._index.tsx loader and redirect to /:lang/american-flag-speedo for the current/default language if params.lang is not a valid language code. Splat Routes While dynamic segments match a single path segment (the stuff between two / in a URL), a splat route will match the rest of a URL, including the slashes. app/ ├── routes/ │ ├── _index.tsx │ ├── $.tsx │ ├── about.tsx │ └── files.$.tsx └── root.tsx URL Matched Route / app/routes/_index.tsx /about app/routes/about.tsx /beef/and/cheese app/routes/$.tsx /files app/routes/files.$.tsx /files/talks/remix-conf_old.pdf app/routes/files.$.tsx /files/talks/remix-conf_final.pdf app/routes/files.$.tsx /files/talks/remix-conf-FINAL-MAY_2022.pdf app/routes/files.$.tsx Similar to dynamic route parameters, you can access the value of the matched path on the splat route's params with the \"*\" key. export async function loader({ params, }: LoaderFunctionArgs) { const filePath = params[\"*\"]; return fake.getFileInfo(filePath); } Escaping Special Characters If you want one of the special characters Remix uses for these route conventions to actually be a part of the URL, you can escape the conventions with [] characters. Filename URL app/routes/sitemap[.]xml.tsx /sitemap.xml app/routes/[sitemap.xml].tsx /sitemap.xml app/routes/weird-url.[_index].tsx /weird-url/_index app/routes/dolla-bills-[$].tsx /dolla-bills-$ app/routes/[[so-weird]].tsx /[so-weird] Folders for Organization Routes can also be folders with a route.tsx file inside defining the route module. The rest of the files in the folder will not become routes. This allows you to organize your code closer to the routes that use them instead of repeating the feature names across other folders. The files inside a folder have no meaning for the route paths, the route path is completely defined by the folder name Consider these routes: app/ ├── routes/ │ ├── _landing._index.tsx │ ├── _landing.about.tsx │ ├── _landing.tsx │ ├── app._index.tsx │ ├── app.projects.tsx │ ├── app.tsx │ └── app_.projects.$id.roadmap.tsx └── root.tsx Some, or all of them can be folders holding their own route module inside. app/ ├── routes/ │ ├── _landing._index/ │ │ ├── route.tsx │ │ └── scroll-experience.tsx │ ├── _landing.about/ │ │ ├── employee-profile-card.tsx │ │ ├── get-employee-data.server.ts │ │ ├── route.tsx │ │ └── team-photo.jpg │ ├── _landing/ │ │ ├── footer.tsx │ │ ├── header.tsx │ │ └── route.tsx │ ├── app._index/ │ │ ├── route.tsx │ │ └── stats.tsx │ ├── app.projects/ │ │ ├── get-projects.server.ts │ │ ├── project-buttons.tsx │ │ ├── project-card.tsx │ │ └── route.tsx │ ├── app/ │ │ ├── footer.tsx │ │ ├── primary-nav.tsx │ │ └── route.tsx │ ├── app_.projects.$id.roadmap/ │ │ ├── chart.tsx │ │ ├── route.tsx │ │ └── update-timeline.server.ts │ └── contact-us.tsx └── root.tsx Note that when you turn a route module into a folder, the route module becomes folder/route.tsx, all other modules in the folder will not become routes. For example: # these are the same route: app/routes/app.tsx app/routes/app/route.tsx # as are these app/routes/app._index.tsx app/routes/app._index/route.tsx Scaling Our general recommendation for scale is to make every route a folder and put the modules used exclusively by that route in the folder, then put the shared modules outside the routes folder elsewhere. This has a couple of benefits: Easy to identify shared modules, so tread lightly when changing them Easy to organize and refactor the modules for a specific route without creating \"file organization fatigue\" and cluttering up other parts of the app © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_1002\\\":-5,\\\"_1003\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":1001},{\\\"_18\\\":204},\\\"docs/file-conventions/routes.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"route-file-naming\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#route-file-naming\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRoute File Naming\\u003c/h1\\u003e\\\\n\\u003cp\\u003eWhile you can configure routes via \\u003ca href=\\\\\\\"./vite-config#routes\\\\\\\"\\u003ethe \\\\\\\"routes\\\\\\\" plugin option\\u003c/a\\u003e, most routes are created with this file system convention. Add a file, get a route.\\u003c/p\\u003e\\\\n\\u003cp\\u003ePlease note that you can use either \\u003ccode\\u003e.js\\u003c/code\\u003e, \\u003ccode\\u003e.jsx\\u003c/code\\u003e, \\u003ccode\\u003e.ts\\u003c/code\\u003e or \\u003ccode\\u003e.tsx\\u003c/code\\u003e file extensions. We'll stick with \\u003ccode\\u003e.tsx\\u003c/code\\u003e in the examples to avoid duplication.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003eDilum Sanjaya made \\u003ca href=\\\\\\\"https://interactive-remix-routing-v2.netlify.app/\\\\\\\"\\u003ean awesome visualization\\u003c/a\\u003e of how routes in the file system map to the URL in your app that might help you understand these conventions.\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"disclaimer\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#disclaimer\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eDisclaimer\\u003c/h2\\u003e\\\\n\\u003cp\\u003eBefore we go too far into the Remix convention, though, we'd like to point out that file-based routing is an \\u003cstrong\\u003eincredibly\\u003c/strong\\u003e subjective idea. Some folks love the \\\\\\\"flat\\\\\\\" routes idea, some folks hate it and would prefer nesting routes in folders. Some folks simply hate file-based routing and would prefer to configure routes via JSON. Some folks would prefer to configure routes via JSX like they did in their React Router SPA's.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe point is, we are well aware of this and from the get-go, Remix has always given you a first-class way to opt-out via the \\u003ca href=\\\\\\\"./vite-config#routes\\\\\\\"\\u003e\\u003ccode\\u003eroutes\\u003c/code\\u003e\\u003c/a\\u003e/\\u003ca href=\\\\\\\"./vite-config#ignoredroutefiles\\\\\\\"\\u003e\\u003ccode\\u003eignoredRouteFiles\\u003c/code\\u003e\\u003c/a\\u003e and \\u003ca href=\\\\\\\"../discussion/routes#manual-route-configuration\\\\\\\"\\u003econfigure your routes manually\\u003c/a\\u003e. But, there has to be \\u003cem\\u003esome\\u003c/em\\u003e default so that folks can get up and running quickly and easily - and we think that the flat routes convention document below is a pretty good default that scales well for small-to-medium sized apps.\\u003c/p\\u003e\\\\n\\u003cp\\u003eLarge applications with hundreds or thousands of routes will \\u003cem\\u003ealways\\u003c/em\\u003e be a bit chaotic no matter what convention you use — and the idea is that via the \\u003ccode\\u003eroutes\\u003c/code\\u003e config, you get to build \\u003cem\\u003eexactly\\u003c/em\\u003e the convention that works best for your application/team. It would be quite literally impossible for Remix to have a default convention that made everyone happy. We'd much rather give you a fairly straightforward default and then let the community build any number of conventions you can pick and choose from.\\u003c/p\\u003e\\\\n\\u003cp\\u003eSo, before we dive into the details of the Remix default convention, here are some community alternatives you can check out if you decide that our default is not your cup of tea.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/kiliman/remix-flat-routes\\\\\\\"\\u003e\\u003ccode\\u003eremix-flat-routes\\u003c/code\\u003e\\u003c/a\\u003e - The Remix default is basically a simplified version of this package. The author has continued to iterate on and evolve this package, so if you generally like the \\\\\\\"flat routes\\\\\\\" idea but want a bit more power (including a hybrid approach of files and folders), definitely check this one out.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/jacobparis-insiders/remix-custom-routes\\\\\\\"\\u003e\\u003ccode\\u003eremix-custom-routes\\u003c/code\\u003e\\u003c/a\\u003e - If you want even more customization, this package lets you define that types of files should be treated as routes. This lets you go beyond the simple flat/nested concept and do something such as \\u003cem\\u003e\\\\\\\"any file with an extension of \\u003ccode\\u003e.route.tsx\\u003c/code\\u003e is a route\\\\\\\"\\u003c/em\\u003e.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/brophdawg11/remix-json-routes\\\\\\\"\\u003e\\u003ccode\\u003eremix-json-routes\\u003c/code\\u003e\\u003c/a\\u003e - If you just want to specify your routes via a config file, this is your jam — provide Remix a JSON object with your routes and skip the flat/nested concept entirely. There's even a JSX option in there too.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2 id=\\\\\\\"root-route\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#root-route\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRoot Route\\u003c/h2\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003eapp/\\\\n├── routes/\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eThe file in \\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e is your root layout, or \\\\\\\"root route\\\\\\\" (very sorry for those of you who pronounce those words the same way!). It works just like all other routes, so you can export a \\u003ca href=\\\\\\\"../route/loader\\\\\\\"\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e, \\u003ca href=\\\\\\\"../route/action\\\\\\\"\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e, etc.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe root route typically looks something like this. It serves as the root layout of the entire app, all other routes will render inside the \\u003ca href=\\\\\\\"../components/outlet\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Outlet /\\u003e\\u003c/code\\u003e\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinks\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eMeta\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScripts\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eRoot\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinks\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eMeta\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScripts\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"basic-routes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#basic-routes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eBasic Routes\\u003c/h2\\u003e\\\\n\\u003cp\\u003eAny JavaScript or TypeScript files in the \\u003ccode\\u003eapp/routes\\u003c/code\\u003e directory will become routes in your application. The filename maps to the route's URL pathname, except for \\u003ccode\\u003e_index.tsx\\u003c/code\\u003e which is the \\u003ca href=\\\\\\\"../discussion/routes#index-routes\\\\\\\"\\u003eindex route\\u003c/a\\u003e for the \\u003ca href=\\\\\\\"#root-route\\\\\\\"\\u003eroot route\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003eapp/\\\\n├── routes/\\\\n│ ├── _index.tsx\\\\n│ └── about.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Routes\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eNote that these routes will be rendered in the outlet of \\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e because of \\u003ca href=\\\\\\\"../discussion/routes#what-is-nested-routing\\\\\\\"\\u003enested routing\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"dot-delimiters\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#dot-delimiters\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eDot Delimiters\\u003c/h2\\u003e\\\\n\\u003cp\\u003eAdding a \\u003ccode\\u003e.\\u003c/code\\u003e to a route filename will create a \\u003ccode\\u003e/\\u003c/code\\u003e in the URL.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── _index.tsx\\\\n│ ├── about.tsx\\\\n│ ├── concerts.trending.tsx\\\\n│ ├── concerts.salt-lake-city.tsx\\\\n│ └── concerts.san-diego.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/trending\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.trending.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.salt-lake-city.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/san-diego\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.san-diego.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eThe dot delimiter also creates nesting, see the \\u003ca href=\\\\\\\"#nested-routes\\\\\\\"\\u003enesting section\\u003c/a\\u003e for more information.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"dynamic-segments\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#dynamic-segments\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eDynamic Segments\\u003c/h2\\u003e\\\\n\\u003cp\\u003eUsually your URLs aren't static but data-driven. Dynamic segments allow you to match segments of the URL and use that value in your code. You create them with the \\u003ccode\\u003e$\\u003c/code\\u003e prefix.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── _index.tsx\\\\n│ ├── about.tsx\\\\n│ ├── concerts.$city.tsx\\\\n│ └── concerts.trending.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/trending\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.trending.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.$city.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/san-diego\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.$city.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eRemix will parse the value from the URL and pass it to various APIs. We call these values \\\\\\\"URL Parameters\\\\\\\". The most useful places to access the URL params are in \\u003ca href=\\\\\\\"../route/loader\\\\\\\"\\u003eloaders\\u003c/a\\u003e and \\u003ca href=\\\\\\\"../route/action\\\\\\\"\\u003eactions\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efakeDb\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetAllConcertsForCity\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecity\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eYou'll note the property name on the \\u003ccode\\u003eparams\\u003c/code\\u003e object maps directly to the name of your file: \\u003ccode\\u003e$city.tsx\\u003c/code\\u003e becomes \\u003ccode\\u003eparams.city\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRoutes can have multiple dynamic segments, like \\u003ccode\\u003econcerts.$city.$date\\u003c/code\\u003e, both are accessed on the params object by name:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efake\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edb\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetConcerts\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e date: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edate\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e city: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecity\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eSee the \\u003ca href=\\\\\\\"../discussion/routes\\\\\\\"\\u003erouting guide\\u003c/a\\u003e for more information.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"nested-routes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#nested-routes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNested Routes\\u003c/h2\\u003e\\\\n\\u003cp\\u003eNested Routing is the general idea of coupling segments of the URL to component hierarchy and data. You can read more about it in the \\u003ca href=\\\\\\\"../discussion/routes#what-is-nested-routing\\\\\\\"\\u003eRouting Guide\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou create nested routes with \\u003ca href=\\\\\\\"#dot-delimiters\\\\\\\"\\u003edot delimiters\\u003c/a\\u003e. If the filename before the \\u003ccode\\u003e.\\u003c/code\\u003e matches another route filename, it automatically becomes a child route to the matching parent. Consider these routes:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── _index.tsx\\\\n│ ├── about.tsx\\\\n│ ├── concerts._index.tsx\\\\n│ ├── concerts.$city.tsx\\\\n│ ├── concerts.trending.tsx\\\\n│ └── concerts.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eAll the routes that start with \\u003ccode\\u003eapp/routes/concerts.\\u003c/code\\u003e will be child routes of \\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e and render inside the parent route's \\u003ca href=\\\\\\\"../components/outlet\\\\\\\"\\u003eoutlet_component\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003cth\\u003eLayout\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts._index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/trending\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.trending.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.$city.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eNote you typically want to add an index route when you add nested routes so that something renders inside the parent's outlet when users visit the parent URL directly.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor example, if the URL is \\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e then the UI hierarchy will look like this:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRoot\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eConcerts\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eCity\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eConcerts\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRoot\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"nested-urls-without-layout-nesting\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#nested-urls-without-layout-nesting\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNested URLs without Layout Nesting\\u003c/h2\\u003e\\\\n\\u003cp\\u003eSometimes you want the URL to be nested, but you don't want the automatic layout nesting. You can opt out of nesting with a trailing underscore on the parent segment:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── _index.tsx\\\\n│ ├── about.tsx\\\\n│ ├── concerts.$city.tsx\\\\n│ ├── concerts.trending.tsx\\\\n│ ├── concerts.tsx\\\\n│ └── concerts_.mine.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003cth\\u003eLayout\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/mine\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts_.mine.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/trending\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.trending.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.$city.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eNote that \\u003ccode\\u003e/concerts/mine\\u003c/code\\u003e does not nest with \\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e anymore, but \\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e. The \\u003ccode\\u003etrailing_\\u003c/code\\u003e underscore creates a path segment, but it does not create layout nesting.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThink of the \\u003ccode\\u003etrailing_\\u003c/code\\u003e underscore as the long bit at the end of your parent's signature, writing you out of the will, removing the segment that follows from the layout nesting.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"nested-layouts-without-nested-urls\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#nested-layouts-without-nested-urls\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNested Layouts without Nested URLs\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWe call these \\u003ca name=\\\\\\\"pathless-routes\\\\\\\"\\u003e\\u003cb\\u003ePathless Routes\\u003c/b\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eSometimes you want to share a layout with a group of routes without adding any path segments to the URL. A common example is a set of authentication routes that have a different header/footer than the public pages or the logged-in-app experience. You can do this with a \\u003ccode\\u003e_leading\\u003c/code\\u003e underscore.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── _auth.login.tsx\\\\n│ ├── _auth.register.tsx\\\\n│ ├── _auth.tsx\\\\n│ ├── _index.tsx\\\\n│ ├── concerts.$city.tsx\\\\n│ └── concerts.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003cth\\u003eLayout\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/login\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_auth.login.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_auth.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/register\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_auth.register.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_auth.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.$city.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eThink of the \\u003ccode\\u003e_leading\\u003c/code\\u003e underscore as a blanket you're pulling over the filename, hiding the filename from the URL.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"optional-segments\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#optional-segments\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eOptional Segments\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWrapping a route segment in parentheses will make the segment optional.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── ($lang)._index.tsx\\\\n│ ├── ($lang).$productId.tsx\\\\n│ └── ($lang).categories.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/($lang)._index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/categories\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/($lang).categories.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/en/categories\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/($lang).categories.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/fr/categories\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/($lang).categories.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/american-flag-speedo\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/($lang)._index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/en/american-flag-speedo\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/($lang).$productId.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/fr/american-flag-speedo\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/($lang).$productId.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eYou may wonder why \\u003ccode\\u003e/american-flag-speedo\\u003c/code\\u003e is matching the \\u003ccode\\u003e($lang)._index.tsx\\u003c/code\\u003e route instead of \\u003ccode\\u003e($lang).$productId.tsx\\u003c/code\\u003e. This is because when you have an optional dynamic param segment followed by another dynamic param, Remix cannot reliably determine if a single-segment URL such as \\u003ccode\\u003e/american-flag-speedo\\u003c/code\\u003e should match \\u003ccode\\u003e/:lang\\u003c/code\\u003e \\u003ccode\\u003e/:productId\\u003c/code\\u003e. Optional segments match eagerly and thus it will match \\u003ccode\\u003e/:lang\\u003c/code\\u003e. If you have this type of setup, it's recommended to look at \\u003ccode\\u003eparams.lang\\u003c/code\\u003e in the \\u003ccode\\u003e($lang)._index.tsx\\u003c/code\\u003e loader and redirect to \\u003ccode\\u003e/:lang/american-flag-speedo\\u003c/code\\u003e for the current/default language if \\u003ccode\\u003eparams.lang\\u003c/code\\u003e is not a valid language code.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"splat-routes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#splat-routes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSplat Routes\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhile \\u003ca href=\\\\\\\"#dynamic-segments\\\\\\\"\\u003edynamic segments\\u003c/a\\u003e match a single path segment (the stuff between two \\u003ccode\\u003e/\\u003c/code\\u003e in a URL), a splat route will match the rest of a URL, including the slashes.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── _index.tsx\\\\n│ ├── $.tsx\\\\n│ ├── about.tsx\\\\n│ └── files.$.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/beef/and/cheese\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/$.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/files.$.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files/talks/remix-conf_old.pdf\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/files.$.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files/talks/remix-conf_final.pdf\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/files.$.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files/talks/remix-conf-FINAL-MAY_2022.pdf\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/files.$.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eSimilar to dynamic route parameters, you can access the value of the matched path on the splat route's \\u003ccode\\u003eparams\\u003c/code\\u003e with the \\u003ccode\\u003e\\\\\\\"*\\\\\\\"\\u003c/code\\u003e key.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/files.$.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/files.$.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efilePath\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e[\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e*\\u003c/span\\u003e\\\\\\\"];\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efake\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetFileInfo\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efilePath\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"escaping-special-characters\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#escaping-special-characters\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eEscaping Special Characters\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIf you want one of the special characters Remix uses for these route conventions to actually be a part of the URL, you can escape the conventions with \\u003ccode\\u003e[]\\u003c/code\\u003e characters.\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eFilename\\u003c/th\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/sitemap[.]xml.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/sitemap.xml\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/[sitemap.xml].tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/sitemap.xml\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/weird-url.[_index].tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/weird-url/_index\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/dolla-bills-[$].tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/dolla-bills-$\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/[[so-weird]].tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/[so-weird]\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003ch2 id=\\\\\\\"folders-for-organization\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#folders-for-organization\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eFolders for Organization\\u003c/h2\\u003e\\\\n\\u003cp\\u003eRoutes can also be folders with a \\u003ccode\\u003eroute.tsx\\u003c/code\\u003e file inside defining the route module. The rest of the files in the folder will not become routes. This allows you to organize your code closer to the routes that use them instead of repeating the feature names across other folders.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003eThe files inside a folder have no meaning for the route paths, the route path is completely defined by the folder name\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eConsider these routes:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── _landing._index.tsx\\\\n│ ├── _landing.about.tsx\\\\n│ ├── _landing.tsx\\\\n│ ├── app._index.tsx\\\\n│ ├── app.projects.tsx\\\\n│ ├── app.tsx\\\\n│ └── app_.projects.$id.roadmap.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eSome, or all of them can be folders holding their own \\u003ccode\\u003eroute\\u003c/code\\u003e module inside.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003eapp/\\\\n├── routes/\\\\n│ ├── _landing._index/\\\\n│ │ ├── route.tsx\\\\n│ │ └── scroll-experience.tsx\\\\n│ ├── _landing.about/\\\\n│ │ ├── employee-profile-card.tsx\\\\n│ │ ├── get-employee-data.server.ts\\\\n│ │ ├── route.tsx\\\\n│ │ └── team-photo.jpg\\\\n│ ├── _landing/\\\\n│ │ ├── footer.tsx\\\\n│ │ ├── header.tsx\\\\n│ │ └── route.tsx\\\\n│ ├── app._index/\\\\n│ │ ├── route.tsx\\\\n│ │ └── stats.tsx\\\\n│ ├── app.projects/\\\\n│ │ ├── get-projects.server.ts\\\\n│ │ ├── project-buttons.tsx\\\\n│ │ ├── project-card.tsx\\\\n│ │ └── route.tsx\\\\n│ ├── app/\\\\n│ │ ├── footer.tsx\\\\n│ │ ├── primary-nav.tsx\\\\n│ │ └── route.tsx\\\\n│ ├── app_.projects.$id.roadmap/\\\\n│ │ ├── chart.tsx\\\\n│ │ ├── route.tsx\\\\n│ │ └── update-timeline.server.ts\\\\n│ └── contact-us.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eNote that when you turn a route module into a folder, the route module becomes \\u003ccode\\u003efolder/route.tsx\\u003c/code\\u003e, all other modules in the folder will not become routes. For example:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003e# these are the same route:\\\\napp/routes/app.tsx\\\\napp/routes/app/route.tsx\\\\n\\\\n# as are these\\\\napp/routes/app._index.tsx\\\\napp/routes/app._index/route.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch2 id=\\\\\\\"scaling\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#scaling\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eScaling\\u003c/h2\\u003e\\\\n\\u003cp\\u003eOur general recommendation for scale is to make every route a folder and put the modules used exclusively by that route in the folder, then put the shared modules outside the \\u003ccode\\u003eroutes\\u003c/code\\u003e folder elsewhere. This has a couple of benefits:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eEasy to identify shared modules, so tread lightly when changing them\\u003c/li\\u003e\\\\n\\u003cli\\u003eEasy to organize and refactor the modules for a specific route without creating \\\\\\\"file organization fatigue\\\\\\\" and cluttering up other parts of the app\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\",\\\"docs/file-conventions/routes\\\",\\\"headings\\\",[960,965,968,971,974,977,980,983,986,989,992,995,998],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Disclaimer\\\",\\\"disclaimer\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"Root Route\\\",\\\"root-route\\\",{\\\"_961\\\":962,\\\"_955\\\":969,\\\"_24\\\":970},\\\"Basic Routes\\\",\\\"basic-routes\\\",{\\\"_961\\\":962,\\\"_955\\\":972,\\\"_24\\\":973},\\\"Dot Delimiters\\\",\\\"dot-delimiters\\\",{\\\"_961\\\":962,\\\"_955\\\":975,\\\"_24\\\":976},\\\"Dynamic Segments\\\",\\\"dynamic-segments\\\",{\\\"_961\\\":962,\\\"_955\\\":978,\\\"_24\\\":979},\\\"Nested Routes\\\",\\\"nested-routes\\\",{\\\"_961\\\":962,\\\"_955\\\":981,\\\"_24\\\":982},\\\"Nested URLs without Layout Nesting\\\",\\\"nested-urls-without-layout-nesting\\\",{\\\"_961\\\":962,\\\"_955\\\":984,\\\"_24\\\":985},\\\"Nested Layouts without Nested URLs\\\",\\\"nested-layouts-without-nested-urls\\\",{\\\"_961\\\":962,\\\"_955\\\":987,\\\"_24\\\":988},\\\"Optional Segments\\\",\\\"optional-segments\\\",{\\\"_961\\\":962,\\\"_955\\\":990,\\\"_24\\\":991},\\\"Splat Routes\\\",\\\"splat-routes\\\",{\\\"_961\\\":962,\\\"_955\\\":993,\\\"_24\\\":994},\\\"Escaping Special Characters\\\",\\\"escaping-special-characters\\\",{\\\"_961\\\":962,\\\"_955\\\":996,\\\"_24\\\":997},\\\"Folders for Organization\\\",\\\"folders-for-organization\\\",{\\\"_961\\\":962,\\\"_955\\\":999,\\\"_24\\\":1000},\\\"Scaling\\\",\\\"scaling\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#basic-routes\\\\\\": 1, "#disclaimer\\\\\\": 1, "#dot-delimiters\\\\\\": 2, "#dynamic-segments\\\\\\": 2, "#escaping-special-characters\\\\\\": 1, "#folders-for-organization\\\\\\": 1, "#nested-layouts-without-nested-urls\\\\\\": 1, "#nested-routes\\\\\\": 2, "#nested-urls-without-layout-nesting\\\\\\": 1, "#optional-segments\\\\\\": 1, "#root-route\\\\\\": 2, "#route-file-naming\\\\\\": 1, "#scaling\\\\\\": 1, "#splat-routes\\\\\\": 1, "$\\": 1, "$city": 21, "$date": 1, "$date\\u003c/code\\u003e": 1, "$id": 4, "$lang": 26, "$productid": 8, "$rc": 3, "*\\\\\\": 1, "--base05": 5, "--base08": 26, "--base0a": 14, "--base0b": 3, "--base0d": 13, "--base0e": 19, "-1\\\\\\": 14, "-5": 2, "/$": 1, "//github": 3, "//interactive-remix-routing-v2": 1, "//v2": 2, "/\u003e": 7, "/\\u003cspan": 5, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 6, "/\\u003e\\u003c/code\\u003e\\u003c/a\\u003e": 1, "/about": 6, "/american-flag-speedo": 3, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/beef/and/cheese": 1, "/categories": 1, "/components/outlet\\\\\\": 2, "/concerts": 2, "/concerts/mine": 2, "/concerts/salt-lake-city": 6, "/concerts/san-diego": 2, "/concerts/trending": 4, "/discussion/routes#index-routes\\\\\\": 1, "/discussion/routes#manual-route-configuration\\\\\\": 1, "/discussion/routes#what-is-nested-routing\\\\\\": 2, "/discussion/routes\\\\\\": 1, "/dolla-bills-$": 1, "/en/american-flag-speedo": 1, "/en/categories": 1, "/files": 1, "/files/talks/remix-conf-final-may_2022": 1, "/files/talks/remix-conf_final": 1, "/files/talks/remix-conf_old": 1, "/fr/american-flag-speedo": 1, "/fr/categories": 1, "/login": 1, "/register": 1, "/route/action\\\\\\": 2, "/route/loader\\\\\\": 2, "/sitemap": 2, "/vite-config#ignoredroutefiles\\\\\\": 1, "/vite-config#routes\\\\\\": 2, "/weird-url/_index": 1, "0===e": 1, "10": 43, "100": 1, "1000": 1, "1001": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 1, "1\\\\\\": 5, "200": 1, "201": 1, "202": 1, "203": 1, "204": 2, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 5, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 5, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 5, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 5, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 3, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 2, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 2, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 13, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "976": 1, "977": 1, "978": 1, "979": 1, "98": 1, "980": 1, "981": 1, "982": 1, "983": 1, "984": 1, "985": 1, "986": 1, "987": 1, "988": 1, "989": 1, "99": 1, "990": 1, "991": 1, "992": 1, "993": 1, "994": 1, "995": 1, "996": 1, "997": 1, "998": 1, "999": 1, "9\\\\\\": 1, "\u003c/body\u003e": 1, "\u003c/concerts\u003e": 1, "\u003c/head\u003e": 1, "\u003c/html\u003e": 1, "\u003c/root\u003e": 1, "\u003cbody\u003e": 1, "\u003ccity": 1, "\u003cconcerts\u003e": 1, "\u003chead\u003e": 1, "\u003chtml": 1, "\u003clinks": 1, "\u003cmeta": 1, "\u003coutlet": 2, "\u003croot\u003e": 1, "\u003cscripts": 1, "\u003cscrollrestoration": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/react": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 94, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003esee": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 26, "\\\\napp/routes/app": 1, "\\n": 1, "\\u0026#x3c": 14, "\\u003c/code\\u003e": 5, "\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003ch2": 1, "\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003ch2": 1, "\\u003c/em\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 2, "\\u003c/p\\u003e\\\\n\\u003cdiv": 5, "\\u003c/p\\u003e\\\\n\\u003ch2": 6, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003edilum": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003ethe": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efor": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003elarge": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eplease": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eroutes": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eso": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethe": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethink": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 10, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003e#": 1, "\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003efilename\\u003c/th\\u003e\\\\n\\u003cth\\u003eurl\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/sitemap": 1, "\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eurl\\u003c/th\\u003e\\\\n\\u003cth\\u003ematched": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eeasy": 1, "\\u003c/span\\u003e": 3, "\\u003ca": 19, "\\u003ccode\\u003e": 12, "\\u003ccode\\u003e$\\u003c/code\\u003e": 1, "\\u003ccode\\u003e$city": 1, "\\u003ccode\\u003e/": 4, "\\u003ccode\\u003e/\\u003c/code\\u003e": 2, "\\u003ccode\\u003e/american-flag-speedo\\u003c/code\\u003e": 2, "\\u003ccode\\u003e/concerts/mine\\u003c/code\\u003e": 1, "\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e": 1, "\\u003ccode\\u003e\\\\\\": 1, "\\u003ccode\\u003e_index": 1, "\\u003ccode\\u003e_leading\\u003c/code\\u003e": 2, "\\u003ccode\\u003eapp/root": 3, "\\u003ccode\\u003eapp/routes/concerts": 3, "\\u003ccode\\u003eapp/routes\\u003c/code\\u003e": 1, "\\u003ccode\\u003econcerts": 1, "\\u003ccode\\u003efolder/route": 1, "\\u003ccode\\u003eparams": 3, "\\u003ccode\\u003eparams\\u003c/code\\u003e": 2, "\\u003ccode\\u003eroute": 1, "\\u003ccode\\u003eroute\\u003c/code\\u003e": 1, "\\u003ccode\\u003eroutes\\u003c/code\\u003e": 2, "\\u003ccode\\u003etrailing_\\u003c/code\\u003e": 2, "\\u003cem\\u003e\\\\\\": 1, "\\u003cem\\u003ealways\\u003c/em\\u003e": 1, "\\u003cem\\u003eexactly\\u003c/em\\u003e": 1, "\\u003cem\\u003esome\\u003c/em\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 64, "\\u003cstrong\\u003eincredibly\\u003c/strong\\u003e": 1, "\\u003e": 50, "\\u003e*\\u003c/span\\u003e\\\\\\": 1, "\\u003e=\\u003c/span\\u003e": 1, "\\u003e=\\u003c/span\\u003e\\\\\\": 1, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003e\\u0026#x3c": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebasic": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003edisclaimer\\u003c/h2\\u003e\\\\n\\u003cp\\u003ebefore": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003edot": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003edynamic": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eescaping": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003efolders": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003enested": 3, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eoptional": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroot": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroute": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003escaling\\u003c/h2\\u003e\\\\n\\u003cp\\u003eour": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003esplat": 1, "\\u003e\\u003ca": 14, "\\u003e\\u003cb\\u003epathless": 1, "\\u003e\\u003ccode\\u003e\\u0026#x3c": 1, "\\u003e\\u003ccode\\u003e\\u003cspan": 5, "\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eignoredroutefiles\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eremix-custom-routes\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eremix-flat-routes\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eremix-json-routes\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eroutes\\u003c/code\\u003e\\u003c/a\\u003e/\\u003ca": 1, "\\u003e\\u003cpre": 5, "\\u003e\\u003cspan": 19, "\\u003eactions\\u003c/a\\u003e": 1, "\\u003ean": 1, "\\u003eapp/\\\\n├──": 3, "\\u003easync\\u003c/span\\u003e": 3, "\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ecity\\u003c/span\\u003e": 3, "\\u003econcerts\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003econfigure": 1, "\\u003econst\\u003c/span\\u003e": 1, "\\u003edate\\u003c/span\\u003e": 1, "\\u003edb\\u003c/span\\u003e": 1, "\\u003edefault\\u003c/span\\u003e": 1, "\\u003edot": 1, "\\u003edynamic": 1, "\\u003een\\u003c/span\\u003e\\\\\\": 1, "\\u003eexport\\u003c/span\\u003e": 4, "\\u003efake\\u003c/span\\u003e": 2, "\\u003efakedb\\u003c/span\\u003e": 1, "\\u003efilepath\\u003c/span\\u003e": 2, "\\u003efrom\\u003c/span\\u003e": 1, "\\u003efunction\\u003c/span\\u003e": 4, "\\u003egetallconcertsforcity\\u003c/span\\u003e": 1, "\\u003egetconcerts\\u003c/span\\u003e": 1, "\\u003egetfileinfo\\u003c/span\\u003e": 1, "\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ehtml\\u003c/span\\u003e": 1, "\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eimport\\u003c/span\\u003e": 1, "\\u003eindex": 1, "\\u003elang\\u003c/span\\u003e\\u003cspan": 1, "\\u003elinks\\u003c/span\\u003e": 2, "\\u003eloader\\u003c/span\\u003e": 3, "\\u003eloaderfunctionargs\\u003c/span\\u003e": 3, "\\u003eloaders\\u003c/a\\u003e": 1, "\\u003emeta\\u003c/span\\u003e": 2, "\\u003enested": 1, "\\u003enesting": 1, "\\u003eoutlet\\u003c/span\\u003e": 2, "\\u003eoutlet_component\\u003c/a\\u003e": 1, "\\u003eparams\\u003c/span\\u003e": 7, "\\u003ereturn\\u003c/span\\u003e": 4, "\\u003eroot": 1, "\\u003eroot\\u003c/span\\u003e": 1, "\\u003eroot\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "\\u003eroot\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003erouting": 2, "\\u003escripts\\u003c/span\\u003e": 2, "\\u003escrollrestoration\\u003c/span\\u003e": 2, "\\u003ethe": 1, "_-b4drxahv": 1, "_1002\\": 1, "_1003\\": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 165, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 14, "_958\\": 1, "_961\\": 13, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_auth": 6, "_index": 37, "_index/": 2, "_index/\\\\n│": 2, "_index/route": 2, "_landing": 10, "_landing/": 1, "_landing/\\\\n│": 1, "_leading": 2, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 17, "about/": 1, "about/\\\\n│": 1, "access": 4, "accessed": 2, "accessibility\\": 1, "across": 2, "action": 1, "action\\": 1, "actiondata\\": 1, "actions": 1, "actually": 2, "adapter": 3, "adapters": 3, "add": 6, "adding": 3, "all": 10, "allow": 2, "allows": 2, "also": 4, "alternatives": 2, "always": 3, "an": 10, "and": 57, "another": 4, "any": 7, "anymore": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "apis": 2, "app": 17, "app/": 12, "app/\\\\\\": 1, "app/\\\\n│": 1, "app/\\\\n├──": 8, "app/root": 10, "app/routes": 1, "app/routes/": 9, "app/routes/$": 1, "app/routes/_auth": 4, "app/routes/_index": 7, "app/routes/about": 6, "app/routes/app": 3, "app/routes/app/route": 1, "app/routes/concerts": 22, "app/routes/concerts_": 1, "app/routes/dolla-bills-": 1, "app/routes/files": 6, "app/routes/sitemap": 1, "app/routes/weird-url": 1, "app\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\": 1, "app_": 4, "application": 2, "application/team": 2, "applications": 2, "approach": 3, "apps": 2, "are": 14, "aren": 2, "aria-hidden=\\\\\\": 14, "as": 17, "asked": 1, "asset": 3, "async": 3, "at": 5, "attrs\\": 1, "authentication": 2, "author": 2, "automatic": 2, "automatically": 2, "avoid": 2, "await\\": 1, "aware": 2, "awesome": 2, "b=document": 1, "backend": 3, "basename": 1, "basic": 2, "basic-routes\\": 1, "basic-routes\\\\\\": 1, "basically": 2, "be": 21, "because": 4, "become": 6, "becomes": 6, "been": 2, "before": 6, "below": 2, "benefits": 2, "best": 2, "between": 2, "beyond": 2, "bit": 6, "blanket": 2, "both": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 3, "build": 4, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 12, "by": 8, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "call": 4, "can": 29, "cannot": 2, "catch": 1, "categories": 8, "changelog": 2, "changelog\\": 1, "changing": 2, "chaotic": 2, "characters": 5, "characters\\": 1, "characters\\u003c/h2\\u003e\\\\n\\u003cp\\u003eif": 1, "charactersfolders": 2, "chart": 2, "check": 4, "child": 4, "children\\": 1, "choose": 2, "city": 5, "city\\u003c/code\\u003e": 1, "class=\\\\\\": 72, "cli": 5, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "closer": 2, "cluttering": 2, "code": 10, "codeblock-line\\\\\\": 47, "color": 80, "com/brophdawg11/remix-json-routes\\\\\\": 1, "com/jacobparis-insiders/remix-custom-routes\\\\\\": 1, "com/kiliman/remix-flat-routes\\\\\\": 1, "common": 2, "community": 7, "community\\": 1, "completely": 2, "component": 4, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concept": 4, "concerts": 29, "concerts_": 2, "concurrency": 3, "config": 7, "configuration": 2, "configuration\\": 1, "configure": 7, "consider": 3, "console": 1, "const": 1, "constraints": 2, "constraints\\": 1, "contact-us": 2, "continued": 2, "contributing": 3, "contributing\\": 1, "controller": 2, "convention": 14, "conventions": 10, "conventions\\": 1, "cookies\\": 1, "couple": 2, "coupling": 2, "create": 8, "create-remix": 3, "created": 2, "createremixstub": 2, "createremixstub\\": 1, "creates": 4, "creating": 2, "css": 15, "css\\": 1, "cup": 2, "current/default": 2, "customization": 2, "d=c": 2, "data": 18, "data-code-block=\\\\\\": 5, "data-driven": 2, "data-filename=\\\\\\": 2, "data-lang=\\\\\\": 10, "data-line-number=\\\\\\": 47, "data-line-numbers=\\\\\\": 10, "data=": 1, "data\\": 2, "date": 3, "db": 1, "decide": 2, "default": 15, "defer": 2, "defer\\": 1, "deferred": 1, "define": 2, "defined": 2, "defining": 2, "definitely": 2, "delimiter": 2, "delimiters": 2, "delimiters\\": 1, "delimiters\\u003c/a\\u003e": 1, "delimiters\\u003c/h2\\u003e\\\\n\\u003cp\\u003eadding": 1, "delimitersdynamic": 2, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "details": 2, "determine": 2, "dev": 3, "development": 3, "did": 2, "different": 2, "dilum": 1, "directly": 4, "directory": 2, "disabling": 3, "disclaimer": 1, "disclaimer\\": 2, "disclaimer\\\\\\": 1, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "dive": 2, "do": 5, "doc\\": 1, "docs/file-conventions/routes": 1, "docs/file-conventions/routes\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsroute": 1, "document": 3, "does": 4, "don": 2, "done": 1, "dot": 5, "dot-delimiters\\": 1, "dot-delimiters\\\\\\": 1, "duplication": 2, "dynamic": 13, "dynamic-segments\\": 1, "dynamic-segments\\\\\\": 1, "e--": 1, "e=0": 1, "eagerly": 2, "easily": 2, "easy": 2, "either": 2, "else": 2, "elsewhere": 2, "employee-profile-card": 2, "en": 1, "end": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entire": 2, "entirely": 2, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "escape": 2, "escaping": 2, "escaping-special-characters\\": 1, "escaping-special-characters\\\\\\": 1, "etc": 2, "even": 4, "every": 2, "everyone": 2, "everything": 1, "evolve": 2, "exactly": 1, "example": 6, "examples": 3, "except": 2, "exclusively": 2, "execution": 2, "execution\\": 1, "experience": 2, "explanation": 2, "explanation\\": 1, "export": 6, "extension": 2, "extensions": 2, "extract": 2, "extract\\": 1, "f=a": 1, "fairly": 2, "fake": 2, "fakedb": 1, "false": 3, "faqs": 2, "faqs\\": 1, "far": 2, "fatigue": 1, "fatigue\\\\\\": 1, "feature": 2, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 33, "file-based": 4, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename": 13, "filename\\": 1, "filepath": 2, "files": 14, "files\\": 1, "first-class": 2, "firstchild": 2, "flags": 2, "flags\\": 1, "flat": 5, "flat/nested": 4, "flat\\\\\\": 1, "flow": 2, "flow\\": 1, "folder": 16, "folder/route": 1, "folders": 12, "folders-for-organization\\": 1, "folders-for-organization\\\\\\": 1, "folks": 10, "followed": 2, "follows": 2, "footer": 4, "for": 40, "form": 11, "form\\": 1, "found": 3, "frequently": 1, "from": 17, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 5, "future": 4, "general": 4, "generally": 2, "get": 10, "get-employee-data": 2, "get-go": 2, "get-projects": 2, "getallconcertsforcity": 1, "getconcerts": 1, "getelementbyid": 2, "getfileinfo": 1, "getitem": 1, "getting": 2, "githubchat": 1, "give": 2, "given": 2, "go": 4, "good": 2, "gotchas": 2, "gotchas\\": 1, "group": 2, "guide": 5, "guide\\": 1, "guide\\u003c/a\\u003e": 2, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "handle": 2, "handle\\": 1, "handling": 4, "handling\\": 2, "happy": 2, "has": 10, "hascontent\\": 1, "hate": 4, "have": 12, "header": 2, "header/footer": 2, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 3, "here": 3, "hiding": 2, "hierarchy": 4, "history": 4, "holding": 2, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 3, "href=\\\\\\": 36, "html": 1, "html\\": 1, "https": 6, "hundreds": 2, "hybrid": 2, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 14, "icon-link\\\\\\": 14, "id=\\\\\\": 14, "idea": 10, "identify": 2, "if": 25, "import": 6, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "impossible": 2, "in": 46, "inc": 1, "including": 4, "incredibly": 1, "index": 6, "information": 4, "initial": 1, "insertbefore": 1, "inside": 12, "instead": 4, "integrating": 1, "interactions": 1, "into": 8, "introduction": 1, "is": 37, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 20, "iterate": 2, "iterative": 1, "jam": 2, "javascript": 4, "javascript\\": 1, "jpg": 1, "jpg\\\\n│": 1, "js": 8, "js\\": 1, "js\\u003c/code\\u003e": 1, "json": 7, "json\\": 1, "jsx": 5, "jsx\\u003c/code\\u003e": 1, "just": 4, "key": 6, "know": 1, "lang": 4, "lang/american-flag-speedo": 1, "lang/american-flag-speedo\\u003c/code\\u003e": 1, "lang=": 1, "lang\\u003c/code\\u003e": 4, "language": 4, "language-text\\\\\\": 11, "large": 1, "layout": 20, "layouts": 5, "lazy": 3, "learning": 1, "let": 5, "lets": 4, "licensed": 1, "lightly": 2, "like": 14, "link": 2, "link\\": 1, "links": 5, "links\\": 2, "literally": 2, "livereload": 2, "livereload\\": 1, "ll": 4, "loader": 8, "loader\\": 1, "loaderdata\\": 1, "loaderfunctionargs": 3, "loaders": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "logged-in-app": 2, "login": 4, "long": 2, "look": 4, "looks": 2, "love": 2, "made": 4, "make": 4, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "manually": 1, "manually\\u003c/a\\u003e": 1, "map": 2, "maps": 4, "match": 12, "matched": 10, "matches": 2, "matching": 4, "math": 1, "matter": 2, "may": 2, "md\\": 152, "mdx": 3, "mdx\\": 1, "meaning": 2, "menu\\": 1, "meta": 5, "meta\\": 2, "might": 2, "migrating": 4, "mine": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 14, "module\\": 1, "moduleaction": 2, "modules": 16, "modules\\": 3, "more": 10, "most": 5, "much": 2, "multiple": 2, "name": 7, "name=\\\\\\": 1, "name\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003econsider": 1, "names": 2, "naming": 4, "naming\\": 1, "naming\\u003c/h1\\u003e\\\\n\\u003cp\\u003ewhile": 1, "naminggetting": 1, "navlink": 2, "navlink\\": 1, "need": 1, "nest": 2, "nested": 19, "nested-layouts-without-nested-urls\\": 1, "nested-layouts-without-nested-urls\\\\\\": 1, "nested-routes\\": 1, "nested-routes\\\\\\": 1, "nested-urls-without-layout-nesting\\": 1, "nested-urls-without-layout-nesting\\\\\\": 1, "nesting": 14, "nesting\\": 1, "nesting\\u003c/h2\\u003e\\\\n\\u003cp\\u003esometimes": 1, "nestingnested": 2, "netlify": 1, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "no": 4, "nodetype": 1, "noindex\\": 1, "not": 15, "note": 8, "null": 1, "number": 3, "object": 6, "of": 77, "on": 13, "once": 1, "one": 5, "open": 1, "opt": 2, "opt-out": 2, "optimization": 2, "optimization\\": 1, "option": 3, "option\\u003c/a\\u003e": 1, "optional": 8, "optional-segments\\": 1, "optional-segments\\\\\\": 1, "or": 13, "order\\": 1, "organization": 3, "organization\\": 1, "organization\\u003c/h2\\u003e\\\\n\\u003cp\\u003eroutes": 1, "organizationscalingon": 1, "organizationscalingroute": 1, "organize": 4, "other": 13, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "our": 3, "out": 11, "outlet": 8, "outlet\\": 1, "outlet_component": 1, "outside": 2, "over": 2, "own": 2, "package": 6, "pagedisclaimerroot": 2, "pages": 2, "param": 6, "param\\": 1, "parameters": 3, "parameters\\\\\\": 1, "params": 16, "parent": 12, "parentheses": 2, "parentnode": 2, "parse": 3, "part": 2, "parts": 2, "pass": 2, "path": 10, "pathless": 1, "pathless-routes\\\\\\": 1, "pathname": 2, "paths": 2, "pdf": 3, "pdf\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/files": 3, "pending": 3, "performance": 2, "performance\\": 1, "pick": 2, "pipethrough": 1, "places": 2, "please": 1, "plugin": 2, "point": 4, "positions": 2, "postcss": 2, "postcss\\": 1, "power": 2, "prefer": 6, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "prefix": 2, "presets": 2, "presets\\": 1, "pretty": 2, "previoussibling": 1, "primary": 1, "primary-nav": 2, "productid": 1, "productid\\u003c/code\\u003e": 1, "progressive": 3, "project": 1, "project-buttons": 2, "project-card": 2, "projects": 6, "projects/": 1, "projects/\\\\n│": 1, "pronounce": 2, "property": 2, "provide": 2, "public": 2, "pull": 1, "pulling": 2, "put": 4, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 3, "quite": 2, "random": 1, "rather": 2, "re": 2, "react": 10, "react-router-scroll-positions": 1, "read": 2, "readablestream": 1, "recommendation": 2, "recommended": 2, "redirect": 4, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "refactor": 2, "register": 4, "regular": 3, "related": 1, "released": 2, "reliably": 2, "remix": 27, "remix-custom-routes": 1, "remix-flat-routes": 1, "remix-json-routes": 1, "remix\\": 2, "removechild": 2, "removeitem": 1, "removing": 2, "render": 4, "rendered": 2, "renders": 2, "repeating": 2, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 1, "rest": 4, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 4, "roadmap": 2, "roadmap/": 1, "roadmap/\\\\n│": 1, "rocking": 1, "rolling": 1, "root": 37, "root-route\\": 1, "root-route\\\\\\": 1, "root\\": 1, "route": 89, "route-file-naming\\\\\\": 1, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 2, "route\\\\\\": 2, "route\\u003c/a\\u003e": 2, "route\\u003c/h2\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 1, "route\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "route\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index": 3, "route\\u003c/th\\u003e\\\\n\\u003cth\\u003elayout\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index": 3, "routebasic": 2, "routediscovery": 1, "router": 9, "router\\": 2, "routes": 72, "routes/": 11, "routes/\\\\n│": 10, "routes/\\\\n└──": 1, "routes/docs": 3, "routes/docs\\": 1, "routes/ignoredroutefiles": 1, "routes\\": 5, "routes\\\\\\": 2, "routes\\u003c/b\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003esometimes": 1, "routes\\u003c/h2\\u003e\\\\n\\u003cp\\u003eany": 1, "routes\\u003c/h2\\u003e\\\\n\\u003cp\\u003enested": 1, "routes\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhile": 1, "routes\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index": 1, "routesdot": 2, "routesescaping": 2, "routesnested": 2, "routing": 9, "routing\\u003c/a\\u003e": 1, "run/docs/file-conventions/routes": 1, "run\\": 1, "running": 3, "runtimes": 3, "salt-lake-city": 4, "same": 4, "san-diego": 4, "sanjaya": 2, "scale": 2, "scales": 2, "scaling": 1, "scaling\\": 2, "scaling\\\\\\": 1, "scripts": 3, "scripts\\": 1, "scroll-experience": 2, "scrollrestoration": 3, "scrollrestoration\\": 1, "scrollto": 1, "section": 1, "section\\u003c/a\\u003e": 1, "see": 3, "segment": 14, "segments": 15, "segments\\": 2, "segments\\u003c/a\\u003e": 1, "segments\\u003c/h2\\u003e\\\\n\\u003cp\\u003eusually": 1, "segments\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewrapping": 1, "segmentsnested": 2, "segmentssplat": 2, "server": 21, "server\\": 3, "serves": 2, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 2, "setup": 2, "share": 2, "shared": 4, "shopify": 1, "should": 4, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "signature": 2, "similar": 1, "simple": 2, "simplified": 2, "simplifying": 1, "simply": 2, "single": 5, "single-segment": 2, "sitemap": 2, "siteurl\\": 1, "sized": 2, "skip": 2, "slashes": 2, "slice": 1, "slug\\": 1, "small-to-medium": 2, "so": 11, "so-weird": 4, "some": 12, "something": 6, "sometimes": 2, "sorry": 2, "spa": 5, "special": 7, "specific": 2, "specify": 2, "splat": 6, "splat-routes\\": 1, "splat-routes\\\\\\": 1, "ssr": 1, "stages": 1, "start": 6, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "static": 2, "stats": 2, "stick": 2, "storagekey2": 3, "storedy": 3, "straightforward": 2, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "stuff": 2, "style=\\\\\\": 80, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "subjective": 2, "such": 4, "support": 3, "support\\": 1, "system": 4, "tabindex=\\\\\\": 14, "tailwind": 2, "tailwind\\": 1, "tea": 2, "team-photo": 2, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "than": 2, "thank": 1, "that": 42, "the": 218, "their": 4, "them": 7, "them\\u003c/li\\u003e\\\\n\\u003cli\\u003eeasy": 1, "then": 6, "there": 6, "these": 17, "these\\\\napp/routes/app": 1, "they": 2, "think": 4, "this": 34, "those": 4, "though": 2, "thousands": 2, "through": 1, "thus": 2, "title\\": 1, "tls": 2, "tls\\": 1, "to": 74, "toc\\": 1, "too": 4, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "trailing": 2, "trailing_": 2, "tread": 2, "treated": 2, "trending": 16, "true": 6, "true\\\\\\": 24, "try": 1, "ts": 6, "ts\\": 1, "ts\\\\n│": 3, "ts\\u003c/code\\u003e": 1, "tsx": 152, "tsx\\\\\\": 12, "tsx\\\\n\\\\n#": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch2": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eall": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003enote": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003esome": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003ethe": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eurl\\u003c/th\\u003e\\\\n\\u003cth\\u003ematched": 7, "tsx\\\\napp/routes/app": 1, "tsx\\\\napp/routes/app/route": 1, "tsx\\\\n│": 51, "tsx\\\\n└──": 10, "tsx\\u003c/code\\u003e": 15, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003enote": 3, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eremix": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003esimilar": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003ethe": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003ethink": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eyou": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about": 6, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/american-flag-speedo\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/beef/and/cheese\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/$": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/categories\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/mine\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts_": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts": 5, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/san-diego\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts": 2, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/trending\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts": 4, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts": 2, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/en/american-flag-speedo\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/en/categories\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files/talks/remix-conf-final-may_2022": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files/talks/remix-conf_final": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files/talks/remix-conf_old": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/files": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/fr/american-flag-speedo\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/fr/categories\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/login\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_auth": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/register\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_auth": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/dolla-bills-$\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/sitemap": 2, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/weird-url/_index\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/dolla-bills-": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root": 7, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_auth": 2, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts": 6, "turn": 2, "tutorial": 3, "two": 2, "type": 2, "typeof": 1, "types": 2, "typescript": 4, "typescript\\": 1, "typically": 4, "ui": 4, "ui\\": 1, "under": 1, "underscore": 10, "understand": 2, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 4, "update-timeline": 2, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 43, "urls": 8, "urls\\": 1, "urls\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewe": 1, "urlsoptional": 2, "use": 8, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 2, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "useful": 2, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "users": 2, "uses": 2, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "usually": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "valid": 2, "validation": 2, "validation\\": 1, "value": 6, "values": 2, "vanilla": 3, "var": 82, "variables": 2, "variables\\": 1, "various": 2, "version": 2, "very": 2, "via": 12, "view": 2, "visit": 2, "visualization": 1, "visualization\\u003c/a\\u003e": 1, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "want": 16, "way": 5, "we": 17, "well": 4, "what": 2, "when": 11, "which": 2, "while": 3, "who": 2, "why": 3, "will": 30, "window": 11, "with": 34, "without": 14, "wonder": 2, "words": 2, "works": 4, "would": 8, "wrapping": 1, "writes": 2, "writes\\": 1, "writing": 2, "xml": 6, "xml\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "xml\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/weird-url": 1, "you": 80, "your": 31, "||": 3, "©": 1, "—": 4, "•docs": 1, "│": 114, "└──": 45, "├──": 121, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 9018 }, { "id": "638d7c23030c22b09a530d3c", "doc_id": "ea23df76f6b19fe71c00f254", "title": "Route File Naming | Remix", "url": "https://v2.remix.run/docs/file-conventions/routes", "type": "html", "source": "remix:routes", "path": "devour_data/docs/route-file-naming---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsRoute File NamingGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageDisclaimerRoot RouteBasic RoutesDot DelimitersDynamic SegmentsNested RoutesNested URLs without Layout NestingNested Layouts without Nested URLsOptional SegmentsSplat RoutesEscaping Special CharactersFolders for OrganizationScalingOn this pageDisclaimerRoot RouteBasic RoutesDot DelimitersDynamic SegmentsNested RoutesNested URLs without Layout NestingNested Layouts without Nested URLsOptional SegmentsSplat RoutesEscaping Special CharactersFolders for OrganizationScalingRoute File Naming While you can configure routes via the \"routes\" plugin option, most routes are created with this file system convention. Add a file, get a route. Please note that you can use either .js, .jsx, .ts or .tsx file extensions. We'll stick with .tsx in the examples to avoid duplication. Dilum Sanjaya made an awesome visualization of how routes in the file system map to the URL in your app that might help you understand these conventions. Disclaimer Before we go too far into the Remix convention, though, we'd like to point out that file-based routing is an incredibly subjective idea. Some folks love the \"flat\" routes idea, some folks hate it and would prefer nesting routes in folders. Some folks simply hate file-based routing and would prefer to configure routes via JSON. Some folks would prefer to configure routes via JSX like they did in their React Router SPA's. The point is, we are well aware of this and from the get-go, Remix has always given you a first-class way to opt-out via the routes/ignoredRouteFiles and configure your routes manually. But, there has to be some default so that folks can get up and running quickly and easily - and we think that the flat routes convention document below is a pretty good default that scales well for small-to-medium sized apps. Large applications with hundreds or thousands of routes will always be a bit chaotic no matter what convention you use — and the idea is that via the routes config, you get to build exactly the convention that works best for your application/team. It would be quite literally impossible for Remix to have a default convention that made everyone happy. We'd much rather give you a fairly straightforward default and then let the community build any number of conventions you can pick and choose from. So, before we dive into the details of the Remix default convention, here are some community alternatives you can check out if you decide that our default is not your cup of tea. remix-flat-routes - The Remix default is basically a simplified version of this package. The author has continued to iterate on and evolve this package, so if you generally like the \"flat routes\" idea but want a bit more power (including a hybrid approach of files and folders), definitely check this one out. remix-custom-routes - If you want even more customization, this package lets you define that types of files should be treated as routes. This lets you go beyond the simple flat/nested concept and do something such as \"any file with an extension of .route.tsx is a route\". remix-json-routes - If you just want to specify your routes via a config file, this is your jam — provide Remix a JSON object with your routes and skip the flat/nested concept entirely. There's even a JSX option in there too. Root Route app/ ├── routes/ └── root.tsx The file in app/root.tsx is your root layout, or \"root route\" (very sorry for those of you who pronounce those words the same way!). It works just like all other routes, so you can export a loader, action, etc. The root route typically looks something like this. It serves as the root layout of the entire app, all other routes will render inside the \u003cOutlet /\u003e. import { Links, Meta, Outlet, Scripts, ScrollRestoration, } from \"@remix-run/react\"; export default function Root() { return ( \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cLinks /\u003e \u003cMeta /\u003e \u003c/head\u003e \u003cbody\u003e \u003cOutlet /\u003e \u003cScrollRestoration /\u003e \u003cScripts /\u003e \u003c/body\u003e \u003c/html\u003e ); } Basic Routes Any JavaScript or TypeScript files in the app/routes directory will become routes in your application. The filename maps to the route's URL pathname, except for _index.tsx which is the index route for the root route. app/ ├── routes/ │ ├── _index.tsx │ └── about.tsx └── root.tsx URL Matched Routes / app/routes/_index.tsx /about app/routes/about.tsx Note that these routes will be rendered in the outlet of app/root.tsx because of nested routing. Dot Delimiters Adding a . to a route filename will create a / in the URL. app/ ├── routes/ │ ├── _index.tsx │ ├── about.tsx │ ├── concerts.trending.tsx │ ├── concerts.salt-lake-city.tsx │ └── concerts.san-diego.tsx └── root.tsx URL Matched Route / app/routes/_index.tsx /about app/routes/about.tsx /concerts/trending app/routes/concerts.trending.tsx /concerts/salt-lake-city app/routes/concerts.salt-lake-city.tsx /concerts/san-diego app/routes/concerts.san-diego.tsx The dot delimiter also creates nesting, see the nesting section for more information. Dynamic Segments Usually your URLs aren't static but data-driven. Dynamic segments allow you to match segments of the URL and use that value in your code. You create them with the $ prefix. app/ ├── routes/ │ ├── _index.tsx │ ├── about.tsx │ ├── concerts.$city.tsx │ └── concerts.trending.tsx └── root.tsx URL Matched Route / app/routes/_index.tsx /about app/routes/about.tsx /concerts/trending app/routes/concerts.trending.tsx /concerts/salt-lake-city app/routes/concerts.$city.tsx /concerts/san-diego app/routes/concerts.$city.tsx Remix will parse the value from the URL and pass it to various APIs. We call these values \"URL Parameters\". The most useful places to access the URL params are in loaders and actions. export async function loader({ params, }: LoaderFunctionArgs) { return fakeDb.getAllConcertsForCity(params.city); } You'll note the property name on the params object maps directly to the name of your file: $city.tsx becomes params.city. Routes can have multiple dynamic segments, like concerts.$city.$date, both are accessed on the params object by name: export async function loader({ params, }: LoaderFunctionArgs) { return fake.db.getConcerts({ date: params.date, city: params.city, }); } See the routing guide for more information. Nested Routes Nested Routing is the general idea of coupling segments of the URL to component hierarchy and data. You can read more about it in the Routing Guide. You create nested routes with dot delimiters. If the filename before the . matches another route filename, it automatically becomes a child route to the matching parent. Consider these routes: app/ ├── routes/ │ ├── _index.tsx │ ├── about.tsx │ ├── concerts._index.tsx │ ├── concerts.$city.tsx │ ├── concerts.trending.tsx │ └── concerts.tsx └── root.tsx All the routes that start with app/routes/concerts. will be child routes of app/routes/concerts.tsx and render inside the parent route's outlet_component. URL Matched Route Layout / app/routes/_index.tsx app/root.tsx /about app/routes/about.tsx app/root.tsx /concerts app/routes/concerts._index.tsx app/routes/concerts.tsx /concerts/trending app/routes/concerts.trending.tsx app/routes/concerts.tsx /concerts/salt-lake-city app/routes/concerts.$city.tsx app/routes/concerts.tsx Note you typically want to add an index route when you add nested routes so that something renders inside the parent's outlet when users visit the parent URL directly. For example, if the URL is /concerts/salt-lake-city then the UI hierarchy will look like this: \u003cRoot\u003e \u003cConcerts\u003e \u003cCity /\u003e \u003c/Concerts\u003e \u003c/Root\u003e Nested URLs without Layout Nesting Sometimes you want the URL to be nested, but you don't want the automatic layout nesting. You can opt out of nesting with a trailing underscore on the parent segment: app/ ├── routes/ │ ├── _index.tsx │ ├── about.tsx │ ├── concerts.$city.tsx │ ├── concerts.trending.tsx │ ├── concerts.tsx │ └── concerts_.mine.tsx └── root.tsx URL Matched Route Layout / app/routes/_index.tsx app/root.tsx /about app/routes/about.tsx app/root.tsx /concerts/mine app/routes/concerts_.mine.tsx app/root.tsx /concerts/trending app/routes/concerts.trending.tsx app/routes/concerts.tsx /concerts/salt-lake-city app/routes/concerts.$city.tsx app/routes/concerts.tsx Note that /concerts/mine does not nest with app/routes/concerts.tsx anymore, but app/root.tsx. The trailing_ underscore creates a path segment, but it does not create layout nesting. Think of the trailing_ underscore as the long bit at the end of your parent's signature, writing you out of the will, removing the segment that follows from the layout nesting. Nested Layouts without Nested URLs We call these Pathless Routes Sometimes you want to share a layout with a group of routes without adding any path segments to the URL. A common example is a set of authentication routes that have a different header/footer than the public pages or the logged-in-app experience. You can do this with a _leading underscore. app/ ├── routes/ │ ├── _auth.login.tsx │ ├── _auth.register.tsx │ ├── _auth.tsx │ ├── _index.tsx │ ├── concerts.$city.tsx │ └── concerts.tsx └── root.tsx URL Matched Route Layout / app/routes/_index.tsx app/root.tsx /login app/routes/_auth.login.tsx app/routes/_auth.tsx /register app/routes/_auth.register.tsx app/routes/_auth.tsx /concerts app/routes/concerts.tsx app/root.tsx /concerts/salt-lake-city app/routes/concerts.$city.tsx app/routes/concerts.tsx Think of the _leading underscore as a blanket you're pulling over the filename, hiding the filename from the URL. Optional Segments Wrapping a route segment in parentheses will make the segment optional. app/ ├── routes/ │ ├── ($lang)._index.tsx │ ├── ($lang).$productId.tsx │ └── ($lang).categories.tsx └── root.tsx URL Matched Route / app/routes/($lang)._index.tsx /categories app/routes/($lang).categories.tsx /en/categories app/routes/($lang).categories.tsx /fr/categories app/routes/($lang).categories.tsx /american-flag-speedo app/routes/($lang)._index.tsx /en/american-flag-speedo app/routes/($lang).$productId.tsx /fr/american-flag-speedo app/routes/($lang).$productId.tsx You may wonder why /american-flag-speedo is matching the ($lang)._index.tsx route instead of ($lang).$productId.tsx. This is because when you have an optional dynamic param segment followed by another dynamic param, Remix cannot reliably determine if a single-segment URL such as /american-flag-speedo should match /:lang /:productId. Optional segments match eagerly and thus it will match /:lang. If you have this type of setup, it's recommended to look at params.lang in the ($lang)._index.tsx loader and redirect to /:lang/american-flag-speedo for the current/default language if params.lang is not a valid language code. Splat Routes While dynamic segments match a single path segment (the stuff between two / in a URL), a splat route will match the rest of a URL, including the slashes. app/ ├── routes/ │ ├── _index.tsx │ ├── $.tsx │ ├── about.tsx │ └── files.$.tsx └── root.tsx URL Matched Route / app/routes/_index.tsx /about app/routes/about.tsx /beef/and/cheese app/routes/$.tsx /files app/routes/files.$.tsx /files/talks/remix-conf_old.pdf app/routes/files.$.tsx /files/talks/remix-conf_final.pdf app/routes/files.$.tsx /files/talks/remix-conf-FINAL-MAY_2022.pdf app/routes/files.$.tsx Similar to dynamic route parameters, you can access the value of the matched path on the splat route's params with the \"*\" key. export async function loader({ params, }: LoaderFunctionArgs) { const filePath = params[\"*\"]; return fake.getFileInfo(filePath); } Escaping Special Characters If you want one of the special characters Remix uses for these route conventions to actually be a part of the URL, you can escape the conventions with [] characters. Filename URL app/routes/sitemap[.]xml.tsx /sitemap.xml app/routes/[sitemap.xml].tsx /sitemap.xml app/routes/weird-url.[_index].tsx /weird-url/_index app/routes/dolla-bills-[$].tsx /dolla-bills-$ app/routes/[[so-weird]].tsx /[so-weird] Folders for Organization Routes can also be folders with a route.tsx file inside defining the route module. The rest of the files in the folder will not become routes. This allows you to organize your code closer to the routes that use them instead of repeating the feature names across other folders. The files inside a folder have no meaning for the route paths, the route path is completely defined by the folder name Consider these routes: app/ ├── routes/ │ ├── _landing._index.tsx │ ├── _landing.about.tsx │ ├── _landing.tsx │ ├── app._index.tsx │ ├── app.projects.tsx │ ├── app.tsx │ └── app_.projects.$id.roadmap.tsx └── root.tsx Some, or all of them can be folders holding their own route module inside. app/ ├── routes/ │ ├── _landing._index/ │ │ ├── route.tsx │ │ └── scroll-experience.tsx │ ├── _landing.about/ │ │ ├── employee-profile-card.tsx │ │ ├── get-employee-data.server.ts │ │ ├── route.tsx │ │ └── team-photo.jpg │ ├── _landing/ │ │ ├── footer.tsx │ │ ├── header.tsx │ │ └── route.tsx │ ├── app._index/ │ │ ├── route.tsx │ │ └── stats.tsx │ ├── app.projects/ │ │ ├── get-projects.server.ts │ │ ├── project-buttons.tsx │ │ ├── project-card.tsx │ │ └── route.tsx │ ├── app/ │ │ ├── footer.tsx │ │ ├── primary-nav.tsx │ │ └── route.tsx │ ├── app_.projects.$id.roadmap/ │ │ ├── chart.tsx │ │ ├── route.tsx │ │ └── update-timeline.server.ts │ └── contact-us.tsx └── root.tsx Note that when you turn a route module into a folder, the route module becomes folder/route.tsx, all other modules in the folder will not become routes. For example: # these are the same route: app/routes/app.tsx app/routes/app/route.tsx # as are these app/routes/app._index.tsx app/routes/app._index/route.tsx Scaling Our general recommendation for scale is to make every route a folder and put the modules used exclusively by that route in the folder, then put the shared modules outside the routes folder elsewhere. This has a couple of benefits: Easy to identify shared modules, so tread lightly when changing them Easy to organize and refactor the modules for a specific route without creating \"file organization fatigue\" and cluttering up other parts of the app © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_1002\\\":-5,\\\"_1003\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":1001},{\\\"_18\\\":204},\\\"docs/file-conventions/routes.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"route-file-naming\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#route-file-naming\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRoute File Naming\\u003c/h1\\u003e\\\\n\\u003cp\\u003eWhile you can configure routes via \\u003ca href=\\\\\\\"./vite-config#routes\\\\\\\"\\u003ethe \\\\\\\"routes\\\\\\\" plugin option\\u003c/a\\u003e, most routes are created with this file system convention. Add a file, get a route.\\u003c/p\\u003e\\\\n\\u003cp\\u003ePlease note that you can use either \\u003ccode\\u003e.js\\u003c/code\\u003e, \\u003ccode\\u003e.jsx\\u003c/code\\u003e, \\u003ccode\\u003e.ts\\u003c/code\\u003e or \\u003ccode\\u003e.tsx\\u003c/code\\u003e file extensions. We'll stick with \\u003ccode\\u003e.tsx\\u003c/code\\u003e in the examples to avoid duplication.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003eDilum Sanjaya made \\u003ca href=\\\\\\\"https://interactive-remix-routing-v2.netlify.app/\\\\\\\"\\u003ean awesome visualization\\u003c/a\\u003e of how routes in the file system map to the URL in your app that might help you understand these conventions.\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"disclaimer\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#disclaimer\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eDisclaimer\\u003c/h2\\u003e\\\\n\\u003cp\\u003eBefore we go too far into the Remix convention, though, we'd like to point out that file-based routing is an \\u003cstrong\\u003eincredibly\\u003c/strong\\u003e subjective idea. Some folks love the \\\\\\\"flat\\\\\\\" routes idea, some folks hate it and would prefer nesting routes in folders. Some folks simply hate file-based routing and would prefer to configure routes via JSON. Some folks would prefer to configure routes via JSX like they did in their React Router SPA's.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe point is, we are well aware of this and from the get-go, Remix has always given you a first-class way to opt-out via the \\u003ca href=\\\\\\\"./vite-config#routes\\\\\\\"\\u003e\\u003ccode\\u003eroutes\\u003c/code\\u003e\\u003c/a\\u003e/\\u003ca href=\\\\\\\"./vite-config#ignoredroutefiles\\\\\\\"\\u003e\\u003ccode\\u003eignoredRouteFiles\\u003c/code\\u003e\\u003c/a\\u003e and \\u003ca href=\\\\\\\"../discussion/routes#manual-route-configuration\\\\\\\"\\u003econfigure your routes manually\\u003c/a\\u003e. But, there has to be \\u003cem\\u003esome\\u003c/em\\u003e default so that folks can get up and running quickly and easily - and we think that the flat routes convention document below is a pretty good default that scales well for small-to-medium sized apps.\\u003c/p\\u003e\\\\n\\u003cp\\u003eLarge applications with hundreds or thousands of routes will \\u003cem\\u003ealways\\u003c/em\\u003e be a bit chaotic no matter what convention you use — and the idea is that via the \\u003ccode\\u003eroutes\\u003c/code\\u003e config, you get to build \\u003cem\\u003eexactly\\u003c/em\\u003e the convention that works best for your application/team. It would be quite literally impossible for Remix to have a default convention that made everyone happy. We'd much rather give you a fairly straightforward default and then let the community build any number of conventions you can pick and choose from.\\u003c/p\\u003e\\\\n\\u003cp\\u003eSo, before we dive into the details of the Remix default convention, here are some community alternatives you can check out if you decide that our default is not your cup of tea.\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/kiliman/remix-flat-routes\\\\\\\"\\u003e\\u003ccode\\u003eremix-flat-routes\\u003c/code\\u003e\\u003c/a\\u003e - The Remix default is basically a simplified version of this package. The author has continued to iterate on and evolve this package, so if you generally like the \\\\\\\"flat routes\\\\\\\" idea but want a bit more power (including a hybrid approach of files and folders), definitely check this one out.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/jacobparis-insiders/remix-custom-routes\\\\\\\"\\u003e\\u003ccode\\u003eremix-custom-routes\\u003c/code\\u003e\\u003c/a\\u003e - If you want even more customization, this package lets you define that types of files should be treated as routes. This lets you go beyond the simple flat/nested concept and do something such as \\u003cem\\u003e\\\\\\\"any file with an extension of \\u003ccode\\u003e.route.tsx\\u003c/code\\u003e is a route\\\\\\\"\\u003c/em\\u003e.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://github.com/brophdawg11/remix-json-routes\\\\\\\"\\u003e\\u003ccode\\u003eremix-json-routes\\u003c/code\\u003e\\u003c/a\\u003e - If you just want to specify your routes via a config file, this is your jam — provide Remix a JSON object with your routes and skip the flat/nested concept entirely. There's even a JSX option in there too.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2 id=\\\\\\\"root-route\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#root-route\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRoot Route\\u003c/h2\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003eapp/\\\\n├── routes/\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eThe file in \\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e is your root layout, or \\\\\\\"root route\\\\\\\" (very sorry for those of you who pronounce those words the same way!). It works just like all other routes, so you can export a \\u003ca href=\\\\\\\"../route/loader\\\\\\\"\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e, \\u003ca href=\\\\\\\"../route/action\\\\\\\"\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e, etc.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe root route typically looks something like this. It serves as the root layout of the entire app, all other routes will render inside the \\u003ca href=\\\\\\\"../components/outlet\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Outlet /\\u003e\\u003c/code\\u003e\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinks\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eMeta\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScripts\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eRoot\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinks\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eMeta\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScripts\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"basic-routes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#basic-routes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eBasic Routes\\u003c/h2\\u003e\\\\n\\u003cp\\u003eAny JavaScript or TypeScript files in the \\u003ccode\\u003eapp/routes\\u003c/code\\u003e directory will become routes in your application. The filename maps to the route's URL pathname, except for \\u003ccode\\u003e_index.tsx\\u003c/code\\u003e which is the \\u003ca href=\\\\\\\"../discussion/routes#index-routes\\\\\\\"\\u003eindex route\\u003c/a\\u003e for the \\u003ca href=\\\\\\\"#root-route\\\\\\\"\\u003eroot route\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003eapp/\\\\n├── routes/\\\\n│ ├── _index.tsx\\\\n│ └── about.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Routes\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eNote that these routes will be rendered in the outlet of \\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e because of \\u003ca href=\\\\\\\"../discussion/routes#what-is-nested-routing\\\\\\\"\\u003enested routing\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"dot-delimiters\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#dot-delimiters\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eDot Delimiters\\u003c/h2\\u003e\\\\n\\u003cp\\u003eAdding a \\u003ccode\\u003e.\\u003c/code\\u003e to a route filename will create a \\u003ccode\\u003e/\\u003c/code\\u003e in the URL.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── _index.tsx\\\\n│ ├── about.tsx\\\\n│ ├── concerts.trending.tsx\\\\n│ ├── concerts.salt-lake-city.tsx\\\\n│ └── concerts.san-diego.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/trending\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.trending.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.salt-lake-city.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/san-diego\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.san-diego.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eThe dot delimiter also creates nesting, see the \\u003ca href=\\\\\\\"#nested-routes\\\\\\\"\\u003enesting section\\u003c/a\\u003e for more information.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"dynamic-segments\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#dynamic-segments\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eDynamic Segments\\u003c/h2\\u003e\\\\n\\u003cp\\u003eUsually your URLs aren't static but data-driven. Dynamic segments allow you to match segments of the URL and use that value in your code. You create them with the \\u003ccode\\u003e$\\u003c/code\\u003e prefix.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── _index.tsx\\\\n│ ├── about.tsx\\\\n│ ├── concerts.$city.tsx\\\\n│ └── concerts.trending.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/trending\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.trending.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.$city.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/san-diego\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.$city.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eRemix will parse the value from the URL and pass it to various APIs. We call these values \\\\\\\"URL Parameters\\\\\\\". The most useful places to access the URL params are in \\u003ca href=\\\\\\\"../route/loader\\\\\\\"\\u003eloaders\\u003c/a\\u003e and \\u003ca href=\\\\\\\"../route/action\\\\\\\"\\u003eactions\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efakeDb\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetAllConcertsForCity\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecity\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eYou'll note the property name on the \\u003ccode\\u003eparams\\u003c/code\\u003e object maps directly to the name of your file: \\u003ccode\\u003e$city.tsx\\u003c/code\\u003e becomes \\u003ccode\\u003eparams.city\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRoutes can have multiple dynamic segments, like \\u003ccode\\u003econcerts.$city.$date\\u003c/code\\u003e, both are accessed on the params object by name:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efake\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edb\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetConcerts\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e date: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edate\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e city: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecity\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eSee the \\u003ca href=\\\\\\\"../discussion/routes\\\\\\\"\\u003erouting guide\\u003c/a\\u003e for more information.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"nested-routes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#nested-routes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNested Routes\\u003c/h2\\u003e\\\\n\\u003cp\\u003eNested Routing is the general idea of coupling segments of the URL to component hierarchy and data. You can read more about it in the \\u003ca href=\\\\\\\"../discussion/routes#what-is-nested-routing\\\\\\\"\\u003eRouting Guide\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou create nested routes with \\u003ca href=\\\\\\\"#dot-delimiters\\\\\\\"\\u003edot delimiters\\u003c/a\\u003e. If the filename before the \\u003ccode\\u003e.\\u003c/code\\u003e matches another route filename, it automatically becomes a child route to the matching parent. Consider these routes:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── _index.tsx\\\\n│ ├── about.tsx\\\\n│ ├── concerts._index.tsx\\\\n│ ├── concerts.$city.tsx\\\\n│ ├── concerts.trending.tsx\\\\n│ └── concerts.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eAll the routes that start with \\u003ccode\\u003eapp/routes/concerts.\\u003c/code\\u003e will be child routes of \\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e and render inside the parent route's \\u003ca href=\\\\\\\"../components/outlet\\\\\\\"\\u003eoutlet_component\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003cth\\u003eLayout\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts._index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/trending\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.trending.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.$city.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eNote you typically want to add an index route when you add nested routes so that something renders inside the parent's outlet when users visit the parent URL directly.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor example, if the URL is \\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e then the UI hierarchy will look like this:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRoot\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eConcerts\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eCity\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eConcerts\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRoot\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"nested-urls-without-layout-nesting\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#nested-urls-without-layout-nesting\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNested URLs without Layout Nesting\\u003c/h2\\u003e\\\\n\\u003cp\\u003eSometimes you want the URL to be nested, but you don't want the automatic layout nesting. You can opt out of nesting with a trailing underscore on the parent segment:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── _index.tsx\\\\n│ ├── about.tsx\\\\n│ ├── concerts.$city.tsx\\\\n│ ├── concerts.trending.tsx\\\\n│ ├── concerts.tsx\\\\n│ └── concerts_.mine.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003cth\\u003eLayout\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/mine\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts_.mine.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/trending\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.trending.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.$city.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eNote that \\u003ccode\\u003e/concerts/mine\\u003c/code\\u003e does not nest with \\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e anymore, but \\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e. The \\u003ccode\\u003etrailing_\\u003c/code\\u003e underscore creates a path segment, but it does not create layout nesting.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThink of the \\u003ccode\\u003etrailing_\\u003c/code\\u003e underscore as the long bit at the end of your parent's signature, writing you out of the will, removing the segment that follows from the layout nesting.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"nested-layouts-without-nested-urls\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#nested-layouts-without-nested-urls\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNested Layouts without Nested URLs\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWe call these \\u003ca name=\\\\\\\"pathless-routes\\\\\\\"\\u003e\\u003cb\\u003ePathless Routes\\u003c/b\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eSometimes you want to share a layout with a group of routes without adding any path segments to the URL. A common example is a set of authentication routes that have a different header/footer than the public pages or the logged-in-app experience. You can do this with a \\u003ccode\\u003e_leading\\u003c/code\\u003e underscore.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── _auth.login.tsx\\\\n│ ├── _auth.register.tsx\\\\n│ ├── _auth.tsx\\\\n│ ├── _index.tsx\\\\n│ ├── concerts.$city.tsx\\\\n│ └── concerts.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003cth\\u003eLayout\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/login\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_auth.login.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_auth.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/register\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_auth.register.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_auth.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.$city.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eThink of the \\u003ccode\\u003e_leading\\u003c/code\\u003e underscore as a blanket you're pulling over the filename, hiding the filename from the URL.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"optional-segments\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#optional-segments\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eOptional Segments\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWrapping a route segment in parentheses will make the segment optional.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── ($lang)._index.tsx\\\\n│ ├── ($lang).$productId.tsx\\\\n│ └── ($lang).categories.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/($lang)._index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/categories\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/($lang).categories.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/en/categories\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/($lang).categories.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/fr/categories\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/($lang).categories.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/american-flag-speedo\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/($lang)._index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/en/american-flag-speedo\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/($lang).$productId.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/fr/american-flag-speedo\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/($lang).$productId.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eYou may wonder why \\u003ccode\\u003e/american-flag-speedo\\u003c/code\\u003e is matching the \\u003ccode\\u003e($lang)._index.tsx\\u003c/code\\u003e route instead of \\u003ccode\\u003e($lang).$productId.tsx\\u003c/code\\u003e. This is because when you have an optional dynamic param segment followed by another dynamic param, Remix cannot reliably determine if a single-segment URL such as \\u003ccode\\u003e/american-flag-speedo\\u003c/code\\u003e should match \\u003ccode\\u003e/:lang\\u003c/code\\u003e \\u003ccode\\u003e/:productId\\u003c/code\\u003e. Optional segments match eagerly and thus it will match \\u003ccode\\u003e/:lang\\u003c/code\\u003e. If you have this type of setup, it's recommended to look at \\u003ccode\\u003eparams.lang\\u003c/code\\u003e in the \\u003ccode\\u003e($lang)._index.tsx\\u003c/code\\u003e loader and redirect to \\u003ccode\\u003e/:lang/american-flag-speedo\\u003c/code\\u003e for the current/default language if \\u003ccode\\u003eparams.lang\\u003c/code\\u003e is not a valid language code.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"splat-routes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#splat-routes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSplat Routes\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhile \\u003ca href=\\\\\\\"#dynamic-segments\\\\\\\"\\u003edynamic segments\\u003c/a\\u003e match a single path segment (the stuff between two \\u003ccode\\u003e/\\u003c/code\\u003e in a URL), a splat route will match the rest of a URL, including the slashes.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── _index.tsx\\\\n│ ├── $.tsx\\\\n│ ├── about.tsx\\\\n│ └── files.$.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003cth\\u003eMatched Route\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/beef/and/cheese\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/$.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/files.$.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files/talks/remix-conf_old.pdf\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/files.$.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files/talks/remix-conf_final.pdf\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/files.$.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files/talks/remix-conf-FINAL-MAY_2022.pdf\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/files.$.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eSimilar to dynamic route parameters, you can access the value of the matched path on the splat route's \\u003ccode\\u003eparams\\u003c/code\\u003e with the \\u003ccode\\u003e\\\\\\\"*\\\\\\\"\\u003c/code\\u003e key.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/files.$.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/files.$.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efilePath\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e[\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e*\\u003c/span\\u003e\\\\\\\"];\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efake\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetFileInfo\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efilePath\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"escaping-special-characters\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#escaping-special-characters\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eEscaping Special Characters\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIf you want one of the special characters Remix uses for these route conventions to actually be a part of the URL, you can escape the conventions with \\u003ccode\\u003e[]\\u003c/code\\u003e characters.\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eFilename\\u003c/th\\u003e\\\\n\\u003cth\\u003eURL\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/sitemap[.]xml.tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/sitemap.xml\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/[sitemap.xml].tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/sitemap.xml\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/weird-url.[_index].tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/weird-url/_index\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/dolla-bills-[$].tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/dolla-bills-$\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/[[so-weird]].tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/[so-weird]\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003ch2 id=\\\\\\\"folders-for-organization\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#folders-for-organization\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eFolders for Organization\\u003c/h2\\u003e\\\\n\\u003cp\\u003eRoutes can also be folders with a \\u003ccode\\u003eroute.tsx\\u003c/code\\u003e file inside defining the route module. The rest of the files in the folder will not become routes. This allows you to organize your code closer to the routes that use them instead of repeating the feature names across other folders.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003eThe files inside a folder have no meaning for the route paths, the route path is completely defined by the folder name\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eConsider these routes:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003e app/\\\\n├── routes/\\\\n│ ├── _landing._index.tsx\\\\n│ ├── _landing.about.tsx\\\\n│ ├── _landing.tsx\\\\n│ ├── app._index.tsx\\\\n│ ├── app.projects.tsx\\\\n│ ├── app.tsx\\\\n│ └── app_.projects.$id.roadmap.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eSome, or all of them can be folders holding their own \\u003ccode\\u003eroute\\u003c/code\\u003e module inside.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003eapp/\\\\n├── routes/\\\\n│ ├── _landing._index/\\\\n│ │ ├── route.tsx\\\\n│ │ └── scroll-experience.tsx\\\\n│ ├── _landing.about/\\\\n│ │ ├── employee-profile-card.tsx\\\\n│ │ ├── get-employee-data.server.ts\\\\n│ │ ├── route.tsx\\\\n│ │ └── team-photo.jpg\\\\n│ ├── _landing/\\\\n│ │ ├── footer.tsx\\\\n│ │ ├── header.tsx\\\\n│ │ └── route.tsx\\\\n│ ├── app._index/\\\\n│ │ ├── route.tsx\\\\n│ │ └── stats.tsx\\\\n│ ├── app.projects/\\\\n│ │ ├── get-projects.server.ts\\\\n│ │ ├── project-buttons.tsx\\\\n│ │ ├── project-card.tsx\\\\n│ │ └── route.tsx\\\\n│ ├── app/\\\\n│ │ ├── footer.tsx\\\\n│ │ ├── primary-nav.tsx\\\\n│ │ └── route.tsx\\\\n│ ├── app_.projects.$id.roadmap/\\\\n│ │ ├── chart.tsx\\\\n│ │ ├── route.tsx\\\\n│ │ └── update-timeline.server.ts\\\\n│ └── contact-us.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eNote that when you turn a route module into a folder, the route module becomes \\u003ccode\\u003efolder/route.tsx\\u003c/code\\u003e, all other modules in the folder will not become routes. For example:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003e# these are the same route:\\\\napp/routes/app.tsx\\\\napp/routes/app/route.tsx\\\\n\\\\n# as are these\\\\napp/routes/app._index.tsx\\\\napp/routes/app._index/route.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch2 id=\\\\\\\"scaling\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#scaling\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eScaling\\u003c/h2\\u003e\\\\n\\u003cp\\u003eOur general recommendation for scale is to make every route a folder and put the modules used exclusively by that route in the folder, then put the shared modules outside the \\u003ccode\\u003eroutes\\u003c/code\\u003e folder elsewhere. This has a couple of benefits:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eEasy to identify shared modules, so tread lightly when changing them\\u003c/li\\u003e\\\\n\\u003cli\\u003eEasy to organize and refactor the modules for a specific route without creating \\\\\\\"file organization fatigue\\\\\\\" and cluttering up other parts of the app\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\",\\\"docs/file-conventions/routes\\\",\\\"headings\\\",[960,965,968,971,974,977,980,983,986,989,992,995,998],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Disclaimer\\\",\\\"disclaimer\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"Root Route\\\",\\\"root-route\\\",{\\\"_961\\\":962,\\\"_955\\\":969,\\\"_24\\\":970},\\\"Basic Routes\\\",\\\"basic-routes\\\",{\\\"_961\\\":962,\\\"_955\\\":972,\\\"_24\\\":973},\\\"Dot Delimiters\\\",\\\"dot-delimiters\\\",{\\\"_961\\\":962,\\\"_955\\\":975,\\\"_24\\\":976},\\\"Dynamic Segments\\\",\\\"dynamic-segments\\\",{\\\"_961\\\":962,\\\"_955\\\":978,\\\"_24\\\":979},\\\"Nested Routes\\\",\\\"nested-routes\\\",{\\\"_961\\\":962,\\\"_955\\\":981,\\\"_24\\\":982},\\\"Nested URLs without Layout Nesting\\\",\\\"nested-urls-without-layout-nesting\\\",{\\\"_961\\\":962,\\\"_955\\\":984,\\\"_24\\\":985},\\\"Nested Layouts without Nested URLs\\\",\\\"nested-layouts-without-nested-urls\\\",{\\\"_961\\\":962,\\\"_955\\\":987,\\\"_24\\\":988},\\\"Optional Segments\\\",\\\"optional-segments\\\",{\\\"_961\\\":962,\\\"_955\\\":990,\\\"_24\\\":991},\\\"Splat Routes\\\",\\\"splat-routes\\\",{\\\"_961\\\":962,\\\"_955\\\":993,\\\"_24\\\":994},\\\"Escaping Special Characters\\\",\\\"escaping-special-characters\\\",{\\\"_961\\\":962,\\\"_955\\\":996,\\\"_24\\\":997},\\\"Folders for Organization\\\",\\\"folders-for-organization\\\",{\\\"_961\\\":962,\\\"_955\\\":999,\\\"_24\\\":1000},\\\"Scaling\\\",\\\"scaling\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#basic-routes\\\\\\": 1, "#disclaimer\\\\\\": 1, "#dot-delimiters\\\\\\": 2, "#dynamic-segments\\\\\\": 2, "#escaping-special-characters\\\\\\": 1, "#folders-for-organization\\\\\\": 1, "#nested-layouts-without-nested-urls\\\\\\": 1, "#nested-routes\\\\\\": 2, "#nested-urls-without-layout-nesting\\\\\\": 1, "#optional-segments\\\\\\": 1, "#root-route\\\\\\": 2, "#route-file-naming\\\\\\": 1, "#scaling\\\\\\": 1, "#splat-routes\\\\\\": 1, "$\\": 1, "$city": 21, "$date": 1, "$date\\u003c/code\\u003e": 1, "$id": 4, "$lang": 26, "$productid": 8, "$rc": 3, "*\\\\\\": 1, "--base05": 5, "--base08": 26, "--base0a": 14, "--base0b": 3, "--base0d": 13, "--base0e": 19, "-1\\\\\\": 14, "-5": 2, "/$": 1, "//github": 3, "//interactive-remix-routing-v2": 1, "//v2": 2, "/\u003e": 7, "/\\u003cspan": 5, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 6, "/\\u003e\\u003c/code\\u003e\\u003c/a\\u003e": 1, "/about": 6, "/american-flag-speedo": 3, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/beef/and/cheese": 1, "/categories": 1, "/components/outlet\\\\\\": 2, "/concerts": 2, "/concerts/mine": 2, "/concerts/salt-lake-city": 6, "/concerts/san-diego": 2, "/concerts/trending": 4, "/discussion/routes#index-routes\\\\\\": 1, "/discussion/routes#manual-route-configuration\\\\\\": 1, "/discussion/routes#what-is-nested-routing\\\\\\": 2, "/discussion/routes\\\\\\": 1, "/dolla-bills-$": 1, "/en/american-flag-speedo": 1, "/en/categories": 1, "/files": 1, "/files/talks/remix-conf-final-may_2022": 1, "/files/talks/remix-conf_final": 1, "/files/talks/remix-conf_old": 1, "/fr/american-flag-speedo": 1, "/fr/categories": 1, "/login": 1, "/register": 1, "/route/action\\\\\\": 2, "/route/loader\\\\\\": 2, "/sitemap": 2, "/vite-config#ignoredroutefiles\\\\\\": 1, "/vite-config#routes\\\\\\": 2, "/weird-url/_index": 1, "0===e": 1, "10": 43, "100": 1, "1000": 1, "1001": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 1, "1\\\\\\": 5, "200": 1, "201": 1, "202": 1, "203": 1, "204": 2, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 5, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 5, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 5, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 5, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 3, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 2, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 2, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 13, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "976": 1, "977": 1, "978": 1, "979": 1, "98": 1, "980": 1, "981": 1, "982": 1, "983": 1, "984": 1, "985": 1, "986": 1, "987": 1, "988": 1, "989": 1, "99": 1, "990": 1, "991": 1, "992": 1, "993": 1, "994": 1, "995": 1, "996": 1, "997": 1, "998": 1, "999": 1, "9\\\\\\": 1, "\u003c/body\u003e": 1, "\u003c/concerts\u003e": 1, "\u003c/head\u003e": 1, "\u003c/html\u003e": 1, "\u003c/root\u003e": 1, "\u003cbody\u003e": 1, "\u003ccity": 1, "\u003cconcerts\u003e": 1, "\u003chead\u003e": 1, "\u003chtml": 1, "\u003clinks": 1, "\u003cmeta": 1, "\u003coutlet": 2, "\u003croot\u003e": 1, "\u003cscripts": 1, "\u003cscrollrestoration": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/react": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 94, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003esee": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 26, "\\\\napp/routes/app": 1, "\\n": 1, "\\u0026#x3c": 14, "\\u003c/code\\u003e": 5, "\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003ch2": 1, "\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003ch2": 1, "\\u003c/em\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003ch2": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 2, "\\u003c/p\\u003e\\\\n\\u003cdiv": 5, "\\u003c/p\\u003e\\\\n\\u003ch2": 6, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003edilum": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003ethe": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efor": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003elarge": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eplease": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eroutes": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eso": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethe": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethink": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 10, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003e#": 1, "\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003efilename\\u003c/th\\u003e\\\\n\\u003cth\\u003eurl\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/sitemap": 1, "\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eurl\\u003c/th\\u003e\\\\n\\u003cth\\u003ematched": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eeasy": 1, "\\u003c/span\\u003e": 3, "\\u003ca": 19, "\\u003ccode\\u003e": 12, "\\u003ccode\\u003e$\\u003c/code\\u003e": 1, "\\u003ccode\\u003e$city": 1, "\\u003ccode\\u003e/": 4, "\\u003ccode\\u003e/\\u003c/code\\u003e": 2, "\\u003ccode\\u003e/american-flag-speedo\\u003c/code\\u003e": 2, "\\u003ccode\\u003e/concerts/mine\\u003c/code\\u003e": 1, "\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e": 1, "\\u003ccode\\u003e\\\\\\": 1, "\\u003ccode\\u003e_index": 1, "\\u003ccode\\u003e_leading\\u003c/code\\u003e": 2, "\\u003ccode\\u003eapp/root": 3, "\\u003ccode\\u003eapp/routes/concerts": 3, "\\u003ccode\\u003eapp/routes\\u003c/code\\u003e": 1, "\\u003ccode\\u003econcerts": 1, "\\u003ccode\\u003efolder/route": 1, "\\u003ccode\\u003eparams": 3, "\\u003ccode\\u003eparams\\u003c/code\\u003e": 2, "\\u003ccode\\u003eroute": 1, "\\u003ccode\\u003eroute\\u003c/code\\u003e": 1, "\\u003ccode\\u003eroutes\\u003c/code\\u003e": 2, "\\u003ccode\\u003etrailing_\\u003c/code\\u003e": 2, "\\u003cem\\u003e\\\\\\": 1, "\\u003cem\\u003ealways\\u003c/em\\u003e": 1, "\\u003cem\\u003eexactly\\u003c/em\\u003e": 1, "\\u003cem\\u003esome\\u003c/em\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 64, "\\u003cstrong\\u003eincredibly\\u003c/strong\\u003e": 1, "\\u003e": 50, "\\u003e*\\u003c/span\\u003e\\\\\\": 1, "\\u003e=\\u003c/span\\u003e": 1, "\\u003e=\\u003c/span\\u003e\\\\\\": 1, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003e\\u0026#x3c": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebasic": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003edisclaimer\\u003c/h2\\u003e\\\\n\\u003cp\\u003ebefore": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003edot": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003edynamic": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eescaping": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003efolders": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003enested": 3, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eoptional": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroot": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroute": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003escaling\\u003c/h2\\u003e\\\\n\\u003cp\\u003eour": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003esplat": 1, "\\u003e\\u003ca": 14, "\\u003e\\u003cb\\u003epathless": 1, "\\u003e\\u003ccode\\u003e\\u0026#x3c": 1, "\\u003e\\u003ccode\\u003e\\u003cspan": 5, "\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eignoredroutefiles\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eremix-custom-routes\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eremix-flat-routes\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eremix-json-routes\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eroutes\\u003c/code\\u003e\\u003c/a\\u003e/\\u003ca": 1, "\\u003e\\u003cpre": 5, "\\u003e\\u003cspan": 19, "\\u003eactions\\u003c/a\\u003e": 1, "\\u003ean": 1, "\\u003eapp/\\\\n├──": 3, "\\u003easync\\u003c/span\\u003e": 3, "\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ecity\\u003c/span\\u003e": 3, "\\u003econcerts\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003econfigure": 1, "\\u003econst\\u003c/span\\u003e": 1, "\\u003edate\\u003c/span\\u003e": 1, "\\u003edb\\u003c/span\\u003e": 1, "\\u003edefault\\u003c/span\\u003e": 1, "\\u003edot": 1, "\\u003edynamic": 1, "\\u003een\\u003c/span\\u003e\\\\\\": 1, "\\u003eexport\\u003c/span\\u003e": 4, "\\u003efake\\u003c/span\\u003e": 2, "\\u003efakedb\\u003c/span\\u003e": 1, "\\u003efilepath\\u003c/span\\u003e": 2, "\\u003efrom\\u003c/span\\u003e": 1, "\\u003efunction\\u003c/span\\u003e": 4, "\\u003egetallconcertsforcity\\u003c/span\\u003e": 1, "\\u003egetconcerts\\u003c/span\\u003e": 1, "\\u003egetfileinfo\\u003c/span\\u003e": 1, "\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ehtml\\u003c/span\\u003e": 1, "\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eimport\\u003c/span\\u003e": 1, "\\u003eindex": 1, "\\u003elang\\u003c/span\\u003e\\u003cspan": 1, "\\u003elinks\\u003c/span\\u003e": 2, "\\u003eloader\\u003c/span\\u003e": 3, "\\u003eloaderfunctionargs\\u003c/span\\u003e": 3, "\\u003eloaders\\u003c/a\\u003e": 1, "\\u003emeta\\u003c/span\\u003e": 2, "\\u003enested": 1, "\\u003enesting": 1, "\\u003eoutlet\\u003c/span\\u003e": 2, "\\u003eoutlet_component\\u003c/a\\u003e": 1, "\\u003eparams\\u003c/span\\u003e": 7, "\\u003ereturn\\u003c/span\\u003e": 4, "\\u003eroot": 1, "\\u003eroot\\u003c/span\\u003e": 1, "\\u003eroot\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "\\u003eroot\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003erouting": 2, "\\u003escripts\\u003c/span\\u003e": 2, "\\u003escrollrestoration\\u003c/span\\u003e": 2, "\\u003ethe": 1, "_-b4drxahv": 1, "_1002\\": 1, "_1003\\": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 165, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 14, "_958\\": 1, "_961\\": 13, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_auth": 6, "_index": 37, "_index/": 2, "_index/\\\\n│": 2, "_index/route": 2, "_landing": 10, "_landing/": 1, "_landing/\\\\n│": 1, "_leading": 2, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 17, "about/": 1, "about/\\\\n│": 1, "access": 4, "accessed": 2, "accessibility\\": 1, "across": 2, "action": 1, "action\\": 1, "actiondata\\": 1, "actions": 1, "actually": 2, "adapter": 3, "adapters": 3, "add": 6, "adding": 3, "all": 10, "allow": 2, "allows": 2, "also": 4, "alternatives": 2, "always": 3, "an": 10, "and": 57, "another": 4, "any": 7, "anymore": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "apis": 2, "app": 17, "app/": 12, "app/\\\\\\": 1, "app/\\\\n│": 1, "app/\\\\n├──": 8, "app/root": 10, "app/routes": 1, "app/routes/": 9, "app/routes/$": 1, "app/routes/_auth": 4, "app/routes/_index": 7, "app/routes/about": 6, "app/routes/app": 3, "app/routes/app/route": 1, "app/routes/concerts": 22, "app/routes/concerts_": 1, "app/routes/dolla-bills-": 1, "app/routes/files": 6, "app/routes/sitemap": 1, "app/routes/weird-url": 1, "app\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\": 1, "app_": 4, "application": 2, "application/team": 2, "applications": 2, "approach": 3, "apps": 2, "are": 14, "aren": 2, "aria-hidden=\\\\\\": 14, "as": 17, "asked": 1, "asset": 3, "async": 3, "at": 5, "attrs\\": 1, "authentication": 2, "author": 2, "automatic": 2, "automatically": 2, "avoid": 2, "await\\": 1, "aware": 2, "awesome": 2, "b=document": 1, "backend": 3, "basename": 1, "basic": 2, "basic-routes\\": 1, "basic-routes\\\\\\": 1, "basically": 2, "be": 21, "because": 4, "become": 6, "becomes": 6, "been": 2, "before": 6, "below": 2, "benefits": 2, "best": 2, "between": 2, "beyond": 2, "bit": 6, "blanket": 2, "both": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 3, "build": 4, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 12, "by": 8, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "call": 4, "can": 29, "cannot": 2, "catch": 1, "categories": 8, "changelog": 2, "changelog\\": 1, "changing": 2, "chaotic": 2, "characters": 5, "characters\\": 1, "characters\\u003c/h2\\u003e\\\\n\\u003cp\\u003eif": 1, "charactersfolders": 2, "chart": 2, "check": 4, "child": 4, "children\\": 1, "choose": 2, "city": 5, "city\\u003c/code\\u003e": 1, "class=\\\\\\": 72, "cli": 5, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "closer": 2, "cluttering": 2, "code": 10, "codeblock-line\\\\\\": 47, "color": 80, "com/brophdawg11/remix-json-routes\\\\\\": 1, "com/jacobparis-insiders/remix-custom-routes\\\\\\": 1, "com/kiliman/remix-flat-routes\\\\\\": 1, "common": 2, "community": 7, "community\\": 1, "completely": 2, "component": 4, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concept": 4, "concerts": 29, "concerts_": 2, "concurrency": 3, "config": 7, "configuration": 2, "configuration\\": 1, "configure": 7, "consider": 3, "console": 1, "const": 1, "constraints": 2, "constraints\\": 1, "contact-us": 2, "continued": 2, "contributing": 3, "contributing\\": 1, "controller": 2, "convention": 14, "conventions": 10, "conventions\\": 1, "cookies\\": 1, "couple": 2, "coupling": 2, "create": 8, "create-remix": 3, "created": 2, "createremixstub": 2, "createremixstub\\": 1, "creates": 4, "creating": 2, "css": 15, "css\\": 1, "cup": 2, "current/default": 2, "customization": 2, "d=c": 2, "data": 18, "data-code-block=\\\\\\": 5, "data-driven": 2, "data-filename=\\\\\\": 2, "data-lang=\\\\\\": 10, "data-line-number=\\\\\\": 47, "data-line-numbers=\\\\\\": 10, "data=": 1, "data\\": 2, "date": 3, "db": 1, "decide": 2, "default": 15, "defer": 2, "defer\\": 1, "deferred": 1, "define": 2, "defined": 2, "defining": 2, "definitely": 2, "delimiter": 2, "delimiters": 2, "delimiters\\": 1, "delimiters\\u003c/a\\u003e": 1, "delimiters\\u003c/h2\\u003e\\\\n\\u003cp\\u003eadding": 1, "delimitersdynamic": 2, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "details": 2, "determine": 2, "dev": 3, "development": 3, "did": 2, "different": 2, "dilum": 1, "directly": 4, "directory": 2, "disabling": 3, "disclaimer": 1, "disclaimer\\": 2, "disclaimer\\\\\\": 1, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "dive": 2, "do": 5, "doc\\": 1, "docs/file-conventions/routes": 1, "docs/file-conventions/routes\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsroute": 1, "document": 3, "does": 4, "don": 2, "done": 1, "dot": 5, "dot-delimiters\\": 1, "dot-delimiters\\\\\\": 1, "duplication": 2, "dynamic": 13, "dynamic-segments\\": 1, "dynamic-segments\\\\\\": 1, "e--": 1, "e=0": 1, "eagerly": 2, "easily": 2, "easy": 2, "either": 2, "else": 2, "elsewhere": 2, "employee-profile-card": 2, "en": 1, "end": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entire": 2, "entirely": 2, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "escape": 2, "escaping": 2, "escaping-special-characters\\": 1, "escaping-special-characters\\\\\\": 1, "etc": 2, "even": 4, "every": 2, "everyone": 2, "everything": 1, "evolve": 2, "exactly": 1, "example": 6, "examples": 3, "except": 2, "exclusively": 2, "execution": 2, "execution\\": 1, "experience": 2, "explanation": 2, "explanation\\": 1, "export": 6, "extension": 2, "extensions": 2, "extract": 2, "extract\\": 1, "f=a": 1, "fairly": 2, "fake": 2, "fakedb": 1, "false": 3, "faqs": 2, "faqs\\": 1, "far": 2, "fatigue": 1, "fatigue\\\\\\": 1, "feature": 2, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 33, "file-based": 4, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename": 13, "filename\\": 1, "filepath": 2, "files": 14, "files\\": 1, "first-class": 2, "firstchild": 2, "flags": 2, "flags\\": 1, "flat": 5, "flat/nested": 4, "flat\\\\\\": 1, "flow": 2, "flow\\": 1, "folder": 16, "folder/route": 1, "folders": 12, "folders-for-organization\\": 1, "folders-for-organization\\\\\\": 1, "folks": 10, "followed": 2, "follows": 2, "footer": 4, "for": 40, "form": 11, "form\\": 1, "found": 3, "frequently": 1, "from": 17, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 5, "future": 4, "general": 4, "generally": 2, "get": 10, "get-employee-data": 2, "get-go": 2, "get-projects": 2, "getallconcertsforcity": 1, "getconcerts": 1, "getelementbyid": 2, "getfileinfo": 1, "getitem": 1, "getting": 2, "githubchat": 1, "give": 2, "given": 2, "go": 4, "good": 2, "gotchas": 2, "gotchas\\": 1, "group": 2, "guide": 5, "guide\\": 1, "guide\\u003c/a\\u003e": 2, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "handle": 2, "handle\\": 1, "handling": 4, "handling\\": 2, "happy": 2, "has": 10, "hascontent\\": 1, "hate": 4, "have": 12, "header": 2, "header/footer": 2, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 3, "here": 3, "hiding": 2, "hierarchy": 4, "history": 4, "holding": 2, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 3, "href=\\\\\\": 36, "html": 1, "html\\": 1, "https": 6, "hundreds": 2, "hybrid": 2, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 14, "icon-link\\\\\\": 14, "id=\\\\\\": 14, "idea": 10, "identify": 2, "if": 25, "import": 6, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "impossible": 2, "in": 46, "inc": 1, "including": 4, "incredibly": 1, "index": 6, "information": 4, "initial": 1, "insertbefore": 1, "inside": 12, "instead": 4, "integrating": 1, "interactions": 1, "into": 8, "introduction": 1, "is": 37, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 20, "iterate": 2, "iterative": 1, "jam": 2, "javascript": 4, "javascript\\": 1, "jpg": 1, "jpg\\\\n│": 1, "js": 8, "js\\": 1, "js\\u003c/code\\u003e": 1, "json": 7, "json\\": 1, "jsx": 5, "jsx\\u003c/code\\u003e": 1, "just": 4, "key": 6, "know": 1, "lang": 4, "lang/american-flag-speedo": 1, "lang/american-flag-speedo\\u003c/code\\u003e": 1, "lang=": 1, "lang\\u003c/code\\u003e": 4, "language": 4, "language-text\\\\\\": 11, "large": 1, "layout": 20, "layouts": 5, "lazy": 3, "learning": 1, "let": 5, "lets": 4, "licensed": 1, "lightly": 2, "like": 14, "link": 2, "link\\": 1, "links": 5, "links\\": 2, "literally": 2, "livereload": 2, "livereload\\": 1, "ll": 4, "loader": 8, "loader\\": 1, "loaderdata\\": 1, "loaderfunctionargs": 3, "loaders": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "logged-in-app": 2, "login": 4, "long": 2, "look": 4, "looks": 2, "love": 2, "made": 4, "make": 4, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "manually": 1, "manually\\u003c/a\\u003e": 1, "map": 2, "maps": 4, "match": 12, "matched": 10, "matches": 2, "matching": 4, "math": 1, "matter": 2, "may": 2, "md\\": 152, "mdx": 3, "mdx\\": 1, "meaning": 2, "menu\\": 1, "meta": 5, "meta\\": 2, "might": 2, "migrating": 4, "mine": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 14, "module\\": 1, "moduleaction": 2, "modules": 16, "modules\\": 3, "more": 10, "most": 5, "much": 2, "multiple": 2, "name": 7, "name=\\\\\\": 1, "name\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003econsider": 1, "names": 2, "naming": 4, "naming\\": 1, "naming\\u003c/h1\\u003e\\\\n\\u003cp\\u003ewhile": 1, "naminggetting": 1, "navlink": 2, "navlink\\": 1, "need": 1, "nest": 2, "nested": 19, "nested-layouts-without-nested-urls\\": 1, "nested-layouts-without-nested-urls\\\\\\": 1, "nested-routes\\": 1, "nested-routes\\\\\\": 1, "nested-urls-without-layout-nesting\\": 1, "nested-urls-without-layout-nesting\\\\\\": 1, "nesting": 14, "nesting\\": 1, "nesting\\u003c/h2\\u003e\\\\n\\u003cp\\u003esometimes": 1, "nestingnested": 2, "netlify": 1, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "no": 4, "nodetype": 1, "noindex\\": 1, "not": 15, "note": 8, "null": 1, "number": 3, "object": 6, "of": 77, "on": 13, "once": 1, "one": 5, "open": 1, "opt": 2, "opt-out": 2, "optimization": 2, "optimization\\": 1, "option": 3, "option\\u003c/a\\u003e": 1, "optional": 8, "optional-segments\\": 1, "optional-segments\\\\\\": 1, "or": 13, "order\\": 1, "organization": 3, "organization\\": 1, "organization\\u003c/h2\\u003e\\\\n\\u003cp\\u003eroutes": 1, "organizationscalingon": 1, "organizationscalingroute": 1, "organize": 4, "other": 13, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "our": 3, "out": 11, "outlet": 8, "outlet\\": 1, "outlet_component": 1, "outside": 2, "over": 2, "own": 2, "package": 6, "pagedisclaimerroot": 2, "pages": 2, "param": 6, "param\\": 1, "parameters": 3, "parameters\\\\\\": 1, "params": 16, "parent": 12, "parentheses": 2, "parentnode": 2, "parse": 3, "part": 2, "parts": 2, "pass": 2, "path": 10, "pathless": 1, "pathless-routes\\\\\\": 1, "pathname": 2, "paths": 2, "pdf": 3, "pdf\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/files": 3, "pending": 3, "performance": 2, "performance\\": 1, "pick": 2, "pipethrough": 1, "places": 2, "please": 1, "plugin": 2, "point": 4, "positions": 2, "postcss": 2, "postcss\\": 1, "power": 2, "prefer": 6, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "prefix": 2, "presets": 2, "presets\\": 1, "pretty": 2, "previoussibling": 1, "primary": 1, "primary-nav": 2, "productid": 1, "productid\\u003c/code\\u003e": 1, "progressive": 3, "project": 1, "project-buttons": 2, "project-card": 2, "projects": 6, "projects/": 1, "projects/\\\\n│": 1, "pronounce": 2, "property": 2, "provide": 2, "public": 2, "pull": 1, "pulling": 2, "put": 4, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 3, "quite": 2, "random": 1, "rather": 2, "re": 2, "react": 10, "react-router-scroll-positions": 1, "read": 2, "readablestream": 1, "recommendation": 2, "recommended": 2, "redirect": 4, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "refactor": 2, "register": 4, "regular": 3, "related": 1, "released": 2, "reliably": 2, "remix": 27, "remix-custom-routes": 1, "remix-flat-routes": 1, "remix-json-routes": 1, "remix\\": 2, "removechild": 2, "removeitem": 1, "removing": 2, "render": 4, "rendered": 2, "renders": 2, "repeating": 2, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 1, "rest": 4, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 4, "roadmap": 2, "roadmap/": 1, "roadmap/\\\\n│": 1, "rocking": 1, "rolling": 1, "root": 37, "root-route\\": 1, "root-route\\\\\\": 1, "root\\": 1, "route": 89, "route-file-naming\\\\\\": 1, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 2, "route\\\\\\": 2, "route\\u003c/a\\u003e": 2, "route\\u003c/h2\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 1, "route\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "route\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index": 3, "route\\u003c/th\\u003e\\\\n\\u003cth\\u003elayout\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index": 3, "routebasic": 2, "routediscovery": 1, "router": 9, "router\\": 2, "routes": 72, "routes/": 11, "routes/\\\\n│": 10, "routes/\\\\n└──": 1, "routes/docs": 3, "routes/docs\\": 1, "routes/ignoredroutefiles": 1, "routes\\": 5, "routes\\\\\\": 2, "routes\\u003c/b\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003esometimes": 1, "routes\\u003c/h2\\u003e\\\\n\\u003cp\\u003eany": 1, "routes\\u003c/h2\\u003e\\\\n\\u003cp\\u003enested": 1, "routes\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhile": 1, "routes\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_index": 1, "routesdot": 2, "routesescaping": 2, "routesnested": 2, "routing": 9, "routing\\u003c/a\\u003e": 1, "run/docs/file-conventions/routes": 1, "run\\": 1, "running": 3, "runtimes": 3, "salt-lake-city": 4, "same": 4, "san-diego": 4, "sanjaya": 2, "scale": 2, "scales": 2, "scaling": 1, "scaling\\": 2, "scaling\\\\\\": 1, "scripts": 3, "scripts\\": 1, "scroll-experience": 2, "scrollrestoration": 3, "scrollrestoration\\": 1, "scrollto": 1, "section": 1, "section\\u003c/a\\u003e": 1, "see": 3, "segment": 14, "segments": 15, "segments\\": 2, "segments\\u003c/a\\u003e": 1, "segments\\u003c/h2\\u003e\\\\n\\u003cp\\u003eusually": 1, "segments\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewrapping": 1, "segmentsnested": 2, "segmentssplat": 2, "server": 21, "server\\": 3, "serves": 2, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 2, "setup": 2, "share": 2, "shared": 4, "shopify": 1, "should": 4, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "signature": 2, "similar": 1, "simple": 2, "simplified": 2, "simplifying": 1, "simply": 2, "single": 5, "single-segment": 2, "sitemap": 2, "siteurl\\": 1, "sized": 2, "skip": 2, "slashes": 2, "slice": 1, "slug\\": 1, "small-to-medium": 2, "so": 11, "so-weird": 4, "some": 12, "something": 6, "sometimes": 2, "sorry": 2, "spa": 5, "special": 7, "specific": 2, "specify": 2, "splat": 6, "splat-routes\\": 1, "splat-routes\\\\\\": 1, "ssr": 1, "stages": 1, "start": 6, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "static": 2, "stats": 2, "stick": 2, "storagekey2": 3, "storedy": 3, "straightforward": 2, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "stuff": 2, "style=\\\\\\": 80, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "subjective": 2, "such": 4, "support": 3, "support\\": 1, "system": 4, "tabindex=\\\\\\": 14, "tailwind": 2, "tailwind\\": 1, "tea": 2, "team-photo": 2, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "than": 2, "thank": 1, "that": 42, "the": 218, "their": 4, "them": 7, "them\\u003c/li\\u003e\\\\n\\u003cli\\u003eeasy": 1, "then": 6, "there": 6, "these": 17, "these\\\\napp/routes/app": 1, "they": 2, "think": 4, "this": 34, "those": 4, "though": 2, "thousands": 2, "through": 1, "thus": 2, "title\\": 1, "tls": 2, "tls\\": 1, "to": 74, "toc\\": 1, "too": 4, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "trailing": 2, "trailing_": 2, "tread": 2, "treated": 2, "trending": 16, "true": 6, "true\\\\\\": 24, "try": 1, "ts": 6, "ts\\": 1, "ts\\\\n│": 3, "ts\\u003c/code\\u003e": 1, "tsx": 152, "tsx\\\\\\": 12, "tsx\\\\n\\\\n#": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ch2": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eall": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003enote": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003esome": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003ethe": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eurl\\u003c/th\\u003e\\\\n\\u003cth\\u003ematched": 7, "tsx\\\\napp/routes/app": 1, "tsx\\\\napp/routes/app/route": 1, "tsx\\\\n│": 51, "tsx\\\\n└──": 10, "tsx\\u003c/code\\u003e": 15, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003enote": 3, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eremix": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003esimilar": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003ethe": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003ethink": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eyou": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/about\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/about": 6, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/american-flag-speedo\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/beef/and/cheese\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/$": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/categories\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/mine\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts_": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/salt-lake-city\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts": 5, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/san-diego\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts": 2, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts/trending\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts": 4, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/concerts\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts": 2, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/en/american-flag-speedo\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/en/categories\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files/talks/remix-conf-final-may_2022": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files/talks/remix-conf_final": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files/talks/remix-conf_old": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/files\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/files": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/fr/american-flag-speedo\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/fr/categories\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/login\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_auth": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/register\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_auth": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/dolla-bills-$\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/sitemap": 2, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e/weird-url/_index\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/dolla-bills-": 1, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/root": 7, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/_auth": 2, "tsx\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/concerts": 6, "turn": 2, "tutorial": 3, "two": 2, "type": 2, "typeof": 1, "types": 2, "typescript": 4, "typescript\\": 1, "typically": 4, "ui": 4, "ui\\": 1, "under": 1, "underscore": 10, "understand": 2, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 4, "update-timeline": 2, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 43, "urls": 8, "urls\\": 1, "urls\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewe": 1, "urlsoptional": 2, "use": 8, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 2, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "useful": 2, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "users": 2, "uses": 2, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "usually": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "valid": 2, "validation": 2, "validation\\": 1, "value": 6, "values": 2, "vanilla": 3, "var": 82, "variables": 2, "variables\\": 1, "various": 2, "version": 2, "very": 2, "via": 12, "view": 2, "visit": 2, "visualization": 1, "visualization\\u003c/a\\u003e": 1, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "want": 16, "way": 5, "we": 17, "well": 4, "what": 2, "when": 11, "which": 2, "while": 3, "who": 2, "why": 3, "will": 30, "window": 11, "with": 34, "without": 14, "wonder": 2, "words": 2, "works": 4, "would": 8, "wrapping": 1, "writes": 2, "writes\\": 1, "writing": 2, "xml": 6, "xml\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/": 1, "xml\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003eapp/routes/weird-url": 1, "you": 80, "your": 31, "||": 3, "©": 1, "—": 4, "•docs": 1, "│": 114, "└──": 45, "├──": 121, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 9018 }, { "id": "582d1c4a01be68f1b6988b4c", "doc_id": "a8c7133359d50b963b8f1c99", "title": "route-prerendering", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/building-your-application/route-prerendering.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/route-prerendering.json", "content": "--- title: Route Pre-rendering use_cases: \u003e- static site generation, ssg, blog sites, documentation, marketing pages, performance optimization, seo improvement tags: - prerender - ssg - static - performance - build - seo version: '1.0' description: \u003e- Pre-render SolidStart routes to static HTML for faster loads and better SEO. Perfect for blogs, docs, and marketing sites. --- Route pre-rendering powers Static Site Generation (SSG) by producing static HTML pages during the build process. This results in faster load times and better SEO, making it especially useful for content-rich sites such as documentation, blogs, and marketing pages. Static files are served without server-side processing at runtime. Configure prerendering for specific routes using the `routes` option ```js { 6 } import { defineConfig } from \"@solidjs/start/config\"; export default defineConfig({ server: { prerender: { routes: [\"/\", \"/about\"] } } }); ``` Or to pre-render all routes, you can pass `true` to the `crawlLinks` option ```js { 6 } import { defineConfig } from \"@solidjs/start/config\"; export default defineConfig({ server: { prerender: { crawlLinks: true } } }); ``` For advanced pre-rendering options, refer to [Nitro's documentation](https://nitro.build/config#prerender). [SolidBase](https://solidbase.dev) simplifies SSG development with built-in support for fast, pre-rendered Markdown and MDX pages.", "term_freq": { "---": 2, "//github": 1, "//nitro": 1, "//solidbase": 1, "/about": 1, "\u003e-": 2, "@solidjs/start/config": 2, "advanced": 1, "all": 1, "and": 5, "are": 1, "as": 1, "at": 1, "better": 2, "blog": 1, "blogs": 2, "build": 2, "build/config#prerender": 1, "built-in": 1, "by": 1, "can": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/building-your-application/route-prerendering": 1, "configure": 1, "content-rich": 1, "crawllinks": 2, "default": 2, "defineconfig": 4, "description": 1, "dev": 1, "development": 1, "docs": 1, "documentation": 3, "during": 1, "especially": 1, "export": 2, "fast": 1, "faster": 2, "files": 1, "for": 6, "from": 2, "generation": 2, "github-document": 1, "html": 2, "https": 3, "import": 2, "improvement": 1, "in": 1, "it": 1, "js": 2, "load": 1, "loads": 1, "making": 1, "markdown": 1, "marketing": 3, "mdx": 2, "nitro": 1, "optimization": 1, "option": 2, "options": 1, "or": 1, "pages": 4, "pass": 1, "perfect": 1, "performance": 2, "powers": 1, "pre-render": 2, "pre-rendered": 1, "pre-rendering": 3, "prerender": 3, "prerendering": 1, "process": 1, "processing": 1, "producing": 1, "refer": 1, "results": 1, "route": 2, "route-prerendering": 1, "routes": 5, "runtime": 1, "seo": 4, "served": 1, "server": 2, "server-side": 1, "simplifies": 1, "site": 2, "sites": 3, "solidbase": 1, "solidstart": 1, "specific": 1, "ssg": 4, "static": 6, "such": 1, "support": 1, "tags": 1, "the": 3, "this": 1, "times": 1, "title": 1, "to": 4, "true": 2, "use_cases": 1, "useful": 1, "using": 1, "version": 1, "with": 1, "without": 1, "you": 1 }, "length": 177 }, { "id": "cddadad86c78c0b6c3feb43b", "doc_id": "0dbb925f64fd1bd9488b4054", "title": "route", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/components/route.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/route.json", "content": "--- title: Route use_cases: \u003e- defining routes, app structure, url mapping, component rendering, nested routing tags: - component - routes - structure - paths - nested - configuration version: '1.0' description: \u003e- Route component defines your application's URL structure and maps paths to components with support for multiple paths and nested routing. --- `Route` is the component used when defining the routes of an application. This component is used to define the structure of the application and the components that will be rendered for each route. :::note[Multiple paths] Routes support defining multiple paths using an array. This is useful for when you want a route to remain mounted and not re-render when switching between two or more locations that it matches: ```jsx \u003cRoute path={[\"/login\", \"/register\"]} component={Login} /\u003e ``` This would mean navigating from `/login` to `/register` would not cause the `Login` component to re-render. ::: | prop | type | description | | ------------ | -------------------- | ----------------------------------------------------------------- | | path | `string \\| string[]` | Path partial for defining the route segment | | component | `Component` | Component that will be rendered for the matched segment | | matchFilters | `MatchFilters` | Additional constraints for matching against the route | | children | `JSX.Element` | Nested `\u003cRoute\u003e` definitions | | preload | `RoutePreloadFunc` | Function called during preload or when the route is navigated to. |", "term_freq": { "---": 2, "------------": 1, "--------------------": 1, "-----------------------------------------------------------------": 1, "//github": 1, "/\u003e": 1, "/login": 2, "/register": 2, "\u003croute": 1, "\u003croute\u003e": 1, "\u003e-": 2, "\\|": 1, "additional": 1, "against": 1, "an": 2, "and": 4, "app": 1, "application": 3, "array": 1, "be": 2, "between": 1, "called": 1, "cause": 1, "children": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/components/route": 1, "component": 9, "component=": 1, "components": 2, "configuration": 1, "constraints": 1, "define": 1, "defines": 1, "defining": 4, "definitions": 1, "description": 2, "during": 1, "each": 1, "element": 1, "for": 6, "from": 1, "function": 1, "github-document": 1, "https": 1, "is": 4, "it": 1, "jsx": 2, "locations": 1, "login": 2, "mapping": 1, "maps": 1, "matched": 1, "matches": 1, "matchfilters": 2, "matching": 1, "mdx": 1, "mean": 1, "more": 1, "mounted": 1, "multiple": 3, "navigated": 1, "navigating": 1, "nested": 4, "not": 2, "note": 1, "of": 2, "or": 2, "partial": 1, "path": 2, "path=": 1, "paths": 5, "preload": 2, "prop": 1, "re-render": 2, "remain": 1, "rendered": 2, "rendering": 1, "route": 9, "routepreloadfunc": 1, "routes": 4, "routing": 2, "segment": 2, "string": 2, "structure": 4, "support": 2, "switching": 1, "tags": 1, "that": 3, "the": 10, "this": 3, "title": 1, "to": 6, "two": 1, "type": 1, "url": 2, "use_cases": 1, "used": 2, "useful": 1, "using": 1, "version": 1, "want": 1, "when": 4, "will": 2, "with": 1, "would": 2, "you": 1, "your": 1 }, "length": 200 }, { "id": "1acb6c93be71dd3f0c9c032d", "doc_id": "5ec1ddf6b142c638622ce133", "title": "router", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/components/router.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/router.json", "content": "--- title: Router use_cases: \u003e- app initialization, root setup, layout wrapper, routing context, main configuration tags: - component - root - initialization - layout - configuration - context version: '1.0' description: \u003e- Router is the top-level component that manages your app's routing, providing context and configuration for all child routes and navigation. --- The `Router` component is a top level component that manages the routing of your application. There is an optional `root` prop that can be used to wrap the entire application in a layout component, which will not be updated when the page changes. ```tsx import { render } from \"solid-js/web\"; import { Router, Route } from \"@solidjs/router\"; const App = (props) =\u003e ( \u003c\u003e \u003ch1\u003eRoot header\u003c/h1\u003e {props.children} \u003c/\u003e ); render( () =\u003e \u003cRouter root={App}\u003e{/*... routes */}\u003c/Router\u003e, document.getElementById(\"root\") ); ``` | prop | type | description | | ------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | children | `JSX.Element`, `RouteDefinition`, or `RouteDefinition[]` | The route definitions | | root | Component | Top level layout component | | base | string | Base url to use for matching routes | | actionBase | string | Root url for server actions, default: `/_server` | | preload | boolean | Enables/disables preloads globally, default: `true` | | explicitLinks | boolean | Disables all anchors being intercepted and instead requires `\u003cA\u003e`. default: `false`. (To disable interception for a specific link, set `target` to any value, e.g. `\u003ca target=\"_self\"\u003e`.) | | url | string | The initial route to render |", "term_freq": { "*/": 1, "---": 2, "-------------": 1, "--------------------------------------------------------": 1, "-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------": 1, "/*": 1, "//github": 1, "/_server": 1, "\u003c/\u003e": 1, "\u003c/router\u003e": 1, "\u003c\u003e": 1, "\u003ca": 1, "\u003ca\u003e": 1, "\u003ch1\u003eroot": 1, "\u003crouter": 1, "=\u003e": 2, "\u003e-": 2, "@solidjs/router": 1, "_self": 1, "actionbase": 1, "actions": 1, "all": 2, "an": 1, "anchors": 1, "and": 3, "any": 1, "app": 4, "application": 2, "base": 2, "be": 2, "being": 1, "boolean": 2, "can": 1, "changes": 1, "child": 1, "children": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/components/router": 1, "component": 7, "configuration": 3, "const": 1, "context": 3, "default": 3, "definitions": 1, "description": 2, "disable": 1, "disables": 1, "document": 1, "element": 1, "enables/disables": 1, "entire": 1, "explicitlinks": 1, "false": 1, "for": 4, "from": 2, "getelementbyid": 1, "github-document": 1, "globally": 1, "header\u003c/h1\u003e": 1, "https": 1, "import": 2, "in": 1, "initial": 1, "initialization": 2, "instead": 1, "intercepted": 1, "interception": 1, "is": 3, "jsx": 1, "layout": 4, "level": 2, "link": 1, "main": 1, "manages": 2, "matching": 1, "mdx": 1, "navigation": 1, "not": 1, "of": 1, "optional": 1, "or": 1, "page": 1, "preload": 1, "preloads": 1, "prop": 2, "props": 2, "providing": 1, "render": 3, "requires": 1, "root": 6, "root=": 1, "route": 3, "routedefinition": 2, "router": 5, "routes": 3, "routing": 3, "server": 1, "set": 1, "setup": 1, "solid-js/web": 1, "specific": 1, "string": 3, "tags": 1, "target": 1, "target=": 1, "that": 3, "the": 7, "there": 1, "title": 1, "to": 5, "top": 2, "top-level": 1, "true": 1, "tsx": 1, "type": 1, "updated": 1, "url": 3, "use": 1, "use_cases": 1, "used": 1, "value": 1, "version": 1, "when": 1, "which": 1, "will": 1, "wrap": 1, "wrapper": 1, "your": 2 }, "length": 205 }, { "id": "a0e0d8ab9d06cc15b8d9f865", "doc_id": "28c7e142c5260178f410ec17", "title": "routing-and-navigation", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/routing-and-navigation.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/routing-and-navigation.json", "content": "--- title: Routing \u0026 navigation order: 4 use_cases: \u003e- page navigation, url routing, spa routing, dynamic routes, nested layouts, route parameters, lazy loading pages tags: - routing - navigation - routes - spa - lazy-loading - parameters - layouts version: '1.0' description: \u003e- Implement client-side routing in Solid apps with dynamic routes, nested layouts, route parameters, and lazy-loaded components. --- [Solid Router](/solid-router) simplifies routing in Solid applications to help developers manage navigation and rendering by defining routes using JSX or objects passed via props. ## Getting started **1. Install the router** This package is not included by default. ```package-install @solidjs/router ``` **2. Setup the `\u003cRouter\u003e` component** Start your application by rendering the [Router](/solid-router/reference/components/router) component. This component will match the URL to display the desired page. ```jsx import { render } from \"solid-js/web\"; import { Router } from \"@solidjs/router\"; render(() =\u003e \u003cRouter /\u003e, document.getElementById(\"root\")); ``` **3. Provide a root level layout** This layout will not update on page change and is the ideal place for top-level navigation and [Context Providers](/concepts/context). ```jsx import { render } from \"solid-js/web\"; import { Router } from \"@solidjs/router\"; const App = (props) =\u003e ( \u003c\u003e \u003ch1\u003eSite Title\u003c/h1\u003e {props.children} \u003c/\u003e ); render(() =\u003e \u003cRouter root={App} /\u003e, document.getElementById(\"root\")); ``` **4. Add routes** Each route is added to the `Router` using the [`Route`](/solid-router/reference/components/route) component. Here, you specify a path and a component to render once the user navigates to that path. ```jsx import { render } from \"solid-js/web\"; import { Router, Route } from \"@solidjs/router\"; import Home from \"./pages/Home\"; import Users from \"./pages/Users\"; const App = (props) =\u003e ( \u003c\u003e \u003ch1\u003eSite Title\u003c/h1\u003e {props.children} \u003c/\u003e ); render( () =\u003e ( \u003cRouter root={App}\u003e \u003cRoute path=\"/\" component={Home} /\u003e \u003cRoute path=\"/users\" component={Users} /\u003e \u003c/Router\u003e ), document.getElementById(\"root\") ); ``` **5. Create a CatchAll route (404 page)** A catchall route can be used for pages not found at any nested level of the router. Using `*` will retrieve the rest of the path. Optionally, you can also add a parameter name. ```jsx import { render } from \"solid-js/web\"; import { Router, Route } from \"@solidjs/router\"; import Home from \"./pages/Home\"; import Users from \"./pages/Users\"; import NotFound from \"./pages/NotFound\"; const App = (props) =\u003e ( \u003c\u003e \u003ch1\u003eSite Title\u003c/h1\u003e {props.children} \u003c/\u003e ); render( () =\u003e ( \u003cRouter root={App}\u003e \u003cRoute path=\"/\" component={Home} /\u003e \u003cRoute path=\"/users\" component={Users} /\u003e \u003cRoute path=\"*paramName\" component={NotFound} /\u003e \u003c/Router\u003e ), document.getElementById(\"root\") ); ``` **6. Create links to your routes** The [`\u003cA\u003e`](/solid-router/reference/components/a) component provides navigation to an application's routes. Alternatively, you can use the [native anchor tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). However, the `\u003cA\u003e` component provides additional functionality including properties for CSS, `inactiveClass` and `activeClass`. ```jsx import { render } from \"solid-js/web\"; import { Router, Route, A } from \"@solidjs/router\"; import Home from \"./pages/Home\"; import Users from \"./pages/Users\"; import NotFound from \"./pages/NotFound\"; const App = (props) =\u003e ( \u003c\u003e \u003cnav\u003e \u003cA href=\"/\"\u003eHome\u003c/A\u003e \u003cA href=\"/users\"\u003eUsers\u003c/A\u003e \u003c/nav\u003e \u003ch1\u003eSite Title\u003c/h1\u003e {props.children} \u003c/\u003e ); render( () =\u003e ( \u003cRouter root={App}\u003e \u003cRoute path=\"/\" component={Home} /\u003e \u003cRoute path=\"/users\" component={Users} /\u003e \u003cRoute path=\"*paramName\" component={NotFound} /\u003e \u003c/Router\u003e ), document.getElementById(\"root\") ); ``` ## Lazy-loading route components The [`lazy`](/reference/component-apis/lazy) function postpones the loading of a component until it is navigated to. ```jsx import { lazy } from \"solid-js\"; import { render } from \"solid-js/web\"; import { Router, Route } from \"@solidjs/router\"; const Users = lazy(() =\u003e import(\"./pages/Users\")); const Home = lazy(() =\u003e import(\"./pages/Home\")); const App = (props) =\u003e ( \u003c\u003e \u003ch1\u003eSite Title\u003c/h1\u003e {props.children} \u003c/\u003e ); render( () =\u003e ( \u003cRouter root={App}\u003e \u003cRoute path=\"/users\" component={Users} /\u003e \u003cRoute path=\"/\" component={Home} /\u003e \u003c/Router\u003e ), document.getElementById(\"root\") ); ``` ## Dynamic routes If a path is unknown ahead of time, you can treat part of the path as a flexible parameter. ```jsx import { lazy } from \"solid-js\"; import { render } from \"solid-js/web\"; import { Router, Route } from \"@solidjs/router\"; const Users = lazy(() =\u003e import(\"./pages/Users\")); const User = lazy(() =\u003e import(\"./pages/User\")); const Home = lazy(() =\u003e import(\"./pages/Home\")); render( () =\u003e ( \u003cRouter\u003e \u003cRoute path=\"/users\" component={Users} /\u003e \u003cRoute path=\"/users/:id\" component={User} /\u003e \u003cRoute path=\"/\" component={Home} /\u003e \u003c/Router\u003e ), document.getElementById(\"root\") ); ``` The colon indicates that `id` can be any string, and as long as the URL fits that pattern, the `\u003cUser\u003e` component will show. You can then access that `id` from within a route component with [`useParams`](/solid-router/reference/primitives/use-params). **Note on animation/transitions**: Routes that share the same path will be treated as the same route. If you want to force re-render, you can wrap your component in a keyed [`\u003cShow\u003e`](/reference/components/show): ```jsx \u003cShow when={params.something} keyed\u003e \u003cMyComponent\u003e \u003c/Show\u003e ``` ### Accessing parameters In cases where you may need to access a dynamic route's parameters within your components, the [`useParams`](/solid-router/reference/primitives/use-params) primitive is available. Once the parameters have been accessed using `useParams`, they can be used within your component: ```jsx import { useParams } from \"@solidjs/router\"; const User = () =\u003e { const params = useParams(); // Retrieve the dynamic route parameters // Now you can access the id parameter as params.id return ( \u003cp\u003e This is the user with the id of \u003ccode\u003e{params.id}\u003c/code\u003e \u003c/p\u003e ); }; ``` `useParams` can be especially useful with other Solid primitives, such as [`createResource`](/reference/basic-reactivity/create-resource) and [`createSignal`](/reference/basic-reactivity/create-signal), which can create dynamic behaviors based on the route parameters. ```jsx import { createResource } from \"solid-js\"; import { useParams } from \"@solidjs/router\"; async function fetchUser(id) { const response = await fetch( `https://jsonplaceholder.typicode.com/users/${id}` ); return response.json(); } const User = () =\u003e { const params = useParams(); const [data] = createResource(() =\u003e params.id, fetchUser); // Pass the id parameter to createResource return ( \u003cdiv\u003e \u003cShow when={!data.loading} fallback={\u003cp\u003eLoading...\u003c/p\u003e}\u003e \u003cdiv\u003e \u003cp\u003eName: {data().name}\u003c/p\u003e \u003cp\u003eEmail: {data().email}\u003c/p\u003e \u003cp\u003ePhone: {data().phone}\u003c/p\u003e \u003c/div\u003e \u003c/Show\u003e \u003c/div\u003e ); }; ``` Every time the `id` parameter changes in this example, the `fetchUser` function is called to fetch the new user data. ### Validating routes Each path parameter can be validated using a `MatchFilter`. Instead of checking for the presence of a parameter, this allows for more complex routing descriptions: ```jsx import { lazy } from \"solid-js\"; import { render } from \"solid-js/web\"; import { Router, Route, type MatchFilters } from \"@solidjs/router\"; const User = lazy(() =\u003e import(\"./pages/User\")); const filters: MatchFilters = { parent: [\"mom\", \"dad\"], // allow enum values id: /^\\d+$/, // only allow numbers withHtmlExtension: (v: string) =\u003e v.length \u003e 5 \u0026\u0026 v.endsWith(\".html\"), // only `*.html` extensions wanted }; render(() =\u003e ( \u003cRouter\u003e \u003cRoute path=\"/users/:parent/:id/:withHtmlExtension\" component={User} matchFilters={filters} /\u003e \u003c/Router\u003e ), document.getElementById(\"root\")); ``` In this example, the `matchFilters` prop provides a way to validate the `parent`, `id` and `withHtmlExtension` parameters against the filters defined in `filters`. If the validation fails, the route will not match. In this example: - `/users/mom/123/contact.html` will match, - `/users/dad/123/about.html` will match, - `/users/aunt/123/contact.html` will **not** match as `:parent` is not 'mom' or 'dad', - `/users/mom/me/contact.html` will **not** match as `:id` is not a number, - `/users/dad/123/contact` will **not** match as `:withHtmlExtension` is missing `.html`. ### Optional parameters Parameters can be specified as optional by adding a question mark to the end of the parameter name: ```jsx // Matches stories and stories/123 but not stories/123/comments \u003cRoute path=\"/stories/:id?\" component={Stories} /\u003e ``` ### Wildcard routes To match any descendent routes within a given path, you can use the wildcard token (`*`). This can be used to represent any value in that segment of the path. ```jsx // Will match any path beginning with foo (eg. foo/, foo/a/, foo/a/b/c) \u003cRoute path=\"foo/*\" component={Foo} /\u003e ``` To expose the wildcard portion to the component as a parameter, you can name it: ```jsx \u003cRoute path=\"foo/*any\" component={Foo} /\u003e ``` Wildcard tokens **must** be the last part of the path; `foo/*any/bar` will not create any routes. ### Multiple paths The `Routes` component also supports defining multiple paths using an array. This avoids a route rerendering when switching between two or more locations that it matches: ```jsx // Navigating from \"/login\" to \"/register\" will not cause the component to re-render \u003cRoute path={[\"login\", \"register\"]} component={Login} /\u003e ``` ## Nested routes Only leaf `\u003cRoute\u003e` nodes (the innermost `\u003cRoute\u003e` components) are given a route. ```jsx \u003cRoute path=\"/users\" component={Users}\u003e \u003cRoute path=\"/:id\" component={User} /\u003e \u003c/Route\u003e ``` The following two route definitions both match the same URL `/users/:id` and render the same component: ```jsx \u003cRoute path=\"/users/:id\" component={User} /\u003e \u003cRoute path=\"/users\"\u003e \u003cRoute path=\"/:id\" component={User} /\u003e \u003c/Route\u003e ``` If you want to make the parent its own route, you have to specify it separately: ```jsx \u003cRoute path=\"/users\" component={Users} /\u003e \u003cRoute path=\"/users/:id\" component={User} /\u003e // or \u003cRoute path=\"/users\"\u003e \u003cRoute path=\"/\" component={Users} /\u003e \u003cRoute path=\"/:id\" component={User} /\u003e \u003c/Route\u003e ``` You can also take advantage of nesting by using `props.children` passed to the route component. ```jsx function PageWrapper(props) { return ( \u003cdiv\u003e \u003ch1\u003e We love our users! \u003c/h1\u003e {props.children} \u003cA href=\"/\"\u003eBack Home\u003c/A\u003e \u003c/div\u003e ); } \u003cRoute path=\"/users\" component={PageWrapper}\u003e \u003cRoute path=\"/\" component={Users} /\u003e \u003cRoute path=\"/:id\" component={User} /\u003e \u003c/Route\u003e; ``` The routes are still configured the same, however now their components will appear inside the parent component where the `props.children` is declared. Routes can also be nested indefinitely. This example will only render the route `/layer1/layer2`, which will be nested in 3 divs. ```jsx \u003cRoute path=\"/\" component={(props) =\u003e \u003cdiv\u003eOutermost layer starts here {props.children}\u003c/div\u003e} \u003e \u003cRoute path=\"layer1\" component={(props) =\u003e \u003cdiv\u003eSecond layer {props.children}\u003c/div\u003e} \u003e \u003cRoute path=\"layer2\" component={() =\u003e \u003cdiv\u003eInnermost layer\u003c/div\u003e} /\u003e \u003c/Route\u003e \u003c/Route\u003e ``` ## Preload functions With preload functions, data fetching is started parallel to loading the route, so it can be used as soon as possible. The preload function prevents this by being called once the Route is loaded, or eagerly if links are hovered. As the only argument, the preload function is passed an object that is used to access route information: ```jsx import { lazy } from \"solid-js\"; import { Route } from \"@solidjs/router\"; const User = lazy(() =\u003e import(\"./pages/users/[id].js\")); // preload function function preloadUser({ params, location }) { // do preload } ``` The preload function is then passed in the `\u003cRoute\u003e` definition: ```jsx \u003cRoute path=\"/users/:id\" component={User} preload={preloadUser} /\u003e ``` --- You can export preload functions and data wrappers that correspond to routes from a dedicated `[route].data.js` or `[route].data.ts` file. This pattern provides a way to import the data function without loading anything else. ```tsx title=\"src/pages/users/[id].data.js\" import { query } from \"@solidjs/router\"; export const getUser = query(async (id) =\u003e { return (await fetch(`https://swapi.tech/api/people/${id}/`)).json(); }, \"getUser\"); export function preloadUser({ params, location, intent }) { return getUser(params.id); } ``` `preloadUser` is passed an object which contains `params`, `location` and `intent`. Please note that while it is best practice to name these files as `[id].data.js`, you can still name them as `route.data.js`. The value of a preload function is passed to the page component when called at any time other than \"preload\". This means you can initialize the page, or use [Data APIs](/solid-router/reference/data-apis/create-async). :::note To prevent a fetch from happening more than once, or to trigger a refetch, you can use the [`query` function](/solid-router/reference/data-apis/query). ::: ```jsx title=\"index.jsx\" import { lazy } from \"solid-js\"; import { render } from \"solid-js/web\"; import { Router, Route } from \"@solidjs/router\"; import { preloadUser } from \"./pages/users/[id].data.js\"; const Home = lazy(() =\u003e import(\"./pages/Home\")); const User = lazy(() =\u003e import(\"./pages/users/[id]\")); render( () =\u003e ( \u003cRouter\u003e \u003cRoute path=\"/\" component={Home} /\u003e \u003cRoute path=\"/users/:id\" component={User} preload={preloadUser} /\u003e \u003c/Router\u003e ), document.getElementById(\"root\") ); ``` `[id].jsx` contains the component that gets rendered. When you wrap the function within [`createAsync`](/solid-router/reference/data-apis/create-async) with the imported function, it will yield [a signal](/concepts/signals) once the anticipated promise resolves. ```tsx title=\"[id].tsx\" import { createAsync } from \"@solidjs/router\"; import { getUser } from \"./[id].data\"; export default function Users(props) { console.log(\"Users.props\", props); const user = createAsync(() =\u003e getUser(props.params.id)); return ( \u003c\u003e \u003ch1\u003eUser\u003c/h1\u003e \u003cdiv\u003e \u003cpre\u003e{JSON.stringify(user(), null, 2)}\u003c/pre\u003e \u003c/div\u003e \u003c/\u003e ); } ``` To learn more about routing your Solid applications, visit the [Solid Router documentation](/solid-router).", "term_freq": { "##": 5, "###": 5, "\u0026\u0026": 1, "**": 1, "**1": 1, "**2": 1, "**3": 1, "**4": 1, "**5": 1, "**6": 1, "**must**": 1, "**not**": 3, "**note": 1, "*paramname": 2, "---": 3, "//": 12, "//developer": 1, "//github": 1, "//jsonplaceholder": 1, "//swapi": 1, "/\u003e": 33, "/^\\d+$/": 1, "/concepts/context": 1, "/concepts/signals": 1, "/layer1/layer2": 1, "/login": 1, "/pages/home": 6, "/pages/notfound": 2, "/pages/user": 2, "/pages/users": 5, "/pages/users/": 3, "/reference/basic-reactivity/create-resource": 1, "/reference/basic-reactivity/create-signal": 1, "/reference/component-apis/lazy": 1, "/reference/components/show": 1, "/register": 1, "/solid-router": 2, "/solid-router/reference/components/a": 1, "/solid-router/reference/components/route": 1, "/solid-router/reference/components/router": 1, "/solid-router/reference/data-apis/create-async": 2, "/solid-router/reference/data-apis/query": 1, "/solid-router/reference/primitives/use-params": 2, "/stories/": 1, "/users": 11, "/users/": 7, "/users/aunt/123/contact": 1, "/users/dad/123/about": 1, "/users/dad/123/contact": 1, "/users/mom/123/contact": 1, "/users/mom/me/contact": 1, "404": 1, "\u003c/\u003e": 6, "\u003c/code\u003e": 1, "\u003c/div\u003e": 6, "\u003c/h1\u003e": 1, "\u003c/nav\u003e": 1, "\u003c/p\u003e": 5, "\u003c/pre\u003e": 1, "\u003c/route\u003e": 6, "\u003c/router\u003e": 7, "\u003c/show\u003e": 2, "\u003c\u003e": 6, "\u003ca": 3, "\u003ca\u003e": 2, "\u003ccode\u003e": 1, "\u003cdiv\u003e": 4, "\u003cdiv\u003einnermost": 1, "\u003cdiv\u003eoutermost": 1, "\u003cdiv\u003esecond": 1, "\u003ch1\u003e": 1, "\u003ch1\u003esite": 5, "\u003ch1\u003euser\u003c/h1\u003e": 1, "\u003cmycomponent\u003e": 1, "\u003cnav\u003e": 1, "\u003cp\u003e": 1, "\u003cp\u003eemail": 1, "\u003cp\u003eloading": 1, "\u003cp\u003ename": 1, "\u003cp\u003ephone": 1, "\u003cpre\u003e": 1, "\u003croute": 37, "\u003croute\u003e": 3, "\u003crouter": 6, "\u003crouter\u003e": 4, "\u003cshow": 2, "\u003cshow\u003e": 1, "\u003cuser\u003e": 1, "=\u003e": 32, "\u003e-": 2, "\u003eback": 1, "\u003ehome\u003c/a\u003e": 1, "\u003eusers\u003c/a\u003e": 1, "@solidjs/router": 15, "about": 1, "access": 4, "accessed": 1, "accessing": 1, "activeclass": 1, "add": 2, "added": 1, "adding": 1, "additional": 1, "advantage": 1, "against": 1, "ahead": 1, "allow": 2, "allows": 1, "also": 4, "alternatively": 1, "an": 4, "anchor": 1, "and": 13, "animation/transitions**": 1, "anticipated": 1, "any": 7, "anything": 1, "apis": 1, "app": 10, "appear": 1, "application": 2, "applications": 2, "apps": 1, "are": 3, "argument": 1, "array": 1, "as": 16, "async": 2, "at": 2, "available": 1, "avoids": 1, "await": 2, "based": 1, "be": 12, "been": 1, "beginning": 1, "behaviors": 1, "being": 1, "best": 1, "between": 1, "both": 1, "but": 1, "by": 6, "called": 3, "can": 23, "cases": 1, "catchall": 2, "cause": 1, "change": 1, "changes": 1, "checking": 1, "children": 10, "client-side": 1, "colon": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/routing-and-navigation": 1, "com/users/$": 1, "complex": 1, "component": 19, "component**": 1, "component=": 35, "components": 5, "configured": 1, "console": 1, "const": 23, "contains": 2, "context": 1, "correspond": 1, "create": 4, "createasync": 3, "createresource": 4, "createsignal": 1, "css": 1, "dad": 2, "data": 17, "declared": 1, "dedicated": 1, "default": 2, "defined": 1, "defining": 2, "definition": 1, "definitions": 1, "descendent": 1, "description": 1, "descriptions": 1, "desired": 1, "developers": 1, "display": 1, "divs": 1, "do": 1, "document": 9, "documentation": 1, "dynamic": 6, "each": 2, "eagerly": 1, "eg": 1, "else": 1, "email": 1, "end": 1, "endswith": 1, "enum": 1, "especially": 1, "every": 1, "example": 4, "export": 4, "expose": 1, "extensions": 1, "fails": 1, "fallback=": 1, "fetch": 4, "fetching": 1, "fetchuser": 3, "file": 1, "files": 1, "filters": 4, "fits": 1, "flexible": 1, "following": 1, "foo": 3, "foo/": 1, "foo/*": 1, "foo/*any": 1, "foo/*any/bar": 1, "foo/a/": 1, "foo/a/b/c": 1, "for": 5, "force": 1, "found": 1, "from": 43, "function": 16, "functionality": 1, "functions": 3, "getelementbyid": 9, "gets": 1, "getting": 1, "getuser": 5, "github-document": 1, "given": 2, "happening": 1, "have": 2, "help": 1, "here": 2, "home": 12, "home\u003c/a\u003e": 1, "hovered": 1, "however": 2, "href=": 3, "html": 7, "https": 4, "id": 37, "id/": 1, "ideal": 1, "if": 5, "implement": 1, "import": 49, "imported": 1, "in": 11, "inactiveclass": 1, "included": 1, "including": 1, "indefinitely": 1, "index": 1, "indicates": 1, "information": 1, "initialize": 1, "innermost": 1, "inside": 1, "install": 1, "instead": 1, "intent": 2, "is": 20, "it": 7, "its": 1, "js": 6, "json": 3, "jsx": 26, "keyed": 1, "keyed\u003e": 1, "last": 1, "layer": 2, "layer1": 1, "layer2": 1, "layer\u003c/div\u003e": 1, "layout": 1, "layout**": 1, "layouts": 3, "lazy": 16, "lazy-loaded": 1, "lazy-loading": 2, "leaf": 1, "learn": 1, "length": 1, "level": 2, "links": 2, "loaded": 1, "loading": 5, "location": 3, "locations": 1, "log": 1, "login": 2, "long": 1, "love": 1, "make": 1, "manage": 1, "mark": 1, "match": 10, "matches": 2, "matchfilter": 1, "matchfilters": 3, "matchfilters=": 1, "may": 1, "mdx": 1, "means": 1, "missing": 1, "mom": 2, "more": 4, "mozilla": 1, "multiple": 2, "name": 6, "native": 1, "navigated": 1, "navigates": 1, "navigating": 1, "navigation": 6, "need": 1, "nested": 6, "nesting": 1, "new": 1, "nodes": 1, "not": 9, "note": 2, "notfound": 4, "now": 2, "null": 1, "number": 1, "numbers": 1, "object": 2, "objects": 1, "of": 13, "on": 3, "once": 5, "only": 5, "optional": 2, "optionally": 1, "or": 8, "order": 1, "org/en-us/docs/web/html/element/a": 1, "other": 2, "our": 1, "own": 1, "package": 1, "package-install": 1, "page": 6, "pages": 2, "pagewrapper": 2, "parallel": 1, "parameter": 9, "parameters": 11, "params": 11, "parent": 5, "parent/": 1, "part": 2, "pass": 1, "passed": 6, "path": 11, "path=": 37, "paths": 2, "pattern": 2, "phone": 1, "place": 1, "please": 1, "portion": 1, "possible": 1, "postpones": 1, "practice": 1, "preload": 10, "preload=": 2, "preloaduser": 6, "presence": 1, "prevent": 1, "prevents": 1, "primitive": 1, "primitives": 1, "promise": 1, "prop": 1, "properties": 1, "props": 23, "provide": 1, "providers": 1, "provides": 4, "query": 3, "question": 1, "re-render": 2, "refetch": 1, "register": 1, "render": 21, "rendered": 1, "rendering": 2, "represent": 1, "rerendering": 1, "resolves": 1, "response": 2, "rest": 1, "retrieve": 2, "return": 7, "root": 10, "root=": 5, "route": 33, "router": 14, "router**": 1, "routes": 16, "routes**": 2, "routing": 8, "routing-and-navigation": 1, "same": 5, "segment": 1, "separately": 1, "setup": 1, "share": 1, "show": 1, "signal": 1, "simplifies": 1, "so": 1, "solid": 6, "solid-js": 6, "solid-js/web": 9, "something": 1, "soon": 1, "spa": 2, "specified": 1, "specify": 2, "src/pages/users/": 1, "start": 1, "started": 2, "starts": 1, "still": 2, "stories": 2, "stories/123": 1, "stories/123/comments": 1, "string": 2, "stringify": 1, "such": 1, "supports": 1, "switching": 1, "tag": 1, "tags": 1, "take": 1, "tech/api/people/$": 1, "than": 2, "that": 11, "the": 78, "their": 1, "them": 1, "then": 2, "these": 1, "they": 1, "this": 14, "time": 3, "title": 1, "title\u003c/h1\u003e": 5, "title=": 3, "to": 32, "token": 1, "tokens": 1, "top-level": 1, "treat": 1, "treated": 1, "trigger": 1, "ts": 1, "tsx": 3, "two": 2, "type": 1, "typicode": 1, "unknown": 1, "until": 1, "update": 1, "url": 4, "use": 4, "use_cases": 1, "used": 5, "useful": 1, "useparams": 8, "user": 21, "users": 17, "using": 7, "validate": 1, "validated": 1, "validating": 1, "validation": 1, "value": 2, "values": 1, "version": 1, "via": 1, "visit": 1, "want": 2, "wanted": 1, "way": 2, "we": 1, "when": 3, "when=": 2, "where": 2, "which": 3, "while": 1, "wildcard": 4, "will": 18, "with": 7, "withhtmlextension": 4, "within": 5, "without": 1, "wrap": 2, "wrappers": 1, "yield": 1, "you": 19, "your": 6 }, "length": 1886 }, { "id": "d84db4ca68488c37036bc90d", "doc_id": "f27c8afff874da86834295f8", "title": "routing", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/building-your-application/routing.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/routing.json", "content": "--- title: Routing use_cases: \u003e- page navigation, url structure, nested layouts, dynamic paths, route organization, site architecture tags: - routing - navigation - pages - layouts - dynamic - filesystem version: '1.0' description: \u003e- Build your SolidStart app with file-based routing. Create pages, nested layouts, and dynamic routes with simple file structure. --- Routing serves as a key component of web applications. Within SolidStart, there are two types: - **UI routes** \u0026mdash; define the user interface in your app - **[API routes](/solid-start/building-your-application/api-routes)** \u0026mdash; define the serverless functions in your app To read more about API routes, [see the API Routes section.](/solid-start/building-your-application/api-routes) ## Creating new routes SolidStart uses file based routing which is a way of defining your routes by creating files and folders in your project. This includes your pages and API routes. SolidStart traverses your `routes` directory, collects all of the routes, and then makes them accessible using the [`\u003cFileRoutes /\u003e`](/solid-start/reference/routing/file-routes). This component will only include your UI routes, not your API routes. Rather than manually defining each `Route` inside a `Router` component, `\u003cFileRoutes /\u003e` will generate the routes for you based on the file system. Because `\u003cFileRoutes /\u003e` returns a routing config object, you can use it with the router of your choice. In this example, we use [`solid-router`](/solid-router): ```tsx {7-9} title=\"app.tsx\" import { Suspense } from \"solid-js\"; import { Router } from \"@solidjs/router\"; import { FileRoutes } from \"@solidjs/start/router\"; export default function App() { return ( \u003cRouter root={(props) =\u003e \u003cSuspense\u003e{props.children}\u003c/Suspense\u003e}\u003e \u003cFileRoutes /\u003e \u003c/Router\u003e ); } ``` The `\u003cRouter /\u003e` component expects a `root` prop which functions as the root layout of your entire app. You will want to make sure `props.children` is wrapped in `\u003cSuspense /\u003e` since each component will be lazy-loaded automatically. Without this, you could see some unexpected hydration errors. `\u003cFileRoutes /\u003e` will generate a route for each file in the `routes` directory and its subdirectories. For a route to be rendered as a page, it must default export a component. This component represents the content that will be rendered when users visit the page: ```tsx title=\"routes/index.tsx\" export default function Index() { return \u003cdiv\u003eWelcome to my site!\u003c/div\u003e; } ``` This means that all you have to do is create a file in your `routes` folder and SolidStart takes care of everything else needed to make that route available to visit in your application! ## File based routing Each file in the `routes` directory is treated as a route. To create a new route or page in your application, simply create a new file in the `routes` directory. The file name will be the URL path for the route: - `example.com/blog` ➜ `/routes/blog.tsx` - `example.com/contact` ➜ `/routes/contact.tsx` - `example.com/directions` ➜ `/routes/directions.tsx` ### Nested routes If you need nested routes, you can create a directory with the name of the preceding route segment, and create new files in that directory: - `example.com/blog/article-1` ➜ `/routes/blog/article-1.tsx` - `example.com/work/job-1` ➜ `/routes/work/job-1.tsx` When a file is named `index`, it will be rendered when there are no additional URL route segments being requested for a matching directory: - `example.com` ➜ `/routes/index.tsx` - `example.com/socials` ➜ `/routes/socials/index.tsx` ### Nested layouts If you want to create nested layouts you can create a file with the same name as a route folder. ```jsx {2} |-- routes/ |-- blog.tsx // layout file |-- blog/ |-- article-1.tsx // example.com/blog/article-1 |-- article-2.tsx // example.com/blog/article-2 ``` In this case, the `blog.tsx` file will act as a layout for the articles in the `blog` folder. You can reference the child's content by using `props.children` in the layout. ```tsx tab title=\"TypeScript\" // routes/blog.tsx import { RouteSectionProps } from \"@solidjs/router\"; export default function BlogLayout(props: RouteSectionProps) { return \u003cdiv\u003e{props.children}\u003c/div\u003e; } ``` ```jsx tab title=\"JavaScript\" // routes/blog.jsx export default function BlogLayout(props) { return \u003cdiv\u003e{props.children}\u003c/div\u003e; } ``` **Note**: Creating a `blog/index.tsx` or `blog/(blogIndex).tsx` is not the same as it would only be used for the index route. ## Renaming Index By default, the component that is rendered for a route comes from the default export of the `index.tsx` file in each folder. However, this can make it difficult to find the correct `index.tsx` file when searching, since there will be multiple files with that name. To avoid this, you can rename the `index.tsx` file to the name of the folder it is in, enclosed in parentheses. This way, it will be treated as the default export for that route: ```jsx {9} |-- routes/ // example.com |-- blog/ |-- article-1.tsx // example.com/blog/article-1 |-- article-2.tsx |-- work/ |-- job-1.tsx // example.com/work/job-1 |-- job-2.tsx |-- socials/ |-- (socials).tsx // example.com/socials ``` #### Escaping nested routes When you have a path that is nested but wish for it to have a separate Layout, you can escape the nested route by applying a name between `( )`. This will allow you to create a new route that is not nested under the previous route: ```jsx {5-6} |-- routes/ // example.com |-- users/ |-- index.tsx // example.com/users |-- projects.tsx // example.com/users/projects |-- users(details)/ |-- [id].tsx // example.com/users/1 ``` Additionally, you can incorporate nested layouts of their own: ```tsx {2, 78} |-- routes/ |-- users.tsx |-- users(details).tsx |-- users/ |-- index.tsx |-- projects.tsx |-- users(details)/ |-- [id].tsx ``` ### Dynamic routes Dynamic routes are routes that can match any value for one segment of the route. When your URL path contains a dynamic segment, square brackets (`[]`) are used to define the dynamic segment: - `example.com/users/:id` ➜ `/routes/users/[id].tsx` - `example.com/users/:id/:name` ➜ `/routes/users/[id]/[name].tsx` - `example.com/*missing` ➜ `/routes/[...missing].tsx` This allows you to create a single route that can match any value for that segment of the URL path. For example, `/users/1` and `/users/2` are both valid routes and rather than defining separate routes for each user, you can use a dynamic route to match any value for the `id` segment. ```tsx {3} |-- routes/ |-- users/ |-- [id].tsx ``` For example, using `solid-router`, you could use the [`useParams`](/solid-router/reference/primitives/use-params) primitive to match the dynamic segment: ```tsx title=\"routes/users/[id].tsx\" import { useParams } from \"@solidjs/router\"; export default function UserPage() { const params = useParams(); return \u003cdiv\u003eUser {params.id}\u003c/div\u003e; } ``` #### Optional parameter If you have optional parameters in your route, you can use the double square brackets (`[[id]]`) to define the dynamic segment. This will match a route with or without a parameter. ```tsx {3} |-- routes/ |-- users/ |-- [[id]].tsx ``` In this case, some pages that could be matched include: - `/users` - `/users/1` - `/users/abc` #### Catch-all routes Catch-all routes are a special type of dynamic route that can match any number of segments. They are defined using square brackets with `...` before the label for the route (e.g. `[...post]`). ```tsx {4} |-- routes/ |-- blog/ |-- index.tsx |-- [...post].tsx ``` A catch-all route will have one parameter which is a forward-slash delimited string of all the URL segments after the last valid segment. For example, with the route `[...post]` and a URL path of `/post/foo` the `params` object returned from the `useParams` primitive will have a `post` property with the value of `post/foo`. For a URL path of `/post/foo/baz` it will be `post/foo/baz`. ```tsx title=\"routes/blog/[...post].tsx\" import { useParams } from \"@solidjs/router\"; export default function BlogPage() { const params = useParams(); return \u003cdiv\u003eBlog {params.post}\u003c/div\u003e; } ``` ## Route groups Using route groups, you can organize your routes in a way that makes sense for your application, without affecting the URL structure. Since file-based routing is based on the file system, it can be difficult to organize your routes in a way that makes sense for your application. In SolidStart, route groups are defined by using parenthesis (`()`) surrounding the folder name: ```tsx {2} |-- routes/ |-- (static) |-- about-us // example.com/about-us |-- index.tsx |-- contact-us // example.com/contact-us |-- index.tsx ``` ## Additional route config SolidStart offers a way to add additional route configuration outside of the file system. Since SolidStart supports the use of other routers, you can use the `route` export provided by `\u003cFileRoutes /\u003e` to define the route configuration for the router of your choice. ```jsx tab title=\"TypeScript\" {3-7} import type { RouteSectionProps, RouteDefinition } from \"@solidjs/router\"; export const route = { preload() { // define preload function } } satisfies RouteDefinition export default function UsersLayout(props: RouteSectionProps) { return ( \u003cdiv\u003e \u003ch1\u003eUsers\u003c/h1\u003e {props.children} \u003c/div\u003e ); } ``` ```jsx tab title=\"JavaScript\" {3-7} export const route = { preload() { // define preload function } }; export default function UsersLayout(props) { return ( \u003cdiv\u003e \u003ch1\u003eUsers\u003c/h1\u003e {props.children} \u003c/div\u003e ); } ``` [api-routes]: /core-concepts/api-routes [fileroutes]: /api/FileRoutes", "term_freq": { "##": 5, "###": 3, "####": 3, "\u0026mdash": 2, "**": 2, "**note**": 1, "**ui": 1, "---": 2, "//": 17, "//github": 1, "/\u003e": 8, "/api/fileroutes": 1, "/core-concepts/api-routes": 1, "/post/foo": 1, "/post/foo/baz": 1, "/routes/": 1, "/routes/blog": 1, "/routes/blog/article-1": 1, "/routes/contact": 1, "/routes/directions": 1, "/routes/index": 1, "/routes/socials/index": 1, "/routes/users/": 2, "/routes/work/job-1": 1, "/solid-router": 1, "/solid-router/reference/primitives/use-params": 1, "/solid-start/building-your-application/api-routes": 2, "/solid-start/reference/routing/file-routes": 1, "/users": 1, "/users/1": 2, "/users/2": 1, "/users/abc": 1, "3-7": 2, "5-6": 1, "7-9": 1, "78": 1, "\u003c/div\u003e": 7, "\u003c/router\u003e": 1, "\u003c/suspense\u003e": 1, "\u003cdiv\u003e": 4, "\u003cdiv\u003eblog": 1, "\u003cdiv\u003euser": 1, "\u003cdiv\u003ewelcome": 1, "\u003cfileroutes": 6, "\u003ch1\u003eusers\u003c/h1\u003e": 2, "\u003crouter": 2, "\u003csuspense": 1, "\u003csuspense\u003e": 1, "=\u003e": 1, "\u003e-": 2, "@solidjs/router": 5, "@solidjs/start/router": 1, "about": 1, "about-us": 1, "accessible": 1, "act": 1, "add": 1, "additional": 3, "additionally": 1, "affecting": 1, "after": 1, "all": 3, "allow": 1, "allows": 1, "and": 10, "any": 4, "api": 5, "api-routes": 1, "app": 6, "application": 4, "applications": 1, "applying": 1, "architecture": 1, "are": 8, "article-1": 2, "article-2": 2, "articles": 1, "as": 8, "automatically": 1, "available": 1, "avoid": 1, "based": 4, "be": 11, "because": 1, "before": 1, "being": 1, "between": 1, "blog": 3, "blog/": 4, "blog/index": 1, "blogindex": 1, "bloglayout": 2, "blogpage": 1, "both": 1, "brackets": 3, "build": 1, "but": 1, "by": 6, "can": 16, "care": 1, "case": 2, "catch-all": 3, "child": 1, "children": 7, "choice": 2, "collects": 1, "com": 3, "com/*missing": 1, "com/about-us": 1, "com/blog": 1, "com/blog/article-1": 3, "com/blog/article-2": 1, "com/contact": 1, "com/contact-us": 1, "com/directions": 1, "com/socials": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/building-your-application/routing": 1, "com/users": 1, "com/users/": 2, "com/users/1": 1, "com/users/projects": 1, "com/work/job-1": 2, "comes": 1, "component": 8, "config": 2, "configuration": 2, "const": 4, "contact-us": 1, "contains": 1, "content": 2, "correct": 1, "could": 3, "create": 10, "creating": 3, "default": 12, "define": 7, "defined": 2, "defining": 3, "delimited": 1, "description": 1, "details": 3, "difficult": 2, "directory": 7, "do": 1, "double": 1, "dynamic": 11, "each": 6, "else": 1, "enclosed": 1, "entire": 1, "errors": 1, "escape": 1, "escaping": 1, "everything": 1, "example": 26, "expects": 1, "export": 14, "file": 18, "file-based": 2, "fileroutes": 2, "files": 3, "filesystem": 1, "find": 1, "folder": 6, "folders": 1, "for": 22, "forward-slash": 1, "from": 9, "function": 10, "functions": 2, "generate": 2, "github-document": 1, "groups": 3, "have": 6, "however": 1, "https": 1, "hydration": 1, "id": 11, "id/": 1, "if": 3, "import": 7, "in": 23, "include": 2, "includes": 1, "incorporate": 1, "index": 12, "inside": 1, "interface": 1, "is": 12, "it": 10, "its": 1, "javascript": 2, "job-1": 1, "job-2": 1, "jsx": 7, "key": 1, "label": 1, "last": 1, "layout": 5, "layouts": 6, "lazy-loaded": 1, "make": 3, "makes": 3, "manually": 1, "match": 6, "matched": 1, "matching": 1, "mdx": 1, "means": 1, "missing": 1, "more": 1, "multiple": 1, "must": 1, "my": 1, "name": 9, "named": 1, "navigation": 2, "need": 1, "needed": 1, "nested": 11, "new": 5, "no": 1, "not": 3, "number": 1, "object": 2, "of": 21, "offers": 1, "on": 2, "one": 2, "only": 2, "optional": 2, "or": 3, "organization": 1, "organize": 2, "other": 1, "outside": 1, "own": 1, "page": 4, "pages": 4, "parameter": 3, "parameters": 1, "params": 5, "parentheses": 1, "parenthesis": 1, "path": 6, "paths": 1, "post": 6, "post/foo": 1, "post/foo/baz": 1, "preceding": 1, "preload": 4, "previous": 1, "primitive": 2, "project": 1, "projects": 2, "prop": 1, "property": 1, "props": 12, "provided": 1, "rather": 2, "read": 1, "reference": 1, "rename": 1, "renaming": 1, "rendered": 4, "represents": 1, "requested": 1, "return": 8, "returned": 1, "returns": 1, "root": 2, "root=": 1, "route": 35, "routedefinition": 2, "router": 4, "routers": 1, "routes": 28, "routes**": 1, "routes/": 8, "routes/blog": 2, "routes/blog/": 1, "routes/index": 1, "routes/users/": 1, "routesectionprops": 4, "routing": 9, "same": 2, "satisfies": 1, "searching": 1, "section": 1, "see": 2, "segment": 9, "segments": 3, "sense": 2, "separate": 2, "serverless": 1, "serves": 1, "simple": 1, "simply": 1, "since": 4, "single": 1, "site": 2, "socials": 1, "socials/": 1, "solid-js": 1, "solid-router": 2, "solidstart": 8, "some": 2, "special": 1, "square": 3, "static": 1, "string": 1, "structure": 3, "subdirectories": 1, "supports": 1, "sure": 1, "surrounding": 1, "suspense": 1, "system": 3, "tab": 4, "tags": 1, "takes": 1, "than": 2, "that": 16, "the": 62, "their": 1, "them": 1, "then": 1, "there": 3, "they": 1, "this": 14, "title": 1, "title=": 8, "to": 22, "traverses": 1, "treated": 2, "tsx": 53, "two": 1, "type": 2, "types": 1, "typescript": 2, "ui": 1, "under": 1, "unexpected": 1, "url": 9, "use": 7, "use_cases": 1, "used": 2, "useparams": 6, "user": 2, "userpage": 1, "users": 5, "users/": 4, "userslayout": 2, "uses": 1, "using": 6, "valid": 2, "value": 4, "version": 1, "visit": 2, "want": 2, "way": 5, "we": 1, "web": 1, "when": 6, "which": 3, "will": 16, "wish": 1, "with": 10, "within": 1, "without": 3, "work/": 1, "would": 1, "wrapped": 1, "you": 22, "your": 21, "|--": 44, "➜": 10 }, "length": 1384 }, { "id": "9f3fcea2a882d5c242187983", "doc_id": "3079bf71aa5a8a0987573ed9", "title": "run-with-owner", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/run-with-owner.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/run-with-owner.json", "content": "--- title: runWithOwner order: 5 use_cases: \u003e- async operations, manual cleanup, context access, ownership control, setTimeout callbacks, lifecycle management tags: - async - ownership - context - cleanup - lifecycle - effects version: '1.0' description: \u003e- Execute code under a specific owner in SolidJS for proper cleanup and context access, especially in async operations and setTimeout callbacks. --- ```ts import { runWithOwner } from \"solid-js\" import type { Owner } from \"solid-js\" function runWithOwner\u003cT\u003e(owner: Owner, fn: (() =\u003e void) =\u003e T): T ``` Executes the given function under the provided owner, instead of (and without affecting) the owner of the outer scope. By default, computations created by `createEffect`, `createMemo`, etc. are owned by the owner of the currently executing code (the return value of `getOwner`), so in particular these will get disposed when their owner does. Calling `runWithOwner` provides a way to override this default to a manually specified owner (typically, the return value from a previous call to `getOwner`), enabling more precise control of when computations get disposed. Having a (correct) owner is important for two reasons: - Computations without an owner cannot be cleaned up. For example, if you call `createEffect` without an owner (e.g., in the global scope), the effect will continue running forever, instead of being disposed when its owner gets disposed. - `useContext` obtains context by walking up the owner tree to find the nearest ancestor providing the desired context. So without an owner you cannot look up any provided context (and with the wrong owner, you might obtain the wrong context). Manually setting the owner is especially helpful when doing reactivity outside of any owner scope. In particular, asynchronous computation (via either `async` functions or callbacks like `setTimeout`) lose their automatically set owner, so remembering the original owner via `getOwner` and restoring it via `runWithOwner` is necessary in these cases. For example: ```ts const owner = getOwner() setTimeout(() =\u003e { // This callback gets run without owner. // Restore owner via runWithOwner: runWithOwner(owner, () =\u003e { const foo = useContext(FooContext) createEffect(() =\u003e { console.log(foo) }) }) }, 1000) ``` **Note:** that owners are not what determines dependency tracking, so `runWithOwner` does not help with tracking in asynchronous functions; use of reactive state in the asynchronous part (e.g. after the first `await`) will not be tracked as a dependency.", "term_freq": { "**": 1, "**note": 1, "---": 2, "//": 2, "//github": 1, "1000": 1, "=\u003e": 5, "\u003e-": 2, "access": 2, "affecting": 1, "after": 1, "an": 3, "ancestor": 1, "and": 5, "any": 2, "are": 2, "as": 1, "async": 4, "asynchronous": 3, "automatically": 1, "await": 1, "be": 2, "being": 1, "by": 4, "call": 2, "callback": 1, "callbacks": 3, "calling": 1, "cannot": 2, "cases": 1, "cleaned": 1, "cleanup": 3, "code": 2, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/run-with-owner": 1, "computation": 1, "computations": 3, "console": 1, "const": 2, "context": 7, "continue": 1, "control": 2, "correct": 1, "created": 1, "createeffect": 3, "creatememo": 1, "currently": 1, "default": 2, "dependency": 2, "description": 1, "desired": 1, "determines": 1, "disposed": 4, "does": 2, "doing": 1, "effect": 1, "effects": 1, "either": 1, "enabling": 1, "especially": 2, "etc": 1, "example": 2, "execute": 1, "executes": 1, "executing": 1, "find": 1, "first": 1, "fn": 1, "foo": 2, "foocontext": 1, "for": 4, "forever": 1, "from": 3, "function": 2, "functions": 2, "get": 2, "getowner": 4, "gets": 2, "github-document": 1, "given": 1, "global": 1, "having": 1, "help": 1, "helpful": 1, "https": 1, "if": 1, "import": 2, "important": 1, "in": 8, "instead": 2, "is": 3, "it": 1, "its": 1, "lifecycle": 2, "like": 1, "log": 1, "look": 1, "lose": 1, "management": 1, "manual": 1, "manually": 2, "mdx": 1, "might": 1, "more": 1, "nearest": 1, "necessary": 1, "not": 3, "obtain": 1, "obtains": 1, "of": 8, "operations": 2, "or": 1, "order": 1, "original": 1, "outer": 1, "outside": 1, "override": 1, "owned": 1, "owner": 24, "owners": 1, "ownership": 2, "part": 1, "particular": 2, "precise": 1, "previous": 1, "proper": 1, "provided": 2, "provides": 1, "providing": 1, "reactive": 1, "reactivity": 1, "reasons": 1, "remembering": 1, "restore": 1, "restoring": 1, "return": 2, "run": 1, "run-with-owner": 1, "running": 1, "runwithowner": 7, "runwithowner\u003ct\u003e": 1, "scope": 3, "set": 1, "settimeout": 4, "setting": 1, "so": 4, "solid-js": 2, "solidjs": 1, "specific": 1, "specified": 1, "state": 1, "tags": 1, "that": 1, "the": 19, "their": 2, "these": 2, "this": 2, "title": 1, "to": 4, "tracked": 1, "tracking": 2, "tree": 1, "ts": 2, "two": 1, "type": 1, "typically": 1, "under": 2, "up": 3, "use": 1, "use_cases": 1, "usecontext": 2, "value": 2, "version": 1, "via": 4, "void": 1, "walking": 1, "way": 1, "what": 1, "when": 4, "will": 3, "with": 2, "without": 5, "wrong": 2, "you": 3 }, "length": 360 }, { "id": "b5dd7d14547b8e15c65d9b9f", "doc_id": "2073b024dbb146b3dc377d6b", "title": "Runtimes, Adapters, Templates, and Deployment | Remix", "url": "https://v2.remix.run/docs/discussion/runtimes", "type": "html", "source": "remix:does", "path": "devour_data/docs/runtimes--adapters--templates--and-deployment---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsRuntimes, Adapters, Templates, and DeploymentGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageJavaScript RuntimesAdaptersRemix App ServerTemplatesOn this pageJavaScript RuntimesAdaptersRemix App ServerTemplatesRuntimes, Adapters, Templates, and Deployment Deploying a Remix application has four layers: A JavaScript Runtime like Node.js A JavaScript web server like Express.js A server adapter like @remix-run/express A web host or platform Depending on your web host, you may have fewer layers. For example, deploying to Cloudflare Pages takes care of 2, 3, and 4 all at once. Deploying Remix inside an Express app will have all four, and using the \"Remix App Server\" combines 2 and 3! You can wire all of these up yourself or start with a Remix Template. Let's talk about what each part does. JavaScript Runtimes Remix can be deployed to any JavaScript runtime like Node.js, Shopify Oxygen, Cloudflare Workers/Pages, Fastly Compute, Deno, Bun, etc. Each runtime has varying support for the standard Web APIs that Remix is built on, so a Remix runtime package is required to polyfill any missing features of the runtime. These polyfills include web standard APIs like Request, Response, crypto, and more. This allows you to use the same APIs on the server as in the browser. The following runtimes packages are available: @remix-run/cloudflare-pages @remix-run/cloudflare-workers @remix-run/deno @remix-run/node The majority of the APIs you interact with in your app are not imported directly from these packages, so your code is fairly portable between runtimes. However, occasionally you'll import something from these packages for a specific feature that isn't a standard Web API. For example, you might want to store cookies on the file system or in Cloudflare KV storage. These are specific features of runtimes that aren't shared with other runtimes: // store sessions in cloudflare KV storage import { createWorkersKVSessionStorage } from \"@remix-run/cloudflare\"; // store sessions on the file system in node import { createFileSessionStorage } from \"@remix-run/node\"; But if you're storing a session in the cookie itself, this is supported in all runtimes: import { createCookieSessionStorage } from \"@remix-run/node\"; // or cloudflare/deno Adapters Remix is not an HTTP server but rather a handler inside an existing HTTP server. Adapters allow the Remix handler to run inside the HTTP server. Some JavaScript runtimes, especially Node.js, have multiple ways to create an HTTP server. For example, in Node.js you can use Express.js, fastify, or raw http.createServer. Each of these servers has its own Request/Response API. The adapter's job is to convert the incoming request to a Web Fetch Request, run the Remix handler, and then adapt the Web Fetch Response back to the host server's response API. Here's some pseudocode that illustrates the flow. // import the app build created by `remix build` import build from \"./build/index.js\"; // an express http server const app = express(); // and here your Remix app is \"just a request handler\" app.all(\"*\", createRequestHandler({ build })); // This is pseudo code, but illustrates what adapters do: export function createRequestHandler({ build }) { // creates a Fetch API request handler from the server build const handleRequest = createRemixRequestHandler(build); // returns an express.js specific handler for the express server return async (req, res) =\u003e { // adapts the express.req to a Fetch API request const request = createRemixRequest(req); // calls the app handler and receives a Fetch API response const response = await handleRequest(request); // adapts the Fetch API response to the express.res sendRemixResponse(res, response); }; } Remix App Server For convenience, the Remix App Server is a basic express server for new projects, tinkering, or projects that don't have any specific needs from a server like Express and are deployed to Node.js environments. See @remix-run/serve Templates Remix is designed to be incredibly flexible with just enough opinions to connect the UI to the back end. However, it doesn't bring opinions on the database you use, how you cache data, or where and how your app is deployed. Remix templates are starting points for app development with all of these extra opinions baked in, created by the community. You can use a template with the --template flag in the Remix CLI that points to a repository on GitHub: npx create-remix@latest --template \u003corg\u003e/\u003crepo\u003e You can read more about templates in the Templates Guide. Once you've picked a template or set up an app from scratch, you're ready to start building your app!© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_975\\\":-5,\\\"_976\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":974},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"docs/discussion/runtimes.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"runtimes-adapters-templates-and-deployment\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#runtimes-adapters-templates-and-deployment\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRuntimes, Adapters, Templates, and Deployment\\u003c/h1\\u003e\\\\n\\u003cp\\u003eDeploying a Remix application has four layers:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eA JavaScript Runtime like Node.js\\u003c/li\\u003e\\\\n\\u003cli\\u003eA JavaScript web server like Express.js\\u003c/li\\u003e\\\\n\\u003cli\\u003eA server adapter like \\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eA web host or platform\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eDepending on your web host, you may have fewer layers. For example, deploying to Cloudflare Pages takes care of 2, 3, and 4 all at once. Deploying Remix inside an Express app will have all four, and using the \\\\\\\"Remix App Server\\\\\\\" combines 2 and 3!\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou can wire all of these up yourself or start with a Remix Template.\\u003c/p\\u003e\\\\n\\u003cp\\u003eLet's talk about what each part does.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"javascript-runtimes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#javascript-runtimes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eJavaScript Runtimes\\u003c/h2\\u003e\\\\n\\u003cp\\u003eRemix can be deployed to any JavaScript runtime like Node.js, Shopify Oxygen, Cloudflare Workers/Pages, Fastly Compute, Deno, Bun, etc.\\u003c/p\\u003e\\\\n\\u003cp\\u003eEach runtime has varying support for the standard Web APIs that Remix is built on, so a Remix runtime package is required to polyfill any missing features of the runtime. These polyfills include web standard APIs like Request, Response, crypto, and more. This allows you to use the same APIs on the server as in the browser.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe following runtimes packages are available:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://npm.im/@remix-run/cloudflare-pages\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://npm.im/@remix-run/cloudflare-workers\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://npm.im/@remix-run/deno\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"https://npm.im/@remix-run/node\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eThe majority of the APIs you interact with in your app are not imported directly from these packages, so your code is fairly portable between runtimes. However, occasionally you'll import something from these packages for a specific feature that isn't a standard Web API.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor example, you might want to store cookies on the file system or in Cloudflare KV storage. These are specific features of runtimes that aren't shared with other runtimes:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// store sessions in cloudflare KV storage\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecreateWorkersKVSessionStorage\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/cloudflare\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// store sessions on the file system in node\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecreateFileSessionStorage\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eBut if you're storing a session in the cookie itself, this is supported in all runtimes:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecreateCookieSessionStorage\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"adapters\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#adapters\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eAdapters\\u003c/h2\\u003e\\\\n\\u003cp\\u003eRemix is not an HTTP server but rather a handler inside an existing HTTP server. Adapters allow the Remix handler to run inside the HTTP server. Some JavaScript runtimes, especially Node.js, have multiple ways to create an HTTP server. For example, in Node.js you can use Express.js, fastify, or raw \\u003ccode\\u003ehttp.createServer\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eEach of these servers has its own Request/Response API. The adapter's job is to convert the incoming request to a Web Fetch Request, run the Remix handler, and then adapt the Web Fetch Response back to the host server's response API.\\u003c/p\\u003e\\\\n\\u003cp\\u003eHere's some pseudocode that illustrates the flow.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// import the app build created by `remix build`\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebuild\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./build/index.js\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// an express http server\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eapp\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eexpress\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// and here your Remix app is \\\\\\\"just a request handler\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eapp\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eall\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e*\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateRequestHandler\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebuild\\u003c/span\\u003e }));\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// This is pseudo code, but illustrates what adapters do:\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateRequestHandler\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebuild\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// creates a Fetch API request handler from the server build\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehandleRequest\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateRemixRequestHandler\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebuild\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// returns an express.js specific handler for the express server\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ereq\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eres\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// adapts the express.req to a Fetch API request\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateRemixRequest\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ereq\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// calls the app handler and receives a Fetch API response\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eresponse\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehandleRequest\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// adapts the Fetch API response to the express.res\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esendRemixResponse\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eres\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eresponse\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3 id=\\\\\\\"remix-app-server\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#remix-app-server\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRemix App Server\\u003c/h3\\u003e\\\\n\\u003cp\\u003eFor convenience, the Remix App Server is a basic express server for new projects, tinkering, or projects that don't have any specific needs from a server like Express and are deployed to Node.js environments.\\u003c/p\\u003e\\\\n\\u003cp\\u003eSee \\u003ca href=\\\\\\\"../other-api/serve\\\\\\\"\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"templates\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#templates\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eTemplates\\u003c/h2\\u003e\\\\n\\u003cp\\u003eRemix is designed to be incredibly flexible with just enough opinions to connect the UI to the back end. However, it doesn't bring opinions on the database you use, how you cache data, or where and how your app is deployed.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix templates are starting points for app development with all of these extra opinions baked in, created by the community.\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou can use a template with the \\u003ccode\\u003e--template\\u003c/code\\u003e flag in the Remix CLI that points to a repository on GitHub:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003enpx create-remix@latest --template \\u0026#x3C;org\\u003e/\\u0026#x3C;repo\\u003e\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eYou can read more about templates in the \\u003ca href=\\\\\\\"../guides/templates\\\\\\\"\\u003eTemplates Guide\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eOnce you've picked a template or \\u003ca href=\\\\\\\"../start/quickstart\\\\\\\"\\u003eset up an app from scratch\\u003c/a\\u003e, you're ready to start building your app!\\u003c/p\\u003e\\\",\\\"docs/discussion/runtimes\\\",\\\"headings\\\",[960,965,968,972],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"JavaScript Runtimes\\\",\\\"javascript-runtimes\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"Adapters\\\",\\\"adapters\\\",{\\\"_961\\\":969,\\\"_955\\\":970,\\\"_24\\\":971},\\\"h3\\\",\\\"Remix App Server\\\",\\\"remix-app-server\\\",{\\\"_961\\\":962,\\\"_955\\\":932,\\\"_24\\\":973},\\\"templates\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#adapters\\\\\\": 1, "#javascript-runtimes\\\\\\": 1, "#remix-app-server\\\\\\": 1, "#runtimes-adapters-templates-and-deployment\\\\\\": 1, "#templates\\\\\\": 1, "$\\": 1, "$rc": 3, "--base03": 12, "--base05": 3, "--base08": 18, "--base0a": 4, "--base0b": 5, "--base0d": 10, "--base0e": 16, "--template": 3, "-1\\\\\\": 5, "-5": 2, "/$": 1, "//": 12, "//npm": 4, "//v2": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/build/index": 2, "/guides/templates\\\\\\": 1, "/other-api/serve\\\\\\": 1, "/start/quickstart\\\\\\": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 1, "1\\\\\\": 3, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 2, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 5, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 2, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 2, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 2, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 2, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 2, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 3, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "98": 1, "99": 1, "9\\\\\\": 1, "\u003corg\u003e/\u003crepo\u003e": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 2, "@remix-run/": 1, "@remix-run/cloudflare": 1, "@remix-run/cloudflare-pages": 1, "@remix-run/cloudflare-workers": 1, "@remix-run/deno": 1, "@remix-run/dev": 1, "@remix-run/express": 1, "@remix-run/node": 5, "@remix-run/node\\": 1, "@remix-run/serve": 3, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 79, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ebut": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 11, "\\n": 1, "\\u0026#x3c": 1, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 3, "\\u003c/p\\u003e\\\\n\\u003ch2": 1, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003ea": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eeach": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efor": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ehere": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003elet": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eonce": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003esee": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eyou": 2, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003enpx": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003ca": 3, "\\u003ccode\\u003e--template\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/express\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ea": 1, "\\u003ccode\\u003ehttp": 1, "\\u003ch1": 1, "\\u003cspan": 52, "\\u003e": 13, "\\u003e*\\u003c/span\\u003e\\\\\\": 1, "\\u003e//": 12, "\\u003e=\\u003c/span\\u003e": 4, "\\u003e=\\u003e\\u003c/span\\u003e": 1, "\\u003e@remix-run/cloudflare\\u003c/span\\u003e\\\\\\": 1, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 2, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 7, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eadapters\\u003c/h2\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ejavascript": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eremix": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eruntimes": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003etemplates\\u003c/h2\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\u003e\\u003ca": 5, "\\u003e\\u003ccode\\u003e@remix-run/cloudflare-pages\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003e@remix-run/cloudflare-workers\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003e@remix-run/deno\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003ccode\\u003e@remix-run/serve\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/p\\u003e\\\\n\\u003ch2": 1, "\\u003e\\u003ccode\\u003e\\u003cspan": 3, "\\u003e\\u003cpre": 3, "\\u003e\\u003cspan": 18, "\\u003eall\\u003c/span\\u003e": 1, "\\u003eapp\\u003c/span\\u003e": 2, "\\u003easync\\u003c/span\\u003e": 1, "\\u003eawait\\u003c/span\\u003e": 1, "\\u003ebuild\\u003c/span\\u003e": 4, "\\u003econst\\u003c/span\\u003e": 4, "\\u003ecreatecookiesessionstorage\\u003c/span\\u003e": 1, "\\u003ecreatefilesessionstorage\\u003c/span\\u003e": 1, "\\u003ecreateremixrequest\\u003c/span\\u003e": 1, "\\u003ecreateremixrequesthandler\\u003c/span\\u003e": 1, "\\u003ecreaterequesthandler\\u003c/span\\u003e": 2, "\\u003ecreateworkerskvsessionstorage\\u003c/span\\u003e": 1, "\\u003eexport\\u003c/span\\u003e": 1, "\\u003eexpress\\u003c/span\\u003e": 1, "\\u003efrom\\u003c/span\\u003e": 4, "\\u003efunction\\u003c/span\\u003e": 1, "\\u003ehandlerequest\\u003c/span\\u003e": 2, "\\u003eimport\\u003c/span\\u003e": 4, "\\u003ereq\\u003c/span\\u003e": 2, "\\u003erequest\\u003c/span\\u003e": 2, "\\u003eres\\u003c/span\\u003e": 2, "\\u003eresponse\\u003c/span\\u003e": 2, "\\u003ereturn\\u003c/span\\u003e": 1, "\\u003esendremixresponse\\u003c/span\\u003e": 1, "\\u003eset": 1, "\\u003etemplates": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 28, "_22\\": 152, "_24\\": 156, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 5, "_958\\": 1, "_961\\": 4, "_975\\": 1, "_976\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 5, "accessibility\\": 1, "action\\": 1, "actiondata\\": 1, "adapt": 2, "adapter": 7, "adapters": 12, "adapters\\": 2, "adapters\\\\\\": 1, "adapts": 4, "all": 12, "allow": 2, "allows": 2, "an": 15, "and": 31, "any": 6, "api": 18, "api@remix-run/dev": 2, "api\\": 1, "apis": 8, "app": 31, "application": 2, "approach": 1, "are": 10, "aren": 2, "aria-hidden=\\\\\\": 5, "as": 5, "asked": 1, "asset": 3, "async": 1, "at": 3, "attrs\\": 1, "available": 2, "await": 1, "await\\": 1, "b=document": 1, "back": 4, "backend": 3, "baked": 2, "basename": 1, "basic": 2, "be": 5, "been": 2, "before": 1, "between": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "bring": 2, "browser": 5, "build": 9, "build\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "building": 2, "built": 3, "bun": 2, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 5, "by": 4, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "cache": 2, "calls": 2, "can": 11, "care": 2, "catch": 1, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 37, "cli": 7, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cloudflare": 8, "cloudflare/deno": 1, "cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "code": 8, "codeblock-line\\\\\\": 32, "color": 68, "combines": 2, "community": 5, "community\\": 1, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "compute": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "connect": 2, "console": 1, "const": 4, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "convenience": 2, "conventions": 2, "conventions\\": 1, "convert": 2, "cookie": 2, "cookies": 2, "cookies\\": 1, "create": 2, "create-remix": 3, "create-remix@latest": 2, "createcookiesessionstorage": 1, "created": 4, "createfilesessionstorage": 1, "createremixrequest": 1, "createremixrequesthandler": 1, "createremixstub": 2, "createremixstub\\": 1, "createrequesthandler": 2, "creates": 2, "createserver": 1, "createserver\\u003c/code\\u003e": 1, "createworkerskvsessionstorage": 1, "crypto": 2, "css": 15, "css\\": 1, "d=c": 2, "data": 18, "data-code-block=\\\\\\": 3, "data-lang=\\\\\\": 6, "data-line-number=\\\\\\": 32, "data-line-numbers=\\\\\\": 6, "data=": 1, "data\\": 2, "database": 2, "defer": 2, "defer\\": 1, "deferred": 1, "deno": 2, "dependency": 3, "depending": 1, "deployed": 6, "deploying": 5, "deployment": 6, "deployment\\": 2, "deployment\\u003c/h1\\u003e\\\\n\\u003cp\\u003edeploying": 1, "deploymentgetting": 1, "description\\": 1, "designed": 2, "dev": 3, "development": 5, "directly": 2, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 3, "doc\\": 1, "docs/discussion/runtimes": 1, "docs/discussion/runtimes\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsruntimes": 1, "document": 1, "does": 2, "doesn": 2, "don": 2, "done": 1, "e--": 1, "e=0": 1, "each": 4, "else": 2, "end": 2, "enhancement": 2, "enhancement\\": 1, "enough": 2, "enqueue": 1, "entry": 6, "environment": 3, "environments": 2, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "especially": 2, "etc": 2, "everything": 1, "example": 6, "examples": 1, "execution": 2, "execution\\": 1, "existing": 2, "explanation": 2, "explanation\\": 1, "export": 1, "express": 21, "extra": 2, "extract": 2, "extract\\": 1, "f=a": 1, "fairly": 2, "false": 3, "faqs": 2, "faqs\\": 1, "fastify": 2, "fastly": 2, "feature": 2, "features": 5, "fetch": 14, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "fewer": 2, "file": 13, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "firstchild": 2, "flag": 2, "flags": 2, "flags\\": 1, "flexible": 2, "flow": 4, "flow\\": 1, "following": 2, "for": 22, "form": 11, "form\\": 1, "found": 3, "four": 4, "frequently": 1, "from": 20, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 2, "future": 4, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "github": 2, "githubchat": 1, "gotchas": 2, "gotchas\\": 1, "guide": 4, "guide\\": 1, "guide\\u003c/a\\u003e": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "h3\\": 1, "handle": 2, "handle\\": 1, "handler": 13, "handler\\\\\\": 1, "handlerequest": 2, "handling": 4, "handling\\": 2, "has": 8, "hascontent\\": 1, "have": 8, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 4, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host": 6, "host\\": 1, "hot": 3, "how": 5, "however": 4, "href=\\\\\\": 12, "html": 1, "html\\": 1, "http": 11, "https": 6, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 5, "icon-link\\\\\\": 5, "id=\\\\\\": 5, "if": 8, "illustrates": 4, "im/@remix-run/cloudflare-pages\\\\\\": 1, "im/@remix-run/cloudflare-workers\\\\\\": 1, "im/@remix-run/deno\\\\\\": 1, "im/@remix-run/node\\\\\\": 1, "import": 13, "import\\\\\\": 1, "imported": 2, "imports": 4, "imports\\": 2, "in": 28, "inc": 1, "include": 2, "incoming": 2, "incredibly": 2, "index": 3, "initial": 1, "insertbefore": 1, "inside": 6, "integrating": 1, "interact": 2, "interactions": 1, "into": 2, "introduction": 1, "is": 23, "isn": 2, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 2, "iterative": 1, "its": 2, "itself": 2, "javascript": 12, "javascript-runtimes\\": 1, "javascript-runtimes\\\\\\": 1, "javascript\\": 1, "job": 2, "js": 22, "js\\": 1, "js\\u003c/li\\u003e\\\\n\\u003cli\\u003ea": 2, "js\\u003c/span\\u003e\\\\\\": 1, "json": 3, "json\\": 1, "just": 4, "key": 4, "know": 1, "kv": 4, "layers": 4, "lazy": 3, "learning": 1, "let": 4, "licensed": 1, "like": 12, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "ll": 2, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "majority": 2, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "math": 1, "may": 2, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "might": 2, "migrating": 4, "missing": 2, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 6, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "more": 4, "most": 1, "multiple": 2, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 1, "needs": 2, "network": 3, "new": 4, "new\\": 1, "nextsibling": 2, "node": 11, "node\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "nodetype": 1, "noindex\\": 1, "not": 7, "npx": 1, "null": 1, "number": 1, "occasionally": 2, "of": 17, "on": 17, "once": 4, "one": 1, "open": 1, "opinions": 6, "optimization": 2, "optimization\\": 1, "or": 17, "order\\": 1, "org\\u003e/\\u0026#x3c": 1, "other": 5, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "own": 2, "oxygen": 2, "package": 2, "packages": 6, "pagejavascript": 2, "pages": 2, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "part": 2, "pending": 3, "performance": 2, "performance\\": 1, "picked": 2, "pipethrough": 1, "platform": 1, "platform\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003edepending": 1, "points": 4, "polyfill": 2, "polyfills": 2, "portable": 2, "positions": 2, "postcss": 2, "postcss\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "projects": 4, "pseudo": 2, "pseudocode": 2, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "rather": 2, "raw": 2, "re": 4, "react": 8, "react-router-scroll-positions": 1, "read": 2, "readablestream": 1, "ready": 2, "receives": 2, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regular": 3, "related": 1, "released": 2, "remix": 40, "remix-app-server\\": 1, "remix-app-server\\\\\\": 1, "remix\\": 2, "removechild": 2, "removeitem": 1, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "repo\\u003e\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eyou": 1, "repository": 2, "req": 4, "request": 14, "request/response": 2, "request\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "required": 2, "res": 3, "res\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "resource": 3, "resources": 1, "response": 11, "response\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 1, "returns": 2, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 12, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run": 4, "run/docs/discussion/runtimes": 1, "run\\": 1, "running": 1, "runtime": 10, "runtimes": 17, "runtimes-adapters-templates-and-deployment\\\\\\": 1, "runtimes\\": 1, "runtimes\\u003c/h2\\u003e\\\\n\\u003cp\\u003eremix": 1, "runtimesadaptersremix": 2, "same": 2, "scratch": 1, "scratch\\u003c/a\\u003e": 1, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "see": 1, "sendremixresponse": 1, "server": 43, "server\\": 4, "server\\\\\\": 1, "server\\u003c/h3\\u003e\\\\n\\u003cp\\u003efor": 1, "server\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "servers": 2, "servertemplateson": 1, "servertemplatesruntimes": 1, "session": 2, "sessions": 6, "sessions\\": 1, "sessionstorage": 2, "set": 1, "shared": 2, "shopify": 3, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "simplifying": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "so": 4, "some": 4, "something": 2, "spa": 3, "specific": 8, "ssr": 1, "stages": 1, "standard": 6, "start": 8, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "starting": 2, "state": 6, "storage": 3, "storage\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "storagekey2": 3, "store": 6, "storedy": 3, "storing": 2, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 68, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 5, "support\\": 1, "supported": 2, "system": 4, "tabindex=\\\\\\": 5, "tailwind": 2, "tailwind\\": 1, "takes": 2, "talk": 2, "technical": 3, "technologies\\": 1, "template": 6, "templates": 15, "templates\\": 2, "templates\\\\\\": 1, "textencoderstream": 1, "thank": 1, "that": 12, "the": 74, "then": 2, "these": 14, "this": 10, "through": 1, "tinkering": 2, "title\\": 1, "tls": 2, "tls\\": 1, "to": 46, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 6, "true\\\\\\": 11, "try": 1, "ts": 2, "ts\\": 1, "tsx\\\\\\": 6, "tutorial": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 4, "ui\\": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 4, "upgrading": 3, "uploads": 2, "uploads\\": 1, "use": 8, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 2, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 70, "variables": 2, "variables\\": 1, "varying": 2, "ve": 2, "view": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "want": 2, "way": 1, "ways": 2, "web": 16, "what": 4, "when": 1, "where": 2, "while": 1, "why": 1, "will": 4, "window": 11, "wire": 2, "with": 16, "workers/pages": 2, "writes": 2, "writes\\": 1, "you": 30, "your": 15, "yourself": 2, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 5794 }, { "id": "2da02f945ccab91e19227112", "doc_id": "b354a59ef16dbee15f9099b6", "title": "sass", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/sass.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/sass.json", "content": "--- title: SASS order: 1 mainNavExclude: true use_cases: \u003e- css preprocessing, nested styles, style variables, mixins, scss syntax, modular styling tags: - styling - sass - scss - preprocessor - variables - css - mixins version: '1.0' description: \u003e- Configure SASS/SCSS in Solid projects for advanced CSS preprocessing with variables, nesting, mixins, and modular stylesheets. --- [SASS](https://sass-lang.com/) is a popular CSS preprocessor that makes authoring CSS easier. It is a superset of CSS and offers two syntaxes: SCSS and the indented syntax (often referred to as just \"SASS\"). ## Installation Depending on your package manager, SASS can be installed as a development dependency: ```package-install-dev sass ``` ## Convert filename extensions After installation, the `.css` filename extensions will have to be changed to `.scss` or `.sass`. The `.scss` syntax is a strict superset of CSS, while `.sass` offers a more relaxed syntax. Vite, which is integrated with Solid, supports both. However, `.scss` is generally recommended. ```scss // Card.scss .grid { display: grid; \u0026-center { place-items: center; } } .screen { min-height: 100vh; } .card { height: 160px; aspect-ratio: 2; border-radius: 16px; background-color: white; box-shadow: 0 0 0 4px hsl(0 0% 0% / 15%); } ``` In a Solid component: ```jsx // Card.jsx import \"./card.scss\"; function Card() { return ( \u003c\u003e \u003cdiv class=\"grid grid-center screen\"\u003e \u003cdiv class=\"card\"\u003eHello, world!\u003c/div\u003e \u003c/div\u003e \u003c/\u003e ); } ``` By simply changing the file extension from `.css` to `.scss` or `.sass` , Vite will automatically recognize these files and compile SASS to CSS on demand. When building in production, all SASS files are converted to CSS. This ensures compatibility with most modern browsers.", "term_freq": { "##": 2, "\u0026-center": 1, "---": 2, "//": 2, "//github": 1, "//sass-lang": 1, "/card": 1, "0%": 2, "100vh": 1, "15%": 1, "160px": 1, "16px": 1, "4px": 1, "\u003c/\u003e": 1, "\u003c/div\u003e": 2, "\u003c\u003e": 1, "\u003cdiv": 2, "\u003e-": 2, "\u003ehello": 1, "advanced": 1, "after": 1, "all": 1, "and": 4, "are": 1, "as": 2, "aspect-ratio": 1, "authoring": 1, "automatically": 1, "background-color": 1, "be": 2, "border-radius": 1, "both": 1, "box-shadow": 1, "browsers": 1, "building": 1, "by": 1, "can": 1, "card": 5, "center": 1, "changed": 1, "changing": 1, "class=": 2, "com/": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/styling-components/sass": 1, "compatibility": 1, "compile": 1, "component": 1, "configure": 1, "convert": 1, "converted": 1, "css": 11, "demand": 1, "dependency": 1, "depending": 1, "description": 1, "development": 1, "display": 1, "easier": 1, "ensures": 1, "extension": 1, "extensions": 2, "file": 1, "filename": 2, "files": 2, "for": 1, "from": 1, "function": 1, "generally": 1, "github-document": 1, "grid": 3, "grid-center": 1, "have": 1, "height": 1, "however": 1, "hsl": 1, "https": 2, "import": 1, "in": 3, "indented": 1, "installation": 2, "installed": 1, "integrated": 1, "is": 5, "it": 1, "jsx": 2, "just": 1, "mainnavexclude": 1, "makes": 1, "manager": 1, "mdx": 1, "min-height": 1, "mixins": 3, "modern": 1, "modular": 2, "more": 1, "most": 1, "nested": 1, "nesting": 1, "of": 2, "offers": 2, "often": 1, "on": 2, "or": 2, "order": 1, "package": 1, "package-install-dev": 1, "place-items": 1, "popular": 1, "preprocessing": 2, "preprocessor": 2, "production": 1, "projects": 1, "recognize": 1, "recommended": 1, "referred": 1, "relaxed": 1, "return": 1, "sass": 12, "sass/scss": 1, "screen": 2, "scss": 10, "simply": 1, "solid": 3, "strict": 1, "style": 1, "styles": 1, "stylesheets": 1, "styling": 2, "superset": 2, "supports": 1, "syntax": 4, "syntaxes": 1, "tags": 1, "that": 1, "the": 4, "these": 1, "this": 1, "title": 1, "to": 6, "true": 1, "two": 1, "use_cases": 1, "variables": 3, "version": 1, "vite": 2, "when": 1, "which": 1, "while": 1, "white": 1, "will": 2, "with": 3, "world": 1, "your": 1 }, "length": 245 }, { "id": "ce006d68ca734d33f31c610d", "doc_id": "52af0c8ac44e90996ab47936", "title": "search-parameters", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/search-parameters.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/search-parameters.json", "content": "--- title: Search parameters use_cases: \u003e- filtering, pagination, search queries, form state in url, shareable urls, stateful navigation tags: - query-params - search - state - url - routing version: '1.0' description: \u003e- Manage query strings and search parameters in SolidJS for filtering, pagination, and maintaining state in the URL. --- Search parameters are used to pass data to a route using the query string. The query string is the part of the URL that comes after the `?` character and is used to pass key-value pairs to the route. In Solid Router, these query parameters can be accessed using [`useSearchParams`](/solid-router/reference/primitives/use-search-params). This primitive retrieves a tuple that contains a reactive object that reads the current search parameters and a function to update them. ```jsx {4} import { useSearchParams } from \"@solidjs/router\"; export const App = () =\u003e { const [searchParams, setSearchParams] = useSearchParams(); return ( \u003cdiv\u003e \u003cspan\u003eUsername: {searchParams.username}\u003c/span\u003e \u003cinput type=\"text\" onChange={(e) =\u003e { e.preventDefault(); setSearchParams({ username: e.target.value }); }} /\u003e \u003c/div\u003e ); }; ``` The getter, in this case `searchParams`, is used to read the current search parameters. `setSearchParams` works as the setter which accepts an _object_ whose entries will be merged into the current query. ## Multiple queries Since `setSearchParams` accepts an object, you can pass multiple key-value pairs to update multiple search parameters at once. ```jsx setSearchParams({ username: \"john\", page: 1, }); ``` :::note[Empty or null values] If the value of a search parameter's key is `undefined`, `null`, or an empty string (`\"\"`), it will be removed from the query string. ::: ## Accessing query strings If you require accessing the query string directly, you can use the [`useLocation`](/solid-router/reference/primitives/use-location) primitive: ```jsx import { useLocation } from \"@solidjs/router\"; export const App = () =\u003e { const location = useLocation(); return ( \u003cdiv\u003e \u003cspan\u003eQuery String: {location.search}\u003c/span\u003e \u003c/div\u003e ); }; ``` If the URL was `http://localhost:3000/users?username=john\u0026page=1`, the output would be `Query String: ?username=john\u0026page=1`.", "term_freq": { "##": 2, "---": 2, "//github": 1, "//localhost": 1, "/\u003e": 1, "/solid-router/reference/primitives/use-location": 1, "/solid-router/reference/primitives/use-search-params": 1, "3000/users": 1, "\u003c/div\u003e": 2, "\u003c/span\u003e": 2, "\u003cdiv\u003e": 2, "\u003cinput": 1, "\u003cspan\u003equery": 1, "\u003cspan\u003eusername": 1, "=\u003e": 3, "\u003e-": 2, "@solidjs/router": 2, "_object_": 1, "accepts": 2, "accessed": 1, "accessing": 2, "after": 1, "an": 3, "and": 4, "app": 2, "are": 1, "as": 1, "at": 1, "be": 4, "can": 3, "case": 1, "character": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/concepts/search-parameters": 1, "comes": 1, "const": 4, "contains": 1, "current": 3, "data": 1, "description": 1, "directly": 1, "empty": 2, "entries": 1, "export": 2, "filtering": 2, "for": 1, "form": 1, "from": 3, "function": 1, "getter": 1, "github-document": 1, "http": 1, "https": 1, "if": 3, "import": 2, "in": 5, "into": 1, "is": 4, "it": 1, "john": 1, "jsx": 3, "key": 1, "key-value": 2, "location": 2, "maintaining": 1, "manage": 1, "mdx": 1, "merged": 1, "multiple": 3, "navigation": 1, "note": 1, "null": 2, "object": 2, "of": 2, "once": 1, "onchange=": 1, "or": 2, "output": 1, "page": 1, "pagination": 2, "pairs": 2, "parameter": 1, "parameters": 7, "part": 1, "pass": 3, "preventdefault": 1, "primitive": 2, "queries": 2, "query": 9, "query-params": 1, "reactive": 1, "read": 1, "reads": 1, "removed": 1, "require": 1, "retrieves": 1, "return": 2, "route": 2, "router": 1, "routing": 1, "search": 10, "search-parameters": 1, "searchparams": 3, "setsearchparams": 5, "setter": 1, "shareable": 1, "since": 1, "solid": 1, "solidjs": 1, "state": 3, "stateful": 1, "string": 7, "strings": 2, "tags": 1, "target": 1, "text": 1, "that": 3, "the": 18, "them": 1, "these": 1, "this": 2, "title": 1, "to": 7, "tuple": 1, "type=": 1, "undefined": 1, "update": 2, "url": 5, "urls": 1, "use": 1, "use_cases": 1, "used": 3, "uselocation": 3, "username": 3, "username=john\u0026page=1": 2, "usesearchparams": 3, "using": 2, "value": 2, "values": 1, "version": 1, "was": 1, "which": 1, "whose": 1, "will": 2, "works": 1, "would": 1, "you": 3 }, "length": 289 }, { "id": "74d4907a1e775986ceba030d", "doc_id": "5d9475b44290500a74225e16", "title": "security", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/guides/security.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/security.json", "content": "--- title: Security use_cases: \u003e- production apps, user input handling, authentication, public apis, preventing attacks, secure deployments, compliance tags: - security - xss - csrf - cors - csp - middleware - protection version: '1.0' description: \u003e- Secure your SolidStart apps against XSS, CSRF attacks. Configure CSP headers, CORS policies, and implement security best practices. --- ## XSS (Cross Site Scripting) Solid automatically escape values passed to JSX expressions to reduce the risk of XSS attacks. However, this protection does not apply when using [`innerHTML`](/reference/jsx-attributes/innerhtml). To protect your application from XSS attacks: - Set a [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). - Validate and sanitize user inputs, especially form inputs on the server and client. - Avoid using `innerHTML` when possible. If necessary, make sure to sanitize user-supplied data with libraries such as [DOMPurify](https://github.com/cure53/DOMPurify). - Sanitize attributes containing user-supplied data within `\u003cnoscript\u003e` elements. This includes both the attributes of the `\u003cnoscript\u003e` element itself and its children. - When URLs are provided or constructed via user input validate its `origin` and `protocol` (to avoid evaluating code via `javascript:` URLs) using the [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) API. It is highly recommended to read the [Cross Site Scripting Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) for further guidance. ## Content Security Policy (CSP) To configure the `Content-Security-Policy` HTTP header, a [middleware](/solid-start/advanced/middleware) can be used. ### With nonce (recommended) If you want to use a [strict CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP#strict_csp) with nonces: 1. Create a middleware that configures the CSP header. It must then be registered using the [`onRequest`](/solid-start/advanced/middleware#onrequest) event. 2. Create a nonce using a cryptographic random value generator, such as the [`randomBytes`](https://nodejs.org/api/crypto.html#cryptorandombytessize-callback) function from the `crypto` module. 3. Store the nonce in the [`locals`](/solid-start/advanced/middleware#locals) object. 4. Configure SolidStart to use the nonce in your [`entry-server.tsx`](/solid-start/reference/entrypoints/entry-server) file. ```tsx tab title=\"Middleware\" import { createMiddleware } from \"@solidjs/start/middleware\"; import { randomBytes } from \"crypto\"; export default createMiddleware({ onRequest: (event) =\u003e { const nonce = randomBytes(16).toString(\"base64\"); event.locals.nonce = nonce; const csp = ` default-src 'self'; script-src 'nonce-${nonce}' 'strict-dynamic' 'unsafe-eval'; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'; `.replace(/\\s+/g, \" \"); event.response.headers.set(\"Content-Security-Policy\", csp); }, }); ``` ```tsx tab title=\"entry-server.tsx\" {7} // src/entry-server.tsx // @refresh reload import { createHandler, StartServer } from \"@solidjs/start/server\"; export default createHandler( () =\u003e \u003cStartServer /* ... */ /\u003e, (event) =\u003e ({ nonce: event.locals.nonce }) ); ``` ### Without nonce To configure CSP without a nonce, a middleware that sets the CSP header is required, and it should be registered to run during the [`onBeforeResponse`](/solid-start/advanced/middleware#onbeforeresponse) event: ```tsx import { createMiddleware } from \"@solidjs/start/middleware\"; export default createMiddleware({ onBeforeResponse: (event) =\u003e { const csp = ` default-src 'self'; font-src 'self' ; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'; `.replace(/\\s+/g, \" \"); event.response.headers.set(\"Content-Security-Policy\", csp); }, }); ``` ## CORS (Cross-Origin Resource Sharing) When other applications need access to API endpoints, a middleware that configures the CORS headers is needed: ```tsx import { createMiddleware } from \"@solidjs/start/middleware\"; import { json } from \"@solidjs/router\"; const TRUSTED_ORIGINS = [\"https://my-app.com\", \"https://another-app.com\"]; export default createMiddleware({ onBeforeResponse: (event) =\u003e { const { request, response } = event; response.headers.append(\"Vary\", \"Origin, Access-Control-Request-Method\"); const origin = request.headers.get(\"Origin\"); const requestUrl = new URL(request.url); const isApiRequest = requestUrl \u0026\u0026 requestUrl.pathname.startsWith(\"/api\"); if (isApiRequest \u0026\u0026 origin \u0026\u0026 TRUSTED_ORIGINS.includes(origin)) { // Handle preflight requests. if ( request.method === \"OPTIONS\" \u0026\u0026 request.headers.get(\"Access-Control-Request-Method\") ) { // Preflight requests are standalone, so we immediately send a response. return json(null, { headers: { \"Access-Control-Allow-Origin\": origin, \"Access-Control-Allow-Methods\": \"OPTIONS, POST, PUT, PATCH, DELETE\", \"Access-Control-Allow-Headers\": \"Authorization, Content-Type\", }, }); } // Handle normal requests. response.headers.set(\"Access-Control-Allow-Origin\", origin); } }, }); ``` ## CSRF (Cross-Site Request Forgery) To prevent basic CSRF attacks, a middleware can be used to block untrusted requests: ```tsx import { createMiddleware } from \"@solidjs/start/middleware\"; import { json } from \"@solidjs/router\"; const SAFE_METHODS = [\"GET\", \"HEAD\", \"OPTIONS\", \"TRACE\"]; const TRUSTED_ORIGINS = [\"https://another-app.com\"]; export default createMiddleware({ onRequest: (event) =\u003e { const { request } = event; if (!SAFE_METHODS.includes(request.method)) { const requestUrl = new URL(request.url); const origin = request.headers.get(\"Origin\"); // If we have an Origin header, check it against our allowlist. if (origin) { const parsedOrigin = new URL(origin); if ( parsedOrigin.origin !== requestUrl.origin \u0026\u0026 !TRUSTED_ORIGINS.includes(parsedOrigin.host) ) { return json({ error: \"origin invalid\" }, { status: 403 }); } } // If we are serving via TLS and have no Origin header, prevent against // CSRF via HTTP man-in-the-middle attacks by enforcing strict Referer // origin checks. if (!origin \u0026\u0026 requestUrl.protocol === \"https:\") { const referer = request.headers.get(\"Referer\"); if (!referer) { return json({ error: \"referer not supplied\" }, { status: 403 }); } const parsedReferer = new URL(referer); if (parsedReferer.protocol !== \"https:\") { return json({ error: \"referer invalid\" }, { status: 403 }); } if ( parsedReferer.host !== requestUrl.host \u0026\u0026 !TRUSTED_ORIGINS.includes(parsedReferer.host) ) { return json({ error: \"referer invalid\" }, { status: 403 }); } } } }, }); ``` This example demonstrates a basic CSRF protection that verifies the `Origin` and `Referer` headers, blocking requests from untrusted origins. **Please note both of these headers can be forged.** Additionally, consider implementing a more robust CSRF protection mechanism, such as the [Double-Submit Cookie Pattern](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#alternative-using-a-double-submit-cookie-pattern). For further guidance, you can look at the [Cross-Site Request Forgery Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html).", "term_freq": { "##": 4, "###": 2, "\u0026\u0026": 7, "**": 1, "**please": 1, "*/": 1, "---": 2, "/*": 1, "//": 9, "//another-app": 2, "//cheatsheetseries": 3, "//developer": 3, "//github": 2, "//my-app": 1, "//nodejs": 1, "/\u003e": 1, "/\\s+/g": 2, "/api": 1, "/reference/jsx-attributes/innerhtml": 1, "/solid-start/advanced/middleware": 1, "/solid-start/advanced/middleware#locals": 1, "/solid-start/advanced/middleware#onbeforeresponse": 1, "/solid-start/advanced/middleware#onrequest": 1, "/solid-start/reference/entrypoints/entry-server": 1, "16": 1, "403": 4, "\u003cnoscript\u003e": 2, "\u003cstartserver": 1, "==": 3, "===": 2, "=\u003e": 6, "\u003e-": 2, "@refresh": 1, "@solidjs/router": 2, "@solidjs/start/middleware": 4, "@solidjs/start/server": 1, "access": 1, "access-control-allow-headers": 1, "access-control-allow-methods": 1, "access-control-allow-origin": 2, "access-control-request-method": 2, "additionally": 1, "against": 3, "allowlist": 1, "an": 1, "and": 8, "api": 2, "apis": 1, "append": 1, "application": 1, "applications": 1, "apply": 1, "apps": 2, "are": 3, "as": 3, "at": 1, "attacks": 6, "attributes": 2, "authentication": 1, "authorization": 1, "automatically": 1, "avoid": 2, "base-uri": 2, "base64": 1, "basic": 2, "be": 5, "best": 1, "block": 1, "blocking": 1, "both": 2, "by": 1, "can": 4, "cheat": 2, "check": 1, "checks": 1, "children": 1, "client": 1, "code": 1, "com": 3, "com/cure53/dompurify": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/guides/security": 1, "compliance": 1, "configure": 4, "configures": 2, "consider": 1, "const": 16, "constructed": 1, "containing": 1, "content": 2, "content-security-policy": 3, "content-type": 1, "cookie": 1, "cors": 4, "create": 2, "createhandler": 2, "createmiddleware": 8, "cross": 2, "cross-origin": 1, "cross-site": 2, "crypto": 2, "cryptographic": 1, "csp": 12, "csrf": 7, "data": 2, "default": 5, "default-src": 2, "delete": 1, "demonstrates": 1, "deployments": 1, "description": 1, "does": 1, "dompurify": 1, "double-submit": 1, "during": 1, "element": 1, "elements": 1, "endpoints": 1, "enforcing": 1, "entry-server": 2, "error": 4, "escape": 1, "especially": 1, "evaluating": 1, "event": 13, "example": 1, "export": 5, "expressions": 1, "file": 1, "font-src": 1, "for": 2, "forged": 1, "forgery": 2, "form": 1, "form-action": 2, "frame-ancestors": 2, "from": 11, "function": 1, "further": 2, "generator": 1, "get": 5, "github-document": 1, "guidance": 2, "handle": 2, "handling": 1, "have": 2, "head": 1, "header": 5, "headers": 13, "highly": 1, "host": 4, "however": 1, "html": 2, "html#alternative-using-a-double-submit-cookie-pattern": 1, "html#cryptorandombytessize-callback": 1, "http": 2, "https": 14, "if": 13, "immediately": 1, "implement": 1, "implementing": 1, "import": 8, "in": 2, "includes": 5, "innerhtml": 2, "input": 2, "inputs": 2, "invalid": 3, "is": 3, "isapirequest": 2, "it": 4, "its": 2, "itself": 1, "javascript": 1, "json": 7, "jsx": 1, "libraries": 1, "locals": 3, "look": 1, "make": 1, "man-in-the-middle": 1, "mdx": 1, "mechanism": 1, "method": 2, "middleware": 7, "module": 1, "more": 1, "mozilla": 3, "must": 1, "necessary": 1, "need": 1, "needed": 1, "new": 4, "no": 1, "nonce": 12, "nonce-$": 1, "nonces": 1, "none": 6, "normal": 1, "not": 2, "note": 1, "null": 1, "object": 1, "object-src": 2, "of": 3, "on": 1, "onbeforeresponse": 3, "onrequest": 3, "options": 3, "or": 1, "org/api/crypto": 1, "org/cheatsheets/cross-site_request_forgery_prevention_cheat_sheet": 2, "org/cheatsheets/cross_site_scripting_prevention_cheat_sheet": 1, "org/en-us/docs/web/api/url": 1, "org/en-us/docs/web/http/csp": 1, "org/en-us/docs/web/http/csp#strict_csp": 1, "origin": 20, "origins": 1, "other": 1, "our": 1, "owasp": 3, "parsedorigin": 3, "parsedreferer": 4, "passed": 1, "patch": 1, "pathname": 1, "pattern": 1, "policies": 1, "policy": 2, "possible": 1, "post": 1, "practices": 1, "preflight": 2, "prevent": 2, "preventing": 1, "prevention": 2, "production": 1, "protect": 1, "protection": 4, "protocol": 3, "provided": 1, "public": 1, "put": 1, "random": 1, "randombytes": 3, "read": 1, "recommended": 2, "reduce": 1, "referer": 9, "registered": 2, "reload": 1, "replace": 2, "request": 12, "requests": 5, "requesturl": 7, "required": 1, "resource": 1, "response": 6, "return": 5, "risk": 1, "robust": 1, "run": 1, "safe_methods": 2, "sanitize": 3, "script-src": 1, "scripting": 2, "secure": 2, "security": 6, "self": 5, "send": 1, "server": 1, "serving": 1, "set": 4, "sets": 1, "sharing": 1, "sheet": 2, "should": 1, "site": 2, "so": 1, "solid": 1, "solidstart": 2, "src/entry-server": 1, "standalone": 1, "startserver": 1, "startswith": 1, "status": 4, "store": 1, "strict": 2, "strict-dynamic": 1, "such": 3, "supplied": 1, "sure": 1, "tab": 2, "tags": 1, "that": 4, "the": 20, "then": 1, "these": 1, "this": 3, "title": 1, "title=": 2, "tls": 1, "to": 14, "tostring": 1, "trace": 1, "trusted_origins": 5, "tsx": 8, "unsafe-eval": 1, "untrusted": 2, "url": 7, "urls": 2, "use": 2, "use_cases": 1, "used": 2, "user": 3, "user-supplied": 2, "using": 5, "validate": 2, "value": 1, "values": 1, "vary": 1, "verifies": 1, "version": 1, "via": 4, "want": 1, "we": 3, "when": 4, "with": 3, "within": 1, "without": 2, "xss": 5, "you": 2, "your": 3 }, "length": 821 }, { "id": "579888f2d8287a2d02a82b6a", "doc_id": "c071e6d8dfe9cf743078aa6a", "title": "server modules | Remix", "url": "https://v2.remix.run/docs/file-conventions/-server", "type": "html", "source": "remix:does", "path": "devour_data/docs/server-modules---remix-c071e6d8.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docs.server modulesGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite .server modules While not strictly necessary, .server modules are a good way to explicitly mark entire modules as server-only. The build will fail if any code in a .server file or .server directory accidentally ends up in the client module graph. app ├── .server 👈 marks all files in this directory as server-only │ ├── auth.ts │ └── db.ts ├── cms.server.ts 👈 marks this file as server-only ├── root.tsx └── routes └── _index.tsx .server modules must be within your Remix app directory. Refer to the Route Module section in the sidebar for more information. .server directories are only supported when using Remix Vite. The Classic Remix Compiler only supports .server files. When using the Classic Remix Compiler, .server modules are replaced with empty modules and will not result in a compilation error. Note that this can result in runtime errors.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_961\\\":-5,\\\"_962\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":960},{\\\"_18\\\":175,\\\"_169\\\":10},\\\"docs/file-conventions/-server.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"server-modules\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#server-modules\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003e.server\\u003c/code\\u003e modules\\u003c/h1\\u003e\\\\n\\u003cp\\u003eWhile not strictly necessary, \\u003ccode\\u003e.server\\u003c/code\\u003e modules are a good way to explicitly mark entire modules as server-only.\\\\nThe build will fail if any code in a \\u003ccode\\u003e.server\\u003c/code\\u003e file or \\u003ccode\\u003e.server\\u003c/code\\u003e directory accidentally ends up in the client module graph.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-txt\\\\\\\"\\u003eapp\\\\n├── .server 👈 marks all files in this directory as server-only\\\\n│ ├── auth.ts\\\\n│ └── db.ts\\\\n├── cms.server.ts 👈 marks this file as server-only\\\\n├── root.tsx\\\\n└── routes\\\\n └── _index.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e.server\\u003c/code\\u003e modules must be within your Remix app directory.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRefer to the Route Module section in the sidebar for more information.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003e\\u003ccode\\u003e.server\\u003c/code\\u003e directories are only supported when using \\u003ca href=\\\\\\\"../guides/vite\\\\\\\"\\u003eRemix Vite\\u003c/a\\u003e. The \\u003ca href=\\\\\\\"../guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\\"\\u003eClassic Remix Compiler\\u003c/a\\u003e only supports \\u003ccode\\u003e.server\\u003c/code\\u003e files.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003eWhen using the \\u003ca href=\\\\\\\"../guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\\"\\u003eClassic Remix Compiler\\u003c/a\\u003e, \\u003ccode\\u003e.server\\u003c/code\\u003e modules are replaced with empty modules and will not result in a compilation error. Note that this can result in runtime errors.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\",\\\"docs/file-conventions/-server\\\",\\\"headings\\\",[],[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#server-modules\\\\\\": 1, "$\\": 1, "$rc": 3, "-1\\\\\\": 1, "-5": 2, "/$": 1, "//v2": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\": 2, "/guides/vite\\\\\\": 1, "0===e": 1, "10": 44, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 2, "176": 1, "177": 1, "178": 1, "179": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "97": 1, "98": 1, "99": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 1, "\\\\nthe": 1, "\\n": 1, "\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\": 1, "\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003ewhen": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003e\\u003ccode\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003erefer": 1, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 1, "\\u003ca": 3, "\\u003ccode\\u003e": 5, "\\u003ch1": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003e": 1, "\\u003e\\u003ca": 1, "\\u003e\\u003cspan": 1, "\\u003eapp\\\\n├──": 1, "\\u003eclassic": 2, "\\u003eremix": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 32, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 152, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 1, "_958\\": 1, "_961\\": 1, "_962\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_index": 2, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "accidentally": 2, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "all": 3, "an": 1, "and": 11, "any": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 5, "approach": 1, "are": 6, "aria-hidden=\\\\\\": 1, "as": 9, "asked": 1, "asset": 3, "at": 1, "attrs\\": 1, "auth": 2, "await\\": 1, "b=document": 1, "backend": 3, "basename": 1, "be": 3, "been": 2, "before": 1, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 3, "build": 2, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "can": 3, "catch": 1, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 2, "classic": 2, "cli": 5, "cli\\": 1, "client": 14, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cms": 2, "code": 6, "community": 3, "community\\": 1, "compilation": 2, "compiler": 2, "compiler\\u003c/a\\u003e": 2, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 1, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 15, "css\\": 1, "d=c": 2, "data": 16, "data=": 1, "data\\": 2, "db": 2, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "development": 3, "directories": 2, "directory": 6, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 1, "doc\\": 1, "docs": 1, "docs/file-conventions/-server": 1, "docs/file-conventions/-server\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "document": 1, "done": 1, "e--": 1, "e=0": 1, "else": 2, "empty": 2, "ends": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entire": 2, "entry": 6, "environment": 3, "error": 8, "errorboundary": 2, "errorboundary\\": 1, "errors": 2, "errors\\": 1, "everything": 1, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "explicitly": 2, "extract": 2, "extract\\": 1, "f=a": 1, "fail": 2, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 13, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 6, "files\\": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "for": 8, "form": 11, "form\\": 1, "found": 3, "frequently": 1, "from": 6, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 1, "future": 4, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "good": 2, "gotchas": 2, "gotchas\\": 1, "graph": 2, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "handle": 2, "handle\\": 1, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "headers": 2, "headers\\": 1, "headings\\": 1, "help": 1, "here": 1, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href=\\\\\\": 4, "html": 1, "html\\": 1, "https": 2, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 1, "icon-link\\\\\\": 1, "id=\\\\\\": 1, "if": 8, "import": 5, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 18, "inc": 1, "index": 3, "information": 2, "initial": 1, "insertbefore": 1, "integrating": 1, "interactions": 1, "into": 2, "introduction": 1, "is": 1, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "iterative": 1, "javascript": 2, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "key": 4, "know": 1, "language-txt\\\\\\": 1, "lazy": 3, "learning": 1, "let": 3, "licensed": 1, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "mark": 2, "marks": 4, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 10, "module\\": 1, "moduleaction": 2, "modules": 18, "modules\\": 3, "modules\\u003c/h1\\u003e\\\\n\\u003cp\\u003ewhile": 1, "modulesgetting": 1, "more": 2, "most": 1, "must": 2, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "necessary": 2, "need": 1, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 7, "note": 2, "null": 1, "number": 1, "of": 3, "on": 2, "once": 1, "one": 1, "only": 4, "open": 1, "optimization": 2, "optimization\\": 1, "or": 3, "order\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "positions": 2, "postcss": 2, "postcss\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "react": 8, "react-router-scroll-positions": 1, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "refer": 1, "regular": 3, "related": 1, "released": 2, "remix": 17, "remix\\": 2, "removechild": 2, "removeitem": 1, "replace": 2, "replace\\": 1, "replaced": 2, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "result": 4, "rocking": 1, "rolling": 1, "root": 5, "root\\": 1, "route": 14, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 6, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "routes\\\\n": 1, "run/docs/file-conventions/-server": 1, "run\\": 1, "running": 1, "runtime": 2, "runtimes": 3, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "section": 2, "server": 29, "server-modules\\\\\\": 1, "server-only": 4, "server-only\\\\n│": 1, "server-only\\\\n├──": 1, "server\\": 3, "server\\u003c/code\\u003e": 8, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "sidebar": 2, "simplifying": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "spa": 3, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "strictly": 2, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 3, "support\\": 1, "supported": 2, "supports": 2, "tabindex=\\\\\\": 1, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 2, "the": 17, "this": 8, "through": 1, "title\\": 1, "tls": 2, "tls\\": 1, "to": 14, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 6, "true\\\\\\": 1, "try": 1, "ts": 6, "ts\\": 1, "ts\\\\n│": 1, "ts\\\\n├──": 1, "tsx": 2, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e": 1, "tsx\\\\n└──": 1, "tutorial": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 2, "ui\\": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 2, "upgrading": 3, "uploads": 2, "uploads\\": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 4, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 2, "variables": 2, "variables\\": 1, "view": 2, "vite": 6, "vite\\": 1, "vite\\u003c/a\\u003e": 1, "vs": 6, "walk": 1, "way": 3, "when": 4, "while": 2, "why": 1, "will": 6, "window": 11, "with": 6, "within": 2, "writes": 2, "writes\\": 1, "you": 5, "your": 5, "||": 3, "©": 1, "•docs": 1, "│": 2, "└──": 5, "├──": 5, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2, "👈": 4 }, "length": 3997 }, { "id": "85409ab777af7e4f260294f7", "doc_id": "c071e6d8dfe9cf743078aa6a", "title": "server modules | Remix", "url": "https://v2.remix.run/docs/file-conventions/-server", "type": "html", "source": "remix:routes", "path": "devour_data/docs/server-modules---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docs.server modulesGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite .server modules While not strictly necessary, .server modules are a good way to explicitly mark entire modules as server-only. The build will fail if any code in a .server file or .server directory accidentally ends up in the client module graph. app ├── .server 👈 marks all files in this directory as server-only │ ├── auth.ts │ └── db.ts ├── cms.server.ts 👈 marks this file as server-only ├── root.tsx └── routes └── _index.tsx .server modules must be within your Remix app directory. Refer to the Route Module section in the sidebar for more information. .server directories are only supported when using Remix Vite. The Classic Remix Compiler only supports .server files. When using the Classic Remix Compiler, .server modules are replaced with empty modules and will not result in a compilation error. Note that this can result in runtime errors.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_961\\\":-5,\\\"_962\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":960},{\\\"_18\\\":175,\\\"_169\\\":10},\\\"docs/file-conventions/-server.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"server-modules\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#server-modules\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003e.server\\u003c/code\\u003e modules\\u003c/h1\\u003e\\\\n\\u003cp\\u003eWhile not strictly necessary, \\u003ccode\\u003e.server\\u003c/code\\u003e modules are a good way to explicitly mark entire modules as server-only.\\\\nThe build will fail if any code in a \\u003ccode\\u003e.server\\u003c/code\\u003e file or \\u003ccode\\u003e.server\\u003c/code\\u003e directory accidentally ends up in the client module graph.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-txt\\\\\\\"\\u003eapp\\\\n├── .server 👈 marks all files in this directory as server-only\\\\n│ ├── auth.ts\\\\n│ └── db.ts\\\\n├── cms.server.ts 👈 marks this file as server-only\\\\n├── root.tsx\\\\n└── routes\\\\n └── _index.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e.server\\u003c/code\\u003e modules must be within your Remix app directory.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRefer to the Route Module section in the sidebar for more information.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003e\\u003ccode\\u003e.server\\u003c/code\\u003e directories are only supported when using \\u003ca href=\\\\\\\"../guides/vite\\\\\\\"\\u003eRemix Vite\\u003c/a\\u003e. The \\u003ca href=\\\\\\\"../guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\\"\\u003eClassic Remix Compiler\\u003c/a\\u003e only supports \\u003ccode\\u003e.server\\u003c/code\\u003e files.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003eWhen using the \\u003ca href=\\\\\\\"../guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\\"\\u003eClassic Remix Compiler\\u003c/a\\u003e, \\u003ccode\\u003e.server\\u003c/code\\u003e modules are replaced with empty modules and will not result in a compilation error. Note that this can result in runtime errors.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\",\\\"docs/file-conventions/-server\\\",\\\"headings\\\",[],[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#server-modules\\\\\\": 1, "$\\": 1, "$rc": 3, "-1\\\\\\": 1, "-5": 2, "/$": 1, "//v2": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\": 2, "/guides/vite\\\\\\": 1, "0===e": 1, "10": 44, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 2, "176": 1, "177": 1, "178": 1, "179": 1, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "97": 1, "98": 1, "99": 1, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 1, "\\\\nthe": 1, "\\n": 1, "\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\": 1, "\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003ewhen": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003e\\u003ccode\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003erefer": 1, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 1, "\\u003ca": 3, "\\u003ccode\\u003e": 5, "\\u003ch1": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003e": 1, "\\u003e\\u003ca": 1, "\\u003e\\u003cspan": 1, "\\u003eapp\\\\n├──": 1, "\\u003eclassic": 2, "\\u003eremix": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 32, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 152, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 1, "_958\\": 1, "_961\\": 1, "_962\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_index": 2, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "accidentally": 2, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "all": 3, "an": 1, "and": 11, "any": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 5, "approach": 1, "are": 6, "aria-hidden=\\\\\\": 1, "as": 9, "asked": 1, "asset": 3, "at": 1, "attrs\\": 1, "auth": 2, "await\\": 1, "b=document": 1, "backend": 3, "basename": 1, "be": 3, "been": 2, "before": 1, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 3, "build": 2, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "can": 3, "catch": 1, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 2, "classic": 2, "cli": 5, "cli\\": 1, "client": 14, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cms": 2, "code": 6, "community": 3, "community\\": 1, "compilation": 2, "compiler": 2, "compiler\\u003c/a\\u003e": 2, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "console": 1, "constraints": 2, "constraints\\": 1, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 15, "css\\": 1, "d=c": 2, "data": 16, "data=": 1, "data\\": 2, "db": 2, "defer": 2, "defer\\": 1, "deferred": 1, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "development": 3, "directories": 2, "directory": 6, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 1, "doc\\": 1, "docs": 1, "docs/file-conventions/-server": 1, "docs/file-conventions/-server\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "document": 1, "done": 1, "e--": 1, "e=0": 1, "else": 2, "empty": 2, "ends": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entire": 2, "entry": 6, "environment": 3, "error": 8, "errorboundary": 2, "errorboundary\\": 1, "errors": 2, "errors\\": 1, "everything": 1, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "explicitly": 2, "extract": 2, "extract\\": 1, "f=a": 1, "fail": 2, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 13, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 6, "files\\": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "for": 8, "form": 11, "form\\": 1, "found": 3, "frequently": 1, "from": 6, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 1, "future": 4, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "good": 2, "gotchas": 2, "gotchas\\": 1, "graph": 2, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "handle": 2, "handle\\": 1, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "headers": 2, "headers\\": 1, "headings\\": 1, "help": 1, "here": 1, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "href=\\\\\\": 4, "html": 1, "html\\": 1, "https": 2, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 1, "icon-link\\\\\\": 1, "id=\\\\\\": 1, "if": 8, "import": 5, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 18, "inc": 1, "index": 3, "information": 2, "initial": 1, "insertbefore": 1, "integrating": 1, "interactions": 1, "into": 2, "introduction": 1, "is": 1, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "iterative": 1, "javascript": 2, "javascript\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "key": 4, "know": 1, "language-txt\\\\\\": 1, "lazy": 3, "learning": 1, "let": 3, "licensed": 1, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "mark": 2, "marks": 4, "math": 1, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "migrating": 4, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 10, "module\\": 1, "moduleaction": 2, "modules": 18, "modules\\": 3, "modules\\u003c/h1\\u003e\\\\n\\u003cp\\u003ewhile": 1, "modulesgetting": 1, "more": 2, "most": 1, "must": 2, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "necessary": 2, "need": 1, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 7, "note": 2, "null": 1, "number": 1, "of": 3, "on": 2, "once": 1, "one": 1, "only": 4, "open": 1, "optimization": 2, "optimization\\": 1, "or": 3, "order\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "positions": 2, "postcss": 2, "postcss\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "react": 8, "react-router-scroll-positions": 1, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "refer": 1, "regular": 3, "related": 1, "released": 2, "remix": 17, "remix\\": 2, "removechild": 2, "removeitem": 1, "replace": 2, "replace\\": 1, "replaced": 2, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "result": 4, "rocking": 1, "rolling": 1, "root": 5, "root\\": 1, "route": 14, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 6, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "routes\\\\n": 1, "run/docs/file-conventions/-server": 1, "run\\": 1, "running": 1, "runtime": 2, "runtimes": 3, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "section": 2, "server": 29, "server-modules\\\\\\": 1, "server-only": 4, "server-only\\\\n│": 1, "server-only\\\\n├──": 1, "server\\": 3, "server\\u003c/code\\u003e": 8, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "sidebar": 2, "simplifying": 1, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "spa": 3, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "strictly": 2, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 3, "support\\": 1, "supported": 2, "supports": 2, "tabindex=\\\\\\": 1, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 2, "the": 17, "this": 8, "through": 1, "title\\": 1, "tls": 2, "tls\\": 1, "to": 14, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "true": 6, "true\\\\\\": 1, "try": 1, "ts": 6, "ts\\": 1, "ts\\\\n│": 1, "ts\\\\n├──": 1, "tsx": 2, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e": 1, "tsx\\\\n└──": 1, "tutorial": 3, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 2, "ui\\": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 2, "upgrading": 3, "uploads": 2, "uploads\\": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 4, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 2, "variables": 2, "variables\\": 1, "view": 2, "vite": 6, "vite\\": 1, "vite\\u003c/a\\u003e": 1, "vs": 6, "walk": 1, "way": 3, "when": 4, "while": 2, "why": 1, "will": 6, "window": 11, "with": 6, "within": 2, "writes": 2, "writes\\": 1, "you": 5, "your": 5, "||": 3, "©": 1, "•docs": 1, "│": 2, "└──": 5, "├──": 5, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2, "👈": 4 }, "length": 3997 }, { "id": "2a6f4e5e352a032e6f8d9e36", "doc_id": "5ae8fe373c0e4d038f1f7c6b", "title": "server-setup", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/getting-started/server-setup.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/server-setup.json", "content": "--- title: Server setup order: 3 use_cases: \u003e- ssr setup, server rendering, meta tags on server, seo optimization, initial page load tags: - ssr - server - meta - seo - setup - rendering version: '1.0' description: \u003e- Configure server-side rendering for Solid Meta tags with MetaProvider. Learn to properly inject head tags in SSR for optimal SEO and performance. --- For server setup, wrap your application with [`MetaProvider`](/solid-meta/reference/meta/metaprovider) on the server. This component uses a `tags[]` array to pass down your head tags as part of your server-rendered payload. Once rendered on the server, the component updates this array to include the tags. ```js import { renderToString, getAssets } from \"solid-js/web\"; import { MetaProvider } from \"@solidjs/meta\"; import App from \"./App\"; // ... within the context of a request ... const app = renderToString(() =\u003e ( \u003cMetaProvider\u003e \u003cApp /\u003e \u003c/MetaProvider\u003e )); res.send(` \u003c!doctype html\u003e \u003chtml\u003e \u003chead\u003e ${getAssets()} \u003c/head\u003e \u003cbody\u003e \u003cdiv id=\"root\"\u003e${app}\u003c/div\u003e \u003c/body\u003e \u003c/html\u003e `); ```", "term_freq": { "---": 2, "//": 1, "//github": 1, "/\u003e": 1, "/app": 1, "/solid-meta/reference/meta/metaprovider": 1, "\u003c/body\u003e": 1, "\u003c/div\u003e": 1, "\u003c/head\u003e": 1, "\u003c/html\u003e": 1, "\u003c/metaprovider\u003e": 1, "\u003capp": 1, "\u003cbody\u003e": 1, "\u003cdiv": 1, "\u003chead\u003e": 1, "\u003chtml\u003e": 1, "\u003cmetaprovider\u003e": 1, "=\u003e": 1, "\u003e$": 1, "\u003e-": 2, "@solidjs/meta": 1, "and": 1, "app": 3, "application": 1, "array": 2, "as": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-meta/getting-started/server-setup": 1, "component": 2, "configure": 1, "const": 1, "context": 1, "description": 1, "doctype": 1, "down": 1, "for": 3, "from": 3, "getassets": 2, "github-document": 1, "head": 2, "html\u003e": 1, "https": 1, "id=": 1, "import": 3, "in": 1, "include": 1, "initial": 1, "inject": 1, "js": 1, "learn": 1, "load": 1, "mdx": 1, "meta": 3, "metaprovider": 3, "of": 2, "on": 3, "once": 1, "optimal": 1, "optimization": 1, "order": 1, "page": 1, "part": 1, "pass": 1, "payload": 1, "performance": 1, "properly": 1, "rendered": 1, "rendering": 3, "rendertostring": 2, "request": 1, "res": 1, "root": 1, "send": 1, "seo": 3, "server": 7, "server-rendered": 1, "server-setup": 1, "server-side": 1, "setup": 4, "solid": 1, "solid-js/web": 1, "ssr": 3, "tags": 7, "the": 5, "this": 2, "title": 1, "to": 3, "updates": 1, "use_cases": 1, "uses": 1, "version": 1, "with": 2, "within": 1, "wrap": 1, "your": 3 }, "length": 147 }, { "id": "889a600d5f48948767613260", "doc_id": "0d4560e49891fa6ff37ff0e5", "title": "Server vs. Client Code Execution | Remix", "url": "https://v2.remix.run/docs/discussion/server-vs-client", "type": "html", "source": "remix:does", "path": "devour_data/docs/server-vs.-client-code-execution---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsServer vs. Client Code ExecutionGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Server vs. Client Code Execution Remix runs your app on the server as well as in the browser. However, it doesn't run all of your code in both places. During the build step, the compiler creates both a server build and a client build. The server build bundles everything up into a single module (or multiple modules when using server bundles), but the client build splits your app up into multiple bundles to optimize loading in the browser. It also removes server code from the bundles. The following route exports and the dependencies used within them are removed from the client build: action headers loader Consider this route module from the last section: import type { ActionFunctionArgs, HeadersFunction, LoaderFunctionArgs, } from \"@remix-run/node\"; // or cloudflare/deno import { json } from \"@remix-run/node\"; // or cloudflare/deno import { useLoaderData } from \"@remix-run/react\"; import { getUser, updateUser } from \"../user\"; export const headers: HeadersFunction = () =\u003e ({ \"Cache-Control\": \"max-age=300, s-maxage=3600\", }); export async function loader({ request, }: LoaderFunctionArgs) { const user = await getUser(request); return json({ displayName: user.displayName, email: user.email, }); } export default function Component() { const user = useLoaderData\u003ctypeof loader\u003e(); return ( \u003cForm action=\"/account\"\u003e \u003ch1\u003eSettings for {user.displayName}\u003c/h1\u003e \u003cinput name=\"displayName\" defaultValue={user.displayName} /\u003e \u003cinput name=\"email\" defaultValue={user.email} /\u003e \u003cbutton type=\"submit\"\u003eSave\u003c/button\u003e \u003c/Form\u003e ); } export async function action({ request, }: ActionFunctionArgs) { const formData = await request.formData(); const user = await getUser(request); await updateUser(user.id, { email: formData.get(\"email\"), displayName: formData.get(\"displayName\"), }); return json({ ok: true }); } The server build will contain the entire module in the final bundle. However, the client build will remove the action, headers and loader, along with the dependencies, resulting in this: import { useLoaderData } from \"@remix-run/react\"; export default function Component() { const user = useLoaderData(); return ( \u003cForm action=\"/account\"\u003e \u003ch1\u003eSettings for {user.displayName}\u003c/h1\u003e \u003cinput name=\"displayName\" defaultValue={user.displayName} /\u003e \u003cinput name=\"email\" defaultValue={user.email} /\u003e \u003cbutton type=\"submit\"\u003eSave\u003c/button\u003e \u003c/Form\u003e ); } Splitting Up Client and Server Code Out of the box, Vite doesn't support mixing server-only code with client-safe code in the same module. Remix is able to make an exception for routes because we know which exports are server-only and can remove them from the client. There are a few ways to isolate server-only code in Remix. The simplest approach is to use .server and .client modules. .server modules While not strictly necessary, .server modules are a good way to explicitly mark entire modules as server-only. The build will fail if any code in a .server file or .server directory accidentally ends up in the client module graph. app ├── .server 👈 marks all files in this directory as server-only │ ├── auth.ts │ └── db.ts ├── cms.server.ts 👈 marks this file as server-only ├── root.tsx └── routes └── _index.tsx .server modules must be within your Remix app directory. .server directories are only supported when using Remix Vite. The Classic Remix Compiler only supports .server files. .client modules You may depend on client libraries that are unsafe to even bundle on the server — maybe it tries to access window by simply being imported. You can remove the contents of these modules from the server build by appending *.client.ts to the file name or nesting them within a .client directory. .client directories are only supported when using Remix Vite. The Classic Remix Compiler only supports .client files. vite-env-only If you want to mix server-only code and client-safe code in the same module, you can use vite-env-only. This Vite plugin allows you to explicitly mark any expression as server-only so that it gets replaced with undefined in the client. For example, once you've added the plugin to your Vite config, you can wrap any server-only exports with serverOnly$: import { serverOnly$ } from \"vite-env-only\"; import { db } from \"~/.server/db\"; export const getPosts = serverOnly$(async () =\u003e { return db.posts.findMany(); }); export const PostPreview = ({ title, description }) =\u003e { return ( \u003carticle\u003e \u003ch2\u003e{title}\u003c/h2\u003e \u003cp\u003e{description}\u003c/p\u003e \u003c/article\u003e ); }; This example would be compiled into the following code for the client: export const getPosts = undefined; export const PostPreview = ({ title, description }) =\u003e { return ( \u003carticle\u003e \u003ch2\u003e{title}\u003c/h2\u003e \u003cp\u003e{description}\u003c/p\u003e \u003c/article\u003e ); }; © Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_966\\\":-5,\\\"_967\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":965},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"docs/discussion/server-vs-client.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"server-vs-client-code-execution\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#server-vs-client-code-execution\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eServer vs. Client Code Execution\\u003c/h1\\u003e\\\\n\\u003cp\\u003eRemix runs your app on the server as well as in the browser. However, it doesn't run all of your code in both places.\\u003c/p\\u003e\\\\n\\u003cp\\u003eDuring the build step, the compiler creates both a server build and a client build. The server build bundles everything up into a single module (or multiple modules when using \\u003ca href=\\\\\\\"../guides/server-bundles\\\\\\\"\\u003eserver bundles\\u003c/a\\u003e), but the client build splits your app up into multiple bundles to optimize loading in the browser. It also removes server code from the bundles.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe following route exports and the dependencies used within them are removed from the client build:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/action\\\\\\\"\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/headers\\\\\\\"\\u003e\\u003ccode\\u003eheaders\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca href=\\\\\\\"../route/loader\\\\\\\"\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eConsider this route module from the last section:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"routes/settings.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"routes/settings.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eHeadersFunction\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003egetUser\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eupdateUser\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e../user\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eheaders\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eHeadersFunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e ({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eCache-Control\\u003c/span\\u003e\\\\\\\": \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003emax-age=300, s-maxage=3600\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetUser\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e displayName: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e email: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eemail\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponent\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/account\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003eSettings for \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eemail\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eemail\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003eSave\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetUser\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eupdateUser\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e, {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e email: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eemail\\u003c/span\\u003e\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"50\\\\\\\"\\u003e displayName: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e\\\\\\\"),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"51\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"52\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"53\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({ ok: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"54\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThe server build will contain the entire module in the final bundle. However, the client build will remove the \\u003ccode\\u003eaction\\u003c/code\\u003e, \\u003ccode\\u003eheaders\\u003c/code\\u003e and \\u003ccode\\u003eloader\\u003c/code\\u003e, along with the dependencies, resulting in this:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"routes/settings.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"routes/settings.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponent\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/account\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003eSettings for \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edisplayName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eemail\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euser\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eemail\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003eSave\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"splitting-up-client-and-server-code\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#splitting-up-client-and-server-code\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSplitting Up Client and Server Code\\u003c/h2\\u003e\\\\n\\u003cp\\u003eOut of the box, Vite doesn't support mixing server-only code with client-safe code in the same module.\\\\nRemix is able to make an exception for routes because we know which exports are server-only and can remove them from the client.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThere are a few ways to isolate server-only code in Remix.\\\\nThe simplest approach is to use \\u003ca href=\\\\\\\"../file-conventions/-server\\\\\\\"\\u003e\\u003ccode\\u003e.server\\u003c/code\\u003e\\u003c/a\\u003e and \\u003ca href=\\\\\\\"../file-conventions/-client\\\\\\\"\\u003e\\u003ccode\\u003e.client\\u003c/code\\u003e\\u003c/a\\u003e modules.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"server-modules\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#server-modules\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003e.server\\u003c/code\\u003e modules\\u003c/h4\\u003e\\\\n\\u003cp\\u003eWhile not strictly necessary, \\u003ca href=\\\\\\\"../file-conventions/-server\\\\\\\"\\u003e\\u003ccode\\u003e.server\\u003c/code\\u003e modules\\u003c/a\\u003e are a good way to explicitly mark entire modules as server-only.\\\\nThe build will fail if any code in a \\u003ccode\\u003e.server\\u003c/code\\u003e file or \\u003ccode\\u003e.server\\u003c/code\\u003e directory accidentally ends up in the client module graph.\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-txt\\\\\\\"\\u003eapp\\\\n├── .server 👈 marks all files in this directory as server-only\\\\n│ ├── auth.ts\\\\n│ └── db.ts\\\\n├── cms.server.ts 👈 marks this file as server-only\\\\n├── root.tsx\\\\n└── routes\\\\n └── _index.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e.server\\u003c/code\\u003e modules must be within your Remix app directory.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003e\\u003ccode\\u003e.server\\u003c/code\\u003e directories are only supported when using \\u003ca href=\\\\\\\"../guides/vite\\\\\\\"\\u003eRemix Vite\\u003c/a\\u003e. The \\u003ca href=\\\\\\\"../guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\\"\\u003eClassic Remix Compiler\\u003c/a\\u003e only supports \\u003ccode\\u003e.server\\u003c/code\\u003e files.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"client-modules\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#client-modules\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003e.client\\u003c/code\\u003e modules\\u003c/h4\\u003e\\\\n\\u003cp\\u003eYou may depend on client libraries that are unsafe to even bundle on the server — maybe it tries to access \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/Window/window\\\\\\\"\\u003e\\u003ccode\\u003ewindow\\u003c/code\\u003e\\u003c/a\\u003e by simply being imported.\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou can remove the contents of these modules from the server build by appending \\u003ccode\\u003e*.client.ts\\u003c/code\\u003e to the file name or nesting them within a \\u003ccode\\u003e.client\\u003c/code\\u003e directory.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003e\\u003ccode\\u003e.client\\u003c/code\\u003e directories are only supported when using \\u003ca href=\\\\\\\"../guides/vite\\\\\\\"\\u003eRemix Vite\\u003c/a\\u003e. The \\u003ca href=\\\\\\\"../guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\\"\\u003eClassic Remix Compiler\\u003c/a\\u003e only supports \\u003ccode\\u003e.client\\u003c/code\\u003e files.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"vite-env-only\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#vite-env-only\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003evite-env-only\\u003c/h4\\u003e\\\\n\\u003cp\\u003eIf you want to mix server-only code and client-safe code in the same module, you\\\\ncan use \\u003cnobr\\u003e\\u003ca href=\\\\\\\"https://github.com/pcattori/vite-env-only\\\\\\\"\\u003evite-env-only\\u003c/a\\u003e\\u003c/nobr\\u003e.\\\\nThis Vite plugin allows you to explicitly mark any expression as server-only so that it gets\\\\nreplaced with \\u003ccode\\u003eundefined\\u003c/code\\u003e in the client.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor example, once you've added the plugin to your \\u003ca href=\\\\\\\"../file-conventions/vite-config\\\\\\\"\\u003eVite config\\u003c/a\\u003e, you can wrap any server-only exports with \\u003ccode\\u003eserverOnly$\\u003c/code\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eserverOnly$\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite-env-only\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edb\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e~/.server/db\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003egetPosts\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eserverOnly$\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edb\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eposts\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efindMany\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ePostPreview\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e ({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etitle\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edescription\\u003c/span\\u003e }) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003earticle\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh2\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etitle\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh2\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edescription\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003earticle\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThis example would be compiled into the following code for the client:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003egetPosts\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003eundefined\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ePostPreview\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e ({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etitle\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edescription\\u003c/span\\u003e }) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003earticle\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh2\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etitle\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh2\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edescription\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003earticle\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\",\\\"docs/discussion/server-vs-client\\\",\\\"headings\\\",[960],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Splitting Up Client and Server Code\\\",\\\"splitting-up-client-and-server-code\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#client-modules\\\\\\": 1, "#server-modules\\\\\\": 1, "#server-vs-client-code-execution\\\\\\": 1, "#splitting-up-client-and-server-code\\\\\\": 1, "#vite-env-only\\\\\\": 1, "$\\": 1, "$rc": 3, "--base03": 2, "--base05": 4, "--base08": 76, "--base09": 2, "--base0a": 17, "--base0b": 19, "--base0d": 40, "--base0e": 66, "--base0f": 20, "-1\\\\\\": 5, "-5": 2, "/$": 1, "//": 2, "//developer": 1, "//github": 1, "//v2": 2, "/\u003e": 4, "/\\u003cspan": 12, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "/account": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/file-conventions/-client\\\\\\": 1, "/file-conventions/-server\\\\\\": 2, "/file-conventions/vite-config\\\\\\": 1, "/guides/server-bundles\\\\\\": 1, "/guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\": 2, "/guides/vite\\\\\\": 2, "/route/action\\\\\\": 1, "/route/headers\\\\\\": 1, "/route/loader\\\\\\": 1, "/user": 1, "/user\\u003c/span\\u003e\\\\\\": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 2, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 4, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 3, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 3, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 3, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 3, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 3, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 3, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 2, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 2, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 1, "1\\\\\\": 4, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 1, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 1, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "28\\\\\\": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "29\\\\\\": 1, "2\\\\\\": 4, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30\\\\\\": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "31\\\\\\": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "32\\\\\\": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "33\\\\\\": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "34\\\\\\": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "35\\\\\\": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "36\\\\\\": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "37\\\\\\": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "38\\\\\\": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "39\\\\\\": 1, "3\\\\\\": 4, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "40\\\\\\": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "41\\\\\\": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "42\\\\\\": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "43\\\\\\": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "44\\\\\\": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "45\\\\\\": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "46\\\\\\": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "47\\\\\\": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "48\\\\\\": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "49\\\\\\": 1, "4\\\\\\": 4, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "50\\\\\\": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "51\\\\\\": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "52\\\\\\": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "53\\\\\\": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "54\\\\\\": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 4, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 4, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 4, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 4, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 4, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 1, "963": 1, "964": 1, "965": 1, "97": 1, "98": 1, "99": 1, "9\\\\\\": 4, "\u003c/article\u003e": 2, "\u003c/form\u003e": 2, "\u003c/h1\u003e": 2, "\u003c/h2\u003e": 2, "\u003c/p\u003e": 2, "\u003carticle\u003e": 2, "\u003cbutton": 2, "\u003cform": 2, "\u003ch1\u003esettings": 2, "\u003ch2\u003e": 2, "\u003cinput": 4, "\u003cp\u003e": 2, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 5, "\u003esave\u003c/button\u003e": 2, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 4, "@remix-run/node\\": 1, "@remix-run/react": 2, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 262, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 52, "\\\\nremix": 1, "\\\\nthe": 2, "\\\\nthis": 1, "\\n": 1, "\\u0026#x3c": 20, "\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003ch4": 2, "\\u003c/p\\u003e\\\\n\\u003cdiv": 4, "\\u003c/p\\u003e\\\\n\\u003ch4": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003e\\u003ccode\\u003e": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eduring": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efor": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethere": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003c/span\\u003e": 5, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003c/span\\u003e\\u0026#x3c": 6, "\\u003c/span\\u003e\\u003cspan": 10, "\\u003ca": 10, "\\u003ccode\\u003e": 5, "\\u003ccode\\u003e*": 1, "\\u003ccode\\u003eaction\\u003c/code\\u003e": 1, "\\u003ccode\\u003eheaders\\u003c/code\\u003e": 1, "\\u003ccode\\u003eloader\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserveronly$\\u003c/code\\u003e": 1, "\\u003ccode\\u003eundefined\\u003c/code\\u003e": 1, "\\u003ch1": 1, "\\u003cnobr\\u003e\\u003ca": 1, "\\u003cspan": 173, "\\u003e": 90, "\\u003e//": 2, "\\u003e/account\\u003c/span\\u003e\\\\\\": 2, "\\u003e=\\u003c/span\\u003e": 10, "\\u003e=\\u003c/span\\u003e\\\\\\": 8, "\\u003e=\\u003c/span\\u003e\\u003cspan": 4, "\\u003e=\\u003e\\u003c/span\\u003e": 4, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 2, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 2, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 18, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003e": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserver": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003esplitting": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003evite-env-only\\u003c/h4\\u003e\\\\n\\u003cp\\u003eif": 1, "\\u003e\\u003ca": 5, "\\u003e\\u003ccode\\u003e": 3, "\\u003e\\u003ccode\\u003e\\u003cspan": 4, "\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eheaders\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ca": 1, "\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003econsider": 1, "\\u003e\\u003ccode\\u003ewindow\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003cpre": 4, "\\u003e\\u003cspan": 21, "\\u003eaction\\u003c/span\\u003e": 1, "\\u003eaction\\u003c/span\\u003e\\u003cspan": 2, "\\u003eactionfunctionargs\\u003c/span\\u003e": 2, "\\u003eapp\\\\n├──": 1, "\\u003earticle\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "\\u003easync\\u003c/span\\u003e": 3, "\\u003eawait\\u003c/span\\u003e": 4, "\\u003ebutton\\u003c/span\\u003e": 2, "\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ecache-control\\u003c/span\\u003e\\\\\\": 1, "\\u003eclassic": 2, "\\u003ecomponent\\u003c/span\\u003e": 2, "\\u003econst\\u003c/span\\u003e": 10, "\\u003edb\\u003c/span\\u003e": 2, "\\u003edefault\\u003c/span\\u003e": 2, "\\u003edefaultvalue\\u003c/span\\u003e\\u003cspan": 4, "\\u003edescription\\u003c/span\\u003e": 2, "\\u003edescription\\u003c/span\\u003e\\u003cspan": 2, "\\u003edisplayname\\u003c/span\\u003e": 1, "\\u003edisplayname\\u003c/span\\u003e\\\\\\": 3, "\\u003edisplayname\\u003c/span\\u003e\\u003cspan": 4, "\\u003eemail\\u003c/span\\u003e": 1, "\\u003eemail\\u003c/span\\u003e\\\\\\": 3, "\\u003eemail\\u003c/span\\u003e\\u003cspan": 2, "\\u003eexport\\u003c/span\\u003e": 9, "\\u003efindmany\\u003c/span\\u003e": 1, "\\u003eform\\u003c/span\\u003e": 2, "\\u003eform\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eformdata\\u003c/span\\u003e": 4, "\\u003efrom\\u003c/span\\u003e": 7, "\\u003efunction\\u003c/span\\u003e": 4, "\\u003eget\\u003c/span\\u003e": 2, "\\u003egetposts\\u003c/span\\u003e": 2, "\\u003egetuser\\u003c/span\\u003e": 3, "\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eh1\\u003c/span\\u003e\\u003esettings": 2, "\\u003eh2\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eh2\\u003c/span\\u003e\\u003e\\u003cspan": 2, "\\u003eheaders\\u003c/span\\u003e\\u003cspan": 1, "\\u003eheadersfunction\\u003c/span\\u003e": 2, "\\u003eid\\u003c/span\\u003e": 1, "\\u003eimport\\u003c/span\\u003e": 7, "\\u003einput\\u003c/span\\u003e": 2, "\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ejson\\u003c/span\\u003e": 3, "\\u003eloader\\u003c/span\\u003e": 1, "\\u003eloader\\u003c/span\\u003e\\u003e": 1, "\\u003eloaderfunctionargs\\u003c/span\\u003e": 2, "\\u003emax-age=300": 1, "\\u003ename\\u003c/span\\u003e\\u003cspan": 4, "\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan": 2, "\\u003epostpreview\\u003c/span\\u003e": 2, "\\u003eposts\\u003c/span\\u003e": 1, "\\u003eremix": 2, "\\u003erequest\\u003c/span\\u003e": 5, "\\u003ereturn\\u003c/span\\u003e": 7, "\\u003esave\\u0026#x3c": 2, "\\u003eserver": 1, "\\u003eserveronly$\\u003c/span\\u003e": 2, "\\u003esubmit\\u003c/span\\u003e\\\\\\": 2, "\\u003etitle\\u003c/span\\u003e": 2, "\\u003etitle\\u003c/span\\u003e\\u003cspan": 2, "\\u003etrue\\u003c/span\\u003e": 1, "\\u003etype\\u003c/span\\u003e": 1, "\\u003etype\\u003c/span\\u003e\\u003cspan": 2, "\\u003etypeof\\u003c/span\\u003e": 1, "\\u003eundefined\\u003c/span\\u003e": 1, "\\u003eupdateuser\\u003c/span\\u003e": 2, "\\u003euseloaderdata\\u003c/span\\u003e": 3, "\\u003euseloaderdata\\u003c/span\\u003e\\u0026#x3c": 1, "\\u003euser\\u003c/span\\u003e": 13, "\\u003evite": 1, "\\u003evite-env-only\\u003c/a\\u003e\\u003c/nobr\\u003e": 1, "\\u003evite-env-only\\u003c/span\\u003e\\\\\\": 1, "\\u003e~/": 1, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 28, "_22\\": 152, "_24\\": 153, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 2, "_958\\": 1, "_961\\": 1, "_966\\": 1, "_967\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_index": 2, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "able": 2, "about": 1, "access": 2, "accessibility\\": 1, "accidentally": 2, "action": 3, "action=": 2, "action\\": 1, "actiondata\\": 1, "actionfunctionargs": 2, "adapter": 3, "adapters": 3, "added": 2, "all": 5, "allows": 2, "along": 2, "also": 2, "an": 3, "and": 24, "any": 6, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 9, "appending": 2, "approach": 3, "are": 14, "aria-hidden=\\\\\\": 5, "as": 15, "asked": 1, "asset": 3, "async": 3, "at": 1, "attrs\\": 1, "auth": 2, "await": 4, "await\\": 1, "b=document": 1, "backend": 3, "basename": 1, "be": 5, "because": 2, "been": 2, "before": 1, "being": 2, "both": 4, "box": 2, "breadcrumbs": 3, "break": 1, "breeze": 1, "browser": 7, "build": 20, "built": 1, "bundle": 4, "bundles": 9, "bundles\\": 1, "bundles\\u003c/a\\u003e": 1, "bundling": 2, "bundling\\": 1, "but": 2, "by": 4, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "cache-control": 1, "can": 8, "catch": 1, "changelog": 2, "changelog\\": 1, "children\\": 1, "class=\\\\\\": 104, "classic": 2, "cli": 5, "cli\\": 1, "client": 44, "client-modules\\\\\\": 1, "client-q2ogymm2": 1, "client-safe": 4, "client\\": 2, "client\\u003c/code\\u003e": 4, "client\\u003c/code\\u003e\\u003c/a\\u003e": 1, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "cloudflare/deno": 2, "cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "cms": 2, "code": 27, "code\\": 1, "code\\u003c/h2\\u003e\\\\n\\u003cp\\u003eout": 1, "codeblock-line\\\\\\": 98, "color": 246, "com/pcattori/vite-env-only\\\\\\": 1, "community": 3, "community\\": 1, "compiled": 2, "compiler": 4, "compiler\\u003c/a\\u003e": 2, "component": 4, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 4, "config\\u003c/a\\u003e": 1, "configuration": 2, "configuration\\": 1, "consider": 1, "console": 1, "const": 10, "constraints": 2, "constraints\\": 1, "contain": 2, "contents": 2, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "creates": 2, "css": 15, "css\\": 1, "d=c": 2, "data": 16, "data-code-block=\\\\\\": 4, "data-filename=\\\\\\": 4, "data-lang=\\\\\\": 8, "data-line-number=\\\\\\": 98, "data-line-numbers=\\\\\\": 8, "data=": 1, "data\\": 2, "db": 4, "default": 2, "defaultvalue=": 4, "defer": 2, "defer\\": 1, "deferred": 1, "depend": 2, "dependencies": 4, "dependency": 3, "deployment": 4, "deployment\\": 2, "description": 4, "description\\": 1, "dev": 3, "development": 3, "directories": 4, "directory": 8, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "displayname": 12, "do": 1, "doc\\": 1, "docs/discussion/server-vs-client": 1, "docs/discussion/server-vs-client\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsserver": 1, "document": 1, "doesn": 4, "done": 1, "during": 1, "e--": 1, "e=0": 1, "else": 2, "email": 10, "ends": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entire": 4, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "even": 2, "everything": 3, "example": 4, "examples": 1, "exception": 2, "execution": 4, "execution\\": 1, "execution\\u003c/h1\\u003e\\\\n\\u003cp\\u003eremix": 1, "executiongetting": 1, "explanation": 2, "explanation\\": 1, "explicitly": 4, "export": 9, "exports": 6, "expression": 2, "extract": 2, "extract\\": 1, "f=a": 1, "fail": 2, "false": 3, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "few": 2, "file": 15, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 8, "files\\": 1, "final": 2, "findmany": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flow": 2, "flow\\": 1, "following": 4, "for": 15, "form": 11, "form\\": 1, "formdata": 4, "found": 3, "frequently": 1, "from": 23, "frontend": 2, "frontend\\": 1, "fullstack": 3, "function": 5, "future": 4, "get": 6, "getelementbyid": 2, "getitem": 1, "getposts": 2, "gets": 1, "gets\\\\nreplaced": 1, "getting": 2, "getuser": 3, "githubchat": 1, "good": 2, "gotchas": 2, "gotchas\\": 1, "graph": 2, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "handle": 2, "handle\\": 1, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "headers": 5, "headers\\": 1, "headersfunction": 2, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 1, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 1, "however": 4, "href=\\\\\\": 19, "html": 1, "html\\": 1, "https": 4, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 5, "icon-link\\\\\\": 5, "id": 1, "id=\\\\\\": 5, "if": 9, "import": 12, "import\\\\\\": 1, "imported": 2, "imports": 4, "imports\\": 2, "in": 30, "inc": 1, "index": 3, "initial": 1, "insertbefore": 1, "integrating": 1, "interactions": 1, "into": 8, "introduction": 1, "is": 5, "isolate": 2, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 8, "iterative": 1, "javascript": 2, "javascript\\": 1, "js": 7, "js\\": 1, "json": 6, "json\\": 1, "key": 4, "know": 3, "language-txt\\\\\\": 1, "last": 2, "lazy": 3, "learning": 1, "let": 3, "libraries": 2, "licensed": 1, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "loader": 5, "loader\u003e": 1, "loader\\": 1, "loaderdata\\": 1, "loaderfunctionargs": 2, "loading": 5, "loading\\": 1, "local": 3, "localhost\\": 1, "make": 2, "makes": 1, "management": 4, "management\\": 2, "manual": 3, "mark": 4, "marks": 4, "math": 1, "max-age=300": 1, "may": 2, "maybe": 2, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "meta": 4, "meta\\": 2, "migrating": 4, "mitedit": 1, "mix": 2, "mixing": 2, "mode": 3, "mode\\": 1, "module": 18, "module\\": 1, "moduleaction": 2, "modules": 19, "modules\\": 3, "modules\\u003c/a\\u003e": 1, "modules\\u003c/h4\\u003e\\\\n\\u003cp\\u003ewhile": 1, "modules\\u003c/h4\\u003e\\\\n\\u003cp\\u003eyou": 1, "most": 1, "mozilla": 1, "multiple": 4, "must": 2, "name": 2, "name=": 4, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "necessary": 2, "need": 1, "nesting": 2, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 5, "null": 1, "number": 1, "of": 9, "ok": 2, "on": 8, "once": 3, "one": 1, "only": 8, "open": 1, "optimization": 2, "optimization\\": 1, "optimize": 2, "or": 11, "order\\": 1, "org/en-us/docs/web/api/window/window\\\\\\": 1, "other": 3, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 2, "outlet": 2, "outlet\\": 1, "param": 2, "param\\": 1, "parentnode": 2, "parse": 1, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "places": 2, "plugin": 4, "positions": 2, "postcss": 2, "postcss\\": 1, "postpreview": 2, "posts": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 2, "presets\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 1, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "react": 8, "react-router-scroll-positions": 1, "readablestream": 1, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "regular": 3, "related": 1, "released": 2, "remix": 22, "remix\\": 2, "remove": 6, "removechild": 2, "removed": 2, "removeitem": 1, "removes": 2, "replace": 2, "replace\\": 1, "replaced": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 6, "resource": 3, "resources": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "resulting": 2, "return": 7, "rocking": 1, "rolling": 1, "root": 5, "root\\": 1, "route": 16, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 8, "routes/docs": 3, "routes/docs\\": 1, "routes/settings": 4, "routes\\": 2, "routes\\\\n": 1, "run": 2, "run/docs/discussion/server-vs-client": 1, "run\\": 1, "running": 1, "runs": 2, "runtimes": 3, "s-maxage=3600": 1, "s-maxage=3600\\u003c/span\\u003e\\\\\\": 1, "same": 4, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "section": 2, "server": 47, "server-modules\\\\\\": 1, "server-only": 16, "server-only\\\\n│": 1, "server-only\\\\n├──": 1, "server-vs-client-code-execution\\\\\\": 1, "server/db": 1, "server/db\\u003c/span\\u003e\\\\\\": 1, "server\\": 3, "server\\u003c/code\\u003e": 7, "server\\u003c/code\\u003e\\u003c/a\\u003e": 1, "serveronly$": 3, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "shopify": 1, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "simplest": 2, "simplifying": 1, "simply": 2, "single": 5, "siteurl\\": 1, "slice": 1, "slug\\": 1, "so": 2, "spa": 3, "splits": 2, "splitting": 2, "splitting-up-client-and-server-code\\": 1, "splitting-up-client-and-server-code\\\\\\": 1, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "step": 2, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "strictly": 2, "style=\\\\\\": 246, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "submit": 2, "support": 5, "support\\": 1, "supported": 4, "supports": 4, "tabindex=\\\\\\": 5, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "thank": 1, "that": 4, "the": 72, "them": 6, "there": 1, "these": 2, "this": 12, "through": 1, "title": 4, "title\\": 1, "tls": 2, "tls\\": 1, "to": 32, "toc\\": 1, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "tries": 2, "true": 7, "true\\\\\\": 13, "try": 1, "ts": 7, "ts\\": 1, "ts\\\\n│": 1, "ts\\\\n├──": 1, "ts\\u003c/code\\u003e": 1, "tsx": 2, "tsx\\\\\\": 12, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003e": 1, "tsx\\\\n└──": 1, "tutorial": 3, "type": 1, "type=": 2, "typeof": 1, "typescript": 2, "typescript\\": 1, "ui": 2, "ui\\": 1, "undefined": 2, "under": 1, "unsafe": 2, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 9, "updateuser": 2, "upgrading": 3, "uploads": 2, "uploads\\": 1, "use": 4, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 2, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 5, "useloaderdata\u003ctypeof": 1, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 13, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 6, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 248, "variables": 2, "variables\\": 1, "ve": 2, "view": 2, "vite": 12, "vite-env-only": 3, "vite-env-only\\\\\\": 1, "vite\\": 1, "vite\\u003c/a\\u003e": 2, "vs": 10, "walk": 1, "want": 2, "way": 3, "ways": 2, "we": 2, "well": 2, "when": 7, "which": 2, "while": 2, "why": 1, "will": 8, "window": 12, "with": 12, "within": 6, "would": 2, "wrap": 2, "writes": 2, "writes\\": 1, "you": 16, "you\\\\ncan": 1, "your": 13, "||": 3, "~/": 1, "©": 1, "—": 2, "•docs": 1, "│": 2, "└──": 5, "├──": 5, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2, "👈": 4 }, "length": 7281 }, { "id": "97a268877cc0b4aadb468bf0", "doc_id": "c888428c8fec5197eeb62d90", "title": "service-workers", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/guides/service-workers.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/service-workers.json", "content": "--- title: Service workers use_cases: \u003e- offline support, pwa, caching, background sync, push notifications, performance optimization tags: - service-workers - pwa - offline - caching - performance version: '1.0' description: \u003e- Register and configure service workers in SolidStart for offline support, caching strategies, and progressive web app features. --- To register a service worker: 1. Place your service-worker file in the `public` directory (e.g., `public/sw.js`), making it available at the root URL (`/sw.js`). 2. Add registration logic to the `entry-client.tsx` file. ```tsx {6-11} title=\"src/entry-client.tsx\" // @refresh reload import { mount, StartClient } from \"@solidjs/start/client\"; mount(() =\u003e \u003cStartClient /\u003e, document.getElementById(\"app\")!); if (\"serviceWorker\" in navigator \u0026\u0026 import.meta.env.PROD) { window.addEventListener(\"load\", () =\u003e { navigator.serviceWorker.register(\"/sw.js\"); }); } ```", "term_freq": { "\u0026\u0026": 1, "---": 2, "//": 1, "//github": 1, "/\u003e": 1, "/sw": 2, "6-11": 1, "\u003cstartclient": 1, "=\u003e": 2, "\u003e-": 2, "@refresh": 1, "@solidjs/start/client": 1, "add": 1, "addeventlistener": 1, "and": 2, "app": 2, "at": 1, "available": 1, "background": 1, "caching": 3, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/guides/service-workers": 1, "configure": 1, "description": 1, "directory": 1, "document": 1, "entry-client": 1, "env": 1, "features": 1, "file": 2, "for": 1, "from": 1, "getelementbyid": 1, "github-document": 1, "https": 1, "if": 1, "import": 2, "in": 3, "it": 1, "js": 3, "load": 1, "logic": 1, "making": 1, "mdx": 1, "meta": 1, "mount": 2, "navigator": 2, "notifications": 1, "offline": 3, "optimization": 1, "performance": 2, "place": 1, "prod": 1, "progressive": 1, "public": 1, "public/sw": 1, "push": 1, "pwa": 2, "register": 3, "registration": 1, "reload": 1, "root": 1, "service": 3, "service-worker": 1, "service-workers": 2, "serviceworker": 2, "solidstart": 1, "src/entry-client": 1, "startclient": 1, "strategies": 1, "support": 2, "sync": 1, "tags": 1, "the": 3, "title": 1, "title=": 1, "to": 2, "tsx": 3, "url": 1, "use_cases": 1, "version": 1, "web": 1, "window": 1, "worker": 1, "workers": 2, "your": 1 }, "length": 118 }, { "id": "ab192cc1bf5d20167c20cc7f", "doc_id": "339e4671ffa5672f11d7e10c", "title": "session", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/advanced/session.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/session.json", "content": "--- title: Sessions use_cases: \u003e- user sessions, authentication state, preferences storage, stateful interactions, login persistence tags: - sessions - cookies - authentication - state - storage - persistence version: '1.0' description: \u003e- Manage user sessions with encrypted cookies in SolidStart. Maintain authentication state and user preferences between requests. --- Sessions allow web applications to maintain state between user requests. Since HTTP is stateless, each request is treated independently. Sessions address this by allowing the server to recognize multiple requests from the same user, which is helpful for tracking authentication and preferences. ## How sessions work A session typically involves: 1. **Session creation**: When tracking is needed (e.g., upon login or first visit), the server creates a session. This involves generating a unique **session ID** and storing the session data, _encrypted and signed_, within a cookie. 2. **Session cookie transmission**: The server sends a `Set-Cookie` HTTP header. This instructs the browser to store the session cookie. 3. **Subsequent requests**: The browser automatically includes the session cookie in the `Cookie` HTTP header for requests to the server. 4. **Session retrieval and data access**: For each request, the server checks for the session cookie, retrieves the session data if a cookie is present, then decrypts and verifies the signature of the session data for the application to access and use this data. 5. **Session expiration and destruction**: Sessions typically expire after a period of time or upon user sign-out and the data is removed. This is done by setting a `Max-Age` attribute on the cookie or by sending a `Set-Cookie` HTTP header with an expired date. Most of these steps are automatically managed by the [session helpers](#session-helpers). ### Database sessions For larger applications or when more advanced session management is needed, session data can be stored in a database. This approach is similar to the cookie-based approach, but with some key differences: - The session data is stored in the database, associated with the session ID. - Only the session ID is stored in the cookie, not the session data. - The session data is retrieved from the database using the session ID, instead of being retrieved directly from the cookie. - Upon expiration, in addition to the session cookie, the database record containing the session data is also removed. SolidStart does not automatically handle interactions with a database; you need to implement this yourself. ## Session helpers [Vinxi](https://vinxi.vercel.app), the underlying server toolkit powering SolidStart, provides helpers to simplify working with sessions. It provides a few key session helpers: - [`useSession`](https://vinxi.vercel.app/api/server/session.html#usesession): Initializes a session or retrieves the existing session and returns a session object. - [`getSession`](https://vinxi.vercel.app/api/server/session.html#getsession): Retrieves the current session or initializes a new session. - [`updateSession`](https://vinxi.vercel.app/api/server/session.html#updatesession): Updates data within the current session. - [`clearSession`](https://vinxi.vercel.app/api/server/session.html#clearsession): Clears the current session. These helpers work _only_ in server-side contexts, such as within server functions and API routes. This is because session management requires access to server-side resources as well as the ability to get and set HTTP headers. For more information, see the [Cookies documentation in the Vinxi docs](https://vinxi.vercel.app/api/server/session.html). ## Creating a session The `useSession` helper is the primary way to create and manage sessions. It provides a comprehensive interface for all session operations. ```ts title=\"src/lib/session.ts\" import { useSession } from \"vinxi/http\"; type SessionData = { theme: \"light\" | \"dark\"; }; export async function useThemeSession() { \"use server\"; const session = await useSession\u003cSessionData\u003e({ password: process.env.SESSION_SECRET as string, name: \"theme\", }); if (!session.data.theme) { await session.update({ theme: \"light\", }); } return session; } ``` In this example, the `useThemeSession` server function creates a session that stores a user's theme preference. `useSession` requires a strong password for encrypting and signing the session cookie. This password must be at least 32 characters long and should be kept highly secure. It is strongly recommended to store this password in a [private environment variable](/configuration/environment-variables#private-environment-variables), as shown in the example above, rather than hardcoding it in your source code. A password can be generated using the following command: ```sh frame=\"none\" openssl rand -base64 32 ``` `useSession` adds a `Set-Cookie` HTTP header to the current server response. By default, the cookie is named `h3`, but can be customized with the `name` option, as shown in the example above. ## Getting the session data The `useSession` helper provides access to the session data from the current request with the `data` property. ```ts title=\"src/lib/session.ts\" export async function getThemeSession() { \"use server\"; const session = await useThemeSession(); return session.data.theme; } ``` ## Updating the session data The `useSession` helper provides the `update` method to update the session data from the current request. ```ts title=\"src/lib/session.ts\" export async function updateThemeSession(data: SessionData) { \"use server\"; const session = await useThemeSession(); await session.update(data); } ``` ## Clearing the session data The `useSession` helper provides the `clear` method to clear the session data from the current request. ```ts title=\"src/lib/session.ts\" export async function clearThemeSession() { \"use server\"; const session = await useThemeSession(); await session.clear(); } ```", "term_freq": { "##": 6, "###": 1, "#session-helpers": 1, "**session": 5, "**subsequent": 1, "---": 2, "-base64": 1, "//github": 1, "//vinxi": 6, "/configuration/environment-variables#private-environment-variables": 1, "32": 2, "\u003e-": 2, "_encrypted": 1, "_only_": 1, "ability": 1, "above": 2, "access": 3, "access**": 1, "addition": 1, "address": 1, "adds": 1, "advanced": 1, "after": 1, "all": 1, "allow": 1, "allowing": 1, "also": 1, "an": 1, "and": 15, "api": 1, "app": 1, "app/api/server/session": 5, "application": 1, "applications": 2, "approach": 2, "are": 1, "as": 6, "associated": 1, "async": 4, "at": 1, "attribute": 1, "authentication": 4, "automatically": 3, "await": 7, "be": 5, "because": 1, "being": 1, "between": 2, "browser": 2, "but": 2, "by": 5, "can": 3, "characters": 1, "checks": 1, "clear": 3, "clearing": 1, "clears": 1, "clearsession": 1, "clearthemesession": 1, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/advanced/session": 1, "command": 1, "comprehensive": 1, "const": 4, "containing": 1, "contexts": 1, "cookie": 13, "cookie-based": 1, "cookies": 3, "create": 1, "creates": 2, "creating": 1, "creation**": 1, "current": 7, "customized": 1, "dark": 1, "data": 23, "database": 6, "date": 1, "decrypts": 1, "default": 1, "description": 1, "destruction**": 1, "differences": 1, "directly": 1, "docs": 1, "documentation": 1, "does": 1, "done": 1, "each": 2, "encrypted": 1, "encrypting": 1, "env": 1, "environment": 1, "example": 3, "existing": 1, "expiration": 2, "expire": 1, "expired": 1, "export": 4, "few": 1, "first": 1, "following": 1, "for": 9, "frame=": 1, "from": 7, "function": 5, "functions": 1, "generated": 1, "generating": 1, "get": 1, "getsession": 1, "getthemesession": 1, "getting": 1, "github-document": 1, "h3": 1, "handle": 1, "hardcoding": 1, "header": 4, "headers": 1, "helper": 4, "helpers": 5, "helpful": 1, "highly": 1, "how": 1, "html": 1, "html#clearsession": 1, "html#getsession": 1, "html#updatesession": 1, "html#usesession": 1, "http": 6, "https": 7, "id": 3, "id**": 1, "if": 2, "implement": 1, "import": 1, "in": 13, "includes": 1, "independently": 1, "information": 1, "initializes": 2, "instead": 1, "instructs": 1, "interactions": 2, "interface": 1, "involves": 2, "is": 17, "it": 4, "kept": 1, "key": 2, "larger": 1, "least": 1, "light": 2, "login": 2, "long": 1, "maintain": 2, "manage": 2, "managed": 1, "management": 2, "max-age": 1, "mdx": 1, "method": 2, "more": 2, "most": 1, "multiple": 1, "must": 1, "name": 2, "named": 1, "need": 1, "needed": 2, "new": 1, "none": 1, "not": 2, "object": 1, "of": 4, "on": 1, "only": 1, "openssl": 1, "operations": 1, "option": 1, "or": 6, "password": 5, "period": 1, "persistence": 2, "powering": 1, "preference": 1, "preferences": 3, "present": 1, "primary": 1, "private": 1, "process": 1, "property": 1, "provides": 6, "rand": 1, "rather": 1, "recognize": 1, "recommended": 1, "record": 1, "removed": 2, "request": 5, "requests": 4, "requests**": 1, "requires": 2, "resources": 1, "response": 1, "retrieval": 1, "retrieved": 2, "retrieves": 3, "return": 2, "returns": 1, "routes": 1, "same": 1, "secure": 1, "see": 1, "sending": 1, "sends": 1, "server": 13, "server-side": 2, "session": 50, "session_secret": 1, "sessiondata": 2, "sessions": 11, "set": 1, "set-cookie": 3, "setting": 1, "sh": 1, "should": 1, "shown": 2, "sign-out": 1, "signature": 1, "signed_": 1, "signing": 1, "similar": 1, "simplify": 1, "since": 1, "solidstart": 3, "some": 1, "source": 1, "src/lib/session": 4, "state": 4, "stateful": 1, "stateless": 1, "steps": 1, "storage": 2, "store": 2, "stored": 3, "stores": 1, "storing": 1, "string": 1, "strong": 1, "strongly": 1, "such": 1, "tags": 1, "than": 1, "that": 1, "the": 67, "theme": 6, "then": 1, "these": 2, "this": 11, "time": 1, "title": 1, "title=": 4, "to": 17, "toolkit": 1, "tracking": 2, "transmission**": 1, "treated": 1, "ts": 8, "type": 1, "typically": 2, "underlying": 1, "unique": 1, "update": 4, "updates": 1, "updatesession": 1, "updatethemesession": 1, "updating": 1, "upon": 3, "use": 5, "use_cases": 1, "user": 7, "usesession": 8, "usesession\u003csessiondata\u003e": 1, "usethemesession": 5, "using": 2, "variable": 1, "vercel": 6, "verifies": 1, "version": 1, "vinxi": 2, "vinxi/http": 1, "visit": 1, "way": 1, "web": 1, "well": 1, "when": 2, "which": 1, "with": 8, "within": 3, "work": 2, "working": 1, "you": 1, "your": 1, "yourself": 1 }, "length": 800 }, { "id": "0a90151be2c31364181efa97", "doc_id": "4f77e7b1cddcae111174e945", "title": "show", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/show.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/show.json", "content": "--- title: \u003cShow\u003e order: 5 use_cases: \u003e- conditional rendering, toggling ui, feature flags, loading states, user permissions, responsive design tags: - conditional - rendering - components - control-flow - ui - toggle version: '1.0' description: \u003e- Conditionally render UI elements in SolidJS with Show component. Display content based on truthy conditions with optional fallback support. --- The `\u003cShow\u003e` component is used for conditionally rendering UI elements. It takes a `when` prop that defines the condition for rendering. When the `when` prop is truthy, the children of the `\u003cShow\u003e` component are displayed. Additionally, an optional `fallback` prop can be provided to specify an element that is shown when the condition is falsy. ```tsx import { createSignal, Show } from \"solid-js\"; function Example() { const [value, setValue] = createSignal(true); return ( \u003cdiv\u003e \u003cbutton onClick={() =\u003e setValue((prev) =\u003e !prev)}\u003eToggle Show\u003c/button\u003e \u003cShow when={value()} fallback={\u003cdiv\u003eFallback Element\u003c/div\u003e}\u003e \u003cdiv\u003eChild Element\u003c/div\u003e \u003c/Show\u003e \u003c/div\u003e ); } ``` ## Keyed rendering When the `keyed` is set to `true`, any change to the `when` prop — including changes in its reference — will cause the `\u003cShow\u003e` component to re-render its children. ```tsx import { createSignal, Show } from \"solid-js\"; function KeyedExample() { const [user, setUser] = createSignal({ name: \"John Wick\" }); function update() { // This operation changes the reference of the user object. setUser({ ...user() }); } return ( \u003cdiv\u003e \u003cbutton onClick={update}\u003eUpdate\u003c/button\u003e \u003cShow when={user()} keyed\u003e \u003cp\u003eName: {user().name}\u003c/p\u003e {/* Updates shown with each click */} \u003cp\u003eLast updated: {Date.now()}\u003c/p\u003e \u003c/Show\u003e \u003c/div\u003e ); } ``` ## Render function The `\u003cShow\u003e` component can also accept a render function as its child. In this case, the first argument of the render function is an _accessor_ to the `when` prop. However, when the `keyed` prop is set to `true`, the argument is the `when` prop itself instead of an accessor. When a render function is used, it is internally wrapped with [`untrack`](/reference/reactive-utilities/untrack). As a result, signals accessed directly within the render function's scope will not react to updates. For example, in the following code, the count displayed in the first `\u003cShow\u003e` component does not update when the `count` signal changes. However, the second `\u003cShow\u003e` component does update since the `count` signal is accessed within a JSX element, which creates a tracking scope. ```tsx import { createSignal, Show } from \"solid-js\"; function RenderFunctionExample() { const [count, setCount] = createSignal(0); return ( \u003cdiv\u003e \u003cbutton onClick={() =\u003e setCount((c) =\u003e c + 1)}\u003eIncrement\u003c/button\u003e {/* This does not update. */} \u003cShow when={count()}\u003e{(c) =\u003e count()}\u003c/Show\u003e {/* This will update. */} \u003cShow when={count()}\u003e{(c) =\u003e \u003c\u003e{count()}\u003c/\u003e}\u003c/Show\u003e \u003c/div\u003e ); } ``` ## Props | Name | Type | Description | | :--------- | :-------------------------------- | :---------------------------------------------------- | | `when` | `T \\| undefined \\| null \\| false` | The condition value. | | `keyed` | `boolean` | Whether to key the block to the value of when. | | `fallback` | `JSX.Element` | The fallback to render when the `when` prop is falsy. |", "term_freq": { "##": 3, "*/": 3, "---": 2, "---------": 1, "--------------------------------": 1, "----------------------------------------------------": 1, "/*": 3, "//": 1, "//github": 1, "/reference/reactive-utilities/untrack": 1, "\u003c/\u003e": 1, "\u003c/div\u003e": 3, "\u003c/p\u003e": 2, "\u003c/show\u003e": 4, "\u003c\u003e": 1, "\u003cbutton": 3, "\u003cdiv\u003e": 3, "\u003cdiv\u003echild": 1, "\u003cdiv\u003efallback": 1, "\u003cp\u003elast": 1, "\u003cp\u003ename": 1, "\u003cshow": 4, "\u003cshow\u003e": 7, "=\u003e": 6, "\u003e-": 2, "\u003eincrement\u003c/button\u003e": 1, "\u003etoggle": 1, "\u003eupdate\u003c/button\u003e": 1, "\\|": 3, "_accessor_": 1, "accept": 1, "accessed": 2, "accessor": 1, "additionally": 1, "also": 1, "an": 4, "any": 1, "are": 1, "argument": 2, "as": 2, "based": 1, "be": 1, "block": 1, "boolean": 1, "can": 2, "case": 1, "cause": 1, "change": 1, "changes": 3, "child": 1, "children": 2, "click": 1, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/components/show": 1, "component": 7, "components": 1, "condition": 3, "conditional": 2, "conditionally": 2, "conditions": 1, "const": 3, "content": 1, "control-flow": 1, "count": 8, "creates": 1, "createsignal": 6, "date": 1, "defines": 1, "description": 2, "design": 1, "directly": 1, "display": 1, "displayed": 2, "does": 3, "each": 1, "element": 3, "element\u003c/div\u003e": 2, "elements": 2, "example": 2, "fallback": 4, "fallback=": 1, "false": 1, "falsy": 2, "feature": 1, "first": 2, "flags": 1, "following": 1, "for": 3, "from": 3, "function": 9, "github-document": 1, "however": 2, "https": 1, "import": 3, "in": 5, "including": 1, "instead": 1, "internally": 1, "is": 12, "it": 2, "its": 3, "itself": 1, "john": 1, "jsx": 2, "key": 1, "keyed": 4, "keyed\u003e": 1, "keyedexample": 1, "loading": 1, "mdx": 1, "name": 3, "not": 3, "now": 1, "null": 1, "object": 1, "of": 5, "on": 1, "onclick=": 3, "operation": 1, "optional": 2, "order": 1, "permissions": 1, "prev": 2, "prop": 8, "props": 1, "provided": 1, "re-render": 1, "react": 1, "reference": 2, "render": 7, "renderfunctionexample": 1, "rendering": 5, "responsive": 1, "result": 1, "return": 3, "scope": 2, "second": 1, "set": 2, "setcount": 2, "setuser": 2, "setvalue": 2, "show": 5, "show\u003c/button\u003e": 1, "shown": 2, "signal": 2, "signals": 1, "since": 1, "solid-js": 3, "solidjs": 1, "specify": 1, "states": 1, "support": 1, "tags": 1, "takes": 1, "that": 2, "the": 30, "this": 4, "title": 1, "to": 10, "toggle": 1, "toggling": 1, "tracking": 1, "true": 3, "truthy": 2, "tsx": 3, "type": 1, "ui": 4, "undefined": 1, "untrack": 1, "update": 6, "updated": 1, "updates": 2, "use_cases": 1, "used": 2, "user": 6, "value": 4, "version": 1, "when": 15, "when=": 4, "whether": 1, "which": 1, "wick": 1, "will": 3, "with": 4, "within": 2, "wrapped": 1, "—": 2 }, "length": 440 }, { "id": "99a04e5d333f25a96502f7c3", "doc_id": "e7a40a89beb93d9ce02bf34c", "title": "signals", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/signals.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/signals.json", "content": "--- title: Signals order: 2 use_cases: \u003e- state management, reactive values, component state, updating ui, tracking changes, basic reactivity tags: - signals - state - reactivity - getter - setter - fundamentals version: '1.0' description: \u003e- Create reactive state with signals - the foundation of Solid's reactivity system for automatic UI updates and tracking. --- Signals are the primary means of [managing state](/concepts/intro-to-reactivity#state-management) in your Solid application. They provide a way to store and update values, and are the foundation of [reactivity](/concepts/intro-to-reactivity) in Solid. Signals can be used to represent any kind of state in your application, such as the current user, the current page, or the current theme. This can be any value, including primitive values such as strings and numbers, or complex values such as objects and arrays. ## Creating a signal You can create a signal by calling the [`createSignal`](/reference/basic-reactivity/create-signal) function, which is imported from `solid-js`. This function takes an initial value as an argument, and returns a pair of functions: a **getter** function, and a **setter** function. ```jsx import { createSignal } from \"solid-js\"; const [count, setCount] = createSignal(0); // ^ getter ^ setter ``` :::note The syntax using `[` and `]` is called [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment). This lets you extract values from the array. In the context of `createSignal`, the first value is the getter function, and the second value is the setter function. ::: ## Accessing values The getter function returned by `createSignal` is used to access the value of the signal. You call this function with no arguments to get the current value of the signal: ```jsx console.log(count()); // output: 0 ``` ## Updating values The setter function returned by `createSignal` is used to update the value of the signal. This function takes an argument that represents the new value of the signal: ```jsx setCount(count() + 1); console.log(count()); // output: 1 ``` The setter function can also take a function that passes the previous value. ```jsx setCount((prevCount) =\u003e prevCount + 1); console.log(count()); // output: 1 ``` ## Reactivity Signals are reactive, which means that they automatically update when their value changes. When a signal is called within a [tracking scope](/concepts/intro-to-reactivity#tracking-changes), the signal adds the dependency to a list of subscribers. Once a signal's value changes, it notifies all of its dependencies of the change so they can re-evaluate their values and update accordingly. ```jsx function Counter() { const [count, setCount] = createSignal(0); const increment = () =\u003e setCount((prev) =\u003e prev + 1); return ( \u003cdiv\u003e \u003cspan\u003eCount: {count()}\u003c/span\u003e {/* Updates when `count` changes */} \u003cbutton type=\"button\" onClick={increment}\u003e Increment \u003c/button\u003e \u003c/div\u003e ); } ``` :::note A tracking scope can be created by [`createEffect`](/reference/basic-reactivity/create-effect) or [`createMemo`](/reference/basic-reactivity/create-memo), which are other Solid primitives. Both functions subscribe to the signals accessed within them, establishing a dependency relationship. Once this relationship is established, the function is notified whenever the signal changes. ::: To learn more about how to use Signals in your application, visit our [state management guide](/guides/state-management).", "term_freq": { "##": 4, "**getter**": 1, "**setter**": 1, "*/": 1, "---": 2, "/*": 1, "//": 4, "//developer": 1, "//github": 1, "/concepts/intro-to-reactivity": 1, "/concepts/intro-to-reactivity#state-management": 1, "/concepts/intro-to-reactivity#tracking-changes": 1, "/guides/state-management": 1, "/reference/basic-reactivity/create-effect": 1, "/reference/basic-reactivity/create-memo": 1, "/reference/basic-reactivity/create-signal": 1, "\u003c/button\u003e": 1, "\u003c/div\u003e": 1, "\u003c/span\u003e": 1, "\u003cbutton": 1, "\u003cdiv\u003e": 1, "\u003cspan\u003ecount": 1, "=\u003e": 3, "\u003e-": 2, "about": 1, "access": 1, "accessed": 1, "accessing": 1, "accordingly": 1, "adds": 1, "all": 1, "also": 1, "an": 3, "and": 10, "any": 2, "application": 3, "are": 4, "argument": 2, "arguments": 1, "array": 2, "arrays": 1, "as": 4, "automatic": 1, "automatically": 1, "basic": 1, "be": 3, "both": 1, "button": 1, "by": 4, "call": 1, "called": 2, "calling": 1, "can": 6, "change": 1, "changes": 5, "com/solidjs/solid-docs/blob/head/src/routes/concepts/signals": 1, "complex": 1, "component": 1, "console": 3, "const": 3, "context": 1, "count": 8, "counter": 1, "create": 2, "created": 1, "createeffect": 1, "creatememo": 1, "createsignal": 7, "creating": 1, "current": 4, "dependencies": 1, "dependency": 2, "description": 1, "destructuring": 1, "established": 1, "establishing": 1, "extract": 1, "first": 1, "for": 1, "foundation": 2, "from": 3, "function": 14, "functions": 2, "fundamentals": 1, "get": 1, "getter": 4, "github-document": 1, "guide": 1, "how": 1, "https": 2, "import": 1, "imported": 1, "in": 5, "including": 1, "increment": 3, "initial": 1, "is": 9, "it": 1, "its": 1, "jsx": 5, "kind": 1, "learn": 1, "lets": 1, "list": 1, "log": 3, "management": 2, "managing": 1, "mdx": 1, "means": 2, "more": 1, "mozilla": 1, "new": 1, "no": 1, "note": 2, "notified": 1, "notifies": 1, "numbers": 1, "objects": 1, "of": 13, "once": 2, "onclick=": 1, "or": 3, "order": 1, "org/en-us/docs/web/javascript/reference/operators/destructuring_assignment": 1, "other": 1, "our": 1, "output": 3, "page": 1, "pair": 1, "passes": 1, "prev": 2, "prevcount": 2, "previous": 1, "primary": 1, "primitive": 1, "primitives": 1, "provide": 1, "re-evaluate": 1, "reactive": 3, "reactivity": 5, "relationship": 2, "represent": 1, "represents": 1, "return": 1, "returned": 2, "returns": 1, "scope": 2, "second": 1, "setcount": 5, "setter": 5, "signal": 10, "signals": 9, "so": 1, "solid": 4, "solid-js": 2, "state": 7, "store": 1, "strings": 1, "subscribe": 1, "subscribers": 1, "such": 3, "syntax": 1, "system": 1, "tags": 1, "take": 1, "takes": 2, "that": 3, "the": 32, "their": 2, "them": 1, "theme": 1, "they": 3, "this": 6, "title": 1, "to": 9, "tracking": 4, "type=": 1, "ui": 2, "update": 4, "updates": 2, "updating": 2, "use": 1, "use_cases": 1, "used": 3, "user": 1, "using": 1, "value": 11, "values": 8, "version": 1, "visit": 1, "way": 1, "when": 3, "whenever": 1, "which": 3, "with": 2, "within": 2, "you": 3, "your": 3 }, "length": 464 }, { "id": "9ff4f097bd641d2e6f721528", "doc_id": "dcab9ee1ab42eb82c2c4bcb3", "title": "spa", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/rendering-modes/spa.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/spa.json", "content": "--- title: Single page applications use_cases: \u003e- client-side routing, cdn deployment, static hosting, spa configuration, deployment setup tags: - spa - deployment - cdn - hosting - client-side - routing version: '1.0' description: \u003e- Configure single-page applications for proper CDN and hosting deployment. Handle client-side routing without server-side rendering. --- When deploying applications that use a client-side router without relying on Server-Side Rendering, it is important that redirects to the index page are handled properly. This prevents the CDN or hosting service from returning a \"not found\" error when accessing URLs that do not correspond to files. Each provider has a different way of doing this. For example, Netlify provides a `_redirects` file that contains: ```sh frame=\"none\" /* /index.html 200 ``` Vercel, on the other hand, requires a rewrites section in your `vercel.json`: ```json { \"rewrites\": [ { \"source\": \"/(.*)\", \"destination\": \"/index.html\" } ] } ```", "term_freq": { "---": 2, "/*": 1, "//github": 1, "/index": 2, "200": 1, "\u003e-": 2, "_redirects": 1, "accessing": 1, "and": 1, "applications": 3, "are": 1, "cdn": 4, "client-side": 4, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/rendering-modes/spa": 1, "configuration": 1, "configure": 1, "contains": 1, "correspond": 1, "deploying": 1, "deployment": 4, "description": 1, "destination": 1, "different": 1, "do": 1, "doing": 1, "each": 1, "error": 1, "example": 1, "file": 1, "files": 1, "for": 2, "found": 1, "frame=": 1, "from": 1, "github-document": 1, "hand": 1, "handle": 1, "handled": 1, "has": 1, "hosting": 4, "html": 2, "https": 1, "important": 1, "in": 1, "index": 1, "is": 1, "it": 1, "json": 2, "mdx": 1, "netlify": 1, "none": 1, "not": 2, "of": 1, "on": 2, "or": 1, "other": 1, "page": 2, "prevents": 1, "proper": 1, "properly": 1, "provider": 1, "provides": 1, "redirects": 1, "relying": 1, "rendering": 2, "requires": 1, "returning": 1, "rewrites": 2, "router": 1, "routing": 3, "section": 1, "server-side": 2, "service": 1, "setup": 1, "sh": 1, "single": 1, "single-page": 1, "source": 1, "spa": 3, "static": 1, "tags": 1, "that": 4, "the": 3, "this": 2, "title": 1, "to": 2, "urls": 1, "use": 1, "use_cases": 1, "vercel": 2, "version": 1, "way": 1, "when": 2, "without": 2, "your": 1 }, "length": 135 }, { "id": "c9819b1d71bbcbcb519948ea", "doc_id": "221f8ebc8afdf56f8a35f054", "title": "split-props", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/split-props.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/split-props.json", "content": "--- title: splitProps use_cases: \u003e- prop forwarding, component composition, prop separation, child components, prop destructuring tags: - props - components - composition - destructuring - reactive version: '1.0' description: \u003e- Split reactive props objects by keys in SolidJS. Perfect for consuming specific props while forwarding others to child components efficiently. --- ```ts import { splitProps } from \"solid-js\" function splitProps\u003cT\u003e( props: T, ...keys: Array\u003c(keyof T)[]\u003e ): [...parts: Partial\u003cT\u003e] ``` Splits a reactive object by keys. It takes a reactive object and any number of arrays of keys; for each array of keys, it will return a reactive object with just those properties of the original object. The last reactive object in the returned array will have any leftover properties of the original object. This can be useful if you want to consume a subset of props and pass the rest to a child. ```tsx function MyComponent(props) { const [local, others] = splitProps(props, [\"children\"]) return ( \u003c\u003e \u003cdiv\u003e{local.children}\u003c/div\u003e \u003cChild {...others} /\u003e \u003c/\u003e ) } ``` Because `splitProps` takes any number of arrays, we can split a props object as much as we wish (if, for example, we had multiple child components that each required a subset of the props). Let's say a component was passed six props: ```tsx \u003cMyComponent a={1} b={2} c={3} d={4} e={5} foo=\"bar\" /\u003e // ... function MyComponent(props) { console.log(props) // {a: 1, b: 2, c: 3, d: 4, e: 5, foo: \"bar\"} const [vowels, consonants, leftovers] = splitProps( props, [\"a\", \"e\"], [\"b\", \"c\", \"d\"] ) console.log(vowels) // {a: 1, e: 5} console.log(consonants) // {b: 2, c: 3, d: 4} console.log(leftovers.foo) // bar } ```", "term_freq": { "---": 2, "//": 5, "//github": 1, "/\u003e": 2, "\u003c/\u003e": 1, "\u003c/div\u003e": 1, "\u003c\u003e": 1, "\u003cchild": 1, "\u003cdiv\u003e": 1, "\u003cmycomponent": 1, "\u003e-": 2, "a=": 1, "and": 2, "any": 3, "array": 2, "array\u003c": 1, "arrays": 2, "as": 2, "b=": 1, "bar": 3, "be": 1, "because": 1, "by": 2, "c=": 1, "can": 2, "child": 4, "children": 2, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/split-props": 1, "component": 2, "components": 4, "composition": 2, "console": 4, "consonants": 2, "const": 2, "consume": 1, "consuming": 1, "d=": 1, "description": 1, "destructuring": 2, "e=": 1, "each": 2, "efficiently": 1, "example": 1, "foo": 2, "foo=": 1, "for": 3, "forwarding": 2, "from": 1, "function": 3, "github-document": 1, "had": 1, "have": 1, "https": 1, "if": 2, "import": 1, "in": 2, "it": 2, "just": 1, "keyof": 1, "keys": 5, "last": 1, "leftover": 1, "leftovers": 2, "let": 1, "local": 2, "log": 4, "mdx": 1, "much": 1, "multiple": 1, "mycomponent": 2, "number": 2, "object": 7, "objects": 1, "of": 8, "original": 2, "others": 3, "partial\u003ct\u003e": 1, "parts": 1, "pass": 1, "passed": 1, "perfect": 1, "prop": 3, "properties": 2, "props": 13, "reactive": 6, "required": 1, "rest": 1, "return": 2, "returned": 1, "say": 1, "separation": 1, "six": 1, "solid-js": 1, "solidjs": 1, "specific": 1, "split": 2, "split-props": 1, "splitprops": 5, "splitprops\u003ct\u003e": 1, "splits": 1, "subset": 2, "tags": 1, "takes": 2, "that": 1, "the": 6, "this": 1, "those": 1, "title": 1, "to": 3, "ts": 1, "tsx": 2, "use_cases": 1, "useful": 1, "version": 1, "vowels": 2, "want": 1, "was": 1, "we": 3, "while": 1, "will": 2, "wish": 1, "with": 1, "you": 1 }, "length": 232 }, { "id": "7ac0045db5faa124cc23c688", "doc_id": "2634d8efc3c8e21f09a43d26", "title": "ssr", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/rendering-modes/ssr.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/ssr.json", "content": "--- title: Server side rendering use_cases: \u003e- server rendering, seo optimization, initial page load, performance optimization, data preloading tags: - ssr - server - rendering - seo - performance - preload version: '1.0' description: \u003e- Enable server-side rendering with Solid Router for SEO and performance. Support suspense, resources, and render-as-you-fetch patterns. --- Solid Router supports all of Solid's SSR capabilities. In addition, it has Solid's transitions included, so it can be used freely with [suspense](/reference/components/suspense), [resources](/reference/basic-reactivity/create-resource), and [lazy components](/reference/component-apis/lazy). When using SSR, there is the option to use the static router directly or let the browser router default to it on the server by passing in the URL. ```jsx import { isServer } from \"solid-js/web\"; import { Router } from \"@solidjs/router\"; \u003cRouter url={isServer ? req.url : \"\"} /\u003e; ``` Solid Router also provides a way to define a `preload` function that loads parallel to the routes [render-as-you-fetch](https://epicreact.dev/render-as-you-fetch/).", "term_freq": { "---": 2, "//epicreact": 1, "//github": 1, "/\u003e": 1, "/reference/basic-reactivity/create-resource": 1, "/reference/component-apis/lazy": 1, "/reference/components/suspense": 1, "\u003crouter": 1, "\u003e-": 2, "@solidjs/router": 1, "addition": 1, "all": 1, "also": 1, "and": 3, "be": 1, "browser": 1, "by": 1, "can": 1, "capabilities": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/rendering-modes/ssr": 1, "components": 1, "data": 1, "default": 1, "define": 1, "description": 1, "dev/render-as-you-fetch/": 1, "directly": 1, "enable": 1, "for": 1, "freely": 1, "from": 2, "function": 1, "github-document": 1, "has": 1, "https": 2, "import": 2, "in": 2, "included": 1, "initial": 1, "is": 1, "isserver": 2, "it": 3, "jsx": 1, "lazy": 1, "let": 1, "load": 1, "loads": 1, "mdx": 1, "of": 1, "on": 1, "optimization": 2, "option": 1, "or": 1, "page": 1, "parallel": 1, "passing": 1, "patterns": 1, "performance": 3, "preload": 2, "preloading": 1, "provides": 1, "render-as-you-fetch": 2, "rendering": 4, "req": 1, "resources": 2, "router": 6, "routes": 1, "seo": 3, "server": 4, "server-side": 1, "side": 1, "so": 1, "solid": 5, "solid-js/web": 1, "ssr": 4, "static": 1, "support": 1, "supports": 1, "suspense": 2, "tags": 1, "that": 1, "the": 6, "there": 1, "title": 1, "to": 4, "transitions": 1, "url": 2, "url=": 1, "use": 1, "use_cases": 1, "used": 1, "using": 1, "version": 1, "way": 1, "when": 1, "with": 2 }, "length": 144 }, { "id": "93a97046de6d9048eaccd31f", "doc_id": "8def3841cec7a878bcfed7d3", "title": "start-client", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/client/start-client.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/start-client.json", "content": "--- title: StartClient use_cases: 'client entry setup, app wrapper configuration, root component setup' tags: - client - entry - components - configuration version: '1.0' description: \u003e- StartClient component wraps your SolidStart application root. Essential for proper client-side initialization and mounting. --- `StartClient` is a component that wraps the application root. It can be passed to [`mount`](/solid-start/reference/client/start-client) in the [`entry-client.tsx`](/solid-start/reference/entrypoints/entry-client). ```tsx import { StartClient } from \"@solidjs/start/client\"; ```", "term_freq": { "---": 2, "//github": 1, "/solid-start/reference/client/start-client": 1, "/solid-start/reference/entrypoints/entry-client": 1, "\u003e-": 1, "@solidjs/start/client": 1, "and": 1, "app": 1, "application": 2, "be": 1, "can": 1, "client": 2, "client-side": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/client/start-client": 1, "component": 3, "components": 1, "configuration": 2, "description": 1, "entry": 2, "entry-client": 1, "essential": 1, "for": 1, "from": 1, "github-document": 1, "https": 1, "import": 1, "in": 1, "initialization": 1, "is": 1, "it": 1, "mdx": 1, "mount": 1, "mounting": 1, "passed": 1, "proper": 1, "root": 3, "setup": 2, "solidstart": 1, "start-client": 1, "startclient": 4, "tags": 1, "that": 1, "the": 2, "title": 1, "to": 1, "tsx": 2, "use_cases": 1, "version": 1, "wrapper": 1, "wraps": 2, "your": 1 }, "length": 67 }, { "id": "6c68a3d1a58749d7ae5e4ce8", "doc_id": "7e2f3a9aaaf1256e38d18cd0", "title": "start-server", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/server/start-server.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/start-server.json", "content": "--- title: StartServer use_cases: \u003e- server bootstrap, document setup, html structure, ssr configuration, server initialization tags: - server - bootstrap - document - ssr - initialization - html version: '1.0' description: \u003e- Bootstrap SolidStart server with document components. Convert document functions to static HTML for server-side rendering setup. --- `StartServer` takes a function returning a document component and converts it to a static document which can be used in [`createHandler`](/solid-start/reference/server/create-handler) to bootstrap the server. ```tsx import { StartServer } from \"@solidjs/start/server\"; ``` ## Parameters | Property | Type | Description | | -------- | -------- | ----------------------------------------------------------------- | | document | Function | A function that returns the static document for your application. |", "term_freq": { "##": 1, "---": 2, "--------": 2, "-----------------------------------------------------------------": 1, "//github": 1, "/solid-start/reference/server/create-handler": 1, "\u003e-": 2, "@solidjs/start/server": 1, "and": 1, "application": 1, "be": 1, "bootstrap": 4, "can": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/server/start-server": 1, "component": 1, "components": 1, "configuration": 1, "convert": 1, "converts": 1, "createhandler": 1, "description": 2, "document": 8, "for": 2, "from": 1, "function": 3, "functions": 1, "github-document": 1, "html": 3, "https": 1, "import": 1, "in": 1, "initialization": 2, "it": 1, "mdx": 1, "parameters": 1, "property": 1, "rendering": 1, "returning": 1, "returns": 1, "server": 5, "server-side": 1, "setup": 2, "solidstart": 1, "ssr": 2, "start-server": 1, "startserver": 3, "static": 3, "structure": 1, "tags": 1, "takes": 1, "that": 1, "the": 2, "title": 1, "to": 3, "tsx": 1, "type": 1, "use_cases": 1, "used": 1, "version": 1, "which": 1, "with": 1, "your": 1 }, "length": 95 }, { "id": "bf4935dcdf0632bf62a013ee", "doc_id": "8aa0a0fb3d9a679b830dd57b", "title": "start-transition", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/start-transition.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/start-transition.json", "content": "--- title: startTransition use_cases: \u003e- async updates, performance optimization, non-blocking updates, transition control tags: - transitions - async - performance - updates - batching version: '1.0' description: \u003e- Start transitions in SolidJS without pending state tracking. Batch async updates for improved performance and smoother user interactions. --- ```ts import { startTransition } from \"solid-js\" function startTransition: (fn: () =\u003e void) =\u003e Promise\u003cvoid\u003e ``` Similar to `useTransition` except there is no associated pending state. This one can just be used directly to start the Transition.", "term_freq": { "---": 2, "//github": 1, "=\u003e": 2, "\u003e-": 2, "and": 1, "associated": 1, "async": 3, "batch": 1, "batching": 1, "be": 1, "can": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/start-transition": 1, "control": 1, "description": 1, "directly": 1, "except": 1, "fn": 1, "for": 1, "from": 1, "function": 1, "github-document": 1, "https": 1, "import": 1, "improved": 1, "in": 1, "interactions": 1, "is": 1, "just": 1, "mdx": 1, "no": 1, "non-blocking": 1, "one": 1, "optimization": 1, "pending": 2, "performance": 3, "promise\u003cvoid\u003e": 1, "similar": 1, "smoother": 1, "solid-js": 1, "solidjs": 1, "start": 2, "start-transition": 1, "starttransition": 3, "state": 2, "tags": 1, "the": 1, "there": 1, "this": 1, "title": 1, "to": 2, "tracking": 1, "transition": 2, "transitions": 2, "ts": 1, "updates": 4, "use_cases": 1, "used": 1, "user": 1, "usetransition": 1, "version": 1, "void": 1, "without": 1 }, "length": 80 }, { "id": "0a3e336b2723a149360832e1", "doc_id": "5fb83afd04111438f8d57162", "title": "State Management | Remix", "url": "https://v2.remix.run/docs/discussion/state-management", "type": "html", "source": "remix:does", "path": "devour_data/docs/state-management---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsState ManagementGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageUnderstanding State Management in ReactHow Remix Simplifies StateExamplesNetwork Related StateURL Search ParamsPersistent UI StateForm Validation and Action DataOn this pageUnderstanding State Management in ReactHow Remix Simplifies StateExamplesNetwork Related StateURL Search ParamsPersistent UI StateForm Validation and Action DataState Management State management in React typically involves maintaining a synchronized cache of server data on the client side. However, with Remix, most of the traditional caching solutions become redundant because of how it inherently handles data synchronization. Understanding State Management in React In a typical React context, when we refer to \"state management\", we're primarily discussing how we synchronize server state with the client. A more apt term could be \"cache management\" because the server is the source of truth and the client state is mostly functioning as a cache. Popular caching solutions in React include: Redux: A predictable state container for JavaScript apps. React Query: Hooks for fetching, caching, and updating asynchronous data in React. Apollo: A comprehensive state management library for JavaScript that integrates with GraphQL. In certain scenarios, using these libraries may be warranted. However, with Remix's unique server-focused approach, their utility becomes less prevalent. In fact, most Remix applications forgo them entirely. How Remix Simplifies State As discussed in Fullstack Data Flow Remix seamlessly bridges the gap between the backend and frontend via mechanisms like loaders, actions, and forms with automatic synchronization through revalidation. This offers developers the ability to directly use server state within components without managing a cache, the network communication, or data revalidation, making most client-side caching redundant. Here's why using typical React state patterns might be an antipattern in Remix: Network-related State: If your React state is managing anything related to the network —such as data from loaders, pending form submissions, or navigational states— it's likely that you're managing state that Remix already manages: useNavigation: This hook gives you access to navigation.state, navigation.formData, navigation.location, etc. useFetcher: This facilitates interaction with fetcher.state, fetcher.formData, fetcher.data etc. useLoaderData: Access the data for a route. useActionData: Access the data from the latest action. Storing Data in Remix: A lot of data that developers might be tempted to store in React state has a more natural home in Remix, such as: URL Search Params: Parameters within the URL that hold state. Cookies: Small pieces of data stored on the user's device. Server Sessions: Server-managed user sessions. Server Caches: Cached data on the server side for quicker retrieval. Performance Considerations: At times, client state is leveraged to avoid redundant data fetching. With Remix, you can use the Cache-Control headers within loaders, allowing you to tap into the browser's native cache. However, this approach has its limitations and should be used judiciously. It's usually more beneficial to optimize backend queries or implement a server cache. This is because such changes benefit all users and do away with the need for individual browser caches. As a developer transitioning to Remix, it's essential to recognize and embrace its inherent efficiencies rather than applying traditional React patterns. Remix offers a streamlined solution to state management leading to less code, fresh data, and no state synchronization bugs. Examples Network Related State For examples on using Remix's internal state to manage network-related state, refer to Pending UI. URL Search Params Consider a UI that lets the user customize between list view or detail view. Your instinct might be to reach for React state: export function List() { const [view, setView] = React.useState(\"list\"); return ( \u003cdiv\u003e \u003cdiv\u003e \u003cbutton onClick={() =\u003e setView(\"list\")}\u003e View as List \u003c/button\u003e \u003cbutton onClick={() =\u003e setView(\"details\")}\u003e View with Details \u003c/button\u003e \u003c/div\u003e {view === \"list\" ? \u003cListView /\u003e : \u003cDetailView /\u003e} \u003c/div\u003e ); } Now consider you want the URL to update when the user changes the view. Note the state synchronization: import { useNavigate, useSearchParams, } from \"@remix-run/react\"; export function List() { const navigate = useNavigate(); const [searchParams] = useSearchParams(); const [view, setView] = React.useState( searchParams.get(\"view\") || \"list\" ); return ( \u003cdiv\u003e \u003cdiv\u003e \u003cbutton onClick={() =\u003e { setView(\"list\"); navigate(`?view=list`); }} \u003e View as List \u003c/button\u003e \u003cbutton onClick={() =\u003e { setView(\"details\"); navigate(`?view=details`); }} \u003e View with Details \u003c/button\u003e \u003c/div\u003e {view === \"list\" ? \u003cListView /\u003e : \u003cDetailView /\u003e} \u003c/div\u003e ); } Instead of synchronizing state, you can read and set the state in the URL directly with boring old HTML forms. import { Form, useSearchParams } from \"@remix-run/react\"; export function List() { const [searchParams] = useSearchParams(); const view = searchParams.get(\"view\") || \"list\"; return ( \u003cdiv\u003e \u003cForm\u003e \u003cbutton name=\"view\" value=\"list\"\u003e View as List \u003c/button\u003e \u003cbutton name=\"view\" value=\"details\"\u003e View with Details \u003c/button\u003e \u003c/Form\u003e {view === \"list\" ? \u003cListView /\u003e : \u003cDetailView /\u003e} \u003c/div\u003e ); } Persistent UI State Consider a UI that toggles a sidebar's visibility. We have three ways to handle the state: React state Browser local storage Cookies In this discussion, we'll break down the trade-offs associated with each method. React State React state provides a simple solution for temporary state storage. Pros: Simple: Easy to implement and understand. Encapsulated: State is scoped to the component. Cons: Transient: Doesn't survive page refreshes, returning to the page later, or unmounting and remounting the component. Implementation: function Sidebar({ children }) { const [isOpen, setIsOpen] = React.useState(false); return ( \u003cdiv\u003e \u003cbutton onClick={() =\u003e setIsOpen((open) =\u003e !open)}\u003e {isOpen ? \"Close\" : \"Open\"} \u003c/button\u003e \u003caside hidden={!isOpen}\u003e{children}\u003c/aside\u003e \u003c/div\u003e ); } Local Storage To persist state beyond the component lifecycle, browser local storage is a step-up. Pros: Persistent: Maintains state across page refreshes and component mounts/unmounts. Encapsulated: State is scoped to the component. Cons: Requires Synchronization: React components must sync up with local storage to initialize and save the current state. Server Rendering Limitation: The window and localStorage objects are not accessible during server-side rendering, so state must be initialized in the browser with an effect. UI Flickering: On initial page loads, the state in local storage may not match what was rendered by the server and the UI will flicker when JavaScript loads. Implementation: function Sidebar({ children }) { const [isOpen, setIsOpen] = React.useState(false); // synchronize initially useLayoutEffect(() =\u003e { const isOpen = window.localStorage.getItem(\"sidebar\"); setIsOpen(isOpen); }, []); // synchronize on change useEffect(() =\u003e { window.localStorage.setItem(\"sidebar\", isOpen); }, [isOpen]); return ( \u003cdiv\u003e \u003cbutton onClick={() =\u003e setIsOpen((open) =\u003e !open)}\u003e {isOpen ? \"Close\" : \"Open\"} \u003c/button\u003e \u003caside hidden={!isOpen}\u003e{children}\u003c/aside\u003e \u003c/div\u003e ); } In this approach, state must be initialized within an effect. This is crucial to avoid complications during server-side rendering. Directly initializing the React state from localStorage will cause errors since window.localStorage is unavailable during server rendering. Furthermore, even if it were accessible, it wouldn't mirror the user's browser local storage. function Sidebar() { const [isOpen, setIsOpen] = React.useState( // error: window is not defined window.localStorage.getItem(\"sidebar\") ); // ... } By initializing the state within an effect, there's potential for a mismatch between the server-rendered state and the state stored in local storage. This discrepancy will lead to brief UI flickering shortly after the page renders and should be avoided. Cookies Cookies offer a comprehensive solution for this use case. However, this method introduces added preliminary setup before making the state accessible within the component. Pros: Server Rendering: State is available on the server for rendering and even for server actions. Single Source of Truth: Eliminates state synchronization hassles. Persistence: Maintains state across page loads and component mounts/unmounts. State can even persist across devices if you switch to a database-backed session. Progressive Enhancement: Functions even before JavaScript loads. Cons: Boilerplate: Requires more code because of the network. Exposed: The state is not encapsulated to a single component, other parts of the app must be aware of the cookie. Implementation: First, we'll need to create a cookie object: import { createCookie } from \"@remix-run/node\"; export const prefs = createCookie(\"prefs\"); Next we set up the server action and loader to read and write the cookie: import type { ActionFunctionArgs, LoaderFunctionArgs, } from \"@remix-run/node\"; // or cloudflare/deno import { json } from \"@remix-run/node\"; // or cloudflare/deno import { prefs } from \"./prefs-cookie\"; // read the state from the cookie export async function loader({ request, }: LoaderFunctionArgs) { const cookieHeader = request.headers.get(\"Cookie\"); const cookie = (await prefs.parse(cookieHeader)) || {}; return json({ sidebarIsOpen: cookie.sidebarIsOpen }); } // write the state to the cookie export async function action({ request, }: ActionFunctionArgs) { const cookieHeader = request.headers.get(\"Cookie\"); const cookie = (await prefs.parse(cookieHeader)) || {}; const formData = await request.formData(); const isOpen = formData.get(\"sidebar\") === \"open\"; cookie.sidebarIsOpen = isOpen; return json(isOpen, { headers: { \"Set-Cookie\": await prefs.serialize(cookie), }, }); } After the server code is set up, we can use the cookie state in our UI: function Sidebar({ children }) { const fetcher = useFetcher(); let { sidebarIsOpen } = useLoaderData\u003ctypeof loader\u003e(); // use optimistic UI to immediately change the UI state if (fetcher.formData?.has(\"sidebar\")) { sidebarIsOpen = fetcher.formData.get(\"sidebar\") === \"open\"; } return ( \u003cdiv\u003e \u003cfetcher.Form method=\"post\"\u003e \u003cbutton name=\"sidebar\" value={sidebarIsOpen ? \"closed\" : \"open\"} \u003e {sidebarIsOpen ? \"Close\" : \"Open\"} \u003c/button\u003e \u003c/fetcher.Form\u003e \u003caside hidden={!sidebarIsOpen}\u003e{children}\u003c/aside\u003e \u003c/div\u003e ); } While this is certainly more code that touches more of the application to account for the network requests and responses, the UX is greatly improved. Additionally, state comes from a single source of truth without any state synchronization required. In summary, each of the discussed methods offers a unique set of benefits and challenges: React state: Offers simple but transient state management. Local Storage: Provides persistence but with synchronization requirements and UI flickering. Cookies: Delivers robust, persistent state management at the cost of added boilerplate. None of these are wrong, but if you want to persist the state across visits, cookies offer the best user experience. Form Validation and Action Data Client-side validation can augment the user experience, but similar enhancements can be achieved by leaning more towards server-side processing and letting it handle the complexities. The following example illustrates the inherent complexities of managing network state, coordinating state from the server, and implementing validation redundantly on both the client and server sides. It's just for illustration, so forgive any obvious bugs or problems you find. export function Signup() { // A multitude of React State declarations const [isSubmitting, setIsSubmitting] = React.useState(false); const [userName, setUserName] = React.useState(\"\"); const [userNameError, setUserNameError] = React.useState(null); const [password, setPassword] = React.useState(null); const [passwordError, setPasswordError] = React.useState(\"\"); // Replicating server-side logic in the client function validateForm() { setUserNameError(null); setPasswordError(null); const errors = validateSignupForm(userName, password); if (errors) { if (errors.userName) { setUserNameError(errors.userName); } if (errors.password) { setPasswordError(errors.password); } } return Boolean(errors); } // Manual network interaction handling async function handleSubmit() { if (validateForm()) { setSubmitting(true); const res = await postJSON(\"/api/signup\", { userName, password, }); const json = await res.json(); setIsSubmitting(false); // Server state synchronization to the client if (json.errors) { if (json.errors.userName) { setUserNameError(json.errors.userName); } if (json.errors.password) { setPasswordError(json.errors.password); } } } } return ( \u003cform onSubmit={(event) =\u003e { event.preventDefault(); handleSubmit(); }} \u003e \u003cp\u003e \u003cinput type=\"text\" name=\"username\" value={userName} onChange={() =\u003e { // Synchronizing form state for the fetch setUserName(event.target.value); }} /\u003e {userNameError ? \u003ci\u003e{userNameError}\u003c/i\u003e : null} \u003c/p\u003e \u003cp\u003e \u003cinput type=\"password\" name=\"password\" onChange={(event) =\u003e { // Synchronizing form state for the fetch setPassword(event.target.value); }} /\u003e {passwordError ? \u003ci\u003e{passwordError}\u003c/i\u003e : null} \u003c/p\u003e \u003cbutton disabled={isSubmitting} type=\"submit\"\u003e Sign Up \u003c/button\u003e {isSubmitting ? \u003cBusyIndicator /\u003e : null} \u003c/form\u003e ); } The backend endpoint, /api/signup, also performs validation and sends error . Note that some essential validation, like detecting duplicate usernames, can only be done server-side using information the client doesn't have access to. export async function signupHandler(request: Request) { const errors = await validateSignupRequest(request); if (errors) { return json({ ok: false, errors: errors }); } await signupUser(request); return json({ ok: true, errors: null }); } Now, let's contrast this with a Remix-based implementation. The action remains consistent, but the component is vastly simplified due to the direct utilization of server state via useActionData, and leveraging the network state that Remix inherently manages. import type { ActionFunctionArgs } from \"@remix-run/node\"; // or cloudflare/deno import { json } from \"@remix-run/node\"; // or cloudflare/deno import { useActionData, useNavigation, } from \"@remix-run/react\"; export async function action({ request, }: ActionFunctionArgs) { const errors = await validateSignupRequest(request); if (errors) { return json({ ok: false, errors: errors }); } await signupUser(request); return json({ ok: true, errors: null }); } export function Signup() { const navigation = useNavigation(); const actionData = useActionData\u003ctypeof action\u003e(); const userNameError = actionData?.errors?.userName; const passwordError = actionData?.errors?.password; const isSubmitting = navigation.formAction === \"/signup\"; return ( \u003cForm method=\"post\"\u003e \u003cp\u003e \u003cinput type=\"text\" name=\"username\" /\u003e {userNameError ? \u003ci\u003e{userNameError}\u003c/i\u003e : null} \u003c/p\u003e \u003cp\u003e \u003cinput type=\"password\" name=\"password\" /\u003e {passwordError ? \u003ci\u003e{passwordError}\u003c/i\u003e : null} \u003c/p\u003e \u003cbutton disabled={isSubmitting} type=\"submit\"\u003e Sign Up \u003c/button\u003e {isSubmitting ? \u003cBusyIndicator /\u003e : null} \u003c/Form\u003e ); } The extensive state management from our previous example is distilled into just three code lines. We eliminate the necessity for React state, change event listeners, submit handlers, and state management libraries for such network interactions. Direct access to the server state is made possible through useActionData, and network state through useNavigation (or useFetcher). As a bonus party trick, the form is functional even before JavaScript loads. Instead of Remix managing the network operations, the default browser behaviors step in. If you ever find yourself entangled in managing and synchronizing state for network operations, Remix likely offers a more elegant solution.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_985\\\":-5,\\\"_986\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":984},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"docs/discussion/state-management.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"state-management\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#state-management\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eState Management\\u003c/h1\\u003e\\\\n\\u003cp\\u003eState management in React typically involves maintaining a synchronized cache of server data on the client side. However, with Remix, most of the traditional caching solutions become redundant because of how it inherently handles data synchronization.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"understanding-state-management-in-react\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#understanding-state-management-in-react\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUnderstanding State Management in React\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIn a typical React context, when we refer to \\\\\\\"state management\\\\\\\", we're primarily discussing how we synchronize server state with the client. A more apt term could be \\\\\\\"cache management\\\\\\\" because the server is the source of truth and the client state is mostly functioning as a cache.\\u003c/p\\u003e\\\\n\\u003cp\\u003ePopular caching solutions in React include:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eRedux:\\u003c/strong\\u003e A predictable state container for JavaScript apps.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eReact Query:\\u003c/strong\\u003e Hooks for fetching, caching, and updating asynchronous data in React.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eApollo:\\u003c/strong\\u003e A comprehensive state management library for JavaScript that integrates with GraphQL.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eIn certain scenarios, using these libraries may be warranted. However, with Remix's unique server-focused approach, their utility becomes less prevalent. In fact, most Remix applications forgo them entirely.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"how-remix-simplifies-state\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#how-remix-simplifies-state\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eHow Remix Simplifies State\\u003c/h2\\u003e\\\\n\\u003cp\\u003eAs discussed in \\u003ca href=\\\\\\\"./data-flow\\\\\\\"\\u003eFullstack Data Flow\\u003c/a\\u003e Remix seamlessly bridges the gap between the backend and frontend via mechanisms like loaders, actions, and forms with automatic synchronization through revalidation. This offers developers the ability to directly use server state within components without managing a cache, the network communication, or data revalidation, making most client-side caching redundant.\\u003c/p\\u003e\\\\n\\u003cp\\u003eHere's why using typical React state patterns might be an antipattern in Remix:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eNetwork-related State:\\u003c/strong\\u003e If your React state is managing anything related to the network —such as data from loaders, pending form submissions, or navigational states— it's likely that you're managing state that Remix already manages:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003e\\u003ca href=\\\\\\\"../hooks/use-navigation\\\\\\\"\\u003e\\u003ccode\\u003euseNavigation\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/strong\\u003e: This hook gives you access to \\u003ccode\\u003enavigation.state\\u003c/code\\u003e, \\u003ccode\\u003enavigation.formData\\u003c/code\\u003e, \\u003ccode\\u003enavigation.location\\u003c/code\\u003e, etc.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003e\\u003ca href=\\\\\\\"../hooks/use-fetcher\\\\\\\"\\u003e\\u003ccode\\u003euseFetcher\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/strong\\u003e: This facilitates interaction with \\u003ccode\\u003efetcher.state\\u003c/code\\u003e, \\u003ccode\\u003efetcher.formData\\u003c/code\\u003e, \\u003ccode\\u003efetcher.data\\u003c/code\\u003e etc.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003e\\u003ca href=\\\\\\\"../hooks/use-loader-data\\\\\\\"\\u003e\\u003ccode\\u003euseLoaderData\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/strong\\u003e: Access the data for a route.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003e\\u003ca href=\\\\\\\"../hooks/use-action-data\\\\\\\"\\u003e\\u003ccode\\u003euseActionData\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/strong\\u003e: Access the data from the latest action.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eStoring Data in Remix:\\u003c/strong\\u003e A lot of data that developers might be tempted to store in React state has a more natural home in Remix, such as:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eURL Search Params:\\u003c/strong\\u003e Parameters within the URL that hold state.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eCookies:\\u003c/strong\\u003e Small pieces of data stored on the user's device.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eServer Sessions:\\u003c/strong\\u003e Server-managed user sessions.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eServer Caches:\\u003c/strong\\u003e Cached data on the server side for quicker retrieval.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ePerformance Considerations:\\u003c/strong\\u003e At times, client state is leveraged to avoid redundant data fetching. With Remix, you can use the \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control\\\\\\\"\\u003e\\u003ccode\\u003eCache-Control\\u003c/code\\u003e\\u003c/a\\u003e headers within \\u003ccode\\u003eloader\\u003c/code\\u003es, allowing you to tap into the browser's native cache. However, this approach has its limitations and should be used judiciously. It's usually more beneficial to optimize backend queries or implement a server cache. This is because such changes benefit all users and do away with the need for individual browser caches.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eAs a developer transitioning to Remix, it's essential to recognize and embrace its inherent efficiencies rather than applying traditional React patterns. Remix offers a streamlined solution to state management leading to less code, fresh data, and no state synchronization bugs.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"examples\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#examples\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eExamples\\u003c/h2\\u003e\\\\n\\u003ch3 id=\\\\\\\"network-related-state\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#network-related-state\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNetwork Related State\\u003c/h3\\u003e\\\\n\\u003cp\\u003eFor examples on using Remix's internal state to manage network-related state, refer to \\u003ca href=\\\\\\\"./pending-ui\\\\\\\"\\u003ePending UI\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"url-search-params\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#url-search-params\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eURL Search Params\\u003c/h3\\u003e\\\\n\\u003cp\\u003eConsider a UI that lets the user customize between list view or detail view. Your instinct might be to reach for React state:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eList\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eview\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esetView\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eReact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseState\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003elist\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonClick\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetView\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003elist\\u003c/span\\u003e\\\\\\\")\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e View as List\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonClick\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetView\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edetails\\u003c/span\\u003e\\\\\\\")\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e View with Details\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eview\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003elist\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eListView\\u003c/span\\u003e /\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eDetailView\\u003c/span\\u003e /\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNow consider you want the URL to update when the user changes the view. Note the state synchronization:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseNavigate\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseSearchParams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eList\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigate\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esearchParams\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseSearchParams\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eview\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esetView\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eReact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseState\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esearchParams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eview\\u003c/span\\u003e\\\\\\\") \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e||\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003elist\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonClick\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetView\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003elist\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003enavigate\\u003c/span\\u003e(`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e?view=list\\u003c/span\\u003e`);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e View as List\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonClick\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetView\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edetails\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003enavigate\\u003c/span\\u003e(`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e?view=details\\u003c/span\\u003e`);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e View with Details\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eview\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003elist\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eListView\\u003c/span\\u003e /\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eDetailView\\u003c/span\\u003e /\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eInstead of synchronizing state, you can read and set the state in the URL directly with boring old HTML forms.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseSearchParams\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eList\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esearchParams\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseSearchParams\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eview\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esearchParams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eview\\u003c/span\\u003e\\\\\\\") \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e||\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003elist\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eview\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003elist\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e View as List\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eview\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edetails\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e View with Details\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eview\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003elist\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eListView\\u003c/span\\u003e /\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eDetailView\\u003c/span\\u003e /\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3 id=\\\\\\\"persistent-ui-state\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#persistent-ui-state\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ePersistent UI State\\u003c/h3\\u003e\\\\n\\u003cp\\u003eConsider a UI that toggles a sidebar's visibility. We have three ways to handle the state:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eReact state\\u003c/li\\u003e\\\\n\\u003cli\\u003eBrowser local storage\\u003c/li\\u003e\\\\n\\u003cli\\u003eCookies\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eIn this discussion, we'll break down the trade-offs associated with each method.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"react-state\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#react-state\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eReact State\\u003c/h4\\u003e\\\\n\\u003cp\\u003eReact state provides a simple solution for temporary state storage.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ePros\\u003c/strong\\u003e:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eSimple\\u003c/strong\\u003e: Easy to implement and understand.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eEncapsulated\\u003c/strong\\u003e: State is scoped to the component.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eCons\\u003c/strong\\u003e:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eTransient\\u003c/strong\\u003e: Doesn't survive page refreshes, returning to the page later, or unmounting and remounting the component.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eImplementation\\u003c/strong\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eSidebar\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisOpen\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esetIsOpen\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eReact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseState\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonClick\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetIsOpen\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eopen\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eopen\\u003c/span\\u003e)\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisOpen\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eClose\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eOpen\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003easide\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehidden\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisOpen\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003easide\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4 id=\\\\\\\"local-storage\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#local-storage\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eLocal Storage\\u003c/h4\\u003e\\\\n\\u003cp\\u003eTo persist state beyond the component lifecycle, browser local storage is a step-up.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ePros\\u003c/strong\\u003e:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003ePersistent\\u003c/strong\\u003e: Maintains state across page refreshes and component mounts/unmounts.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eEncapsulated\\u003c/strong\\u003e: State is scoped to the component.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eCons\\u003c/strong\\u003e:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eRequires Synchronization\\u003c/strong\\u003e: React components must sync up with local storage to initialize and save the current state.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eServer Rendering Limitation\\u003c/strong\\u003e: The \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/Window/window\\\\\\\"\\u003e\\u003ccode\\u003ewindow\\u003c/code\\u003e\\u003c/a\\u003e and \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\\\\\\\"\\u003e\\u003ccode\\u003elocalStorage\\u003c/code\\u003e\\u003c/a\\u003e objects are not accessible during server-side rendering, so state must be initialized in the browser with an effect.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eUI Flickering\\u003c/strong\\u003e: On initial page loads, the state in local storage may not match what was rendered by the server and the UI will flicker when JavaScript loads.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eImplementation\\u003c/strong\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eSidebar\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisOpen\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esetIsOpen\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eReact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseState\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// synchronize initially\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLayoutEffect\\u003c/span\\u003e(() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisOpen\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ewindow\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elocalStorage\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetItem\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetIsOpen\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisOpen\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e }, []);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// synchronize on change\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseEffect\\u003c/span\\u003e(() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ewindow\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elocalStorage\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetItem\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisOpen\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e }, [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisOpen\\u003c/span\\u003e]);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonClick\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetIsOpen\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eopen\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eopen\\u003c/span\\u003e)\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisOpen\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eClose\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eOpen\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003easide\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehidden\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisOpen\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003easide\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eIn this approach, state must be initialized within an effect. This is crucial to avoid complications during server-side rendering. Directly initializing the React state from \\u003ccode\\u003elocalStorage\\u003c/code\\u003e will cause errors since \\u003ccode\\u003ewindow.localStorage\\u003c/code\\u003e is unavailable during server rendering. Furthermore, even if it were accessible, it wouldn't mirror the user's browser local storage.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eSidebar\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisOpen\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esetIsOpen\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eReact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseState\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// error: window is not defined\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ewindow\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elocalStorage\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetItem\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\")\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ...\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eBy initializing the state within an effect, there's potential for a mismatch between the server-rendered state and the state stored in local storage. This discrepancy will lead to brief UI flickering shortly after the page renders and should be avoided.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"cookies\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#cookies\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eCookies\\u003c/h4\\u003e\\\\n\\u003cp\\u003eCookies offer a comprehensive solution for this use case. However, this method introduces added preliminary setup before making the state accessible within the component.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ePros\\u003c/strong\\u003e:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eServer Rendering\\u003c/strong\\u003e: State is available on the server for rendering and even for server actions.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eSingle Source of Truth\\u003c/strong\\u003e: Eliminates state synchronization hassles.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003ePersistence\\u003c/strong\\u003e: Maintains state across page loads and component mounts/unmounts. State can even persist across devices if you switch to a database-backed session.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eProgressive Enhancement\\u003c/strong\\u003e: Functions even before JavaScript loads.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eCons\\u003c/strong\\u003e:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eBoilerplate\\u003c/strong\\u003e: Requires more code because of the network.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eExposed\\u003c/strong\\u003e: The state is not encapsulated to a single component, other parts of the app must be aware of the cookie.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eImplementation\\u003c/strong\\u003e:\\u003c/p\\u003e\\\\n\\u003cp\\u003eFirst, we'll need to create a cookie object:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecreateCookie\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprefs\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateCookie\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eprefs\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNext we set up the server action and loader to read and write the cookie:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprefs\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./prefs-cookie\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// read the state from the cookie\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecookieHeader\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eheaders\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eCookie\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecookie\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprefs\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eparse\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecookieHeader\\u003c/span\\u003e)) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e||\\u003c/span\\u003e {};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({ sidebarIsOpen: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecookie\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esidebarIsOpen\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// write the state to the cookie\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecookieHeader\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eheaders\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eCookie\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecookie\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprefs\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eparse\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecookieHeader\\u003c/span\\u003e)) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e||\\u003c/span\\u003e {};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisOpen\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\") \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eopen\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecookie\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esidebarIsOpen\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisOpen\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisOpen\\u003c/span\\u003e, {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e headers: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eSet-Cookie\\u003c/span\\u003e\\\\\\\": \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprefs\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eserialize\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecookie\\u003c/span\\u003e),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eAfter the server code is set up, we can use the cookie state in our UI:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eSidebar\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003elet\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esidebarIsOpen\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// use optimistic UI to immediately change the UI state\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e?.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehas\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\")) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esidebarIsOpen\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\") \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eopen\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esidebarIsOpen\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eclosed\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eopen\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esidebarIsOpen\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eClose\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eOpen\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003easide\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehidden\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esidebarIsOpen\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003echildren\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003easide\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eWhile this is certainly more code that touches more of the application to account for the network requests and responses, the UX is greatly improved. Additionally, state comes from a single source of truth without any state synchronization required.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIn summary, each of the discussed methods offers a unique set of benefits and challenges:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eReact state\\u003c/strong\\u003e: Offers simple but transient state management.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eLocal Storage\\u003c/strong\\u003e: Provides persistence but with synchronization requirements and UI flickering.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eCookies\\u003c/strong\\u003e: Delivers robust, persistent state management at the cost of added boilerplate.\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eNone of these are wrong, but if you want to persist the state across visits, cookies offer the best user experience.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"form-validation-and-action-data\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#form-validation-and-action-data\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eForm Validation and Action Data\\u003c/h3\\u003e\\\\n\\u003cp\\u003eClient-side validation can augment the user experience, but similar enhancements can be achieved by leaning more towards server-side processing and letting it handle the complexities.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe following example illustrates the inherent complexities of managing network state, coordinating state from the server, and implementing validation redundantly on both the client and server sides. It's just for illustration, so forgive any obvious bugs or problems you find.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eSignup\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// A multitude of React State declarations\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisSubmitting\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esetIsSubmitting\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eReact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseState\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserName\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esetUserName\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eReact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseState\\u003c/span\\u003e(\\\\\\\"\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserNameError\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esetUserNameError\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eReact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseState\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epassword\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esetPassword\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eReact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseState\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epasswordError\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esetPasswordError\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eReact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseState\\u003c/span\\u003e(\\\\\\\"\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// Replicating server-side logic in the client\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalidateForm\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetUserNameError\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetPasswordError\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalidateSignupForm\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserName\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epassword\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserName\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetUserNameError\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserName\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epassword\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetPasswordError\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epassword\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eBoolean\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// Manual network interaction handling\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehandleSubmit\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalidateForm\\u003c/span\\u003e()) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetSubmitting\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eres\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003epostJSON\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/api/signup\\u003c/span\\u003e\\\\\\\", {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserName\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epassword\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eres\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetIsSubmitting\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// Server state synchronization to the client\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eerrors\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserName\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetUserNameError\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eerrors\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserName\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eerrors\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epassword\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetPasswordError\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eerrors\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epassword\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"50\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"51\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"52\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"53\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"54\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eform\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"55\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonSubmit\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"56\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003epreventDefault\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"57\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehandleSubmit\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"58\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"59\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"60\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"61\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"62\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etext\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"63\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eusername\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"64\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"65\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonChange\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"66\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// Synchronizing form state for the fetch\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"67\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetUserName\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etarget\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evalue\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"68\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"69\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"70\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserNameError\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ei\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserNameError\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ei\\u003c/span\\u003e\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"71\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"72\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"73\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"74\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"75\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epassword\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"76\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epassword\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"77\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonChange\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"78\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// Synchronizing form state for the fetch\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"79\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetPassword\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etarget\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evalue\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"80\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"81\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"82\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epasswordError\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ei\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epasswordError\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ei\\u003c/span\\u003e\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"83\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"84\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"85\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edisabled\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisSubmitting\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"86\\\\\\\"\\u003e Sign Up\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"87\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"88\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"89\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisSubmitting\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eBusyIndicator\\u003c/span\\u003e /\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"90\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eform\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"91\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"92\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThe backend endpoint, \\u003ccode\\u003e/api/signup\\u003c/code\\u003e, also performs validation and sends error . Note that some essential validation, like detecting duplicate usernames, can only be done server-side using information the client doesn't have access to.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esignupHandler\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eRequest\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalidateSignupRequest\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({ ok: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e, errors: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esignupUser\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({ ok: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e, errors: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNow, let's contrast this with a Remix-based implementation. The action remains consistent, but the component is vastly simplified due to the direct utilization of server state via \\u003ca href=\\\\\\\"../hooks/use-action-data\\\\\\\"\\u003e\\u003ccode\\u003euseActionData\\u003c/code\\u003e\\u003c/a\\u003e, and leveraging the network state that Remix inherently manages.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/signup.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/signup.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ejson\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\"; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseActionData\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalidateSignupRequest\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({ ok: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e, errors: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrors\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esignupUser\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejson\\u003c/span\\u003e({ ok: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e, errors: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eSignup\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eactionData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseActionData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserNameError\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eactionData\\u003c/span\\u003e?.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eerrors\\u003c/span\\u003e?.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserName\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epasswordError\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eactionData\\u003c/span\\u003e?.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eerrors\\u003c/span\\u003e?.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epassword\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisSubmitting\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformAction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/signup\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etext\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eusername\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserNameError\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ei\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euserNameError\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ei\\u003c/span\\u003e\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epassword\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epassword\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epasswordError\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ei\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epasswordError\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ei\\u003c/span\\u003e\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edisabled\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisSubmitting\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e Sign Up\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisSubmitting\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eBusyIndicator\\u003c/span\\u003e /\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThe extensive state management from our previous example is distilled into just three code lines. We eliminate the necessity for React state, change event listeners, submit handlers, and state management libraries for such network interactions.\\u003c/p\\u003e\\\\n\\u003cp\\u003eDirect access to the server state is made possible through \\u003ccode\\u003euseActionData\\u003c/code\\u003e, and network state through \\u003ccode\\u003euseNavigation\\u003c/code\\u003e (or \\u003ccode\\u003euseFetcher\\u003c/code\\u003e).\\u003c/p\\u003e\\\\n\\u003cp\\u003eAs a bonus party trick, the form is functional even before JavaScript loads. Instead of Remix managing the network operations, the default browser behaviors step in.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you ever find yourself entangled in managing and synchronizing state for network operations, Remix likely offers a more elegant solution.\\u003c/p\\u003e\\\",\\\"docs/discussion/state-management\\\",\\\"headings\\\",[960,965,968,971,975,978,981],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Understanding State Management in React\\\",\\\"understanding-state-management-in-react\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"How Remix Simplifies State\\\",\\\"how-remix-simplifies-state\\\",{\\\"_961\\\":962,\\\"_955\\\":969,\\\"_24\\\":970},\\\"Examples\\\",\\\"examples\\\",{\\\"_961\\\":972,\\\"_955\\\":973,\\\"_24\\\":974},\\\"h3\\\",\\\"Network Related State\\\",\\\"network-related-state\\\",{\\\"_961\\\":972,\\\"_955\\\":976,\\\"_24\\\":977},\\\"URL Search Params\\\",\\\"url-search-params\\\",{\\\"_961\\\":972,\\\"_955\\\":979,\\\"_24\\\":980},\\\"Persistent UI State\\\",\\\"persistent-ui-state\\\",{\\\"_961\\\":972,\\\"_955\\\":982,\\\"_24\\\":983},\\\"Form Validation and Action Data\\\",\\\"form-validation-and-action-data\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#cookies\\\\\\": 1, "#examples\\\\\\": 1, "#form-validation-and-action-data\\\\\\": 1, "#how-remix-simplifies-state\\\\\\": 1, "#local-storage\\\\\\": 1, "#network-related-state\\\\\\": 1, "#persistent-ui-state\\\\\\": 1, "#react-state\\\\\\": 1, "#state-management\\\\\\": 1, "#understanding-state-management-in-react\\\\\\": 1, "#url-search-params\\\\\\": 1, "$\\": 1, "$rc": 3, "--base03": 17, "--base05": 12, "--base08": 245, "--base09": 21, "--base0a": 52, "--base0b": 62, "--base0d": 161, "--base0e": 186, "--base0f": 70, "-1\\\\\\": 11, "-5": 2, "/$": 1, "//": 17, "//developer": 3, "//v2": 2, "/\u003e": 12, "/\\u003cspan": 34, "/\\u003e": 5, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "/\\u003e\\u003cspan": 3, "/api/signup": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/data-flow\\\\\\": 1, "/hooks/use-action-data\\\\\\": 2, "/hooks/use-fetcher\\\\\\": 1, "/hooks/use-loader-data\\\\\\": 1, "/hooks/use-navigation\\\\\\": 1, "/pending-ui\\\\\\": 1, "/prefs-cookie": 1, "/prefs-cookie\\u003c/span\\u003e\\\\\\": 1, "/signup": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 9, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 9, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 8, "130": 1, "131": 2, "132": 3, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 8, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 8, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 8, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 8, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 7, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 7, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 7, "1\\\\\\": 12, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 7, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 6, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 6, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 6, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 5, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 4, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 4, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 4, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "28\\\\\\": 4, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "29\\\\\\": 4, "2\\\\\\": 12, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30\\\\\\": 4, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "31\\\\\\": 4, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "32\\\\\\": 4, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "33\\\\\\": 4, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "34\\\\\\": 4, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "35\\\\\\": 3, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "36\\\\\\": 3, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "37\\\\\\": 2, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "38\\\\\\": 2, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "39\\\\\\": 2, "3\\\\\\": 11, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "40\\\\\\": 2, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "41\\\\\\": 2, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "42\\\\\\": 2, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "43\\\\\\": 2, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "44\\\\\\": 2, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "45\\\\\\": 2, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "46\\\\\\": 2, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "47\\\\\\": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "48\\\\\\": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "49\\\\\\": 1, "4\\\\\\": 11, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "50\\\\\\": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "51\\\\\\": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "52\\\\\\": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "53\\\\\\": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "54\\\\\\": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "55\\\\\\": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "56\\\\\\": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "57\\\\\\": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "58\\\\\\": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "59\\\\\\": 1, "5\\\\\\": 11, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "60\\\\\\": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "61\\\\\\": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "62\\\\\\": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "63\\\\\\": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "64\\\\\\": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "65\\\\\\": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "66\\\\\\": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "67\\\\\\": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "68\\\\\\": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "69\\\\\\": 1, "6\\\\\\": 11, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "70\\\\\\": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "71\\\\\\": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "72\\\\\\": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "73\\\\\\": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "74\\\\\\": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "75\\\\\\": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "76\\\\\\": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "77\\\\\\": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "78\\\\\\": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "79\\\\\\": 1, "7\\\\\\": 11, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "80\\\\\\": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "81\\\\\\": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "82\\\\\\": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "83\\\\\\": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "84\\\\\\": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "85\\\\\\": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "86\\\\\\": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "87\\\\\\": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "88\\\\\\": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "89\\\\\\": 1, "8\\\\\\": 11, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "90\\\\\\": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "91\\\\\\": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "92\\\\\\": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 3, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 4, "973": 1, "974": 1, "975": 1, "976": 1, "977": 1, "978": 1, "979": 1, "98": 1, "980": 1, "981": 1, "982": 1, "983": 1, "984": 1, "99": 1, "9\\\\\\": 9, "\u003c/aside\u003e": 3, "\u003c/button\u003e": 11, "\u003c/div\u003e": 8, "\u003c/fetcher": 1, "\u003c/form\u003e": 3, "\u003c/i\u003e": 4, "\u003c/p\u003e": 4, "\u003caside": 3, "\u003cbusyindicator": 2, "\u003cbutton": 11, "\u003cdetailview": 3, "\u003cdiv\u003e": 8, "\u003cfetcher": 1, "\u003cform": 2, "\u003cform\u003e": 1, "\u003ci\u003e": 4, "\u003cinput": 4, "\u003clistview": 3, "\u003cp\u003e": 4, "===": 7, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 14, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 7, "@remix-run/node\\": 1, "@remix-run/react": 3, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 902, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eafter": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eby": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ein": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003einstead": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enext": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enow": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethe": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ewhile": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 162, "\\n": 1, "\\u0026#x3c": 73, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eperformance": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003estoring": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003econs\\u003c/strong\\u003e": 3, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eimplementation\\u003c/strong\\u003e": 3, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003ein": 1, "\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003enone": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003e\\u003ca": 3, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eapollo": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003ecookies": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003ecookies\\u003c/strong\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eencapsulated\\u003c/strong\\u003e": 2, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eexposed\\u003c/strong\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003elocal": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003epersistence\\u003c/strong\\u003e": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eprogressive": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003ereact": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eserver": 3, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003esingle": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eui": 1, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eas": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 12, "\\u003c/p\\u003e\\\\n\\u003ch2": 3, "\\u003c/p\\u003e\\\\n\\u003ch3": 2, "\\u003c/p\\u003e\\\\n\\u003ch4": 2, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003enetwork-related": 1, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003ereact": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003epros\\u003c/strong\\u003e": 3, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eas": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003edirect": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efirst": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ehere": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eif": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ein": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003epopular": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003e\\u003ca": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eboilerplate\\u003c/strong\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003epersistent\\u003c/strong\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003ereact": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eredux": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003erequires": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eserver": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003esimple\\u003c/strong\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003etransient\\u003c/strong\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003cstrong\\u003eurl": 1, "\\u003c/span\\u003e": 41, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 20, "\\u003c/span\\u003e\\u0026#x3c": 7, "\\u003c/span\\u003e\\u003cspan": 31, "\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "\\u003c/span\\u003e\\u003e\\u003cspan": 3, "\\u003c/strong\\u003e": 10, "\\u003ca": 6, "\\u003ccode\\u003e/api/signup\\u003c/code\\u003e": 1, "\\u003ccode\\u003efetcher": 3, "\\u003ccode\\u003eloader\\u003c/code\\u003es": 1, "\\u003ccode\\u003elocalstorage\\u003c/code\\u003e": 1, "\\u003ccode\\u003enavigation": 3, "\\u003ccode\\u003euseactiondata\\u003c/code\\u003e": 1, "\\u003ccode\\u003eusefetcher\\u003c/code\\u003e": 1, "\\u003ccode\\u003eusenavigation\\u003c/code\\u003e": 1, "\\u003ccode\\u003ewindow": 1, "\\u003ch1": 1, "\\u003cspan": 645, "\\u003e": 372, "\\u003e//": 17, "\\u003e/api/signup\\u003c/span\\u003e\\\\\\": 1, "\\u003e/signup\\u003c/span\\u003e\\\\\\": 1, "\\u003e===\\u003c/span\\u003e": 6, "\\u003e=\\u003c/span\\u003e": 32, "\\u003e=\\u003c/span\\u003e\\\\\\": 17, "\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "\\u003e=\\u003c/span\\u003e\\u003cspan": 16, "\\u003e=\\u003e\\u003c/span\\u003e": 13, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 5, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 3, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 41, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ecookies\\u003c/h4\\u003e\\\\n\\u003cp\\u003ecookies": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eexamples\\u003c/h2\\u003e\\\\n\\u003ch3": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eform": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ehow": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003elocal": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003enetwork": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003epersistent": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ereact": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003estate": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eunderstanding": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eurl": 1, "\\u003e\\u003ca": 11, "\\u003e\\u003ccode\\u003e\\u003cspan": 12, "\\u003e\\u003ccode\\u003ecache-control\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003elocalstorage\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003euseactiondata\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003euseactiondata\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/strong\\u003e": 1, "\\u003e\\u003ccode\\u003eusefetcher\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/strong\\u003e": 1, "\\u003e\\u003ccode\\u003euseloaderdata\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/strong\\u003e": 1, "\\u003e\\u003ccode\\u003eusenavigation\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/strong\\u003e": 1, "\\u003e\\u003ccode\\u003ewindow\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003cpre": 12, "\\u003e\\u003cspan": 36, "\\u003eaction\\u003c/span\\u003e": 2, "\\u003eaction\\u003c/span\\u003e\\u003e": 1, "\\u003eactiondata\\u003c/span\\u003e": 3, "\\u003eactionfunctionargs\\u003c/span\\u003e": 4, "\\u003easide\\u003c/span\\u003e": 3, "\\u003easide\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003easync\\u003c/span\\u003e": 5, "\\u003eawait\\u003c/span\\u003e": 10, "\\u003eboolean\\u003c/span\\u003e": 1, "\\u003ebusyindicator\\u003c/span\\u003e": 2, "\\u003ebutton\\u003c/span\\u003e": 8, "\\u003ebutton\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 11, "\\u003echildren\\u003c/span\\u003e": 3, "\\u003echildren\\u003c/span\\u003e\\u003cspan": 3, "\\u003eclose\\u003c/span\\u003e\\\\\\": 3, "\\u003eclosed\\u003c/span\\u003e\\\\\\": 1, "\\u003econst\\u003c/span\\u003e": 33, "\\u003ecookie\\u003c/span\\u003e": 5, "\\u003ecookie\\u003c/span\\u003e\\\\\\": 2, "\\u003ecookieheader\\u003c/span\\u003e": 4, "\\u003ecreatecookie\\u003c/span\\u003e": 2, "\\u003edetails\\u003c/span\\u003e\\\\\\": 3, "\\u003edetailview\\u003c/span\\u003e": 3, "\\u003edisabled\\u003c/span\\u003e\\u003cspan": 2, "\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 16, "\\u003eerrors\\u003c/span\\u003e": 20, "\\u003eevent\\u003c/span\\u003e": 5, "\\u003eexport\\u003c/span\\u003e": 10, "\\u003efalse\\u003c/span\\u003e": 6, "\\u003efetcher": 2, "\\u003efetcher\\u003c/span\\u003e": 3, "\\u003eform\\u003c/span\\u003e": 2, "\\u003eform\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eform\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "\\u003eformaction\\u003c/span\\u003e": 1, "\\u003eformdata\\u003c/span\\u003e": 5, "\\u003efrom\\u003c/span\\u003e": 9, "\\u003efullstack": 1, "\\u003efunction\\u003c/span\\u003e": 15, "\\u003eget\\u003c/span\\u003e": 6, "\\u003egetitem\\u003c/span\\u003e": 2, "\\u003ehandlesubmit\\u003c/span\\u003e": 2, "\\u003ehas\\u003c/span\\u003e": 1, "\\u003eheaders\\u003c/span\\u003e": 2, "\\u003ehidden\\u003c/span\\u003e\\u003cspan": 3, "\\u003ei\\u003c/span\\u003e\\u003e": 4, "\\u003ei\\u003c/span\\u003e\\u003e\\u003cspan": 4, "\\u003eif\\u003c/span\\u003e": 10, "\\u003eimport\\u003c/span\\u003e": 9, "\\u003einput\\u003c/span\\u003e": 2, "\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003eisopen\\u003c/span\\u003e": 12, "\\u003eisopen\\u003c/span\\u003e\\u003cspan": 2, "\\u003eissubmitting\\u003c/span\\u003e": 4, "\\u003eissubmitting\\u003c/span\\u003e\\u003cspan": 2, "\\u003ejson\\u003c/span\\u003e": 15, "\\u003elet\\u003c/span\\u003e": 1, "\\u003elist\\u003c/span\\u003e": 3, "\\u003elist\\u003c/span\\u003e\\\\\\": 9, "\\u003elistview\\u003c/span\\u003e": 3, "\\u003eloader\\u003c/span\\u003e": 1, "\\u003eloader\\u003c/span\\u003e\\u003e": 1, "\\u003eloaderfunctionargs\\u003c/span\\u003e": 2, "\\u003elocalstorage\\u003c/span\\u003e": 3, "\\u003emethod\\u003c/span\\u003e\\u003cspan": 2, "\\u003ename\\u003c/span\\u003e\\u003cspan": 7, "\\u003enavigate\\u003c/span\\u003e": 3, "\\u003enavigation\\u003c/span\\u003e": 2, "\\u003enull\\u003c/span\\u003e": 6, "\\u003enull\\u003c/span\\u003e\\u003cspan": 6, "\\u003eonchange\\u003c/span\\u003e\\u003cspan": 2, "\\u003eonclick\\u003c/span\\u003e\\u003cspan": 6, "\\u003eonsubmit\\u003c/span\\u003e\\u003cspan": 1, "\\u003eopen\\u003c/span\\u003e": 4, "\\u003eopen\\u003c/span\\u003e\\\\\\": 6, "\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 8, "\\u003eparse\\u003c/span\\u003e": 2, "\\u003epassword\\u003c/span\\u003e": 8, "\\u003epassword\\u003c/span\\u003e\\\\\\": 4, "\\u003epassworderror\\u003c/span\\u003e": 4, "\\u003epassworderror\\u003c/span\\u003e\\u003cspan": 2, "\\u003epending": 1, "\\u003epost\\u003c/span\\u003e\\\\\\": 2, "\\u003epostjson\\u003c/span\\u003e": 1, "\\u003eprefs\\u003c/span\\u003e": 5, "\\u003eprefs\\u003c/span\\u003e\\\\\\": 1, "\\u003epreventdefault\\u003c/span\\u003e": 1, "\\u003ereact\\u003c/span\\u003e": 10, "\\u003erequest\\u003c/span\\u003e": 11, "\\u003erequest\\u003c/span\\u003e\\u003cspan": 1, "\\u003eres\\u003c/span\\u003e": 2, "\\u003ereturn\\u003c/span\\u003e": 15, "\\u003esearchparams\\u003c/span\\u003e": 4, "\\u003eserialize\\u003c/span\\u003e": 1, "\\u003eset-cookie\\u003c/span\\u003e\\\\\\": 1, "\\u003esetisopen\\u003c/span\\u003e": 6, "\\u003esetissubmitting\\u003c/span\\u003e": 2, "\\u003esetitem\\u003c/span\\u003e": 1, "\\u003esetpassword\\u003c/span\\u003e": 2, "\\u003esetpassworderror\\u003c/span\\u003e": 4, "\\u003esetsubmitting\\u003c/span\\u003e": 1, "\\u003esetusername\\u003c/span\\u003e": 2, "\\u003esetusernameerror\\u003c/span\\u003e": 4, "\\u003esetview\\u003c/span\\u003e": 6, "\\u003esidebar\\u003c/span\\u003e": 4, "\\u003esidebar\\u003c/span\\u003e\\\\\\": 7, "\\u003esidebarisopen\\u003c/span\\u003e": 6, "\\u003esidebarisopen\\u003c/span\\u003e\\u003cspan": 1, "\\u003esignup\\u003c/span\\u003e": 2, "\\u003esignuphandler\\u003c/span\\u003e": 1, "\\u003esignupuser\\u003c/span\\u003e": 2, "\\u003esubmit\\u003c/span\\u003e\\\\\\": 2, "\\u003etarget\\u003c/span\\u003e": 2, "\\u003etext\\u003c/span\\u003e\\\\\\": 2, "\\u003etrue\\u003c/span\\u003e": 3, "\\u003etype\\u003c/span\\u003e": 2, "\\u003etype\\u003c/span\\u003e\\u003cspan": 6, "\\u003etypeof\\u003c/span\\u003e": 2, "\\u003euseactiondata\\u003c/span\\u003e": 1, "\\u003euseactiondata\\u003c/span\\u003e\\u0026#x3c": 1, "\\u003euseeffect\\u003c/span\\u003e": 1, "\\u003eusefetcher\\u003c/span\\u003e": 1, "\\u003euselayouteffect\\u003c/span\\u003e": 1, "\\u003euseloaderdata\\u003c/span\\u003e\\u0026#x3c": 1, "\\u003eusenavigate\\u003c/span\\u003e": 2, "\\u003eusenavigation\\u003c/span\\u003e": 2, "\\u003eusername\\u003c/span\\u003e": 8, "\\u003eusername\\u003c/span\\u003e\\\\\\": 2, "\\u003eusername\\u003c/span\\u003e\\u003cspan": 1, "\\u003eusernameerror\\u003c/span\\u003e": 4, "\\u003eusernameerror\\u003c/span\\u003e\\u003cspan": 2, "\\u003eusesearchparams\\u003c/span\\u003e": 4, "\\u003eusestate\\u003c/span\\u003e": 10, "\\u003evalidateform\\u003c/span\\u003e": 2, "\\u003evalidatesignupform\\u003c/span\\u003e": 1, "\\u003evalidatesignuprequest\\u003c/span\\u003e": 2, "\\u003evalue\\u003c/span\\u003e": 2, "\\u003evalue\\u003c/span\\u003e\\u003cspan": 4, "\\u003eview\\u003c/span\\u003e": 6, "\\u003eview\\u003c/span\\u003e\\\\\\": 4, "\\u003ewindow\\u003c/span\\u003e": 3, "\\u003e||\\u003c/span\\u003e": 4, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 28, "_22\\": 152, "_24\\": 159, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 8, "_958\\": 1, "_961\\": 7, "_985\\": 1, "_986\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "ability": 2, "about": 1, "access": 10, "accessibility\\": 1, "accessible": 6, "account": 2, "achieved": 2, "across": 8, "action": 13, "action\u003e": 1, "action\\": 1, "actiondata": 3, "actiondata\\": 1, "actionfunctionargs": 4, "actions": 4, "adapter": 3, "adapters": 3, "added": 4, "additionally": 2, "after": 3, "all": 3, "allowing": 2, "already": 2, "also": 2, "an": 9, "and": 78, "antipattern": 2, "any": 4, "anything": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "apollo": 1, "app": 4, "app/routes/signup": 2, "application": 2, "applications": 2, "applying": 2, "approach": 7, "apps": 2, "apt": 2, "are": 4, "aria-hidden=\\\\\\": 11, "as": 18, "asked": 1, "asset": 3, "associated": 2, "async": 5, "asynchronous": 2, "at": 5, "attrs\\": 1, "augment": 2, "automatic": 2, "available": 2, "avoid": 4, "avoided": 2, "await": 10, "await\\": 1, "aware": 2, "away": 2, "b=document": 1, "backend": 9, "basename": 1, "be": 25, "because": 8, "become": 2, "becomes": 2, "been": 2, "before": 7, "behaviors": 2, "beneficial": 2, "benefit": 2, "benefits": 2, "best": 2, "between": 6, "beyond": 2, "boilerplate": 3, "bonus": 2, "boolean": 1, "boring": 2, "both": 2, "breadcrumbs": 3, "break": 3, "breeze": 1, "bridges": 2, "brief": 2, "browser": 16, "bugs": 4, "built": 1, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 10, "by": 5, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "cache": 12, "cache-control": 1, "cached": 2, "caches": 4, "caching": 8, "can": 15, "case": 2, "catch": 1, "cause": 2, "certain": 2, "certainly": 2, "challenges": 2, "change": 5, "change\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "changelog": 2, "changelog\\": 1, "changes": 4, "children": 6, "children\\": 1, "class=\\\\\\": 331, "cli": 5, "cli\\": 1, "client": 26, "client-q2ogymm2": 1, "client-side": 3, "client\\": 2, "client\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 4, "closed": 1, "cloudflare/deno": 4, "cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "code": 14, "codeblock-line\\\\\\": 320, "color": 826, "comes": 2, "communication": 2, "community": 3, "community\\": 1, "complexities": 4, "complications": 2, "component": 20, "component\\": 1, "components": 5, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "comprehensive": 4, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "cons": 3, "consider": 4, "considerations": 2, "consistent": 2, "console": 1, "const": 33, "constraints": 2, "constraints\\": 1, "container": 2, "context": 2, "contrast": 2, "contributing": 3, "contributing\\": 1, "controller": 2, "conventions": 2, "conventions\\": 1, "cookie": 17, "cookie\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "cookieheader": 4, "cookies": 7, "cookies\\": 1, "cookies\\\\\\": 1, "coordinating": 2, "cost": 2, "could": 2, "create": 2, "create-remix": 3, "createcookie": 2, "createremixstub": 2, "createremixstub\\": 1, "crucial": 2, "css": 15, "css\\": 1, "current": 2, "customize": 2, "d=c": 2, "data": 46, "data-bad=\\\\\\": 10, "data-code-block=\\\\\\": 12, "data-filename=\\\\\\": 2, "data-good=\\\\\\": 4, "data-highlight=\\\\\\": 24, "data-lang=\\\\\\": 24, "data-line-number=\\\\\\": 320, "data-line-numbers=\\\\\\": 24, "data=": 1, "data\\": 3, "data\\u003c/code\\u003e": 1, "data\\u003c/h3\\u003e\\\\n\\u003cp\\u003eclient-side": 1, "database-backed": 2, "dataon": 1, "datastate": 1, "declarations": 1, "declarations\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "default": 2, "defer": 2, "defer\\": 1, "deferred": 1, "defined": 1, "defined\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "delivers": 2, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "detail": 2, "details": 6, "details\\\\n\\u003c/span\\u003e\\u003cspan": 3, "detecting": 2, "dev": 3, "developer": 2, "developers": 4, "development": 3, "device": 2, "devices": 2, "direct": 3, "directly": 6, "disabled=": 2, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discrepancy": 2, "discussed": 4, "discussing": 2, "discussion": 5, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "distilled": 2, "do": 3, "doc\\": 1, "docs/discussion/state-management": 1, "docs/discussion/state-management\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsstate": 1, "document": 1, "doesn": 4, "done": 3, "down": 2, "due": 2, "duplicate": 2, "during": 6, "e--": 1, "e=0": 1, "each": 4, "easy": 2, "effect": 6, "efficiencies": 2, "elegant": 2, "eliminate": 2, "eliminates": 2, "else": 2, "embrace": 2, "encapsulated": 4, "endpoint": 2, "enhancement": 3, "enhancement\\": 1, "enhancement\\u003c/strong\\u003e": 1, "enhancements": 2, "enqueue": 1, "entangled": 2, "entirely": 2, "entry": 6, "environment": 3, "error": 10, "errorboundary": 2, "errorboundary\\": 1, "errors": 30, "errors\\": 1, "essential": 4, "etc": 4, "even": 10, "event": 7, "ever": 2, "everything": 1, "example": 4, "examples": 4, "examples\\": 2, "examples\\\\\\": 1, "execution": 2, "execution\\": 1, "experience": 4, "explanation": 2, "explanation\\": 1, "export": 10, "exposed": 1, "extensive": 2, "extract": 2, "extract\\": 1, "f=a": 1, "facilitates": 2, "fact": 2, "false": 9, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 4, "fetch\\": 1, "fetch\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "fetcher": 8, "fetcher\\": 1, "fetching": 4, "file": 9, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 2, "files\\": 1, "find": 4, "first": 1, "firstchild": 2, "flags": 2, "flags\\": 1, "flicker": 2, "flickering": 5, "flickering\\u003c/strong\\u003e": 1, "flow": 3, "flow\\": 1, "flow\\u003c/a\\u003e": 1, "following": 2, "for": 45, "forgive": 2, "forgo": 2, "form": 23, "form-validation-and-action-data\\": 1, "form-validation-and-action-data\\\\\\": 1, "form\u003e": 1, "form\\": 1, "form\\u003c/span\\u003e": 1, "form\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "formaction": 1, "formdata": 7, "formdata\\u003c/code\\u003e": 2, "forms": 4, "found": 3, "frequently": 1, "fresh": 2, "from": 29, "frontend": 4, "frontend\\": 1, "fullstack": 4, "function": 16, "functional": 2, "functioning": 2, "functions": 2, "furthermore": 2, "future": 4, "gap": 2, "get": 10, "getelementbyid": 2, "getitem": 3, "getting": 2, "githubchat": 1, "gives": 2, "gotchas": 2, "gotchas\\": 1, "graphql": 2, "greatly": 2, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "h3\\": 1, "handle": 6, "handle\\": 1, "handlers": 2, "handles": 2, "handlesubmit": 2, "handling": 5, "handling\\": 2, "handling\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "has": 7, "hascontent\\": 1, "hassles": 2, "have": 4, "headers": 8, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "here": 2, "hidden=": 3, "history": 4, "hold": 2, "home": 2, "hook": 2, "hooks": 2, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hot": 3, "how": 7, "how-remix-simplifies-state\\": 1, "how-remix-simplifies-state\\\\\\": 1, "however": 8, "href=\\\\\\": 21, "html": 3, "html\\": 1, "https": 5, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 11, "icon-link\\\\\\": 11, "id=\\\\\\": 11, "if": 25, "illustrates": 2, "illustration": 2, "immediately": 2, "implement": 4, "implementation": 5, "implementing": 2, "import": 14, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "improved": 2, "in": 50, "inc": 1, "include": 2, "index": 3, "individual": 2, "information": 2, "inherent": 4, "inherently": 4, "initial": 3, "initialize": 2, "initialized": 4, "initializing": 4, "initially": 1, "initially\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "insertbefore": 1, "instead": 3, "instinct": 2, "integrates": 2, "integrating": 1, "interaction": 4, "interactions": 3, "internal": 2, "into": 6, "introduces": 2, "introduction": 1, "involves": 2, "is": 41, "isopen": 14, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "issubmitting": 6, "it": 16, "iterative": 1, "its": 4, "javascript": 12, "javascript\\": 1, "js": 7, "js\\": 1, "json": 18, "json\\": 1, "judiciously": 2, "just": 4, "key": 4, "know": 1, "later": 2, "latest": 2, "lazy": 3, "lead": 2, "leading": 2, "leaning": 2, "learning": 1, "less": 4, "let": 6, "lets": 2, "letting": 2, "leveraged": 2, "leveraging": 2, "libraries": 4, "library": 2, "licensed": 1, "lifecycle": 2, "like": 4, "likely": 4, "limitation": 1, "limitation\\u003c/strong\\u003e": 1, "limitations": 2, "lines": 2, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "list": 17, "list\\\\n\\u003c/span\\u003e\\u003cspan": 3, "listeners": 2, "livereload": 2, "livereload\\": 1, "ll": 4, "loader": 5, "loader\u003e": 1, "loader\\": 1, "loaderdata\\": 1, "loaderfunctionargs": 2, "loaders": 5, "loading": 3, "loading\\": 1, "loads": 10, "local": 17, "local-storage\\\\\\": 1, "localhost\\": 1, "localstorage": 6, "localstorage\\u003c/code\\u003e": 1, "location": 1, "location\\u003c/code\\u003e": 1, "logic": 2, "lot": 2, "made": 2, "maintaining": 2, "maintains": 4, "makes": 1, "making": 4, "manage": 2, "management": 27, "management\\": 2, "management\\\\\\": 2, "management\\u003c/h1\\u003e\\\\n\\u003cp\\u003estate": 1, "managementgetting": 1, "manages": 4, "managing": 12, "manual": 5, "match": 2, "math": 1, "may": 4, "md\\": 152, "mdx": 3, "mdx\\": 1, "mechanisms": 2, "menu\\": 1, "meta": 4, "meta\\": 2, "method": 4, "method=": 2, "methods": 2, "might": 6, "migrating": 4, "mirror": 2, "mismatch": 2, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 6, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "more": 16, "most": 7, "mostly": 2, "mounts/unmounts": 4, "mozilla": 3, "multitude": 2, "must": 8, "name=": 7, "naming": 2, "naming\\": 1, "native": 2, "natural": 2, "navigate": 3, "navigation": 5, "navigational": 2, "navlink": 2, "navlink\\": 1, "necessity": 2, "need": 5, "network": 27, "network-related": 3, "network-related-state\\": 1, "network-related-state\\\\\\": 1, "new": 2, "new\\": 1, "next": 1, "nextsibling": 2, "no": 2, "nodetype": 1, "noindex\\": 1, "none": 1, "not": 11, "note": 4, "now": 2, "null": 13, "number": 1, "object": 2, "objects": 2, "obvious": 2, "of": 45, "offer": 4, "offers": 10, "ok": 8, "old": 2, "on": 19, "once": 1, "onchange=": 2, "onclick=": 6, "one": 1, "only": 2, "onsubmit=": 1, "open": 11, "operations": 4, "optimistic": 2, "optimization": 2, "optimization\\": 1, "optimize": 2, "or": 23, "order\\": 1, "org/en-us/docs/web/api/window/localstorage\\\\\\": 1, "org/en-us/docs/web/api/window/window\\\\\\": 1, "org/en-us/docs/web/http/headers/cache-control\\\\\\": 1, "other": 5, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "our": 4, "out": 1, "outlet": 2, "outlet\\": 1, "page": 12, "pageunderstanding": 2, "param": 2, "param\\": 1, "parameters": 2, "params": 3, "params\\": 1, "params\\u003c/h3\\u003e\\\\n\\u003cp\\u003econsider": 1, "paramspersistent": 2, "parentnode": 2, "parse": 3, "parts": 2, "party": 2, "password": 12, "passworderror": 6, "patterns": 4, "pending": 6, "performance": 3, "performance\\": 1, "performs": 2, "persist": 6, "persistence": 3, "persistent": 5, "persistent-ui-state\\": 1, "persistent-ui-state\\\\\\": 1, "pieces": 2, "pipethrough": 1, "popular": 1, "positions": 2, "possible": 2, "post": 2, "postcss": 2, "postcss\\": 1, "postjson": 1, "potential": 2, "predictable": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "prefs": 6, "preliminary": 2, "presets": 2, "presets\\": 1, "prevalent": 2, "preventdefault": 1, "previous": 2, "previoussibling": 1, "primarily": 2, "primary": 1, "problems": 2, "processing": 2, "progressive": 4, "project": 1, "pros": 3, "provides": 4, "pull": 1, "queries": 2, "query": 5, "questions": 1, "quick": 1, "quicker": 2, "quickest": 1, "quickly": 1, "random": 1, "rather": 2, "re": 4, "reach": 2, "react": 50, "react-router-scroll-positions": 1, "react-state\\\\\\": 1, "react\\": 1, "react\\u003c/h2\\u003e\\\\n\\u003cp\\u003ein": 1, "reacthow": 2, "read": 6, "readablestream": 1, "recognize": 2, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "redundant": 6, "redundantly": 2, "redux": 1, "refer": 4, "refreshes": 4, "regular": 3, "related": 8, "released": 2, "remains": 2, "remix": 45, "remix-based": 2, "remix\\": 2, "remounting": 2, "removechild": 2, "removeitem": 1, "rendered": 2, "rendering": 11, "rendering\\u003c/strong\\u003e": 1, "renders": 2, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "replicating": 2, "request": 13, "requests": 2, "required": 2, "requirements": 2, "requires": 3, "res": 2, "resource": 3, "resources": 1, "responses": 2, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "retrieval": 2, "return": 15, "returning": 2, "revalidation": 4, "robust": 2, "rocking": 1, "rolling": 1, "root": 3, "root\\": 1, "route": 14, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 5, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "run/docs/discussion/state-management": 1, "run\\": 1, "running": 1, "runtimes": 3, "save": 2, "scenarios": 2, "scoped": 4, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "seamlessly": 2, "search": 7, "searchparams": 4, "sends": 2, "serialize": 1, "server": 53, "server-focused": 2, "server-managed": 2, "server-rendered": 2, "server-side": 10, "server\\": 3, "session": 2, "sessions": 6, "sessions\\": 1, "sessionstorage": 2, "set": 8, "set-cookie": 1, "setisopen": 6, "setissubmitting": 2, "setitem": 1, "setpassword": 2, "setpassworderror": 4, "setsubmitting": 1, "setup": 2, "setusername": 2, "setusernameerror": 4, "setview": 6, "shopify": 1, "shortly": 2, "should": 4, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "side": 4, "sidebar": 13, "sidebarisopen": 9, "sides": 2, "sign": 4, "signup": 2, "signuphandler": 1, "signupuser": 2, "similar": 2, "simple": 5, "simplified": 2, "simplifies": 5, "simplifying": 1, "since": 2, "single": 8, "siteurl\\": 1, "slice": 1, "slug\\": 1, "small": 2, "so": 4, "solution": 8, "solutions": 4, "some": 2, "source": 6, "spa": 3, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 150, "state-management\\\\\\": 1, "state\\": 3, "state\\u003c/code\\u003e": 2, "state\\u003c/h2\\u003e\\\\n\\u003cp\\u003eas": 1, "state\\u003c/h3\\u003e\\\\n\\u003cp\\u003econsider": 1, "state\\u003c/h3\\u003e\\\\n\\u003cp\\u003efor": 1, "state\\u003c/h4\\u003e\\\\n\\u003cp\\u003ereact": 1, "state\\u003c/li\\u003e\\\\n\\u003cli\\u003ebrowser": 1, "state\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "state\\u003c/strong\\u003e": 1, "stateexamplesnetwork": 2, "stateform": 2, "states—": 2, "stateurl": 2, "step": 2, "step-up": 2, "storage": 15, "storage\\u003c/h4\\u003e\\\\n\\u003cp\\u003eto": 1, "storage\\u003c/li\\u003e\\\\n\\u003cli\\u003ecookies\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003ein": 1, "storage\\u003c/strong\\u003e": 1, "storagekey2": 3, "store": 2, "stored": 4, "storedy": 3, "storing": 1, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "streamlined": 2, "style=\\\\\\": 826, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "submissions": 2, "submit": 4, "such": 6, "summary": 2, "support": 3, "support\\": 1, "survive": 2, "switch": 2, "sync": 2, "synchronization": 17, "synchronization\\u003c/strong\\u003e": 1, "synchronize": 6, "synchronized": 2, "synchronizing": 8, "tabindex=\\\\\\": 11, "tailwind": 2, "tailwind\\": 1, "tap": 2, "target": 2, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "temporary": 2, "tempted": 2, "term": 2, "text": 2, "textencoderstream": 1, "than": 2, "thank": 1, "that": 20, "the": 185, "their": 2, "them": 2, "there": 2, "these": 4, "this": 30, "three": 4, "through": 7, "times": 2, "title\\": 1, "tls": 2, "tls\\": 1, "to": 83, "toc\\": 1, "toggles": 2, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "touches": 2, "towards": 2, "trade-offs": 2, "traditional": 4, "transient": 3, "transitioning": 2, "trick": 2, "true": 9, "true\\\\\\": 59, "truth": 5, "truth\\u003c/strong\\u003e": 1, "try": 1, "ts": 2, "ts\\": 1, "tsx\\\\\\": 26, "tutorial": 3, "type": 2, "type=": 6, "typeof": 1, "typescript": 2, "typescript\\": 1, "typical": 4, "typically": 2, "ui": 25, "ui\\": 1, "ui\\u003c/a\\u003e": 1, "unavailable": 2, "under": 1, "understand": 2, "understanding": 2, "understanding-state-management-in-react\\": 1, "understanding-state-management-in-react\\\\\\": 1, "unique": 4, "unmounting": 2, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 8, "up\\\\n\\u003c/span\\u003e\\u003cspan": 2, "update": 2, "updating": 2, "upgrading": 3, "uploads": 2, "uploads\\": 1, "url": 9, "url-search-params\\": 1, "url-search-params\\\\\\": 1, "use": 10, "useactiondata": 4, "useactiondata\u003ctypeof": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 2, "useeffect": 1, "usefetcher": 5, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "uselayouteffect": 1, "useloaderdata": 3, "useloaderdata\u003ctypeof": 1, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 4, "usenavigate\\": 1, "usenavigation": 6, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 14, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "username": 11, "usernameerror": 6, "usernames": 2, "userouteerror\\": 1, "userouteloaderdata\\": 1, "users": 2, "usesearchparams": 6, "usesearchparams\\": 1, "usestate": 10, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 8, "usually": 2, "utilities\\": 1, "utilitiescookies": 2, "utility": 2, "utilization": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "ux": 2, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validateform": 2, "validatesignupform": 1, "validatesignuprequest": 2, "validation": 15, "validation\\": 1, "value": 2, "value=": 4, "vanilla": 3, "var": 828, "variables": 2, "variables\\": 1, "vastly": 2, "via": 4, "view": 30, "view=details": 1, "view=details\\u003c/span\\u003e": 1, "view=list": 1, "view=list\\u003c/span\\u003e": 1, "visibility": 2, "visits": 2, "vite": 5, "vite\\": 1, "vs": 6, "walk": 1, "want": 4, "warranted": 2, "was": 2, "way": 1, "ways": 2, "we": 18, "were": 2, "what": 2, "when": 7, "while": 2, "why": 3, "will": 8, "window": 18, "with": 38, "within": 12, "without": 4, "wouldn": 2, "write": 4, "writes": 2, "writes\\": 1, "wrong": 2, "you": 25, "your": 7, "yourself": 2, "||": 7, "©": 1, "—such": 2, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 15350 }, { "id": "265ee81baf3ccfb1d11d5128", "doc_id": "d1d070f248135d6c6b7fd52b", "title": "state-management", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/state-management.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/state-management.json", "content": "--- title: State management order: 2 use_cases: \u003e- managing app state, component communication, data flow, reactive updates, shared state, derived values tags: - state - signals - reactivity - data-flow - memos - effects - management version: '1.0' description: \u003e- Learn Solid's state management with signals, derived values, memos, and effects for reactive data flow and component updates. --- State management is the process of handling and manipulating data that affects the behavior and presentation of a web application. To build interactive and dynamic web applications, state management is a critical aspect of development. Within Solid, state management is facilitated through the use of reactive primitives. These state management concepts will be shown using a basic counter example: ```jsx import { createSignal } from \"solid-js\"; function Counter() { const [count, setCount] = createSignal(0); const increment = () =\u003e { setCount((prev) =\u003e prev + 1); }; return ( \u003c\u003e \u003cdiv\u003eCurrent count: {count()}\u003c/div\u003e \u003cbutton onClick={increment}\u003eIncrement\u003c/button\u003e \u003c/\u003e ); } ``` There are 3 elements to state management: 1. **State (`count`)**: The _data_ that is used to determine what content to display to the user. 2. **View (`\u003cdiv\u003e{count()}\u003c/div\u003e`)**: The _visual representation_ of the state to the user. 3. **Actions (`increment`)**: Any event that _modifies_ the state. These elements work together to create a \"one way data flow\". When actions modify the state, the view is updated to show the current state to the user. One way data flow simplifies the management of data and user interactions, which provides a more predictable and maintainable application. ## Managing basic state State is the source of truth for the application, and is used to determine what content to display to the user. State is represented by a [signal](/concepts/signals), which is a reactive primitive that manages state and notifies the UI of any changes. To create a piece of state, you use the [`createSignal`](/reference/basic-reactivity/create-signal) function and pass in the initial value of the state: ```jsx import { createSignal } from \"solid-js\"; const [count, setCount] = createSignal(0); ``` To access the current value of the state, you call the signal's getter function: ```jsx console.log(count()); // 0 ``` To update the state, you use the signal's setter function: ```jsx setCount((prev) =\u003e prev + 1); console.log(count()); // 1 ``` With signals, you can create and manage state in a simple and straightforward manner. This allows you to focus on the logic of your application, rather than the complexities of state management. Additionally, signals are reactive, which means as long as it is accessed within a [tracking scope](/concepts/intro-to-reactivity#tracking-changes), it will always be up to date. ## Rendering state in the UI To achieve a dynamic user interface, the UI must be able to reflect the current state of the data. The UI is the visual representation of the state to the user, and is rendered using JSX. JSX provides a tracking scope, which keeps the view in sync with the state. Revisiting the `Counter` component presented earlier, rendering the current state of `count` is done within the return body using JSX: ```jsx return ( \u003c\u003e \u003cdiv\u003eCurrent count: {count()}\u003c/div\u003e \u003cbutton onClick={increment}\u003eIncrement\u003c/button\u003e \u003c/\u003e ); ``` To render the current state of `count`, the JSX expression `{count()}` is used. The curly braces indicate that the expression is a JavaScript expression, and the parentheses indicate that it is a function call. This expression is representative of a getter function for `count` and will retrieve the current state value. When the state is updated, the UI will be re-rendered to reflect the new state value. Components in Solid only run once upon their initialization. After this initial render, if any changes are made to the state, only the portion of the DOM that is directly associated with the signal change will be updated. The ability to update only the relevant portions of the DOM is a key feature of Solid that allows for performant and efficient UI updates. This is known as [fine-grained reactivity](/advanced-concepts/fine-grained-reactivity). Through reducing the re-rendering of entire components or larger DOM segments, UI will remain more efficient and responsive for the user. ## Reacting to changes When the state is updated, any updates are reflected in the UI. However, there may be times when you want to perform additional actions when the state changes. For example, in the `Counter` component, you may want to display the doubled value of `count` to the user. This can be achieved through the use of [effects](/concepts/effects), which are reactive primitives that perform side effects when the state changes: ```jsx import { createSignal, createEffect } from \"solid-js\"; function Counter() { const [count, setCount] = createSignal(0); const [doubleCount, setDoubleCount] = createSignal(0); // Initialize a new state for doubleCount const increment = () =\u003e { setCount((prev) =\u003e prev + 1); }; createEffect(() =\u003e { setDoubleCount(count() * 2); // Update doubleCount whenever count changes }); return ( \u003c\u003e \u003cdiv\u003eCurrent count: {count()}\u003c/div\u003e \u003cdiv\u003eDoubled count: {doubleCount()}\u003c/div\u003e // Display the doubled count \u003cbutton onClick={increment}\u003eIncrement\u003c/button\u003e \u003c/\u003e ); } ``` The [`createEffect`](/reference/basic-reactivity/create-effect) function sets up a function to perform side effects whenever the state is modified. Here, a side-effect refers to operations or updates that affect state outside of the local environment - like modifying a global variable or updating the DOM - triggered by those state changes. In the `Counter` component, a `createEffect` function can be used to update the `doubleCount` state whenever the `count` state changes. This keeps the `doubleCount` state in sync with the `count` state, and allows the UI to display the doubled value of `count` to the user. View this example of [`doubleCount` in a `createEffect` in the Solid Playground example](https://playground.solidjs.com/anonymous/b05dddaa-e62a-4c56-b745-5704f3a40194). ```html tab title=\"First render\" Current count: 0 Doubled count: 0 ``` ```html tab title=\"After increment\" Current count: 1 Doubled count: 2 ``` ## Derived state When you want to calculate new state values based on existing state values, you can use derived state. This is a useful pattern when you want to display a transformation of a state value to the user, but do not want to modify the original state value or create a new state value. Derived values can be created using a signal within a function, which can be referred to as a [derived signal](/concepts/derived-values/derived-signals). This approach can be used to simplify the `doubleCount` example above, where the additional signal and effect can be replaced with a derived signal: ```jsx del={5, 11-13} ins={15} import { createSignal } from \"solid-js\" function Counter() { const [count, setCount] = createSignal(0); const [doubleCount, setDoubleCount] = createSignal(0); const increment = () =\u003e { setCount((prev) =\u003e prev + 1); }; createEffect(() =\u003e { setDoubleCount(count() * 2); // Update doubleCount whenever count changes }); const doubleCount = () =\u003e count() * 2 return ( \u003c\u003e \u003cdiv\u003eCurrent count: {count()}\u003c/div\u003e \u003cdiv\u003eDoubled count: {doubleCount()}\u003c/div\u003e \u003cbutton onClick={increment}\u003eIncrement\u003c/button\u003e \u003c/\u003e ); } ``` While this approach works for simple use cases, if `doubleCount` is used several times within a component or contains a computationally expensive calculation, it can lead to performance issues. The derived signal would be re-evaluated not just each time `count` is changed, but also for each use of `doubleCount()`. ```jsx del={10} ins={11-14, 20-21} import { createSignal } from \"solid-js\" function Counter() { const [count, setCount] = createSignal(0) const increment = () =\u003e { setCount(count() + 1) } const doubleCount = () =\u003e count() * 2 const doubleCount = () =\u003e { console.log('doubleCount called') return count() * 2 } return ( \u003c\u003e \u003cdiv\u003eCurrent count: {count()}\u003c/div\u003e \u003cdiv\u003eDoubled count: {doubleCount()}\u003c/div\u003e \u003cdiv\u003eDoubled count: {doubleCount()}\u003c/div\u003e \u003cdiv\u003eDoubled count: {doubleCount()}\u003c/div\u003e \u003cbutton onClick={increment}\u003eIncrement\u003c/button\u003e \u003c/\u003e ) } ``` ```shellsession title=\"Console output\" doubleCount called doubleCount called doubleCount called ``` For cases like this, you can use [Memos](/concepts/derived-values/memos) to store the value of `doubleCount`, which are also referred to as a memoized or cached value. When using a memo, the calculation will only run **once** when the value of `count` changes and can be accessed multiple times without re-evaluating for each additional use. Using the [`createMemo`](/reference/basic-reactivity/create-memo) function, you can create a memoized value: ```jsx ins={15-18, 26-28} ins=\", createMemo\" import { createSignal, createMemo } from \"solid-js\" function Counter() { const [count, setCount] = createSignal(0) const increment = () =\u003e { setCount((prev) =\u003e prev + 1); }; const doubleCount = () =\u003e { console.log('doubleCount called') return count() * 2 } const doubleCountMemo = createMemo(() =\u003e { console.log('doubleCountMemo called') return count() * 2 }) return ( \u003c\u003e \u003cdiv\u003eCurrent count: {count()}\u003c/div\u003e \u003cdiv\u003eDoubled count: {doubleCount()}\u003c/div\u003e \u003cdiv\u003eDoubled count: {doubleCount()}\u003c/div\u003e \u003cdiv\u003eDoubled count: {doubleCount()}\u003c/div\u003e \u003cdiv\u003eDoubled count: {doubleCountMemo()}\u003c/div\u003e \u003cdiv\u003eDoubled count: {doubleCountMemo()}\u003c/div\u003e \u003cdiv\u003eDoubled count: {doubleCountMemo()}\u003c/div\u003e \u003cbutton onClick={increment}\u003eIncrement\u003c/button\u003e \u003c/\u003e ); } ``` ```shellsession title=\"Console output\" doubleCountMemo called doubleCount called doubleCount called doubleCount called ``` While accessed multiple times, the `doubleCountMemo` will only re-evaluate and log once. This is different from the derived signal, `doubleCount`, which is re-evaluated for each time it is accessed. View a similar [example comparing a derived signal and a memo in the Solid Playground](https://playground.solidjs.com/anonymous/288736aa-d5ba-45f7-a01f-1ac3dcb1b479). ## Lifting state When you want to share state between components, you can lift state up to a common ancestor component. While state is not tied to components, you may want to link multiple components together in order to access and manipulate the same piece of state. This can keep things synchronized across the [component tree](/concepts/components/basics#component-trees) and allow for more predictable state management. For example, in the `Counter` component, you may want to display the doubled value of `count` to the user through a separate component: ```jsx import { createSignal, createEffect, createMemo } from \"solid-js\"; function App() { const [count, setCount] = createSignal(0); const [doubleCount, setDoubleCount] = createSignal(0); const squaredCount = createMemo(() =\u003e count() * count()); createEffect(() =\u003e { setDoubleCount(count() * 2); }); return ( \u003c\u003e \u003cCounter count={count()} setCount={setCount} /\u003e \u003cDisplayCounts count={count()} doubleCount={doubleCount()} squaredCount={squaredCount()} /\u003e \u003c/\u003e ); } function Counter(props) { const increment = () =\u003e { props.setCount((prev) =\u003e prev + 1); }; return \u003cbutton onClick={increment}\u003eIncrement\u003c/button\u003e; } function DisplayCounts(props) { return ( \u003cdiv\u003e \u003cdiv\u003eCurrent count: {props.count}\u003c/div\u003e \u003cdiv\u003eDoubled count: {props.doubleCount}\u003c/div\u003e \u003cdiv\u003eSquared count: {props.squaredCount}\u003c/div\u003e \u003c/div\u003e ); } export default App; ``` To share the `count` state between the `Counter` and `DisplayCounts` components, you can lift the state up to the `App` component. This allows the `Counter` and `DisplayCounts` functions to access the same piece of state, but also allows the `Counter` component to update the state through the `setCount` setter function. When sharing state between components, you can access the state through [`props`](/concepts/components/props). Props values that are passed down from the parent component are read-only, which means they cannot be directly modified by the child component. However, you can pass down setter functions from the parent component to allow the child component to indirectly modify the parent's state. :::note To encourage one-way data flow, props are passed as read-only or immutable values from the parent to child components. There are [specific utility functions for props](/concepts/components/props), however, that offer methods to modify props values. ::: ## Managing complex state As applications grow in size and complexity, lifting state can become difficult to manage. To avoid the concept of prop drilling, which is the process of passing props through multiple components, Solid offers [stores](/concepts/stores) to manage state in a more scalable and maintainable manner. To learn more about managing complex state, navigate to the [complex state management page](/guides/complex-state-management).", "term_freq": { "##": 6, "**": 3, "**actions": 1, "**once**": 1, "**state": 1, "**view": 1, "---": 2, "//": 6, "//github": 1, "//playground": 2, "/\u003e": 2, "/advanced-concepts/fine-grained-reactivity": 1, "/concepts/components/basics#component-trees": 1, "/concepts/components/props": 2, "/concepts/derived-values/derived-signals": 1, "/concepts/derived-values/memos": 1, "/concepts/effects": 1, "/concepts/intro-to-reactivity#tracking-changes": 1, "/concepts/signals": 1, "/concepts/stores": 1, "/guides/complex-state-management": 1, "/reference/basic-reactivity/create-effect": 1, "/reference/basic-reactivity/create-memo": 1, "/reference/basic-reactivity/create-signal": 1, "10": 1, "11-13": 1, "11-14": 1, "15": 1, "15-18": 1, "20-21": 1, "26-28": 1, "\u003c/\u003e": 7, "\u003c/div\u003e": 22, "\u003c\u003e": 7, "\u003cbutton": 7, "\u003ccounter": 1, "\u003cdisplaycounts": 1, "\u003cdiv\u003e": 2, "\u003cdiv\u003ecurrent": 7, "\u003cdiv\u003edoubled": 12, "\u003cdiv\u003esquared": 1, "=\u003e": 21, "\u003e-": 2, "\u003eincrement\u003c/button\u003e": 7, "_data_": 1, "_modifies_": 1, "_visual": 1, "ability": 1, "able": 1, "about": 1, "above": 1, "access": 4, "accessed": 4, "achieve": 1, "achieved": 1, "across": 1, "actions": 2, "additional": 3, "additionally": 1, "affect": 1, "affects": 1, "after": 2, "allow": 2, "allows": 5, "also": 3, "always": 1, "ancestor": 1, "and": 28, "any": 4, "app": 4, "application": 4, "applications": 2, "approach": 2, "are": 10, "as": 7, "aspect": 1, "associated": 1, "avoid": 1, "based": 1, "basic": 2, "be": 15, "become": 1, "behavior": 1, "between": 3, "body": 1, "braces": 1, "build": 1, "but": 3, "by": 3, "cached": 1, "calculate": 1, "calculation": 2, "call": 2, "called": 10, "can": 18, "cannot": 1, "cases": 2, "change": 1, "changed": 1, "changes": 10, "child": 3, "com/anonymous/288736aa-d5ba-45f7-a01f-1ac3dcb1b479": 1, "com/anonymous/b05dddaa-e62a-4c56-b745-5704f3a40194": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/state-management": 1, "common": 1, "communication": 1, "comparing": 1, "complex": 3, "complexities": 1, "complexity": 1, "component": 16, "components": 9, "computationally": 1, "concept": 1, "concepts": 1, "console": 7, "const": 22, "contains": 1, "content": 2, "count": 70, "count=": 2, "counter": 14, "create": 5, "created": 1, "createeffect": 8, "creatememo": 6, "createsignal": 18, "critical": 1, "curly": 1, "current": 8, "data": 8, "data-flow": 1, "date": 1, "default": 1, "del=": 2, "derived": 10, "description": 1, "determine": 2, "development": 1, "different": 1, "difficult": 1, "directly": 2, "display": 7, "displaycounts": 3, "do": 1, "dom": 4, "done": 1, "doublecount": 36, "doublecount=": 1, "doublecountmemo": 7, "doubled": 6, "down": 2, "drilling": 1, "dynamic": 2, "each": 4, "earlier": 1, "effect": 1, "effects": 5, "efficient": 2, "elements": 2, "encourage": 1, "entire": 1, "environment": 1, "event": 1, "example": 7, "existing": 1, "expensive": 1, "export": 1, "expression": 4, "facilitated": 1, "feature": 1, "fine-grained": 1, "first": 1, "flow": 5, "focus": 1, "for": 15, "from": 11, "function": 19, "functions": 3, "getter": 2, "github-document": 1, "global": 1, "grow": 1, "handling": 1, "here": 1, "however": 3, "html": 2, "https": 3, "if": 2, "immutable": 1, "import": 7, "in": 16, "increment": 15, "indicate": 2, "indirectly": 1, "initial": 2, "initialization": 1, "initialize": 1, "ins=": 4, "interactions": 1, "interactive": 1, "interface": 1, "is": 31, "issues": 1, "it": 5, "javascript": 1, "jsx": 14, "just": 1, "keep": 1, "keeps": 2, "key": 1, "known": 1, "larger": 1, "lead": 1, "learn": 2, "lift": 2, "lifting": 2, "like": 2, "link": 1, "local": 1, "log": 6, "logic": 1, "long": 1, "made": 1, "maintainable": 2, "manage": 3, "management": 12, "manages": 1, "managing": 4, "manipulate": 1, "manipulating": 1, "manner": 2, "may": 4, "mdx": 1, "means": 2, "memo": 2, "memoized": 2, "memos": 3, "methods": 1, "modified": 2, "modify": 4, "modifying": 1, "more": 5, "multiple": 4, "must": 1, "navigate": 1, "new": 4, "not": 3, "note": 1, "notifies": 1, "of": 36, "offer": 1, "offers": 1, "on": 2, "once": 2, "onclick=": 7, "one": 2, "one-way": 1, "only": 5, "operations": 1, "or": 7, "order": 2, "original": 1, "output": 2, "outside": 1, "page": 1, "parent": 4, "parentheses": 1, "pass": 2, "passed": 2, "passing": 1, "pattern": 1, "perform": 3, "performance": 1, "performant": 1, "piece": 3, "playground": 2, "portion": 1, "portions": 1, "predictable": 2, "presentation": 1, "presented": 1, "prev": 12, "primitive": 1, "primitives": 2, "process": 2, "prop": 1, "props": 12, "provides": 2, "rather": 1, "re-evaluate": 1, "re-evaluated": 2, "re-evaluating": 1, "re-rendered": 1, "re-rendering": 1, "reacting": 1, "reactive": 6, "reactivity": 2, "read-only": 2, "reducing": 1, "referred": 2, "refers": 1, "reflect": 2, "reflected": 1, "relevant": 1, "remain": 1, "render": 3, "rendered": 1, "rendering": 2, "replaced": 1, "representation": 1, "representation_": 1, "representative": 1, "represented": 1, "responsive": 1, "retrieve": 1, "return": 13, "revisiting": 1, "run": 2, "same": 2, "scalable": 1, "scope": 2, "segments": 1, "separate": 1, "setcount": 16, "setcount=": 1, "setdoublecount": 6, "sets": 1, "setter": 3, "several": 1, "share": 2, "shared": 1, "sharing": 1, "shellsession": 2, "show": 1, "shown": 1, "side": 2, "side-effect": 1, "signal": 11, "signals": 4, "similar": 1, "simple": 2, "simplifies": 1, "simplify": 1, "size": 1, "solid": 7, "solid-js": 7, "solidjs": 2, "source": 1, "specific": 1, "squaredcount": 3, "squaredcount=": 1, "state": 70, "state-management": 1, "store": 1, "stores": 1, "straightforward": 1, "sync": 2, "synchronized": 1, "tab": 2, "tags": 1, "than": 1, "that": 12, "the": 117, "their": 1, "there": 3, "these": 2, "they": 1, "things": 1, "this": 14, "those": 1, "through": 7, "tied": 1, "time": 2, "times": 4, "title": 1, "title=": 4, "to": 63, "together": 2, "tracking": 2, "transformation": 1, "tree": 1, "triggered": 1, "truth": 1, "ui": 9, "up": 4, "update": 6, "updated": 4, "updates": 5, "updating": 1, "upon": 1, "use": 9, "use_cases": 1, "used": 6, "useful": 1, "user": 12, "using": 6, "utility": 1, "value": 14, "values": 8, "variable": 1, "version": 1, "view": 4, "visual": 1, "want": 8, "way": 2, "web": 2, "what": 2, "when": 12, "whenever": 4, "where": 1, "which": 10, "while": 3, "will": 8, "with": 6, "within": 5, "without": 1, "work": 1, "works": 1, "would": 1, "you": 19, "your": 1 }, "length": 1728 }, { "id": "44081b1964e4b29ac7fe511c", "doc_id": "1460efd5190a09978df2d4d0", "title": "static-assets", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/building-your-application/static-assets.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/static-assets.json", "content": "--- title: Static assets use_cases: \u003e- images, fonts, documents, favicon, robots.txt, service workers, media files, public resources tags: - assets - images - public - static - media - files version: '1.0' description: \u003e- Manage static assets in SolidStart using the public directory or imports. Serve images, fonts, documents, and media files. --- Within SolidStart there are two ways to import static assets into your project: using the public directory and using imports. ## Public directory Rich web applications use assets to create visuals. In SolidStart, the `/public` directory can be used to store static assets. These assets are served at the exact path they are in, relative to the public directory: ``` |-- public | favicon.ico -\u003e /favicon.ico | |-- images | | |-- logo.png -\u003e /images/logo.png | | |-- background.png -\u003e /images/background.png | |-- models | | |-- player.gltf -\u003e /models/player.gltf | |-- documents | | |-- report.pdf -\u003e /documents/report.pdf ``` If you would like to reference an asset in the public directory, you can use the absolute path to the asset: ```tsx { 5 } export default function About() { return ( \u003c\u003e \u003ch1\u003eAbout\u003c/h1\u003e \u003cimg src=\"/images/logo.png\" alt=\"Solid logo\" /\u003e \u003c/\u003e ); } ``` This is ideal when you want to have human-readable, stable references to static assets. This can be useful for assets such as: - documents - service workers - images, audio, and video - manifest files - metadata files (e.g., `robots.txt`, sitemaps) - favicon ## Importing assets Vite provides a way to import assets directly into your Solid components: ```tsx import logo from \"./solid.png\"; export default function About() { return ( \u003c\u003e \u003ch1\u003eAbout\u003c/h1\u003e \u003cimg src={logo} alt=\"Solid logo\" /\u003e // Renders \u003cimg src=\"/assets/solid.2d8efhg.png\" alt=\"Solid logo\" /\u003e \u003c/\u003e ); } ``` When you use imports, Vite will create a hashed filename. For example, `solid.png` will become `solid.2d8efhg.png`. ## Public directory versus imports The public directory and imports are both valid ways to include static assets in your project. The driver to use one over the other is based on your use case. For dynamic updates to your assets, using the public directory is the best choice. It allows you to maintain full control over the asset URL paths, ensuring that the links remain consistent even when the assets are updated. When using imports, the filename is hashed and therefore will not be predictable over time. This can be beneficial for cache busting but detrimental if you want to send someone a link to the asset.", "term_freq": { "##": 3, "---": 2, "-\u003e": 5, "//": 1, "//github": 1, "/\u003e": 3, "/assets/solid": 1, "/documents/report": 1, "/favicon": 1, "/images/background": 1, "/images/logo": 2, "/models/player": 1, "/public": 1, "/solid": 1, "2d8efhg": 2, "\u003c/\u003e": 2, "\u003c\u003e": 2, "\u003ch1\u003eabout\u003c/h1\u003e": 2, "\u003cimg": 3, "\u003e-": 2, "about": 2, "absolute": 1, "allows": 1, "alt=": 3, "an": 1, "and": 5, "applications": 1, "are": 5, "as": 1, "asset": 4, "assets": 14, "at": 1, "audio": 1, "background": 1, "based": 1, "be": 4, "become": 1, "beneficial": 1, "best": 1, "both": 1, "busting": 1, "but": 1, "cache": 1, "can": 4, "case": 1, "choice": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/building-your-application/static-assets": 1, "components": 1, "consistent": 1, "control": 1, "create": 2, "default": 2, "description": 1, "detrimental": 1, "directly": 1, "directory": 9, "documents": 4, "driver": 1, "dynamic": 1, "ensuring": 1, "even": 1, "exact": 1, "example": 1, "export": 2, "favicon": 3, "filename": 2, "files": 5, "fonts": 2, "for": 4, "from": 1, "full": 1, "function": 2, "github-document": 1, "gltf": 2, "hashed": 2, "have": 1, "https": 1, "human-readable": 1, "ico": 2, "ideal": 1, "if": 2, "images": 5, "import": 3, "importing": 1, "imports": 6, "in": 5, "include": 1, "into": 2, "is": 4, "it": 1, "like": 1, "link": 1, "links": 1, "logo": 6, "maintain": 1, "manage": 1, "manifest": 1, "mdx": 1, "media": 3, "metadata": 1, "models": 1, "not": 1, "on": 1, "one": 1, "or": 1, "other": 1, "over": 3, "path": 2, "paths": 1, "pdf": 2, "player": 1, "png": 9, "predictable": 1, "project": 2, "provides": 1, "public": 11, "reference": 1, "references": 1, "relative": 1, "remain": 1, "renders": 1, "report": 1, "resources": 1, "return": 2, "rich": 1, "robots": 2, "send": 1, "serve": 1, "served": 1, "service": 2, "sitemaps": 1, "solid": 6, "solidstart": 3, "someone": 1, "src=": 3, "stable": 1, "static": 7, "static-assets": 1, "store": 1, "such": 1, "tags": 1, "that": 1, "the": 18, "there": 1, "therefore": 1, "these": 1, "they": 1, "this": 3, "time": 1, "title": 1, "to": 15, "tsx": 2, "two": 1, "txt": 2, "updated": 1, "updates": 1, "url": 1, "use": 5, "use_cases": 1, "used": 1, "useful": 1, "using": 5, "valid": 1, "version": 1, "versus": 1, "video": 1, "visuals": 1, "vite": 2, "want": 2, "way": 1, "ways": 2, "web": 1, "when": 4, "will": 3, "within": 1, "workers": 2, "would": 1, "you": 6, "your": 5, "|--": 8 }, "length": 395 }, { "id": "bee19361c3ed6d35e0176e49", "doc_id": "22ae4551aa6e6f9b77910718", "title": "stores", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/stores.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/stores.json", "content": "--- title: Stores order: 6 use_cases: \u003e- complex state, nested objects, arrays, shared state, fine-grained updates, state trees, global state tags: - stores - state - objects - arrays - nested - produce - reconcile version: '1.0' description: \u003e- Manage complex nested state efficiently with stores that provide fine-grained reactivity for objects and arrays in Solid. --- Stores are a state management primitive that provide a centralized way to handle shared data and reduce redundancy. Unlike [signals](/concepts/signals), which track a single value and trigger a full re-render when updated, stores maintain fine-grained reactivity by updating only the properties that change. They can produce a collection of reactive signals, each linked to an individual property, making them well-suited for managing complex state efficiently. ## Creating a store Stores can manage many data types, including: objects, arrays, strings, and numbers. Using JavaScript's [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) mechanism, reactivity extends beyond just the top-level objects or arrays. With stores, you can now target nested properties and elements within these structures to create a dynamic tree of reactive data. ```jsx import { createStore } from \"solid-js/store\" // Initialize store const [store, setStore] = createStore({ userCount: 3, users: [ { id: 0, username: \"felix909\", location: \"England\", loggedIn: false, }, { id: 1, username: \"tracy634\", location: \"Canada\", loggedIn: true, }, { id: 2, username: \"johny123\", location: \"India\", loggedIn: true, }, ], }) ``` ## Accessing store values Store properties can be accessed directly from the state proxy through directly referencing the targeted property: ```jsx console.log(store.userCount) // Outputs: 3 ``` Accessing stores within a tracking scope follows a similar pattern to signals. While signals are created using the [`createSignal`](/reference/basic-reactivity/create-signal) function and require calling the signal function to access their values, store values can be directly accessed without a function call. This provides access to the store's value directly within a tracking scope: ```jsx const App = () =\u003e { const [mySignal, setMySignal] = createSignal(\"This is a signal.\") const [store, setStore] = createStore({ userCount: 3, users: [ { id: 0, username: \"felix909\", location: \"England\", loggedIn: false, }, { id: 1, username: \"tracy634\", location: \"Canada\", loggedIn: true, }, { id: 2, username: \"johny123\", location: \"India\", loggedIn: true, }, ], }) return ( \u003cdiv\u003e \u003ch1\u003eHello, {store.users[0].username}\u003c/h1\u003e {/* Accessing a store value */} \u003cspan\u003e{mySignal()}\u003c/span\u003e {/* Accessing a signal */} \u003c/div\u003e ) } ``` When a store is created, it starts with the initial state but does _not_ immediately set up signals to track changes. These signals are created **lazily**, meaning they are only formed when accessed within a tracking scope. Once data is used within a tracking scope, such as within the return statement of a component function, computed property, or an effect, a signal is created and dependencies are established. For example, if you wanted to print out every new user, adding the console log below will not work because it is not within a tracked scope. ```tsx ins={9} const App = () =\u003e { const [store, setStore] = createStore({ userCount: 3, users: [ ... ], }) const addUser = () =\u003e { ... } console.log(store.users.at(-1)) // This won't work return ( \u003cdiv\u003e \u003ch1\u003eHello, {store.users[0].username}\u003c/h1\u003e \u003cp\u003eUser count: {store.userCount}\u003c/p\u003e \u003cbutton onClick={addUser}\u003eAdd user\u003c/button\u003e \u003c/div\u003e ) } ``` Rather, this would need to be in a tracking scope, like inside a [`createEffect`](/reference/basic-reactivity/create-effect), so that a dependency is established. ```tsx del={9} ins={10-12} const App = () =\u003e { const [store, setStore] = createStore({ userCount: 3, users: [ ... ], }) const addUser = () =\u003e { ... } console.log(store.users.at(-1)) createEffect(() =\u003e { console.log(store.users.at(-1)) }) return ( \u003cdiv\u003e \u003ch1\u003eHello, {store.users[0].username}\u003c/h1\u003e \u003cp\u003eUser count: {store.userCount}\u003c/p\u003e \u003cbutton onClick={addUser}\u003eAdd user\u003c/button\u003e \u003c/div\u003e ) } ``` ## Modifying store values Updating values within a store is best accomplished using a setter provided by the `createStore` initialization. This setter allows for the modification of a specific key and its associated value, following the format `setStore(key, newValue)`: ```jsx \"setStore\" const [store, setStore] = createStore({ userCount: 3, users: [ ... ], }) setStore(\"users\", (currentUsers) =\u003e [ ...currentUsers, { id: 3, username: \"michael584\", location: \"Nigeria\", loggedIn: false, }, ]) ``` The value of `userCount` could also be automatically updated whenever a new user is added to keep it synced with the users array: ```tsx ins={11} const App = () =\u003e { const [store, setStore] = createStore({ userCount: 3, users: [ ... ], }) const addUser = () =\u003e { ... } createEffect(() =\u003e { console.log(store.users.at(-1)) setStore(\"userCount\", store.users.length) }) return ( \u003cdiv\u003e \u003ch1\u003eHello, {store.users[0].username}\u003c/h1\u003e \u003cp\u003eUser count: {store.userCount}\u003c/p\u003e \u003cbutton onClick={addUser}\u003eAdd user\u003c/button\u003e \u003c/div\u003e ) } ``` :::note Separating the read and write capabilities of a store provides a valuable debugging advantage. This separation facilitates the tracking and control of the components that are accessing or changing the values. ::: :::advanced A little hidden feature of stores is that you can also create nested stores to help with setting nested properties. ```jsx const [store, setStore] = createStore({ userCount: 3, users: [ ... ], }) const [users, setUsers] = createStore(store.users) setUsers((currentUsers) =\u003e [ ...currentUsers, { id: 3, username: \"michael584\", location: \"Nigeria\", loggedIn: false, }, ]) ``` Changes made through `setUsers` will update the `store.users` property and reading `users` from this derived store will also be in sync with the values from `store.users`. Note that the above relies on `store.users` to be set already in the existing store. ::: ## Path syntax flexibility Modifying a store using this method is referred to as \"path syntax.\" In this approach, the initial arguments are used to specify the keys that lead to the target value you want to modify, while the last argument provides the new value. String keys are used to precisely target particular values with path syntax. By specifying these exact key names, you can directly retrieve the targeted information. However, path syntax goes beyond string keys and offers more versatility when accessing targeted values. Instead of employing the use of just string keys, there is the option of using an array of keys. This method grants you the ability to select multiple properties within the store, facilitating access to nested structures. Alternatively, you can use filtering functions to access keys based on dynamic conditions or specific rules. \u003cEraserLink href=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=M6Y55ScNFDD_2HmRd4OJkQ\" preview=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=M6Y55ScNFDD_2HmRd4OJkQ\u0026type=embed\" /\u003e The flexibility in path syntax makes for efficient navigation, retrieval, and modification of data in your store, regardless of the store's complexity or the requirement for dynamic access scenarios within your application. ## Modifying values in arrays Path syntax provides a convenient way to modify arrays, making it easier to access and update their elements. Instead of relying on discovering individual indices, path syntax introduces several powerful techniques for array manipulation. ### Appending new values To append values to an array in a store, use the setter function with the spread operator (`...`) or the path syntax. Both methods add an element to the array but differ in how they modify it and their reactivity behavior. The spread operator creates a new array by copying the existing elements and adding the new one, effectively replacing the entire `store.users` array. This replacement triggers reactivity for all effects that depend on the array or its properties. ```jsx setStore(\"users\", (otherUsers) =\u003e [ ...otherUsers, { id: 3, username: \"michael584\", location: \"Nigeria\", loggedIn: false, }, ]) ``` The path syntax adds the new element by assigning it to the index equal to `store.users.length`, directly modifying the existing array. This triggers reactivity only for effects that depend on the new index or properties like `store.users.length`, making updates more efficient and targeted. ```jsx setStore(\"users\", store.users.length, { id: 3, username: \"michael584\", location: \"Nigeria\", loggedIn: false, }) ``` ### Modifying multiple elements With path syntax, you can target a subset of elements of an array, or properties of an object, by specifying an array or range of indices. The most general form is to specify an array of values. For example, if `store.users` is an array of objects, you can set the `loggedIn` property of several indices at once like so: ```jsx setStore(\"users\", [2, 7, 10], \"loggedIn\", false) // equivalent to (but more efficient than): setStore(\"users\", 2, \"loggedIn\", false) setStore(\"users\", 7, \"loggedIn\", false) setStore(\"users\", 10, \"loggedIn\", false) ``` This array syntax also works for object property names. For example, if `store.users` is an object mapping usernames to objects, you can set the `loggedIn` property of several users at once like so: ```jsx setStore(\"users\", [\"me\", \"you\"], \"loggedIn\", false) // equivalent to (but more efficient than): setStore(\"users\", [\"me\"], \"loggedIn\", false) setStore(\"users\", [\"you\"], \"loggedIn\", false) ``` For arrays specifically, you can specify a range of indices via an object with `from` and `to` keys (both of which are inclusive). For example, assuming `store.users` is an array again, you can set the `loggedIn` state for all users except index 0 as follows: ```jsx setStore(\"users\", { from: 1, to: store.users.length - 1 }, \"loggedIn\", false) // equivalent to (but more efficient than): for (let i = 1; i \u003c= store.users.length - 1; i++) { setStore(\"users\", i, \"loggedIn\", false) } ``` You can also include a `by` key in a range object to specify a step size, and thereby update a regular subset of elements. For example, you can set the `loggedIn` state for even-indexed users like so: ```jsx setStore(\"users\", { from: 0, to: store.users.length - 1, by: 2 }, \"loggedIn\", false) // equivalent to (but more efficient than): for (let i = 1; i \u003c= store.users.length - 1; i += 2) { setStore(\"users\", i, \"loggedIn\", false) } ``` Multi-setter syntax differs from the \"equivalent\" code in one key way: a single store setter call automatically gets wrapped in a [`batch`](/reference/reactive-utilities/batch), so all the elements update at once before any downstream effects are triggered. ### Dynamic value assignment Path syntax also provides a way to set values within an array using functions instead of static values. These functions receive the old value as an argument, allowing you to compute the new value based on the existing one. This dynamic approach is particularly useful for complex transformations. ```jsx setStore(\"users\", 3, \"loggedIn\" , (loggedIn) =\u003e !loggedIn) ``` ### Filtering values To update elements in an array based on specific conditions, you can pass a function as an argument. This function acts as a filter, receiving the old value and index, and gives you the flexibility to apply logic that targets specific cases. This might include using methods like `.startsWith()`, `includes()`, or other comparison techniques to determine which elements should be updated. ```jsx // update users with username that starts with \"t\" setStore(\"users\", (user) =\u003e user.username.startsWith(\"t\"), \"loggedIn\", false) // update users with location \"Canada\" setStore(\"users\", (user) =\u003e user.location == \"Canada\" , \"loggedIn\", false) // update users with id 1, 2 or 3 let ids = [1,2,3] setStore(\"users\", (user) =\u003e ids.includes(user.id) , \"loggedIn\", false) ``` ## Modifying objects When using store setters to modify objects, if a new value is an object, it will be shallow merged with the existing value. What this refers to is that the properties of the existing object will be combined with the properties of the \"new\" object you are setting, updating any overlapping properties with the values from the new object. What this means, is that you can directly make the change to the store _without_ spreading out properties of the existing user object. ```jsx setStore(\"users\", 0, { id: 109, }) // is equivalent to setStore(\"users\", 0, (user) =\u003e ({ ...user, id: 109, })) ``` ## Store utilities ### Store updates with `produce` Rather than directly modifying a store with setters, Solid has the `produce` utility. This utility provides a way to work with data as if it were a [mutable](https://developer.mozilla.org/en-US/docs/Glossary/Mutable) JavaScript object. `produce` also provides a way to make changes to multiple properties at the same time which eliminates the need for multiple setter calls. ```jsx import { produce } from \"solid-js/store\" // without produce setStore(\"users\", 0, \"username\", \"newUsername\") setStore(\"users\", 0, \"location\", \"newLocation\") // with produce setStore( \"users\", 0, produce((user) =\u003e { user.username = \"newUsername\" user.location = \"newLocation\" }) ) ``` `produce` and `setStore` do have distinct functionalities. While both can be used to modify the state, the key distinction lies in how they handle data. `produce` allows you to work with a temporary draft of the state, apply the changes, then produce a new [immutable](https://developer.mozilla.org/en-US/docs/Glossary/Immutable) version of the store. Comparatively, `setStore` provides a more straightforward way to update the store directly, without creating a new version. It's important to note, however, `produce` is specifically designed to work with **arrays** and **objects**. Other collection types, such as JavaScript [Sets](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) and [Maps](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), are not compatible with this utility. ### Data integration with `reconcile` When new information needs to be merged into an existing store `reconcile` can be useful. `reconcile` will determine the differences between new and existing data and initiate updates only when there are _changed_ values, thereby avoiding unnecessary updates. ```jsx import { createStore, reconcile } from \"solid-js/store\" const [data, setData] = createStore({ animals: ['cat', 'dog', 'bird', 'gorilla'] }) const newData = getNewData() // eg. contains ['cat', 'dog', 'bird', 'gorilla', 'koala'] setData('animals', reconcile(newData)) ``` In this example, the store will look for the differences between the existing and incoming data sets. Consequently, only `'koala'` - the new edition - will cause an update. ### Extracting raw data with `unwrap` When there is a need for dealing with data outside of a tracking scope, the `unwrap` utility offers a way to transform a store to a standard [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object). This conversion serves several important purposes. Firstly, it provides a snapshot of the current state without the processing overhead associated with reactivity. This can be useful in situations where an unaltered, non-reactive view of the data is needed. Additionally, `unwrap` provides a means to interface with third-party libraries or tools that anticipate regular JavaScript objects. This utility acts as a bridge to facilitate smooth integrations with external components and simplifies the incorporation of stores into various applications and workflows. ```jsx import { createStore, unwrap } from \"solid-js/store\" const [data, setData] = createStore({ animals: [\"cat\", \"dog\", \"bird\", \"gorilla\"], }) const rawData = unwrap(data) ``` To learn more about how to use Stores in practice, visit the [guide on complex state management](/guides/complex-state-management).", "term_freq": { "##": 7, "###": 7, "**arrays**": 1, "**lazily**": 1, "**objects**": 1, "*/": 2, "+=": 1, "---": 2, "-1": 4, "/*": 2, "//": 14, "//app": 2, "//developer": 6, "//github": 1, "/\u003e": 1, "/concepts/signals": 1, "/guides/complex-state-management": 1, "/reference/basic-reactivity/create-effect": 1, "/reference/basic-reactivity/create-signal": 1, "/reference/reactive-utilities/batch": 1, "10": 2, "10-12": 1, "109": 2, "11": 1, "\u003c/div\u003e": 4, "\u003c/h1\u003e": 4, "\u003c/p\u003e": 3, "\u003c/span\u003e": 1, "\u003c=": 2, "\u003cbutton": 3, "\u003cdiv\u003e": 4, "\u003ceraserlink": 1, "\u003ch1\u003ehello": 4, "\u003cp\u003euser": 3, "\u003cspan\u003e": 1, "==": 1, "=\u003e": 18, "\u003e-": 2, "\u003eadd": 3, "_changed_": 1, "_not_": 1, "_without_": 1, "ability": 1, "about": 1, "above": 1, "access": 6, "accessed": 3, "accessing": 6, "accomplished": 1, "acts": 2, "add": 1, "added": 1, "adding": 2, "additionally": 1, "adds": 1, "adduser": 6, "advanced": 1, "advantage": 1, "again": 1, "all": 3, "allowing": 1, "allows": 2, "already": 1, "also": 7, "alternatively": 1, "an": 21, "and": 29, "animals": 3, "anticipate": 1, "any": 2, "app": 4, "append": 1, "appending": 1, "application": 1, "applications": 1, "apply": 2, "approach": 2, "are": 13, "argument": 3, "arguments": 1, "array": 17, "arrays": 8, "as": 9, "assigning": 1, "assignment": 1, "associated": 2, "assuming": 1, "at": 8, "automatically": 2, "avoiding": 1, "based": 3, "batch": 1, "be": 13, "because": 1, "before": 1, "behavior": 1, "below": 1, "best": 1, "between": 2, "beyond": 2, "bird": 3, "both": 3, "bridge": 1, "but": 6, "by": 8, "call": 2, "calling": 1, "calls": 1, "can": 20, "canada": 4, "capabilities": 1, "cases": 1, "cat": 3, "cause": 1, "centralized": 1, "change": 2, "changes": 4, "changing": 1, "code": 1, "collection": 2, "com/solidjs/solid-docs/blob/head/src/routes/concepts/stores": 1, "combined": 1, "comparatively": 1, "comparison": 1, "compatible": 1, "complex": 5, "complexity": 1, "component": 1, "components": 2, "compute": 1, "computed": 1, "conditions": 2, "consequently": 1, "console": 6, "const": 20, "contains": 1, "control": 1, "convenient": 1, "conversion": 1, "copying": 1, "could": 1, "count": 3, "create": 2, "created": 4, "createeffect": 3, "creates": 1, "createsignal": 2, "createstore": 14, "creating": 2, "current": 1, "currentusers": 4, "data": 16, "dealing": 1, "debugging": 1, "del=": 1, "depend": 2, "dependencies": 1, "dependency": 1, "derived": 1, "description": 1, "designed": 1, "determine": 2, "differ": 1, "differences": 2, "differs": 1, "directly": 9, "discovering": 1, "distinct": 1, "distinction": 1, "do": 1, "does": 1, "dog": 3, "downstream": 1, "draft": 1, "dynamic": 5, "each": 1, "easier": 1, "edition": 1, "effect": 1, "effectively": 1, "effects": 3, "efficient": 6, "efficiently": 2, "eg": 1, "element": 2, "elements": 9, "elements=m6y55scnfdd_2hmrd4ojkq": 1, "elements=m6y55scnfdd_2hmrd4ojkq\u0026type=embed": 1, "eliminates": 1, "employing": 1, "england": 2, "entire": 1, "equal": 1, "equivalent": 6, "eraser": 2, "established": 2, "even-indexed": 1, "every": 1, "exact": 1, "example": 6, "except": 1, "existing": 10, "extends": 1, "external": 1, "extracting": 1, "facilitate": 1, "facilitates": 1, "facilitating": 1, "false": 20, "feature": 1, "felix909": 2, "filter": 1, "filtering": 2, "fine-grained": 3, "firstly": 1, "flexibility": 3, "following": 1, "follows": 2, "for": 23, "form": 1, "format": 1, "formed": 1, "from": 12, "full": 1, "function": 7, "functionalities": 1, "functions": 3, "general": 1, "getnewdata": 1, "gets": 1, "github-document": 1, "gives": 1, "global": 1, "goes": 1, "gorilla": 3, "grants": 1, "guide": 1, "handle": 2, "has": 1, "have": 1, "help": 1, "hidden": 1, "how": 3, "however": 2, "href=": 1, "https": 9, "i++": 1, "id": 14, "ids": 2, "if": 5, "immediately": 1, "immutable": 1, "import": 4, "important": 2, "in": 18, "include": 2, "includes": 2, "including": 1, "inclusive": 1, "incoming": 1, "incorporation": 1, "index": 4, "india": 2, "indices": 4, "individual": 2, "information": 2, "initial": 2, "initialization": 1, "initialize": 1, "initiate": 1, "ins=": 3, "inside": 1, "instead": 3, "integration": 1, "integrations": 1, "interface": 1, "into": 2, "introduces": 1, "io/workspace/madvfw5oryupjowslyk9": 1, "io/workspace/madvfw5oryupjowslyk9/preview": 1, "is": 23, "it": 10, "its": 2, "javascript": 4, "johny123": 2, "jsx": 17, "just": 2, "keep": 1, "key": 6, "keys": 7, "koala": 2, "last": 1, "lead": 1, "learn": 1, "length": 8, "let": 3, "libraries": 1, "lies": 1, "like": 6, "linked": 1, "little": 1, "location": 14, "log": 6, "loggedin": 31, "logic": 1, "look": 1, "made": 1, "maintain": 1, "make": 2, "makes": 1, "making": 3, "manage": 2, "management": 2, "managing": 1, "manipulation": 1, "many": 1, "mapping": 1, "maps": 1, "mdx": 1, "me": 2, "meaning": 1, "means": 2, "mechanism": 1, "merged": 2, "method": 2, "methods": 2, "michael584": 4, "might": 1, "modification": 2, "modify": 5, "modifying": 7, "more": 8, "most": 1, "mozilla": 6, "multi-setter": 1, "multiple": 4, "mutable": 1, "mysignal": 2, "names": 2, "navigation": 1, "need": 3, "needed": 1, "needs": 1, "nested": 7, "new": 17, "newdata": 2, "newlocation": 2, "newusername": 2, "newvalue": 1, "nigeria": 4, "non-reactive": 1, "not": 3, "note": 3, "now": 1, "numbers": 1, "object": 12, "objects": 10, "of": 36, "offers": 2, "old": 2, "on": 8, "once": 4, "onclick=": 3, "one": 3, "only": 5, "operator": 2, "option": 1, "or": 13, "order": 1, "org/en-us/docs/glossary/immutable": 1, "org/en-us/docs/glossary/mutable": 1, "org/en-us/docs/web/javascript/reference/global_objects/map": 1, "org/en-us/docs/web/javascript/reference/global_objects/object": 1, "org/en-us/docs/web/javascript/reference/global_objects/proxy": 1, "org/en-us/docs/web/javascript/reference/global_objects/set": 1, "other": 2, "otherusers": 2, "out": 2, "outputs": 1, "outside": 1, "overhead": 1, "overlapping": 1, "particular": 1, "particularly": 1, "pass": 1, "path": 11, "pattern": 1, "powerful": 1, "practice": 1, "precisely": 1, "preview=": 1, "primitive": 1, "print": 1, "processing": 1, "produce": 13, "properties": 13, "property": 7, "provide": 2, "provided": 1, "provides": 10, "proxy": 2, "purposes": 1, "range": 3, "rather": 2, "raw": 1, "rawdata": 1, "re-render": 1, "reactive": 2, "reactivity": 7, "read": 1, "reading": 1, "receive": 1, "receiving": 1, "reconcile": 6, "reduce": 1, "redundancy": 1, "referencing": 1, "referred": 1, "refers": 1, "regardless": 1, "regular": 2, "relies": 1, "relying": 1, "replacement": 1, "replacing": 1, "require": 1, "requirement": 1, "retrieval": 1, "retrieve": 1, "return": 5, "rules": 1, "same": 1, "scenarios": 1, "scope": 7, "select": 1, "separating": 1, "separation": 1, "serves": 1, "set": 7, "setdata": 3, "setmysignal": 1, "sets": 2, "setstore": 35, "setter": 5, "setters": 2, "setting": 2, "setusers": 3, "several": 4, "shallow": 1, "shared": 2, "should": 1, "signal": 4, "signals": 6, "similar": 1, "simplifies": 1, "single": 2, "situations": 1, "size": 1, "smooth": 1, "snapshot": 1, "so": 5, "solid": 2, "solid-js/store": 4, "specific": 4, "specifically": 2, "specify": 4, "specifying": 2, "spread": 2, "spreading": 1, "standard": 1, "starts": 2, "startswith": 2, "state": 16, "statement": 1, "static": 1, "step": 1, "store": 64, "stores": 13, "straightforward": 1, "string": 3, "strings": 1, "structures": 2, "subset": 2, "such": 2, "sync": 1, "synced": 1, "syntax": 13, "tags": 1, "target": 4, "targeted": 4, "targets": 1, "techniques": 2, "temporary": 1, "than": 5, "that": 15, "the": 92, "their": 3, "them": 1, "then": 1, "there": 3, "thereby": 2, "these": 4, "they": 4, "third-party": 1, "this": 24, "through": 2, "time": 1, "title": 1, "to": 61, "tools": 1, "top-level": 1, "track": 2, "tracked": 1, "tracking": 7, "tracy634": 2, "transform": 1, "transformations": 1, "tree": 1, "trees": 1, "trigger": 1, "triggered": 1, "triggers": 2, "true": 4, "tsx": 3, "types": 2, "unaltered": 1, "unlike": 1, "unnecessary": 1, "unwrap": 5, "up": 1, "update": 10, "updated": 3, "updates": 5, "updating": 3, "use": 4, "use_cases": 1, "used": 4, "useful": 3, "user": 14, "user\u003c/button\u003e": 3, "usercount": 13, "username": 18, "usernames": 1, "users": 63, "using": 8, "utilities": 1, "utility": 5, "valuable": 1, "value": 13, "values": 18, "various": 1, "versatility": 1, "version": 3, "via": 1, "view": 1, "visit": 1, "want": 1, "wanted": 1, "way": 8, "well-suited": 1, "were": 1, "what": 2, "when": 8, "whenever": 1, "where": 1, "which": 4, "while": 3, "will": 8, "with": 30, "within": 11, "without": 4, "won": 1, "work": 5, "workflows": 1, "works": 1, "would": 1, "wrapped": 1, "write": 1, "you": 22, "your": 2 }, "length": 2180 }, { "id": "0f777cea398a62d21724323b", "doc_id": "c1a5ca6b74715bf4ab445b6e", "title": "stormkit", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deployment-options/stormkit.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/stormkit.json", "content": "--- title: Stormkit order: 7 mainNavExclude: true use_cases: \u003e- spa deployment, serverless functions, static hosting, git deployment, production hosting tags: - stormkit - deployment - hosting - serverless - spa - static version: '1.0' description: \u003e- Deploy Solid apps as static sites or SPAs on Stormkit with serverless functions support and Git provider integration. --- [Stormkit](https://www.stormkit.io) is a deployment platform for static websites, single-page applications (SPAs), and serverless functions. 1. Log in to Stormkit. 2. Using the user interface, import your Solid project from one of the three supported Git providers (GitHub, GitLab, or Bitbucket). 3. Navigate to the project’s production environment in Stormkit or create a new environment if needed. 4. Verify the build command in your Stormkit configuration. By default, Stormkit CI will run `npm run build` but you can specify a custom build command on this page. 5. Check output folder, unless its specified Stormkit will try to upload contents of build folder. 6. Click the “Deploy Now” button to deploy your site. Stormkit CI will build your code and upload contents of it. Find more details on [Stormkit Documentation](https://stormkit.io/docs).", "term_freq": { "---": 2, "//github": 1, "//stormkit": 1, "//www": 1, "\u003e-": 2, "and": 3, "applications": 1, "apps": 1, "as": 1, "bitbucket": 1, "build": 5, "but": 1, "button": 1, "by": 1, "can": 1, "check": 1, "ci": 2, "click": 1, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/deployment-options/stormkit": 1, "command": 2, "configuration": 1, "contents": 2, "create": 1, "custom": 1, "default": 1, "deploy": 2, "deployment": 4, "description": 1, "details": 1, "documentation": 1, "environment": 2, "find": 1, "folder": 2, "for": 1, "from": 1, "functions": 3, "git": 3, "github": 1, "github-document": 1, "gitlab": 1, "hosting": 3, "https": 3, "if": 1, "import": 1, "in": 3, "integration": 1, "interface": 1, "io": 1, "io/docs": 1, "is": 1, "it": 1, "its": 1, "log": 1, "mainnavexclude": 1, "mdx": 1, "more": 1, "navigate": 1, "needed": 1, "new": 1, "now”": 1, "npm": 1, "of": 3, "on": 3, "one": 1, "or": 3, "order": 1, "output": 1, "page": 1, "platform": 1, "production": 2, "project": 1, "project’s": 1, "provider": 1, "providers": 1, "run": 2, "serverless": 4, "single-page": 1, "site": 1, "sites": 1, "solid": 2, "spa": 2, "spas": 2, "specified": 1, "specify": 1, "static": 4, "stormkit": 13, "support": 1, "supported": 1, "tags": 1, "the": 5, "this": 1, "three": 1, "title": 1, "to": 4, "true": 1, "try": 1, "unless": 1, "upload": 2, "use_cases": 1, "user": 1, "using": 1, "verify": 1, "version": 1, "websites": 1, "will": 3, "with": 1, "you": 1, "your": 4, "“deploy": 1 }, "length": 179 }, { "id": "3ff5d1626a47ac7adb3d1015", "doc_id": "a2fb61ea0d412bfb047c5e1e", "title": "streaming", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/data-fetching/streaming.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/streaming.json", "content": "--- title: \"Streaming\" --- In traditional server-rendered applications, the server must fetch all data before rendering and sending the page to the browser. If some queries are slow, this delays the initial load. **Streaming** solves this by sending the page’s HTML shell immediately and progressively streaming data-dependent sections as they become ready. When a query is accessed during a server-side render, Solid suspends the UI until the data resolves. By default, this suspension affects the entire page. To control this behavior, you can use suspense boundaries - regions of the component tree defined by a [`\u003cSuspense\u003e` component](/reference/components/suspense). It isolates asynchronous behavior to a specific section of the page. Content inside the boundary is managed by Solid’s concurrency system: if it isn’t ready, the boundary’s fallback UI is shown while the rest of the page renders and streams immediately. Once the data resolves, the server streams the final HTML for that section, replacing the fallback and letting users see and interact with most of the page much sooner. ```tsx import { Suspense, For } from \"solid-js\"; import { query, createAsync } from \"@solidjs/router\"; const getAccountStatsQuery = query(async () =\u003e { // ... Fetches account statistics. }, \"accountStats\"); const getRecentTransactionsQuery = query(async () =\u003e { // ... Fetches a list of recent transactions. }, \"recentTransactions\"); function Dashboard() { const stats = createAsync(() =\u003e getAccountStatsQuery()); const transactions = createAsync(() =\u003e getRecentTransactionsQuery()); return ( \u003cdiv\u003e \u003ch1\u003eDashboard\u003c/h1\u003e \u003cSuspense fallback={\u003cp\u003eLoading account stats...\u003c/p\u003e}\u003e \u003cFor each={stats()}\u003e {(stat) =\u003e ( \u003cp\u003e {stat.label}: {stat.value} \u003c/p\u003e )} \u003c/For\u003e \u003c/Suspense\u003e \u003cSuspense fallback={\u003cp\u003eLoading recent transactions...\u003c/p\u003e}\u003e \u003cFor each={transactions()}\u003e {(transaction) =\u003e ( \u003ch2\u003e {transaction.description} - {transaction.amount} \u003c/h2\u003e )} \u003c/For\u003e \u003c/Suspense\u003e \u003c/div\u003e ); } ``` For example, each `\u003cSuspense\u003e` component creates its own independent boundary. The server can stream the heading `\u003ch1\u003eDashboard\u003c/h1\u003e` immediately, while the `stats` and `transactions` are handled separately. If the `transactions` query is slow, only its boundary will display a fallback, while `stats` will render as soon as its data is ready. ## When to disable streaming While streaming is powerful, there are cases where it is better to wait for the data to load on the server. In these situations, you can use the `deferStream` option in `createAsync`. When `deferStream` is set to `true`, the server waits for the query to resolve before sending the initial HTML. A common reason to disable streaming is for Search Engine Optimization (SEO). Some search engine crawlers may not wait for streamed content to load. If critical data, such as a page title or meta description, affects SEO, it should be included in the initial server response. ```tsx import { query, createAsync } from \"@solidjs/router\"; const getArticleQuery = query(async () =\u003e { // ... Fetches an article. }, \"article\"); function ArticleHeader() { const article = createAsync(() =\u003e getArticleQuery(), { deferStream: true, }); return \u003ch1\u003e{article()?.title}\u003c/h1\u003e; } ```", "term_freq": { "##": 1, "**streaming**": 1, "---": 2, "//": 3, "//github": 1, "/reference/components/suspense": 1, "\u003c/div\u003e": 1, "\u003c/for\u003e": 2, "\u003c/h1\u003e": 1, "\u003c/h2\u003e": 1, "\u003c/p\u003e": 3, "\u003c/suspense\u003e": 2, "\u003cdiv\u003e": 1, "\u003cfor": 2, "\u003ch1\u003e": 1, "\u003ch1\u003edashboard\u003c/h1\u003e": 2, "\u003ch2\u003e": 1, "\u003cp\u003e": 1, "\u003cp\u003eloading": 2, "\u003csuspense": 2, "\u003csuspense\u003e": 2, "=\u003e": 8, "@solidjs/router": 2, "accessed": 1, "account": 2, "accountstats": 1, "affects": 2, "all": 1, "amount": 1, "an": 1, "and": 6, "applications": 1, "are": 3, "article": 4, "articleheader": 1, "as": 4, "async": 3, "asynchronous": 1, "be": 1, "become": 1, "before": 2, "behavior": 2, "better": 1, "boundaries": 1, "boundary": 3, "boundary’s": 1, "browser": 1, "by": 4, "can": 3, "cases": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/data-fetching/streaming": 1, "common": 1, "component": 3, "concurrency": 1, "const": 6, "content": 2, "control": 1, "crawlers": 1, "createasync": 6, "creates": 1, "critical": 1, "dashboard": 1, "data": 6, "data-dependent": 1, "default": 1, "deferstream": 3, "defined": 1, "delays": 1, "description": 2, "disable": 2, "display": 1, "during": 1, "each": 1, "each=": 2, "engine": 2, "entire": 1, "example": 1, "fallback": 3, "fallback=": 2, "fetch": 1, "fetches": 3, "final": 1, "for": 7, "from": 3, "function": 2, "getaccountstatsquery": 2, "getarticlequery": 2, "getrecenttransactionsquery": 2, "github-document": 1, "handled": 1, "heading": 1, "html": 3, "https": 1, "if": 4, "immediately": 3, "import": 3, "in": 4, "included": 1, "independent": 1, "initial": 3, "inside": 1, "interact": 1, "is": 9, "isn’t": 1, "isolates": 1, "it": 4, "its": 3, "label": 1, "letting": 1, "list": 1, "load": 3, "managed": 1, "may": 1, "mdx": 1, "meta": 1, "most": 1, "much": 1, "must": 1, "not": 1, "of": 5, "on": 1, "once": 1, "only": 1, "optimization": 1, "option": 1, "or": 1, "own": 1, "page": 6, "page’s": 1, "powerful": 1, "progressively": 1, "queries": 1, "query": 8, "ready": 3, "reason": 1, "recent": 2, "recenttransactions": 1, "regions": 1, "render": 2, "rendering": 1, "renders": 1, "replacing": 1, "resolve": 1, "resolves": 2, "response": 1, "rest": 1, "return": 2, "search": 2, "section": 2, "sections": 1, "see": 1, "sending": 3, "seo": 2, "separately": 1, "server": 6, "server-rendered": 1, "server-side": 1, "set": 1, "shell": 1, "should": 1, "shown": 1, "situations": 1, "slow": 2, "solid": 1, "solid-js": 1, "solid’s": 1, "solves": 1, "some": 2, "soon": 1, "sooner": 1, "specific": 1, "stat": 3, "statistics": 1, "stats": 5, "stream": 1, "streamed": 1, "streaming": 6, "streams": 2, "such": 1, "suspends": 1, "suspense": 2, "suspension": 1, "system": 1, "that": 1, "the": 30, "there": 1, "these": 1, "they": 1, "this": 4, "title": 3, "to": 10, "traditional": 1, "transaction": 3, "transactions": 6, "tree": 1, "true": 2, "tsx": 2, "ui": 2, "until": 1, "use": 2, "users": 1, "value": 1, "wait": 2, "waits": 1, "when": 3, "where": 1, "while": 4, "will": 2, "with": 1, "you": 2 }, "length": 435 }, { "id": "e908f7bfa873aa932a28a59b", "doc_id": "06de72b6919d34e231ab0229", "title": "style", "url": "file:///tmp/devour-github-216944658/src/routes/solid-meta/reference/meta/style.mdx", "type": "github-document", "source": "solid:solid-router", "path": "devour_data/docs/style-06de72b6.json", "content": "--- title: Style order: 4 use_cases: 'inline styles, critical css, theme styles, dynamic styling, css-in-js' tags: - style - css - inline - styling - head version: '1.0' description: \u003e- Add inline CSS styles to your Solid app's head with the Style component. Useful for critical CSS and dynamic styling needs in your application. --- `Style` is a component that adds the [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) element to your document's `head`. ```tsx twoslash import { Style } from \"@solidjs/meta\"; \u003cStyle\u003e {` body { background-color: #000; } `} \u003c/Style\u003e; ``` ## Usage ### Adding `style` tag The `Style` component can add CSS to style elements within your application. It is recommended to add styles in an external stylesheet and use a `Link` instead, rather than using this component, however. :::tip[Note] Styles within the `Style` component are not scoped. ::: ```tsx twoslash import { MetaProvider, Style } from \"@solidjs/meta\"; export default function Root() { return ( \u003cMetaProvider\u003e \u003cStyle\u003e{` p { color: #26b72b; } `}\u003c/Style\u003e \u003c/MetaProvider\u003e ); } ```", "term_freq": { "##": 1, "###": 1, "#000": 1, "#26b72b": 1, "---": 2, "///tmp/devour-github-216944658/src/routes/solid-meta/reference/meta/style": 1, "//developer": 1, "\u003c/metaprovider\u003e": 1, "\u003c/style\u003e": 2, "\u003cmetaprovider\u003e": 1, "\u003cstyle\u003e": 2, "\u003e-": 1, "@solidjs/meta": 2, "add": 3, "adding": 1, "adds": 1, "an": 1, "and": 2, "app": 1, "application": 2, "are": 1, "background-color": 1, "body": 1, "can": 1, "color": 1, "component": 5, "critical": 2, "css": 5, "css-in-js": 1, "default": 1, "description": 1, "document": 1, "dynamic": 2, "element": 1, "elements": 1, "export": 1, "external": 1, "file": 1, "for": 1, "from": 2, "function": 1, "github-document": 1, "head": 3, "however": 1, "https": 1, "import": 2, "in": 2, "inline": 3, "instead": 1, "is": 2, "it": 1, "link": 1, "mdx": 1, "metaprovider": 1, "mozilla": 1, "needs": 1, "not": 1, "note": 1, "order": 1, "org/en-us/docs/web/html/element/style": 1, "rather": 1, "recommended": 1, "return": 1, "root": 1, "scoped": 1, "solid": 1, "style": 12, "styles": 5, "stylesheet": 1, "styling": 3, "tag": 1, "tags": 1, "than": 1, "that": 1, "the": 4, "theme": 1, "this": 1, "tip": 1, "title": 1, "to": 4, "tsx": 2, "twoslash": 2, "usage": 1, "use": 1, "use_cases": 1, "useful": 1, "using": 1, "version": 1, "with": 1, "within": 2, "your": 4 }, "length": 146 }, { "id": "4c33ec0934ef4c2efc74a78a", "doc_id": "0db9672638dff0159fda288b", "title": "style", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/reference/meta/style.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/style-0db96726.json", "content": "--- title: Style order: 4 use_cases: 'inline styles, critical css, theme styles, dynamic styling, css-in-js' tags: - style - css - inline - styling - head version: '1.0' description: \u003e- Add inline CSS styles to your Solid app's head with the Style component. Useful for critical CSS and dynamic styling needs in your application. --- `Style` is a component that adds the [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) element to your document's `head`. ```tsx twoslash import { Style } from \"@solidjs/meta\"; \u003cStyle\u003e {` body { background-color: #000; } `} \u003c/Style\u003e; ``` ## Usage ### Adding `style` tag The `Style` component can add CSS to style elements within your application. It is recommended to add styles in an external stylesheet and use a `Link` instead, rather than using this component, however. :::tip[Note] Styles within the `Style` component are not scoped. ::: ```tsx twoslash import { MetaProvider, Style } from \"@solidjs/meta\"; export default function Root() { return ( \u003cMetaProvider\u003e \u003cStyle\u003e{` p { color: #26b72b; } `}\u003c/Style\u003e \u003c/MetaProvider\u003e ); } ```", "term_freq": { "##": 1, "###": 1, "#000": 1, "#26b72b": 1, "---": 2, "//developer": 1, "//github": 1, "\u003c/metaprovider\u003e": 1, "\u003c/style\u003e": 2, "\u003cmetaprovider\u003e": 1, "\u003cstyle\u003e": 2, "\u003e-": 1, "@solidjs/meta": 2, "add": 3, "adding": 1, "adds": 1, "an": 1, "and": 2, "app": 1, "application": 2, "are": 1, "background-color": 1, "body": 1, "can": 1, "color": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-meta/reference/meta/style": 1, "component": 5, "critical": 2, "css": 5, "css-in-js": 1, "default": 1, "description": 1, "document": 1, "dynamic": 2, "element": 1, "elements": 1, "export": 1, "external": 1, "for": 1, "from": 2, "function": 1, "github-document": 1, "head": 3, "however": 1, "https": 2, "import": 2, "in": 2, "inline": 3, "instead": 1, "is": 2, "it": 1, "link": 1, "mdx": 1, "metaprovider": 1, "mozilla": 1, "needs": 1, "not": 1, "note": 1, "order": 1, "org/en-us/docs/web/html/element/style": 1, "rather": 1, "recommended": 1, "return": 1, "root": 1, "scoped": 1, "solid": 1, "style": 12, "styles": 5, "stylesheet": 1, "styling": 3, "tag": 1, "tags": 1, "than": 1, "that": 1, "the": 4, "theme": 1, "this": 1, "tip": 1, "title": 1, "to": 4, "tsx": 2, "twoslash": 2, "usage": 1, "use": 1, "use_cases": 1, "useful": 1, "using": 1, "version": 1, "with": 1, "within": 2, "your": 4 }, "length": 147 }, { "id": "f2b4448ecf33278c403ee9f0", "doc_id": "d7a78a1142f175279972b450", "title": "style", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/style.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/style.json", "content": "--- title: style order: 7 use_cases: \u003e- inline styling, dynamic styles, css variables, responsive design, theme customization, animated styles tags: - styling - css - inline - variables - dynamic - properties version: '1.0' description: \u003e- Apply dynamic inline styles in SolidJS with string or object syntax. Set CSS properties and variables reactively for responsive component styling. --- Solid's style attribute lets you provide either a CSS string or an object where keys are CSS property names: ```tsx // string \u003cdiv style={`color: green; height: ${state.height}px`} /\u003e // object \u003cdiv style={{ color: \"green\", height: state.height + \"px\" }} /\u003e ``` Unlike [React's style attribute](https://reactjs.org/docs/dom-elements.html#style), Solid uses **element.style.setProperty** under the hood. This means you need to use the lower-case, dash-separated version of property names instead of the JavaScript camel-cased version, such as `background-color` rather than `backgroundColor`. This actually leads to better performance and consistency with SSR output. ```tsx // string \u003cdiv style={`color: green; background-color: ${state.color}; height: ${state.height}px`} /\u003e // object \u003cdiv style={{ color: \"green\", \"background-color\": state.color, height: state.height + \"px\" }} /\u003e ``` This also means you can set CSS variables! For example: ```tsx // set css variable \u003cdiv style={{ \"--my-custom-color\": state.themeColor }} /\u003e ```", "term_freq": { "**element": 1, "---": 2, "--my-custom-color": 1, "//": 5, "//github": 1, "//reactjs": 1, "/\u003e": 5, "\u003cdiv": 5, "\u003e-": 2, "actually": 1, "also": 1, "an": 1, "and": 2, "animated": 1, "apply": 1, "are": 1, "as": 1, "attribute": 2, "background-color": 3, "backgroundcolor": 1, "better": 1, "camel-cased": 1, "can": 1, "color": 6, "com/solidjs/solid-docs/blob/head/src/routes/reference/jsx-attributes/style": 1, "component": 1, "consistency": 1, "css": 7, "customization": 1, "dash-separated": 1, "description": 1, "design": 1, "dynamic": 3, "either": 1, "example": 1, "for": 2, "github-document": 1, "green": 4, "height": 8, "hood": 1, "html#style": 1, "https": 2, "in": 1, "inline": 3, "instead": 1, "javascript": 1, "keys": 1, "leads": 1, "lets": 1, "lower-case": 1, "mdx": 1, "means": 2, "names": 2, "need": 1, "object": 4, "of": 2, "or": 2, "order": 1, "org/docs/dom-elements": 1, "output": 1, "performance": 1, "properties": 2, "property": 2, "provide": 1, "px": 4, "rather": 1, "react": 1, "reactively": 1, "responsive": 2, "set": 3, "setproperty**": 1, "solid": 2, "solidjs": 1, "ssr": 1, "state": 7, "string": 4, "style": 5, "style=": 5, "styles": 3, "styling": 3, "such": 1, "syntax": 1, "tags": 1, "than": 1, "the": 3, "theme": 1, "themecolor": 1, "this": 3, "title": 1, "to": 2, "tsx": 3, "under": 1, "unlike": 1, "use": 1, "use_cases": 1, "uses": 1, "variable": 1, "variables": 4, "version": 3, "where": 1, "with": 2, "you": 3 }, "length": 199 }, { "id": "06a9be32ee00516e17da21c0", "doc_id": "7c840352253cb9eece2b70b9", "title": "styling-your-components", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-your-components.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/styling-your-components.json", "content": "--- title: Styling your components order: 1 use_cases: \u003e- styling components, choosing css solutions, css frameworks, preprocessors, css-in-js tags: - styling - css - preprocessors - css-in-js - frameworks version: '1.0' description: \u003e- Explore Solid's flexible styling options: CSS preprocessors, CSS Modules, CSS-in-JS, and utility frameworks for component styling needs. --- Solid provides flexible and versatile ways to style your components. [`class` and `style` bindings](/concepts/components/class-style) can both be added to dynamically style components with plain CSS. Solid also supports a range of styling methods - from traditional CSS preprocessors to modern CSS-in-JS solutions - ensuring the flexibility to choose the best approach for your projects. ## CSS preprocessors \u003cdiv class=\"flex flex-col md:grid md:grid-cols-2 md:grid-rows-1 gap-3\"\u003e \u003cImageLinks title=\"SASS\" href=\"/guides/styling-components/sass\" logo=\"sass\" /\u003e \u003cImageLinks title=\"LESS\" href=\"/guides/styling-components/less\" logo=\"less\" /\u003e \u003c/div\u003e SASS LESS ## CSS modules \u003cImageLinks title=\"CSS Modules\" href=\"/guides/styling-components/css-modules\" logo=\"cssmodules\" /\u003e ## CSS-in-JS CSS-in-JS is a modern approach to styling components. Within the [Solid ecosystem](https://www.solidjs.com/ecosystem), there are various libraries and solutions available for working with CSS-in-JS, including but not limited to: - [Solid Styled Components](https://github.com/solidjs/solid-styled-components) - [Solid Styled JSX](https://github.com/solidjs/solid-styled-jsx) CSS-in-JS libraries often come with their own set of APIs and methods for defining, updating, and applying styles dynamically. Many also offer features like theming, media queries, and server-side rendering support right out of the box. **Note:** Before choosing a CSS-in-JS library, it is recommended to check its compatibility with Solid. ### Macaron \u003cImageLinks title=\"Macaron\" href=\"/guides/styling-components/macaron\" logo=\"macaron\" /\u003e ## CSS frameworks CSS frameworks provide pre-styled components and utility classes to speed up development. \u003cdiv class=\"flex flex-col md:grid md:grid-cols-2 md:grid-rows-1 gap-3\"\u003e \u003cImageLinks title=\"Tailwind CSS\" href=\"/guides/styling-components/tailwind\" logo=\"tailwind\" /\u003e \u003cImageLinks title=\"UnoCSS\" href=\"/guides/styling-components/uno\" logo=\"uno\" /\u003e \u003c/div\u003e", "term_freq": { "##": 4, "###": 1, "**": 1, "**note": 1, "---": 2, "//github": 3, "//www": 1, "/\u003e": 6, "/concepts/components/class-style": 1, "/guides/styling-components/css-modules": 1, "/guides/styling-components/less": 1, "/guides/styling-components/macaron": 1, "/guides/styling-components/sass": 1, "/guides/styling-components/tailwind": 1, "/guides/styling-components/uno": 1, "\u003c/div\u003e": 2, "\u003cdiv": 2, "\u003cimagelinks": 6, "\u003e-": 2, "added": 1, "also": 2, "and": 8, "apis": 1, "applying": 1, "approach": 2, "are": 1, "available": 1, "be": 1, "before": 1, "best": 1, "bindings": 1, "both": 1, "box": 1, "but": 1, "can": 1, "check": 1, "choose": 1, "choosing": 2, "class": 1, "class=": 2, "classes": 1, "com/ecosystem": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/styling-your-components": 1, "com/solidjs/solid-styled-components": 1, "com/solidjs/solid-styled-jsx": 1, "come": 1, "compatibility": 1, "component": 1, "components": 7, "css": 13, "css-in-js": 9, "cssmodules": 1, "defining": 1, "description": 1, "development": 1, "dynamically": 2, "ecosystem": 1, "ensuring": 1, "explore": 1, "features": 1, "flex": 2, "flex-col": 2, "flexibility": 1, "flexible": 2, "for": 4, "frameworks": 5, "from": 1, "gap-3": 2, "github-document": 1, "grid": 2, "grid-cols-2": 2, "grid-rows-1": 2, "href=": 6, "https": 4, "including": 1, "is": 2, "it": 1, "its": 1, "jsx": 1, "less": 3, "libraries": 2, "library": 1, "like": 1, "limited": 1, "logo=": 6, "macaron": 3, "many": 1, "md": 6, "mdx": 1, "media": 1, "methods": 2, "modern": 2, "modules": 3, "needs": 1, "not": 1, "of": 3, "offer": 1, "often": 1, "options": 1, "order": 1, "out": 1, "own": 1, "plain": 1, "pre-styled": 1, "preprocessors": 5, "projects": 1, "provide": 1, "provides": 1, "queries": 1, "range": 1, "recommended": 1, "rendering": 1, "right": 1, "sass": 3, "server-side": 1, "set": 1, "solid": 7, "solidjs": 1, "solutions": 3, "speed": 1, "style": 3, "styled": 2, "styles": 1, "styling": 7, "styling-your-components": 1, "support": 1, "supports": 1, "tags": 1, "tailwind": 2, "the": 4, "their": 1, "theming": 1, "there": 1, "title": 1, "title=": 6, "to": 8, "traditional": 1, "uno": 1, "unocss": 1, "up": 1, "updating": 1, "use_cases": 1, "utility": 2, "various": 1, "versatile": 1, "version": 1, "ways": 1, "with": 4, "within": 1, "working": 1, "your": 3 }, "length": 297 }, { "id": "06d173bb51c2f71c30cae1fc", "doc_id": "8d981150ac3f1a7d555b77d4", "title": "suspense-list", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/suspense-list.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/suspense-list.json", "content": "--- title: \u003cSuspenseList\u003e order: 5 use_cases: \u003e- coordinating loading, multiple async, loading sequences, layout stability, parallel data fetching tags: - suspense - async - loading - coordination - experimental - components version: '1.0' description: \u003e- Coordinate multiple Suspense components in SolidJS. Control reveal order and manage loading states for parallel async operations smoothly. --- SuspenseList allows for coordinating multiple parallel Suspense and SuspenseList components. It controls the order in which content is revealed to reduce layout thrashing and has an option to collapse or hide fallback states. ```ts import { SuspenseList } from \"solid-js\" import type { JSX } from \"solid-js\" function SuspenseList(props: { children: JSX.Element revealOrder: \"forwards\" | \"backwards\" | \"together\" tail?: \"collapsed\" | \"hidden\" }): JSX.Element ``` **Note**: SuspenseList is still in the experimental stage and does not have full `SSR` support. Here's an example of how to use SuspenseList: ```tsx \u003cSuspenseList revealOrder=\"forwards\" tail=\"collapsed\"\u003e \u003cProfileDetails user={resource.user} /\u003e \u003cSuspense fallback={\u003ch2\u003eLoading posts...\u003c/h2\u003e}\u003e \u003cProfileTimeline posts={resource.posts} /\u003e \u003c/Suspense\u003e \u003cSuspense fallback={\u003ch2\u003eLoading fun facts...\u003c/h2\u003e}\u003e \u003cProfileTrivia trivia={resource.trivia} /\u003e \u003c/Suspense\u003e \u003c/SuspenseList\u003e ``` ## Props | Name | Type | Default | Description | | ------------- | ----------------------------------------- | ------------ | --------------------------------------------------------------------------- | | `revealOrder` | `\"forwards\" \\| \"backwards\" \\| \"together\"` | `\"forwards\"` | Determines the order in which the SuspenseList children should be revealed. | | `tail` | `\"collapsed\" \\| \"hidden\"` | `undefined` | TODO | ### `revealOrder` `\"forwards\" | \"backwards\" | \"together\"` - `\"forwards\"`: Reveals each item in the list once the previous item has finished rendering. This is the default. - `\"backwards\"`: Reveals each item in the list once the next item has finished rendering. - `\"together\"`: Reveals all items in the list at the same time. ### `tail` `\"collapsed\" | \"hidden\"`", "term_freq": { "##": 1, "###": 2, "**note**": 1, "---": 2, "------------": 1, "-------------": 1, "-----------------------------------------": 1, "---------------------------------------------------------------------------": 1, "//github": 1, "/\u003e": 3, "\u003c/h2\u003e": 2, "\u003c/suspense\u003e": 2, "\u003c/suspenselist\u003e": 1, "\u003ch2\u003eloading": 2, "\u003cprofiledetails": 1, "\u003cprofiletimeline": 1, "\u003cprofiletrivia": 1, "\u003csuspense": 2, "\u003csuspenselist": 1, "\u003csuspenselist\u003e": 1, "\u003e-": 2, "\\|": 3, "all": 1, "allows": 1, "an": 2, "and": 4, "async": 3, "at": 1, "backwards": 4, "be": 1, "children": 2, "collapse": 1, "collapsed": 4, "com/solidjs/solid-docs/blob/head/src/routes/reference/components/suspense-list": 1, "components": 3, "content": 1, "control": 1, "controls": 1, "coordinate": 1, "coordinating": 2, "coordination": 1, "data": 1, "default": 2, "description": 2, "determines": 1, "does": 1, "each": 2, "element": 2, "example": 1, "experimental": 2, "facts": 1, "fallback": 1, "fallback=": 2, "fetching": 1, "finished": 2, "for": 2, "forwards": 6, "from": 2, "full": 1, "fun": 1, "function": 1, "github-document": 1, "has": 3, "have": 1, "here": 1, "hidden": 3, "hide": 1, "how": 1, "https": 1, "import": 2, "in": 7, "is": 3, "it": 1, "item": 4, "items": 1, "jsx": 3, "layout": 2, "list": 3, "loading": 4, "manage": 1, "mdx": 1, "multiple": 3, "name": 1, "next": 1, "not": 1, "of": 1, "once": 2, "operations": 1, "option": 1, "or": 1, "order": 4, "parallel": 3, "posts": 2, "posts=": 1, "previous": 1, "props": 2, "reduce": 1, "rendering": 2, "resource": 3, "reveal": 1, "revealed": 2, "revealorder": 3, "revealorder=": 1, "reveals": 3, "same": 1, "sequences": 1, "should": 1, "smoothly": 1, "solid-js": 2, "solidjs": 1, "ssr": 1, "stability": 1, "stage": 1, "states": 2, "still": 1, "support": 1, "suspense": 3, "suspense-list": 1, "suspenselist": 7, "tags": 1, "tail": 3, "tail=": 1, "the": 11, "this": 1, "thrashing": 1, "time": 1, "title": 1, "to": 3, "todo": 1, "together": 4, "trivia": 1, "trivia=": 1, "ts": 1, "tsx": 1, "type": 2, "undefined": 1, "use": 1, "use_cases": 1, "user": 1, "user=": 1, "version": 1, "which": 2 }, "length": 254 }, { "id": "fe1f0aea932fcbec6b813c35", "doc_id": "22e5d1cef33b52ba659d93c1", "title": "suspense", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/suspense.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/suspense.json", "content": "--- title: \u003cSuspense\u003e order: 5 use_cases: \u003e- async data, loading states, data fetching, api calls, lazy loading, user experience tags: - suspense - async - loading - resources - components - data-fetching version: '1.0' description: \u003e- Handle async operations elegantly in SolidJS with Suspense. Show loading states while resources load without blocking UI rendering. --- A component that tracks all resources read under it and shows a fallback placeholder state until they are resolved. What makes `Suspense` different than `Show` is that it is non-blocking in the sense that both branches exist at the same time even if not currently in the DOM. This means that the fallback can be rendered while the children are loading. This is useful for loading states and other asynchronous operations. ```tsx import { Suspense } from \"solid-js\" import type { JSX } from \"solid-js\" function Suspense(props: { fallback?: JSX.Element children: JSX.Element }): JSX.Element ``` Here's an example of a `Suspense` component that shows a loading spinner while the `User` component is loading. ```tsx \u003cSuspense fallback={\u003cLoadingSpinner /\u003e}\u003e \u003cAsyncComponent /\u003e \u003c/Suspense\u003e ``` ## Nested Suspense `\u003cSuspense\u003e` is triggered whenever a resource is read under the suspense boundary, and waits until all resources read under the suspense boundary have resolved. Often, however, you may not want this behavior. For example, if your entire page is wrapped in suspense, you may not want a resource that only populates a certain part of the page to trigger suspense. In that case, you can wrap that resource usage in its own suspense boundary, and the resource will only trigger the closest suspense boundary. For example, in the code below, only the `title()` resource will trigger the top level suspense boundary, and only the `data()` resource will trigger the nested suspense boundary: ```jsx const MyComponent = () =\u003e { const [title] = createResource(async () =\u003e { /* fetcher code here */ }) const [data] = createResource(async () =\u003e { /* fetcher code here */ }) \u003cSuspense\u003e \u003ch1\u003e{title()}\u003c/h1\u003e \u003cSuspense\u003e \u003cDataComponent\u003e{data()}\u003c/DataComponent\u003e \u003c/Suspense\u003e \u003c/Suspense\u003e } ``` ## The purpose of `\u003cSuspense\u003e` To understand the purpose of suspense, let's consider the following code snippets. These snippets will have some drawbacks which we will solve by using suspense. We will also see how it is possible to use `Suspense` yet not reap its benefits. Our example use case is to display a user profile. A naive snippet would look like this: ```jsx const MyComponentWithOptionalChaining = () =\u003e { const [profile] = createResource(async () =\u003e { /* fetcher code here */ }) return ( \u003c\u003e \u003cdiv\u003e{profile()?.name}\u003c/div\u003e \u003cdiv\u003e{profile()?.email}\u003c/div\u003e \u003c/\u003e ) } ``` In this code, `profile()` starts as `undefined`, and when the fetcher code finishes, resolves to an object with `name` and `email` properties. Although the resource has not resolved yet, the two `div`s are already created and attached to the document body, albeit with empty text nodes. Once the resource resolves, the `div`s are updated with the appropriate data. The downside of this approach is that the user is shown an empty component - let's see if we can do better than that in this next snippet: ```jsx const MyComponentWithShow = () =\u003e { const [profile] = createResource(async () =\u003e { /* fetcher code here */ }) return ( \u003cShow when={profile()} fallback={\u003cdiv\u003efetching user data\u003c/div\u003e}\u003e \u003cdiv\u003e{profile().name}\u003c/div\u003e \u003cdiv\u003e{profile().email}\u003c/div\u003e \u003c/Show\u003e ) } ``` In this snippet, we first show a fallback when the resource hasn't resolved yet, and then switch to showing the profile data once it has. This results in a better user experience. On the other hand, there is a slight downside to this approach. In our first example (using optional chaining), the divs were created immediately, and once the resource resolves all that is needed to be done is to fill in the text of the `div`s. But in our second example (using `\u003cShow\u003e`), the `div`s are only created once the resource has resolved, which means there is more work that needs to be done after the resource has resolved before the data can be shown to the user (of course, in this toy example the amount of DOM work is relatively trivial). We can have the best of both worlds by using {\"\u003cSuspense\u003e\"}: ```jsx const MyComponentWithSuspense = () =\u003e { const [profile] = createResource(async () =\u003e { /* fetcher code here */ }) return ( \u003cSuspense fallback={\u003cdiv\u003efetching user data\u003c/div\u003e}\u003e \u003cdiv\u003e{profile()?.name}\u003c/div\u003e \u003cdiv\u003e{profile()?.email}\u003c/div\u003e \u003c/Suspense\u003e ) } ``` In this case, the `div`s are created immediately, but instead of being attached to the document body, the fallback is shown. Once the resource resolves, the text in the `div`s is updated, and then they are attached to the document (and the fallback removed). It is important to note that _the execution of the component does not pause_ when using suspense. Instead, when a resource is read under a suspense boundary, it ensures that the nodes are not attached to the document until after the resource has resolved. Suspense allows us to have the best of both worlds: do as much work as we can _before_ the resource resolves, and also show a fallback until then. With this in mind, we can understand that there isn't much gained from suspense in the following code: ```jsx const MyComponentWithSuspenseAndShow = () =\u003e { const [profile] = createResource(async () =\u003e { /* fetcher code here */ }) return ( \u003cSuspense fallback={\u003cdiv\u003efetching user data\u003c/div\u003e}\u003e \u003cShow when={profile()}\u003e \u003cdiv\u003e{profile().name}\u003c/div\u003e \u003cdiv\u003e{profile().email}\u003c/div\u003e \u003c/Show\u003e \u003c/Suspense\u003e ) } ``` In this code, we don't create _any_ DOM nodes inside {\"\u003cSuspense\u003e\"} before the resource resolves, so it is pretty much the same as the second example where we only used `\u003cShow\u003e`. :::note Suspense is triggered by reading a resource inside the {\"\u003cSuspense\u003e\"}{\" \"} boundary. Components wrapped with suspense still run fully, just as they would without suspense. However, code wrapped in `onMount` and `createEffect` only run after the resource resolves. ::: ## Props | Name | Type | Description | | :--------- | :------------ | :--------------------------------------------------------------- | | `fallback` | `JSX.Element` | The fallback component to render while the children are loading. |", "term_freq": { "##": 3, "*/": 6, "---": 2, "---------": 1, "------------": 1, "---------------------------------------------------------------": 1, "/*": 6, "//github": 1, "/\u003e": 2, "\u003c/\u003e": 1, "\u003c/datacomponent\u003e": 1, "\u003c/div\u003e": 8, "\u003c/h1\u003e": 1, "\u003c/show\u003e": 2, "\u003c/suspense\u003e": 5, "\u003c\u003e": 1, "\u003casynccomponent": 1, "\u003cdatacomponent\u003e": 1, "\u003cdiv\u003e": 8, "\u003cdiv\u003efetching": 3, "\u003ch1\u003e": 1, "\u003cloadingspinner": 1, "\u003cshow": 2, "\u003cshow\u003e": 2, "\u003csuspense": 3, "\u003csuspense\u003e": 8, "=\u003e": 11, "\u003e-": 2, "_any_": 1, "_before_": 1, "_the": 1, "after": 3, "albeit": 1, "all": 3, "allows": 1, "already": 1, "also": 2, "although": 1, "amount": 1, "an": 3, "and": 14, "api": 1, "approach": 2, "appropriate": 1, "are": 9, "as": 5, "async": 9, "asynchronous": 1, "at": 1, "attached": 4, "be": 4, "before": 2, "behavior": 1, "being": 1, "below": 1, "benefits": 1, "best": 2, "better": 2, "blocking": 1, "body": 2, "both": 3, "boundary": 8, "branches": 1, "but": 2, "by": 3, "calls": 1, "can": 7, "case": 3, "certain": 1, "chaining": 1, "children": 3, "closest": 1, "code": 13, "com/solidjs/solid-docs/blob/head/src/routes/reference/components/suspense": 1, "component": 6, "components": 2, "consider": 1, "const": 11, "course": 1, "create": 1, "created": 4, "createeffect": 1, "createresource": 6, "currently": 1, "data": 8, "data-fetching": 1, "data\u003c/div\u003e": 3, "description": 2, "different": 1, "display": 1, "div": 6, "divs": 1, "do": 2, "document": 4, "does": 1, "dom": 3, "don": 1, "done": 2, "downside": 2, "drawbacks": 1, "elegantly": 1, "element": 4, "email": 5, "empty": 2, "ensures": 1, "entire": 1, "even": 1, "example": 8, "execution": 1, "exist": 1, "experience": 2, "fallback": 9, "fallback=": 4, "fetcher": 7, "fetching": 1, "fill": 1, "finishes": 1, "first": 2, "following": 2, "for": 3, "from": 3, "fully": 1, "function": 1, "gained": 1, "github-document": 1, "hand": 1, "handle": 1, "has": 5, "hasn": 1, "have": 4, "here": 7, "how": 1, "however": 2, "https": 1, "if": 3, "immediately": 2, "import": 2, "important": 1, "in": 21, "inside": 2, "instead": 2, "is": 22, "isn": 1, "it": 7, "its": 2, "jsx": 10, "just": 1, "lazy": 1, "let": 2, "level": 1, "like": 1, "load": 1, "loading": 9, "look": 1, "makes": 1, "may": 2, "mdx": 1, "means": 2, "mind": 1, "more": 1, "much": 3, "mycomponent": 1, "mycomponentwithoptionalchaining": 1, "mycomponentwithshow": 1, "mycomponentwithsuspense": 1, "mycomponentwithsuspenseandshow": 1, "naive": 1, "name": 6, "needed": 1, "needs": 1, "nested": 2, "next": 1, "nodes": 3, "non-blocking": 1, "not": 7, "note": 2, "object": 1, "of": 12, "often": 1, "on": 1, "once": 5, "only": 7, "onmount": 1, "operations": 2, "optional": 1, "order": 1, "other": 2, "our": 3, "own": 1, "page": 2, "part": 1, "pause_": 1, "placeholder": 1, "populates": 1, "possible": 1, "pretty": 1, "profile": 17, "properties": 1, "props": 2, "purpose": 2, "read": 4, "reading": 1, "reap": 1, "relatively": 1, "removed": 1, "render": 1, "rendered": 1, "rendering": 1, "resolved": 7, "resolves": 7, "resource": 19, "resources": 4, "results": 1, "return": 4, "run": 2, "same": 2, "second": 2, "see": 2, "sense": 1, "show": 4, "showing": 1, "shown": 3, "shows": 2, "slight": 1, "snippet": 3, "snippets": 2, "so": 1, "solid-js": 2, "solidjs": 1, "solve": 1, "some": 1, "spinner": 1, "starts": 1, "state": 1, "states": 3, "still": 1, "suspense": 26, "switch": 1, "tags": 1, "text": 3, "than": 2, "that": 15, "the": 64, "then": 3, "there": 3, "these": 1, "they": 3, "this": 14, "time": 1, "title": 4, "to": 18, "top": 1, "toy": 1, "tracks": 1, "trigger": 4, "triggered": 2, "trivial": 1, "tsx": 2, "two": 1, "type": 2, "ui": 1, "undefined": 1, "under": 4, "understand": 2, "until": 4, "updated": 2, "us": 1, "usage": 1, "use": 2, "use_cases": 1, "used": 1, "useful": 1, "user": 9, "using": 5, "version": 1, "waits": 1, "want": 2, "we": 9, "were": 1, "what": 1, "when": 4, "when=": 2, "whenever": 1, "where": 1, "which": 2, "while": 4, "will": 6, "with": 6, "without": 2, "work": 3, "worlds": 2, "would": 2, "wrap": 1, "wrapped": 3, "yet": 3, "you": 3, "your": 1 }, "length": 938 }, { "id": "a2e9c043f089632828167d16", "doc_id": "a6b7c716bbebfc5093686458", "title": "switch-and-match", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/switch-and-match.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/switch-and-match.json", "content": "--- title: \u003cSwitch\u003e / \u003cMatch\u003e order: 5 use_cases: \u003e- multiple conditions, routing, complex branching, state machines, multi-way decisions, replacing if-else chains tags: - conditional - routing - control-flow - components - branching - switch version: '1.0' description: \u003e- Handle multiple exclusive conditions in SolidJS with Switch and Match. Clean alternative to if-else chains for complex conditional rendering. --- Useful for when there are more than 2 mutual exclusive conditions. It is a more flexible version of the if-else-if-else-if-else-... chain. ```ts import { Switch, Match } from \"solid-js\" import type { MatchProps, JSX } from \"solid-js\" function Switch(props: { fallback?: JSX.Element children: JSX.Element }): () =\u003e JSX.Element type MatchProps\u003cT\u003e = { when: T | undefined | null | false children: JSX.Element | ((item: T) =\u003e JSX.Element) } function Match\u003cT\u003e(props: MatchProps\u003cT\u003e) ``` A super simple implementation of this component would be: ```tsx function Switch(props) { let children = props.children if (!Array.isArray(children)) children = [children] for (let i = 0; i \u003c children.length; i++) { const child = children[i] if (child.props.when) return child } return props.fallback } ``` For example, it can be used to perform basic routing: ```tsx \u003cSwitch fallback={\u003cdiv\u003eNot Found\u003c/div\u003e}\u003e \u003cMatch when={state.route === \"home\"}\u003e \u003cHome /\u003e \u003c/Match\u003e \u003cMatch when={state.route === \"settings\"}\u003e \u003cSettings /\u003e \u003c/Match\u003e \u003c/Switch\u003e ``` Match also supports function children to serve as keyed flow. ## Props ### Switch | Name | Type | Default | Description | | ---------- | ------------- | ----------- | -------------------------------------------------------------------------------- | | `fallback` | `JSX.Element` | `undefined` | The fallback element to render if no `Match` component has a truthy `when` prop. | ### Match | Name | Type | Default | Description | | ------ | --------------------------------- | ----------- | ------------------------------------------------------------------------- | | `when` | `T \\| undefined \\| null \\| false` | `undefined` | The condition to check. If it is truthy, the `children` will be rendered. |", "term_freq": { "##": 1, "###": 2, "---": 2, "------": 1, "----------": 1, "-----------": 2, "-------------": 1, "---------------------------------": 1, "-------------------------------------------------------------------------": 1, "--------------------------------------------------------------------------------": 1, "//github": 1, "/\u003e": 2, "\u003c/match\u003e": 2, "\u003c/switch\u003e": 1, "\u003cdiv\u003enot": 1, "\u003chome": 1, "\u003cmatch": 2, "\u003cmatch\u003e": 1, "\u003csettings": 1, "\u003cswitch": 1, "\u003cswitch\u003e": 1, "===": 2, "=\u003e": 2, "\u003e-": 2, "\\|": 3, "also": 1, "alternative": 1, "and": 1, "are": 1, "array": 1, "as": 1, "basic": 1, "be": 3, "branching": 2, "can": 1, "chain": 1, "chains": 2, "check": 1, "child": 3, "children": 11, "clean": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/components/switch-and-match": 1, "complex": 2, "component": 2, "components": 1, "condition": 1, "conditional": 2, "conditions": 3, "const": 1, "control-flow": 1, "decisions": 1, "default": 2, "description": 3, "element": 7, "example": 1, "exclusive": 2, "fallback": 4, "fallback=": 1, "false": 2, "flexible": 1, "flow": 1, "for": 4, "found\u003c/div\u003e": 1, "from": 2, "function": 4, "github-document": 1, "handle": 1, "has": 1, "home": 1, "https": 1, "i++": 1, "if": 4, "if-else": 2, "if-else-if-else-if-else-": 1, "implementation": 1, "import": 2, "in": 1, "is": 2, "isarray": 1, "it": 3, "item": 1, "jsx": 7, "keyed": 1, "length": 1, "let": 2, "machines": 1, "match": 5, "match\u003ct\u003e": 1, "matchprops": 1, "matchprops\u003ct\u003e": 2, "mdx": 1, "more": 2, "multi-way": 1, "multiple": 2, "mutual": 1, "name": 2, "no": 1, "null": 2, "of": 2, "order": 1, "perform": 1, "prop": 1, "props": 7, "render": 1, "rendered": 1, "rendering": 1, "replacing": 1, "return": 2, "route": 2, "routing": 3, "serve": 1, "settings": 1, "simple": 1, "solid-js": 2, "solidjs": 1, "state": 3, "super": 1, "supports": 1, "switch": 6, "switch-and-match": 1, "tags": 1, "than": 1, "the": 4, "there": 1, "this": 1, "title": 1, "to": 5, "truthy": 2, "ts": 1, "tsx": 2, "type": 4, "undefined": 4, "use_cases": 1, "used": 1, "useful": 1, "version": 2, "when": 5, "when=": 2, "will": 1, "with": 1, "would": 1 }, "length": 258 }, { "id": "774a4a57f3f6206e0c8f6246", "doc_id": "553ba1befed16c2801302b73", "title": "tailwind-v3", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/tailwind-v3.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/tailwind-v3.json", "content": "--- title: Tailwind CSS v3 order: 7 mainNavExclude: true use_cases: \u003e- utility-first css, rapid prototyping, responsive design, consistent styling, atomic css classes tags: - styling - tailwind - utility-css - responsive - postcss - atomic-css version: '1.0' description: \u003e- Set up Tailwind CSS v3 in Solid apps for utility-first styling, rapid development, and consistent responsive design patterns. --- [Tailwind CSS v3](https://v3.tailwindcss.com/) is an on-demand utility CSS library that integrates seamlessly with Solid as a built-in PostCSS plugin. ## Installation 1. Install Tailwind CSS as a development dependency: ```package-install-dev tailwindcss@3 postcss autoprefixer ``` 2. Next, run the init command to generate both `tailwind.config.js` and `postcss.config.js`. ```package-exec tailwindcss init -p ``` 3. Since Tailwind CSS is configuration-driven, after initializing, a `tailwind.config.js` file will be created at the root of your project directory: ```js /** @type {import('tailwindcss').Config} */ module.exports = { content: [\"./index.html\", \"./src/**/*.{js,ts,jsx,tsx}\"], theme: { extend: {}, }, plugins: [], }; ``` For a deeper dive into configuration, you can check out the [Tailwind Official Documentation](https://tailwindcss.com/docs/configuration). ## Add Tailwind directives In your `src/index.css` file, add the following Tailwind directives: ```css @tailwind base; @tailwind components; @tailwind utilities; ``` These directives inform PostCSS that you're using Tailwind and establish the order of the directives. You can append custom CSS below these directives. ## Import Tailwind CSS Import your `index.css` file into the root `index.jsx` or `index.tsx` file: ```jsx import { render } from \"solid-js/web\" import App from \"./App\" import \"./index.css\" render(() =\u003e \u003cApp /\u003e, document.getElementById('root') as HTMLElement); ``` ## Usage With Tailwind CSS set up, you can now utilize its utility classes. For instance, if you previously had a `Card.css` file, you can replace or remove it: ``` /* src/components/Card.css */ /* Remove or replace these styles with Tailwind utility classes */ ``` Update your components to use Tailwind's utility classes: ```jsx /* src/components/Card.jsx */ function Card() { return ( \u003cdiv class=\"grid place-items-center min-h-screen\"\u003e \u003cdiv class=\"h-[160px] aspect aspect-[2] rounded-[16px] shadow-[0_0_0_4px_hsl(0_0%_0%_/_15%)]\"\u003e Hello, world! \u003c/div\u003e \u003c/div\u003e ); } ``` ## Support For additional assistance, refer to the [Tailwind CSS/Vite integration guide](https://tailwindcss.com/docs/guides/vite).", "term_freq": { "##": 5, "*/": 4, "---": 2, "-p": 1, "/*": 3, "/**": 1, "//github": 1, "//tailwindcss": 2, "//v3": 1, "/\u003e": 1, "/app": 1, "/index": 2, "/src/**/*": 1, "0_0%_0%_/_15%": 1, "0_0_0_4px_hsl": 1, "160px": 1, "16px": 1, "\u003c/div\u003e": 2, "\u003capp": 1, "\u003cdiv": 2, "=\u003e": 1, "\u003e-": 2, "@tailwind": 3, "@type": 1, "add": 2, "additional": 1, "after": 1, "an": 1, "and": 3, "app": 1, "append": 1, "apps": 1, "as": 3, "aspect": 1, "aspect-": 1, "assistance": 1, "at": 1, "atomic": 1, "atomic-css": 1, "autoprefixer": 1, "base": 1, "be": 1, "below": 1, "both": 1, "built-in": 1, "can": 4, "card": 2, "check": 1, "class=": 2, "classes": 4, "com/": 1, "com/docs/configuration": 1, "com/docs/guides/vite": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/styling-components/tailwind-v3": 1, "command": 1, "components": 2, "config": 4, "configuration": 1, "configuration-driven": 1, "consistent": 2, "content": 1, "created": 1, "css": 17, "css/vite": 1, "custom": 1, "deeper": 1, "dependency": 1, "description": 1, "design": 2, "development": 2, "directives": 5, "directory": 1, "dive": 1, "document": 1, "documentation": 1, "establish": 1, "exports": 1, "extend": 1, "file": 5, "following": 1, "for": 4, "from": 2, "function": 1, "generate": 1, "getelementbyid": 1, "github-document": 1, "grid": 1, "guide": 1, "h-": 1, "had": 1, "hello": 1, "html": 1, "htmlelement": 1, "https": 4, "if": 1, "import": 6, "in": 2, "index": 3, "inform": 1, "init": 2, "initializing": 1, "install": 1, "installation": 1, "instance": 1, "integrates": 1, "integration": 1, "into": 2, "is": 2, "it": 1, "its": 1, "js": 5, "jsx": 5, "library": 1, "mainnavexclude": 1, "mdx": 1, "min-h-screen": 1, "module": 1, "next": 1, "now": 1, "of": 2, "official": 1, "on-demand": 1, "or": 3, "order": 2, "out": 1, "package-exec": 1, "package-install-dev": 1, "patterns": 1, "place-items-center": 1, "plugin": 1, "plugins": 1, "postcss": 5, "previously": 1, "project": 1, "prototyping": 1, "rapid": 2, "re": 1, "refer": 1, "remove": 2, "render": 2, "replace": 2, "responsive": 3, "return": 1, "root": 3, "rounded-": 1, "run": 1, "seamlessly": 1, "set": 2, "shadow-": 1, "since": 1, "solid": 2, "solid-js/web": 1, "src/components/card": 2, "src/index": 1, "styles": 1, "styling": 3, "support": 1, "tags": 1, "tailwind": 17, "tailwind-v3": 1, "tailwindcss": 3, "tailwindcss@3": 1, "that": 2, "the": 8, "theme": 1, "these": 3, "title": 1, "to": 3, "true": 1, "ts": 1, "tsx": 2, "up": 2, "update": 1, "usage": 1, "use": 1, "use_cases": 1, "using": 1, "utilities": 1, "utility": 4, "utility-css": 1, "utility-first": 2, "utilize": 1, "v3": 3, "version": 1, "will": 1, "with": 3, "world": 1, "you": 6, "your": 4 }, "length": 345 }, { "id": "8255bff5437f22ba11b0da04", "doc_id": "f33edea6744ff59168b4a271", "title": "tailwind", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/tailwind.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/tailwind.json", "content": "--- title: Tailwind CSS order: 5 mainNavExclude: true use_cases: \u003e- styling components, utility classes, rapid ui development, responsive design, production builds tags: - styling - css - tailwind - postcss - utilities - design version: '1.0' description: \u003e- Set up Tailwind CSS v4 in your Solid app for utility-first styling. Configure PostCSS, import styles, and build responsive UIs efficiently. --- :::note This guide is for Tailwind CSS v4. For **Tailwind CSS v3** refer to [Tailwind CSS v3](/guides/styling-components/tailwind-v3). ::: [Tailwind CSS](https://tailwindcss.com/) is an on-demand utility CSS library that integrates seamlessly with Solid as a built-in PostCSS plugin. ## Installation 1. Install Tailwind CSS as a development dependency: ```package-install-dev tailwindcss @tailwindcss/postcss postcss ``` 2. Add `@tailwind/postcss` to the `plugins` in your PostCSS configuration. If you do not have a PostCSS configuration file, create a new one called `postcss.config.mjs`. ```js title=\"postcss.config.mjs\" export default { plugins: { \"@tailwindcss/postcss\": {}, } } ``` For a deeper dive into configuration, you can check out the [Tailwind Official Documentation](https://tailwindcss.com/docs/configuration). ## Import Tailwind CSS Add an `@import` to your `src/index.css` file that imports Tailwind CSS. ```css title=\"src/index.css\" @import \"tailwindcss\"; ``` ## Import your CSS file Import your `index.css` file into the root `index.jsx` or `index.tsx` file: ```jsx import { render } from \"solid-js/web\" import App from \"./App\" import \"./index.css\" render(() =\u003e \u003cApp /\u003e, document.getElementById('root') as HTMLElement); ``` ## Usage With Tailwind CSS set up, you can now utilize its utility classes. For instance, if you previously had a `Card.css` file, you can replace or remove it: ``` /* src/components/Card.css */ /* Remove or replace these styles with Tailwind utility classes */ ``` Update your components to use Tailwind's utility classes: ```jsx /* src/components/Card.jsx */ function Card() { return ( \u003cdiv class=\"grid place-items-center min-h-screen\"\u003e \u003cdiv class=\"h-[160px] aspect aspect-[2] rounded-[16px] shadow-[0_0_0_4px_hsl(0_0%_0%_/_15%)]\"\u003e Hello, world! \u003c/div\u003e \u003c/div\u003e ); } ``` ## Support For additional assistance, refer to the [Tailwind CSS/Vite integration guide](https://tailwindcss.com/docs/guides/vite).", "term_freq": { "##": 5, "**tailwind": 1, "*/": 3, "---": 2, "/*": 3, "//github": 1, "//tailwindcss": 3, "/\u003e": 1, "/app": 1, "/guides/styling-components/tailwind-v3": 1, "/index": 1, "0_0%_0%_/_15%": 1, "0_0_0_4px_hsl": 1, "160px": 1, "16px": 1, "\u003c/div\u003e": 2, "\u003capp": 1, "\u003cdiv": 2, "=\u003e": 1, "\u003e-": 2, "@import": 2, "@tailwind/postcss": 1, "@tailwindcss/postcss": 2, "add": 2, "additional": 1, "an": 2, "and": 1, "app": 2, "as": 3, "aspect": 1, "aspect-": 1, "assistance": 1, "build": 1, "builds": 1, "built-in": 1, "called": 1, "can": 3, "card": 2, "check": 1, "class=": 2, "classes": 4, "com/": 1, "com/docs/configuration": 1, "com/docs/guides/vite": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/styling-components/tailwind": 1, "components": 2, "config": 2, "configuration": 3, "configure": 1, "create": 1, "css": 20, "css/vite": 1, "deeper": 1, "default": 1, "dependency": 1, "description": 1, "design": 2, "development": 2, "dive": 1, "do": 1, "document": 1, "documentation": 1, "efficiently": 1, "export": 1, "file": 6, "for": 6, "from": 2, "function": 1, "getelementbyid": 1, "github-document": 1, "grid": 1, "guide": 2, "h-": 1, "had": 1, "have": 1, "hello": 1, "htmlelement": 1, "https": 4, "if": 2, "import": 7, "imports": 1, "in": 2, "index": 3, "install": 1, "installation": 1, "instance": 1, "integrates": 1, "integration": 1, "into": 2, "is": 2, "it": 1, "its": 1, "js": 1, "jsx": 4, "library": 1, "mainnavexclude": 1, "mdx": 1, "min-h-screen": 1, "mjs": 2, "new": 1, "not": 1, "note": 1, "now": 1, "official": 1, "on-demand": 1, "one": 1, "or": 3, "order": 1, "out": 1, "package-install-dev": 1, "place-items-center": 1, "plugin": 1, "plugins": 2, "postcss": 8, "previously": 1, "production": 1, "rapid": 1, "refer": 2, "remove": 2, "render": 2, "replace": 2, "responsive": 2, "return": 1, "root": 2, "rounded-": 1, "seamlessly": 1, "set": 2, "shadow-": 1, "solid": 2, "solid-js/web": 1, "src/components/card": 2, "src/index": 2, "styles": 2, "styling": 3, "support": 1, "tags": 1, "tailwind": 15, "tailwindcss": 2, "that": 2, "the": 4, "these": 1, "this": 1, "title": 1, "title=": 2, "to": 5, "true": 1, "tsx": 1, "ui": 1, "uis": 1, "up": 2, "update": 1, "usage": 1, "use": 1, "use_cases": 1, "utilities": 1, "utility": 5, "utility-first": 1, "utilize": 1, "v3": 1, "v3**": 1, "v4": 2, "version": 1, "with": 3, "world": 1, "you": 5, "your": 6 }, "length": 314 }, { "id": "1e99daaadb4621accb7827bf", "doc_id": "d1bd7b019b4940d72c51b6f9", "title": "testing", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/testing.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/testing.json", "content": "--- title: Testing order: 6 use_cases: \u003e- testing components, unit tests, integration tests, user interactions, test coverage, quality assurance tags: - testing - vitest - components - unit-tests - quality version: '1.0' description: \u003e- Test Solid apps with Vitest and Testing Library. Write component tests, simulate user interactions, and ensure code quality effectively. --- Testing your Solid applications is important to inspiring confidence in your codebase through preventing regressions. ## Getting started ### Testing packages explanations - [`vitest`](https://vitest.dev) - testing framework that includes runner, assertion engine, and mocking facilities - [`jsdom`](https://github.com/jsdom/jsdom) - a virtual DOM used to simulate a headless browser environment running in node - [`@solidjs/testing-library`](https://github.com/solidjs/solid-testing-library/blob/main/README.md) - a library to simplify testing components, directives, and primitives, with automatic cleanup - [`@testing-library/user-event`](https://testing-library.com/docs/user-event/intro) - used to simulate user events that are closer to reality - [`@testing-library/jest-dom`](https://testing-library.com/docs/ecosystem-jest-dom) - augments expect with helpful matchers ### Adding testing packages The recommended testing framework for Solid applications is [vitest](https://vitest.dev). To get started with vitest, install the following development dependencies: ```package-install-dev vitest jsdom @solidjs/testing-library @testing-library/user-event @testing-library/jest-dom ``` ### Testing configuration In your `package.json` add a `test` script calling `vitest`: ```json title=\"package.json\" \"scripts\": { \"test\": \"vitest\" } ``` It is not necessary to add `@testing-library/jest-dom` to the testing options in `vite.config`, since `vite-plugin-solid` automatically detects and loads it if present. #### TypeScript configuration If using TypeScript, add `@testing-library/jest-dom` to `tsconfig.json#compilerOptions.types`: ```json title=\"tsconfig.json\" \"compilerOptions\": { // ... \"jsx\": \"preserve\", \"jsxImportSource\": \"solid-js\", \"types\": [\"vite/client\", \"@testing-library/jest-dom\"] } ``` #### SolidStart configuration When using [SolidStart](/solid-start), create a `vitest.config.ts` file: ```ts title=\"vitest.config.ts\" import solid from \"vite-plugin-solid\" import { defineConfig } from \"vitest/config\" export default defineConfig({ plugins: [solid()], resolve: { conditions: [\"development\", \"browser\"], }, }) ``` ## Writing tests ### Components testing Testing components involves three main things: - Rendering the component - Interacting with the component - Validating assertions To write tests for your components, create a `[name].test.tsx` file. The purpose of this file is to describe the intended behavior from a user's perspective in the form of unit tests: ```jsx tab title=\"Counter.test.jsx\" import { test, expect } from \"vitest\" import { render } from \"@solidjs/testing-library\" import userEvent from \"@testing-library/user-event\" import { Counter } from \"./Counter\" const user = userEvent.setup() test(\"increments value\", async () =\u003e { const { getByRole } = render(() =\u003e \u003cCounter /\u003e) const counter = getByRole('button') expect(counter).toHaveTextContent(\"1\") await user.click(counter) expect(counter).toHaveTextContent(\"2\") }) ``` ```jsx tab title=\"Counter.jsx\" export const Counter = () =\u003e { const [count, setCount] = createSignal(1); return ( \u003cbutton onClick={() =\u003e setCount(count() + 1)}\u003e {count()} \u003c/button\u003e ); } ``` In the `test.jsx` file, [the `render` call from `@solidjs/testing-library`](https://testing-library.com/docs/solid-testing-library/api#render) is used to render the component and supply the props and context. To mimic a user interaction, `@testing-library/user-event` is used. The [`expect` function provided by `vitest`](https://vitest.dev/api/expect.html) is extended with a [`.ToHaveTextContent(\"content\")` matcher from `@testing-library/jest-dom`](https://github.com/testing-library/jest-dom?tab=readme-ov-file#tohavetextcontent) to supply what the expected behavior is for this component. To run this test, use the following command: ```package-run test ``` If running the command is successful, you will get the following result showing whether the tests have passed or failed: ```ansi frame=\"none\" \u001b[1;36m[RUN]\u001b[0;36m v1.4.0\u001b[0;8m solid-app/src/components/Counter.test.tsx\u001b[0m \u001b[0;32m ✓ \u001b[0;8msrc/components/\u001b[1;1mCounter\u001b[0;8m.test.tsx (1) \u001b[0;32m ✓ \u001b[0;8m\u001b[1;1m\u003cCounter /\u003e\u001b[0;8m (1) \u001b[0;32m ✓ \u001b[0;8m\u001b[1;1mincrements value\u001b[0;8m Test Files \u001b[1;32m1 passed\u001b[0;8m (1) Tests \u001b[1;32m1 passed\u001b[0;8m (1) Start at \u001b[1;1m16:51:19\u001b[0;8m Duration \u001b[1;1m4.34s\u001b[0;8m (transform 1.01s, setup 205ms, collect 1.54s, tests 155ms, environment 880ms, prepare 212ms) ``` #### Rendering the component The `render` function from `@solidjs/testing-library` creates the testing environment within the `test.tsx` file. It sets up the container, rendering the component within it, and automatically registers it for clean-up after a successful test. Additionally, it manages wrapping the component in contexts as well as setting up a router. ```tsx frame=\"none\" const renderResult = render( () =\u003e \u003cMyComponent /\u003e, // @solidjs/testing-library requires a function { // all options are optional container, // manually set up your own container, will not be handled baseElement, // parent of container in case it is not supplied queries, // manually set up custom queries hydrate, // set to `true` to use hydration wrapper, // reusable wrapper component to supply context location, // sets up a router pointed to the location if provided } ) const { asFragment, // function returning the contents of the container baseElement, // the parent of the container container, // the container in which the component is rendered debug, // a function giving some helpful debugging output unmount, // manually removing the component from the container ...queries, // functions to select elements from the container } = renderResult ``` ##### Using the right queries Queries are helpers used to find elements within a page. ``` ⎧ Role get ⎫ By ⎪ DisplayValue query ⎬ ⎨ LabelText find ⎭ AllBy ⎪ Text ⎩ ... ``` The prefixes (`get`, `query`, and `find`) and the middle portion (`By` and `AllBy`) depend on if the query should wait for an element to appear (or not), whether it should throw an error if the element cannot be found, and how it should handle multiple matches: - **getBy**: synchronous, throws if not found or more than 1 matches - **getAllBy**: synchronous, throws if not found, returns array of matches - **queryBy**: synchronous, null if not found, error if more than 1 matches - **queryAllBy**: synchronous, returns array of zero or more matches - **findBy**: asynchronous, rejected if not found within 1000ms or more than 1 matches, resolves with element if found - **findAllBy**: asynchronous, rejected if not found within 1000ms, resolves with array of one or more element(s) By default, queries should start with `get...`. If there are multiple elements matching the same query, `getAllBy...` should be used, otherwise use `getBy...`. There are two exceptions when you should **not** start with `get...`: 1. If the `location` option is used or the component is based on resources, the router will be lazy-loaded; in this case, the first query after rendering needs to be `find...` 2. When testing something that is *not* rendered, you will need to find something that will be rendered at the same time; after that, use `queryAllBy...` to test if the result is an empty array (`[]`). The query's suffix (Role, LabelText, ...) depends on the characteristics of the element you want to select. If possible, try to select for accessible attributes (roughly in the following order): - **Role**: [WAI ARIA](https://www.w3.org/WAI/standards-guidelines/aria) landmark roles which are automatically set by semantic elements like `\u003cbutton\u003e` or otherwise use `role` attribute - **LabelText**: elements that are described by a label wrapping the element, or by an `aria-label` attribute, or is linked with `for`- or `aria-labelledby` attribute - **PlaceholderText**: input elements with a `placeholder` attribute - **Text**: searches text within all text nodes in the element, even if split over multiple nodes - **DisplayValue**: form elements showing the given value (e.g. select elements) - **AltText**: images with alt text - **Title**: HTML elements with the `title` attribute or SVGs with the `\u003ctitle\u003e` tag containing the given text - **TestId**: queries by the `data-testid` attribute; a different data attribute can be setup via `configure({testIdAttribute: 'data-my-test-attribute'})`; TestId-queries are *not accessible*, so use them only as a last resort. For more information, check the [testing-library documentation](https://testing-library.com/docs/queries/about). #### Testing through Portal Solid allows components to break through the DOM tree structure using [`\u003cPortal\u003e`](/reference/components/portal). This mechanism will still work in testing, so the content of the portals will break out of the testing container. In order to test this content, make sure to use the `screen` export to query the contents: ```jsx tab title=\"Toast.test.jsx\" import { test, expect } from \"vitest\" import { render, screen } from \"@solidjs/testing-library\" import { Toast } from \"./Toast\" test(\"increments value\", async () =\u003e { render(() =\u003e \u003cToast\u003e\u003cp\u003eThis is a toast\u003c/p\u003e\u003c/Toast\u003e) const toast = screen.getByRole(\"log\") expect(toast).toHaveTextContent(\"This is a toast\") }) ``` ```jsx tab title=\"Toast.jsx\" import { Portal } from \"solid-js/web\"; export const Toast = (props) =\u003e { return ( \u003cPortal\u003e \u003cdiv class=\"toast\" role={props.role ?? \"log\"}\u003e {props.children} \u003c/div\u003e \u003c/Portal\u003e ); } ``` #### Testing in context If a component relies on some context, to wrap it use the `wrapper` option: ```tsx title=\"Context.test.tsx\" import { test, expect } from \"vitest\" import { render } from \"@solidjs/testing-library\" import { DataContext, DataConsumer } from \"./Data\" const wrapper = (props) =\u003e \u003cDataContext value=\"test\" {...props} /\u003e test(\"receives data from context\", () =\u003e { const { getByText } = render(() =\u003e \u003cDataConsumer /\u003e, { wrapper }) expect(getByText(\"test\")).toBeInTheDocument() }); ``` Wrappers can be re-used if they are created externally. For wrappers with different values, a higher-order component creating the required wrappers can make the tests more concise: ```tsx const createWrapper = (value) =\u003e (props) =\u003e \u003cDataContext value={value} {...props}/\u003e ``` :::note[Using multiple providers] If using multiple providers, [solid-primitives has `\u003cMultiProvider\u003e`](https://primitives.solidjs.community/package/context#multiprovider) to avoid nesting multiple levels of providers ::: ##### Testing routes For convenience, the `render` function supports the `location` option that wraps the rendered component in a router pointing at the given location. Since the `\u003cRouter\u003e` component is lazily loaded, the first query after rendering needs to be asynchronous, i.e. `findBy...`: ```tsx const { findByText } = render( () =\u003e \u003cRoute path=\"/article/:id\" component={Article} /\u003e, { location: \"/article/12345\" } ); expect(await findByText(\"Article 12345\")).toBeInTheDocument() ``` #### Interacting with components Many components are not static, rather they change based on user interactions. To test these changes, these interactions need to be simulated. To simulate user interactions, `@testing-library/user-event` library can be used. It takes care of the usual order of events as they would occur in actual user interactions. For example, this means that a `click` event from the user would be accompanied by `mousemove`, `hover`, `keydown`, `focus`, `keyup`, and `keypress`. The most convenient events to test are typically `click`, `keyboard` and `pointer` (to simulate touch events). To dive deeper into these events, you can learn about them in the [`user-event` documentation](https://testing-library.com/docs/user-event/intro). ##### Using timers If you require a fake timer and want to use `vi.useFakeTimers()` in your tests, it must set it up with an `advanceTimers` option: ```tsx title=\"user-event.test.tsx\" import { vi } from \"vitest\" const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime }) vi.useFakeTimers() describe(\"pre-login: sign-in\", () =\u003e { const { getByRole, getByLabelText } = render(() =\u003e \u003cUser /\u003e) const signUp = getByRole('button', { text: 'Sign-in' }) // use convenience API click: user.click(signUp) const name = getByLabelText('Name') // use complex keyboard input: user.keyboard(name, \"{Shift}test{Space}{Shift}user\") const password = getByLabelText('Password') user.keyboard(name, \"secret\") const login = getByRole('button', { text: 'Login' }) // use touch event user.pointer([ { keys: \"[TouchA]\" target: login }, { keys: \"[/TouchA]\", target: login } ]) }); ``` #### Validating assertions `vitest` comes with the `expect` function to facilitate assertions that works like: ```tsx frame=\"none\" expect(subject)[assertion](value) ``` The command supports assertions like `toBe` (reference comparison) and `toEqual` (value comparison) out of the box. For testing inside the DOM, the package `@testing-library/jest-dom` augments it with some helpful additional assertions: - [`.toBeInTheDocument()`](https://github.com/testing-library/jest-dom?tab=readme-ov-file#tobeinthedocument) - checks if the element actually exists in the DOM - [`.toBeVisible()`](https://github.com/testing-library/jest-dom?tab=readme-ov-file#tobevisible) - checks if there is no reason the element should be hidden - [`.toHaveTextContent(content)`](https://github.com/testing-library/jest-dom?tab=readme-ov-file#tohavetextcontent) - checks if the text content matches - [`.toHaveFocus()`](https://github.com/testing-library/jest-dom?tab=readme-ov-file#tohavefocus) - checks if this is the currently focused element - [`.toHaveAccessibleDescription(description)`](https://github.com/testing-library/jest-dom?tab=readme-ov-file#tohaveaccessibledescription) - checks accessible description - and a [lot more](https://github.com/testing-library/jest-dom?tab=readme-ov-file#custom-matchers). ### Directive testing [Directives](/reference/jsx-attributes/use) are reusable behaviors for elements. They receive the HTML element they are bound to as their first and an accessor of the directive prop as their second argument. To make testing them more concise, [`@solidjs/testing-library` has a `renderDirective`](https://testing-library.com/docs/solid-testing-library/api#renderdirective) function: ```ts frame=\"none\" const renderResult = renderDirective(directive, { initialValue, // value initially added to the argument signal targetElement, // opt. node name or element used as target for the directive ...renderOptions, // see render options }) const { arg, // getter for the directive's argument setArg, // setter for the directive's argument ...renderResults, // see render results } = renderResult ``` In `...renderResults`, the container will contain the `targetElement`, which defaults to a `\u003cdiv\u003e`. This, along with the ability to modify the `arg` signal, are helpful when testing directives. If, for example, you have a directive that handles the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API), you can test it like this: ```ts tab title=\"fullscreen.test.ts\" import { test, expect, vi } from \"vitest\" import { renderDirective } from \"@solidjs/testing-library\" import { createFullScreen } from \"./fullscreen\" test(\"toggles fullscreen\", () =\u003e { const targetElement = document.createElement(\"div\") const fs = vi.spyOn(targetElement, \"fullscreen\") const [setArg, container] = renderDirective(createFullScreen, false) setArg(true) expect(fs).toHaveBeenCalled() }) ``` ```ts tab title=\"fullscreen.ts\" import { Accessor } from \"solid-js\" export const fullscreen = (ref: HTMLElement, active: Accessor\u003cboolean\u003e) =\u003e createEffect(() =\u003e { const isActive = document.fullscreenElement === ref if (active() \u0026\u0026 !isActive) { ref.requestFullScreen().catch(() =\u003e {}) } else if (!active() \u0026\u0026 isActive) { document.exitFullScreen() } }) ``` ### Primitive testing When the reference to an element is not needed, parts of state and logic can be put into reusable hooks or primitives. Since these do not require elements, there is no need for `render` to test them since it would require a component that has no other use. To avoid this, there is a [`renderHook` utility](https://testing-library.com/docs/solid-testing-library/api#renderhook) that simulates a component without actually rendering anything. ```ts frame=\"none\" const renderResult = renderHook(hook, { initialProps, // an array with arguments being supplied to the hook wrapper, // same as the wrapper optionss for `render` }) const { result, // return value of the hook (mutable, destructuring fixes it) cleanup, // manually remove the traces of the test from the DOM owner, // the owner running the hook to use with `runWithOwner()` } = renderResult ``` A primitive that manages the state of a counter could be tested like this: ```ts frame=\"none\" import { test, expect } from \"vitest\" import { renderHook } from \"@solidjs/testing-library\" import { createCounter } from \"./counter\" test(\"increments count\", () =\u003e { const { result } = renderHook(createCounter) expect(result.count).toBe(0) result.increment() expect(result.count).toBe(1) }) ``` ### Testing effects Since effects may happen asynchronously, it can be difficult to test them. [`@solidjs/testing-library` comes with a `testEffect` function](https://testing-library.com/docs/solid-testing-library/api#async-methods) that takes another function that receives a `done` function to be called once tests are over and returns a promise. Once `done` is called, the returned promise is resolved. Any errors that would hit the next boundary are used to reject the returned promise. An example test using `testEffect` may look like this: ```ts frame=\"none\" const [value, setValue] = createSignal(0) return testEffect(done =\u003e createEffect((run: number = 0) =\u003e { if (run === 0) { expect(value()).toBe(0) setValue(1) } else if (run === 1) { expect(value()).toBe(1) done() } return run + 1 }) ) ``` ### Benchmarks While Solid offers performance simplified, it is good to validate if that promise can be kept. Vitest offers an experimental `bench` function to run benchmarks and compare the results inside the same `describe` block; for example if you had a `\u003cList\u003e` flow component similar to `\u003cFor\u003e`, you could benchmark it like this: ```jsx title=\"list.bench.jsx\" describe('list rendering', () =\u003e { const ITEMS = 1000 const renderedFor = new Set() const listFor = Array.from({ length: ITEMS }, (_, i) =\u003e i) bench('For', () =\u003e new Promise((resolve) =\u003e { const ItemFor = (props) =\u003e { onMount(() =\u003e { renderedFor.add(props.number) if (renderedFor.size === ITEMS) { resolve() } }) return \u003cspan\u003e{props.number}\u003c/span\u003e } render(() =\u003e \u003cFor each={listFor}\u003e {(item) =\u003e \u003cItemFor number={item} /\u003e} \u003c/For\u003e) })) const renderedList = new Set() const listList = Array.from({ length: ITEMS }, (_, i) =\u003e i) bench('List', () =\u003e new Promise((resolve) =\u003e { const ItemList = (props) =\u003e { onMount(() =\u003e { renderedList.add(props.number) if (renderedList.size === ITEMS) { resolve() } }) return \u003cspan\u003e{props.number}\u003c/span\u003e } render(() =\u003e \u003cList each={listList}\u003e {(item) =\u003e \u003cItemList number={item} /\u003e} \u003c/List\u003e) })) }) ``` Running `[npm|pnpm|yarn] test bench` will then execute the benchmark function: ```ansi frame=\"none\" \u001b[1;36m[RUN]\u001b[0;36m v1.4.0\u001b[0;8m solid-app/src/components/\u001b[0m \u001b[0;32m ✓ \u001b[0;8msrc/components/list.bench.jsx \u001b[0;31m(2)\u001b[0;8m 1364ms \u001b[0;32m ✓ \u001b[0;8mbenchmark\u001b[0;31m (2)\u001b[0;8m 1360ms \u001b[1;37m name hz min max mean p75 p99 p995 p999 rme samples \u001b[1;32m · \u001b[0;37mFor \u001b[0;36m60.5492 11.2355 47.9164 16.5155 15.4180 47.9164 47.9164 47.9164 \u001b[0;37m±13.60% 31 \u001b[0;32mfastest \u001b[1;32m · \u001b[0;37mList \u001b[0;36m49.7725 16.5441 69.3559 20.0914 18.0349 69.3559 69.3559 69.3559 \u001b[0;37m±21.37% 25 \u001b[1;36m[BENCH]\u001b[0;36m Summary \u001b[0;37mFor - src/components/list.bench.tsx \u003e benchmark \u001b[0;32m 1.22x\u001b[0;8m faster than\u001b[0;37m List ``` Please keep in mind that it is very difficult to create meaningful benchmarks. The numbers should always be taken with a grain of salt, but can still indicate performance degradations if compared between versions. ### Test coverage While coverage numbers can be misleading, they are used by many projects as a rough measurement of code quality. Vitest supports coverage collection. To use it, it needs an extra package: ```package-install-dev @vitest/coverage-v8 ``` Also, you need to [set up vitest's coverage feature](https://vitest.dev/guide/coverage.html). ### Integration/E2E testing Some issues can only be found once the code is running in the environment it is supposed to run in. Since integration and end-to-end tests are agnostic to frameworks, all proven approaches will work equally for Solid.", "term_freq": { "##": 2, "###": 10, "####": 7, "#####": 3, "\u0026\u0026": 2, "**alttext**": 1, "**displayvalue**": 1, "**findallby**": 1, "**findby**": 1, "**getallby**": 1, "**getby**": 1, "**labeltext**": 1, "**not**": 1, "**placeholdertext**": 1, "**queryallby**": 1, "**queryby**": 1, "**role**": 1, "**testid**": 1, "**text**": 1, "**title**": 1, "*not": 1, "*not*": 1, "---": 2, "//": 29, "//developer": 1, "//github": 10, "//primitives": 1, "//testing-library": 8, "//vitest": 4, "//www": 1, "/\u003e": 9, "/\u003e\u001b": 1, "/article/": 1, "/article/12345": 1, "/counter": 2, "/data": 1, "/fullscreen": 1, "/reference/components/portal": 1, "/reference/jsx-attributes/use": 1, "/solid-start": 1, "/toast": 1, "/toucha": 1, "0\u001b": 2, "01s": 1, "0349": 1, "0914": 1, "0m": 2, "1000": 1, "1000ms": 2, "11": 1, "12345": 1, "1360ms": 1, "1364ms": 1, "15": 1, "155ms": 1, "16": 2, "18": 1, "19\u001b": 1, "1m16": 1, "1m4": 1, "1m\u003ccounter": 1, "1mcounter\u001b": 1, "1mincrements": 1, "20": 1, "205ms": 1, "212ms": 1, "22x\u001b": 1, "2355": 1, "25": 1, "31": 1, "31m": 2, "32m": 8, "32m1": 2, "32mfastest": 1, "34s\u001b": 1, "3559": 4, "36m": 6, "36m49": 1, "36m60": 1, "37%": 1, "37m": 2, "37mfor": 2, "37mlist": 1, "37m±13": 1, "37m±21": 1, "4180": 1, "47": 4, "51": 1, "5155": 1, "5441": 1, "5492": 1, "54s": 1, "60%": 1, "69": 4, "7725": 1, "880ms": 1, "8m": 12, "8m\u001b": 2, "8mbenchmark\u001b": 1, "8msrc/components/\u001b": 1, "8msrc/components/list": 1, "9164": 4, "\u003c/button\u003e": 1, "\u003c/div\u003e": 1, "\u003c/for\u003e": 1, "\u003c/list\u003e": 1, "\u003c/portal\u003e": 1, "\u003c/span\u003e": 2, "\u003cbutton": 1, "\u003cbutton\u003e": 1, "\u003ccounter": 1, "\u003cdataconsumer": 1, "\u003cdatacontext": 2, "\u003cdiv": 1, "\u003cdiv\u003e": 1, "\u003cfor": 1, "\u003cfor\u003e": 1, "\u003citemfor": 1, "\u003citemlist": 1, "\u003clist": 1, "\u003clist\u003e": 1, "\u003cmultiprovider\u003e": 1, "\u003cmycomponent": 1, "\u003cportal\u003e": 2, "\u003croute": 1, "\u003crouter\u003e": 1, "\u003cspan\u003e": 2, "\u003ctitle\u003e": 1, "\u003ctoast\u003e\u003cp\u003ethis": 1, "\u003cuser": 1, "===": 5, "=\u003e": 38, "\u003e-": 2, "@solidjs/testing-library": 12, "@testing-library/jest-dom": 7, "@testing-library/user-event": 5, "@vitest/coverage-v8": 1, "ability": 1, "about": 1, "accessible": 2, "accessible*": 1, "accessor": 2, "accessor\u003cboolean\u003e": 1, "accompanied": 1, "active": 3, "actual": 1, "actually": 2, "add": 5, "added": 1, "adding": 1, "additional": 1, "additionally": 1, "advancetimers": 2, "advancetimersbytime": 1, "after": 4, "agnostic": 1, "all": 3, "allby": 2, "allows": 1, "along": 1, "also": 1, "alt": 1, "always": 1, "an": 11, "and": 22, "another": 1, "ansi": 2, "any": 1, "anything": 1, "api": 2, "appear": 1, "applications": 2, "approaches": 1, "apps": 1, "are": 18, "arg": 2, "argument": 4, "arguments": 1, "aria": 1, "aria-label": 1, "aria-labelledby": 1, "array": 7, "article": 2, "as": 9, "asfragment": 1, "assertion": 2, "assertions": 5, "assurance": 1, "async": 2, "asynchronous": 3, "asynchronously": 1, "at": 3, "attribute": 7, "attributes": 1, "augments": 2, "automatic": 1, "automatically": 3, "avoid": 2, "await": 2, "based": 2, "baseelement": 2, "be": 21, "behavior": 2, "behaviors": 1, "being": 1, "bench": 8, "benchmark": 3, "benchmarks": 3, "between": 1, "block": 1, "bound": 1, "boundary": 1, "box": 1, "break": 2, "browser": 2, "but": 1, "button": 3, "by": 10, "call": 1, "called": 2, "calling": 1, "can": 12, "cannot": 1, "care": 1, "case": 2, "catch": 1, "change": 1, "changes": 1, "characteristics": 1, "check": 1, "checks": 5, "children": 1, "class=": 1, "clean-up": 1, "cleanup": 2, "click": 5, "closer": 1, "code": 3, "codebase": 1, "collect": 1, "collection": 1, "com/docs/ecosystem-jest-dom": 1, "com/docs/queries/about": 1, "com/docs/solid-testing-library/api#async-methods": 1, "com/docs/solid-testing-library/api#render": 1, "com/docs/solid-testing-library/api#renderdirective": 1, "com/docs/solid-testing-library/api#renderhook": 1, "com/docs/user-event/intro": 2, "com/jsdom/jsdom": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/testing": 1, "com/solidjs/solid-testing-library/blob/main/readme": 1, "com/testing-library/jest-dom": 7, "comes": 2, "command": 3, "community/package/context#multiprovider": 1, "compare": 1, "compared": 1, "comparison": 2, "compileroptions": 1, "complex": 1, "component": 19, "component=": 1, "components": 9, "concise": 2, "conditions": 1, "confidence": 1, "config": 3, "configuration": 3, "configure": 1, "const": 37, "contain": 1, "container": 13, "containing": 1, "content": 5, "contents": 2, "context": 6, "contexts": 1, "convenience": 2, "convenient": 1, "could": 2, "count": 6, "counter": 9, "coverage": 5, "create": 3, "createcounter": 2, "created": 1, "createeffect": 2, "createelement": 1, "createfullscreen": 2, "creates": 1, "createsignal": 2, "createwrapper": 1, "creating": 1, "currently": 1, "custom": 1, "data": 2, "data-my-test-attribute": 1, "data-testid": 1, "dataconsumer": 1, "datacontext": 1, "debug": 1, "debugging": 1, "deeper": 1, "default": 2, "defaults": 1, "defineconfig": 2, "degradations": 1, "depend": 1, "dependencies": 1, "depends": 1, "describe": 4, "described": 1, "description": 3, "destructuring": 1, "detects": 1, "dev": 2, "dev/api/expect": 1, "dev/guide/coverage": 1, "development": 2, "different": 2, "difficult": 2, "directive": 7, "directives": 3, "displayvalue": 1, "div": 1, "dive": 1, "do": 1, "document": 3, "documentation": 2, "dom": 5, "done": 4, "duration": 1, "each=": 2, "effectively": 1, "effects": 2, "element": 13, "elements": 11, "else": 2, "empty": 1, "end-to-end": 1, "engine": 1, "ensure": 1, "environment": 4, "equally": 1, "error": 2, "errors": 1, "even": 1, "event": 2, "events": 5, "example": 4, "exceptions": 1, "execute": 1, "exists": 1, "exitfullscreen": 1, "expect": 19, "expected": 1, "experimental": 1, "explanations": 1, "export": 5, "extended": 1, "externally": 1, "extra": 1, "facilitate": 1, "facilities": 1, "failed": 1, "fake": 1, "false": 1, "faster": 1, "feature": 1, "file": 5, "files": 1, "find": 5, "findby": 1, "findbytext": 2, "first": 3, "fixes": 1, "flow": 1, "focus": 1, "focused": 1, "following": 4, "for": 22, "form": 2, "found": 8, "frame=": 8, "framework": 2, "frameworks": 1, "from": 32, "fs": 2, "fullscreen": 6, "fullscreenelement": 1, "function": 13, "functions": 1, "get": 6, "getallby": 1, "getby": 1, "getbylabeltext": 3, "getbyrole": 6, "getbytext": 2, "getter": 1, "getting": 1, "github-document": 1, "given": 3, "giving": 1, "good": 1, "grain": 1, "had": 1, "handle": 1, "handled": 1, "handles": 1, "happen": 1, "has": 3, "have": 2, "headless": 1, "helpers": 1, "helpful": 4, "hidden": 1, "higher-order": 1, "hit": 1, "hook": 4, "hooks": 1, "hover": 1, "how": 1, "html": 4, "htmlelement": 1, "https": 25, "hydrate": 1, "hydration": 1, "hz": 1, "id": 1, "if": 36, "images": 1, "import": 21, "important": 1, "in": 24, "includes": 1, "increment": 1, "increments": 3, "indicate": 1, "information": 1, "initially": 1, "initialprops": 1, "initialvalue": 1, "input": 2, "inside": 2, "inspiring": 1, "install": 1, "integration": 2, "integration/e2e": 1, "intended": 1, "interacting": 2, "interaction": 1, "interactions": 6, "into": 2, "involves": 1, "is": 30, "isactive": 3, "issues": 1, "it": 24, "item": 4, "itemfor": 1, "itemlist": 1, "items": 5, "jsdom": 2, "json": 5, "json#compileroptions": 1, "jsx": 13, "jsximportsource": 1, "keep": 1, "kept": 1, "keyboard": 4, "keydown": 1, "keypress": 1, "keys": 2, "keyup": 1, "label": 1, "labeltext": 2, "landmark": 1, "last": 1, "lazily": 1, "lazy-loaded": 1, "learn": 1, "length": 2, "levels": 1, "library": 3, "like": 7, "linked": 1, "list": 4, "listfor": 2, "listlist": 2, "loaded": 1, "loads": 1, "location": 6, "log": 2, "logic": 1, "login": 4, "look": 1, "lot": 1, "main": 1, "make": 3, "manages": 2, "manually": 4, "many": 2, "matcher": 1, "matchers": 1, "matches": 7, "matching": 1, "max": 1, "may": 2, "md": 1, "mdx": 1, "mean": 1, "meaningful": 1, "means": 1, "measurement": 1, "mechanism": 1, "middle": 1, "mimic": 1, "min": 1, "mind": 1, "misleading": 1, "mocking": 1, "modify": 1, "more": 9, "most": 1, "mousemove": 1, "mozilla": 1, "multiple": 6, "must": 1, "mutable": 1, "name": 7, "necessary": 1, "need": 4, "needed": 1, "needs": 3, "nesting": 1, "new": 4, "next": 1, "no": 3, "node": 2, "nodes": 2, "none": 8, "not": 12, "note": 1, "npm|pnpm|yarn": 1, "null": 1, "number": 5, "number=": 2, "numbers": 2, "occur": 1, "of": 22, "offers": 2, "on": 5, "once": 3, "onclick=": 1, "one": 1, "only": 2, "onmount": 2, "opt": 1, "option": 4, "optional": 1, "options": 3, "optionss": 1, "or": 14, "order": 4, "org/en-us/docs/web/api/fullscreen_api": 1, "org/wai/standards-guidelines/aria": 1, "other": 1, "otherwise": 2, "out": 2, "output": 1, "over": 2, "own": 1, "owner": 2, "p75": 1, "p99": 1, "p995": 1, "p999": 1, "package": 4, "package-install-dev": 2, "package-run": 1, "packages": 2, "page": 1, "parent": 2, "parts": 1, "passed": 1, "passed\u001b": 2, "password": 2, "path=": 1, "performance": 2, "perspective": 1, "placeholder": 1, "please": 1, "plugins": 1, "pointed": 1, "pointer": 2, "pointing": 1, "portal": 2, "portals": 1, "portion": 1, "possible": 1, "pre-login": 1, "prefixes": 1, "prepare": 1, "present": 1, "preserve": 1, "preventing": 1, "primitive": 2, "primitives": 2, "projects": 1, "promise": 6, "prop": 1, "props": 14, "proven": 1, "provided": 2, "providers": 3, "purpose": 1, "put": 1, "quality": 4, "queries": 7, "query": 8, "queryallby": 1, "rather": 1, "re-used": 1, "reality": 1, "reason": 1, "receive": 1, "receives": 2, "recommended": 1, "ref": 3, "reference": 2, "registers": 1, "regressions": 1, "reject": 1, "rejected": 2, "relies": 1, "remove": 1, "removing": 1, "render": 19, "renderdirective": 4, "rendered": 4, "renderedfor": 3, "renderedlist": 3, "renderhook": 4, "rendering": 7, "renderoptions": 1, "renderresult": 6, "renderresults": 2, "requestfullscreen": 1, "require": 3, "required": 1, "requires": 1, "resolve": 5, "resolved": 1, "resolves": 2, "resort": 1, "resources": 1, "result": 7, "results": 2, "return": 7, "returned": 2, "returning": 1, "returns": 3, "reusable": 3, "right": 1, "rme": 1, "role": 4, "role=": 1, "roles": 1, "rough": 1, "roughly": 1, "router": 4, "routes": 1, "run": 9, "runner": 1, "running": 5, "runwithowner": 1, "salt": 1, "same": 4, "samples": 1, "screen": 3, "script": 1, "scripts": 1, "searches": 1, "second": 1, "secret": 1, "see": 2, "select": 4, "semantic": 1, "set": 8, "setarg": 3, "setcount": 2, "sets": 2, "setter": 1, "setting": 1, "setup": 4, "setvalue": 2, "shift": 2, "should": 8, "showing": 2, "sign-in": 2, "signal": 2, "signup": 2, "similar": 1, "simplified": 1, "simplify": 1, "simulate": 5, "simulated": 1, "simulates": 1, "since": 6, "size": 2, "so": 2, "solid": 8, "solid-app/src/components/\u001b": 1, "solid-app/src/components/counter": 1, "solid-js": 2, "solid-js/web": 1, "solid-primitives": 1, "solidjs": 1, "solidstart": 2, "some": 4, "something": 2, "space": 1, "split": 1, "spyon": 1, "src/components/list": 1, "start": 3, "started": 2, "state": 2, "static": 1, "still": 2, "structure": 1, "subject": 1, "successful": 2, "suffix": 1, "summary": 1, "supplied": 2, "supply": 3, "supports": 3, "supposed": 1, "sure": 1, "svgs": 1, "synchronous": 4, "tab": 6, "tab=readme-ov-file#custom-matchers": 1, "tab=readme-ov-file#tobeinthedocument": 1, "tab=readme-ov-file#tobevisible": 1, "tab=readme-ov-file#tohaveaccessibledescription": 1, "tab=readme-ov-file#tohavefocus": 1, "tab=readme-ov-file#tohavetextcontent": 2, "tag": 1, "tags": 1, "taken": 1, "takes": 2, "target": 3, "targetelement": 4, "test": 42, "tested": 1, "testeffect": 3, "testid-queries": 1, "testidattribute": 1, "testing": 29, "testing-library": 1, "tests": 13, "text": 8, "than": 3, "than\u001b": 1, "that": 18, "the": 118, "their": 2, "them": 5, "then": 1, "there": 5, "these": 4, "they": 6, "things": 1, "this": 15, "three": 1, "through": 3, "throw": 1, "throws": 2, "time": 1, "timer": 1, "timers": 1, "title": 2, "title=": 12, "to": 63, "toast": 8, "toast\u003c/p\u003e\u003c/toast\u003e": 1, "tobe": 5, "tobeinthedocument": 3, "tobevisible": 1, "toequal": 1, "toggles": 1, "tohaveaccessibledescription": 1, "tohavebeencalled": 1, "tohavefocus": 1, "tohavetextcontent": 5, "touch": 2, "toucha": 1, "traces": 1, "transform": 1, "tree": 1, "true": 2, "try": 1, "ts": 11, "tsconfig": 2, "tsx": 12, "tsx\u001b": 1, "two": 1, "types": 2, "typescript": 2, "typically": 1, "unit": 2, "unit-tests": 1, "unmount": 1, "up": 7, "use": 15, "use_cases": 1, "used": 11, "usefaketimers": 2, "user": 17, "user-event": 2, "userevent": 3, "using": 8, "usual": 1, "utility": 1, "v1": 2, "validate": 1, "validating": 2, "value": 12, "value\u001b": 1, "value=": 2, "values": 1, "version": 1, "versions": 1, "very": 1, "vi": 6, "via": 1, "virtual": 1, "vite": 1, "vite-plugin-solid": 2, "vite/client": 1, "vitest": 21, "vitest/config": 1, "w3": 1, "wai": 1, "wait": 1, "want": 2, "well": 1, "what": 1, "when": 5, "whether": 2, "which": 3, "while": 2, "will": 10, "with": 25, "within": 6, "without": 1, "work": 2, "works": 1, "would": 4, "wrap": 1, "wrapper": 7, "wrappers": 3, "wrapping": 2, "wraps": 1, "write": 2, "writing": 1, "you": 11, "your": 6, "zero": 1, "·": 2, "⎧": 1, "⎨": 1, "⎩": 1, "⎪": 2, "⎫": 1, "⎬": 1, "⎭": 1, "✓": 5 }, "length": 2714 }, { "id": "f44403f08ad4a9198c26e929", "doc_id": "16d93200123350b3456e7d09", "title": "textcontent", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/textcontent.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/textcontent.json", "content": "--- title: textContent use_cases: \u003e- text-only content, performance optimization, plain text rendering, avoiding html parsing, simple text updates tags: - text - performance - content - optimization - dom version: '1.0' description: \u003e- Optimize text rendering with textContent in SolidJS. Bypass diffing for text-only content and improve performance for simple text updates. --- The `textContent` attribute is equivalent to the [`textContent` DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent). This attribute replaces all existing child nodes of the element with a single text node containing the provided string. Using `textContent` can improve performance when the element's children are known to be exclusively text, as it bypasses the generic diffing process.", "term_freq": { "---": 2, "//developer": 1, "//github": 1, "\u003e-": 2, "all": 1, "and": 1, "are": 1, "as": 1, "attribute": 2, "avoiding": 1, "be": 1, "bypass": 1, "bypasses": 1, "can": 1, "child": 1, "children": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/jsx-attributes/textcontent": 1, "containing": 1, "content": 3, "description": 1, "diffing": 2, "dom": 2, "element": 2, "equivalent": 1, "exclusively": 1, "existing": 1, "for": 2, "generic": 1, "github-document": 1, "html": 1, "https": 2, "improve": 2, "in": 1, "is": 1, "it": 1, "known": 1, "mdx": 1, "mozilla": 1, "node": 1, "nodes": 1, "of": 1, "optimization": 2, "optimize": 1, "org/en-us/docs/web/api/node/textcontent": 1, "parsing": 1, "performance": 4, "plain": 1, "process": 1, "property": 1, "provided": 1, "rendering": 2, "replaces": 1, "simple": 2, "single": 1, "solidjs": 1, "string": 1, "tags": 1, "text": 7, "text-only": 2, "textcontent": 6, "the": 6, "this": 1, "title": 1, "to": 2, "updates": 2, "use_cases": 1, "using": 1, "version": 1, "when": 1, "with": 2 }, "length": 107 }, { "id": "ba1c31ed924f80a469e311bd", "doc_id": "af28ed0cec17918024425bc1", "title": "title", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/reference/meta/title.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/title.json", "content": "--- title: Title order: 1 use_cases: \u003e- page titles, seo optimization, browser tab text, dynamic titles, navigation context tags: - title - seo - head - meta - browser version: '1.0' description: \u003e- Set dynamic page titles in your Solid app with the Title component. Essential for SEO and providing context in browser tabs and bookmarks. --- `Title` is a component that renders the [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) element. This will render the title of the page in the browser tab. ```tsx twoslash import { Title } from \"@solidjs/meta\"; \u003cTitle\u003eMy Site\u003c/Title\u003e; ``` ## Usage ### Setting the title for your site ```tsx twoslash title=\"root.tsx\" {5} import { MetaProvider, Title } from \"@solidjs/meta\"; export default function Root() { return ( \u003cMetaProvider\u003e \u003cTitle\u003eDefault Application Title\u003c/Title\u003e \u003c/MetaProvider\u003e ); } ```", "term_freq": { "##": 1, "###": 1, "---": 2, "//developer": 1, "//github": 1, "\u003c/metaprovider\u003e": 1, "\u003cmetaprovider\u003e": 1, "\u003ctitle\u003edefault": 1, "\u003ctitle\u003emy": 1, "\u003e-": 2, "@solidjs/meta": 2, "and": 2, "app": 1, "application": 1, "bookmarks": 1, "browser": 4, "com/solidjs/solid-docs/blob/head/src/routes/solid-meta/reference/meta/title": 1, "component": 2, "context": 2, "default": 1, "description": 1, "dynamic": 2, "element": 1, "essential": 1, "export": 1, "for": 2, "from": 2, "function": 1, "github-document": 1, "head": 1, "https": 2, "import": 2, "in": 3, "is": 1, "mdx": 1, "meta": 1, "metaprovider": 1, "mozilla": 1, "navigation": 1, "of": 1, "optimization": 1, "order": 1, "org/en-us/docs/web/html/element/title": 1, "page": 3, "providing": 1, "render": 1, "renders": 1, "return": 1, "root": 2, "seo": 3, "set": 1, "setting": 1, "site": 1, "site\u003c/title\u003e": 1, "solid": 1, "tab": 2, "tabs": 1, "tags": 1, "text": 1, "that": 1, "the": 6, "this": 1, "title": 11, "title\u003c/title\u003e": 1, "title=": 1, "titles": 3, "tsx": 3, "twoslash": 2, "usage": 1, "use_cases": 1, "version": 1, "will": 1, "with": 1, "your": 2 }, "length": 117 }, { "id": "eb712d3f89ab453b3a1e222c", "doc_id": "95221a927aafce7d4682355f", "title": "Tutorial (30m) | Remix", "url": "https://v2.remix.run/docs/start/tutorial", "type": "html", "source": "remix:does", "path": "devour_data/docs/tutorial--30m----remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsTutorial (30m)Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageSetupThe Root RouteAdding Stylesheets with linksThe Contact Route UINested Routes and OutletsClient Side RoutingLoading DataType InferenceURL Params in LoadersValidating Params and Throwing ResponsesData MutationsCreating ContactsUpdating DataUpdating Contacts with FormDataMutation DiscussionRedirecting new records to the edit pageActive Link StylingGlobal Pending UIDeleting RecordsIndex RoutesCancel ButtonURLSearchParams and GET SubmissionsSynchronizing URLs to Form StateSubmitting Form's onChangeAdding Search SpinnerManaging the History StackForms Without NavigationOptimistic UIOn this pageSetupThe Root RouteAdding Stylesheets with linksThe Contact Route UINested Routes and OutletsClient Side RoutingLoading DataType InferenceURL Params in LoadersValidating Params and Throwing ResponsesData MutationsCreating ContactsUpdating DataUpdating Contacts with FormDataMutation DiscussionRedirecting new records to the edit pageActive Link StylingGlobal Pending UIDeleting RecordsIndex RoutesCancel ButtonURLSearchParams and GET SubmissionsSynchronizing URLs to Form StateSubmitting Form's onChangeAdding Search SpinnerManaging the History StackForms Without NavigationOptimistic UIRemix Tutorial Just getting started with Remix? The latest version of Remix is now React Router v7. If you want to use the latest framework features, you can follow the same tutorial from the React Router docs. We'll be building a small, but feature-rich app that lets you keep track of your contacts. There's no database or other \"production ready\" things, so we can stay focused on Remix. We expect it to take about 30 m if you're following along, otherwise it's a quick read. 👉 Every time you see this, it means you need to do something in the app! The rest is just there for your information and deeper understanding. Let's get to it. Setup 👉 Generate a basic template npx create-remix@latest --template remix-run/remix/templates/remix-tutorial This uses a pretty bare-bones template but includes our CSS and data model, so we can focus on Remix. The Quick Start can familiarize you with the basic setup of a Remix project if you'd like to learn more. 👉 Start the app # cd into the app directory cd {wherever you put the app} # install dependencies if you haven't already npm install # start the server npm run dev You should be able to open up http://localhost:5173 and see an unstyled screen that looks like this: The Root Route Note the file at app/root.tsx. This is what we call the \"Root Route\". It's the first component in the UI that renders, so it typically contains the global layout for the page. Expand here to see the root component code import { Form, Links, Meta, Scripts, ScrollRestoration, } from \"@remix-run/react\"; export default function App() { return ( \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003cmeta charSet=\"utf-8\" /\u003e \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e \u003cMeta /\u003e \u003cLinks /\u003e \u003c/head\u003e \u003cbody\u003e \u003cdiv id=\"sidebar\"\u003e \u003ch1\u003eRemix Contacts\u003c/h1\u003e \u003cdiv\u003e \u003cForm id=\"search-form\" role=\"search\"\u003e \u003cinput aria-label=\"Search contacts\" id=\"q\" name=\"q\" placeholder=\"Search\" type=\"search\" /\u003e \u003cdiv aria-hidden hidden={true} id=\"search-spinner\" /\u003e \u003c/Form\u003e \u003cForm method=\"post\"\u003e \u003cbutton type=\"submit\"\u003eNew\u003c/button\u003e \u003c/Form\u003e \u003c/div\u003e \u003cnav\u003e \u003cul\u003e \u003cli\u003e \u003ca href={`/contacts/1`}\u003eYour Name\u003c/a\u003e \u003c/li\u003e \u003cli\u003e \u003ca href={`/contacts/2`}\u003eYour Friend\u003c/a\u003e \u003c/li\u003e \u003c/ul\u003e \u003c/nav\u003e \u003c/div\u003e \u003cScrollRestoration /\u003e \u003cScripts /\u003e \u003c/body\u003e \u003c/html\u003e ); } Adding Stylesheets with links While there are multiple ways to style your Remix app, we're going to use a plain stylesheet that's already been written to keep things focused on Remix. You can import CSS files directly into JavaScript modules. Vite will fingerprint the asset, save it to your build's client directory, and provide your module with the publicly accessible href. 👉 Import the app styles import type { LinksFunction } from \"@remix-run/node\"; // existing imports import appStylesHref from \"./app.css?url\"; export const links: LinksFunction = () =\u003e [ { rel: \"stylesheet\", href: appStylesHref }, ]; Every route can export a links function. They will be collected and rendered into the \u003cLinks /\u003e component we rendered in app/root.tsx. The app should look something like this now. It sure is nice having a designer who can also write the CSS, isn't it? (Thank you, Jim 🙏). The Contact Route UI If you click on one of the sidebar items, you'll get the default 404 page. Let's create a route that matches the url /contacts/1. 👉 Create the app/routes directory and contact route module mkdir app/routes touch app/routes/contacts.\\$contactId.tsx In the Remix route file convention, . will create a / in the URL and $ makes a segment dynamic. We just created a route that will match URLs that look like this: /contacts/123 /contacts/abc 👉 Add the contact component UI It's just a bunch of elements, feel free to copy/paste. import { Form } from \"@remix-run/react\"; import type { FunctionComponent } from \"react\"; import type { ContactRecord } from \"../data\"; export default function Contact() { const contact = { first: \"Your\", last: \"Name\", avatar: \"https://placecats.com/200/200\", twitter: \"your_handle\", notes: \"Some notes\", favorite: true, }; return ( \u003cdiv id=\"contact\"\u003e \u003cdiv\u003e \u003cimg alt={`${contact.first} ${contact.last} avatar`} key={contact.avatar} src={contact.avatar} /\u003e \u003c/div\u003e \u003cdiv\u003e \u003ch1\u003e {contact.first || contact.last ? ( \u003c\u003e {contact.first} {contact.last} \u003c/\u003e ) : ( \u003ci\u003eNo Name\u003c/i\u003e )}{\" \"} \u003cFavorite contact={contact} /\u003e \u003c/h1\u003e {contact.twitter ? ( \u003cp\u003e \u003ca href={`https://twitter.com/${contact.twitter}`} \u003e {contact.twitter} \u003c/a\u003e \u003c/p\u003e ) : null} {contact.notes ? \u003cp\u003e{contact.notes}\u003c/p\u003e : null} \u003cdiv\u003e \u003cForm action=\"edit\"\u003e \u003cbutton type=\"submit\"\u003eEdit\u003c/button\u003e \u003c/Form\u003e \u003cForm action=\"destroy\" method=\"post\" onSubmit={(event) =\u003e { const response = confirm( \"Please confirm you want to delete this record.\" ); if (!response) { event.preventDefault(); } }} \u003e \u003cbutton type=\"submit\"\u003eDelete\u003c/button\u003e \u003c/Form\u003e \u003c/div\u003e \u003c/div\u003e \u003c/div\u003e ); } const Favorite: FunctionComponent\u003c{ contact: Pick\u003cContactRecord, \"favorite\"\u003e; }\u003e = ({ contact }) =\u003e { const favorite = contact.favorite; return ( \u003cForm method=\"post\"\u003e \u003cbutton aria-label={ favorite ? \"Remove from favorites\" : \"Add to favorites\" } name=\"favorite\" value={favorite ? \"false\" : \"true\"} \u003e {favorite ? \"★\" : \"☆\"} \u003c/button\u003e \u003c/Form\u003e ); }; Now if we click one of the links or visit /contacts/1 we get ... nothing new? Nested Routes and Outlets Since Remix is built on top of React Router, it supports nested routing. In order for child routes to render inside parent layouts, we need to render an Outlet in the parent. Let's fix it, open up app/root.tsx and render an outlet inside. 👉 Render an \u003cOutlet /\u003e // existing imports import { Form, Links, Meta, Outlet, Scripts, ScrollRestoration, } from \"@remix-run/react\"; // existing imports \u0026 code export default function App() { return ( \u003chtml lang=\"en\"\u003e {/* other elements */} \u003cbody\u003e \u003cdiv id=\"sidebar\"\u003e{/* other elements */}\u003c/div\u003e \u003cdiv id=\"detail\"\u003e \u003cOutlet /\u003e \u003c/div\u003e {/* other elements */} \u003c/body\u003e \u003c/html\u003e ); } Now the child route should be rendered through the outlet. Client Side Routing You may or may not have noticed, but when we click the links in the sidebar, the browser is doing a full document request for the next URL instead of client side routing. Client side routing allows our app to update the URL without requesting another document from the server. Instead, the app can immediately render a new UI. Let's make it happen with \u003cLink\u003e. 👉 Change the sidebar \u003ca href\u003e to \u003cLink to\u003e // existing imports import { Form, Link, Links, Meta, Outlet, Scripts, ScrollRestoration, } from \"@remix-run/react\"; // existing imports and exports export default function App() { return ( \u003chtml lang=\"en\"\u003e {/* other elements */} \u003cbody\u003e \u003cdiv id=\"sidebar\"\u003e {/* other elements */} \u003cnav\u003e \u003cul\u003e \u003cli\u003e \u003cLink to={`/contacts/1`}\u003eYour Name\u003c/Link\u003e \u003c/li\u003e \u003cli\u003e \u003cLink to={`/contacts/2`}\u003eYour Friend\u003c/Link\u003e \u003c/li\u003e \u003c/ul\u003e \u003c/nav\u003e \u003c/div\u003e {/* other elements */} \u003c/body\u003e \u003c/html\u003e ); } You can open the network tab in the browser devtools to see that it's not requesting documents anymore. Loading Data URL segments, layouts, and data are more often than not coupled (tripled?) together. We can see it in this app already: URL Segment Component Data / \u003cRoot\u003e list of contacts contacts/:contactId \u003cContact\u003e individual contact Because of this natural coupling, Remix has data conventions to get data into your route components easily. There are two APIs we'll be using to load data, loader and useLoaderData. First we'll create and export a loader function in the root route and then render the data. 👉 Export a loader function from app/root.tsx and render the data The following code has a type error in it, we'll fix it in the next section // existing imports import { Form, Link, Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData, } from \"@remix-run/react\"; // existing imports import { getContacts } from \"./data\"; // existing exports export const loader = async () =\u003e { const contacts = await getContacts(); return { contacts }; }; export default function App() { const { contacts } = useLoaderData(); return ( \u003chtml lang=\"en\"\u003e {/* other elements */} \u003cbody\u003e \u003cdiv id=\"sidebar\"\u003e {/* other elements */} \u003cnav\u003e {contacts.length ? ( \u003cul\u003e {contacts.map((contact) =\u003e ( \u003cli key={contact.id}\u003e \u003cLink to={`contacts/${contact.id}`}\u003e {contact.first || contact.last ? ( \u003c\u003e {contact.first} {contact.last} \u003c/\u003e ) : ( \u003ci\u003eNo Name\u003c/i\u003e )}{\" \"} {contact.favorite ? ( \u003cspan\u003e★\u003c/span\u003e ) : null} \u003c/Link\u003e \u003c/li\u003e ))} \u003c/ul\u003e ) : ( \u003cp\u003e \u003ci\u003eNo contacts\u003c/i\u003e \u003c/p\u003e )} \u003c/nav\u003e \u003c/div\u003e {/* other elements */} \u003c/body\u003e \u003c/html\u003e ); } That's it! Remix will now automatically keep that data in sync with your UI. The sidebar should now look like this: Type Inference You may have noticed TypeScript complaining about the contact type inside the map. We can add a quick annotation to get type inference about our data with typeof loader: // existing imports and exports export default function App() { const { contacts } = useLoaderData\u003ctypeof loader\u003e(); // existing code } URL Params in Loaders 👉 Click on one of the sidebar links We should be seeing our old static contact page again, with one difference: the URL now has a real ID for the record. Remember the $contactId part of the file name at app/routes/contacts.$contactId.tsx? These dynamic segments will match dynamic (changing) values in that position of the URL. We call these values in the URL \"URL Params\", or just \"params\" for short. These params are passed to the loader with keys that match the dynamic segment. For example, our segment is named $contactId so the value will be passed as params.contactId. These params are most often used to find a record by ID. Let's try it out. 👉 Add a loader function to the contact page and access data with useLoaderData The following code has type errors in it, we'll fix them in the next section import { Form, useLoaderData } from \"@remix-run/react\"; // existing imports import { getContact } from \"../data\"; export const loader = async ({ params }) =\u003e { const contact = await getContact(params.contactId); return { contact }; }; export default function Contact() { const { contact } = useLoaderData\u003ctypeof loader\u003e(); // existing code } // existing code Validating Params and Throwing Responses TypeScript is very upset with us, let's make it happy and see what that forces us to consider: import type { LoaderFunctionArgs } from \"@remix-run/node\"; // existing imports import invariant from \"tiny-invariant\"; // existing imports export const loader = async ({ params, }: LoaderFunctionArgs) =\u003e { invariant(params.contactId, \"Missing contactId param\"); const contact = await getContact(params.contactId); return { contact }; }; // existing code The first problem this highlights is we might have gotten the param's name wrong between the file name and the code (maybe you changed the name of the file!). Invariant is a handy function for throwing an error with a custom message when you anticipated a potential issue with your code. Next, the useLoaderData\u003ctypeof loader\u003e() now knows that we got a contact or null (maybe there is no contact with that ID). This potential null is cumbersome for our component code, and the TS errors are flying around still. We could account for the possibility of the contact being not found in component code, but the webby thing to do is send a proper 404. We can do that in the loader and solve all of our problems at once. // existing imports export const loader = async ({ params, }: LoaderFunctionArgs) =\u003e { invariant(params.contactId, \"Missing contactId param\"); const contact = await getContact(params.contactId); if (!contact) { throw new Response(\"Not Found\", { status: 404 }); } return { contact }; }; // existing code Now, if the user isn't found, code execution down this path stops and Remix renders the error path instead. Components in Remix can focus only on the happy path 😁 Data Mutations We'll create our first contact in a second, but first let's talk about HTML. Remix emulates HTML Form navigation as the data mutation primitive, which used to be the only way prior to the JavaScript cambrian explosion. Don't be fooled by the simplicity! Forms in Remix give you the UX capabilities of client-rendered apps with the simplicity of the \"old school\" web model. While unfamiliar to some web developers, HTML forms actually cause a navigation in the browser, just like clicking a link. The only difference is in the request: links can only change the URL while forms can also change the request method (GET vs. POST) and the request body (POST form data). Without client side routing, the browser will serialize the form's data automatically and send it to the server as the request body for POST, and as URLSearchParams for GET. Remix does the same thing, except instead of sending the request to the server, it uses client side routing and sends it to the route's action function. We can test this out by clicking the \"New\" button in our app. Remix sends a 405 because there is no code on the server to handle this form navigation. Creating Contacts We'll create new contacts by exporting an action function in our root route. When the user clicks the \"new\" button, the form will POST to the root route action. 👉 Export an action function from app/root.tsx // existing imports import { createEmptyContact, getContacts } from \"./data\"; export const action = async () =\u003e { const contact = await createEmptyContact(); return { contact }; }; // existing code That's it! Go ahead and click the \"New\" button, and you should see a new record pop into the list 🥳 The createEmptyContact method just creates an empty contact with no name or data or anything. But it does still create a record, promise! 🧐 Wait a sec ... How did the sidebar update? Where did we call the action function? Where's the code to re-fetch the data? Where are useState, onSubmit and useEffect?! This is where the \"old school web\" programming model shows up. \u003cForm\u003e prevents the browser from sending the request to the server and sends it to your route's action function instead with fetch. In web semantics, a POST usually means some data is changing. By convention, Remix uses this as a hint to automatically revalidate the data on the page after the action finishes. In fact, since it's all just HTML and HTTP, you could disable JavaScript and the whole thing will still work. Instead of Remix serializing the form and making a fetch request to your server, the browser will serialize the form and make a document request. From there Remix will render the page server side and send it down. It's the same UI in the end either way. We'll keep JavaScript around, though, because we're going to make a better user experience than spinning favicons and static documents. Updating Data Let's add a way to fill the information for our new record. Just like creating data, you update data with \u003cForm\u003e. Let's make a new route at app/routes/contacts.$contactId_.edit.tsx. 👉 Create the edit component touch app/routes/contacts.\\$contactId_.edit.tsx Note the weird _ in $contactId_. By default, routes will automatically nest inside routes with the same prefixed name. Adding a trailing _ tells the route to not nest inside app/routes/contacts.$contactId.tsx. Read more in the Route File Naming guide. 👉 Add the edit page UI Nothing we haven't seen before, feel free to copy/paste: import type { LoaderFunctionArgs } from \"@remix-run/node\"; import { Form, useLoaderData } from \"@remix-run/react\"; import invariant from \"tiny-invariant\"; import { getContact } from \"../data\"; export const loader = async ({ params, }: LoaderFunctionArgs) =\u003e { invariant(params.contactId, \"Missing contactId param\"); const contact = await getContact(params.contactId); if (!contact) { throw new Response(\"Not Found\", { status: 404 }); } return { contact }; }; export default function EditContact() { const { contact } = useLoaderData\u003ctypeof loader\u003e(); return ( \u003cForm key={contact.id} id=\"contact-form\" method=\"post\"\u003e \u003cp\u003e \u003cspan\u003eName\u003c/span\u003e \u003cinput aria-label=\"First name\" defaultValue={contact.first} name=\"first\" placeholder=\"First\" type=\"text\" /\u003e \u003cinput aria-label=\"Last name\" defaultValue={contact.last} name=\"last\" placeholder=\"Last\" type=\"text\" /\u003e \u003c/p\u003e \u003clabel\u003e \u003cspan\u003eTwitter\u003c/span\u003e \u003cinput defaultValue={contact.twitter} name=\"twitter\" placeholder=\"@jack\" type=\"text\" /\u003e \u003c/label\u003e \u003clabel\u003e \u003cspan\u003eAvatar URL\u003c/span\u003e \u003cinput aria-label=\"Avatar URL\" defaultValue={contact.avatar} name=\"avatar\" placeholder=\"https://example.com/avatar.jpg\" type=\"text\" /\u003e \u003c/label\u003e \u003clabel\u003e \u003cspan\u003eNotes\u003c/span\u003e \u003ctextarea defaultValue={contact.notes} name=\"notes\" rows={6} /\u003e \u003c/label\u003e \u003cp\u003e \u003cbutton type=\"submit\"\u003eSave\u003c/button\u003e \u003cbutton type=\"button\"\u003eCancel\u003c/button\u003e \u003c/p\u003e \u003c/Form\u003e ); } Now click on your new record, then click the \"Edit\" button. We should see the new route. Updating Contacts with FormData The edit route we just created already renders a form. All we need to do is add the action function. Remix will serialize the form, POST it with fetch, and automatically revalidate all the data. 👉 Add an action function to the edit route import type { ActionFunctionArgs, LoaderFunctionArgs, } from \"@remix-run/node\"; import { redirect } from \"@remix-run/node\"; // existing imports import { getContact, updateContact } from \"../data\"; export const action = async ({ params, request, }: ActionFunctionArgs) =\u003e { invariant(params.contactId, \"Missing contactId param\"); const formData = await request.formData(); const updates = Object.fromEntries(formData); await updateContact(params.contactId, updates); return redirect(`/contacts/${params.contactId}`); }; // existing code Fill out the form, hit save, and you should see something like this! (Except easier on the eyes and maybe less hairy.) Mutation Discussion 😑 It worked, but I have no idea what is going on here... Let's dig in a bit... Open up contacts.$contactId_.edit.tsx and look at the form elements. Notice how they each have a name: \u003cinput aria-label=\"First name\" defaultValue={contact.first} name=\"first\" placeholder=\"First\" type=\"text\" /\u003e Without JavaScript, when a form is submitted, the browser will create FormData and set it as the body of the request when it sends it to the server. As mentioned before, Remix prevents that and emulates the browser by sending the request to your action function with fetch instead, including the FormData. Each field in the form is accessible with formData.get(name). For example, given the input field from above, you could access the first and last names like this: export const action = async ({ params, request, }: ActionFunctionArgs) =\u003e { const formData = await request.formData(); const firstName = formData.get(\"first\"); const lastName = formData.get(\"last\"); // ... }; Since we have a handful of form fields, we used Object.fromEntries to collect them all into an object, which is exactly what our updateContact function wants. const updates = Object.fromEntries(formData); updates.first; // \"Some\" updates.last; // \"Name\" Aside from the action function, Remix provides none of these APIs we're discussing: request, request.formData, Object.fromEntries are all provided by the web platform. After we finished the action, note the redirect at the end: export const action = async ({ params, request, }: ActionFunctionArgs) =\u003e { invariant(params.contactId, \"Missing contactId param\"); const formData = await request.formData(); const updates = Object.fromEntries(formData); await updateContact(params.contactId, updates); return redirect(`/contacts/${params.contactId}`); }; action and loader functions can both return a Response (makes sense, since they received a Request!). The redirect helper just makes it easier to return a Response that tells the app to change locations. Without client side routing, if a server redirected after a POST request, the new page would fetch the latest data and render. As we learned before, Remix emulates this model and automatically revalidates the data on the page after the action call. That's why the sidebar automatically updates when we save the form. The extra revalidation code doesn't exist without client side routing, so it doesn't need to exist with client side routing in Remix either! One last thing. Without JavaScript, the redirect would be a normal redirect. However, with JavaScript it's a client-side redirect, so the user doesn't lose client state like scroll positions or component state. Redirecting new records to the edit page Now that we know how to redirect, let's update the action that creates new contacts to redirect to the edit page: 👉 Redirect to the new record's edit page // existing imports import { redirect } from \"@remix-run/node\"; // existing imports export const action = async () =\u003e { const contact = await createEmptyContact(); return redirect(`/contacts/${contact.id}/edit`); }; // existing code Now when we click \"New\", we should end up on the edit page: Active Link Styling Now that we have a bunch of records, it's not clear which one we're looking at in the sidebar. We can use NavLink to fix this. 👉 Replace \u003cLink\u003e with \u003cNavLink\u003e in the sidebar // existing imports import { Form, Links, Meta, NavLink, Outlet, Scripts, ScrollRestoration, useLoaderData, } from \"@remix-run/react\"; // existing imports and exports export default function App() { const { contacts } = useLoaderData\u003ctypeof loader\u003e(); return ( \u003chtml lang=\"en\"\u003e {/* existing elements */} \u003cbody\u003e \u003cdiv id=\"sidebar\"\u003e {/* existing elements */} \u003cul\u003e {contacts.map((contact) =\u003e ( \u003cli key={contact.id}\u003e \u003cNavLink className={({ isActive, isPending }) =\u003e isActive ? \"active\" : isPending ? \"pending\" : \"\" } to={`contacts/${contact.id}`} \u003e {/* existing elements */} \u003c/NavLink\u003e \u003c/li\u003e ))} \u003c/ul\u003e {/* existing elements */} \u003c/div\u003e {/* existing elements */} \u003c/body\u003e \u003c/html\u003e ); } Note that we are passing a function to className. When the user is at the URL that matches \u003cNavLink to\u003e, then isActive will be true. When it's about to be active (the data is still loading) then isPending will be true. This allows us to easily indicate where the user is and also provide immediate when links are clicked, but data needs to be loaded. Global Pending UI As the user navigates the app, Remix will leave the old page up as data is loading for the next page. You may have noticed the app feels a little unresponsive as you click between the list. Let's provide the user with some so the app doesn't feel unresponsive. Remix is managing all the states behind the scenes and reveals the pieces you need to build dynamic web apps. In this case, we'll use the useNavigation hook. 👉 Use useNavigation to add global pending UI // existing imports import { Form, Links, Meta, NavLink, Outlet, Scripts, ScrollRestoration, useLoaderData, useNavigation, } from \"@remix-run/react\"; // existing imports and exports export default function App() { const { contacts } = useLoaderData\u003ctypeof loader\u003e(); const navigation = useNavigation(); return ( \u003chtml lang=\"en\"\u003e {/* existing elements */} \u003cbody\u003e {/* existing elements */} \u003cdiv className={ navigation.state === \"loading\" ? \"loading\" : \"\" } id=\"detail\" \u003e \u003cOutlet /\u003e \u003c/div\u003e {/* existing elements */} \u003c/body\u003e \u003c/html\u003e ); } useNavigation returns the current navigation state: it can be one of \"idle\", \"loading\" or \"submitting\". In our case, we add a \"loading\" class to the main part of the app if we're not idle. The CSS then adds a nice fade after a short delay (to avoid flickering the UI for fast loads). You could do anything you want, though, like show a spinner or loading bar across the top. Deleting Records If we review code in the contact route, we can find the delete button looks like this: \u003cForm action=\"destroy\" method=\"post\" onSubmit={(event) =\u003e { const response = confirm( \"Please confirm you want to delete this record.\" ); if (!response) { event.preventDefault(); } }} \u003e \u003cbutton type=\"submit\"\u003eDelete\u003c/button\u003e \u003c/Form\u003e Note the action points to \"destroy\". Like \u003cLink to\u003e, \u003cForm action\u003e can take a relative value. Since the form is rendered in contacts.$contactId.tsx, then a relative action with destroy will submit the form to contacts.$contactId.destroy when clicked. At this point you should know everything you need to know to make the delete button work. Maybe give it a try before moving on? You'll need: A new route An action at that route deleteContact from app/data.ts redirect to somewhere after 👉 Create the \"destroy\" route module touch app/routes/contacts.\\$contactId_.destroy.tsx 👉 Add the destroy action import type { ActionFunctionArgs } from \"@remix-run/node\"; import { redirect } from \"@remix-run/node\"; import invariant from \"tiny-invariant\"; import { deleteContact } from \"../data\"; export const action = async ({ params, }: ActionFunctionArgs) =\u003e { invariant(params.contactId, \"Missing contactId param\"); await deleteContact(params.contactId); return redirect(\"/\"); }; Alright, navigate to a record and click the \"Delete\" button. It works! 😅 I'm still confused why this all works When the user clicks the submit button: \u003cForm\u003e prevents the default browser behavior of sending a new document POST request to the server, but instead emulates the browser by creating a POST request with client side routing and fetch The \u003cForm action=\"destroy\"\u003e matches the new route at contacts.$contactId_.destroy.tsx and sends it the request After the action redirects, Remix calls all the loaders for the data on the page to get the latest values (this is \"revalidation\"). useLoaderData returns new values and causes the components to update! Add a Form, add an action, Remix does the rest. Index Routes When we load up the app, you'll notice a big blank page on the right side of our list. When a route has children, and you're at the parent route's path, the \u003cOutlet\u003e has nothing to render because no children match. You can think of index routes as the default child route to fill in that space. 👉 Create an index route for the root route touch app/routes/_index.tsx 👉 Fill in the index component's elements Feel free to copy/paste, nothing special here. export default function Index() { return ( \u003cp id=\"index-page\"\u003e This is a demo for Remix. \u003cbr /\u003e Check out{\" \"} \u003ca href=\"https://remix.run\"\u003ethe docs at remix.run\u003c/a\u003e. \u003c/p\u003e ); } The route name _index is special. It tells Remix to match and render this route when the user is at the parent route's exact path, so there are no other child routes to render in the \u003cOutlet /\u003e. Voilà! No more blank space. It's common to put dashboards, stats, feeds, etc. at index routes. They can participate in data loading as well. Cancel Button On the edit page we've got a cancel button that doesn't do anything yet. We'd like it to do the same thing as the browser's back button. We'll need a click handler on the button as well as useNavigate. 👉 Add the cancel button click handler with useNavigate // existing imports import { Form, useLoaderData, useNavigate, } from \"@remix-run/react\"; // existing imports and exports export default function EditContact() { const { contact } = useLoaderData\u003ctypeof loader\u003e(); const navigate = useNavigate(); return ( \u003cForm key={contact.id} id=\"contact-form\" method=\"post\"\u003e {/* existing elements */} \u003cp\u003e \u003cbutton type=\"submit\"\u003eSave\u003c/button\u003e \u003cbutton onClick={() =\u003e navigate(-1)} type=\"button\"\u003e Cancel \u003c/button\u003e \u003c/p\u003e \u003c/Form\u003e ); } Now when the user clicks \"Cancel\", they'll be sent back one entry in the browser's history. 🧐 Why is there no event.preventDefault() on the button? A \u003cbutton type=\"button\"\u003e, while seemingly redundant, is the HTML way of preventing a button from submitting its form. Two more features to go. We're on the home stretch! URLSearchParams and GET Submissions All of our interactive UI so far have been either links that change the URL or forms that post data to action functions. The search field is interesting because it's a mix of both: it's a form, but it only changes the URL, it doesn't change data. Let's see what happens when we submit the search form: 👉 Type a name into the search field and hit the enter key Note the browser's URL now contains your query in the URL as URLSearchParams: http://localhost:5173/?q=ryan Since it's not \u003cForm method=\"post\"\u003e, Remix emulates the browser by serializing the FormData into the URLSearchParams instead of the request body. loader functions have access to the search params from the request. Let's use it to filter the list: 👉 Filter the list if there are URLSearchParams import type { LinksFunction, LoaderFunctionArgs, } from \"@remix-run/node\"; // existing imports and exports export const loader = async ({ request, }: LoaderFunctionArgs) =\u003e { const url = new URL(request.url); const q = url.searchParams.get(\"q\"); const contacts = await getContacts(q); return { contacts }; }; // existing code Because this is a GET, not a POST, Remix does not call the action function. Submitting a GET form is the same as clicking a link: only the URL changes. This also means it's a normal page navigation. You can click the back button to get back to where you were. Synchronizing URLs to Form State There are a couple of UX issues here that we can take care of quickly. If you click back after a search, the form field still has the value you entered even though the list is no longer filtered. If you refresh the page after searching, the form field no longer has the value in it, even though the list is filtered In other words, the URL and our input's state are out of sync. Let's solve (2) first and start the input with the value from the URL. 👉 Return q from your loader, set it as the input's default value // existing imports and exports export const loader = async ({ request, }: LoaderFunctionArgs) =\u003e { const url = new URL(request.url); const q = url.searchParams.get(\"q\"); const contacts = await getContacts(q); return { contacts, q }; }; export default function App() { const { contacts, q } = useLoaderData\u003ctypeof loader\u003e(); const navigation = useNavigation(); return ( \u003chtml lang=\"en\"\u003e {/* existing elements */} \u003cbody\u003e \u003cdiv id=\"sidebar\"\u003e {/* existing elements */} \u003cdiv\u003e \u003cForm id=\"search-form\" role=\"search\"\u003e \u003cinput aria-label=\"Search contacts\" defaultValue={q || \"\"} id=\"q\" name=\"q\" placeholder=\"Search\" type=\"search\" /\u003e {/* existing elements */} \u003c/Form\u003e {/* existing elements */} \u003c/div\u003e {/* existing elements */} \u003c/div\u003e {/* existing elements */} \u003c/body\u003e \u003c/html\u003e ); } The input field will show the query if you refresh the page after a search now. Now for problem (1), clicking the back button and updating the input. We can bring in useEffect from React to manipulate the input's value in the DOM directly. 👉 Synchronize input value with the URLSearchParams // existing imports import { useEffect } from \"react\"; // existing imports and exports export default function App() { const { contacts, q } = useLoaderData\u003ctypeof loader\u003e(); const navigation = useNavigation(); useEffect(() =\u003e { const searchField = document.getElementById(\"q\"); if (searchField instanceof HTMLInputElement) { searchField.value = q || \"\"; } }, [q]); // existing code } 🤔 Shouldn't you use a controlled component and React State for this? You could certainly do this as a controlled component. You will have more synchronization points, but it's up to you. Expand this to see what it would look like // We no longer need useEffect import { useState } from \"react\"; // existing imports and exports export default function App() { const { contacts, q } = useLoaderData\u003ctypeof loader\u003e(); const navigation = useNavigation(); // the query now needs to be kept in state const [prevQ, setPrevQ] = useState(q); const [query, setQuery] = useState(q || \"\"); // We can avoid using `useEffect` to synchronize the query // by using a separate piece of state to store the previous // value if (q !== prevQ) { setPrevQ(q); setQuery(q || \"\"); } return ( \u003chtml lang=\"en\"\u003e {/* existing elements */} \u003cbody\u003e \u003cdiv id=\"sidebar\"\u003e {/* existing elements */} \u003cdiv\u003e \u003cForm id=\"search-form\" role=\"search\"\u003e \u003cinput aria-label=\"Search contacts\" id=\"q\" name=\"q\" // synchronize user's input to component state onChange={(event) =\u003e setQuery(event.currentTarget.value) } placeholder=\"Search\" type=\"search\" // switched to `value` from `defaultValue` value={query} /\u003e {/* existing elements */} \u003c/Form\u003e {/* existing elements */} \u003c/div\u003e {/* existing elements */} \u003c/div\u003e {/* existing elements */} \u003c/body\u003e \u003c/html\u003e ); } Alright, you should now be able to click the back/forward/refresh buttons, and the input's value should be in sync with the URL and results. Submitting Form's onChange We've got a product decision to make here. Sometimes you want the user to submit the form to filter some results, other times you want to filter as the user types. We've already implemented the first, so let's see what it's like for the second. We've seen useNavigate already, we'll use its cousin, useSubmit, for this. // existing imports import { Form, Links, Meta, NavLink, Outlet, Scripts, ScrollRestoration, useLoaderData, useNavigation, useSubmit, } from \"@remix-run/react\"; // existing imports and exports export default function App() { const { contacts, q } = useLoaderData\u003ctypeof loader\u003e(); const navigation = useNavigation(); const submit = useSubmit(); // existing code return ( \u003chtml lang=\"en\"\u003e {/* existing elements */} \u003cbody\u003e \u003cdiv id=\"sidebar\"\u003e {/* existing elements */} \u003cdiv\u003e \u003cForm id=\"search-form\" onChange={(event) =\u003e submit(event.currentTarget) } role=\"search\" \u003e {/* existing elements */} \u003c/Form\u003e {/* existing elements */} \u003c/div\u003e {/* existing elements */} \u003c/div\u003e {/* existing elements */} \u003c/body\u003e \u003c/html\u003e ); } As you type, the form is automatically submitted now! Note the argument to submit. The submit function will serialize and submit any form you pass to it. We're passing in event.currentTarget. The currentTarget is the DOM node the event is attached to (the form). Adding Search Spinner In a production app, it's likely this search will be looking for records in a database that is too large to send all at once and filter client side. That's why this demo has some faked network latency. Without any loading indicator, the search feels kinda sluggish. Even if we could make our database faster, we'll always have the user's network latency in the way and out of our control. For a better user experience, let's add some immediate UI for the search. We'll use useNavigation again. 👉 Add a variable to know if we're searching // existing imports and exports export default function App() { const { contacts, q } = useLoaderData\u003ctypeof loader\u003e(); const navigation = useNavigation(); const submit = useSubmit(); const searching = navigation.location \u0026\u0026 new URLSearchParams(navigation.location.search).has( \"q\" ); // existing code } When nothing is happening, navigation.location will be undefined, but when the user navigates it will be populated with the next location while data loads. Then we check if they're searching with location.search. 👉 Add classes to search form elements using the new searching state // existing imports and exports export default function App() { // existing code return ( \u003chtml lang=\"en\"\u003e {/* existing elements */} \u003cbody\u003e \u003cdiv id=\"sidebar\"\u003e {/* existing elements */} \u003cdiv\u003e \u003cForm id=\"search-form\" onChange={(event) =\u003e submit(event.currentTarget) } role=\"search\" \u003e \u003cinput aria-label=\"Search contacts\" className={searching ? \"loading\" : \"\"} defaultValue={q || \"\"} id=\"q\" name=\"q\" placeholder=\"Search\" type=\"search\" /\u003e \u003cdiv aria-hidden hidden={!searching} id=\"search-spinner\" /\u003e \u003c/Form\u003e {/* existing elements */} \u003c/div\u003e {/* existing elements */} \u003c/div\u003e {/* existing elements */} \u003c/body\u003e \u003c/html\u003e ); } Bonus points, avoid fading out the main screen when searching: // existing imports and exports export default function App() { // existing code return ( \u003chtml lang=\"en\"\u003e {/* existing elements */} \u003cbody\u003e {/* existing elements */} \u003cdiv className={ navigation.state === \"loading\" \u0026\u0026 !searching ? \"loading\" : \"\" } id=\"detail\" \u003e \u003cOutlet /\u003e \u003c/div\u003e {/* existing elements */} \u003c/body\u003e \u003c/html\u003e ); } You should now have a nice spinner on the left side of the search input. Managing the History Stack Since the form is submitted for every keystroke, typing the characters \"alex\" and then deleting them with backspace results in a huge history stack 😂. We definitely don't want this: We can avoid this by replacing the current entry in the history stack with the next page instead of pushing into it. 👉 Use replace in submit // existing imports and exports export default function App() { // existing code return ( \u003chtml lang=\"en\"\u003e {/* existing elements */} \u003cbody\u003e \u003cdiv id=\"sidebar\"\u003e {/* existing elements */} \u003cdiv\u003e \u003cForm id=\"search-form\" onChange={(event) =\u003e { const isFirstSearch = q === null; submit(event.currentTarget, { replace: !isFirstSearch, }); }} role=\"search\" \u003e {/* existing elements */} \u003c/Form\u003e {/* existing elements */} \u003c/div\u003e {/* existing elements */} \u003c/div\u003e {/* existing elements */} \u003c/body\u003e \u003c/html\u003e ); } After a quick check if this is the first search or not, we decide to replace it. Now the first search will add a new entry, but every keystroke after that will replace the current entry. Instead of clicking back seven times to remove the search, users only have to click back once. Forms Without Navigation So far all of our forms have changed the URL. While these user flows are common, it's equally common to want to submit a form without causing a navigation. For these cases, we have useFetcher. It allows us to communicate with actions and loaders without causing a navigation. The ★ button on the contact page makes sense for this. We aren't creating or deleting a new record, and we don't want to change pages. We simply want to change the data on the page we're looking at. 👉 Change the \u003cFavorite\u003e form to a fetcher form // existing imports import { Form, useFetcher, useLoaderData, } from \"@remix-run/react\"; // existing imports and exports // existing code const Favorite: FunctionComponent\u003c{ contact: Pick\u003cContactRecord, \"favorite\"\u003e; }\u003e = ({ contact }) =\u003e { const fetcher = useFetcher(); const favorite = contact.favorite; return ( \u003cfetcher.Form method=\"post\"\u003e \u003cbutton aria-label={ favorite ? \"Remove from favorites\" : \"Add to favorites\" } name=\"favorite\" value={favorite ? \"false\" : \"true\"} \u003e {favorite ? \"★\" : \"☆\"} \u003c/button\u003e \u003c/fetcher.Form\u003e ); }; This form will no longer cause a navigation, but simply fetch to the action. Speaking of which ... this won't work until we create the action. 👉 Create the action import type { ActionFunctionArgs, LoaderFunctionArgs, } from \"@remix-run/node\"; // existing imports import { getContact, updateContact } from \"../data\"; // existing imports export const action = async ({ params, request, }: ActionFunctionArgs) =\u003e { invariant(params.contactId, \"Missing contactId param\"); const formData = await request.formData(); return updateContact(params.contactId, { favorite: formData.get(\"favorite\") === \"true\", }); }; // existing code Alright, we're ready to click the star next to the user's name! Check that out, both stars automatically update. Our new \u003cfetcher.Form method=\"post\"\u003e works almost exactly like the \u003cForm\u003e we've been using: it calls the action and then all data is revalidated automatically — even your errors will be caught the same way. There is one key difference, though, it's not a navigation, so the URL doesn't change, and the history stack is unaffected. Optimistic UI You probably noticed the app felt kind of unresponsive when we clicked the favorite button from the last section. Once again, we added some network latency because you're going to have it in the real world. To give the user some , we could put the star into a loading state with fetcher.state (a lot like navigation.state from before), but we can do something even better this time. We can use a strategy called \"Optimistic UI\". The fetcher knows the FormData being submitted to the action, so it's available to you on fetcher.formData. We'll use that to immediately update the star's state, even though the network hasn't finished. If the update eventually fails, the UI will revert to the real data. 👉 Read the optimistic value from fetcher.formData // existing code const Favorite: FunctionComponent\u003c{ contact: Pick\u003cContactRecord, \"favorite\"\u003e; }\u003e = ({ contact }) =\u003e { const fetcher = useFetcher(); const favorite = fetcher.formData ? fetcher.formData.get(\"favorite\") === \"true\" : contact.favorite; return ( \u003cfetcher.Form method=\"post\"\u003e \u003cbutton aria-label={ favorite ? \"Remove from favorites\" : \"Add to favorites\" } name=\"favorite\" value={favorite ? \"false\" : \"true\"} \u003e {favorite ? \"★\" : \"☆\"} \u003c/button\u003e \u003c/fetcher.Form\u003e ); }; Now the star immediately changes to the new state when you click it. That's it! Thanks for giving Remix a try. We hope this tutorial gives you a solid start to build great user experiences. There's a lot more you can do, so make sure to check out all the APIs 😀© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_1047\\\":-5,\\\"_1048\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":1046},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"docs/start/tutorial.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"remix-tutorial\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#remix-tutorial\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRemix Tutorial\\u003c/h1\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003eJust getting started with Remix? The latest version of \\u003ca href=\\\\\\\"https://remix.run/blog/incremental-path-to-react-19\\\\\\\"\\u003eRemix is now React Router v7\\u003c/a\\u003e. If you want to use the latest framework features, you can follow the same \\u003ca href=\\\\\\\"https://reactrouter.com/tutorials/address-book\\\\\\\"\\u003etutorial from the React Router docs\\u003c/a\\u003e.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eWe'll be building a small, but feature-rich app that lets you keep track of your contacts. There's no database or other \\\\\\\"production ready\\\\\\\" things, so we can stay focused on Remix. We expect it to take about 30 m if you're following along, otherwise it's a quick read.\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" src=\\\\\\\"/docs-images/contacts/01.webp\\\\\\\" /\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eEvery time you see this, it means you need to do something in the app!\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe rest is just there for your information and deeper understanding. Let's get to it.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"setup\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#setup\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSetup\\u003c/h2\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eGenerate a basic template\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpx\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecreate-remix@latest\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e--template\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eremix-run/remix/templates/remix-tutorial\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThis uses a pretty bare-bones template but includes our CSS and data model, so we can focus on Remix. The \\u003ca href=\\\\\\\"./quickstart\\\\\\\"\\u003eQuick Start\\u003c/a\\u003e can familiarize you with the basic setup of a Remix project if you'd like to learn more.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eStart the app\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e# cd into the app directory\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecd\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e{wherever\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eyou\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eput\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ethe\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eapp}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e# install dependencies if you haven't already\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003einstall\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e# start the server\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003erun\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edev\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eYou should be able to open up \\u003ca href=\\\\\\\"http://localhost:5173\\\\\\\"\\u003ehttp://localhost:5173\\u003c/a\\u003e and see an unstyled screen that looks like this:\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" src=\\\\\\\"/docs-images/contacts/03.webp\\\\\\\" /\\u003e\\\\n\\u003ch2 id=\\\\\\\"the-root-route\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#the-root-route\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eThe Root Route\\u003c/h2\\u003e\\\\n\\u003cp\\u003eNote the file at \\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e. This is what we call the \\\\\\\"Root Route\\\\\\\". It's the first component in the UI that renders, so it typically contains the global layout for the page.\\u003c/p\\u003e\\\\n\\u003cdetails\\u003e\\\\n\\u003csummary\\u003eExpand here to see the root component code\\u003c/summary\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinks\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eMeta\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScripts\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003echarSet\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eutf-8\\u003c/span\\u003e\\\\\\\" /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eviewport\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003econtent\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ewidth=device-width, initial-scale=1\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eMeta\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinks\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003eRemix Contacts\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch-form\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erole\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003earia-label\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eSearch contacts\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eq\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eq\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eplaceholder\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eSearch\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003earia-hidden\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehidden\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch-spinner\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003eNew\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enav\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eul\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eli\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ea\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehref\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/contacts/1\\u003c/span\\u003e`\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003eYour Name\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ea\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eli\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eli\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ea\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehref\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/contacts/2\\u003c/span\\u003e`\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003eYour Friend\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ea\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"50\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eli\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"51\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eul\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"52\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enav\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"53\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"54\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"55\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"56\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eScripts\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"57\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"58\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"59\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"60\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/details\\u003e\\\\n\\u003ch2 id=\\\\\\\"adding-stylesheets-with-links\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#adding-stylesheets-with-links\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eAdding Stylesheets with \\u003ccode\\u003elinks\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhile there are multiple ways to style your Remix app, we're going to use a plain stylesheet that's already been written to keep things focused on Remix.\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou can import CSS files directly into JavaScript modules. Vite will fingerprint the asset, save it to your build's client directory, and provide your module with the publicly accessible href.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eImport the app styles\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinksFunction\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eappStylesHref\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./app.css?url\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elinks\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinksFunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e { rel: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003estylesheet\\u003c/span\\u003e\\\\\\\", href: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eappStylesHref\\u003c/span\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e];\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eEvery route can export a \\u003ca href=\\\\\\\"../route/links\\\\\\\"\\u003e\\u003ccode\\u003elinks\\u003c/code\\u003e\\u003c/a\\u003e function. They will be collected and rendered into the \\u003ccode\\u003e\\u0026#x3C;Links /\\u003e\\u003c/code\\u003e component we rendered in \\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe app should look something like this now. It sure is nice having a designer who can also write the CSS, isn't it? (Thank you, \\u003ca href=\\\\\\\"https://blog.jim-nielsen.com\\\\\\\"\\u003eJim\\u003c/a\\u003e 🙏).\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/04.webp\\\\\\\" /\\u003e\\\\n\\u003ch2 id=\\\\\\\"the-contact-route-ui\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#the-contact-route-ui\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eThe Contact Route UI\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIf you click on one of the sidebar items, you'll get the default 404 page. Let's create a route that matches the url \\u003ccode\\u003e/contacts/1\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eCreate the \\u003ccode\\u003eapp/routes\\u003c/code\\u003e directory and contact route module\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003emkdir\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eapp/routes\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etouch\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eapp/routes/contacts.\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003e\\\\\\\\$\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econtactId.tsx\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eIn the Remix \\u003ca href=\\\\\\\"../file-conventions/routes\\\\\\\"\\u003eroute file convention\\u003c/a\\u003e, \\u003ccode\\u003e.\\u003c/code\\u003e will create a \\u003ccode\\u003e/\\u003c/code\\u003e in the URL and \\u003ccode\\u003e$\\u003c/code\\u003e makes a segment dynamic. We just created a route that will match URLs that look like this:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e/contacts/123\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e/contacts/abc\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdd the contact component UI\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eIt's just a bunch of elements, feel free to copy/paste.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eFunctionComponent\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ereact\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eContactRecord\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e../data\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eContact\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e first: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eYour\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e last: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eName\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e avatar: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ehttps://placecats.com/200/200\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e twitter: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eyour_handle\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e notes: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eSome notes\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e favorite: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econtact\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eimg\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ealt\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e`${\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efirst\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u003c/span\\u003e${\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elast\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e avatar\\u003c/span\\u003e`\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ekey\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eavatar\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esrc\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eavatar\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efirst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e||\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elast\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efirst\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elast\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ei\\u003c/span\\u003e\\u003eNo Name\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ei\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e )\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}{\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eFavorite\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003econtact\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etwitter\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ea\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehref\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ehttps://twitter.com/\\u003c/span\\u003e${\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etwitter\\u003c/span\\u003e}`\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etwitter\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ea\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enotes\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enotes\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"50\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"51\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eedit\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"52\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003eEdit\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"53\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"54\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"55\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"56\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edestroy\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"57\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"58\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonSubmit\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"59\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eresponse\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003econfirm\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"60\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ePlease confirm you want to delete this record.\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"61\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"62\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eresponse\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"63\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003epreventDefault\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"64\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"65\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"66\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"67\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003eDelete\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"68\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"69\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"70\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"71\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"72\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"73\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"74\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"75\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eFavorite\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eFunctionComponent\\u003c/span\\u003e\\u0026#x3C;{\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"76\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003ePick\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eContactRecord\\u003c/span\\u003e, \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efavorite\\u003c/span\\u003e\\\\\\\"\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"77\\\\\\\"\\u003e}\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e ({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e }) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"78\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"79\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"80\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"81\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"82\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"83\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003earia-label\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"84\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"85\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eRemove from favorites\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"86\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eAdd to favorites\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"87\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"88\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efavorite\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"89\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efalse\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etrue\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"90\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"91\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e★\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e☆\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"92\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"93\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"94\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"95\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNow if we click one of the links or visit \\u003ccode\\u003e/contacts/1\\u003c/code\\u003e we get ... nothing new?\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" alt=\\\\\\\"contact route with blank main content\\\\\\\" src=\\\\\\\"/docs-images/contacts/05.webp\\\\\\\" /\\u003e\\\\n\\u003ch2 id=\\\\\\\"nested-routes-and-outlets\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#nested-routes-and-outlets\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNested Routes and Outlets\\u003c/h2\\u003e\\\\n\\u003cp\\u003eSince Remix is built on top of React Router, it supports nested routing. In order for child routes to render inside parent layouts, we need to render an \\u003ca href=\\\\\\\"../components/outlet\\\\\\\"\\u003e\\u003ccode\\u003eOutlet\\u003c/code\\u003e\\u003c/a\\u003e in the parent. Let's fix it, open up \\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e and render an outlet inside.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eRender an \\u003ca href=\\\\\\\"../components/outlet\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Outlet /\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinks\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eMeta\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScripts\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports \\u0026#x26; code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* other elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* other elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edetail\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* other elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNow the child route should be rendered through the outlet.\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" alt=\\\\\\\"contact route with the main content\\\\\\\" src=\\\\\\\"/docs-images/contacts/06.webp\\\\\\\" /\\u003e\\\\n\\u003ch2 id=\\\\\\\"client-side-routing\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#client-side-routing\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eClient Side Routing\\u003c/h2\\u003e\\\\n\\u003cp\\u003eYou may or may not have noticed, but when we click the links in the sidebar, the browser is doing a full document request for the next URL instead of client side routing.\\u003c/p\\u003e\\\\n\\u003cp\\u003eClient side routing allows our app to update the URL without requesting another document from the server. Instead, the app can immediately render a new UI. Let's make it happen with \\u003ca href=\\\\\\\"../components/link\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Link\\u003e\\u003c/code\\u003e\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eChange the sidebar \\u003ccode\\u003e\\u0026#x3C;a href\\u003e\\u003c/code\\u003e to \\u003ccode\\u003e\\u0026#x3C;Link to\\u003e\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLink\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinks\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eMeta\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScripts\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* other elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* other elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enav\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eul\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eli\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLink\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eto\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/contacts/1\\u003c/span\\u003e`\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003eYour Name\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eli\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eli\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLink\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eto\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/contacts/2\\u003c/span\\u003e`\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003eYour Friend\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eli\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eul\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enav\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* other elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eYou can open the network tab in the browser devtools to see that it's not requesting documents anymore.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"loading-data\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#loading-data\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eLoading Data\\u003c/h2\\u003e\\\\n\\u003cp\\u003eURL segments, layouts, and data are more often than not coupled (tripled?) together. We can see it in this app already:\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eURL Segment\\u003c/th\\u003e\\\\n\\u003cth\\u003eComponent\\u003c/th\\u003e\\\\n\\u003cth\\u003eData\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e/\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e\\u0026#x3C;Root\\u003e\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003elist of contacts\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003econtacts/:contactId\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e\\u0026#x3C;Contact\\u003e\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003eindividual contact\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003eBecause of this natural coupling, Remix has data conventions to get data into your route components easily.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThere are two APIs we'll be using to load data, \\u003ca href=\\\\\\\"../route/loader\\\\\\\"\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e and \\u003ca href=\\\\\\\"../hooks/use-loader-data\\\\\\\"\\u003e\\u003ccode\\u003euseLoaderData\\u003c/code\\u003e\\u003c/a\\u003e. First we'll create and export a \\u003ccode\\u003eloader\\u003c/code\\u003e function in the root route and then render the data.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eExport a \\u003ccode\\u003eloader\\u003c/code\\u003e function from \\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e and render the data\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003eThe following code has a type error in it, we'll fix it in the next section\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLink\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinks\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eMeta\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScripts\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003egetContacts\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./data\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetContacts\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* other elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* other elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enav\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e.length \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eul\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emap\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eli\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ekey\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLink\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eto\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econtacts/\\u003c/span\\u003e${\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e}`\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efirst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e||\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elast\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u0026#x3C;\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efirst\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elast\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u0026#x3C;/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ei\\u003c/span\\u003e\\u003eNo Name\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ei\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e )\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}{\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003e★\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eli\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"50\\\\\\\"\\u003e ))\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"51\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eul\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"52\\\\\\\"\\u003e ) \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"53\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"54\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ei\\u003c/span\\u003e\\u003eNo contacts\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ei\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"55\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"56\\\\\\\"\\u003e )\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"57\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enav\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"58\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"59\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* other elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"60\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"61\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"62\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"63\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThat's it! Remix will now automatically keep that data in sync with your UI. The sidebar should now look like this:\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/07.webp\\\\\\\" /\\u003e\\\\n\\u003ch2 id=\\\\\\\"type-inference\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#type-inference\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eType Inference\\u003c/h2\\u003e\\\\n\\u003cp\\u003eYou may have noticed TypeScript complaining about the \\u003ccode\\u003econtact\\u003c/code\\u003e type inside the map. We can add a quick annotation to get type inference about our data with \\u003ccode\\u003etypeof loader\\u003c/code\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"url-params-in-loaders\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#url-params-in-loaders\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eURL Params in Loaders\\u003c/h2\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eClick on one of the sidebar links\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eWe should be seeing our old static contact page again, with one difference: the URL now has a real ID for the record.\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/08.webp\\\\\\\" /\\u003e\\\\n\\u003cp\\u003eRemember the \\u003ccode\\u003e$contactId\\u003c/code\\u003e part of the file name at \\u003ccode\\u003eapp/routes/contacts.$contactId.tsx\\u003c/code\\u003e? These dynamic segments will match dynamic (changing) values in that position of the URL. We call these values in the URL \\\\\\\"URL Params\\\\\\\", or just \\\\\\\"params\\\\\\\" for short.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThese \\u003ca href=\\\\\\\"../route/loader#params\\\\\\\"\\u003e\\u003ccode\\u003eparams\\u003c/code\\u003e\\u003c/a\\u003e are passed to the loader with keys that match the dynamic segment. For example, our segment is named \\u003ccode\\u003e$contactId\\u003c/code\\u003e so the value will be passed as \\u003ccode\\u003eparams.contactId\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThese params are most often used to find a record by ID. Let's try it out.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdd a \\u003ccode\\u003eloader\\u003c/code\\u003e function to the contact page and access data with \\u003ccode\\u003euseLoaderData\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003eThe following code has type errors in it, we'll fix them in the next section\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003egetContact\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e../data\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e ({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e }) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetContact\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eContact\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/10.webp\\\\\\\" /\\u003e\\\\n\\u003ch2 id=\\\\\\\"validating-params-and-throwing-responses\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#validating-params-and-throwing-responses\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eValidating Params and Throwing Responses\\u003c/h2\\u003e\\\\n\\u003cp\\u003eTypeScript is very upset with us, let's make it happy and see what that forces us to consider:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einvariant\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etiny-invariant\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e ({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003einvariant\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e, \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eMissing contactId param\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetContact\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThe first problem this highlights is we might have gotten the param's name wrong between the file name and the code (maybe you changed the name of the file!). Invariant is a handy function for throwing an error with a custom message when you anticipated a potential issue with your code.\\u003c/p\\u003e\\\\n\\u003cp\\u003eNext, the \\u003ccode\\u003euseLoaderData\\u0026#x3C;typeof loader\\u003e()\\u003c/code\\u003e now knows that we got a contact or \\u003ccode\\u003enull\\u003c/code\\u003e (maybe there is no contact with that ID). This potential \\u003ccode\\u003enull\\u003c/code\\u003e is cumbersome for our component code, and the TS errors are flying around still.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWe could account for the possibility of the contact being not found in component code, but the webby thing to do is send a proper 404. We can do that in the loader and solve all of our problems at once.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e ({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003einvariant\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e, \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eMissing contactId param\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetContact\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ethrow\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003enew\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eResponse\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eNot Found\\u003c/span\\u003e\\\\\\\", { status: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e404\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNow, if the user isn't found, code execution down this path stops and Remix renders the error path instead. Components in Remix can focus only on the happy path 😁\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"data-mutations\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#data-mutations\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eData Mutations\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWe'll create our first contact in a second, but first let's talk about HTML.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix emulates HTML Form navigation as the data mutation primitive, which used to be the only way prior to the JavaScript cambrian explosion. Don't be fooled by the simplicity! Forms in Remix give you the UX capabilities of client-rendered apps with the simplicity of the \\\\\\\"old school\\\\\\\" web model.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWhile unfamiliar to some web developers, HTML \\u003ccode\\u003eform\\u003c/code\\u003es actually cause a navigation in the browser, just like clicking a link. The only difference is in the request: links can only change the URL while \\u003ccode\\u003eform\\u003c/code\\u003es can also change the request method (\\u003ccode\\u003eGET\\u003c/code\\u003e vs. \\u003ccode\\u003ePOST\\u003c/code\\u003e) and the request body (\\u003ccode\\u003ePOST\\u003c/code\\u003e form data).\\u003c/p\\u003e\\\\n\\u003cp\\u003eWithout client side routing, the browser will serialize the \\u003ccode\\u003eform\\u003c/code\\u003e's data automatically and send it to the server as the request body for \\u003ccode\\u003ePOST\\u003c/code\\u003e, and as \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams\\\\\\\"\\u003e\\u003ccode\\u003eURLSearchParams\\u003c/code\\u003e\\u003c/a\\u003e for \\u003ccode\\u003eGET\\u003c/code\\u003e. Remix does the same thing, except instead of sending the request to the server, it uses client side routing and sends it to the route's \\u003ca href=\\\\\\\"../route/action\\\\\\\"\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e function.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWe can test this out by clicking the \\\\\\\"New\\\\\\\" button in our app.\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/09.webp\\\\\\\" /\\u003e\\\\n\\u003cp\\u003eRemix sends a 405 because there is no code on the server to handle this form navigation.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"creating-contacts\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#creating-contacts\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eCreating Contacts\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWe'll create new contacts by exporting an \\u003ccode\\u003eaction\\u003c/code\\u003e function in our root route. When the user clicks the \\\\\\\"new\\\\\\\" button, the form will \\u003ccode\\u003ePOST\\u003c/code\\u003e to the root route action.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eExport an \\u003ccode\\u003eaction\\u003c/code\\u003e function from \\u003ccode\\u003eapp/root.tsx\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecreateEmptyContact\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003egetContacts\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./data\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateEmptyContact\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThat's it! Go ahead and click the \\\\\\\"New\\\\\\\" button, and you should see a new record pop into the list 🥳\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/11.webp\\\\\\\" /\\u003e\\\\n\\u003cp\\u003eThe \\u003ccode\\u003ecreateEmptyContact\\u003c/code\\u003e method just creates an empty contact with no name or data or anything. But it does still create a record, promise!\\u003c/p\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003e🧐 Wait a sec ... How did the sidebar update? Where did we call the \\u003ccode\\u003eaction\\u003c/code\\u003e function? Where's the code to re-fetch the data? Where are \\u003ccode\\u003euseState\\u003c/code\\u003e, \\u003ccode\\u003eonSubmit\\u003c/code\\u003e and \\u003ccode\\u003euseEffect\\u003c/code\\u003e?!\\u003c/p\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003cp\\u003eThis is where the \\\\\\\"old school web\\\\\\\" programming model shows up. \\u003ca href=\\\\\\\"../components/form\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e\\u003c/a\\u003e prevents the browser from sending the request to the server and sends it to your route's \\u003ccode\\u003eaction\\u003c/code\\u003e function instead with \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/fetch\\\\\\\"\\u003e\\u003ccode\\u003efetch\\u003c/code\\u003e\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIn web semantics, a \\u003ccode\\u003ePOST\\u003c/code\\u003e usually means some data is changing. By convention, Remix uses this as a hint to automatically revalidate the data on the page after the \\u003ccode\\u003eaction\\u003c/code\\u003e finishes.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIn fact, since it's all just HTML and HTTP, you could disable JavaScript and the whole thing will still work. Instead of Remix serializing the form and making a \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/fetch\\\\\\\"\\u003e\\u003ccode\\u003efetch\\u003c/code\\u003e\\u003c/a\\u003e request to your server, the browser will serialize the form and make a document request. From there Remix will render the page server side and send it down. It's the same UI in the end either way.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWe'll keep JavaScript around, though, because we're going to make a better user experience than spinning favicons and static documents.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"updating-data\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updating-data\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdating Data\\u003c/h2\\u003e\\\\n\\u003cp\\u003eLet's add a way to fill the information for our new record.\\u003c/p\\u003e\\\\n\\u003cp\\u003eJust like creating data, you update data with \\u003ca href=\\\\\\\"../components/form\\\\\\\"\\u003e\\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e\\u003c/a\\u003e. Let's make a new route at \\u003ccode\\u003eapp/routes/contacts.$contactId_.edit.tsx\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eCreate the edit component\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etouch\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eapp/routes/contacts.\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003e\\\\\\\\$\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econtactId_.edit.tsx\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNote the weird \\u003ccode\\u003e_\\u003c/code\\u003e in \\u003ccode\\u003e$contactId_\\u003c/code\\u003e. By default, routes will automatically nest inside routes with the same prefixed name. Adding a trailing \\u003ccode\\u003e_\\u003c/code\\u003e tells the route to \\u003cstrong\\u003enot\\u003c/strong\\u003e nest inside \\u003ccode\\u003eapp/routes/contacts.$contactId.tsx\\u003c/code\\u003e. Read more in the \\u003ca href=\\\\\\\"../file-conventions/routes\\\\\\\"\\u003eRoute File Naming\\u003c/a\\u003e guide.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdd the edit page UI\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eNothing we haven't seen before, feel free to copy/paste:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId_.edit.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId_.edit.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einvariant\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etiny-invariant\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003egetContact\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e../data\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e ({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003einvariant\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e, \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eMissing contactId param\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetContact\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ethrow\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003enew\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eResponse\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eNot Found\\u003c/span\\u003e\\\\\\\", { status: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e404\\u003c/span\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eEditContact\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ekey\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econtact-form\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003eName\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003earia-label\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eFirst name\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efirst\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efirst\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eplaceholder\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eFirst\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etext\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003earia-label\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eLast name\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elast\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003elast\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eplaceholder\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eLast\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etext\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003eTwitter\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etwitter\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etwitter\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eplaceholder\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@jack\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etext\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"50\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003eAvatar URL\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"51\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"52\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003earia-label\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eAvatar URL\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"53\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eavatar\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"54\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eavatar\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"55\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eplaceholder\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ehttps://example.com/avatar.jpg\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"56\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etext\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"57\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"58\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"59\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"60\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003eNotes\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003espan\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"61\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etextarea\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"62\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enotes\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"63\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003enotes\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"64\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erows\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e6\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"65\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"66\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"67\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"68\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003eSave\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"69\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\\\\\\"\\u003eCancel\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"70\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"71\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"72\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"73\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNow click on your new record, then click the \\\\\\\"Edit\\\\\\\" button. We should see the new route.\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/12.webp\\\\\\\" /\\u003e\\\\n\\u003ch2 id=\\\\\\\"updating-contacts-with-formdata\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updating-contacts-with-formdata\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdating Contacts with \\u003ccode\\u003eFormData\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe edit route we just created already renders a \\u003ccode\\u003eform\\u003c/code\\u003e. All we need to do is add the \\u003ccode\\u003eaction\\u003c/code\\u003e function. Remix will serialize the \\u003ccode\\u003eform\\u003c/code\\u003e, \\u003ccode\\u003ePOST\\u003c/code\\u003e it with \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/fetch\\\\\\\"\\u003e\\u003ccode\\u003efetch\\u003c/code\\u003e\\u003c/a\\u003e, and automatically revalidate all the data.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdd an \\u003ccode\\u003eaction\\u003c/code\\u003e function to the edit route\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId_.edit.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId_.edit.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eredirect\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003egetContact\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eupdateContact\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e../data\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e ({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003einvariant\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e, \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eMissing contactId param\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eupdates\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eObject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efromEntries\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eupdateContact\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eupdates\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eredirect\\u003c/span\\u003e(`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/contacts/\\u003c/span\\u003e${\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e}`);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eFill out the form, hit save, and you should see something like this! \\u003csmall\\u003e(Except easier on the eyes and maybe less hairy.)\\u003c/small\\u003e\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/13.webp\\\\\\\" /\\u003e\\\\n\\u003ch2 id=\\\\\\\"mutation-discussion\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#mutation-discussion\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eMutation Discussion\\u003c/h2\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003e😑 It worked, but I have no idea what is going on here...\\u003c/p\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003cp\\u003eLet's dig in a bit...\\u003c/p\\u003e\\\\n\\u003cp\\u003eOpen up \\u003ccode\\u003econtacts.$contactId_.edit.tsx\\u003c/code\\u003e and look at the \\u003ccode\\u003eform\\u003c/code\\u003e elements. Notice how they each have a name:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId_.edit.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId_.edit.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003earia-label\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eFirst name\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efirst\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efirst\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eplaceholder\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eFirst\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etext\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e/\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eWithout JavaScript, when a form is submitted, the browser will create \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/FormData\\\\\\\"\\u003e\\u003ccode\\u003eFormData\\u003c/code\\u003e\\u003c/a\\u003e and set it as the body of the request when it sends it to the server. As mentioned before, Remix prevents that and emulates the browser by sending the request to your \\u003ccode\\u003eaction\\u003c/code\\u003e function with \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/fetch\\\\\\\"\\u003e\\u003ccode\\u003efetch\\u003c/code\\u003e\\u003c/a\\u003e instead, including the \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/FormData\\\\\\\"\\u003e\\u003ccode\\u003eFormData\\u003c/code\\u003e\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eEach field in the \\u003ccode\\u003eform\\u003c/code\\u003e is accessible with \\u003ccode\\u003eformData.get(name)\\u003c/code\\u003e. For example, given the input field from above, you could access the first and last names like this:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId_.edit.tsx\\\\\\\" data-nocopy=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId_.edit.tsx\\\\\\\" data-nocopy=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e ({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efirstName\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efirst\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elastName\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003elast\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ...\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eSince we have a handful of form fields, we used \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries\\\\\\\"\\u003e\\u003ccode\\u003eObject.fromEntries\\u003c/code\\u003e\\u003c/a\\u003e to collect them all into an object, which is exactly what our \\u003ccode\\u003eupdateContact\\u003c/code\\u003e function wants.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId_.edit.tsx\\\\\\\" data-nocopy=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId_.edit.tsx\\\\\\\" data-nocopy=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eupdates\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eObject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efromEntries\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eupdates\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efirst\\u003c/span\\u003e; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// \\\\\\\"Some\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eupdates\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elast\\u003c/span\\u003e; \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// \\\\\\\"Name\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eAside from the \\u003ccode\\u003eaction\\u003c/code\\u003e function, Remix provides none of these APIs we're discussing: \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/Request\\\\\\\"\\u003e\\u003ccode\\u003erequest\\u003c/code\\u003e\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/Request/formData\\\\\\\"\\u003e\\u003ccode\\u003erequest.formData\\u003c/code\\u003e\\u003c/a\\u003e, \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries\\\\\\\"\\u003e\\u003ccode\\u003eObject.fromEntries\\u003c/code\\u003e\\u003c/a\\u003e are all provided by the web platform.\\u003c/p\\u003e\\\\n\\u003cp\\u003eAfter we finished the \\u003ccode\\u003eaction\\u003c/code\\u003e, note the \\u003ca href=\\\\\\\"../utils/redirect\\\\\\\"\\u003e\\u003ccode\\u003eredirect\\u003c/code\\u003e\\u003c/a\\u003e at the end:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId_.edit.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId_.edit.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e ({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003einvariant\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e, \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eMissing contactId param\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eupdates\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eObject\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efromEntries\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eupdateContact\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eupdates\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eredirect\\u003c/span\\u003e(`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/contacts/\\u003c/span\\u003e${\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e}`);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e and \\u003ccode\\u003eloader\\u003c/code\\u003e functions can both \\u003ca href=\\\\\\\"../route/loader#returning-response-instances\\\\\\\"\\u003ereturn a \\u003ccode\\u003eResponse\\u003c/code\\u003e\\u003c/a\\u003e (makes sense, since they received a \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/Request\\\\\\\"\\u003e\\u003ccode\\u003eRequest\\u003c/code\\u003e\\u003c/a\\u003e!). The \\u003ca href=\\\\\\\"../utils/redirect\\\\\\\"\\u003e\\u003ccode\\u003eredirect\\u003c/code\\u003e\\u003c/a\\u003e helper just makes it easier to return a \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/Response\\\\\\\"\\u003e\\u003ccode\\u003eResponse\\u003c/code\\u003e\\u003c/a\\u003e that tells the app to change locations.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWithout client side routing, if a server redirected after a \\u003ccode\\u003ePOST\\u003c/code\\u003e request, the new page would fetch the latest data and render. As we learned before, Remix emulates this model and automatically revalidates the data on the page after the \\u003ccode\\u003eaction\\u003c/code\\u003e call. That's why the sidebar automatically updates when we save the form. The extra revalidation code doesn't exist without client side routing, so it doesn't need to exist with client side routing in Remix either!\\u003c/p\\u003e\\\\n\\u003cp\\u003eOne last thing. Without JavaScript, the \\u003ca href=\\\\\\\"../utils/redirect\\\\\\\"\\u003e\\u003ccode\\u003eredirect\\u003c/code\\u003e\\u003c/a\\u003e would be a normal redirect. However, with JavaScript it's a client-side redirect, so the user doesn't lose client state like scroll positions or component state.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"redirecting-new-records-to-the-edit-page\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#redirecting-new-records-to-the-edit-page\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRedirecting new records to the edit page\\u003c/h2\\u003e\\\\n\\u003cp\\u003eNow that we know how to redirect, let's update the action that creates new contacts to redirect to the edit page:\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eRedirect to the new record's edit page\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eredirect\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateEmptyContact\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eredirect\\u003c/span\\u003e(`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/contacts/\\u003c/span\\u003e${\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/edit\\u003c/span\\u003e`);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNow when we click \\\\\\\"New\\\\\\\", we should end up on the edit page:\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/14.webp\\\\\\\" /\\u003e\\\\n\\u003ch2 id=\\\\\\\"active-link-styling\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#active-link-styling\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eActive Link Styling\\u003c/h2\\u003e\\\\n\\u003cp\\u003eNow that we have a bunch of records, it's not clear which one we're looking at in the sidebar. We can use \\u003ca href=\\\\\\\"../components/nav-link\\\\\\\"\\u003e\\u003ccode\\u003eNavLink\\u003c/code\\u003e\\u003c/a\\u003e to fix this.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eReplace \\u003ccode\\u003e\\u0026#x3C;Link\\u003e\\u003c/code\\u003e with \\u003ccode\\u003e\\u0026#x3C;NavLink\\u003e\\u003c/code\\u003e in the sidebar\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinks\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eMeta\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eNavLink\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScripts\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eul\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emap\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eli\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ekey\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eNavLink\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eclassName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisActive\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisPending\\u003c/span\\u003e }) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisActive\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eactive\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisPending\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epending\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eto\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econtacts/\\u003c/span\\u003e${\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e}`\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eNavLink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eli\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e ))\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eul\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNote that we are passing a function to \\u003ccode\\u003eclassName\\u003c/code\\u003e. When the user is at the URL that matches \\u003ccode\\u003e\\u0026#x3C;NavLink to\\u003e\\u003c/code\\u003e, then \\u003ccode\\u003eisActive\\u003c/code\\u003e will be true. When it's \\u003cem\\u003eabout\\u003c/em\\u003e to be active (the data is still loading) then \\u003ccode\\u003eisPending\\u003c/code\\u003e will be true. This allows us to easily indicate where the user is and also provide immediate when links are clicked, but data needs to be loaded.\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/15.webp\\\\\\\"/\\u003e\\\\n\\u003ch2 id=\\\\\\\"global-pending-ui\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#global-pending-ui\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eGlobal Pending UI\\u003c/h2\\u003e\\\\n\\u003cp\\u003eAs the user navigates the app, Remix will \\u003cem\\u003eleave the old page up\\u003c/em\\u003e as data is loading for the next page. You may have noticed the app feels a little unresponsive as you click between the list. Let's provide the user with some so the app doesn't feel unresponsive.\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix is managing all the states behind the scenes and reveals the pieces you need to build dynamic web apps. In this case, we'll use the \\u003ca href=\\\\\\\"../hooks/use-navigation\\\\\\\"\\u003e\\u003ccode\\u003euseNavigation\\u003c/code\\u003e\\u003c/a\\u003e hook.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eUse \\u003ccode\\u003euseNavigation\\u003c/code\\u003e to add global pending UI\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinks\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eMeta\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eNavLink\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScripts\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eclassName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eloading\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eloading\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edetail\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003ca href=\\\\\\\"../hooks/use-navigation\\\\\\\"\\u003e\\u003ccode\\u003euseNavigation\\u003c/code\\u003e\\u003c/a\\u003e returns the current navigation state: it can be one of \\u003ccode\\u003e\\\\\\\"idle\\\\\\\"\\u003c/code\\u003e, \\u003ccode\\u003e\\\\\\\"loading\\\\\\\"\\u003c/code\\u003e or \\u003ccode\\u003e\\\\\\\"submitting\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIn our case, we add a \\u003ccode\\u003e\\\\\\\"loading\\\\\\\"\\u003c/code\\u003e class to the main part of the app if we're not idle. The CSS then adds a nice fade after a short delay (to avoid flickering the UI for fast loads). You could do anything you want, though, like show a spinner or loading bar across the top.\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/16.webp\\\\\\\" /\\u003e\\\\n\\u003ch2 id=\\\\\\\"deleting-records\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#deleting-records\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eDeleting Records\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIf we review code in the contact route, we can find the delete button looks like this:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contact.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contact.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edestroy\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonSubmit\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eresponse\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003econfirm\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ePlease confirm you want to delete this record.\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eresponse\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003epreventDefault\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003eDelete\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNote the \\u003ccode\\u003eaction\\u003c/code\\u003e points to \\u003ccode\\u003e\\\\\\\"destroy\\\\\\\"\\u003c/code\\u003e. Like \\u003ccode\\u003e\\u0026#x3C;Link to\\u003e\\u003c/code\\u003e, \\u003ccode\\u003e\\u0026#x3C;Form action\\u003e\\u003c/code\\u003e can take a \\u003cem\\u003erelative\\u003c/em\\u003e value. Since the form is rendered in \\u003ccode\\u003econtacts.$contactId.tsx\\u003c/code\\u003e, then a relative action with \\u003ccode\\u003edestroy\\u003c/code\\u003e will submit the form to \\u003ccode\\u003econtacts.$contactId.destroy\\u003c/code\\u003e when clicked.\\u003c/p\\u003e\\\\n\\u003cp\\u003eAt this point you should know everything you need to know to make the delete button work. Maybe give it a try before moving on? You'll need:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eA new route\\u003c/li\\u003e\\\\n\\u003cli\\u003eAn \\u003ccode\\u003eaction\\u003c/code\\u003e at that route\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003edeleteContact\\u003c/code\\u003e from \\u003ccode\\u003eapp/data.ts\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eredirect\\u003c/code\\u003e to somewhere after\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eCreate the \\\\\\\"destroy\\\\\\\" route module\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etouch\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eapp/routes/contacts.\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003e\\\\\\\\$\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econtactId_.destroy.tsx\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdd the destroy action\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId_.destroy.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId_.destroy.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eredirect\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einvariant\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etiny-invariant\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edeleteContact\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e../data\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e ({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003einvariant\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e, \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eMissing contactId param\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edeleteContact\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eredirect\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eAlright, navigate to a record and click the \\\\\\\"Delete\\\\\\\" button. It works!\\u003c/p\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003e😅 I'm still confused why this all works\\u003c/p\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003cp\\u003eWhen the user clicks the submit button:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e prevents the default browser behavior of sending a new document \\u003ccode\\u003ePOST\\u003c/code\\u003e request to the server, but instead emulates the browser by creating a \\u003ccode\\u003ePOST\\u003c/code\\u003e request with client side routing and \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/fetch\\\\\\\"\\u003e\\u003ccode\\u003efetch\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eThe \\u003ccode\\u003e\\u0026#x3C;Form action=\\\\\\\"destroy\\\\\\\"\\u003e\\u003c/code\\u003e matches the new route at \\u003ccode\\u003econtacts.$contactId_.destroy.tsx\\u003c/code\\u003e and sends it the request\\u003c/li\\u003e\\\\n\\u003cli\\u003eAfter the \\u003ccode\\u003eaction\\u003c/code\\u003e redirects, Remix calls all the \\u003ccode\\u003eloader\\u003c/code\\u003es for the data on the page to get the latest values (this is \\\\\\\"revalidation\\\\\\\"). \\u003ccode\\u003euseLoaderData\\u003c/code\\u003e returns new values and causes the components to update!\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eAdd a \\u003ccode\\u003eForm\\u003c/code\\u003e, add an \\u003ccode\\u003eaction\\u003c/code\\u003e, Remix does the rest.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"index-routes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#index-routes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eIndex Routes\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWhen we load up the app, you'll notice a big blank page on the right side of our list.\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/17.webp\\\\\\\" /\\u003e\\\\n\\u003cp\\u003eWhen a route has children, and you're at the parent route's path, the \\u003ccode\\u003e\\u0026#x3C;Outlet\\u003e\\u003c/code\\u003e has nothing to render because no children match. You can think of index routes as the default child route to fill in that space.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eCreate an index route for the root route\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etouch\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eapp/routes/_index.tsx\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eFill in the index component's elements\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eFeel free to copy/paste, nothing special here.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/_index.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/_index.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eIndex\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eindex-page\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e This is a demo for Remix.\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebr\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e Check out\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ea\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehref\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ehttps://remix.run\\u003c/span\\u003e\\\\\\\"\\u003ethe docs at remix.run\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ea\\u003c/span\\u003e\\u003e.\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThe route name \\u003ccode\\u003e_index\\u003c/code\\u003e is special. It tells Remix to match and render this route when the user is at the parent route's exact path, so there are no other child routes to render in the \\u003ccode\\u003e\\u0026#x3C;Outlet /\\u003e\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/18.webp\\\\\\\" /\\u003e\\\\n\\u003cp\\u003eVoilà! No more blank space. It's common to put dashboards, stats, feeds, etc. at index routes. They can participate in data loading as well.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"cancel-button\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#cancel-button\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eCancel Button\\u003c/h2\\u003e\\\\n\\u003cp\\u003eOn the edit page we've got a cancel button that doesn't do anything yet. We'd like it to do the same thing as the browser's back button.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWe'll need a click handler on the button as well as \\u003ca href=\\\\\\\"../hooks/use-navigate\\\\\\\"\\u003e\\u003ccode\\u003euseNavigate\\u003c/code\\u003e\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdd the cancel button click handler with \\u003ccode\\u003euseNavigate\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId_.edit.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId_.edit.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseNavigate\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eEditContact\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigate\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ekey\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003econtact-form\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmit\\u003c/span\\u003e\\\\\\\"\\u003eSave\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonClick\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003enavigate\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e-\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e1\\u003c/span\\u003e)\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e Cancel\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNow when the user clicks \\\\\\\"Cancel\\\\\\\", they'll be sent back one entry in the browser's history.\\u003c/p\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003e🧐 Why is there no \\u003ccode\\u003eevent.preventDefault()\\u003c/code\\u003e on the button?\\u003c/p\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003cp\\u003eA \\u003ccode\\u003e\\u0026#x3C;button type=\\\\\\\"button\\\\\\\"\\u003e\\u003c/code\\u003e, while seemingly redundant, is the HTML way of preventing a button from submitting its form.\\u003c/p\\u003e\\\\n\\u003cp\\u003eTwo more features to go. We're on the home stretch!\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"urlsearchparams-and-get-submissions\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#urlsearchparams-and-get-submissions\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eURLSearchParams\\u003c/code\\u003e and \\u003ccode\\u003eGET\\u003c/code\\u003e Submissions\\u003c/h2\\u003e\\\\n\\u003cp\\u003eAll of our interactive UI so far have been either links that change the URL or \\u003ccode\\u003eform\\u003c/code\\u003es that post data to \\u003ccode\\u003eaction\\u003c/code\\u003e functions. The search field is interesting because it's a mix of both: it's a \\u003ccode\\u003eform\\u003c/code\\u003e, but it only changes the URL, it doesn't change data.\\u003c/p\\u003e\\\\n\\u003cp\\u003eLet's see what happens when we submit the search form:\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eType a name into the search field and hit the enter key\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eNote the browser's URL now contains your query in the URL as \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams\\\\\\\"\\u003e\\u003ccode\\u003eURLSearchParams\\u003c/code\\u003e\\u003c/a\\u003e:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003ehttp://localhost:5173/?q=ryan\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eSince it's not \\u003ccode\\u003e\\u0026#x3C;Form method=\\\\\\\"post\\\\\\\"\\u003e\\u003c/code\\u003e, Remix emulates the browser by serializing the \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/FormData\\\\\\\"\\u003e\\u003ccode\\u003eFormData\\u003c/code\\u003e\\u003c/a\\u003e into the \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams\\\\\\\"\\u003e\\u003ccode\\u003eURLSearchParams\\u003c/code\\u003e\\u003c/a\\u003e instead of the request body.\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e functions have access to the search params from the \\u003ccode\\u003erequest\\u003c/code\\u003e. Let's use it to filter the list:\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eFilter the list if there are \\u003ccode\\u003eURLSearchParams\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinksFunction\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e ({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eurl\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003enew\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eURL\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eurl\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eurl\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esearchParams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eq\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetContacts\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/19.webp\\\\\\\" /\\u003e\\\\n\\u003cp\\u003eBecause this is a \\u003ccode\\u003eGET\\u003c/code\\u003e, not a \\u003ccode\\u003ePOST\\u003c/code\\u003e, Remix \\u003cem\\u003edoes not\\u003c/em\\u003e call the \\u003ccode\\u003eaction\\u003c/code\\u003e function. Submitting a \\u003ccode\\u003eGET\\u003c/code\\u003e \\u003ccode\\u003eform\\u003c/code\\u003e is the same as clicking a link: only the URL changes.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThis also means it's a normal page navigation. You can click the back button to get back to where you were.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"synchronizing-urls-to-form-state\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#synchronizing-urls-to-form-state\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSynchronizing URLs to Form State\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThere are a couple of UX issues here that we can take care of quickly.\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eIf you click back after a search, the form field still has the value you entered even though the list is no longer filtered.\\u003c/li\\u003e\\\\n\\u003cli\\u003eIf you refresh the page after searching, the form field no longer has the value in it, even though the list is filtered\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eIn other words, the URL and our input's state are out of sync.\\u003c/p\\u003e\\\\n\\u003cp\\u003eLet's solve (2) first and start the input with the value from the URL.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eReturn \\u003ccode\\u003eq\\u003c/code\\u003e from your \\u003ccode\\u003eloader\\u003c/code\\u003e, set it as the input's default value\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eloader\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e ({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eurl\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003enew\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eURL\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eurl\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eurl\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esearchParams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eq\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetContacts\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch-form\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erole\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003earia-label\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eSearch contacts\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e||\\u003c/span\\u003e \\\\\\\"\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eq\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eq\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eplaceholder\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eSearch\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThe input field will show the query if you refresh the page after a search now.\\u003c/p\\u003e\\\\n\\u003cp\\u003eNow for problem (1), clicking the back button and updating the input. We can bring in \\u003ccode\\u003euseEffect\\u003c/code\\u003e from React to manipulate the input's value in the DOM directly.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eSynchronize input value with the \\u003ccode\\u003eURLSearchParams\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseEffect\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ereact\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseEffect\\u003c/span\\u003e(() \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esearchField\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edocument\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetElementById\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eq\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esearchField\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003einstanceof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eHTMLInputElement\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esearchField\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evalue\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e||\\u003c/span\\u003e \\\\\\\"\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e }, [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e]);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003e🤔 Shouldn't you use a controlled component and React State for this?\\u003c/p\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003cp\\u003eYou could certainly do this as a controlled component. You will have more synchronization points, but it's up to you.\\u003c/p\\u003e\\\\n\\u003cdetails\\u003e\\\\n\\u003csummary\\u003eExpand this to see what it would look like\\u003c/summary\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// We no longer need useEffect\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseState\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ereact\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// the query now needs to be kept in state\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprevQ\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esetPrevQ\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseState\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e [\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003equery\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esetQuery\\u003c/span\\u003e] \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseState\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e||\\u003c/span\\u003e \\\\\\\"\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// We can avoid using `useEffect` to synchronize the query\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// by using a separate piece of state to store the previous\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// value\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!==\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprevQ\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetPrevQ\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetQuery\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e||\\u003c/span\\u003e \\\\\\\"\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch-form\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erole\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003earia-label\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eSearch contacts\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eq\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eq\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// synchronize user's input to component state\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonChange\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esetQuery\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecurrentTarget\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evalue\\u003c/span\\u003e)\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eplaceholder\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eSearch\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// switched to `value` from `defaultValue`\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003equery\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"50\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"51\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"52\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/details\\u003e\\\\n\\u003cp\\u003eAlright, you should now be able to click the back/forward/refresh buttons, and the input's value should be in sync with the URL and results.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"submitting-forms-onchange\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#submitting-forms-onchange\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eSubmitting \\u003ccode\\u003eForm\\u003c/code\\u003e's \\u003ccode\\u003eonChange\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eWe've got a product decision to make here. Sometimes you want the user to submit the \\u003ccode\\u003eform\\u003c/code\\u003e to filter some results, other times you want to filter as the user types. We've already implemented the first, so let's see what it's like for the second.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWe've seen \\u003ccode\\u003euseNavigate\\u003c/code\\u003e already, we'll use its cousin, \\u003ca href=\\\\\\\"../hooks/use-submit\\\\\\\"\\u003e\\u003ccode\\u003euseSubmit\\u003c/code\\u003e\\u003c/a\\u003e, for this.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLinks\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eMeta\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eNavLink\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScripts\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eScrollRestoration\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseSubmit\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esubmit\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseSubmit\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch-form\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonChange\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esubmit\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecurrentTarget\\u003c/span\\u003e)\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erole\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eAs you type, the \\u003ccode\\u003eform\\u003c/code\\u003e is automatically submitted now!\\u003c/p\\u003e\\\\n\\u003cp\\u003eNote the argument to \\u003ca href=\\\\\\\"../hooks/use-submit\\\\\\\"\\u003e\\u003ccode\\u003esubmit\\u003c/code\\u003e\\u003c/a\\u003e. The \\u003ccode\\u003esubmit\\u003c/code\\u003e function will serialize and submit any form you pass to it. We're passing in \\u003ccode\\u003eevent.currentTarget\\u003c/code\\u003e. The \\u003ccode\\u003ecurrentTarget\\u003c/code\\u003e is the DOM node the event is attached to (the \\u003ccode\\u003eform\\u003c/code\\u003e).\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"adding-search-spinner\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#adding-search-spinner\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eAdding Search Spinner\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIn a production app, it's likely this search will be looking for records in a database that is too large to send all at once and filter client side. That's why this demo has some faked network latency.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWithout any loading indicator, the search feels kinda sluggish. Even if we could make our database faster, we'll always have the user's network latency in the way and out of our control.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor a better user experience, let's add some immediate UI for the search. We'll use \\u003ca href=\\\\\\\"../hooks/use-navigation\\\\\\\"\\u003e\\u003ccode\\u003euseNavigation\\u003c/code\\u003e\\u003c/a\\u003e again.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdd a variable to know if we're searching\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtacts\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etypeof\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eloader\\u003c/span\\u003e\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esubmit\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseSubmit\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esearching\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003elocation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003enew\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eURLSearchParams\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elocation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esearch\\u003c/span\\u003e).\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehas\\u003c/span\\u003e(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eq\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eWhen nothing is happening, \\u003ccode\\u003enavigation.location\\u003c/code\\u003e will be \\u003ccode\\u003eundefined\\u003c/code\\u003e, but when the user navigates it will be populated with the next location while data loads. Then we check if they're searching with \\u003ccode\\u003elocation.search\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eAdd classes to search form elements using the new \\u003ccode\\u003esearching\\u003c/code\\u003e state\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch-form\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonChange\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esubmit\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecurrentTarget\\u003c/span\\u003e)\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erole\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003earia-label\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eSearch contacts\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eclassName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esearching\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eloading\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefaultValue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e||\\u003c/span\\u003e \\\\\\\"\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eq\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eq\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eplaceholder\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eSearch\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003earia-hidden\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ehidden\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esearching\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch-spinner\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eBonus points, avoid fading out the main screen when searching:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eclassName\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eloading\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esearching\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eloading\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edetail\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eOutlet\\u003c/span\\u003e /\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eYou should now have a nice spinner on the left side of the search input.\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/20.webp\\\\\\\" /\\u003e\\\\n\\u003ch2 id=\\\\\\\"managing-the-history-stack\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#managing-the-history-stack\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eManaging the History Stack\\u003c/h2\\u003e\\\\n\\u003cp\\u003eSince the form is submitted for every keystroke, typing the characters \\\\\\\"alex\\\\\\\" and then deleting them with backspace results in a huge history stack 😂. We definitely don't want this:\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/21.webp\\\\\\\" /\\u003e\\\\n\\u003cp\\u003eWe can avoid this by \\u003cem\\u003ereplacing\\u003c/em\\u003e the current entry in the history stack with the next page instead of pushing into it.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eUse \\u003ccode\\u003ereplace\\u003c/code\\u003e in \\u003ccode\\u003esubmit\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/root.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eApp\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elang\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003een\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esidebar\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eid\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch-form\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eonChange\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisFirstSearch\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eq\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esubmit\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eevent\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecurrentTarget\\u003c/span\\u003e, {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e replace: \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisFirstSearch\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e }\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erole\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esearch\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eForm\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* existing elements */\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eAfter a quick check if this is the first search or not, we decide to replace it. Now the first search will add a new entry, but every keystroke after that will replace the current entry. Instead of clicking back seven times to remove the search, users only have to click back once.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"forms-without-navigation\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#forms-without-navigation\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eForm\\u003c/code\\u003es Without Navigation\\u003c/h2\\u003e\\\\n\\u003cp\\u003eSo far all of our forms have changed the URL. While these user flows are common, it's equally common to want to submit a form \\u003cem\\u003ewithout\\u003c/em\\u003e causing a navigation.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor these cases, we have \\u003ca href=\\\\\\\"../hooks/use-fetcher\\\\\\\"\\u003e\\u003ccode\\u003euseFetcher\\u003c/code\\u003e\\u003c/a\\u003e. It allows us to communicate with \\u003ccode\\u003eaction\\u003c/code\\u003es and \\u003ccode\\u003eloader\\u003c/code\\u003es without causing a navigation.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe ★ button on the contact page makes sense for this. We aren't creating or deleting a new record, and we don't want to change pages. We simply want to change the data on the page we're looking at.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eChange the \\u003ccode\\u003e\\u0026#x3C;Favorite\\u003e\\u003c/code\\u003e form to a fetcher form\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eForm\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseLoaderData\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports and exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eFavorite\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eFunctionComponent\\u003c/span\\u003e\\u0026#x3C;{\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003ePick\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eContactRecord\\u003c/span\\u003e, \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efavorite\\u003c/span\\u003e\\\\\\\"\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e}\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e ({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e }) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003earia-label\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eRemove from favorites\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eAdd to favorites\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efavorite\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efalse\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etrue\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e★\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e☆\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThis form will no longer cause a navigation, but simply fetch to the \\u003ccode\\u003eaction\\u003c/code\\u003e. Speaking of which ... this won't work until we create the \\u003ccode\\u003eaction\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eCreate the \\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003etype\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eLoaderFunctionArgs\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003egetContact\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eupdateContact\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e../data\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eaction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e ({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e}\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eActionFunctionArgs\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003einvariant\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e, \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eMissing contactId param\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erequest\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eupdateContact\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparams\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtactId\\u003c/span\\u003e, {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e favorite: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efavorite\\u003c/span\\u003e\\\\\\\") \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etrue\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eAlright, we're ready to click the star next to the user's name!\\u003c/p\\u003e\\\\n\\u003cimg class=\\\\\\\"tutorial\\\\\\\" loading=\\\\\\\"lazy\\\\\\\" src=\\\\\\\"/docs-images/contacts/22.webp\\\\\\\" /\\u003e\\\\n\\u003cp\\u003eCheck that out, both stars automatically update. Our new \\u003ccode\\u003e\\u0026#x3C;fetcher.Form method=\\\\\\\"post\\\\\\\"\\u003e\\u003c/code\\u003e works almost exactly like the \\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e we've been using: it calls the action and then all data is revalidated automatically — even your errors will be caught the same way.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThere is one key difference, though, it's not a navigation, so the URL doesn't change, and the history stack is unaffected.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"optimistic-ui\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#optimistic-ui\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eOptimistic UI\\u003c/h2\\u003e\\\\n\\u003cp\\u003eYou probably noticed the app felt kind of unresponsive when we clicked the favorite button from the last section. Once again, we added some network latency because you're going to have it in the real world.\\u003c/p\\u003e\\\\n\\u003cp\\u003eTo give the user some , we could put the star into a loading state with \\u003ca href=\\\\\\\"../hooks/use-fetcher#fetcherstate\\\\\\\"\\u003e\\u003ccode\\u003efetcher.state\\u003c/code\\u003e\\u003c/a\\u003e (a lot like \\u003ccode\\u003enavigation.state\\u003c/code\\u003e from before), but we can do something even better this time. We can use a strategy called \\\\\\\"Optimistic UI\\\\\\\".\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe fetcher knows the \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/FormData\\\\\\\"\\u003e\\u003ccode\\u003eFormData\\u003c/code\\u003e\\u003c/a\\u003e being submitted to the \\u003ccode\\u003eaction\\u003c/code\\u003e, so it's available to you on \\u003ccode\\u003efetcher.formData\\u003c/code\\u003e. We'll use that to immediately update the star's state, even though the network hasn't finished. If the update eventually fails, the UI will revert to the real data.\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉 \\u003cstrong\\u003eRead the optimistic value from \\u003ccode\\u003efetcher.formData\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/contacts.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/contacts.$contactId.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// existing code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eFavorite\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eFunctionComponent\\u003c/span\\u003e\\u0026#x3C;{\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003ePick\\u003c/span\\u003e\\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eContactRecord\\u003c/span\\u003e, \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efavorite\\u003c/span\\u003e\\\\\\\"\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e}\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e ({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e }) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eformData\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eget\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efavorite\\u003c/span\\u003e\\\\\\\") \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etrue\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econtact\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emethod\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003earia-label\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eRemove from favorites\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eAdd to favorites\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ename\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efavorite\\u003c/span\\u003e\\\\\\\"\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efalse\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etrue\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efavorite\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e?\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e★\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e☆\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003efetcher.Form\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eNow the star \\u003cem\\u003eimmediately\\u003c/em\\u003e changes to the new state when you click it.\\u003c/p\\u003e\\\\n\\u003chr\\u003e\\\\n\\u003cp\\u003eThat's it! Thanks for giving Remix a try. We hope this tutorial gives you a solid start to build great user experiences. There's a lot more you can do, so make sure to check out all the APIs 😀\\u003c/p\\u003e\\\",\\\"docs/start/tutorial\\\",\\\"headings\\\",[960,965,968,971,974,977,980,983,986,989,992,995,998,1001,1004,1007,1010,1013,1016,1019,1022,1025,1028,1031,1034,1037,1040,1043],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Setup\\\",\\\"setup\\\",{\\\"_961\\\":962,\\\"_955\\\":966,\\\"_24\\\":967},\\\"The Root Route\\\",\\\"the-root-route\\\",{\\\"_961\\\":962,\\\"_955\\\":969,\\\"_24\\\":970},\\\"Adding Stylesheets with \\u003ccode\\u003elinks\\u003c/code\\u003e\\\",\\\"adding-stylesheets-with-links\\\",{\\\"_961\\\":962,\\\"_955\\\":972,\\\"_24\\\":973},\\\"The Contact Route UI\\\",\\\"the-contact-route-ui\\\",{\\\"_961\\\":962,\\\"_955\\\":975,\\\"_24\\\":976},\\\"Nested Routes and Outlets\\\",\\\"nested-routes-and-outlets\\\",{\\\"_961\\\":962,\\\"_955\\\":978,\\\"_24\\\":979},\\\"Client Side Routing\\\",\\\"client-side-routing\\\",{\\\"_961\\\":962,\\\"_955\\\":981,\\\"_24\\\":982},\\\"Loading Data\\\",\\\"loading-data\\\",{\\\"_961\\\":962,\\\"_955\\\":984,\\\"_24\\\":985},\\\"Type Inference\\\",\\\"type-inference\\\",{\\\"_961\\\":962,\\\"_955\\\":987,\\\"_24\\\":988},\\\"URL Params in Loaders\\\",\\\"url-params-in-loaders\\\",{\\\"_961\\\":962,\\\"_955\\\":990,\\\"_24\\\":991},\\\"Validating Params and Throwing Responses\\\",\\\"validating-params-and-throwing-responses\\\",{\\\"_961\\\":962,\\\"_955\\\":993,\\\"_24\\\":994},\\\"Data Mutations\\\",\\\"data-mutations\\\",{\\\"_961\\\":962,\\\"_955\\\":996,\\\"_24\\\":997},\\\"Creating Contacts\\\",\\\"creating-contacts\\\",{\\\"_961\\\":962,\\\"_955\\\":999,\\\"_24\\\":1000},\\\"Updating Data\\\",\\\"updating-data\\\",{\\\"_961\\\":962,\\\"_955\\\":1002,\\\"_24\\\":1003},\\\"Updating Contacts with \\u003ccode\\u003eFormData\\u003c/code\\u003e\\\",\\\"updating-contacts-with-formdata\\\",{\\\"_961\\\":962,\\\"_955\\\":1005,\\\"_24\\\":1006},\\\"Mutation Discussion\\\",\\\"mutation-discussion\\\",{\\\"_961\\\":962,\\\"_955\\\":1008,\\\"_24\\\":1009},\\\"Redirecting new records to the edit page\\\",\\\"redirecting-new-records-to-the-edit-page\\\",{\\\"_961\\\":962,\\\"_955\\\":1011,\\\"_24\\\":1012},\\\"Active Link Styling\\\",\\\"active-link-styling\\\",{\\\"_961\\\":962,\\\"_955\\\":1014,\\\"_24\\\":1015},\\\"Global Pending UI\\\",\\\"global-pending-ui\\\",{\\\"_961\\\":962,\\\"_955\\\":1017,\\\"_24\\\":1018},\\\"Deleting Records\\\",\\\"deleting-records\\\",{\\\"_961\\\":962,\\\"_955\\\":1020,\\\"_24\\\":1021},\\\"Index Routes\\\",\\\"index-routes\\\",{\\\"_961\\\":962,\\\"_955\\\":1023,\\\"_24\\\":1024},\\\"Cancel Button\\\",\\\"cancel-button\\\",{\\\"_961\\\":962,\\\"_955\\\":1026,\\\"_24\\\":1027},\\\"\\u003ccode\\u003eURLSearchParams\\u003c/code\\u003e and \\u003ccode\\u003eGET\\u003c/code\\u003e Submissions\\\",\\\"urlsearchparams-and-get-submissions\\\",{\\\"_961\\\":962,\\\"_955\\\":1029,\\\"_24\\\":1030},\\\"Synchronizing URLs to Form State\\\",\\\"synchronizing-urls-to-form-state\\\",{\\\"_961\\\":962,\\\"_955\\\":1032,\\\"_24\\\":1033},\\\"Submitting \\u003ccode\\u003eForm\\u003c/code\\u003e's \\u003ccode\\u003eonChange\\u003c/code\\u003e\\\",\\\"submitting-forms-onchange\\\",{\\\"_961\\\":962,\\\"_955\\\":1035,\\\"_24\\\":1036},\\\"Adding Search Spinner\\\",\\\"adding-search-spinner\\\",{\\\"_961\\\":962,\\\"_955\\\":1038,\\\"_24\\\":1039},\\\"Managing the History Stack\\\",\\\"managing-the-history-stack\\\",{\\\"_961\\\":962,\\\"_955\\\":1041,\\\"_24\\\":1042},\\\"\\u003ccode\\u003eForm\\u003c/code\\u003es Without Navigation\\\",\\\"forms-without-navigation\\\",{\\\"_961\\\":962,\\\"_955\\\":1044,\\\"_24\\\":1045},\\\"Optimistic UI\\\",\\\"optimistic-ui\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#active-link-styling\\\\\\": 1, "#adding-search-spinner\\\\\\": 1, "#adding-stylesheets-with-links\\\\\\": 1, "#cancel-button\\\\\\": 1, "#client-side-routing\\\\\\": 1, "#creating-contacts\\\\\\": 1, "#data-mutations\\\\\\": 1, "#deleting-records\\\\\\": 1, "#forms-without-navigation\\\\\\": 1, "#global-pending-ui\\\\\\": 1, "#index-routes\\\\\\": 1, "#loading-data\\\\\\": 1, "#managing-the-history-stack\\\\\\": 1, "#mutation-discussion\\\\\\": 1, "#nested-routes-and-outlets\\\\\\": 1, "#optimistic-ui\\\\\\": 1, "#redirecting-new-records-to-the-edit-page\\\\\\": 1, "#remix-tutorial\\\\\\": 1, "#setup\\\\\\": 1, "#submitting-forms-onchange\\\\\\": 1, "#synchronizing-urls-to-form-state\\\\\\": 1, "#the-contact-route-ui\\\\\\": 1, "#the-root-route\\\\\\": 1, "#type-inference\\\\\\": 1, "#updating-contacts-with-formdata\\\\\\": 1, "#updating-data\\\\\\": 1, "#url-params-in-loaders\\\\\\": 1, "#urlsearchparams-and-get-submissions\\\\\\": 1, "#validating-params-and-throwing-responses\\\\\\": 1, "$\\": 1, "$contactid": 26, "$contactid_": 23, "$rc": 3, "\u0026\u0026": 2, "*/": 50, "*/\\u003c/span\\u003e\\u003cspan": 50, "--base03": 119, "--base05": 42, "--base08": 610, "--base09": 10, "--base0a": 149, "--base0b": 237, "--base0c": 3, "--base0d": 328, "--base0e": 535, "--base0f": 226, "--template": 1, "-1": 1, "-1\\\\\\": 29, "-5": 2, "/$": 1, "/*": 50, "//": 66, "//blog": 1, "//developer": 18, "//example": 2, "//localhost": 5, "//placecats": 2, "//reactrouter": 1, "//remix": 3, "//twitter": 2, "//v2": 2, "/\u003e": 27, "/\\u003cspan": 115, "/\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 25, "/\\u003e\\\\n\\u003ch2": 12, "/\\u003e\\\\n\\u003cp\\u003ebecause": 1, "/\\u003e\\\\n\\u003cp\\u003echeck": 1, "/\\u003e\\\\n\\u003cp\\u003eremember": 1, "/\\u003e\\\\n\\u003cp\\u003eremix": 1, "/\\u003e\\\\n\\u003cp\\u003ethe": 1, "/\\u003e\\\\n\\u003cp\\u003evoilà": 1, "/\\u003e\\\\n\\u003cp\\u003ewe": 1, "/\\u003e\\\\n\\u003cp\\u003ewhen": 1, "/\\u003e\\\\n\\u003cp\\u003e👉": 1, "/\\u003e\\u003c/code\\u003e": 2, "/\\u003e\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "/app": 2, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/components/form\\\\\\": 2, "/components/link\\\\\\": 1, "/components/nav-link\\\\\\": 1, "/components/outlet\\\\\\": 2, "/contacts/$": 3, "/contacts/1": 4, "/contacts/123": 1, "/contacts/2": 2, "/contacts/abc": 1, "/data": 8, "/data\\u003c/span\\u003e\\\\\\": 8, "/docs-images/contacts/01": 1, "/docs-images/contacts/03": 1, "/docs-images/contacts/04": 1, "/docs-images/contacts/05": 1, "/docs-images/contacts/06": 1, "/docs-images/contacts/07": 1, "/docs-images/contacts/08": 1, "/docs-images/contacts/09": 1, "/docs-images/contacts/10": 1, "/docs-images/contacts/11": 1, "/docs-images/contacts/12": 1, "/docs-images/contacts/13": 1, "/docs-images/contacts/14": 1, "/docs-images/contacts/15": 1, "/docs-images/contacts/16": 1, "/docs-images/contacts/17": 1, "/docs-images/contacts/18": 1, "/docs-images/contacts/19": 1, "/docs-images/contacts/20": 1, "/docs-images/contacts/21": 1, "/docs-images/contacts/22": 1, "/edit": 1, "/file-conventions/routes\\\\\\": 2, "/hooks/use-fetcher#fetcherstate\\\\\\": 1, "/hooks/use-fetcher\\\\\\": 1, "/hooks/use-loader-data\\\\\\": 1, "/hooks/use-navigate\\\\\\": 1, "/hooks/use-navigation\\\\\\": 3, "/hooks/use-submit\\\\\\": 2, "/quickstart\\\\\\": 1, "/route/action\\\\\\": 1, "/route/links\\\\\\": 1, "/route/loader#params\\\\\\": 1, "/route/loader#returning-response-instances\\\\\\": 1, "/route/loader\\\\\\": 1, "/utils/redirect\\\\\\": 3, "0===e": 1, "10": 43, "100": 1, "1000": 1, "1001": 1, "1002": 1, "1003": 1, "1004": 1, "1005": 1, "1006": 1, "1007": 1, "1008": 1, "1009": 1, "101": 1, "1010": 1, "1011": 1, "1012": 1, "1013": 1, "1014": 1, "1015": 1, "1016": 1, "1017": 1, "1018": 1, "1019": 1, "102": 1, "1020": 1, "1021": 1, "1022": 1, "1023": 1, "1024": 1, "1025": 1, "1026": 1, "1027": 1, "1028": 1, "1029": 1, "103": 1, "1030": 1, "1031": 1, "1032": 1, "1033": 1, "1034": 1, "1035": 1, "1036": 1, "1037": 1, "1038": 1, "1039": 1, "104": 1, "1040": 1, "1041": 1, "1042": 1, "1043": 1, "1044": 1, "1045": 1, "1046": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 31, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 27, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 27, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 27, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 26, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 23, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 22, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 22, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 20, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 19, "1\\\\\\": 36, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 19, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 19, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 17, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 17, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 17, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 16, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 15, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 13, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "28\\\\\\": 13, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "29\\\\\\": 13, "2\\\\\\": 36, "30": 3, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30\\\\\\": 13, "30m": 5, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "31\\\\\\": 13, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "32\\\\\\": 13, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "33\\\\\\": 12, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "34\\\\\\": 11, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "35\\\\\\": 11, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "36\\\\\\": 11, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "37\\\\\\": 10, "38": 2, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "38\\\\\\": 9, "39": 5, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "39\\\\\\": 9, "3\\\\\\": 36, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 7, "405": 3, "406": 1, "407": 1, "408": 1, "409": 1, "40\\\\\\": 9, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "41\\\\\\": 9, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "42\\\\\\": 9, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "43\\\\\\": 8, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "44\\\\\\": 7, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "45\\\\\\": 7, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "46\\\\\\": 7, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "47\\\\\\": 7, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "48\\\\\\": 6, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "49\\\\\\": 5, "4\\\\\\": 35, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "50\\\\\\": 5, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "5173": 1, "5173/": 2, "5173\\\\\\": 1, "5173\\u003c/a\\u003e": 1, "518": 1, "519": 1, "51\\\\\\": 5, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "52\\\\\\": 5, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "53\\\\\\": 4, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "54\\\\\\": 4, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "55\\\\\\": 4, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "56\\\\\\": 4, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "57\\\\\\": 4, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "58\\\\\\": 4, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "59\\\\\\": 4, "5\\\\\\": 35, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "60\\\\\\": 4, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "61\\\\\\": 3, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "62\\\\\\": 3, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "63\\\\\\": 3, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "64\\\\\\": 2, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "65\\\\\\": 2, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "66\\\\\\": 2, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "67\\\\\\": 2, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "68\\\\\\": 2, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "69\\\\\\": 2, "6\\\\\\": 35, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "70\\\\\\": 2, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "71\\\\\\": 2, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "72\\\\\\": 2, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "73\\\\\\": 2, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "74\\\\\\": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "75\\\\\\": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "76\\\\\\": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "77\\\\\\": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "78\\\\\\": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "79\\\\\\": 1, "7\\\\\\": 35, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "80\\\\\\": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "81\\\\\\": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "82\\\\\\": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "83\\\\\\": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "84\\\\\\": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "85\\\\\\": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "86\\\\\\": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "87\\\\\\": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "88\\\\\\": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "89\\\\\\": 1, "8\\\\\\": 33, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "90\\\\\\": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "91\\\\\\": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "92\\\\\\": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "93\\\\\\": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "94\\\\\\": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "95\\\\\\": 1, "96": 1, "960": 1, "962": 28, "963": 1, "964": 1, "965": 1, "966": 1, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "976": 1, "977": 1, "978": 1, "979": 1, "98": 1, "980": 1, "981": 1, "982": 1, "983": 1, "984": 1, "985": 1, "986": 1, "987": 1, "988": 1, "989": 1, "99": 1, "990": 1, "991": 1, "992": 1, "993": 1, "994": 1, "995": 1, "996": 1, "997": 1, "998": 1, "999": 1, "9\\\\\\": 32, "\u003c/\u003e": 2, "\u003c/a\u003e": 1, "\u003c/body\u003e": 12, "\u003c/button\u003e": 4, "\u003c/div\u003e": 23, "\u003c/fetcher": 2, "\u003c/form\u003e": 13, "\u003c/h1\u003e": 1, "\u003c/head\u003e": 1, "\u003c/html\u003e": 12, "\u003c/label\u003e": 3, "\u003c/li\u003e": 6, "\u003c/link\u003e": 1, "\u003c/nav\u003e": 3, "\u003c/navlink\u003e": 1, "\u003c/p\u003e": 7, "\u003c/ul\u003e": 4, "\u003c\u003e": 2, "\u003ca": 5, "\u003cbody\u003e": 12, "\u003cbr": 1, "\u003cbutton": 12, "\u003ccontact\u003e": 1, "\u003cdiv": 16, "\u003cdiv\u003e": 9, "\u003cfavorite": 1, "\u003cfavorite\u003e": 1, "\u003cfetcher": 3, "\u003cform": 16, "\u003cform\u003e": 4, "\u003ch1\u003e": 1, "\u003ch1\u003eremix": 1, "\u003chead\u003e": 1, "\u003chtml": 12, "\u003ci\u003eno": 3, "\u003cimg": 1, "\u003cinput": 9, "\u003clabel\u003e": 3, "\u003cli": 2, "\u003cli\u003e": 4, "\u003clink": 5, "\u003clink\u003e": 2, "\u003clinks": 2, "\u003cmeta": 3, "\u003cnav\u003e": 3, "\u003cnavlink": 2, "\u003cnavlink\u003e": 1, "\u003coutlet": 5, "\u003coutlet\u003e": 1, "\u003cp": 1, "\u003cp\u003e": 6, "\u003croot\u003e": 1, "\u003cscripts": 1, "\u003cscrollrestoration": 1, "\u003cspan\u003eavatar": 1, "\u003cspan\u003ename\u003c/span\u003e": 1, "\u003cspan\u003enotes\u003c/span\u003e": 1, "\u003cspan\u003etwitter\u003c/span\u003e": 1, "\u003cspan\u003e★\u003c/span\u003e": 1, "\u003ctextarea": 1, "\u003cul\u003e": 4, "==": 1, "===": 6, "===d": 1, "==\\u003c/span\\u003e": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 30, "\u003ecancel\u003c/button\u003e": 1, "\u003edelete\u003c/button\u003e": 2, "\u003eedit\u003c/button\u003e": 1, "\u003enew\u003c/button\u003e": 1, "\u003esave\u003c/button\u003e": 2, "\u003ethe": 1, "\u003eyour": 4, "@jack": 1, "@remix-run/": 1, "@remix-run/dev": 1, "@remix-run/node": 12, "@remix-run/node\\": 1, "@remix-run/react": 12, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\$contactid": 1, "\\$contactid_": 2, "\\\\\\": 2448, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/details\\u003e\\\\n\\u003ch2": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/details\\u003e\\\\n\\u003cp\\u003ealright": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003e🤔": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003ca": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eafter": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ealright": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eas": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ebonus": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eevery": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enote": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enow": 5, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003esince": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethat": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethe": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ewhen": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eyou": 2, "\\\\n\\u003c/span\\u003e\\u003cspan": 442, "\\n": 1, "\\u0026#x26": 3, "\\u0026#x3c": 232, "\\u003c/code\\u003e": 9, "\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ewe": 1, "\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003eadd": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003eif": 1, "\\u003c/p\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003cp\\u003ea": 1, "\\u003c/p\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003cp\\u003elet": 1, "\\u003c/p\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003c/p\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\u003c/p\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003e😅": 1, "\\u003c/p\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003e🧐": 2, "\\u003c/p\\u003e\\\\n\\u003cdetails\\u003e\\\\n\\u003csummary\\u003eexpand": 2, "\\u003c/p\\u003e\\\\n\\u003cdiv": 13, "\\u003c/p\\u003e\\\\n\\u003ch2": 13, "\\u003c/p\\u003e\\\\n\\u003chr\\u003e\\\\n\\u003cp\\u003ethat": 1, "\\u003c/p\\u003e\\\\n\\u003cimg": 17, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e\\u0026#x3c": 1, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003ea": 1, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003eif": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eafter": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eat": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eclient": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eeach": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efor": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ein": 3, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ejust": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003elet": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003enext": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003enote": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003enow": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eone": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eopen": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eremix": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethe": 3, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethere": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethese": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eto": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003etwo": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewe": 5, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewhile": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewithout": 3, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003e👉": 26, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode\\u003ehttp": 1, "\\u003c/p\\u003e\\\\n\\u003ctable\\u003e\\\\n\\u003cthead\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003cth\\u003eurl": 1, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e/contacts/123\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e/contacts/abc\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003e👉": 1, "\\u003c/small\\u003e\\u003c/p\\u003e\\\\n\\u003cimg": 1, "\\u003c/span\\u003e": 82, "\\u003c/span\\u003e$": 1, "\\u003c/span\\u003e\\\\\\": 8, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003easide": 1, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 107, "\\u003c/span\\u003e\\u0026#x3c": 2, "\\u003c/span\\u003e\\u003cspan": 100, "\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003c/span\\u003e\\u003eyour": 4, "\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003ca": 47, "\\u003ccode\\u003e": 1, "\\u003ccode\\u003e$\\u003c/code\\u003e": 1, "\\u003ccode\\u003e$contactid\\u003c/code\\u003e": 2, "\\u003ccode\\u003e$contactid_\\u003c/code\\u003e": 1, "\\u003ccode\\u003e/\\u003c/code\\u003e": 1, "\\u003ccode\\u003e/contacts/1\\u003c/code\\u003e": 2, "\\u003ccode\\u003e\\\\\\": 5, "\\u003ccode\\u003e\\u0026#x3c": 16, "\\u003ccode\\u003e_\\u003c/code\\u003e": 2, "\\u003ccode\\u003e_index\\u003c/code\\u003e": 1, "\\u003ccode\\u003eaction\\u003c/code\\u003e": 20, "\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003ccode\\u003eaction\\u003c/code\\u003es": 1, "\\u003ccode\\u003eapp/data": 1, "\\u003ccode\\u003eapp/root": 5, "\\u003ccode\\u003eapp/routes/contacts": 3, "\\u003ccode\\u003eapp/routes\\u003c/code\\u003e": 1, "\\u003ccode\\u003eclassname\\u003c/code\\u003e": 1, "\\u003ccode\\u003econtact\\u003c/code\\u003e": 1, "\\u003ccode\\u003econtacts": 4, "\\u003ccode\\u003ecreateemptycontact\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecurrenttarget\\u003c/code\\u003e": 1, "\\u003ccode\\u003edestroy\\u003c/code\\u003e": 1, "\\u003ccode\\u003eevent": 2, "\\u003ccode\\u003efetcher": 2, "\\u003ccode\\u003eform\\u003c/code\\u003e": 13, "\\u003ccode\\u003eform\\u003c/code\\u003es": 4, "\\u003ccode\\u003eformdata": 1, "\\u003ccode\\u003eformdata\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003eformdata\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003ccode\\u003eget\\u003c/code\\u003e": 6, "\\u003ccode\\u003eisactive\\u003c/code\\u003e": 1, "\\u003ccode\\u003eispending\\u003c/code\\u003e": 1, "\\u003ccode\\u003elinks\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003elinks\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhile": 1, "\\u003ccode\\u003eloader\\u003c/code\\u003e": 5, "\\u003ccode\\u003eloader\\u003c/code\\u003es": 2, "\\u003ccode\\u003elocation": 1, "\\u003ccode\\u003enavigation": 2, "\\u003ccode\\u003enull\\u003c/code\\u003e": 2, "\\u003ccode\\u003eonchange\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003eonchange\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewe": 1, "\\u003ccode\\u003eonsubmit\\u003c/code\\u003e": 1, "\\u003ccode\\u003eparams": 1, "\\u003ccode\\u003epost\\u003c/code\\u003e": 10, "\\u003ccode\\u003eq\\u003c/code\\u003e": 1, "\\u003ccode\\u003ereplace\\u003c/code\\u003e": 1, "\\u003ccode\\u003erequest\\u003c/code\\u003e": 1, "\\u003ccode\\u003eresponse\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003ccode\\u003esearching\\u003c/code\\u003e": 1, "\\u003ccode\\u003esubmit\\u003c/code\\u003e": 1, "\\u003ccode\\u003esubmit\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003ccode\\u003etypeof": 1, "\\u003ccode\\u003eundefined\\u003c/code\\u003e": 1, "\\u003ccode\\u003eupdatecontact\\u003c/code\\u003e": 1, "\\u003ccode\\u003eurlsearchparams\\u003c/code\\u003e": 1, "\\u003ccode\\u003eurlsearchparams\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 2, "\\u003ccode\\u003euseeffect\\u003c/code\\u003e": 2, "\\u003ccode\\u003euseloaderdata\\u0026#x3c": 1, "\\u003ccode\\u003euseloaderdata\\u003c/code\\u003e": 1, "\\u003ccode\\u003euseloaderdata\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003ethe": 1, "\\u003ccode\\u003eusenavigate\\u003c/code\\u003e": 1, "\\u003ccode\\u003eusenavigate\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "\\u003ccode\\u003eusenavigation\\u003c/code\\u003e": 1, "\\u003ccode\\u003eusestate\\u003c/code\\u003e": 1, "\\u003cem\\u003eabout\\u003c/em\\u003e": 1, "\\u003cem\\u003edoes": 1, "\\u003cem\\u003eimmediately\\u003c/em\\u003e": 1, "\\u003cem\\u003eleave": 1, "\\u003cem\\u003erelative\\u003c/em\\u003e": 1, "\\u003cem\\u003ereplacing\\u003c/em\\u003e": 1, "\\u003cem\\u003ewithout\\u003c/em\\u003e": 1, "\\u003ch1": 1, "\\u003csmall\\u003e": 1, "\\u003cspan": 1576, "\\u003cstrong\\u003eadd": 8, "\\u003cstrong\\u003echange": 2, "\\u003cstrong\\u003eclick": 1, "\\u003cstrong\\u003ecreate": 5, "\\u003cstrong\\u003eevery": 1, "\\u003cstrong\\u003eexport": 2, "\\u003cstrong\\u003efill": 1, "\\u003cstrong\\u003efilter": 1, "\\u003cstrong\\u003egenerate": 1, "\\u003cstrong\\u003eimport": 1, "\\u003cstrong\\u003enot\\u003c/strong\\u003e": 1, "\\u003cstrong\\u003eread": 1, "\\u003cstrong\\u003eredirect": 1, "\\u003cstrong\\u003erender": 1, "\\u003cstrong\\u003ereplace": 1, "\\u003cstrong\\u003ereturn": 1, "\\u003cstrong\\u003estart": 1, "\\u003cstrong\\u003esynchronize": 1, "\\u003cstrong\\u003etype": 1, "\\u003cstrong\\u003euse": 2, "\\u003e": 1092, "\\u003e#": 3, "\\u003e--template\\u003c/span\\u003e": 1, "\\u003e-\\u003c/span\\u003e\\u003cspan": 1, "\\u003e/*": 50, "\\u003e//": 66, "\\u003e/\\u003c/span\\u003e\\\\\\": 1, "\\u003e/\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ewithout": 1, "\\u003e/contacts/1\\u003c/span\\u003e": 2, "\\u003e/contacts/2\\u003c/span\\u003e": 2, "\\u003e/contacts/\\u003c/span\\u003e$": 3, "\\u003e/edit\\u003c/span\\u003e": 1, "\\u003e1\\u003c/span\\u003e": 1, "\\u003e404\\u003c/span\\u003e": 2, "\\u003e6\\u003c/span\\u003e\\u003cspan": 1, "\\u003e===\\u003c/span\\u003e": 5, "\\u003e=\\u003c/span\\u003e": 74, "\\u003e=\\u003c/span\\u003e\\\\\\": 109, "\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003e=\\u003c/span\\u003e\\u003cspan": 44, "\\u003e=\\u003e\\u003c/span\\u003e": 25, "\\u003e=\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "\\u003e@jack\\u003c/span\\u003e\\\\\\": 1, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 10, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 12, "\\u003e\\\\\\\\$\\u003c/span\\u003e\\u003cspan": 3, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 140, "\\u003e\\u0026#x26": 2, "\\u003e\\u0026#x3c": 3, "\\u003e\\u003c/code\\u003e": 4, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eform\\u003c/code\\u003es": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eurlsearchparams\\u003c/code\\u003e": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eactive": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eadding": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ecancel": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eclient": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ecreating": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003edata": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003edeleting": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eglobal": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eindex": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eloading": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003emanaging": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003emutation": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003enested": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eoptimistic": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eredirecting": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eremix": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003esetup\\u003c/h2\\u003e\\\\n\\u003cp\\u003e👉": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003esubmitting": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003esynchronizing": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ethe": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003etype": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eupdating": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eurl": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003evalidating": 1, "\\u003e\\u003ca": 29, "\\u003e\\u003ccode\\u003e\\u0026#x3c": 4, "\\u003e\\u003ccode\\u003e\\u003cspan": 42, "\\u003e\\u003ccode\\u003eaction\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003efetch\\u003c/code\\u003e\\u003c/a\\u003e": 4, "\\u003e\\u003ccode\\u003efetch\\u003c/code\\u003e\\u003c/a\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003ethe": 1, "\\u003e\\u003ccode\\u003efetcher": 1, "\\u003e\\u003ccode\\u003eformdata\\u003c/code\\u003e\\u003c/a\\u003e": 4, "\\u003e\\u003ccode\\u003elinks\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eloader\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003enavlink\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eobject": 2, "\\u003e\\u003ccode\\u003eoutlet\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eparams\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eredirect\\u003c/code\\u003e\\u003c/a\\u003e": 3, "\\u003e\\u003ccode\\u003erequest": 1, "\\u003e\\u003ccode\\u003erequest\\u003c/code\\u003e\\u003c/a\\u003e": 2, "\\u003e\\u003ccode\\u003eresponse\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003esubmit\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eurlsearchparams\\u003c/code\\u003e\\u003c/a\\u003e": 3, "\\u003e\\u003ccode\\u003eusefetcher\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003euseloaderdata\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eusenavigate\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eusenavigation\\u003c/code\\u003e\\u003c/a\\u003e": 3, "\\u003e\\u003ccode\\u003eusesubmit\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003cpre": 42, "\\u003e\\u003cspan": 169, "\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003ea\\u003c/span\\u003e": 3, "\\u003ea\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003ea\\u003c/span\\u003e\\u003e": 1, "\\u003ea\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003eaction\\u003c/span\\u003e": 7, "\\u003eaction\\u003c/span\\u003e\\u003cspan": 3, "\\u003eactionfunctionargs\\u003c/span\\u003e": 8, "\\u003eactive\\u003c/span\\u003e\\\\\\": 1, "\\u003eadd": 3, "\\u003ealt\\u003c/span\\u003e\\u003cspan": 1, "\\u003eapp": 1, "\\u003eapp/routes/_index": 1, "\\u003eapp/routes/contacts": 3, "\\u003eapp/routes\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eapp\\u003c/span\\u003e": 15, "\\u003eappstyleshref\\u003c/span\\u003e": 2, "\\u003earia-hidden\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003earia-label\\u003c/span\\u003e\\u003cspan": 11, "\\u003easync\\u003c/span\\u003e": 14, "\\u003eavatar": 1, "\\u003eavatar\\u003c/span\\u003e\\\\\\": 1, "\\u003eavatar\\u003c/span\\u003e\\u003cspan": 3, "\\u003eawait\\u003c/span\\u003e": 16, "\\u003ebody\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 24, "\\u003ebr\\u003c/span\\u003e": 1, "\\u003ebutton\\u003c/span\\u003e": 8, "\\u003ebutton\\u003c/span\\u003e\\\\\\": 2, "\\u003ebutton\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003ebutton\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 11, "\\u003ecancel\\u0026#x3c": 1, "\\u003ecd\\u003c/span\\u003e": 1, "\\u003echarset\\u003c/span\\u003e\\u003cspan": 1, "\\u003eclassname\\u003c/span\\u003e\\u003cspan": 4, "\\u003econfirm\\u003c/span\\u003e": 2, "\\u003econst\\u003c/span\\u003e": 74, "\\u003econtact-form\\u003c/span\\u003e\\\\\\": 2, "\\u003econtact\\u003c/span\\u003e": 58, "\\u003econtact\\u003c/span\\u003e\\\\\\": 1, "\\u003econtact\\u003c/span\\u003e\\u003cspan": 5, "\\u003econtactid": 1, "\\u003econtactid\\u003c/span\\u003e": 17, "\\u003econtactid_": 2, "\\u003econtactrecord\\u003c/span\\u003e": 4, "\\u003econtacts/\\u003c/span\\u003e$": 2, "\\u003econtacts\\u003c/span\\u003e": 18, "\\u003econtent\\u003c/span\\u003e\\u003cspan": 1, "\\u003ecreate-remix@latest\\u003c/span\\u003e": 1, "\\u003ecreateemptycontact\\u003c/span\\u003e": 3, "\\u003ecurrenttarget\\u003c/span\\u003e": 4, "\\u003edefault\\u003c/span\\u003e": 20, "\\u003edefaultvalue\\u003c/span\\u003e\\u003cspan": 8, "\\u003edelete\\u0026#x3c": 2, "\\u003edeletecontact\\u003c/span\\u003e": 2, "\\u003edestroy\\u003c/span\\u003e\\\\\\": 2, "\\u003edetail\\u003c/span\\u003e\\\\\\": 3, "\\u003edev\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\u003ediv\\u003c/span\\u003e": 12, "\\u003ediv\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 32, "\\u003edocument\\u003c/span\\u003e": 1, "\\u003eedit\\u0026#x3c": 1, "\\u003eedit\\u003c/span\\u003e\\\\\\": 1, "\\u003eeditcontact\\u003c/span\\u003e": 2, "\\u003een\\u003c/span\\u003e\\\\\\": 12, "\\u003eevent\\u003c/span\\u003e": 12, "\\u003eexport\\u003c/span\\u003e": 35, "\\u003efalse\\u003c/span\\u003e\\\\\\": 3, "\\u003efavorite\\u003c/span\\u003e": 14, "\\u003efavorite\\u003c/span\\u003e\\\\\\": 8, "\\u003efavorite\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003efavorite\\u003c/span\\u003e\\u003cspan": 3, "\\u003efetcher": 4, "\\u003efetcher\\u003c/span\\u003e": 4, "\\u003efirst": 2, "\\u003efirst\\u003c/span\\u003e": 4, "\\u003efirst\\u003c/span\\u003e\\\\\\": 5, "\\u003efirst\\u003c/span\\u003e\\u003cspan": 4, "\\u003efirstname\\u003c/span\\u003e": 1, "\\u003eform\\u003c/span\\u003e": 20, "\\u003eform\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 5, "\\u003eform\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enote": 1, "\\u003eform\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 12, "\\u003eformdata\\u003c/span\\u003e": 15, "\\u003eformdata\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003efrom\\u003c/span\\u003e": 37, "\\u003efromentries\\u003c/span\\u003e": 3, "\\u003efunction\\u003c/span\\u003e": 20, "\\u003efunctioncomponent\\u003c/span\\u003e": 1, "\\u003efunctioncomponent\\u003c/span\\u003e\\u0026#x3c": 3, "\\u003eget\\u003c/span\\u003e": 6, "\\u003egetcontact\\u003c/span\\u003e": 8, "\\u003egetcontacts\\u003c/span\\u003e": 5, "\\u003egetelementbyid\\u003c/span\\u003e": 1, "\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003eh1\\u003c/span\\u003e\\u003eremix": 1, "\\u003ehas\\u003c/span\\u003e": 1, "\\u003ehead\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ehidden\\u003c/span\\u003e\\u003cspan": 2, "\\u003ehref\\u003c/span\\u003e\\u003cspan": 4, "\\u003ehtml\\u003c/span\\u003e": 12, "\\u003ehtml\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 12, "\\u003ehtmlinputelement\\u003c/span\\u003e": 1, "\\u003ehttp": 1, "\\u003ehttps": 4, "\\u003ei\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003ei\\u003c/span\\u003e\\u003eno": 3, "\\u003eid\\u003c/span\\u003e": 3, "\\u003eid\\u003c/span\\u003e\\u003cspan": 33, "\\u003eif\\u003c/span\\u003e": 6, "\\u003eimg\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eimport\\u003c/span\\u003e": 37, "\\u003eindex-page\\u003c/span\\u003e\\\\\\": 1, "\\u003eindex\\u003c/span\\u003e": 1, "\\u003einput\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 9, "\\u003einstall\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003einstanceof\\u003c/span\\u003e": 1, "\\u003einvariant\\u003c/span\\u003e": 10, "\\u003eisactive\\u003c/span\\u003e": 1, "\\u003eisactive\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003eisfirstsearch\\u003c/span\\u003e": 2, "\\u003eispending\\u003c/span\\u003e": 1, "\\u003eispending\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003ejim\\u003c/a\\u003e": 1, "\\u003ekey\\u003c/span\\u003e\\u003cspan": 5, "\\u003elabel\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 6, "\\u003elang\\u003c/span\\u003e\\u003cspan": 12, "\\u003elast": 1, "\\u003elast\\u003c/span\\u003e": 4, "\\u003elast\\u003c/span\\u003e\\\\\\": 3, "\\u003elast\\u003c/span\\u003e\\u003cspan": 3, "\\u003elastname\\u003c/span\\u003e": 1, "\\u003eli\\u003c/span\\u003e": 2, "\\u003eli\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 10, "\\u003elink\\u003c/span\\u003e": 5, "\\u003elink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "\\u003elinks\\u003c/span\\u003e": 8, "\\u003elinks\\u003c/span\\u003e\\u003cspan": 1, "\\u003elinksfunction\\u003c/span\\u003e": 3, "\\u003eloader\\u003c/span\\u003e": 7, "\\u003eloader\\u003c/span\\u003e\\u003e": 11, "\\u003eloaderfunctionargs\\u003c/span\\u003e": 10, "\\u003eloading\\u003c/span\\u003e\\\\\\": 5, "\\u003elocation\\u003c/span\\u003e": 2, "\\u003emap\\u003c/span\\u003e": 2, "\\u003emeta\\u003c/span\\u003e": 9, "\\u003emeta\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003emethod\\u003c/span\\u003e\\u003cspan": 8, "\\u003emissing": 7, "\\u003emkdir\\u003c/span\\u003e": 1, "\\u003ename\\u003c/span\\u003e\\\\\\": 1, "\\u003ename\\u003c/span\\u003e\\u003cspan": 14, "\\u003enav\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 6, "\\u003enavigate\\u003c/span\\u003e": 2, "\\u003enavigation\\u003c/span\\u003e": 10, "\\u003enavlink\\u003c/span\\u003e": 3, "\\u003enavlink\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003enavlink\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003enew\\u0026#x3c": 1, "\\u003enew\\u003c/span\\u003e": 5, "\\u003enot": 2, "\\u003enotes\\u003c/span\\u003e": 1, "\\u003enotes\\u003c/span\\u003e\\\\\\": 1, "\\u003enotes\\u003c/span\\u003e\\u003cspan": 2, "\\u003enpm\\u003c/span\\u003e": 2, "\\u003enpx\\u003c/span\\u003e": 1, "\\u003enull\\u003c/span\\u003e": 1, "\\u003enull\\u003c/span\\u003e\\u003cspan": 3, "\\u003eobject\\u003c/span\\u003e": 3, "\\u003eonchange\\u003c/span\\u003e\\u003cspan": 4, "\\u003eonclick\\u003c/span\\u003e\\u003cspan": 1, "\\u003eonsubmit\\u003c/span\\u003e\\u003cspan": 2, "\\u003eoutlet\\u003c/span\\u003e": 9, "\\u003ep\\u003c/span\\u003e": 1, "\\u003ep\\u003c/span\\u003e\\u003e": 1, "\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 11, "\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan": 1, "\\u003eparams\\u003c/span\\u003e": 26, "\\u003epending\\u003c/span\\u003e\\\\\\": 1, "\\u003epick\\u003c/span\\u003e\\u0026#x3c": 3, "\\u003eplaceholder\\u003c/span\\u003e\\u003cspan": 9, "\\u003eplease": 2, "\\u003epost\\u003c/span\\u003e\\\\\\": 8, "\\u003epreventdefault\\u003c/span\\u003e": 2, "\\u003eprevq\\u003c/span\\u003e": 2, "\\u003eput\\u003c/span\\u003e": 1, "\\u003eq\\u003c/span\\u003e": 20, "\\u003eq\\u003c/span\\u003e\\\\\\": 12, "\\u003equery\\u003c/span\\u003e": 1, "\\u003equery\\u003c/span\\u003e\\u003cspan": 1, "\\u003equick": 1, "\\u003ereact\\u003c/span\\u003e\\\\\\": 3, "\\u003eredirect\\u003c/span\\u003e": 7, "\\u003eremix": 1, "\\u003eremix-run/remix/templates/remix-tutorial\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003eremove": 3, "\\u003erequest\\u003c/span\\u003e": 12, "\\u003eresponse\\u003c/span\\u003e": 6, "\\u003ereturn": 1, "\\u003ereturn\\u003c/span\\u003e": 32, "\\u003erole\\u003c/span\\u003e\\u003cspan": 6, "\\u003eroute": 2, "\\u003erows\\u003c/span\\u003e\\u003cspan": 1, "\\u003erun\\u003c/span\\u003e": 1, "\\u003esave\\u0026#x3c": 2, "\\u003escripts\\u003c/span\\u003e": 8, "\\u003escrollrestoration\\u003c/span\\u003e": 8, "\\u003esearch": 4, "\\u003esearch-form\\u003c/span\\u003e\\\\\\": 6, "\\u003esearch-spinner\\u003c/span\\u003e\\\\\\": 2, "\\u003esearch\\u003c/span\\u003e": 1, "\\u003esearch\\u003c/span\\u003e\\\\\\": 14, "\\u003esearchfield\\u003c/span\\u003e": 3, "\\u003esearching\\u003c/span\\u003e": 2, "\\u003esearching\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003esearching\\u003c/span\\u003e\\u003cspan": 1, "\\u003esearchparams\\u003c/span\\u003e": 2, "\\u003esetprevq\\u003c/span\\u003e": 2, "\\u003esetquery\\u003c/span\\u003e": 3, "\\u003esidebar\\u003c/span\\u003e\\\\\\": 10, "\\u003esome": 1, "\\u003espan\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 5, "\\u003espan\\u003c/span\\u003e\\u003eavatar": 1, "\\u003espan\\u003c/span\\u003e\\u003ename\\u0026#x3c": 1, "\\u003espan\\u003c/span\\u003e\\u003enotes\\u0026#x3c": 1, "\\u003espan\\u003c/span\\u003e\\u003etwitter\\u0026#x3c": 1, "\\u003espan\\u003c/span\\u003e\\u003e★\\u0026#x3c": 1, "\\u003esrc\\u003c/span\\u003e\\u003cspan": 1, "\\u003estate\\u003c/span\\u003e": 2, "\\u003estylesheet\\u003c/span\\u003e\\\\\\": 1, "\\u003esubmit\\u003c/span\\u003e": 5, "\\u003esubmit\\u003c/span\\u003e\\\\\\": 6, "\\u003etext\\u003c/span\\u003e\\\\\\": 5, "\\u003etextarea\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "\\u003ethe": 1, "\\u003ethe\\u003c/span\\u003e": 1, "\\u003ethrow\\u003c/span\\u003e": 2, "\\u003etiny-invariant\\u003c/span\\u003e\\\\\\": 3, "\\u003eto\\u003c/span\\u003e\\u003cspan": 4, "\\u003etouch\\u003c/span\\u003e": 4, "\\u003etrue\\u003c/span\\u003e": 1, "\\u003etrue\\u003c/span\\u003e\\\\\\": 5, "\\u003etrue\\u003c/span\\u003e\\u003cspan": 1, "\\u003etutorial": 1, "\\u003etwitter\\u003c/span\\u003e": 2, "\\u003etwitter\\u003c/span\\u003e\\\\\\": 1, "\\u003etwitter\\u003c/span\\u003e\\u003cspan": 2, "\\u003etype\\u003c/span\\u003e": 9, "\\u003etype\\u003c/span\\u003e\\u003cspan": 17, "\\u003etypeof\\u003c/span\\u003e": 11, "\\u003eul\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 8, "\\u003eupdatecontact\\u003c/span\\u003e": 5, "\\u003eupdates\\u003c/span\\u003e": 7, "\\u003eurl\\u003c/span\\u003e": 8, "\\u003eurlsearchparams\\u003c/span\\u003e": 1, "\\u003euseeffect\\u003c/span\\u003e": 2, "\\u003eusefetcher\\u003c/span\\u003e": 3, "\\u003euseloaderdata\\u003c/span\\u003e": 9, "\\u003euseloaderdata\\u003c/span\\u003e\\u0026#x3c": 11, "\\u003eusenavigate\\u003c/span\\u003e": 2, "\\u003eusenavigation\\u003c/span\\u003e": 8, "\\u003eusestate\\u003c/span\\u003e": 3, "\\u003eusesubmit\\u003c/span\\u003e": 3, "\\u003eutf-8\\u003c/span\\u003e\\\\\\": 1, "\\u003evalue\\u003c/span\\u003e": 2, "\\u003evalue\\u003c/span\\u003e\\u003cspan": 4, "\\u003eviewport\\u003c/span\\u003e\\\\\\": 1, "\\u003ewidth=device-width": 1, "\\u003eyou\\u003c/span\\u003e": 1, "\\u003eyour\\u003c/span\\u003e\\\\\\": 1, "\\u003eyour_handle\\u003c/span\\u003e\\\\\\": 1, "\\u003e||\\u003c/span\\u003e": 7, "\\u003e★\\u003c/span\\u003e\\\\\\": 3, "\\u003e☆\\u003c/span\\u003e\\\\\\": 3, "_-b4drxahv": 1, "_1047\\": 1, "_1048\\": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 28, "_22\\": 152, "_24\\": 180, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 29, "_958\\": 1, "_961\\": 28, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_index": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "able": 4, "about": 10, "above": 2, "access": 6, "accessibility\\": 1, "accessible": 4, "account": 2, "across": 2, "action": 39, "action=": 4, "action=\\\\\\": 1, "action\u003e": 1, "action\\": 1, "action\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "action\\u003e\\u003c/code\\u003e": 1, "actiondata\\": 1, "actionfunctionargs": 8, "actions": 1, "active": 5, "active-link-styling\\": 1, "active-link-styling\\\\\\": 1, "actually": 2, "adapter": 3, "adapters": 3, "add": 28, "added": 2, "adding": 6, "adding-search-spinner\\": 1, "adding-search-spinner\\\\\\": 1, "adding-stylesheets-with-links\\": 1, "adding-stylesheets-with-links\\\\\\": 1, "adds": 2, "after": 20, "after\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003e👉": 1, "again": 6, "ahead": 2, "alex": 1, "alex\\\\\\": 1, "all": 28, "allows": 6, "almost": 2, "along": 2, "already": 11, "already\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "alright": 3, "also": 8, "alt=": 1, "alt=\\\\\\": 2, "always": 2, "an": 26, "and": 186, "annotation": 2, "another": 2, "anticipated": 2, "any": 4, "anymore": 2, "anything": 6, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "apis": 6, "app": 55, "app/data": 1, "app/root": 43, "app/routes": 2, "app/routes/_index": 3, "app/routes/contact": 2, "app/routes/contacts": 36, "app\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "approach": 1, "apps": 4, "appstyleshref": 2, "are": 30, "aren": 2, "argument": 2, "aria-hidden": 2, "aria-hidden=\\\\\\": 29, "aria-label=": 11, "around": 4, "as": 45, "aside": 1, "asked": 1, "asset": 5, "async": 14, "at": 34, "attached": 2, "attrs\\": 1, "automatically": 20, "available": 2, "avatar": 8, "avatar\\u003c/span\\u003e": 1, "avoid": 8, "await": 16, "await\\": 1, "b=document": 1, "back": 16, "back/forward/refresh": 2, "backend": 3, "backspace": 2, "bar": 2, "bare-bones": 2, "basename": 1, "basic": 4, "be": 47, "because": 12, "been": 8, "before": 11, "behavior": 2, "behind": 2, "being": 4, "better": 6, "between": 4, "big": 2, "bit": 2, "blank": 5, "body": 8, "bonus": 1, "both": 6, "breadcrumbs": 3, "break": 1, "breeze": 1, "bring": 2, "browser": 31, "build": 6, "building": 2, "built": 3, "bunch": 4, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 30, "button": 41, "button\\": 1, "button\\\\\\": 1, "button\\u003c/h2\\u003e\\\\n\\u003cp\\u003eon": 1, "buttons": 2, "buttonurlsearchparams": 2, "by": 24, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "call": 10, "called": 2, "calls": 4, "cambrian": 2, "can": 63, "cancel": 8, "cancel-button\\": 1, "cancel-button\\\\\\": 1, "cancel\\\\\\": 1, "cancel\\\\n\\u003c/span\\u003e\\u003cspan": 1, "capabilities": 2, "care": 2, "case": 4, "cases": 2, "catch": 1, "caught": 2, "cause": 4, "causes": 2, "causing": 4, "cd": 3, "certainly": 2, "change": 18, "changed": 4, "changelog": 2, "changelog\\": 1, "changes": 6, "changing": 4, "characters": 2, "charset=": 1, "check": 9, "child": 8, "children": 4, "children\\": 1, "class": 2, "class=\\\\\\": 1064, "classes": 2, "classname": 1, "classname=": 4, "clear": 2, "cli": 5, "cli\\": 1, "click": 35, "clicked": 6, "clicking": 10, "clicks": 6, "client": 35, "client-q2ogymm2": 1, "client-rendered": 2, "client-side": 2, "client-side-routing\\": 1, "client-side-routing\\\\\\": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "code": 46, "code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cimg": 2, "code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ealright": 1, "code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003efill": 1, "code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enow": 2, "code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethat": 1, "code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethe": 1, "code\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 11, "code\\u003c/summary\\u003e\\\\n\\u003cdiv": 1, "codeblock-line\\\\\\": 1014, "collect": 2, "collected": 2, "color": 2259, "com/$": 1, "com/200/200": 1, "com/200/200\\u003c/span\\u003e\\\\\\": 1, "com/\\u003c/span\\u003e$": 1, "com/avatar": 2, "com/tutorials/address-book\\\\\\": 1, "com\\\\\\": 1, "common": 6, "communicate": 2, "community": 3, "community\\": 1, "complaining": 2, "component": 26, "component\\": 1, "component\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "components": 7, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 3, "configuration": 2, "configuration\\": 1, "confirm": 6, "confused": 2, "consider": 2, "console": 1, "const": 74, "constraints": 2, "constraints\\": 1, "contact": 94, "contact-form": 2, "contact=": 1, "contact\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/tbody\\u003e\\\\n\\u003c/table\\u003e\\\\n\\u003cp\\u003ebecause": 1, "contact\\u003e\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003eindividual": 1, "contactid": 33, "contactid\\u003c/code\\u003e": 1, "contactid\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e\\u0026#x3c": 1, "contactrecord": 1, "contacts": 39, "contacts/": 1, "contacts/$": 2, "contacts\u003c/h1\u003e": 1, "contacts\u003c/i\u003e": 1, "contacts\\": 1, "contacts\\u0026#x3c": 2, "contacts\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewe": 1, "contacts\\u003c/span\\u003e\\\\\\": 4, "contacts\\u003c/td\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003econtacts/": 1, "contactsupdating": 2, "contains": 4, "content=": 1, "content\\\\\\": 2, "contributing": 3, "contributing\\": 1, "control": 2, "controlled": 4, "controller": 2, "convention": 3, "convention\\u003c/a\\u003e": 1, "conventions": 4, "conventions\\": 1, "cookies\\": 1, "copy/paste": 6, "could": 14, "couple": 2, "coupled": 2, "coupling": 2, "cousin": 2, "create": 21, "create-remix": 3, "create-remix@latest": 1, "created": 4, "createemptycontact": 4, "createremixstub": 2, "createremixstub\\": 1, "creates": 4, "creating": 8, "creating-contacts\\": 1, "creating-contacts\\\\\\": 1, "css": 25, "css\\": 1, "cumbersome": 2, "current": 6, "currenttarget": 6, "currenttarget\\u003c/code\\u003e": 1, "custom": 2, "d=c": 2, "dashboards": 2, "data": 86, "data-code-block=\\\\\\": 42, "data-filename=\\\\\\": 72, "data-highlight=\\\\\\": 172, "data-lang=\\\\\\": 84, "data-line-number=\\\\\\": 1000, "data-line-numbers=\\\\\\": 84, "data-mutations\\": 1, "data-mutations\\\\\\": 1, "data-nocopy=\\\\\\": 4, "data-nonumber=\\\\\\": 12, "data=": 1, "data\\": 4, "data\\u003c/h2\\u003e\\\\n\\u003cp\\u003elet": 1, "data\\u003c/h2\\u003e\\\\n\\u003cp\\u003eurl": 1, "data\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003ethe": 1, "database": 6, "datatype": 2, "dataupdating": 2, "decide": 2, "decision": 2, "deeper": 2, "default": 30, "defaultvalue": 2, "defaultvalue=": 8, "defer": 2, "defer\\": 1, "deferred": 1, "definitely": 2, "delay": 2, "delete": 9, "delete\\\\\\": 1, "deletecontact": 3, "deleting": 6, "deleting-records\\": 1, "deleting-records\\\\\\": 1, "demo": 4, "dependencies": 2, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "designer": 2, "destroy": 15, "destroy\\\\\\": 3, "destroy\\u003c/code\\u003e": 1, "detail": 3, "dev": 4, "developers": 2, "development": 3, "devtools": 2, "did": 4, "difference": 6, "dig": 2, "directly": 4, "directory": 5, "directory\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "disable": 2, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussing": 2, "discussion": 4, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 2, "discussion\\u003c/h2\\u003e\\\\n\\u003cblockquote\\u003e\\\\n\\u003cp\\u003e😑": 1, "discussionredirecting": 2, "do": 21, "doc\\": 1, "docs": 3, "docs/start/tutorial": 1, "docs/start/tutorial\\": 1, "docs\\u003c/a\\u003e": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docstutorial": 1, "document": 10, "documents": 4, "does": 7, "doesn": 14, "doing": 2, "dom": 4, "don": 6, "done": 1, "down": 4, "dynamic": 10, "e--": 1, "e=0": 1, "each": 3, "easier": 4, "easily": 4, "edit": 43, "edit\\\\\\": 1, "editcontact": 2, "either": 6, "elements": 107, "elements\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003efeel": 1, "else": 2, "empty": 2, "emulates": 10, "en": 12, "end": 6, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "enter": 2, "entered": 2, "entry": 14, "environment": 3, "equally": 2, "error": 12, "errorboundary": 2, "errorboundary\\": 1, "errors": 6, "errors\\": 1, "etc": 2, "even": 12, "event": 16, "eventually": 2, "every": 6, "everything": 3, "exact": 2, "exactly": 4, "example": 4, "examples": 1, "except": 4, "execution": 4, "execution\\": 1, "exist": 4, "existing": 194, "expand": 2, "expect": 2, "experience": 4, "experiences": 2, "explanation": 2, "explanation\\": 1, "explosion": 2, "export": 41, "exporting": 2, "exports": 16, "exports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 16, "extra": 2, "extract": 2, "extract\\": 1, "eyes": 2, "f=a": 1, "fact": 2, "fade": 2, "fading": 2, "fails": 2, "faked": 2, "false": 6, "false\\\\\\": 12, "familiarize": 2, "faqs": 2, "faqs\\": 1, "far": 4, "fast": 2, "faster": 2, "favicons": 2, "favorite": 33, "favorite\\u003e\\u003c/code\\u003e": 1, "favorites": 6, "favorites\\u003c/span\\u003e\\\\\\": 6, "feature-rich": 2, "features": 5, "feeds": 2, "feel": 7, "feels": 4, "felt": 2, "fetch": 11, "fetch\\": 1, "fetcher": 14, "fetcher\\": 1, "field": 14, "fields": 2, "file": 21, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename\\": 1, "files": 4, "files\\": 1, "fill": 6, "filter": 9, "filtered": 3, "filtered\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003cp\\u003ein": 1, "find": 4, "fingerprint": 2, "finished": 4, "finishes": 2, "first": 37, "firstchild": 2, "firstname": 1, "fix": 8, "flags": 2, "flags\\": 1, "flickering": 2, "flow": 2, "flow\\": 1, "flows": 2, "flying": 2, "focus": 4, "focused": 4, "follow": 2, "following": 6, "fooled": 2, "for": 64, "forces": 2, "form": 94, "form\u003e": 2, "form\\": 1, "form\\u003c/span\\u003e": 2, "form\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "form\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "form\\u003e\\u003c/code\\u003e": 2, "form\\u003e\\u003c/code\\u003e\\u003c/a\\u003e": 2, "formdata": 25, "formdata\\u003c/code\\u003e": 1, "formdata\\u003c/code\\u003e\\u003c/a\\u003e": 1, "formdata\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "formdatamutation": 2, "forms": 8, "forms-without-navigation\\": 1, "forms-without-navigation\\\\\\": 1, "found": 9, "found\\u003c/span\\u003e\\\\\\": 2, "framework": 2, "free": 6, "frequently": 1, "friend\u003c/a\u003e": 1, "friend\u003c/link\u003e": 1, "friend\\u0026#x3c": 2, "from": 85, "fromentries": 5, "fromentries\\u003c/code\\u003e\\u003c/a\\u003e": 2, "frontend": 2, "frontend\\": 1, "full": 2, "fullstack": 3, "function": 57, "functioncomponent": 1, "functioncomponent\u003c": 3, "functions": 6, "future": 4, "generate": 1, "get": 33, "getcontact": 8, "getcontacts": 5, "getelementbyid": 3, "getitem": 1, "getting": 5, "githubchat": 1, "give": 6, "given": 2, "gives": 2, "giving": 2, "global": 6, "global-pending-ui\\": 1, "global-pending-ui\\\\\\": 1, "go": 4, "going": 8, "got": 6, "gotchas": 2, "gotchas\\": 1, "gotten": 2, "great": 2, "guide": 5, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "hairy": 2, "handful": 2, "handle": 4, "handle\\": 1, "handler": 4, "handling": 4, "handling\\": 2, "handy": 2, "happen": 2, "happening": 2, "happens": 2, "happy": 4, "has": 21, "hascontent\\": 1, "hasn": 2, "have": 34, "haven": 4, "having": 2, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 1, "helper": 2, "here": 11, "hidden=": 2, "highlights": 2, "hint": 2, "history": 17, "hit": 4, "home": 2, "hook": 2, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "hope": 2, "host\\": 1, "hot": 3, "how": 7, "however": 2, "href": 4, "href=": 4, "href=\\\\\\": 77, "href\u003e": 1, "href\\u003e\\u003c/code\\u003e": 1, "html": 11, "html\\": 1, "htmlinputelement": 1, "http": 5, "https": 27, "huge": 2, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 29, "icon-link\\\\\\": 29, "id": 13, "id=": 29, "id=\\\\\\": 29, "idea": 2, "idle": 3, "idle\\\\\\": 1, "if": 46, "immediate": 4, "immediately": 5, "implemented": 2, "import": 45, "import\\\\\\": 1, "imports": 57, "imports\\": 2, "imports\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 21, "in": 127, "inc": 1, "includes": 2, "including": 2, "index": 14, "index-page": 1, "index-routes\\": 1, "index-routes\\\\\\": 1, "indicate": 2, "indicator": 2, "individual": 1, "inference": 3, "inference\\": 1, "inference\\u003c/h2\\u003e\\\\n\\u003cp\\u003eyou": 1, "inferenceurl": 2, "information": 4, "initial": 1, "initial-scale=1": 1, "initial-scale=1\\u003c/span\\u003e\\\\\\": 1, "input": 22, "insertbefore": 1, "inside": 10, "install": 3, "instanceof": 1, "instead": 22, "integrating": 1, "interactions": 1, "interactive": 2, "interesting": 2, "into": 22, "introduction": 1, "invariant": 12, "is": 99, "isactive": 3, "isfirstsearch": 2, "isn": 4, "ispending": 3, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "issue": 2, "issues": 2, "it": 143, "items": 2, "iterative": 1, "its": 4, "javascript": 16, "javascript\\": 1, "jim": 1, "jim-nielsen": 1, "jpg": 1, "jpg\\u003c/span\\u003e\\\\\\": 1, "js": 7, "js\\": 1, "json": 3, "json\\": 1, "just": 20, "keep": 8, "kept": 2, "key": 7, "key=": 5, "key\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003enote": 1, "keys": 2, "keystroke": 4, "kind": 2, "kinda": 2, "know": 9, "knows": 4, "lang=": 12, "large": 2, "last": 19, "lastname": 1, "latency": 6, "latest": 8, "layout": 2, "layouts": 4, "lazy": 3, "lazy\\\\\\": 19, "learn": 2, "learned": 2, "learning": 1, "leave": 1, "left": 2, "length": 2, "less": 2, "let": 33, "lets": 2, "licensed": 1, "like": 35, "like\\u003c/summary\\u003e\\\\n\\u003cdiv": 1, "likely": 2, "link": 15, "link\\": 1, "link\\u003e\\u003c/code\\u003e": 1, "link\\u003e\\u003c/code\\u003e\\u003c/a\\u003e": 1, "links": 26, "links\\": 2, "links\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ewe": 1, "linksfunction": 3, "linksthe": 2, "list": 15, "little": 2, "livereload": 2, "livereload\\": 1, "ll": 36, "load": 4, "loaded": 2, "loader": 21, "loader\u003e": 12, "loader\\": 1, "loader\\u003c/code\\u003e": 1, "loader\\u003e": 1, "loaderdata\\": 1, "loaderfunctionargs": 10, "loaders": 3, "loaders\\": 1, "loaders\\u003c/h2\\u003e\\\\n\\u003cp\\u003e👉": 1, "loadersvalidating": 2, "loading": 24, "loading-data\\": 1, "loading-data\\\\\\": 1, "loading=\\\\\\": 19, "loading\\": 1, "loading\\\\\\": 2, "loads": 4, "local": 3, "localhost\\": 1, "location": 6, "location\\u003c/code\\u003e": 1, "locations": 2, "longer": 8, "look": 10, "looking": 6, "looks": 4, "lose": 2, "lot": 4, "main": 6, "make": 18, "makes": 9, "making": 2, "management": 4, "management\\": 2, "managing": 4, "managing-the-history-stack\\": 1, "managing-the-history-stack\\\\\\": 1, "manipulate": 2, "manual": 3, "map": 4, "match": 10, "matches": 6, "math": 1, "may": 8, "maybe": 8, "md\\": 152, "mdx": 3, "mdx\\": 1, "means": 6, "mentioned": 2, "menu\\": 1, "message": 2, "meta": 11, "meta\\": 2, "method": 4, "method=": 10, "method=\\\\\\": 2, "might": 2, "migrating": 4, "missing": 7, "mitedit": 1, "mix": 2, "mkdir": 1, "mode": 3, "mode\\": 1, "model": 8, "module": 10, "module\\": 1, "module\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 2, "moduleaction": 2, "modules": 8, "modules\\": 3, "more": 14, "most": 3, "moving": 2, "mozilla": 18, "multiple": 2, "mutation": 4, "mutation-discussion\\": 1, "mutation-discussion\\\\\\": 1, "mutations": 1, "mutations\\": 1, "mutations\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewe": 1, "mutationscreating": 2, "name": 27, "name\u003c/a\u003e": 1, "name\u003c/i\u003e": 2, "name\u003c/link\u003e": 1, "name=": 14, "name\\\\\\": 1, "name\\u0026#x3c": 4, "name\\u003c/span\\u003e\\\\\\": 3, "named": 2, "names": 2, "naming": 3, "naming\\": 1, "naming\\u003c/a\\u003e": 1, "natural": 2, "navigate": 4, "navigates": 4, "navigation": 31, "navigation\\": 1, "navigation\\u003c/h2\\u003e\\\\n\\u003cp\\u003eso": 1, "navigationoptimistic": 2, "navlink": 7, "navlink\\": 1, "navlink\\u003e\\u003c/code\\u003e": 1, "need": 19, "needs": 4, "nest": 4, "nested": 4, "nested-routes-and-outlets\\": 1, "nested-routes-and-outlets\\\\\\": 1, "network": 13, "new": 56, "new\\": 1, "new\\\\\\": 4, "next": 15, "nextsibling": 2, "nice": 6, "no": 26, "node": 2, "nodetype": 1, "noindex\\": 1, "none": 2, "normal": 4, "not": 27, "not\\u003c/em\\u003e": 1, "note": 8, "notes": 7, "notes\\u003c/span\\u003e\\\\\\": 1, "nothing": 9, "notice": 4, "noticed": 8, "now": 36, "npm": 2, "npx": 1, "null": 7, "number": 1, "object": 7, "of": 91, "often": 4, "old": 8, "on": 52, "once": 9, "onchange": 1, "onchange=": 4, "onchangeadding": 2, "onclick=": 1, "one": 18, "only": 14, "onsubmit": 1, "onsubmit=": 2, "open": 8, "optimistic": 6, "optimistic-ui\\": 1, "optimistic-ui\\\\\\": 1, "optimization": 2, "optimization\\": 1, "or": 27, "order": 2, "order\\": 1, "org/en-us/docs/web/api/fetch\\\\\\": 5, "org/en-us/docs/web/api/formdata\\\\\\": 4, "org/en-us/docs/web/api/request/formdata\\\\\\": 1, "org/en-us/docs/web/api/request\\\\\\": 2, "org/en-us/docs/web/api/response\\\\\\": 1, "org/en-us/docs/web/api/urlsearchparams\\\\\\": 3, "org/en-us/docs/web/javascript/reference/global_objects/object/fromentries\\\\\\": 2, "other": 29, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "otherwise": 2, "our": 40, "out": 18, "out\\u003cspan": 1, "outlet": 15, "outlet\\": 1, "outlet\\u003e\\u003c/code\\u003e": 1, "outlets": 1, "outlets\\": 1, "outlets\\u003c/h2\\u003e\\\\n\\u003cp\\u003esince": 1, "outletsclient": 2, "page": 46, "page\\": 1, "page\\u003c/h2\\u003e\\\\n\\u003cp\\u003enow": 1, "page\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "pageactive": 2, "pages": 2, "pagesetupthe": 2, "param": 11, "param\\": 1, "param\\u003c/span\\u003e\\\\\\": 7, "params": 44, "params\\\\\\": 2, "parent": 8, "parentnode": 2, "parse": 1, "part": 4, "participate": 2, "pass": 2, "passed": 4, "passing": 4, "path": 10, "pending": 11, "performance": 2, "performance\\": 1, "pick\u003ccontactrecord": 3, "piece": 2, "pieces": 2, "pipethrough": 1, "placeholder=": 9, "plain": 2, "platform": 2, "please": 2, "point": 2, "points": 6, "pop": 2, "populated": 2, "position": 2, "positions": 4, "possibility": 2, "post": 22, "post\\\\\\": 2, "postcss": 2, "postcss\\": 1, "potential": 4, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "prefixed": 2, "presets": 2, "presets\\": 1, "pretty": 2, "preventdefault": 4, "preventing": 2, "prevents": 6, "previous": 1, "previous\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "previoussibling": 1, "prevq": 2, "primary": 1, "primitive": 2, "prior": 2, "probably": 2, "problem": 4, "problems": 2, "product": 2, "production": 4, "programming": 2, "progressive": 3, "project": 3, "promise": 2, "proper": 2, "provide": 6, "provided": 2, "provides": 2, "publicly": 2, "pull": 1, "pushing": 2, "put": 5, "q=ryan": 1, "q=ryan\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003esince": 1, "query": 12, "query\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "questions": 1, "quick": 8, "quickest": 1, "quickly": 3, "random": 1, "re": 28, "re-fetch": 2, "react": 21, "react-router-scroll-positions": 1, "read": 5, "readablestream": 1, "ready": 3, "ready\\\\\\": 1, "real": 6, "received": 2, "record": 22, "records": 10, "records\\": 1, "records\\u003c/h2\\u003e\\\\n\\u003cp\\u003eif": 1, "recordsindex": 2, "redirect": 22, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "redirected": 2, "redirecting": 2, "redirecting-new-records-to-the-edit-page\\": 1, "redirecting-new-records-to-the-edit-page\\\\\\": 1, "redirects": 2, "redundant": 2, "refresh": 4, "regular": 3, "rel": 2, "related": 1, "relative": 3, "released": 2, "remember": 1, "remix": 76, "remix-run/remix/templates/remix-tutorial": 1, "remix-tutorial\\\\\\": 1, "remix\\": 2, "remove": 5, "removechild": 2, "removeitem": 1, "render": 23, "rendered": 8, "renders": 6, "replace": 10, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "replacing": 1, "request": 48, "request\\u003c/li\\u003e\\\\n\\u003cli\\u003eafter": 1, "requesting": 4, "resource": 3, "resources": 1, "response": 8, "responses": 1, "responses\\": 1, "responses\\u003c/h2\\u003e\\\\n\\u003cp\\u003etypescript": 1, "responsesdata": 2, "rest": 4, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "results": 6, "return": 36, "returns": 4, "revalidate": 4, "revalidated": 2, "revalidates": 2, "revalidation": 3, "revalidation\\\\\\": 1, "reveals": 2, "revert": 2, "review": 2, "right": 2, "rocking": 1, "role=": 6, "rolling": 1, "root": 20, "root\\": 1, "root\\u003e\\u003c/code\\u003e\\u003c/td\\u003e\\\\n\\u003ctd\\u003elist": 1, "route": 77, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 2, "route\\\\\\": 1, "route\\u003c/h2\\u003e\\\\n\\u003cp\\u003enote": 1, "route\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003edeletecontact\\u003c/code\\u003e": 1, "route\\u003c/li\\u003e\\\\n\\u003cli\\u003ean": 1, "route\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 2, "routeadding": 2, "routediscovery": 1, "router": 13, "router\\": 2, "routes": 23, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 3, "routes\\u003c/h2\\u003e\\\\n\\u003cp\\u003ewhen": 1, "routescancel": 2, "routing": 19, "routing\\": 1, "routing\\u003c/h2\\u003e\\\\n\\u003cp\\u003eyou": 1, "routingloading": 2, "rows=": 1, "run": 2, "run/blog/incremental-path-to-react-19\\\\\\": 1, "run/docs/start/tutorial": 1, "run\u003c/a\u003e": 1, "run\\": 1, "run\\u0026#x3c": 1, "run\\u003c/span\\u003e\\\\\\": 1, "running": 1, "runtimes": 3, "same": 14, "save": 6, "scenes": 2, "school": 3, "school\\\\\\": 1, "screen": 4, "scripts": 9, "scripts\\": 1, "scroll": 2, "scrollrestoration": 9, "scrollrestoration\\": 1, "scrollto": 1, "search": 53, "search-form": 6, "search-spinner": 2, "search\\u003c/code\\u003e": 1, "searchfield": 3, "searching": 12, "searching\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "searchparams": 2, "sec": 2, "second": 4, "section": 4, "section\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 2, "see": 24, "seeing": 2, "seemingly": 2, "seen": 4, "segment": 7, "segment\\u003c/th\\u003e\\\\n\\u003cth\\u003ecomponent\\u003c/th\\u003e\\\\n\\u003cth\\u003edata\\u003c/th\\u003e\\\\n\\u003c/tr\\u003e\\\\n\\u003c/thead\\u003e\\\\n\\u003ctbody\\u003e\\\\n\\u003ctr\\u003e\\\\n\\u003ctd\\u003e/\\u003c/td\\u003e\\\\n\\u003ctd\\u003e\\u003ccode\\u003e\\u0026#x3c": 1, "segments": 4, "semantics": 2, "send": 8, "sending": 8, "sends": 10, "sense": 4, "sent": 2, "separate": 2, "serialize": 8, "serializing": 4, "server": 36, "server\\": 3, "server\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 4, "setprevq": 2, "setquery": 3, "setup": 3, "setup\\": 2, "setup\\\\\\": 1, "seven": 2, "shellscript\\\\\\": 12, "shopify": 1, "short": 4, "should": 26, "shouldn": 2, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "show": 4, "shows": 2, "side": 29, "sidebar": 27, "sidebar\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "simplicity": 4, "simplifying": 1, "simply": 4, "since": 10, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "sluggish": 2, "small": 2, "so": 27, "solid": 2, "solve": 4, "some": 18, "some\\\\\\": 1, "something": 8, "sometimes": 2, "somewhere": 2, "spa": 3, "space": 4, "speaking": 2, "special": 4, "spinner": 5, "spinner\\": 1, "spinner\\u003c/h2\\u003e\\\\n\\u003cp\\u003ein": 1, "spinnermanaging": 2, "spinning": 2, "src=": 1, "src=\\\\\\": 21, "ssr": 1, "stack": 7, "stack\\": 1, "stack\\u003c/h2\\u003e\\\\n\\u003cp\\u003esince": 1, "stackforms": 2, "stages": 1, "star": 8, "stars": 2, "start": 12, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "start\\u003c/a\\u003e": 1, "started": 2, "started\\": 1, "startedquick": 2, "state": 32, "state\\": 1, "state\\u003c/code\\u003e": 1, "state\\u003c/code\\u003e\\u003c/a\\u003e": 1, "state\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethere": 1, "state\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "state\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "states": 2, "statesubmitting": 2, "static": 4, "stats": 2, "status": 4, "stay": 2, "still": 12, "stops": 2, "storagekey2": 3, "store": 2, "storedy": 3, "strategy": 4, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "stretch": 2, "style": 2, "style=\\\\\\": 2259, "styles": 1, "styles\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "stylesheet": 3, "stylesheets": 5, "styling": 1, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 3, "styling\\u003c/h2\\u003e\\\\n\\u003cp\\u003enow": 1, "stylingcss": 2, "stylingglobal": 2, "submissions": 1, "submissions\\": 1, "submissions\\u003c/h2\\u003e\\\\n\\u003cp\\u003eall": 1, "submissionssynchronizing": 2, "submit": 26, "submitted": 8, "submitting": 7, "submitting-forms-onchange\\": 1, "submitting-forms-onchange\\\\\\": 1, "submitting\\\\\\": 1, "support": 3, "support\\": 1, "supports": 2, "sure": 4, "switched": 2, "sync": 6, "synchronization": 2, "synchronize": 5, "synchronizing": 2, "synchronizing-urls-to-form-state\\": 1, "synchronizing-urls-to-form-state\\\\\\": 1, "tab": 2, "tabindex=\\\\\\": 29, "tailwind": 2, "tailwind\\": 1, "take": 6, "talk": 2, "technical": 3, "technologies\\": 1, "tells": 6, "template": 3, "template\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "templates": 5, "templates\\": 1, "test": 2, "text": 5, "textencoderstream": 1, "than": 4, "thank": 3, "thanks": 2, "that": 71, "the": 724, "the-contact-route-ui\\": 1, "the-contact-route-ui\\\\\\": 1, "the-root-route\\": 1, "the-root-route\\\\\\": 1, "them": 6, "then": 18, "there": 23, "these": 12, "they": 12, "thing": 10, "things": 4, "think": 2, "this": 92, "though": 12, "through": 3, "throw": 2, "throwing": 7, "time": 4, "times": 4, "tiny-invariant": 3, "title\\": 1, "tls": 2, "tls\\": 1, "to": 279, "to=": 4, "to\u003e": 3, "to\\u003e\\u003c/code\\u003e": 2, "to\\u003e\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "toc\\": 1, "together": 2, "too": 2, "top": 4, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "touch": 4, "track": 2, "trailing": 2, "tripled": 2, "true": 17, "true\\\\\\": 273, "try": 7, "ts": 5, "ts\\": 1, "ts\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003eredirect\\u003c/code\\u003e": 1, "tsx": 15, "tsx\\\\\\": 144, "tsx\\u003c/code\\u003e": 10, "tsx\\u003c/code\\u003e\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "tsx\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ein": 1, "tsx\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003enote": 1, "tsx\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e👉": 2, "tutorial": 8, "tutorial\\\\\\": 21, "tutorial\\u003c/h1\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003ejust": 1, "twitter": 7, "two": 3, "type": 22, "type-inference\\": 1, "type-inference\\\\\\": 1, "type=": 18, "type=\\\\\\": 1, "typeof": 3, "types": 2, "typescript": 5, "typescript\\": 1, "typically": 2, "typing": 2, "ui": 25, "ui\\": 4, "ui\\\\\\": 1, "ui\\u003c/h2\\u003e\\\\n\\u003cp\\u003eas": 1, "ui\\u003c/h2\\u003e\\\\n\\u003cp\\u003eif": 1, "ui\\u003c/h2\\u003e\\\\n\\u003cp\\u003eyou": 1, "ui\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "ui\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eit": 1, "ui\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003enothing": 1, "uideleting": 2, "uinested": 2, "uion": 1, "uiremix": 1, "unaffected": 2, "undefined": 1, "under": 1, "understanding": 2, "unfamiliar": 2, "unresponsive": 6, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "unstyled": 2, "until": 2, "up": 15, "up\\u003c/em\\u003e": 1, "update": 16, "updatecontact": 6, "updates": 9, "updating": 6, "updating-contacts-with-formdata\\": 1, "updating-contacts-with-formdata\\\\\\": 1, "updating-data\\": 1, "updating-data\\\\\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "upset": 2, "url": 54, "url-params-in-loaders\\": 1, "url-params-in-loaders\\\\\\": 1, "url\u003c/span\u003e": 1, "url\\u0026#x3c": 1, "url\\u003c/span\\u003e\\\\\\": 2, "urls": 7, "urlsearchparams": 7, "urlsearchparams-and-get-submissions\\": 1, "urlsearchparams-and-get-submissions\\\\\\": 1, "us": 8, "use": 22, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "used": 6, "useeffect": 7, "useeffect\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "usefetcher": 6, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 14, "useloaderdata\u003ctypeof": 12, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 7, "usenavigate\\": 1, "usenavigation": 14, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 42, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "users": 2, "uses": 6, "usesearchparams": 2, "usesearchparams\\": 1, "usestate": 4, "usesubmit": 6, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 10, "usually": 2, "utf-8": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "ux": 4, "v2": 2, "v2\\": 1, "v7": 3, "v7\\u003c/a\\u003e": 1, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "validating": 2, "validating-params-and-throwing-responses\\": 1, "validating-params-and-throwing-responses\\\\\\": 1, "validation": 2, "validation\\": 1, "value": 24, "value=": 4, "value\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "value\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "values": 8, "vanilla": 3, "var": 2261, "variable": 2, "variables": 2, "variables\\": 1, "ve": 10, "version": 2, "very": 2, "view": 2, "viewport": 1, "visit": 2, "vite": 7, "vite\\": 1, "voilà": 1, "vs": 8, "wait": 2, "walk": 1, "want": 20, "wants": 2, "way": 13, "ways": 2, "we": 169, "web": 11, "web\\\\\\": 1, "webby": 2, "webp\\\\\\": 21, "weird": 2, "well": 4, "were": 2, "what": 14, "when": 41, "where": 12, "wherever": 1, "wherever\\u003c/span\\u003e": 1, "which": 8, "while": 11, "who": 2, "whole": 2, "why": 9, "width=device-width": 1, "will": 62, "window": 11, "with": 90, "without": 18, "won": 2, "words": 2, "work": 6, "worked": 2, "works": 5, "works\\u003c/p\\u003e\\\\n\\u003c/blockquote\\u003e\\\\n\\u003cp\\u003ewhen": 1, "world": 2, "would": 6, "write": 2, "writes": 2, "writes\\": 1, "written": 2, "wrong": 2, "yet": 2, "you": 118, "your": 34, "your_handle": 1, "||": 10, "—": 2, "•docs": 1, "★": 5, "☆": 3, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2, "👉": 33, "😀\\u003c/p\\u003e\\": 1, "😀©": 1, "😁": 1, "😁\\u003c/p\\u003e\\\\n\\u003ch2": 1, "😂": 2, "😅": 1, "😑": 1, "🙏": 2, "🤔": 1, "🥳": 1, "🥳\\u003c/p\\u003e\\\\n\\u003cimg": 1, "🧐": 2 }, "length": 38021 }, { "id": "8e72fa85bb08ab0fe34366b6", "doc_id": "f7b96ebbe33475607cf5b90d", "title": "typescript", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/configuration/typescript.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/typescript.json", "content": "--- title: TypeScript use_cases: \u003e- type safety, code reliability, large projects, team collaboration, api documentation, migrating from javascript tags: - typescript - types - migration - configuration - jsx - development - tooling version: '1.0' description: \u003e- Learn to configure TypeScript with SolidJS for enhanced type safety, better IDE support, and reliable component development. --- [TypeScript](https://www.typescriptlang.org/) is a superset of JavaScript that enhances code reliability and predictability through the introduction of [static types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html). While JavaScript code can be directly used in TypeScript, the added type annotations in TypeScript provide clearer code structure and documentation, making it more accessible for developers. By leveraging standard JSX, a syntax extension to JavaScript, Solid facilitates seamless TypeScript interpretation. Moreover, Solid has built-in types for the API that heighten accuracy. For developers eager to get started, we offer [TypeScript templates](https://github.com/solidjs/templates/) on GitHub. ## Configuring TypeScript When integrating TypeScript with the Solid JSX compiler, there are some settings to make for a seamless interaction: 1. `\"jsx\": \"preserve\"` in the `tsconfig.json` retains the original JSX form. This is because Solid's JSX transformation is incompatible with TypeScript's JSX transformation. 2. `\"jsxImportSource\": \"solid-js\"` designates Solid as the source of JSX types. For a basic setup, your `tsconfig.json` should resemble: ```json { \"compilerOptions\": { \"jsx\": \"preserve\", \"jsxImportSource\": \"solid-js\" } } ``` For projects with diverse JSX sources, such as a blend of React and Solid, some flexibility exists. While it's possible to set a default `jsxImportSource` in the `tsconfig.json`, which will correspond with the majority of your files, TypeScript also allows file-level overrides. Using specific pragmas within `.tsx` files facilitates this: ```jsx /** @jsxImportSource solid-js */ ``` or, if using React: ```jsx /** @jsxImportSource react */ ``` Opting for the React JSX pragma means having React and its associated dependencies fully integrated into the project. Additionally, it makes sure the project's architecture is primed for React JSX file handling, which is vital. ## Migrating from JavaScript to TypeScript Transitioning from JavaScript to TypeScript in a Solid project offers the benefits of static typing. To migrate to TypeScript: 1. Install TypeScript into your project. ```package-install-dev typescript ``` 2. Run the following command to generate a `tsconfig.json` file. ```package-exec tsc --init ``` 3. Update the contents of the `tsconfig.json` to match Solid's configuration: ```json { \"compilerOptions\": { \"strict\": true, \"target\": \"ESNext\", \"module\": \"ESNext\", \"moduleResolution\": \"node\", \"allowSyntheticDefaultImports\": true, \"esModuleInterop\": true, \"jsx\": \"preserve\", \"jsxImportSource\": \"solid-js\", \"types\": [\"vite/client\"], \"noEmit\": true, \"isolatedModules\": true } } ``` 4. Create a TypeScript or `.tsx` file to test the setup. ```typescript import { type Component } from \"solid-js\"; const MyTsComponent: Component = () =\u003e { return ( \u003cdiv\u003e \u003ch1\u003eThis is a TypeScript component\u003c/h1\u003e \u003c/div\u003e ); } export default MyTsComponent; ``` If using an existing JavaScript component, import the TypeScript component: ```jsx import MyTsComponent from \"./MyTsComponent\"; function MyJsComponent() { return ( \u003c\u003e {/* ... */} \u003cMyTsComponent /\u003e \u003c/\u003e ); } ``` :::note If you wish to change the entry point file from `index.jsx` to `index.tsx`, you need to modify the `src` attribute in `\u003cscript\u003e` to look like the following: ```html \u003c!doctype html\u003e \u003chtml lang=\"en\"\u003e \u003chead\u003e \u003c!-- ... --\u003e \u003c/head\u003e \u003cbody\u003e \u003cnoscript\u003eYou need to enable JavaScript to run this app.\u003c/noscript\u003e \u003cdiv id=\"root\"\u003e\u003c/div\u003e \u003cscript src=\"/src/index.tsx\" type=\"module\"\u003e\u003c/script\u003e \u003c/body\u003e \u003c/html\u003e ``` ::: ## API types Solid is written in TypeScript, meaning everything is typed out of the box. The Reference Tab in the sidebar provides the API Documentation that details the types of API calls. In addition, there are several helpful definitions to make it easier for specifying explicit types. ### Signals Using `createSignal\u003cT\u003e`, a signal's type can be defined as `T`. ```ts const [count, setCount] = createSignal\u003cnumber\u003e(); ``` Here, `createSignal` has the return type `Signal\u003cnumber | undefined\u003e`, which corresponds to the type passed into it, and `undefined` as it was uninitialized. This resolves to a getter-setter [tuple](https://www.typescriptlang.org/docs/handbook/2/objects.html#tuple-types), both of which are generically typed: ```typescript import type { Signal, Accessor, Setter } from \"solid-js\"; type Signal\u003cT\u003e = [get: Accessor\u003cT\u003e, set: Setter\u003cT\u003e]; ``` In Solid, a signal's getter, like `count`, is essentially a function that returns a specific type. In this case, the type is `Accessor\u003cnumber | undefined\u003e`, which translates to a function `() =\u003e number | undefined`. Since the signal was not initialized, its initial state is `undefined`, therefore `undefined` is included in its type. The corresponding setter, `setCount`, has a more complex type: ```ts Setter\u003cnumber | undefined\u003e. ``` Essentially, this type means that the function can accept either a direct number or another function as its input. If provided with a function, that function can take the signal's previous value as its parameter and return a new value. Both the initial and resulting values can be a number or `undefined`. Importantly, calling `setCount` without any arguments will reset the signal's value to `undefined`. When using the function form of the setter, the signal's current value will always be passed to the callback as the sole argument. Additionally, the return type of the setter will align with the type of value passed into it, echoing the behavior expected from a typical assignment operation. If a signal is intended to store functions, the setter won't directly accept new functions as values. This is because it can not distinguish whether the function should be executed to yield the actual value or to store it as-is. In these situations, using the callback form of the setter is recommended: ```ts setSignal(() =\u003e value); ``` #### Default values By providing default values when `createSignal` is called, the need for explicit type specification is avoided and the possibility of the `| undefined` type is eliminated. This leverages type inference to determine the type automatically: ```typescript const [count, setCount] = createSignal(0); const [name, setName] = createSignal(\"\"); ``` In this example, TypeScript understands the types as `number` and `string`. This means that `count` and `name` directly receive the types `Accessor\u003cnumber\u003e` and `Accessor\u003cstring\u003e`, respectively, without the `| undefined` tag. ### Context Just as signals use `createSignal\u003cT\u003e`, context uses `createContext\u003cT\u003e`, which is parameterized by the type `T` of the context's value: ```tsx type Data = { count: number; name: string }; ``` When invoking `useContext(dataContext)`, the type contained within the context is returned. For example, if the context is `Context\u003cData | undefined\u003e`, then with using `useContext` a result of type `Data | undefined` will return. The `| undefined` signifies that the context may not be defined in the component's ancestor hierarchy. `dataContext` will be understood as `Context\u003cData | undefined\u003e` by Solid. Calling `useContext(dataContext)` mirrors this type, returning `Data | undefined`. The `| undefined` arises when the context's value will be used but cannot be determined. Much like [default values](#default-values) in signals, `| undefined` can be avoided in the type by giving a default value that will be returned if no value is assigned by a context provider: ```typescript const dataContext = createContext({ count: 0, name: \"\" }); ``` By providing a default value, TypeScript determines that `dataContext` is `Context\u003c{ count: number, name: string }\u003e`. This is equivalent to `Context\u003cData\u003e` but without `| undefined`. A common approach to this is forming a factory function to generate a context's value. By using TypeScript's [`ReturnType`](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#return-type-annotations), you can use the return type of this function to type this context: ```tsx export const makeCountNameContext = (initialCount = 0, initialName = \"\") =\u003e { const [count, setCount] = createSignal(initialCount); const [name, setName] = createSignal(initialName); return [ { count, name }, { setCount, setName }, ] as const; }; type CountNameContextType = ReturnType\u003ctypeof makeCountNameContext\u003e; export const CountNameContext = createContext\u003cCountNameContextType\u003e(); ``` `CountNameContextType` will correspond to the result of `makeCountNameContext`: ```tsx [ { count: Accessor\u003cnumber\u003e, name: Accessor\u003cstring\u003e }, { setCount: Setter\u003cnumber\u003e, setName: Setter\u003cstring\u003e }, ]; ``` To retrieve the context, use `useCountNameContext`, which has a type signature of `() =\u003e CountNameContextType | undefined`. In scenarios where `undefined` needs to be avoided as a possible type, assert that the context will always be present. Additionally, throwing a readable error may be preferable to non-null asserting: ```tsx export const useCountNameContext = () =\u003e { const countName = useContext(CountNameContext); if (!countName) { throw new Error( \"useCountNameContext should be called inside its ContextProvider\" ); } return countName; }; ``` **Note:** While supplying a default value to `createContext` can make the context perpetually defined, this approach may not always be advisable. Depending on the use case, it could lead to silent failures, which may be less preferable. ### Components #### The basics By default, components in Solid use the generic `Component\u003cP\u003e` type, where `P` represents the props' type that is an object. ```tsx import type { Component } from \"solid-js\"; const MyComponent: Component\u003cMyProps\u003e = (props) =\u003e { ... } ``` A `JSX.Element` denotes anything renderable by Solid, which could be a DOM node, array of JSX elements, or functions yielding `JSX.Element`. Trying to pass unnecessary props or children will result in type errors: ```tsx // in counter.tsx const Counter: Component = () =\u003e { const [count, setCount] = createSignal(0); return ( \u003cbutton onClick={() =\u003e setCount((prev) =\u003e prev + 1)}\u003e{count()}\u003c/button\u003e ); }; // in app.tsx \u003cCounter /\u003e; // ✔️ \u003cCounter initial={5} /\u003e; // ❌: No 'initial' prop defined \u003cCounter\u003ehi\u003c/Counter\u003e; // ❌: Children aren't expected ``` #### Components with props For components that require the use of props, they can be typed using [generics](https://www.typescriptlang.org/docs/handbook/2/generics.html#handbook-content): ```tsx const InitCounter: Component\u003c{ initial: number }\u003e = (props) =\u003e { const [count, setCount] = createSignal(props.initial); return ( \u003cbutton onClick={() =\u003e setCount((prev) =\u003e prev + 1)}\u003e{count()}\u003c/button\u003e ); }; \u003cInitCounter initial={5} /\u003e; ``` #### Components with children Often, components may need to accept child elements. For this, Solid provides `ParentComponent`, which includes `children?` as an optional prop. If defining a component with the `function` keyword, `ParentProps` can be used as a helper for the props: ```tsx import { ParentComponent } from \"solid-js\"; const CustomCounter: ParentComponent = (props) =\u003e { const [count, setCount] = createSignal(0); return ( \u003cbutton onClick={() =\u003e setCount((prev) =\u003e prev + 1)}\u003e {count()} {props.children} \u003c/button\u003e ); }; ``` In this example, `props` is inferred to be of the type `{children?: JSX.Element }`, streamlining the process of defining components that can accept children. #### Special component types Solid offers subtypes for components dealing uniquely with children: - **VoidComponent:** When a component should not accept children. - **FlowComponent:** Designed for components like [`\u003cShow\u003e`](/reference/components/show) or [`\u003cFor\u003e`](/reference/components/for), typically requiring children and, occasionally, specific children types. These types make sure that the children fit the required type, maintaining consistent component behaviour. ##### Components without the `Component` types Using the `Component` types is a matter of preference over a strict requirement. Any function that takes props and returns a JSX.Element qualifies as a valid component: ```tsx // arrow function const MyComponent = (props: MyProps): JSX.Element =\u003e { ... } // function declaration function MyComponent(props: MyProps): JSX.Element { ... } // component which takes no props function MyComponent(): JSX.Element { ... } ``` It is worth noting that the `Component` types **cannot be used to create generic components**. Instead, the generics will have to be typed explicitly: ```tsx // For arrow functions, the syntax \u003cT\u003e by itself is invalid in TSX because it could be confused with JSX. const MyGenericComponent = \u003cT extends unknown\u003e( props: MyProps\u003cT\u003e ): JSX.Element =\u003e { /* ... */ }; // Using a function declaration for a generic component function MyGenericComponent\u003cT\u003e(props: MyProps\u003cT\u003e): JSX.Element { /* ... */ } ``` :::note Each `Component` type has a corresponding `Props` type that defines the shape of its properties. These `Props` types also accept the same generic types as their associated `Component` types. ::: ### Event handling #### Basics In Solid, the type for event handlers is specified as `JSX.EventHandler\u003cTElement, TEvent\u003e`. Here, `TElement` refers to the type of the element the event is linked to. `TEvent` will indicate the type of the event itself which can serve as an alternative to `(event: TEvent) =\u003e void` in the code. This approach guarantees accurate typing for `currentTarget` and `target` within the event object while also eliminating the need for inline event handlers. ```typescript import type { JSX } from \"solid-js\" // Defining an event handler using the `EventHandler` type: const onInput: JSX.EventHandler\u003cHTMLInputElement, InputEvent\u003e = (event) =\u003e { console.log(\"Input changed to\", event.currentTarget.value) } // Then attach handler to an input element: \u003cinput onInput={onInput} /\u003e ``` #### Inline handlers Defining an event handler inline within a JSX attribute automatically provides type inference and checking, eliminating the need for additional typing efforts: ```tsx \u003cinput onInput={(event) =\u003e { console.log(\"Input changed to\", event.currentTarget.value); }} /\u003e ``` #### `currentTarget` and `target` In the context of event delegation, the difference between `currentTarget` and `target` is important: - `currentTarget`: Represents the DOM element to which the event handler is attached. - `target`: Any DOM element within the hierarchy of `currentTarget` that has initiated the event. In the type signature `JSX.EventHandler\u003cT, E\u003e`, `currentTarget` will consistently have the type `T`. However, the type of target could be more generic, potentially any DOM element. For specific events like `Input` and `Focus` that are directly associated with input elements, the target will have the type `HTMLInputElement`. ### `ref` attribute #### Basics In an environment without TypeScript, using the `ref` attribute in Solid ensures that the corresponding DOM element is assigned to the variable after it is rendered: ```js let divRef; console.log(divRef); // Outputs: undefined onMount(() =\u003e { console.log(divRef); // Outputs: \u003cdiv\u003e element }); return \u003cdiv ref={divRef} /\u003e; ``` In a TypeScript environment, particularly with strict `null` checks enabled, typing these variables can be a challenge. A safe approach in TypeScript is to acknowledge that `divRef` may initially be `undefined` and to implement checks when accessing it: ```ts let divRef: HTMLDivElement | undefined // This would be flagged as an error during compilation divRef.focus() onMount(() =\u003e { if (!divRef) return divRef.focus() }) return \u003cdiv ref={divRef}\u003e...\u003c/div\u003e ``` Within the scope of the `onMount` function, which runs after rendering, you can use a non-`null` assertion (indicated by the exclamation mark `!`): ```typescript onMount(() =\u003e { divRef!.focus(); }); ``` Another approach is to bypass `null` during the assignment phase and then apply a definite assignment assertion within the `ref` attribute: ```typescript let divRef: HTMLDivElement // Compilation error as expected divRef.focus() onMount(() =\u003e { divRef.focus() }) return \u003cdiv ref={divRef!}\u003e...\u003c/div\u003e ``` In this case, using `divRef!` within the `ref` attribute signals to TypeScript that `divRef` will receive an assignment after this stage, which is more in line with how Solid works. :::note While TypeScript does catch incorrect usage of refs that occur before their JSX block definition, it currently does not identify undefined variables within certain nested functions in Solid. Therefore, additional care is needed when using `ref`s in functions such as [`createMemo`](/reference/basic-reactivity/create-memo), [`createRenderEffect`](/reference/secondary-primitives/create-render-effect), and [`createComputed`](/reference/secondary-primitives/create-computed). ::: Finally, a riskier approach involves using the definite assignment assertion right at the point of variable initialization. While this method bypasses TypeScript's assignment checks for that particular variable, it offers a quick but less secure workaround that could lead to runtime errors. ```typescript let divRef!: HTMLDivElement; // Permitted by TypeScript but will throw an error at runtime: // divRef.focus(); onMount(() =\u003e { divRef.focus(); }); ``` ## Control flow-based narrowing Control flow-based narrowing involves refining the type of a value by using control flow statements. Consider the following: ```tsx const user: User | undefined = maybeUser(); return \u003cdiv\u003e{user \u0026\u0026 user.name}\u003c/div\u003e; ``` In Solid, however, accessors cannot be narrowed in a similar way: ```tsx const [user, setUser] = createSignal\u003cUser\u003e(); return \u003cdiv\u003e{user() \u0026\u0026 user().name}\u003c/div\u003e; // ^ Object may be 'undefined'. // Using `\u003cShow\u003e`: return ( \u003cdiv\u003e \u003cShow when={user()}\u003e {user().name /* Object is possibly 'undefined' */} \u003c/Show\u003e \u003c/div\u003e ); ``` In this case, using optional chaining serves as an good alternative: ```tsx return \u003cdiv\u003e{user()?.name}\u003c/div\u003e; // Using `\u003cShow\u003e`: return ( \u003cdiv\u003e \u003cShow when={user()}\u003e {(nonNullishUser) =\u003e \u003c\u003e{nonNullishUser().name}\u003c/\u003e} \u003c/Show\u003e \u003c/div\u003e ); ``` This approach is similar to using the keyed option, but offers an accessor to prevent the recreation of children each time the `when` value changes. ```tsx return ( \u003cdiv\u003e \u003cShow keyed when={user()}\u003e {(nonNullishUser) =\u003e nonNullishUser.name} \u003c/Show\u003e \u003c/div\u003e ); ``` Note that optional chaining may not always be possible. For instance, when a `UserPanel` component exclusively requires a `User` object: ```tsx return \u003cUserPanel user={user()} /\u003e; // ^ Type 'undefined' is not assignable to type 'User'. ``` If possible, consider refactoring `UserPanel` to accept `undefined`. This minimizes the changes required when `user` goes from `undefined` to `User`. Otherwise, using Show's callback form works: ```tsx return ( \u003cShow when={user()}\u003e {(nonNullishUser) =\u003e \u003cUserPanel user={nonNullishUser()} /\u003e} \u003c/Show\u003e ); ``` Casting can also be a solution so long as the assumption is valid: ```tsx return \u003cdiv\u003e{user() \u0026\u0026 (user() as User).name}\u003c/div\u003e; ``` It's worth noting that runtime type errors may arise from doing this. This may happen when passing a type-cast value to a component, which discards information that may be nullish followed by accessing it asynchronously, such as in an event handler or timeout, or in `onCleanup`. `\u003cShow\u003e` only excludes `null`, `undefined`, and `false` from `when` when using the callback form. If the types in a union need to be differentiated, a memo or computed signal can work as an alternative solution: ```tsx type User = Admin | OtherUser; const admin = createMemo(() =\u003e { const u = user(); return u \u0026\u0026 u.type === \"admin\" ? u : undefined; }); return \u003cShow when={admin()}\u003e{(a) =\u003e \u003cAdminPanel user={a()} /\u003e}\u003c/Show\u003e; ``` The following alternative also works when using `Show`: ```tsx \u003cShow when={(() =\u003e { const u = user(); return u \u0026\u0026 u.type === \"admin\" ? u : undefined; })()} \u003e {(admin) =\u003e \u003cAdminPanel user={admin()} /\u003e} \u003c/Show\u003e ``` ## Advanced JSX attributes and directives ### Custom event handlers To handle custom events in Solid, you can use the attribute `on:___`. Typing these events requires an extension of Solid's JSX namespace. ```tsx class NameEvent extends CustomEvent { type: \"Name\"; detail: { name: string }; constructor(name: string) { super(\"Name\", { detail: { name } }); } } declare module \"solid-js\" { namespace JSX { interface CustomEvents { Name: NameEvent; // Matches `on:Name` } } } // Usage \u003cdiv on:Name={(event) =\u003e console.log(\"name is\", event.detail.name)} /\u003e; ``` :::note \u003cspan\u003eNew in v1.9.0\u003c/span\u003e ::: It is now possible to use the intersection `EventListenerObject \u0026 AddEventListenerOptions` to provide listener options as follows: ```tsx import type { JSX } from \"solid-js\" const handler: JSX.EventHandlerWithOptions\u003cHTMLDivElement, Event\u003e = { once: true, handleEvent: (event) =\u003e { console.log(\"will fire only once\"); }, } // Usage \u003cdiv on:click={handler} /\u003e; ``` :::note **Note**: By default, using native events like `mousemove` with the `on` prefix — for example, `\u003cdiv on:mousemove={e =\u003e {}} /\u003e` — will trigger a TypeScript error. This occurs because these native events are not part of Solid's custom event type definitions. To solve this, the `CustomEvents` interface can be extended to include events from the `HTMLElementEventMap`: To include all native events: ```ts declare module \"solid-js\" { namespace JSX { interface CustomEvents extends HTMLElementEventMap {} } } ``` To include specific native events, you can choose certain events (e.g. `mousemove` and `pointermove`): ```ts declare module \"solid-js\" { namespace JSX { interface CustomEvents extends Pick\u003cHTMLElementEventMap, \"mousemove\" | \"pointermove\"\u003e {} } } ``` ::: #### Forcing properties and custom attributes In Solid, the `prop:___` directive allows explicit property setting, which is useful for retaining the original data types like objects or arrays. `attr:___` directive allows custom attributes, on the other hand, and it is effective for handling string-based HTML attributes. ```ts declare module \"solid-js\" { namespace JSX { interface ExplicitProperties { count: number; name: string; } interface ExplicitAttributes { count: number; name: string; } interface ExplicitBoolAttributes { disabled: boolean; } } } // Usage \u003cInput prop:name={name()} prop:count={count()}/\u003e \u003cmy-web-component attr:name={name()} attr:count={count()} bool:disabled={true}/\u003e ``` #### Custom directives In Solid, custom directives can be applied using the `use:___` attribute, which usually accepts a target element and a JSX attribute value. The traditional `Directives` interface types these values directly (i.e. the type of `value` in `\u003cdiv use:foo={value} /\u003e`). However, the newer `DirectiveFunctions` interface takes a function type and derives the valid types for elements and values from it. There are additional considerations: - The directive function always receives a single accessor. For multiple arguments, the syntax `\u003cdiv use:foo={[a, b]} /\u003e` is an option, and an accessor to a tuple should be accepted. - The same principle holds for boolean directives, as seen in `\u003cdiv use:foo /\u003e`, and for directives with static values, like `\u003cdiv use:foo={false} /\u003e`. - `DirectiveFunctions` can accept functions that do not strictly meet the type requirements; such cases will be ignored. ```tsx function model( element: Element, // directives can be used on any HTML and SVG element value: Accessor\u003cSignal\u003cstring\u003e\u003e // second param will always be an accessor in case value being reactive ) { const [field, setField] = value(); createRenderEffect(() =\u003e (element.value = field())); element.addEventListener(\"input\", (e) =\u003e { const value = (e.target as HTMLInputElement).value; setField(value); }); } declare module \"solid-js\" { namespace JSX { interface Directives { model: Signal\u003cstring\u003e; // Corresponds to `use:model` } } } // Usage let [name, setName] = createSignal(\"\"); \u003cinput type=\"text\" use:model={[name, setName]} /\u003e; ``` In using `DirectiveFunctions`, there's the ability to check both arguments (if present) by detailing the entire function type: ```tsx function model(element: HTMLInputElement, value: Accessor\u003cSignal\u003cstring\u003e\u003e) { const [field, setField] = value(); createRenderEffect(() =\u003e (element.value = field())); element.addEventListener(\"input\", (e) =\u003e setField(e.target.value)); } function log(element: Element) { console.log(element); } let num = 0; function count() { num++; } function foo(comp: Element, args: Accessor\u003cstring[]\u003e) { // function body } declare module \"solid-js\" { namespace JSX { interface DirectiveFunctions { model: typeof model; log: typeof log; count: typeof count; foo: typeof foo; } } } ``` While the `Directives` interface can limit the value type passed via JSX attribute to the directive, the `DirectiveFunctions` interface ensures that both element and value align with the expected types, as shown below: ```tsx {/* This is correct */} \u003cinput use:model={createSignal('')} /\u003e {/* These will result in a type error */} \u003cinput use:model /\u003e \u003cinput use:model={7} /\u003e \u003cdiv use:model={createSignal('')} /\u003e ``` ##### Addressing import issues with directives If directives are imported from a separate file or module, TypeScript might mistakenly remove the import thinking it is a type. To prevent this: - Configure `onlyRemoveTypeImports: true` in `babel-preset-typescript`. - When using `vite-plugin-solid`, set `solidPlugin({ typescript: { onlyRemoveTypeImports: true } })` in `vite.config.ts`. Careful management of export type and import type is required. Including a statement in the importing module ensures TypeScript keeps the directive's import. [Tree-shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) tools usually omit this code from the final bundle. ```tsx import { directive } from \"./directives.js\" directive // prevents TypeScript's tree-shaking \u003cdiv use:directive /\u003e ```", "term_freq": { "##": 5, "###": 6, "####": 11, "#####": 2, "#default-values": 1, "\u0026\u0026": 5, "**": 3, "**cannot": 1, "**flowcomponent": 1, "**note": 1, "**note**": 1, "**voidcomponent": 1, "*/": 8, "--": 1, "---": 2, "--\u003e": 1, "--init": 1, "/*": 6, "/**": 2, "//": 32, "//developer": 1, "//github": 2, "//www": 5, "/\u003e": 26, "/directives": 1, "/mytscomponent": 1, "/reference/basic-reactivity/create-memo": 1, "/reference/components/for": 1, "/reference/components/show": 1, "/reference/secondary-primitives/create-computed": 1, "/reference/secondary-primitives/create-render-effect": 1, "/src/index": 1, "0\u003c/span\u003e": 1, "\u003c/\u003e": 2, "\u003c/body\u003e": 1, "\u003c/button\u003e": 3, "\u003c/div\u003e": 10, "\u003c/head\u003e": 1, "\u003c/html\u003e": 1, "\u003c/noscript\u003e": 1, "\u003c/show\u003e": 6, "\u003c\u003e": 2, "\u003cadminpanel": 2, "\u003cbody\u003e": 1, "\u003cbutton": 3, "\u003ccounter": 2, "\u003ccounter\u003ehi\u003c/counter\u003e": 1, "\u003cdiv": 13, "\u003cdiv\u003e": 9, "\u003cfor\u003e": 1, "\u003ch1\u003ethis": 1, "\u003chead\u003e": 1, "\u003chtml": 1, "\u003cinitcounter": 1, "\u003cinput": 7, "\u003cmy-web-component": 1, "\u003cmytscomponent": 1, "\u003cnoscript\u003eyou": 1, "\u003cscript": 1, "\u003cscript\u003e": 1, "\u003cshow": 6, "\u003cshow\u003e": 4, "\u003cspan\u003enew": 1, "\u003ct": 1, "\u003ct\u003e": 1, "\u003cuserpanel": 2, "===": 2, "=\u003e": 40, "\u003e-": 2, "\u003e\u003c/div\u003e": 1, "\u003e\u003c/script\u003e": 1, "@jsximportsource": 2, "___": 4, "ability": 1, "accept": 8, "accepted": 1, "accepts": 1, "accessible": 1, "accessing": 2, "accessor": 5, "accessor\u003cnumber": 1, "accessor\u003cnumber\u003e": 2, "accessor\u003csignal\u003cstring\u003e\u003e": 2, "accessor\u003cstring": 1, "accessor\u003cstring\u003e": 2, "accessor\u003ct\u003e": 1, "accessors": 1, "accuracy": 1, "accurate": 1, "acknowledge": 1, "actual": 1, "added": 1, "addeventlistener": 2, "addeventlisteneroptions": 1, "addition": 1, "additional": 3, "additionally": 3, "addressing": 1, "admin": 7, "advanced": 1, "advisable": 1, "after": 3, "align": 2, "all": 1, "allows": 3, "allowsyntheticdefaultimports": 1, "also": 5, "alternative": 4, "always": 6, "an": 19, "ancestor": 1, "and": 35, "annotations": 1, "another": 2, "any": 5, "anything": 1, "api": 5, "app": 2, "applied": 1, "apply": 1, "approach": 7, "architecture": 1, "are": 7, "aren": 1, "args": 1, "argument": 1, "arguments": 3, "arise": 1, "arises": 1, "array": 1, "arrays": 1, "arrow": 2, "as": 31, "as-is": 1, "assert": 1, "asserting": 1, "assertion": 3, "assignable": 1, "assigned": 2, "assignment": 6, "associated": 3, "assumption": 1, "asynchronously": 1, "at": 2, "attach": 1, "attached": 1, "attr": 3, "attribute": 10, "attributes": 4, "automatically": 2, "avoided": 3, "babel-preset-typescript": 1, "basic": 1, "basics": 3, "be": 40, "because": 4, "before": 1, "behavior": 1, "behaviour": 1, "being": 1, "below": 1, "benefits": 1, "better": 1, "between": 1, "blend": 1, "block": 1, "body": 1, "bool": 1, "boolean": 2, "both": 4, "box": 1, "built-in": 1, "bundle": 1, "but": 5, "by": 17, "bypass": 1, "bypasses": 1, "callback": 4, "called": 2, "calling": 2, "calls": 1, "can": 24, "cannot": 2, "care": 1, "careful": 1, "case": 5, "cases": 1, "casting": 1, "catch": 1, "certain": 2, "chaining": 2, "challenge": 1, "change": 1, "changed": 2, "changes": 2, "check": 1, "checking": 1, "checks": 3, "child": 1, "children": 13, "choose": 1, "class": 1, "clearer": 1, "click=": 1, "code": 6, "collaboration": 1, "com/solidjs/solid-docs/blob/head/src/routes/configuration/typescript": 1, "com/solidjs/templates/": 1, "command": 1, "common": 1, "comp": 1, "compilation": 2, "compiler": 1, "compileroptions": 2, "complex": 1, "component": 22, "component\u003c": 1, "component\u003c/h1\u003e": 1, "component\u003cmyprops\u003e": 1, "component\u003cp\u003e": 1, "components": 10, "components**": 1, "computed": 1, "config": 1, "configuration": 2, "configure": 2, "configuring": 1, "confused": 1, "consider": 2, "considerations": 1, "consistent": 1, "consistently": 1, "console": 7, "const": 31, "constructor": 1, "contained": 1, "contents": 1, "context": 14, "context\u003c": 1, "context\u003cdata": 2, "context\u003cdata\u003e": 1, "contextprovider": 1, "control": 3, "correct": 1, "correspond": 2, "corresponding": 3, "corresponds": 2, "could": 5, "count": 23, "count=": 2, "counter": 2, "countname": 3, "countnamecontext": 2, "countnamecontexttype": 3, "create": 2, "createcomputed": 1, "createcontext": 2, "createcontext\u003ccountnamecontexttype\u003e": 1, "createcontext\u003ct\u003e": 1, "creatememo": 2, "createrendereffect": 3, "createsignal": 12, "createsignal\u003cnumber\u003e": 1, "createsignal\u003ct\u003e": 2, "createsignal\u003cuser\u003e": 1, "current": 1, "currently": 1, "currenttarget": 8, "custom": 7, "customcounter": 1, "customevent": 1, "customevents": 4, "data": 4, "datacontext": 5, "dealing": 1, "declaration": 2, "declare": 6, "default": 10, "defined": 4, "defines": 1, "defining": 4, "definite": 2, "definition": 1, "definitions": 2, "delegation": 1, "denotes": 1, "dependencies": 1, "depending": 1, "derives": 1, "description": 1, "designates": 1, "designed": 1, "detail": 3, "detailing": 1, "details": 1, "determine": 1, "determined": 1, "determines": 1, "developers": 2, "development": 2, "difference": 1, "differentiated": 1, "direct": 1, "directive": 8, "directivefunctions": 5, "directives": 11, "directly": 5, "disabled": 1, "disabled=": 1, "discards": 1, "distinguish": 1, "diverse": 1, "divref": 20, "do": 1, "doctype": 1, "documentation": 3, "does": 2, "doing": 1, "dom": 5, "during": 2, "e\u003e": 1, "each": 2, "eager": 1, "easier": 1, "echoing": 1, "effective": 1, "efforts": 1, "either": 1, "element": 30, "elements": 4, "eliminated": 1, "eliminating": 2, "en": 1, "enable": 1, "enabled": 1, "enhanced": 1, "enhances": 1, "ensures": 3, "entire": 1, "entry": 1, "environment": 2, "equivalent": 1, "error": 7, "errors": 3, "esmoduleinterop": 1, "esnext": 2, "essentially": 2, "event": 22, "event\u003e": 1, "eventhandler": 1, "eventhandler\u003chtmlinputelement": 1, "eventhandler\u003ct": 1, "eventhandler\u003ctelement": 1, "eventhandlerwithoptions\u003chtmldivelement": 1, "eventlistenerobject": 1, "events": 9, "everything": 1, "example": 4, "exclamation": 1, "excludes": 1, "exclusively": 1, "executed": 1, "existing": 1, "exists": 1, "expected": 4, "explicit": 3, "explicitattributes": 1, "explicitboolattributes": 1, "explicitly": 1, "explicitproperties": 1, "export": 5, "extended": 1, "extends": 4, "extension": 2, "facilitates": 2, "factory": 1, "failures": 1, "false": 2, "field": 4, "file": 5, "file-level": 1, "files": 2, "final": 1, "finally": 1, "fire": 1, "fit": 1, "flagged": 1, "flexibility": 1, "flow": 1, "flow-based": 2, "focus": 8, "followed": 1, "following": 4, "follows": 1, "foo": 4, "foo=": 3, "for": 33, "forcing": 1, "form": 5, "forming": 1, "from": 20, "fully": 1, "function": 29, "functions": 7, "generate": 2, "generic": 5, "generically": 1, "generics": 2, "get": 2, "getter": 1, "getter-setter": 1, "github": 1, "github-document": 1, "giving": 1, "goes": 1, "good": 1, "guarantees": 1, "hand": 1, "handle": 1, "handleevent": 1, "handler": 7, "handlers": 4, "handling": 3, "happen": 1, "has": 6, "have": 3, "having": 1, "heighten": 1, "helper": 1, "helpful": 1, "here": 2, "hierarchy": 2, "holds": 1, "how": 1, "however": 3, "html": 4, "html#handbook-content": 1, "html#return-type-annotations": 1, "html#tuple-types": 1, "html\u003e": 1, "htmldivelement": 3, "htmlelementeventmap": 2, "htmlinputelement": 3, "https": 8, "id=": 1, "ide": 1, "identify": 1, "if": 14, "ignored": 1, "implement": 1, "import": 13, "important": 1, "importantly": 1, "imported": 1, "importing": 1, "in": 54, "include": 3, "included": 1, "includes": 1, "including": 1, "incompatible": 1, "incorrect": 1, "index": 2, "indicate": 1, "indicated": 1, "inference": 2, "inferred": 1, "information": 1, "initcounter": 1, "initial": 5, "initial=": 2, "initialcount": 2, "initialization": 1, "initialized": 1, "initially": 1, "initialname": 2, "initiated": 1, "inline": 3, "input": 8, "inputevent\u003e": 1, "inside": 1, "install": 1, "instance": 1, "instead": 1, "integrated": 1, "integrating": 1, "intended": 1, "interaction": 1, "interface": 13, "interpretation": 1, "intersection": 1, "into": 4, "introduction": 1, "invalid": 1, "invoking": 1, "involves": 2, "is": 52, "isolatedmodules": 1, "issues": 1, "it": 22, "its": 7, "itself": 2, "javascript": 8, "js": 2, "json": 7, "jsx": 46, "jsximportsource": 4, "just": 1, "keeps": 1, "keyed": 2, "keyword": 1, "lang=": 1, "large": 1, "lead": 2, "learn": 1, "less": 2, "let": 6, "leverages": 1, "leveraging": 1, "like": 8, "limit": 1, "line": 1, "linked": 1, "listener": 1, "log": 10, "long": 1, "look": 1, "maintaining": 1, "majority": 1, "make": 4, "makecountnamecontext": 2, "makecountnamecontext\u003e": 1, "makes": 1, "making": 1, "management": 1, "mark": 1, "match": 1, "matches": 1, "matter": 1, "may": 11, "maybeuser": 1, "mdx": 1, "meaning": 1, "means": 3, "meet": 1, "memo": 1, "method": 1, "might": 1, "migrate": 1, "migrating": 2, "migration": 1, "minimizes": 1, "mirrors": 1, "mistakenly": 1, "model": 7, "model=": 4, "modify": 1, "module": 10, "moduleresolution": 1, "more": 4, "moreover": 1, "mousemove": 3, "mousemove=": 1, "mozilla": 1, "much": 1, "multiple": 1, "mycomponent": 4, "mygenericcomponent": 1, "mygenericcomponent\u003ct\u003e": 1, "myjscomponent": 1, "myprops": 2, "myprops\u003ct\u003e": 2, "mytscomponent": 3, "name": 30, "name=": 3, "nameevent": 2, "namespace": 7, "narrowed": 1, "narrowing": 2, "native": 4, "need": 7, "needed": 1, "needs": 1, "nested": 1, "new": 3, "newer": 1, "no": 3, "node": 2, "noemit": 1, "non-": 1, "non-null": 1, "nonnullishuser": 6, "not": 10, "note": 6, "noting": 2, "now": 1, "null": 4, "nullish": 1, "num": 1, "num++": 1, "number": 9, "object": 5, "objects": 1, "occasionally": 1, "occur": 1, "occurs": 1, "of": 40, "offer": 1, "offers": 4, "often": 1, "omit": 1, "on": 10, "once": 2, "oncleanup": 1, "onclick=": 3, "oninput": 2, "oninput=": 2, "only": 2, "onlyremovetypeimports": 2, "onmount": 6, "operation": 1, "opting": 1, "option": 2, "optional": 3, "options": 1, "or": 13, "org/": 1, "org/docs/handbook/2/everyday-types": 2, "org/docs/handbook/2/generics": 1, "org/docs/handbook/2/objects": 1, "org/en-us/docs/glossary/tree_shaking": 1, "original": 2, "other": 1, "otheruser": 1, "otherwise": 1, "out": 1, "outputs": 2, "over": 1, "overrides": 1, "package-exec": 1, "package-install-dev": 1, "param": 1, "parameter": 1, "parameterized": 1, "parentcomponent": 3, "parentprops": 1, "part": 1, "particular": 1, "particularly": 1, "pass": 1, "passed": 4, "passing": 1, "permitted": 1, "perpetually": 1, "phase": 1, "pick\u003chtmlelementeventmap": 1, "point": 2, "pointermove": 2, "possibility": 1, "possible": 5, "possibly": 1, "potentially": 1, "pragma": 1, "pragmas": 1, "predictability": 1, "preferable": 2, "preference": 1, "prefix": 1, "present": 2, "preserve": 3, "prev": 6, "prevent": 2, "prevents": 1, "previous": 1, "primed": 1, "principle": 1, "process": 1, "project": 4, "projects": 2, "prop": 5, "properties": 2, "property": 1, "props": 19, "provide": 2, "provided": 1, "provider": 1, "provides": 3, "providing": 2, "qualifies": 1, "quick": 1, "react": 6, "reactive": 1, "readable": 1, "receive": 2, "receives": 1, "recommended": 1, "recreation": 1, "ref": 5, "ref=": 3, "refactoring": 1, "reference": 1, "refers": 1, "refining": 1, "refs": 1, "reliability": 2, "reliable": 1, "remove": 1, "renderable": 1, "rendered": 1, "rendering": 1, "represents": 2, "require": 1, "required": 3, "requirement": 1, "requirements": 1, "requires": 2, "requiring": 1, "resemble": 1, "reset": 1, "resolves": 1, "respectively": 1, "result": 4, "resulting": 1, "retaining": 1, "retains": 1, "retrieve": 1, "return": 28, "returned": 2, "returning": 1, "returns": 2, "returntype": 1, "returntype\u003ctypeof": 1, "right": 1, "riskier": 1, "root": 1, "run": 2, "runs": 1, "runtime": 3, "safe": 1, "safety": 2, "same": 2, "scenarios": 1, "scope": 1, "seamless": 2, "second": 1, "secure": 1, "seen": 1, "separate": 1, "serve": 1, "serves": 1, "set": 3, "setcount": 13, "setfield": 4, "setname": 6, "setsignal": 1, "setter": 6, "setter\u003cnumber": 1, "setter\u003cnumber\u003e": 1, "setter\u003cstring\u003e": 1, "setter\u003ct\u003e": 1, "setting": 1, "settings": 1, "setup": 2, "setuser": 1, "several": 1, "shape": 1, "should": 5, "show": 2, "shown": 1, "sidebar": 1, "signal": 9, "signal\u003cnumber": 1, "signal\u003cstring\u003e": 1, "signal\u003ct\u003e": 1, "signals": 4, "signature": 2, "signifies": 1, "silent": 1, "similar": 2, "since": 1, "single": 1, "situations": 1, "so": 1, "sole": 1, "solid": 25, "solid-js": 16, "solidjs": 1, "solidplugin": 1, "solution": 2, "solve": 1, "some": 2, "source": 1, "sources": 1, "special": 1, "specific": 5, "specification": 1, "specified": 1, "specifying": 1, "src": 1, "src=": 1, "stage": 1, "standard": 1, "started": 1, "state": 1, "statement": 1, "statements": 1, "static": 3, "store": 2, "streamlining": 1, "strict": 3, "strictly": 1, "string": 7, "string-based": 1, "structure": 1, "subtypes": 1, "such": 4, "super": 1, "superset": 1, "supplying": 1, "support": 1, "sure": 2, "svg": 1, "syntax": 3, "tab": 1, "tag": 1, "tags": 1, "take": 1, "takes": 3, "target": 10, "team": 1, "telement": 1, "templates": 1, "test": 1, "tevent": 2, "tevent\u003e": 1, "text": 1, "that": 31, "the": 161, "their": 2, "then": 3, "there": 4, "therefore": 2, "these": 8, "they": 1, "thinking": 1, "this": 33, "through": 1, "throw": 2, "throwing": 1, "time": 1, "timeout": 1, "title": 1, "to": 75, "tooling": 1, "tools": 1, "traditional": 1, "transformation": 2, "transitioning": 1, "translates": 1, "tree-shaking": 2, "trigger": 1, "true": 9, "trying": 1, "ts": 8, "tsc": 1, "tsconfig": 5, "tsx": 33, "tuple": 2, "type": 68, "type-cast": 1, "type=": 2, "typed": 4, "typeof": 4, "types": 24, "typescript": 45, "typescriptlang": 5, "typical": 1, "typically": 1, "typing": 5, "undefined": 29, "undefined\u003e": 5, "understands": 1, "understood": 1, "uninitialized": 1, "union": 1, "uniquely": 1, "unknown\u003e": 1, "unnecessary": 1, "update": 1, "usage": 5, "use": 21, "use_cases": 1, "usecontext": 4, "usecountnamecontext": 3, "used": 5, "useful": 1, "user": 24, "user=": 4, "userpanel": 2, "uses": 1, "using": 28, "usually": 2, "v1": 1, "valid": 3, "value": 35, "values": 8, "variable": 3, "variables": 2, "version": 1, "via": 1, "vital": 1, "vite": 1, "vite-plugin-solid": 1, "vite/client": 1, "void": 1, "was": 2, "way": 1, "we": 1, "when": 16, "when=": 6, "where": 2, "whether": 1, "which": 18, "while": 7, "will": 22, "wish": 1, "with": 20, "within": 9, "without": 5, "won": 1, "work": 1, "workaround": 1, "works": 3, "worth": 2, "would": 1, "written": 1, "yield": 1, "yielding": 1, "you": 6, "your": 3, "—": 2, "✔️": 1, "❌": 2 }, "length": 3453 }, { "id": "774af7d8169c81323c5ee913", "doc_id": "0f4f295f7628e3fede277581", "title": "understanding-jsx", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/understanding-jsx.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/understanding-jsx.json", "content": "--- title: Understanding JSX order: 2 use_cases: \u003e- writing components, html in javascript, dynamic content, templating, props passing, event handling tags: - jsx - components - templates - props - html - syntax version: '1.0' description: \u003e- Write HTML-like syntax in JavaScript with JSX to create reactive components with dynamic expressions and event handlers. --- JSX is an extension for JavaScript. It allows you to write HTML-like code inside your JavaScript file which keeps your rendering logic and content in the same place. This provides a concise and readable way to create and represent components. ## How Solid uses JSX Solid was designed to align closely with HTML standards. ```jsx const element = \u003ch1\u003eI'm JSX!!\u003c/h1\u003e ``` It offers a distinct advantage, however: to copy/paste solutions from resources like Stack Overflow; and to allow direct usage of templates from design tools. Solid sets itself apart by using JSX immediately as it returns [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) elements. This lets you use dynamic expressions within your HTML by allowing variables and functions to be references with the use of curly braces (`{ }`): ```jsx const Component = () =\u003e { const animal = { breed: \"cat\", name: \"Midnight\" } return ( \u003cp\u003e I have a {animal.breed} named {animal.name}! \u003c/p\u003e ) } ``` This means JavaScript content can be rendered on web pages based on an application's state or logic. Additionally, Solid's [reactive](/concepts/intro-to-reactivity) system introduces [fine-grained reactivity](/advanced-concepts/fine-grained-reactivity) with JSX. This updates only the necessary parts of the DOM when changes occur in the underlying state. ## Using JSX in Solid ### Return a single root element Where HTML lets you have disconnected tags at the top level, JSX requires that a component to return a single root element. :::advanced When working with JSX, parts of your code are translated into structured HTML that is placed at the start of the file. Static elements are processed differently from dynamic ones, which might change based on data or user actions. For dynamic elements, special markers are added for better handling during rendering. Having a single root creates a consistent and manageable hierarchy to optimize rendering and updates. ::: JSX maintains the familiar nested, tree-like structure found in HTML. As a result, parent-child relationships between elements become easier to follow. ### Close all tags Self-closing tags are a must in JSX. Unlike in HTML, where elements like `\u003cinput\u003e`, `\u003cimg\u003e`, or `\u003cbr\u003e` don't require explicit closure, JSX requires consistent self-closing tags. This helps to avoid potential rendering issues. ```jsx \u003cimg src=\"./image-here.png\" /\u003e ``` ### Properties vs. attributes HTML attributes and JSX properties may seem similar, but they serve different purposes and behave differently. Both offer ways to specify configurations or pass information. However, HTML is used for standard web content and JSX creates Solid's component logic. #### HTML attributes [HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) are values set directly on HTML elements. They provide additional information about an element to guide its initial behavior and state. These attributes are often translated into properties on DOM objects once the browser parses the HTML. In JSX files, HTML attributes are used much like regular HTML, with a few key differences due to the blend of HTML and JavaScript: - Event listeners such as `onClick` can be in camelCase or lowercase. (**Note:** When using ESLint, you will get a warning if you use lowercase.) - In cases where you can dynamically specify a value, you can replace the `\"` and `\"` with curly braces (`{ }`): ```jsx \u003cbutton class=\"myClass\" onClick={handleClick}\u003e Click me! \u003c/button\u003e ``` :::note If you wish to pass objects in JSX, such as with inline styling, you will have to use double curly braces (`{{ }}`). ```jsx \u003cbutton style={{ color: 'red', font-size: '2rem', }}\u003e Click me! \u003c/button\u003e ``` ::: ### JSX properties (props) JSX properties, commonly known as \"props,\" help with the passing of data and configurations to components within an application. They connect the component with the data it requires, for seamless data flows and dynamic interactions. #### Core concepts - **Static props**: In Solid's JSX, static props are integrated directly into the HTML by cloning the template and using them as attributes. - **Dynamic props**: Dynamic props rely on state, allowing the content or properties to be dynamic. An example is changing the style of an element in response to interactions within an application. This can be expressed in the form of signals (`value={value()}`). - **Data transfer**: Props are also used to fill components with data that comes from resources, like [`createResource`](/reference/basic-reactivity/create-resource) calls. This results in components that react in real-time to data changes. :::note Expressions, whether fixed or dynamic, get applied *in the order defined within the JSX*. This works for a wide range of DOM elements, but will not work with elements that require attributes to be defined in a special order, such as input types with `type='range'`. When order influences an element's behavior, users must define the expressions in the order that the element is expected. ::: For how to use props effectively in Solid, explore the [props page](/concepts/components/props).", "term_freq": { "##": 2, "###": 4, "####": 2, "**": 1, "**data": 1, "**dynamic": 1, "**note": 1, "**static": 1, "*in": 1, "---": 2, "//developer": 2, "//github": 1, "/\u003e": 1, "/advanced-concepts/fine-grained-reactivity": 1, "/concepts/components/props": 1, "/concepts/intro-to-reactivity": 1, "/image-here": 1, "/reference/basic-reactivity/create-resource": 1, "2rem": 1, "\u003c/button\u003e": 2, "\u003c/h1\u003e": 1, "\u003c/p\u003e": 1, "\u003cbr\u003e": 1, "\u003cbutton": 2, "\u003ch1\u003ei": 1, "\u003cimg": 1, "\u003cimg\u003e": 1, "\u003cinput\u003e": 1, "\u003cp\u003e": 1, "=\u003e": 1, "\u003e-": 2, "about": 1, "actions": 1, "added": 1, "additional": 1, "additionally": 1, "advanced": 1, "advantage": 1, "align": 1, "all": 1, "allow": 1, "allowing": 2, "allows": 1, "also": 1, "an": 8, "and": 17, "animal": 3, "apart": 1, "application": 3, "applied": 1, "are": 9, "as": 7, "at": 2, "attributes": 8, "avoid": 1, "based": 2, "be": 6, "become": 1, "behave": 1, "behavior": 2, "better": 1, "between": 1, "blend": 1, "both": 1, "braces": 3, "breed": 2, "browser": 1, "but": 2, "by": 3, "calls": 1, "camelcase": 1, "can": 5, "cases": 1, "cat": 1, "change": 1, "changes": 2, "changing": 1, "class=": 1, "click": 2, "cloning": 1, "close": 1, "closely": 1, "closure": 1, "code": 2, "color": 1, "com/solidjs/solid-docs/blob/head/src/routes/concepts/understanding-jsx": 1, "comes": 1, "commonly": 1, "component": 4, "components": 7, "concepts": 1, "concise": 1, "configurations": 2, "connect": 1, "consistent": 2, "const": 3, "content": 5, "copy/paste": 1, "core": 1, "create": 2, "createresource": 1, "creates": 2, "curly": 3, "data": 6, "define": 1, "defined": 2, "description": 1, "design": 1, "designed": 1, "differences": 1, "different": 1, "differently": 2, "direct": 1, "directly": 2, "disconnected": 1, "distinct": 1, "dom": 4, "don": 1, "double": 1, "due": 1, "during": 1, "dynamic": 9, "dynamically": 1, "easier": 1, "effectively": 1, "element": 7, "elements": 8, "eslint": 1, "event": 3, "example": 1, "expected": 1, "explicit": 1, "explore": 1, "expressed": 1, "expressions": 4, "extension": 1, "familiar": 1, "few": 1, "file": 2, "files": 1, "fill": 1, "fine-grained": 1, "fixed": 1, "flows": 1, "follow": 1, "font-size": 1, "for": 7, "form": 1, "found": 1, "from": 4, "functions": 1, "get": 2, "github-document": 1, "guide": 1, "handleclick": 1, "handlers": 1, "handling": 2, "have": 3, "having": 1, "help": 1, "helps": 1, "hierarchy": 1, "how": 2, "however": 2, "html": 18, "html-like": 2, "https": 3, "if": 2, "immediately": 1, "in": 20, "influences": 1, "information": 2, "initial": 1, "inline": 1, "input": 1, "inside": 1, "integrated": 1, "interactions": 2, "into": 3, "introduces": 1, "is": 5, "issues": 1, "it": 4, "its": 1, "itself": 1, "javascript": 6, "jsx": 26, "jsx*": 1, "keeps": 1, "key": 1, "known": 1, "lets": 2, "level": 1, "like": 4, "listeners": 1, "logic": 3, "lowercase": 2, "maintains": 1, "manageable": 1, "markers": 1, "may": 1, "mdx": 1, "me": 2, "means": 1, "midnight": 1, "might": 1, "mozilla": 2, "much": 1, "must": 2, "myclass": 1, "name": 2, "named": 1, "necessary": 1, "nested": 1, "not": 1, "note": 2, "objects": 2, "occur": 1, "of": 10, "offer": 1, "offers": 1, "often": 1, "on": 6, "once": 1, "onclick": 1, "onclick=": 1, "ones": 1, "only": 1, "optimize": 1, "or": 7, "order": 5, "org/en-us/docs/web/api/document_object_model/introduction": 1, "org/en-us/docs/web/html/attributes": 1, "overflow": 1, "page": 1, "pages": 1, "parent-child": 1, "parses": 1, "parts": 2, "pass": 2, "passing": 2, "place": 1, "placed": 1, "png": 1, "potential": 1, "processed": 1, "properties": 6, "props": 9, "props**": 2, "provide": 1, "provides": 1, "purposes": 1, "range": 2, "react": 1, "reactive": 2, "reactivity": 1, "readable": 1, "real-time": 1, "red": 1, "references": 1, "regular": 1, "relationships": 1, "rely": 1, "rendered": 1, "rendering": 4, "replace": 1, "represent": 1, "require": 2, "requires": 3, "resources": 2, "response": 1, "result": 1, "results": 1, "return": 3, "returns": 1, "root": 3, "same": 1, "seamless": 1, "seem": 1, "self-closing": 2, "serve": 1, "set": 1, "sets": 1, "signals": 1, "similar": 1, "single": 3, "solid": 8, "solutions": 1, "special": 2, "specify": 2, "src=": 1, "stack": 1, "standard": 1, "standards": 1, "start": 1, "state": 4, "static": 2, "structure": 1, "structured": 1, "style": 1, "style=": 1, "styling": 1, "such": 3, "syntax": 2, "system": 1, "tags": 5, "template": 1, "templates": 2, "templating": 1, "that": 6, "the": 27, "them": 1, "these": 1, "they": 3, "this": 8, "title": 1, "to": 23, "tools": 1, "top": 1, "transfer**": 1, "translated": 2, "tree-like": 1, "type=": 1, "types": 1, "underlying": 1, "understanding": 1, "understanding-jsx": 1, "unlike": 1, "updates": 2, "usage": 1, "use": 5, "use_cases": 1, "used": 3, "user": 1, "users": 1, "uses": 1, "using": 4, "value": 2, "value=": 1, "values": 1, "variables": 1, "version": 1, "vs": 1, "warning": 1, "was": 1, "way": 1, "ways": 1, "web": 2, "when": 4, "where": 3, "whether": 1, "which": 2, "wide": 1, "will": 3, "wish": 1, "with": 14, "within": 4, "work": 1, "working": 1, "works": 1, "write": 2, "writing": 1, "you": 9, "your": 4 }, "length": 801 }, { "id": "c6ef70b33019b119a54a3fbf", "doc_id": "250f7b5e3a8ef7a2c3655539", "title": "uno", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/uno.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/uno.json", "content": "--- title: UnoCSS order: 6 mainNavExclude: true use_cases: \u003e- styling components, utility css, on-demand styles, vite integration, atomic css tags: - styling - css - unocss - vite - utilities version: '1.0' description: \u003e- Integrate UnoCSS with Solid for on-demand utility CSS. Configure Vite plugin, import styles, and create efficient atomic CSS designs quickly. --- [UnoCSS](https://unocss.dev/) is an on-demand utility CSS library that integrates seamlessly with Solid as a Vite plugin. ## Install Vite plugin To get started with UnoCSS in your Solid app: ```package-install-dev unocss ``` ## Import Vite plugin After installation, open your `vite.config.js` or `vite.config.ts`. The default Solid Vite configuration looks like this: ```jsx import { defineConfig } from \"vite\"; import solidPlugin from \"vite-plugin-solid\"; export default defineConfig({ plugins: [solidPlugin()], server: { port: 3000, }, build: { target: \"esnext\", }, }); ``` Now, import `unocssPlugin` from \"unocss/vite\" and add it to the plugins array: ```jsx import { defineConfig } from \"vite\"; import unocssPlugin from \"unocss/vite\"; import solidPlugin from \"vite-plugin-solid\"; export default defineConfig({ plugins: [unocssPlugin(), solidPlugin()], server: { port: 3000, }, build: { target: \"esnext\", }, }); ``` Ensure that `unocssPlugin` is ordered before `solidPlugin` to prevent certain edge cases. ## Import UnoCSS In your root `index.jsx` or `index.tsx` file, import UnoCSS: ```jsx /* @refresh reload */ import \"uno.css\" import { render } from \"solid-js/web\" import \"./index.css\" import App from \"./App\" render(() =\u003e \u003cApp /\u003e, document.getElementById('root') as HTMLElement); ``` Alternatively, you can use the alias `import \"virtual:uno.css\"`: ```jsx /* @refresh reload */ import \"virtual:uno.css\" import { render } from \"solid-js/web\" import \"./index.css\" import App from \"./App\" render(() =\u003e \u003cApp /\u003e, document.getElementById('root') as HTMLElement); ``` #### Support For additional assistance, refer to the [UnoCSS/Vite integration guide](https://unocss.dev/integrations/vite) .", "term_freq": { "##": 3, "####": 1, "*/": 2, "---": 2, "/*": 2, "//github": 1, "//unocss": 2, "/\u003e": 2, "/app": 2, "/index": 2, "3000": 2, "\u003capp": 2, "=\u003e": 2, "\u003e-": 2, "@refresh": 2, "add": 1, "additional": 1, "after": 1, "alias": 1, "alternatively": 1, "an": 1, "and": 2, "app": 3, "array": 1, "as": 3, "assistance": 1, "atomic": 2, "before": 1, "build": 2, "can": 1, "cases": 1, "certain": 1, "com/solidjs/solid-docs/blob/head/src/routes/guides/styling-components/uno": 1, "components": 1, "config": 2, "configuration": 1, "configure": 1, "create": 1, "css": 11, "default": 3, "defineconfig": 4, "description": 1, "designs": 1, "dev/": 1, "dev/integrations/vite": 1, "document": 2, "edge": 1, "efficient": 1, "ensure": 1, "esnext": 2, "export": 2, "file": 1, "for": 2, "from": 10, "get": 1, "getelementbyid": 2, "github-document": 1, "guide": 1, "htmlelement": 2, "https": 3, "import": 19, "in": 2, "index": 2, "install": 1, "installation": 1, "integrate": 1, "integrates": 1, "integration": 2, "is": 2, "it": 1, "js": 1, "jsx": 5, "library": 1, "like": 1, "looks": 1, "mainnavexclude": 1, "mdx": 1, "now": 1, "on-demand": 3, "open": 1, "or": 2, "order": 1, "ordered": 1, "package-install-dev": 1, "plugin": 4, "plugins": 3, "port": 2, "prevent": 1, "quickly": 1, "refer": 1, "reload": 2, "render": 4, "root": 3, "seamlessly": 1, "server": 2, "solid": 4, "solid-js/web": 2, "solidplugin": 5, "started": 1, "styles": 2, "styling": 2, "support": 1, "tags": 1, "target": 2, "that": 2, "the": 4, "this": 1, "title": 1, "to": 4, "true": 1, "ts": 1, "tsx": 1, "uno": 4, "unocss": 8, "unocss/vite": 3, "unocssplugin": 4, "use": 1, "use_cases": 1, "utilities": 1, "utility": 3, "version": 1, "virtual": 2, "vite": 11, "vite-plugin-solid": 2, "with": 3, "you": 1, "your": 3 }, "length": 274 }, { "id": "68a285d635ddecb5c62f9ca2", "doc_id": "cec3b24053a39083c7fd6670", "title": "untrack", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/untrack.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/untrack.json", "content": "--- title: untrack use_cases: \u003e- static values, initial values, default props, performance optimization, non-reactive access tags: - tracking - performance - props - reactivity - optimization - defaults version: '1.0' description: \u003e- Prevent dependency tracking for static values in SolidJS. Optimize performance by excluding non-updating props from reactive tracking scope. --- Ignores tracking any of the dependencies in the executing code block and returns the value. This helper is useful when a certain `prop` will never update and thus it is ok to use it outside of the tracking scope. ```tsx title=\"component.tsx\" import { untrack } from \"solid-js\" export function Component(props) { const value = untrack(() =\u003e props.value) return \u003cdiv\u003e{value}\u003c/div\u003e } } ``` ## Initial and Default Values It is not necessary to manually untrack values that are suppose to serve as a default or initial value to a signal. Even with the linter configured to enforce tracking, the linter will accept it when a `prop` is prefixed with `default` or `initial` as it is a common pattern to use them as such. ```tsx tab title=\"initialValue\" {5} // component.tsx import { createSignal } from \"solid-js\" export function Component(props) { const [name, setName] = createSignal(props.initialName) return \u003cdiv\u003e{name()}\u003c/div\u003e } } ``` ```tsx tab title=\"defaultValue\" {5} // component.tsx import { createSignal } from \"solid-js\" export function Component(props) { const [name, setName] = createSignal(props.defaultName) return \u003cdiv\u003e{name()}\u003c/div\u003e } } ```", "term_freq": { "##": 1, "---": 2, "//": 2, "//github": 1, "\u003c/div\u003e": 3, "\u003cdiv\u003e": 3, "=\u003e": 1, "\u003e-": 2, "accept": 1, "access": 1, "and": 3, "any": 1, "are": 1, "as": 3, "block": 1, "by": 1, "certain": 1, "code": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/untrack": 1, "common": 1, "component": 6, "configured": 1, "const": 3, "createsignal": 4, "default": 4, "defaultname": 1, "defaults": 1, "defaultvalue": 1, "dependencies": 1, "dependency": 1, "description": 1, "enforce": 1, "even": 1, "excluding": 1, "executing": 1, "export": 3, "for": 1, "from": 4, "function": 3, "github-document": 1, "helper": 1, "https": 1, "ignores": 1, "import": 3, "in": 2, "initial": 4, "initialname": 1, "initialvalue": 1, "is": 5, "it": 5, "linter": 2, "manually": 1, "mdx": 1, "name": 4, "necessary": 1, "never": 1, "non-reactive": 1, "non-updating": 1, "not": 1, "of": 2, "ok": 1, "optimization": 2, "optimize": 1, "or": 2, "outside": 1, "pattern": 1, "performance": 3, "prefixed": 1, "prevent": 1, "prop": 2, "props": 9, "reactive": 1, "reactivity": 1, "return": 3, "returns": 1, "scope": 2, "serve": 1, "setname": 2, "signal": 1, "solid-js": 3, "solidjs": 1, "static": 2, "such": 1, "suppose": 1, "tab": 2, "tags": 1, "that": 1, "the": 6, "them": 1, "this": 1, "thus": 1, "title": 1, "title=": 3, "to": 6, "tracking": 6, "tsx": 6, "untrack": 5, "update": 1, "use": 2, "use_cases": 1, "useful": 1, "value": 5, "values": 5, "version": 1, "when": 2, "will": 2, "with": 2 }, "length": 216 }, { "id": "59aef88ab0a624a5e2a9434b", "doc_id": "7ad4913532d41928d5440af4", "title": "unwrap", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/store-utilities/unwrap.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/unwrap.json", "content": "--- title: unwrap use_cases: \u003e- raw data access, proxy removal, debugging, third-party integration, data serialization tags: - store - proxy - data - debugging - utilities version: '1.0' description: \u003e- Extract raw data from Solid stores without proxy wrapping. Essential for debugging, serialization, or third-party integrations. --- `unwrap` returns the underlying data in the store without a proxy. ```tsx import { unwrap } from \"solid-js/store\" import type { Store } from \"solid-js/store\" function unwrap(store: Store\u003cT\u003e): T ```", "term_freq": { "---": 2, "//github": 1, "\u003e-": 2, "access": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/store-utilities/unwrap": 1, "data": 5, "debugging": 3, "description": 1, "essential": 1, "extract": 1, "for": 1, "from": 3, "function": 1, "github-document": 1, "https": 1, "import": 2, "in": 1, "integration": 1, "integrations": 1, "mdx": 1, "or": 1, "proxy": 4, "raw": 2, "removal": 1, "returns": 1, "serialization": 2, "solid": 1, "solid-js/store": 2, "store": 4, "store\u003ct\u003e": 1, "stores": 1, "tags": 1, "the": 2, "third-party": 2, "title": 1, "tsx": 1, "type": 1, "underlying": 1, "unwrap": 5, "use_cases": 1, "utilities": 1, "version": 1, "without": 2, "wrapping": 1 }, "length": 71 }, { "id": "595e41f6e7e51b615a00b45f", "doc_id": "cd89b93453b5d0cc2454884d", "title": "Upgrading to v2 | Remix", "url": "https://v2.remix.run/docs/start/v2", "type": "html", "source": "remix:does", "path": "devour_data/docs/upgrading-to-v2---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsUpgrading to v2Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite On this pageremix devremix-serveCustom app serverAfter upgrading from v1 to v2File System Route ConventionRoute headersRoute metaCatchBoundary and ErrorBoundaryformMethoduseTransitionuseFetcherLinks imagesizes and imagesrcsetbrowserBuildDirectorydevServerBroadcastDelaydevServerPortserverBuildDirectoryserverBuildTargetserverModuleFormatbrowserNodeBuiltinsPolyfillserverNodeBuiltinsPolyfillinstallGlobalsRemoval of exported polyfillssource-map-supportNetlify adapterVercel adapterBuilt-in PostCSS/Tailwind supportTroubleshootingESM / CommonJS ErrorsOn this pageremix devremix-serveCustom app serverAfter upgrading from v1 to v2File System Route ConventionRoute headersRoute metaCatchBoundary and ErrorBoundaryformMethoduseTransitionuseFetcherLinks imagesizes and imagesrcsetbrowserBuildDirectorydevServerBroadcastDelaydevServerPortserverBuildDirectoryserverBuildTargetserverModuleFormatbrowserNodeBuiltinsPolyfillserverNodeBuiltinsPolyfillinstallGlobalsRemoval of exported polyfillssource-map-supportNetlify adapterVercel adapterBuilt-in PostCSS/Tailwind supportTroubleshootingESM / CommonJS ErrorsUpgrading to v2 This documentation provides guidance on migrating from v1 to v2 while using the Classic Remix compiler. For additional guidance on migrating to Vite, refer to the Remix Vite documentation. All v2 APIs and behaviors are available in v1 with Future Flags. They can be enabled one at a time to avoid development disruption of your project. After you have enabled all flags, upgrading to v2 should be a non-breaking upgrade. If you're having trouble see the Troubleshooting section. For a quick walkthrough of some common upgrade issues checkout 🎥 2 minutes to v2. remix dev For configuration options, see the remix dev docs. remix-serve If you are using the Remix App Server (remix-serve), enable v2_dev: /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { future: { v2_dev: true, }, }; That's it! Custom app server If you are using your own app server (server.js), then check out our templates for examples of how to integrate with v2_dev or follow these steps: Enable v2_dev: /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { future: { v2_dev: true, }, }; Update scripts in package.json: Replace any remix watch with remix dev Remove redundant NODE_ENV=development Use -c / --command to run your app server For example: { \"scripts\": { - \"dev:remix\": \"cross-env NODE_ENV=development remix watch\", - \"dev:server\": \"cross-env NODE_ENV=development node ./server.js\" + \"dev\": \"remix dev -c 'node ./server.js'\", } } Send a \"ready\" message to the Remix compiler once your app is running import { broadcastDevReady } from \"@remix-run/node\"; // import { logDevReady } from \"@remix-run/cloudflare\" // use `logDevReady` if using CloudFlare const BUILD_DIR = path.join(process.cwd(), \"build\"); // ... code setting up your server goes here ... const port = 3000; app.listen(port, async () =\u003e { console.log(`👉 http://localhost:${port}`); broadcastDevReady(await import(BUILD_DIR)); }); (Optional) --manual If you were relying on require cache purging, you can keep doing so by using the --manual flag: remix dev --manual -c 'node ./server.js' Check out the manual mode guide for more details. After upgrading from v1 to v2 After you've enabled the future.v2_dev flag in v1 and gotten that working, you're ready to upgrade to v2. If you just had v2_dev set to true, you can remove it and things should work. If you are using v2_dev config, you'll need to move it to the dev config field: /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { - future: { - v2_dev: { - port: 4004 - } - } + dev: { + port: 4004 + } } File System Route Convention Upgrading without changing files You can keep using the old convention with @remix-run/v1-route-convention even after upgrading to v2 if you don't want to make the change right now (or ever, it's just a convention, and you can use whatever file organization you prefer). npm i -D @remix-run/v1-route-convention const { createRoutesFromFolders, } = require(\"@remix-run/v1-route-convention\"); /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { future: { // makes the warning go away in v1.15+ v2_routeConvention: true, }, routes(defineRoutes) { // uses the v1 convention, works in v1.15+ and v2 return createRoutesFromFolders(defineRoutes); }, }; Upgrading to the new convention Route nesting is now created by dots (.) in file names instead of folder nesting suffixed_ underscores in segments opt-out of nesting with a potentially matching parent route instead of dots (.). _prefixed underscores in segments create layout routes without a path instead of a __double underscore prefix. _index.tsx files create index routes instead of index.tsx A routes folder that looks like this in v1: app/ ├── routes/ │ ├── __auth/ │ │ ├── login.tsx │ │ ├── logout.tsx │ │ └── signup.tsx │ ├── __public/ │ │ ├── about-us.tsx │ │ ├── contact.tsx │ │ └── index.tsx │ ├── dashboard/ │ │ ├── calendar/ │ │ │ ├── $day.tsx │ │ │ └── index.tsx │ │ ├── projects/ │ │ │ ├── $projectId/ │ │ │ │ ├── collaborators.tsx │ │ │ │ ├── edit.tsx │ │ │ │ ├── index.tsx │ │ │ │ ├── settings.tsx │ │ │ │ └── tasks.$taskId.tsx │ │ │ ├── $projectId.tsx │ │ │ └── new.tsx │ │ ├── calendar.tsx │ │ ├── index.tsx │ │ └── projects.tsx │ ├── __auth.tsx │ ├── __public.tsx │ └── dashboard.projects.$projectId.print.tsx └── root.tsx Becomes this with v2_routeConvention: app/ ├── routes/ │ ├── _auth.login.tsx │ ├── _auth.logout.tsx │ ├── _auth.signup.tsx │ ├── _auth.tsx │ ├── _public._index.tsx │ ├── _public.about-us.tsx │ ├── _public.contact.tsx │ ├── _public.tsx │ ├── dashboard._index.tsx │ ├── dashboard.calendar._index.tsx │ ├── dashboard.calendar.$day.tsx │ ├── dashboard.calendar.tsx │ ├── dashboard.projects.$projectId._index.tsx │ ├── dashboard.projects.$projectId.collaborators.tsx │ ├── dashboard.projects.$projectId.edit.tsx │ ├── dashboard.projects.$projectId.settings.tsx │ ├── dashboard.projects.$projectId.tasks.$taskId.tsx │ ├── dashboard.projects.$projectId.tsx │ ├── dashboard.projects.new.tsx │ ├── dashboard.projects.tsx │ └── dashboard_.projects.$projectId.print.tsx └── root.tsx Note that parent routes are now grouped together instead of having dozens of routes between them (like the auth routes). Routes with the same path but not the same nesting (like dashboard and dashboard_) also group together. With the new convention, any route can be a directory with a route.tsx file inside to define the route module. This enables co-location of modules with the route they're used in: For example, we can move _public.tsx to _public/route.tsx and then co-locate modules the route uses: app/ ├── routes/ │ ├── _auth.tsx │ ├── _public/ │ │ ├── footer.tsx │ │ ├── header.tsx │ │ └── route.tsx │ ├── _public._index.tsx │ ├── _public.about-us.tsx │ └── etc. └── root.tsx For more background on this change, see the original \"flat routes\" proposal. Route headers In Remix v2, the behavior for route headers functions has changed slightly. You can opt-into this new behavior ahead of time via the future.v2_headers flag in remix.config.js. In v1, Remix would only use the result of the leaf \"rendered\" route headers function. It was your responsibility to add a headers function to every potential leaf and merge in parentHeaders accordingly. This can get tedious quickly and is also easy to forget to add a headers function when you add a new route, even if you want it to just share the same headers from its parent. In v2, Remix now uses the deepest headers function that it finds in the rendered routes. This more easily allows you to share headers across routes from a common ancestor. Then as needed you can add headers functions to deeper routes if they require specific behavior. Route meta In Remix v2, the signature for route meta functions and how Remix handles meta tags under the hood have changed. Instead of returning an object from meta, you will now return an array of descriptors and manage the merge yourself. This brings the meta API closer to links, and it allows for more flexibility and control over how meta tags are rendered. In addition, \u003cMeta /\u003e will no longer render meta for every route in the hierarchy. Only data returned from meta in the leaf route will be rendered. You can still choose to include meta from the parent route by accessing matches in the function's arguments. For more background on this change, see the original v2 meta proposal. Using v1 meta conventions in v2 You can update your meta exports with the @remix-run/v1-meta package to continue using v1 conventions. Using the metaV1 function, you can pass in the meta function's arguments and the same object it currently returns. This function will use the same merging logic to merge the leaf route's meta with its direct parent route meta before converting it to an array of meta descriptors usable in v2. export function meta() { return { title: \"...\", description: \"...\", \"og:title\": \"...\", }; } import { metaV1 } from \"@remix-run/v1-meta\"; export function meta(args) { return metaV1(args, { title: \"...\", description: \"...\", \"og:title\": \"...\", }); } It's important to note that this function will not merge meta across the entire hierarchy by default. This is because you may have some routes that return an array of objects directly without the metaV1 function and this could result in unpredictable behavior. If you want to merge meta across the entire hierarchy, use the metaV1 function for all of your route's meta exports. The parentsData argument In v2, the meta function no longer receives the parentsData argument. This is because meta now has access to all of your route matches via the matches argument, which includes loader data for each match. To replicate the API of parentsData, the @remix-run/v1-meta package provides a getMatchesData function. It returns an object where the data for each match is keyed by the route's ID. export function meta(args) { const parentData = args.parentsData[\"routes/parent\"]; } Becomes: import { getMatchesData } from \"@remix-run/v1-meta\"; export function meta(args) { const matchesData = getMatchesData(args); const parentData = matchesData[\"routes/parent\"]; } Updating to the new meta export function meta() { return { title: \"...\", description: \"...\", \"og:title\": \"...\", }; } export function meta() { return [ { title: \"...\" }, { name: \"description\", content: \"...\" }, { property: \"og:title\", content: \"...\" }, // you can now add SEO related \u003clinks\u003e { tagName: \"link\", rel: \"canonical\", href: \"...\" }, // and \u003cscript type=ld+json\u003e { \"script:ld+json\": { some: \"value\", }, }, ]; } The matches argument Note that in v1 the objects returned from nested routes were all merged, you will need to manage the merge yourself now with matches: export function meta({ matches }) { const rootMeta = matches[0].meta; const title = rootMeta.find((m) =\u003e m.title); return [ title, { name: \"description\", content: \"...\" }, { property: \"og:title\", content: \"...\" }, // you can now add SEO related \u003clinks\u003e { tagName: \"link\", rel: \"canonical\", href: \"...\" }, // and \u003cscript type=ld+json\u003e { \"script:ld+json\": { \"@context\": \"https://schema.org\", \"@type\": \"Organization\", name: \"Remix\", }, }, ]; } The meta docs have more tips on merging route meta. CatchBoundary and ErrorBoundary /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { future: { v2_errorBoundary: true, }, }; In v1, a thrown Response rendered the closest CatchBoundary while all other unhandled exceptions rendered the ErrorBoundary. In v2 there is no CatchBoundary and all unhandled exceptions will render the ErrorBoundary, response or otherwise. Additionally, the error is no longer passed to ErrorBoundary as props but is accessed with the useRouteError hook. import { useCatch } from \"@remix-run/react\"; export function CatchBoundary() { const caught = useCatch(); return ( \u003cdiv\u003e \u003ch1\u003eOops\u003c/h1\u003e \u003cp\u003eStatus: {caught.status}\u003c/p\u003e \u003cp\u003e{caught.data.message}\u003c/p\u003e \u003c/div\u003e ); } export function ErrorBoundary({ error }) { console.error(error); return ( \u003cdiv\u003e \u003ch1\u003eUh oh ...\u003c/h1\u003e \u003cp\u003eSomething went wrong\u003c/p\u003e \u003cpre\u003e{error.message || \"Unknown error\"}\u003c/pre\u003e \u003c/div\u003e ); } Becomes: import { useRouteError, isRouteErrorResponse, } from \"@remix-run/react\"; export function ErrorBoundary() { const error = useRouteError(); // when true, this is what used to go to `CatchBoundary` if (isRouteErrorResponse(error)) { return ( \u003cdiv\u003e \u003ch1\u003eOops\u003c/h1\u003e \u003cp\u003eStatus: {error.status}\u003c/p\u003e \u003cp\u003e{error.data.message}\u003c/p\u003e \u003c/div\u003e ); } // Don't forget to typecheck with your own logic. // Any value can be thrown, not just errors! let errorMessage = \"Unknown error\"; if (isDefinitelyAnError(error)) { errorMessage = error.message; } return ( \u003cdiv\u003e \u003ch1\u003eUh oh ...\u003c/h1\u003e \u003cp\u003eSomething went wrong.\u003c/p\u003e \u003cpre\u003e{errorMessage}\u003c/pre\u003e \u003c/div\u003e ); } formMethod /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { future: { v2_normalizeFormMethod: true, }, }; Multiple APIs return the formMethod of a submission. In v1 they returned a lowercase version of the method but in v2 they return the UPPERCASE version. This is to bring it in line with HTTP and fetch specifications. function Something() { const navigation = useNavigation(); // v1 navigation.formMethod === \"post\"; // v2 navigation.formMethod === \"POST\"; } export function shouldRevalidate({ formMethod }) { // v1 formMethod === \"post\"; // v2 formMethod === \"POST\"; } useTransition This hook is now called useNavigation to avoid confusion with the recent React hook by the same name. It also no longer has the type field and flattens the submission object into the navigation object itself. import { useTransition } from \"@remix-run/react\"; function SomeComponent() { const transition = useTransition(); transition.submission.formData; transition.submission.formMethod; transition.submission.formAction; transition.type; } import { useNavigation } from \"@remix-run/react\"; function SomeComponent() { const navigation = useNavigation(); // transition.submission keys are flattened onto `navigation[key]` navigation.formData; navigation.formMethod; navigation.formAction; // this key is removed navigation.type; } You can derive the previous transition.type with the following examples. Keep in mind, there's probably a simpler way to get the same behavior, usually checking navigation.state, navigation.formData or the data returned from an action with useActionData can get the UX you're looking for. Feel free to ask us in Discord, and we'll help you out :D function Component() { const navigation = useNavigation(); // transition.type === \"actionSubmission\" const isActionSubmission = navigation.state === \"submitting\"; // transition.type === \"actionReload\" const isActionReload = navigation.state === \"loading\" \u0026\u0026 navigation.formMethod != null \u0026\u0026 navigation.formMethod != \"GET\" \u0026\u0026 // We had a submission navigation and are loading the submitted location navigation.formAction === navigation.location.pathname; // transition.type === \"actionRedirect\" const isActionRedirect = navigation.state === \"loading\" \u0026\u0026 navigation.formMethod != null \u0026\u0026 navigation.formMethod != \"GET\" \u0026\u0026 // We had a submission navigation and are now navigating to different location navigation.formAction !== navigation.location.pathname; // transition.type === \"loaderSubmission\" const isLoaderSubmission = navigation.state === \"loading\" \u0026\u0026 navigation.state.formMethod === \"GET\" \u0026\u0026 // We had a loader submission and are navigating to the submitted location navigation.formAction === navigation.location.pathname; // transition.type === \"loaderSubmissionRedirect\" const isLoaderSubmissionRedirect = navigation.state === \"loading\" \u0026\u0026 navigation.state.formMethod === \"GET\" \u0026\u0026 // We had a loader submission and are navigating to a new location navigation.formAction !== navigation.location.pathname; } A note on GET submissions In Remix v1, GET submissions such as \u003cForm method=\"get\"\u003e or submit({}, { method: 'get' }) went from idle -\u003e submitting -\u003e idle in transition.state. This is not quite semantically correct since even though you're \"submitting\" a form, you're performing a GET navigation and only executing loaders (not actions). Functionally, it's no different from a \u003cLink\u003e or navigate() except that the user may be specifying the search param values via inputs. In v2, GET submissions are more accurately reflected as loading navigations and thus go idle -\u003e loading -\u003e idle to align navigation.state with the behavior of normal links. If your GET submission came from a \u003cForm\u003e or submit(), then useNavigation.form* will be populated, so you can differentiate if needed. useFetcher Like useNavigation, useFetcher has flattened the submission and removed the type field. import { useFetcher } from \"@remix-run/react\"; function SomeComponent() { const fetcher = useFetcher(); fetcher.submission.formData; fetcher.submission.formMethod; fetcher.submission.formAction; fetcher.type; } import { useFetcher } from \"@remix-run/react\"; function SomeComponent() { const fetcher = useFetcher(); // these keys are flattened fetcher.formData; fetcher.formMethod; fetcher.formAction; // this key is removed fetcher.type; } You can derive the previous fetcher.type with the following examples. Keep in mind, there's probably a simpler way to get the same behavior, usually checking fetcher.state, fetcher.formData or the data returned from an action on fetcher.data can get the UX you're looking for. Feel free to ask us in Discord, and we'll help you out :D function Component() { const fetcher = useFetcher(); // fetcher.type === \"init\" const isInit = fetcher.state === \"idle\" \u0026\u0026 fetcher.data == null; // fetcher.type === \"done\" const isDone = fetcher.state === \"idle\" \u0026\u0026 fetcher.data != null; // fetcher.type === \"actionSubmission\" const isActionSubmission = fetcher.state === \"submitting\"; // fetcher.type === \"actionReload\" const isActionReload = fetcher.state === \"loading\" \u0026\u0026 fetcher.formMethod != null \u0026\u0026 fetcher.formMethod != \"GET\" \u0026\u0026 // If we returned data, we must be reloading fetcher.data != null; // fetcher.type === \"actionRedirect\" const isActionRedirect = fetcher.state === \"loading\" \u0026\u0026 fetcher.formMethod != null \u0026\u0026 fetcher.formMethod != \"GET\" \u0026\u0026 // If we have no data we must have redirected fetcher.data == null; // fetcher.type === \"loaderSubmission\" const isLoaderSubmission = fetcher.state === \"loading\" \u0026\u0026 fetcher.formMethod === \"GET\"; // fetcher.type === \"normalLoad\" const isNormalLoad = fetcher.state === \"loading\" \u0026\u0026 fetcher.formMethod == null; } A note on GET submissions In Remix v1, GET submissions such as \u003cfetcher.Form method=\"get\"\u003e or fetcher.submit({}, { method: 'get' }) went from idle -\u003e submitting -\u003e idle in fetcher.state. This is not quite semantically correct since even though you're \"submitting\" a form, you're performing a GET request and only executing a loader (not an action). Functionally, it's no different from a fetcher.load() except that the user may be specifying the search param values via inputs. In v2, GET submissions are more accurately reflected as loading requests and thus go idle -\u003e loading -\u003e idle to align fetcher.state with the behavior of normal fetcher loads. If your GET submission came from a \u003cfetcher.Form\u003e or fetcher.submit(), then fetcher.form* will be populated, so you can differentiate if needed. Links imagesizes and imagesrcset Route links properties should all be the React camelCase values instead of HTML lowercase values. These two values snuck in as lowercase in v1. In v2 only the camelCase versions are valid: export const links: LinksFunction = () =\u003e { return [ { rel: \"preload\", as: \"image\", imagesrcset: \"...\", imagesizes: \"...\", }, ]; }; export const links: V2_LinksFunction = () =\u003e { return [ { rel: \"preload\", as: \"image\", imageSrcSet: \"...\", imageSizes: \"...\", }, ]; }; browserBuildDirectory In your remix.config.js, rename browserBuildDirectory to assetsBuildDirectory. /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { browserBuildDirectory: \"./public/build\", }; /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { assetsBuildDirectory: \"./public/build\", }; devServerBroadcastDelay Remove devServerBroadcastDelay from your remix.config.js as the race conditions that necessitated this option have been eliminated in v2 or with v2_dev. /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { - devServerBroadcastDelay: 300, }; devServerPort In your remix.config.js, rename devServerPort to future.v2_dev.port. /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { devServerPort: 8002, }; /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { // While on v1.x, this is via a future flag future: { v2_dev: { port: 8002, }, }, }; Once you upgrade from v1 to v2, this flattens to a root-level dev config. serverBuildDirectory In your remix.config.js, rename serverBuildDirectory to serverBuildPath and specify a module path, not a directory. /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { serverBuildDirectory: \"./build\", }; /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { serverBuildPath: \"./build/index.js\", }; Remix used to create more than a single module for the server, but it now creates a single file. serverBuildTarget Instead of specifying a build target, use the remix.config.js options to generate the server build your server target expects. This change allows Remix to deploy to more JavaScript runtimes, servers, and hosts without Remix source code needing to know about them. The following configurations should replace your current serverBuildTarget: arc /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { publicPath: \"/_static/build/\", serverBuildPath: \"server/index.js\", serverMainFields: [\"main\", \"module\"], // default value, can be removed serverMinify: false, // default value, can be removed serverModuleFormat: \"cjs\", // default value in 1.x, add before upgrading serverPlatform: \"node\", // default value, can be removed }; cloudflare-pages /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { publicPath: \"/build/\", // default value, can be removed serverBuildPath: \"functions/[[path]].js\", serverConditions: [\"worker\"], serverDependenciesToBundle: \"all\", serverMainFields: [\"browser\", \"module\", \"main\"], serverMinify: true, serverModuleFormat: \"esm\", // default value in 2.x, can be removed once upgraded serverPlatform: \"neutral\", }; cloudflare-workers /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { publicPath: \"/build/\", // default value, can be removed serverBuildPath: \"build/index.js\", // default value, can be removed serverConditions: [\"worker\"], serverDependenciesToBundle: \"all\", serverMainFields: [\"browser\", \"module\", \"main\"], serverMinify: true, serverModuleFormat: \"esm\", // default value in 2.x, can be removed once upgraded serverPlatform: \"neutral\", }; deno /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { publicPath: \"/build/\", // default value, can be removed serverBuildPath: \"build/index.js\", // default value, can be removed serverConditions: [\"deno\", \"worker\"], serverDependenciesToBundle: \"all\", serverMainFields: [\"module\", \"main\"], serverMinify: false, // default value, can be removed serverModuleFormat: \"esm\", // default value in 2.x, can be removed once upgraded serverPlatform: \"neutral\", }; node-cjs /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { publicPath: \"/build/\", // default value, can be removed serverBuildPath: \"build/index.js\", // default value, can be removed serverMainFields: [\"main\", \"module\"], // default value, can be removed serverMinify: false, // default value, can be removed serverModuleFormat: \"cjs\", // default value in 1.x, add before upgrading serverPlatform: \"node\", // default value, can be removed }; serverModuleFormat The default server module output format has changed from cjs to esm. You can continue to use CJS in v2, many dependencies in your app might not be compatible with ESM. In your remix.config.js, you should specify either serverModuleFormat: \"cjs\" to retain existing behavior, or serverModuleFormat: \"esm\", to opt into the new behavior. browserNodeBuiltinsPolyfill Polyfills for Node.js built-in modules are no longer provided by default for the browser. In Remix v2 you'll need to explicitly reintroduce any polyfills (or blank polyfills) as required: /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { browserNodeBuiltinsPolyfill: { modules: { buffer: true, fs: \"empty\", }, globals: { Buffer: true, }, }, }; Even though we recommend being explicit about which polyfills are allowed in your browser bundle, especially since some polyfills can be quite large, you can quickly reinstate the full set of polyfills from Remix v1 with the following configuration: const { builtinModules } = require(\"node:module\"); /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { browserNodeBuiltinsPolyfill: { modules: builtinModules, }, }; serverNodeBuiltinsPolyfill Polyfills for Node.js built-in modules are no longer be provided by default for non-Node.js server platforms. If you are targeting a non-Node.js server platform and want to opt into the new default behavior in v1, in remix.config.js you should first remove all server polyfills by explicitly providing an empty object for serverNodeBuiltinsPolyfill.modules: /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { serverNodeBuiltinsPolyfill: { modules: {}, }, }; You can then reintroduce any polyfills (or blank polyfills) as required. /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { serverNodeBuiltinsPolyfill: { modules: { buffer: true, fs: \"empty\", }, globals: { Buffer: true, }, }, }; For reference, the complete set of default polyfills from v1 can be manually specified as follows: /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { serverNodeBuiltinsPolyfill: { modules: { _stream_duplex: true, _stream_passthrough: true, _stream_readable: true, _stream_transform: true, _stream_writable: true, assert: true, \"assert/strict\": true, buffer: true, console: true, constants: true, crypto: \"empty\", diagnostics_channel: true, domain: true, events: true, fs: \"empty\", \"fs/promises\": \"empty\", http: true, https: true, module: true, os: true, path: true, \"path/posix\": true, \"path/win32\": true, perf_hooks: true, process: true, punycode: true, querystring: true, stream: true, \"stream/promises\": true, \"stream/web\": true, string_decoder: true, sys: true, timers: true, \"timers/promises\": true, tty: true, url: true, util: true, \"util/types\": true, vm: true, wasi: true, worker_threads: true, zlib: true, }, }, }; installGlobals For preparation of using Node's built in fetch implementation, installing the fetch globals is now a responsibility of the app server. If you are using remix-serve, nothing is required. If you are using your own app server, you will need to install the globals yourself. import { installGlobals } from \"@remix-run/node\"; installGlobals(); Removal of exported polyfills Remix v2 also no longer exports these polyfilled implementations from @remix-run/node, and instead you should just use the instances in the global namespace. One place this is likely to surface and require a change is your app/entry.server.tsx file, where you'll also need to convert the Node PassThrough into a web ReadableStream via createReadableStreamFromReadable: import { PassThrough } from \"node:stream\"; import type { AppLoadContext, EntryContext } from \"@remix-run/node\"; // or cloudflare/deno - import { Response } from \"@remix-run/node\"; // or cloudflare/deno + import { createReadableStreamFromReadable } from \"@remix-run/node\"; // or cloudflare/deno import { RemixServer } from \"@remix-run/react\"; import { isbot } from \"isbot\"; import { renderToPipeableStream } from \"react-dom/server\"; const ABORT_DELAY = 5_000; export default function handleRequest({ /* ... */ }) { ... } function handleBotRequest(...) { return new Promise((resolve, reject) =\u003e { let shellRendered = false; const { pipe, abort } = renderToPipeableStream( \u003cRemixServer ... /\u003e, { onAllReady() { shellRendered = true; const body = new PassThrough(); responseHeaders.set(\"Content-Type\", \"text/html\"); resolve( - new Response(body, { + new Response(createReadableStreamFromReadable(body), { headers: responseHeaders, status: responseStatusCode, }) ); pipe(body); }, ... onShellError(error: unknown) { ... } onError(error: unknown) { ... } } ); setTimeout(abort, ABORT_DELAY); }); } function handleBrowserRequest(...) { return new Promise((resolve, reject) =\u003e { let shellRendered = false; const { pipe, abort } = renderToPipeableStream( \u003cRemixServer ... /\u003e, { onShellReady() { shellRendered = true; const body = new PassThrough(); responseHeaders.set(\"Content-Type\", \"text/html\"); resolve( - new Response(body, { + new Response(createReadableStreamFromReadable(body), { headers: responseHeaders, status: responseStatusCode, }) ); pipe(body); }, onShellError(error: unknown) { ... }, onError(error: unknown) { ... }, } ); setTimeout(abort, ABORT_DELAY); }); } source-map-support Source map support is now a responsibility of the app server. If you are using remix-serve, nothing is required. If you are using your own app server, you will need to install source-map-support yourself. npm i source-map-support import sourceMapSupport from \"source-map-support\"; sourceMapSupport.install(); Netlify adapter The @remix-run/netlify runtime adapter has been deprecated in favor of @netlify/remix-adapter \u0026 @netlify/remix-edge-adapter and is now removed as of Remix v2. Please update your code by changing all @remix-run/netlify imports to @netlify/remix-adapter. Keep in mind that @netlify/remix-adapter requires @netlify/functions@^1.0.0, which is a breaking change compared to the current supported @netlify/functions versions in @remix-run/netlify. Due to the removal of this adapter, we also removed our Netlify template in favor of the official Netlify template. Vercel adapter The @remix-run/vercel runtime adapter has been deprecated in favor of out of the box Vercel functionality and is now removed as of Remix v2. Please update your code by removing @remix-run/vercel \u0026 @vercel/node from your package.json, removing your server.js/server.ts file, and removing the server \u0026 serverBuildPath options from your remix.config.js. Due to the removal of this adapter, we also removed our Vercel template in favor of the official Vercel template. Built-in PostCSS/Tailwind support In v2, these tools are automatically used within the Remix compiler if PostCSS and/or Tailwind configuration files are present in your project. If you have a custom PostCSS and/or Tailwind setup outside of Remix that you'd like to maintain when migrating to v2, you can disable these features in your remix.config.js. /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { postcss: false, tailwind: false, }; Troubleshooting ESM / CommonJS Errors \"SyntaxError: Named export '\u003csomething\u003e' not found. The requested module '\u003csomething\u003e' is a CommonJS module, which may not support all module.exports as named exports.\" Please see the serverModuleFormat section.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_1048\\\":-5,\\\"_1049\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":1047},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"docs/start/v2.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"upgrading-to-v2\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#upgrading-to-v2\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpgrading to v2\\u003c/h1\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003eThis documentation provides guidance on migrating from v1 to v2 while using the \\u003ca href=\\\\\\\"../guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\\"\\u003eClassic Remix compiler\\u003c/a\\u003e. For additional guidance on migrating to Vite, refer to the \\u003ca href=\\\\\\\"../guides/vite\\\\\\\"\\u003eRemix Vite documentation\\u003c/a\\u003e.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eAll v2 APIs and behaviors are available in v1 with \\u003ca href=\\\\\\\"./future-flags\\\\\\\"\\u003eFuture Flags\\u003c/a\\u003e. They can be enabled one at a time to avoid development disruption of your project. After you have enabled all flags, upgrading to v2 should be a non-breaking upgrade.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you're having trouble see the \\u003ca href=\\\\\\\"#troubleshooting\\\\\\\"\\u003eTroubleshooting\\u003c/a\\u003e section.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor a quick walkthrough of some common upgrade issues checkout \\u003ca href=\\\\\\\"https://twitter.com/BrooksLybrand/status/1704265835546578989\\\\\\\"\\u003e🎥 2 minutes to v2\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"remix-dev\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#remix-dev\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eremix dev\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eFor configuration options, see the \\u003ca href=\\\\\\\"../other-api/dev\\\\\\\"\\u003e\\u003ccode\\u003eremix dev\\u003c/code\\u003e docs\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"remix-serve\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#remix-serve\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eremix-serve\\u003c/code\\u003e\\u003c/h3\\u003e\\\\n\\u003cp\\u003eIf you are using the Remix App Server (\\u003ccode\\u003eremix-serve\\u003c/code\\u003e), enable \\u003ccode\\u003ev2_dev\\u003c/code\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e v2_dev: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThat's it!\\u003c/p\\u003e\\\\n\\u003ch3 id=\\\\\\\"custom-app-server\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#custom-app-server\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eCustom app server\\u003c/h3\\u003e\\\\n\\u003cp\\u003eIf you are using your own app server (\\u003ccode\\u003eserver.js\\u003c/code\\u003e),\\\\nthen check out our \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/tree/main/templates\\\\\\\"\\u003etemplates\\u003c/a\\u003e for examples of how to integrate with \\u003ccode\\u003ev2_dev\\u003c/code\\u003e\\\\nor follow these steps:\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eEnable \\u003ccode\\u003ev2_dev\\u003c/code\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e v2_dev: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eUpdate \\u003ccode\\u003escripts\\u003c/code\\u003e in \\u003ccode\\u003epackage.json\\u003c/code\\u003e:\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eReplace any \\u003ccode\\u003eremix watch\\u003c/code\\u003e with \\u003ccode\\u003eremix dev\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eRemove redundant \\u003ccode\\u003eNODE_ENV=development\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eUse \\u003ccode\\u003e-c\\u003c/code\\u003e / \\u003ccode\\u003e--command\\u003c/code\\u003e to run your app server\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eFor example:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"package.json\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"package.json\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\\\\\\"scripts\\\\\\\": {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e \\\\\\\"dev:remix\\\\\\\": \\\\\\\"cross-env NODE_ENV=development remix watch\\\\\\\",\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e \\\\\\\"dev:server\\\\\\\": \\\\\\\"cross-env NODE_ENV=development node ./server.js\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e \\\\\\\"dev\\\\\\\": \\\\\\\"remix dev -c 'node ./server.js'\\\\\\\",\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eSend a \\\\\\\"ready\\\\\\\" message to the Remix compiler once your app is running\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"server.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"server.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebroadcastDevReady\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// import { logDevReady } from \\\\\\\"@remix-run/cloudflare\\\\\\\" // use `logDevReady` if using CloudFlare\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eBUILD_DIR\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epath\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ejoin\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eprocess\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecwd\\u003c/span\\u003e(), \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebuild\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// ... code setting up your server goes here ...\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e3000\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eapp\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elisten\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eport\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econsole\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elog\\u003c/span\\u003e(`\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e👉 http://localhost:\\u003c/span\\u003e${\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eport\\u003c/span\\u003e}`);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ebroadcastDevReady\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eawait\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eimport\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eBUILD_DIR\\u003c/span\\u003e));\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e(Optional) \\u003ccode\\u003e--manual\\u003c/code\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you were relying on \\u003ccode\\u003erequire\\u003c/code\\u003e cache purging, you can keep doing so by using the \\u003ccode\\u003e--manual\\u003c/code\\u003e flag:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eremix\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edev\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e--manual\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e-c\\u003c/span\\u003e '\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003enode ./server.js\\u003c/span\\u003e'\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eCheck out the \\u003ca href=\\\\\\\"../guides/manual-mode\\\\\\\"\\u003emanual mode guide\\u003c/a\\u003e for more details.\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003ch3 id=\\\\\\\"after-upgrading-from-v1-to-v2\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#after-upgrading-from-v1-to-v2\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eAfter upgrading from v1 to v2\\u003c/h3\\u003e\\\\n\\u003cp\\u003eAfter you've enabled the \\u003ccode\\u003efuture.v2_dev\\u003c/code\\u003e flag in v1 and gotten that working, you're ready to upgrade to v2.\\\\nIf you just had \\u003ccode\\u003ev2_dev\\u003c/code\\u003e set to \\u003ccode\\u003etrue\\u003c/code\\u003e, you can remove it and things should work.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you are using \\u003ccode\\u003ev2_dev\\u003c/code\\u003e config, you'll need to move it to the \\u003ccode\\u003edev\\u003c/code\\u003e config field:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e /** @type {import('@remix-run/dev').AppConfig} */\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e module.exports = {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e future: {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e v2_dev: {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e port: 4004\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e }\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e }\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e dev: {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e port: 4004\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e }\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"file-system-route-convention\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#file-system-route-convention\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eFile System Route Convention\\u003c/h2\\u003e\\\\n\\u003ch4 id=\\\\\\\"upgrading-without-changing-files\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#upgrading-without-changing-files\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpgrading without changing files\\u003c/h4\\u003e\\\\n\\u003cp\\u003eYou can keep using the old convention with \\u003ccode\\u003e@remix-run/v1-route-convention\\u003c/code\\u003e even after upgrading to v2 if you don't want to make the change right now (or ever, it's just a convention, and you can use whatever file organization you prefer).\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ei\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e-D\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/v1-route-convention\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecreateRoutesFromFolders\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erequire\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/v1-route-convention\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// makes the warning go away in v1.15+\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e v2_routeConvention: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroutes\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// uses the v1 convention, works in v1.15+ and v2\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003ecreateRoutesFromFolders\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4 id=\\\\\\\"upgrading-to-the-new-convention\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#upgrading-to-the-new-convention\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpgrading to the new convention\\u003c/h4\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eRoute nesting is now created by dots (\\u003ccode\\u003e.\\u003c/code\\u003e) in file names instead of folder nesting\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003esuffixed_\\u003c/code\\u003e underscores in segments opt-out of nesting with a potentially matching parent route instead of dots (\\u003ccode\\u003e.\\u003c/code\\u003e).\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e_prefixed\\u003c/code\\u003e underscores in segments create layout routes without a path instead of a \\u003ccode\\u003e__double\\u003c/code\\u003e underscore prefix.\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e_index.tsx\\u003c/code\\u003e files create index routes instead of \\u003ccode\\u003eindex.tsx\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003eA routes folder that looks like this in v1:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003eapp/\\\\n├── routes/\\\\n│ ├── __auth/\\\\n│ │ ├── login.tsx\\\\n│ │ ├── logout.tsx\\\\n│ │ └── signup.tsx\\\\n│ ├── __public/\\\\n│ │ ├── about-us.tsx\\\\n│ │ ├── contact.tsx\\\\n│ │ └── index.tsx\\\\n│ ├── dashboard/\\\\n│ │ ├── calendar/\\\\n│ │ │ ├── $day.tsx\\\\n│ │ │ └── index.tsx\\\\n│ │ ├── projects/\\\\n│ │ │ ├── $projectId/\\\\n│ │ │ │ ├── collaborators.tsx\\\\n│ │ │ │ ├── edit.tsx\\\\n│ │ │ │ ├── index.tsx\\\\n│ │ │ │ ├── settings.tsx\\\\n│ │ │ │ └── tasks.$taskId.tsx\\\\n│ │ │ ├── $projectId.tsx\\\\n│ │ │ └── new.tsx\\\\n│ │ ├── calendar.tsx\\\\n│ │ ├── index.tsx\\\\n│ │ └── projects.tsx\\\\n│ ├── __auth.tsx\\\\n│ ├── __public.tsx\\\\n│ └── dashboard.projects.$projectId.print.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eBecomes this with \\u003ccode\\u003ev2_routeConvention\\u003c/code\\u003e:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003eapp/\\\\n├── routes/\\\\n│ ├── _auth.login.tsx\\\\n│ ├── _auth.logout.tsx\\\\n│ ├── _auth.signup.tsx\\\\n│ ├── _auth.tsx\\\\n│ ├── _public._index.tsx\\\\n│ ├── _public.about-us.tsx\\\\n│ ├── _public.contact.tsx\\\\n│ ├── _public.tsx\\\\n│ ├── dashboard._index.tsx\\\\n│ ├── dashboard.calendar._index.tsx\\\\n│ ├── dashboard.calendar.$day.tsx\\\\n│ ├── dashboard.calendar.tsx\\\\n│ ├── dashboard.projects.$projectId._index.tsx\\\\n│ ├── dashboard.projects.$projectId.collaborators.tsx\\\\n│ ├── dashboard.projects.$projectId.edit.tsx\\\\n│ ├── dashboard.projects.$projectId.settings.tsx\\\\n│ ├── dashboard.projects.$projectId.tasks.$taskId.tsx\\\\n│ ├── dashboard.projects.$projectId.tsx\\\\n│ ├── dashboard.projects.new.tsx\\\\n│ ├── dashboard.projects.tsx\\\\n│ └── dashboard_.projects.$projectId.print.tsx\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eNote that parent routes are now grouped together instead of having dozens of routes between them (like the auth routes). Routes with the same path but not the same nesting (like \\u003ccode\\u003edashboard\\u003c/code\\u003e and \\u003ccode\\u003edashboard_\\u003c/code\\u003e) also group together.\\u003c/p\\u003e\\\\n\\u003cp\\u003eWith the new convention, any route can be a directory with a \\u003ccode\\u003eroute.tsx\\u003c/code\\u003e file inside to define the route module. This enables co-location of modules with the route they're used in:\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor example, we can move \\u003ccode\\u003e_public.tsx\\u003c/code\\u003e to \\u003ccode\\u003e_public/route.tsx\\u003c/code\\u003e and then co-locate modules the route uses:\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-text\\\\\\\"\\u003eapp/\\\\n├── routes/\\\\n│ ├── _auth.tsx\\\\n│ ├── _public/\\\\n│ │ ├── footer.tsx\\\\n│ │ ├── header.tsx\\\\n│ │ └── route.tsx\\\\n│ ├── _public._index.tsx\\\\n│ ├── _public.about-us.tsx\\\\n│ └── etc.\\\\n└── root.tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eFor more background on this change, see the \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/discussions/4482\\\\\\\"\\u003eoriginal \\\\\\\"flat routes\\\\\\\" proposal\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"route-headers\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#route-headers\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRoute \\u003ccode\\u003eheaders\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIn Remix v2, the behavior for route \\u003ccode\\u003eheaders\\u003c/code\\u003e functions has changed slightly. You can opt-into this new behavior ahead of time via the \\u003ccode\\u003efuture.v2_headers\\u003c/code\\u003e flag in \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIn v1, Remix would only use the result of the leaf \\\\\\\"rendered\\\\\\\" route \\u003ccode\\u003eheaders\\u003c/code\\u003e function. It was your responsibility to add a \\u003ccode\\u003eheaders\\u003c/code\\u003e function to every potential leaf and merge in \\u003ccode\\u003eparentHeaders\\u003c/code\\u003e accordingly. This can get tedious quickly and is also easy to forget to add a \\u003ccode\\u003eheaders\\u003c/code\\u003e function when you add a new route, even if you want it to just share the same headers from its parent.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIn v2, Remix now uses the deepest \\u003ccode\\u003eheaders\\u003c/code\\u003e function that it finds in the rendered routes. This more easily allows you to share headers across routes from a common ancestor. Then as needed you can add \\u003ccode\\u003eheaders\\u003c/code\\u003e functions to deeper routes if they require specific behavior.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"route-meta\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#route-meta\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRoute \\u003ccode\\u003emeta\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIn Remix v2, the signature for route \\u003ccode\\u003emeta\\u003c/code\\u003e functions and how Remix handles meta tags under the hood have changed.\\u003c/p\\u003e\\\\n\\u003cp\\u003eInstead of returning an object from \\u003ccode\\u003emeta\\u003c/code\\u003e, you will now return an array of descriptors and manage the merge yourself. This brings the \\u003ccode\\u003emeta\\u003c/code\\u003e API closer to \\u003ccode\\u003elinks\\u003c/code\\u003e, and it allows for more flexibility and control over how meta tags are rendered.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIn addition, \\u003ccode\\u003e\\u0026#x3C;Meta /\\u003e\\u003c/code\\u003e will no longer render meta for every route in the hierarchy. Only data returned from \\u003ccode\\u003emeta\\u003c/code\\u003e in the leaf route will be rendered. You can still choose to include meta from the parent route by accessing \\u003ca href=\\\\\\\"#the-matches-argument\\\\\\\"\\u003e\\u003ccode\\u003ematches\\u003c/code\\u003e in the function's arguments\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eFor more background on this change, see the \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/discussions/4462\\\\\\\"\\u003eoriginal v2 \\u003ccode\\u003emeta\\u003c/code\\u003e proposal\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"using-v1-meta-conventions-in-v2\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#using-v1-meta-conventions-in-v2\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUsing v1 \\u003ccode\\u003emeta\\u003c/code\\u003e conventions in v2\\u003c/h4\\u003e\\\\n\\u003cp\\u003eYou can update your \\u003ccode\\u003emeta\\u003c/code\\u003e exports with the \\u003ccode\\u003e@remix-run/v1-meta\\u003c/code\\u003e package to continue using v1 conventions.\\u003c/p\\u003e\\\\n\\u003cp\\u003eUsing the \\u003ccode\\u003emetaV1\\u003c/code\\u003e function, you can pass in the \\u003ccode\\u003emeta\\u003c/code\\u003e function's arguments and the same object it currently returns. This function will use the same merging logic to merge the leaf route's meta with its \\u003cstrong\\u003edirect parent route\\u003c/strong\\u003e meta before converting it to an array of meta descriptors usable in v2.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v1-route.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v1-route.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emeta\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e title: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e description: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eog:title\\u003c/span\\u003e\\\\\\\": \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emetaV1\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/v1-meta\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emeta\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eargs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emetaV1\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eargs\\u003c/span\\u003e, {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e title: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e description: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eog:title\\u003c/span\\u003e\\\\\\\": \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eIt's important to note that this function will \\u003cem\\u003enot\\u003c/em\\u003e merge meta across the entire hierarchy by default. This is because you may have some routes that return an array of objects directly without the \\u003ccode\\u003emetaV1\\u003c/code\\u003e function and this could result in unpredictable behavior. If you want to merge meta across the entire hierarchy, use the \\u003ccode\\u003emetaV1\\u003c/code\\u003e function for all of your route's meta exports.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"the-parentsdata-argument\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#the-parentsdata-argument\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eThe \\u003ccode\\u003eparentsData\\u003c/code\\u003e argument\\u003c/h4\\u003e\\\\n\\u003cp\\u003eIn v2, the \\u003ccode\\u003emeta\\u003c/code\\u003e function no longer receives the \\u003ccode\\u003eparentsData\\u003c/code\\u003e argument. This is because \\u003ccode\\u003emeta\\u003c/code\\u003e now has access to all of your route matches via the \\u003ca href=\\\\\\\"#the-matches-argument\\\\\\\"\\u003e\\u003ccode\\u003ematches\\u003c/code\\u003e argument\\u003c/a\\u003e, which includes loader data for each match.\\u003c/p\\u003e\\\\n\\u003cp\\u003eTo replicate the API of \\u003ccode\\u003eparentsData\\u003c/code\\u003e, the \\u003ccode\\u003e@remix-run/v1-meta\\u003c/code\\u003e package provides a \\u003ccode\\u003egetMatchesData\\u003c/code\\u003e function. It returns an object where the data for each match is keyed by the route's ID.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v1-route.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v1-route.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emeta\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eargs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparentData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eargs\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparentsData\\u003c/span\\u003e[\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eroutes/parent\\u003c/span\\u003e\\\\\\\"];\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eBecomes:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003egetMatchesData\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/v1-meta\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emeta\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eargs\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ematchesData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003egetMatchesData\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eargs\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eparentData\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ematchesData\\u003c/span\\u003e[\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eroutes/parent\\u003c/span\\u003e\\\\\\\"];\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4 id=\\\\\\\"updating-to-the-new-meta\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#updating-to-the-new-meta\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eUpdating to the new \\u003ccode\\u003emeta\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v1-route.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v1-route.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emeta\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e title: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e description: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eog:title\\u003c/span\\u003e\\\\\\\": \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e };\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emeta\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e { title: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\" },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e { name: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edescription\\u003c/span\\u003e\\\\\\\", content: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\" },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e { property: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eog:title\\u003c/span\\u003e\\\\\\\", content: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\" },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// you can now add SEO related \\u0026#x3C;links\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e { tagName: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003elink\\u003c/span\\u003e\\\\\\\", rel: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecanonical\\u003c/span\\u003e\\\\\\\", href: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\" },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// and \\u0026#x3C;script type=ld+json\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003escript:ld+json\\u003c/span\\u003e\\\\\\\": {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e some: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evalue\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e ];\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4 id=\\\\\\\"the-matches-argument\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#the-matches-argument\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eThe \\u003ccode\\u003ematches\\u003c/code\\u003e argument\\u003c/h4\\u003e\\\\n\\u003cp\\u003eNote that in v1 the objects returned from nested routes were all merged, you will need to manage the merge yourself now with \\u003ccode\\u003ematches\\u003c/code\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003emeta\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ematches\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erootMeta\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ematches\\u003c/span\\u003e[\\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e0\\u003c/span\\u003e].\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emeta\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etitle\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003erootMeta\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efind\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003em\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003em\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etitle\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etitle\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e { name: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edescription\\u003c/span\\u003e\\\\\\\", content: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\" },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e { property: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eog:title\\u003c/span\\u003e\\\\\\\", content: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\" },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// you can now add SEO related \\u0026#x3C;links\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e { tagName: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003elink\\u003c/span\\u003e\\\\\\\", rel: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecanonical\\u003c/span\\u003e\\\\\\\", href: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\" },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// and \\u0026#x3C;script type=ld+json\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003escript:ld+json\\u003c/span\\u003e\\\\\\\": {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@context\\u003c/span\\u003e\\\\\\\": \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ehttps://schema.org\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@type\\u003c/span\\u003e\\\\\\\": \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eOrganization\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e name: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eRemix\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e ];\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eThe \\u003ca href=\\\\\\\"../route/meta\\\\\\\"\\u003emeta\\u003c/a\\u003e docs have more tips on merging route meta.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"catchboundary-and-errorboundary\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#catchboundary-and-errorboundary\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eCatchBoundary\\u003c/code\\u003e and \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e v2_errorBoundary: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eIn v1, a thrown \\u003ccode\\u003eResponse\\u003c/code\\u003e rendered the closest \\u003ccode\\u003eCatchBoundary\\u003c/code\\u003e while all other unhandled exceptions rendered the \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e. In v2 there is no \\u003ccode\\u003eCatchBoundary\\u003c/code\\u003e and all unhandled exceptions will render the \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e, response or otherwise.\\u003c/p\\u003e\\\\n\\u003cp\\u003eAdditionally, the error is no longer passed to \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e as props but is accessed with the \\u003ccode\\u003euseRouteError\\u003c/code\\u003e hook.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v1-route.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v1-route.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseCatch\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eCatchBoundary\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecaught\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseCatch\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003eOops\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003eStatus: \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecaught\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estatus\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ecaught\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edata\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emessage\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eErrorBoundary\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003econsole\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eerror\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003eUh oh ...\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003eSomething went wrong\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epre\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emessage\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e||\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eUnknown error\\u003c/span\\u003e\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epre\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eBecomes:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseRouteError\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisRouteErrorResponse\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e} \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eErrorBoundary\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseRouteError\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// when true, this is what used to go to `CatchBoundary`\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eisRouteErrorResponse\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e)) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003eOops\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003eStatus: \\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estatus\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edata\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emessage\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// Don't forget to typecheck with your own logic.\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// Any value can be thrown, not just errors!\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003elet\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrorMessage\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eUnknown error\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eif\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eisDefinitelyAnError\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e)) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrorMessage\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerror\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003emessage\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e (\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003eUh oh ...\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003eSomething went wrong.\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u0026#x3C;\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epre\\u003c/span\\u003e\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e{\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eerrorMessage\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0F)\\\\\\\"\\u003e}\\u003c/span\\u003e\\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epre\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u0026#x3C;/\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"formmethod\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#formmethod\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eformMethod\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e v2_normalizeFormMethod: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eMultiple APIs return the \\u003ccode\\u003eformMethod\\u003c/code\\u003e of a submission. In v1 they returned a lowercase version of the method but in v2 they return the UPPERCASE version. This is to bring it in line with HTTP and \\u003ccode\\u003efetch\\u003c/code\\u003e specifications.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eSomething\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// v1\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// v2\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ePOST\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eshouldRevalidate\\u003c/span\\u003e({ \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e }) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// v1\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epost\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// v2\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ePOST\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"usetransition\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#usetransition\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003euseTransition\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThis hook is now called \\u003ccode\\u003euseNavigation\\u003c/code\\u003e to avoid confusion with the recent React hook by the same name. It also no longer has the \\u003ccode\\u003etype\\u003c/code\\u003e field and flattens the \\u003ccode\\u003esubmission\\u003c/code\\u003e object into the \\u003ccode\\u003enavigation\\u003c/code\\u003e object itself.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v1-route.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v1-route.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseTransition\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eSomeComponent\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etransition\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseTransition\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etransition\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esubmission\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etransition\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esubmission\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etransition\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esubmission\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformAction\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etransition\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etype\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eSomeComponent\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// transition.submission keys are flattened onto `navigation[key]`\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformAction\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// this key is removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etype\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eYou can derive the previous \\u003ccode\\u003etransition.type\\u003c/code\\u003e with the following examples. Keep in mind, there's probably a simpler way to get the same behavior, usually checking \\u003ccode\\u003enavigation.state\\u003c/code\\u003e, \\u003ccode\\u003enavigation.formData\\u003c/code\\u003e or the data returned from an action with \\u003ccode\\u003euseActionData\\u003c/code\\u003e can get the UX you're looking for. Feel free to ask us in Discord, and we'll help you out :D\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponent\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseNavigation\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// transition.type === \\\\\\\"actionSubmission\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisActionSubmission\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmitting\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// transition.type === \\\\\\\"actionReload\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisActionReload\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eloading\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!=\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eGET\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// We had a submission navigation and are loading the submitted location\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformAction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elocation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epathname\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// transition.type === \\\\\\\"actionRedirect\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisActionRedirect\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eloading\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!=\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eGET\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// We had a submission navigation and are now navigating to different location\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformAction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!==\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elocation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epathname\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// transition.type === \\\\\\\"loaderSubmission\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisLoaderSubmission\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eloading\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003estate\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eGET\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// We had a loader submission and are navigating to the submitted location\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformAction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elocation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epathname\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// transition.type === \\\\\\\"loaderSubmissionRedirect\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisLoaderSubmissionRedirect\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eloading\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003estate\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eGET\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// We had a loader submission and are navigating to a new location\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformAction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!==\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003enavigation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elocation\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003epathname\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eA note on GET submissions\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eIn Remix v1, GET submissions such as \\u003ccode\\u003e\\u0026#x3C;Form method=\\\\\\\"get\\\\\\\"\\u003e\\u003c/code\\u003e or \\u003ccode\\u003esubmit({}, { method: 'get' })\\u003c/code\\u003e went from \\u003ccode\\u003eidle -\\u003e submitting -\\u003e idle\\u003c/code\\u003e in \\u003ccode\\u003etransition.state\\u003c/code\\u003e. This is not quite semantically correct since even though you're \\\\\\\"submitting\\\\\\\" a form, you're performing a GET navigation and only executing loaders (not actions). Functionally, it's no different from a \\u003ccode\\u003e\\u0026#x3C;Link\\u003e\\u003c/code\\u003e or \\u003ccode\\u003enavigate()\\u003c/code\\u003e except that the user may be specifying the search param values via inputs.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIn v2, GET submissions are more accurately reflected as loading navigations and thus go \\u003ccode\\u003eidle -\\u003e loading -\\u003e idle\\u003c/code\\u003e to align \\u003ccode\\u003enavigation.state\\u003c/code\\u003e with the behavior of normal links. If your GET submission came from a \\u003ccode\\u003e\\u0026#x3C;Form\\u003e\\u003c/code\\u003e or \\u003ccode\\u003esubmit()\\u003c/code\\u003e, then \\u003ccode\\u003euseNavigation.form*\\u003c/code\\u003e will be populated, so you can differentiate if needed.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"usefetcher\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#usefetcher\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003euseFetcher\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eLike \\u003ccode\\u003euseNavigation\\u003c/code\\u003e, \\u003ccode\\u003euseFetcher\\u003c/code\\u003e has flattened the \\u003ccode\\u003esubmission\\u003c/code\\u003e and removed the \\u003ccode\\u003etype\\u003c/code\\u003e field.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v1-route.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v1-route.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eSomeComponent\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esubmission\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esubmission\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003esubmission\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformAction\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etype\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eSomeComponent\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// these keys are flattened\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformData\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformAction\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// this key is removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003etype\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eYou can derive the previous \\u003ccode\\u003efetcher.type\\u003c/code\\u003e with the following examples. Keep in mind, there's probably a simpler way to get the same behavior, usually checking \\u003ccode\\u003efetcher.state\\u003c/code\\u003e, \\u003ccode\\u003efetcher.formData\\u003c/code\\u003e or the data returned from an action on \\u003ccode\\u003efetcher.data\\u003c/code\\u003e can get the UX you're looking for. Feel free to ask us in Discord, and we'll help you out :D\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003efunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eComponent\\u003c/span\\u003e() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003euseFetcher\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// fetcher.type === \\\\\\\"init\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisInit\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eidle\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e==\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// fetcher.type === \\\\\\\"done\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisDone\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eidle\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// fetcher.type === \\\\\\\"actionSubmission\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisActionSubmission\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esubmitting\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// fetcher.type === \\\\\\\"actionReload\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisActionReload\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eloading\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!=\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eGET\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// If we returned data, we must be reloading\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// fetcher.type === \\\\\\\"actionRedirect\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisActionRedirect\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eloading\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e!=\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eGET\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// If we have no data we must have redirected\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edata\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e==\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// fetcher.type === \\\\\\\"loaderSubmission\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisLoaderSubmission\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eloading\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eGET\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// fetcher.type === \\\\\\\"normalLoad\\\\\\\"\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eisNormalLoad\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003estate\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e===\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eloading\\u003c/span\\u003e\\\\\\\" \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e\\u0026#x26;\\u0026#x26;\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003efetcher\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eformMethod\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e==\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003enull\\u003c/span\\u003e;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e}\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003eA note on GET submissions\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eIn Remix v1, GET submissions such as \\u003ccode\\u003e\\u0026#x3C;fetcher.Form method=\\\\\\\"get\\\\\\\"\\u003e\\u003c/code\\u003e or \\u003ccode\\u003efetcher.submit({}, { method: 'get' })\\u003c/code\\u003e went from \\u003ccode\\u003eidle -\\u003e submitting -\\u003e idle\\u003c/code\\u003e in \\u003ccode\\u003efetcher.state\\u003c/code\\u003e. This is not quite semantically correct since even though you're \\\\\\\"submitting\\\\\\\" a form, you're performing a GET request and only executing a loader (not an action). Functionally, it's no different from a \\u003ccode\\u003efetcher.load()\\u003c/code\\u003e except that the user may be specifying the search param values via inputs.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIn v2, GET submissions are more accurately reflected as loading requests and thus go \\u003ccode\\u003eidle -\\u003e loading -\\u003e idle\\u003c/code\\u003e to align \\u003ccode\\u003efetcher.state\\u003c/code\\u003e with the behavior of normal fetcher loads. If your GET submission came from a \\u003ccode\\u003e\\u0026#x3C;fetcher.Form\\u003e\\u003c/code\\u003e or \\u003ccode\\u003efetcher.submit()\\u003c/code\\u003e, then \\u003ccode\\u003efetcher.form*\\u003c/code\\u003e will be populated, so you can differentiate if needed.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"links-imagesizes-and-imagesrcset\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#links-imagesizes-and-imagesrcset\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eLinks \\u003ccode\\u003eimagesizes\\u003c/code\\u003e and \\u003ccode\\u003eimagesrcset\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eRoute \\u003ccode\\u003elinks\\u003c/code\\u003e properties should all be the React camelCase values instead of HTML lowercase values. These two values snuck in as lowercase in v1. In v2 only the camelCase versions are valid:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v1-route.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v1-route.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elinks\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eLinksFunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e rel: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epreload\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e as: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eimage\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e imagesrcset: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e imagesizes: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e ];\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/routes/v2-route.tsx\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"tsx\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003elinks\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e:\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eV2_LinksFunction\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e rel: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epreload\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e as: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eimage\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e imageSrcSet: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e imageSizes: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e...\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e ];\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"browserbuilddirectory\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#browserbuilddirectory\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ebrowserBuildDirectory\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIn your \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e, rename \\u003ccode\\u003ebrowserBuildDirectory\\u003c/code\\u003e to \\u003ccode\\u003eassetsBuildDirectory\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e browserBuildDirectory: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./public/build\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e assetsBuildDirectory: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./public/build\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"devserverbroadcastdelay\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#devserverbroadcastdelay\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003edevServerBroadcastDelay\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eRemove \\u003ccode\\u003edevServerBroadcastDelay\\u003c/code\\u003e from your \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e as the race conditions that necessitated this option have\\\\nbeen eliminated in v2 or with \\u003ccode\\u003ev2_dev\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e /** @type {import('@remix-run/dev').AppConfig} */\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e module.exports = {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e devServerBroadcastDelay: 300,\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e };\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"devserverport\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#devserverport\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003edevServerPort\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIn your \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e, rename \\u003ccode\\u003edevServerPort\\u003c/code\\u003e to \\u003ccode\\u003efuture.v2_dev.port\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e devServerPort: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e8002\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// While on v1.x, this is via a future flag\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e v2_dev: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e port: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003e8002\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eOnce you upgrade from v1 to v2, this flattens to a \\u003ca href=\\\\\\\"#after-upgrading-from-v1-to-v2\\\\\\\"\\u003eroot-level \\u003ccode\\u003edev\\u003c/code\\u003e config\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"serverbuilddirectory\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#serverbuilddirectory\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eserverBuildDirectory\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIn your \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e, rename \\u003ccode\\u003eserverBuildDirectory\\u003c/code\\u003e to \\u003ccode\\u003eserverBuildPath\\u003c/code\\u003e and specify a module path, not a directory.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-bad=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e serverBuildDirectory: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./build\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-good=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-highlight=\\\\\\\"true\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e serverBuildPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e./build/index.js\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eRemix used to create more than a single module for the server, but it now creates a single file.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"serverbuildtarget\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#serverbuildtarget\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eserverBuildTarget\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eInstead of specifying a build target, use the \\u003ca href=\\\\\\\"../file-conventions/remix-config\\\\\\\"\\u003e\\u003ccode\\u003eremix.config.js\\u003c/code\\u003e\\u003c/a\\u003e options to generate the server build your server target expects. This change allows Remix to deploy to more JavaScript runtimes, servers, and hosts without Remix source code needing to know about them.\\u003c/p\\u003e\\\\n\\u003cp\\u003eThe following configurations should replace your current \\u003ccode\\u003eserverBuildTarget\\u003c/code\\u003e:\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"arc\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#arc\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003earc\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e publicPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/_static/build/\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e serverBuildPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eserver/index.js\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e serverMainFields: [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003emain\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003emodule\\u003c/span\\u003e\\\\\\\"], \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value, can be removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e serverMinify: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value, can be removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e serverModuleFormat: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecjs\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value in 1.x, add before upgrading\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e serverPlatform: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003enode\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value, can be removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4 id=\\\\\\\"cloudflare-pages\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#cloudflare-pages\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ecloudflare-pages\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e publicPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/build/\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value, can be removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e serverBuildPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efunctions/[[path]].js\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e serverConditions: [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eworker\\u003c/span\\u003e\\\\\\\"],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e serverDependenciesToBundle: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eall\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e serverMainFields: [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebrowser\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003emodule\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003emain\\u003c/span\\u003e\\\\\\\"],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e serverMinify: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e serverModuleFormat: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eesm\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value in 2.x, can be removed once upgraded\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e serverPlatform: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eneutral\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4 id=\\\\\\\"cloudflare-workers\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#cloudflare-workers\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ecloudflare-workers\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e publicPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/build/\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value, can be removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e serverBuildPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebuild/index.js\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value, can be removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e serverConditions: [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eworker\\u003c/span\\u003e\\\\\\\"],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e serverDependenciesToBundle: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eall\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e serverMainFields: [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebrowser\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003emodule\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003emain\\u003c/span\\u003e\\\\\\\"],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e serverMinify: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e serverModuleFormat: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eesm\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value in 2.x, can be removed once upgraded\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e serverPlatform: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eneutral\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4 id=\\\\\\\"deno\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#deno\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003edeno\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e publicPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/build/\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value, can be removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e serverBuildPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebuild/index.js\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value, can be removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e serverConditions: [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003edeno\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eworker\\u003c/span\\u003e\\\\\\\"],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e serverDependenciesToBundle: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eall\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e serverMainFields: [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003emodule\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003emain\\u003c/span\\u003e\\\\\\\"],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e serverMinify: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value, can be removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e serverModuleFormat: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eesm\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value in 2.x, can be removed once upgraded\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e serverPlatform: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eneutral\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4 id=\\\\\\\"node-cjs\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#node-cjs\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003enode-cjs\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e publicPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/build/\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value, can be removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e serverBuildPath: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebuild/index.js\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value, can be removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e serverMainFields: [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003emain\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003emodule\\u003c/span\\u003e\\\\\\\"], \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value, can be removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e serverMinify: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e, \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value, can be removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e serverModuleFormat: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecjs\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value in 1.x, add before upgrading\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e serverPlatform: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003enode\\u003c/span\\u003e\\\\\\\", \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// default value, can be removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"servermoduleformat\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#servermoduleformat\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eserverModuleFormat\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe default server module output format has changed from \\u003ccode\\u003ecjs\\u003c/code\\u003e to \\u003ccode\\u003eesm\\u003c/code\\u003e. You can continue to use CJS in v2, many dependencies in your app might not be compatible with ESM.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIn your \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e, you should specify either \\u003ccode\\u003eserverModuleFormat: \\\\\\\"cjs\\\\\\\"\\u003c/code\\u003e to retain existing behavior, or \\u003ccode\\u003eserverModuleFormat: \\\\\\\"esm\\\\\\\"\\u003c/code\\u003e, to opt into the new behavior.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"browsernodebuiltinspolyfill\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#browsernodebuiltinspolyfill\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ebrowserNodeBuiltinsPolyfill\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003ePolyfills for Node.js built-in modules are no longer provided by default for the browser. In Remix v2 you'll need to explicitly reintroduce any polyfills (or blank polyfills) as required:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e browserNodeBuiltinsPolyfill: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e modules: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e buffer: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e fs: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eempty\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e globals: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e Buffer: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eEven though we recommend being explicit about which polyfills are allowed in your browser bundle, especially since some polyfills can be quite large, you can quickly reinstate the full set of polyfills from Remix v1 with the following configuration:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003econst\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebuiltinModules\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003erequire\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003enode:module\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e browserNodeBuiltinsPolyfill: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e modules: \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003ebuiltinModules\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"servernodebuiltinspolyfill\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#servernodebuiltinspolyfill\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eserverNodeBuiltinsPolyfill\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003ePolyfills for Node.js built-in modules are no longer be provided by default for non-Node.js server platforms.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you are targeting a non-Node.js server platform and want to opt into the new default behavior in v1, in \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e you should first remove all server polyfills by explicitly providing an empty object for \\u003ccode\\u003eserverNodeBuiltinsPolyfill.modules\\u003c/code\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e serverNodeBuiltinsPolyfill: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e modules: {},\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eYou can then reintroduce any polyfills (or blank polyfills) as required.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e serverNodeBuiltinsPolyfill: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e modules: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e buffer: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e fs: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eempty\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e globals: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e Buffer: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eFor reference, the complete set of default polyfills from v1 can be manually specified as follows:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e serverNodeBuiltinsPolyfill: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e modules: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e _stream_duplex: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e _stream_passthrough: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e _stream_readable: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e _stream_transform: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e _stream_writable: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e assert: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eassert/strict\\u003c/span\\u003e\\\\\\\": \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e buffer: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e console: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e constants: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e crypto: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eempty\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e diagnostics_channel: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e domain: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e events: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e fs: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eempty\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003efs/promises\\u003c/span\\u003e\\\\\\\": \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eempty\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e http: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e https: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e module: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e os: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e path: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epath/posix\\u003c/span\\u003e\\\\\\\": \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003epath/win32\\u003c/span\\u003e\\\\\\\": \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e perf_hooks: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e process: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e punycode: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e querystring: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e stream: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003estream/promises\\u003c/span\\u003e\\\\\\\": \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003estream/web\\u003c/span\\u003e\\\\\\\": \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e string_decoder: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e sys: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e timers: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003etimers/promises\\u003c/span\\u003e\\\\\\\": \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e tty: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e url: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e util: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eutil/types\\u003c/span\\u003e\\\\\\\": \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e vm: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e wasi: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e worker_threads: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e zlib: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003etrue\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"installglobals\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#installglobals\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003einstallGlobals\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eFor preparation of using Node's built in fetch implementation, installing the fetch globals is now a responsibility of the app server. If you are using \\u003ccode\\u003eremix-serve\\u003c/code\\u003e, nothing is required. If you are using your own app server, you will need to install the globals yourself.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"server.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"server.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003einstallGlobals\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003einstallGlobals\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3 id=\\\\\\\"removal-of-exported-polyfills\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#removal-of-exported-polyfills\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRemoval of exported polyfills\\u003c/h3\\u003e\\\\n\\u003cp\\u003eRemix v2 also no longer exports these polyfilled implementations from \\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e, and instead you should just use the instances in the global namespace. One place this is likely to surface and require a change is your \\u003ccode\\u003eapp/entry.server.tsx\\u003c/code\\u003e file, where you'll also need to convert the Node \\u003ca href=\\\\\\\"https://nodejs.org/api/stream.html#class-streampassthrough\\\\\\\"\\u003e\\u003ccode\\u003ePassThrough\\u003c/code\\u003e\\u003c/a\\u003e into a web \\u003ca href=\\\\\\\"https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream\\\\\\\"\\u003e\\u003ccode\\u003eReadableStream\\u003c/code\\u003e\\u003c/a\\u003e via \\u003ccode\\u003ecreateReadableStreamFromReadable\\u003c/code\\u003e:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"app/entry.server.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"app/entry.server.tsx\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"diff\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e import { PassThrough } from \\\\\\\"node:stream\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e import type { AppLoadContext, EntryContext } from \\\\\\\"@remix-run/node\\\\\\\"; // or cloudflare/deno\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e import { Response } from \\\\\\\"@remix-run/node\\\\\\\"; // or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e import { createReadableStreamFromReadable } from \\\\\\\"@remix-run/node\\\\\\\"; // or cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e import { RemixServer } from \\\\\\\"@remix-run/react\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e import { isbot } from \\\\\\\"isbot\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e import { renderToPipeableStream } from \\\\\\\"react-dom/server\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e const ABORT_DELAY = 5_000;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e export default function handleRequest({ /* ... */ }) { ... }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e function handleBotRequest(...) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e return new Promise((resolve, reject) =\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e let shellRendered = false;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e const { pipe, abort } = renderToPipeableStream(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u0026#x3C;RemixServer ... /\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e onAllReady() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e shellRendered = true;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e const body = new PassThrough();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e responseHeaders.set(\\\\\\\"Content-Type\\\\\\\", \\\\\\\"text/html\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e resolve(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e new Response(body, {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e new Response(createReadableStreamFromReadable(body), {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"28\\\\\\\"\\u003e headers: responseHeaders,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"29\\\\\\\"\\u003e status: responseStatusCode,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"30\\\\\\\"\\u003e })\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"31\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"32\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"33\\\\\\\"\\u003e pipe(body);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"34\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"35\\\\\\\"\\u003e ...\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"36\\\\\\\"\\u003e onShellError(error: unknown) { ... }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"37\\\\\\\"\\u003e onError(error: unknown) { ... }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"38\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"39\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"40\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"41\\\\\\\"\\u003e setTimeout(abort, ABORT_DELAY);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"42\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"43\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"44\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"45\\\\\\\"\\u003e function handleBrowserRequest(...) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"46\\\\\\\"\\u003e return new Promise((resolve, reject) =\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"47\\\\\\\"\\u003e let shellRendered = false;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"48\\\\\\\"\\u003e const { pipe, abort } = renderToPipeableStream(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"49\\\\\\\"\\u003e \\u0026#x3C;RemixServer ... /\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"50\\\\\\\"\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"51\\\\\\\"\\u003e onShellReady() {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"52\\\\\\\"\\u003e shellRendered = true;\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"53\\\\\\\"\\u003e const body = new PassThrough();\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"54\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"55\\\\\\\"\\u003e responseHeaders.set(\\\\\\\"Content-Type\\\\\\\", \\\\\\\"text/html\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"56\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"57\\\\\\\"\\u003e resolve(\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"58\\\\\\\"\\u003e-\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003e new Response(body, {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"59\\\\\\\"\\u003e+\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e new Response(createReadableStreamFromReadable(body), {\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"60\\\\\\\"\\u003e headers: responseHeaders,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"61\\\\\\\"\\u003e status: responseStatusCode,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"62\\\\\\\"\\u003e })\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"63\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"64\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"65\\\\\\\"\\u003e pipe(body);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"66\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"67\\\\\\\"\\u003e onShellError(error: unknown) { ... },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"68\\\\\\\"\\u003e onError(error: unknown) { ... },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"69\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"70\\\\\\\"\\u003e );\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"71\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"72\\\\\\\"\\u003e setTimeout(abort, ABORT_DELAY);\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"73\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"74\\\\\\\"\\u003e }\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"source-map-support\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#source-map-support\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003esource-map-support\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eSource map support is now a responsibility of the app server. If you are using \\u003ccode\\u003eremix-serve\\u003c/code\\u003e, nothing is required. If you are using your own app server, you will need to install \\u003ca href=\\\\\\\"https://npm.im/source-map-support\\\\\\\"\\u003e\\u003ccode\\u003esource-map-support\\u003c/code\\u003e\\u003c/a\\u003e yourself.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\"\\u003e\\u003cpre data-nonumber=\\\\\\\"\\\\\\\" data-line-numbers=\\\\\\\"false\\\\\\\" data-lang=\\\\\\\"shellscript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003enpm\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ei\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esource-map-support\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"server.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"server.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esourceMapSupport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esource-map-support\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003esourceMapSupport\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003einstall\\u003c/span\\u003e();\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"netlify-adapter\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#netlify-adapter\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eNetlify adapter\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe \\u003ccode\\u003e@remix-run/netlify\\u003c/code\\u003e runtime adapter has been deprecated in favor of\\\\n\\u003ca href=\\\\\\\"https://github.com/netlify/remix-compute/tree/main/packages/remix-adapter\\\\\\\"\\u003e\\u003ccode\\u003e@netlify/remix-adapter\\u003c/code\\u003e\\u003c/a\\u003e \\u0026#x26; \\u003ca href=\\\\\\\"https://github.com/netlify/remix-compute/tree/main/packages/remix-edge-adapter\\\\\\\"\\u003e\\u003ccode\\u003e@netlify/remix-edge-adapter\\u003c/code\\u003e\\u003c/a\\u003e\\\\nand is now removed as of Remix v2. Please update your code by changing all \\u003ccode\\u003e@remix-run/netlify\\u003c/code\\u003e imports to\\\\n\\u003ccode\\u003e@netlify/remix-adapter\\u003c/code\\u003e.\\u003cbr\\u003e\\\\nKeep in mind that \\u003ccode\\u003e@netlify/remix-adapter\\u003c/code\\u003e requires \\u003ccode\\u003e@netlify/functions@^1.0.0\\u003c/code\\u003e, which is a breaking change compared\\\\nto the current supported \\u003ccode\\u003e@netlify/functions\\u003c/code\\u003e versions in \\u003ccode\\u003e@remix-run/netlify\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eDue to the removal of this adapter, we also removed our \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/tree/main/templates/netlify\\\\\\\"\\u003eNetlify template\\u003c/a\\u003e in favor of the\\\\n\\u003ca href=\\\\\\\"https://github.com/netlify/remix-template\\\\\\\"\\u003eofficial Netlify template\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"vercel-adapter\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#vercel-adapter\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eVercel adapter\\u003c/h2\\u003e\\\\n\\u003cp\\u003eThe \\u003ccode\\u003e@remix-run/vercel\\u003c/code\\u003e runtime adapter has been deprecated in favor of out of the box Vercel functionality and is now\\\\nremoved as of Remix v2. Please update your code by removing \\u003ccode\\u003e@remix-run/vercel\\u003c/code\\u003e \\u0026#x26; \\u003ccode\\u003e@vercel/node\\u003c/code\\u003e from your\\\\n\\u003ccode\\u003epackage.json\\u003c/code\\u003e, removing your \\u003ccode\\u003eserver.js\\u003c/code\\u003e/\\u003ccode\\u003eserver.ts\\u003c/code\\u003e file, and removing the \\u003ccode\\u003eserver\\u003c/code\\u003e \\u0026#x26; \\u003ccode\\u003eserverBuildPath\\u003c/code\\u003e options\\\\nfrom your \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eDue to the removal of this adapter, we also removed our \\u003ca href=\\\\\\\"https://github.com/remix-run/remix/tree/main/templates/vercel\\\\\\\"\\u003eVercel template\\u003c/a\\u003e in favor of the\\\\n\\u003ca href=\\\\\\\"https://github.com/vercel/vercel/tree/main/examples/remix\\\\\\\"\\u003eofficial Vercel template\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"built-in-postcsstailwind-support\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#built-in-postcsstailwind-support\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eBuilt-in PostCSS/Tailwind support\\u003c/h2\\u003e\\\\n\\u003cp\\u003eIn v2, these tools are automatically used within the Remix compiler if PostCSS and/or Tailwind configuration files are present in your project.\\u003c/p\\u003e\\\\n\\u003cp\\u003eIf you have a custom PostCSS and/or Tailwind setup outside of Remix that you'd like to maintain when migrating to v2, you can disable these features in your \\u003ccode\\u003eremix.config.js\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"remix.config.js\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/** \\u003c/span\\u003e@\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003etype\\u003c/span\\u003e\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e \\u003c/span\\u003e{\\u003cspan style=\\\\\\\"color: var(--base0A)\\\\\\\"\\u003eimport('@remix-run/dev').AppConfig\\u003c/span\\u003e}\\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003emodule\\u003c/span\\u003e.\\u003cspan style=\\\\\\\"color: var(--base0C)\\\\\\\"\\u003eexports\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003e=\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e postcss: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e tailwind: \\u003cspan style=\\\\\\\"color: var(--base09)\\\\\\\"\\u003efalse\\u003c/span\\u003e,\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e};\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2 id=\\\\\\\"troubleshooting\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#troubleshooting\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eTroubleshooting\\u003c/h2\\u003e\\\\n\\u003ch3 id=\\\\\\\"esm--commonjs-errors\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#esm--commonjs-errors\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eESM / CommonJS Errors\\u003c/h3\\u003e\\\\n\\u003cpre\\u003e\\u003ccode class=\\\\\\\"language-sh\\\\\\\"\\u003e\\\\\\\"SyntaxError: Named export '\\u0026#x3C;something\\u003e' not found. The requested module '\\u0026#x3C;something\\u003e' is a CommonJS module, which may not support all module.exports as named exports.\\\\\\\"\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003ePlease see the \\u003ca href=\\\\\\\"#servermoduleformat\\\\\\\"\\u003e\\u003ccode\\u003eserverModuleFormat\\u003c/code\\u003e\\u003c/a\\u003e section.\\u003c/p\\u003e\\\",\\\"docs/start/v2\\\",\\\"headings\\\",[960,965,969,972,975,978,981,984,987,990,993,996,999,1002,1005,1008,1011,1014,1017,1020,1023,1026,1029,1032,1035,1038,1041,1044],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"\\u003ccode\\u003eremix dev\\u003c/code\\u003e\\\",\\\"remix-dev\\\",{\\\"_961\\\":966,\\\"_955\\\":967,\\\"_24\\\":968},\\\"h3\\\",\\\"\\u003ccode\\u003eremix-serve\\u003c/code\\u003e\\\",\\\"remix-serve\\\",{\\\"_961\\\":966,\\\"_955\\\":970,\\\"_24\\\":971},\\\"Custom app server\\\",\\\"custom-app-server\\\",{\\\"_961\\\":966,\\\"_955\\\":973,\\\"_24\\\":974},\\\"After upgrading from v1 to v2\\\",\\\"after-upgrading-from-v1-to-v2\\\",{\\\"_961\\\":962,\\\"_955\\\":976,\\\"_24\\\":977},\\\"File System Route Convention\\\",\\\"file-system-route-convention\\\",{\\\"_961\\\":962,\\\"_955\\\":979,\\\"_24\\\":980},\\\"Route \\u003ccode\\u003eheaders\\u003c/code\\u003e\\\",\\\"route-headers\\\",{\\\"_961\\\":962,\\\"_955\\\":982,\\\"_24\\\":983},\\\"Route \\u003ccode\\u003emeta\\u003c/code\\u003e\\\",\\\"route-meta\\\",{\\\"_961\\\":962,\\\"_955\\\":985,\\\"_24\\\":986},\\\"\\u003ccode\\u003eCatchBoundary\\u003c/code\\u003e and \\u003ccode\\u003eErrorBoundary\\u003c/code\\u003e\\\",\\\"catchboundary-and-errorboundary\\\",{\\\"_961\\\":962,\\\"_955\\\":988,\\\"_24\\\":989},\\\"\\u003ccode\\u003eformMethod\\u003c/code\\u003e\\\",\\\"formmethod\\\",{\\\"_961\\\":962,\\\"_955\\\":991,\\\"_24\\\":992},\\\"\\u003ccode\\u003euseTransition\\u003c/code\\u003e\\\",\\\"usetransition\\\",{\\\"_961\\\":962,\\\"_955\\\":994,\\\"_24\\\":995},\\\"\\u003ccode\\u003euseFetcher\\u003c/code\\u003e\\\",\\\"usefetcher\\\",{\\\"_961\\\":962,\\\"_955\\\":997,\\\"_24\\\":998},\\\"Links \\u003ccode\\u003eimagesizes\\u003c/code\\u003e and \\u003ccode\\u003eimagesrcset\\u003c/code\\u003e\\\",\\\"links-imagesizes-and-imagesrcset\\\",{\\\"_961\\\":962,\\\"_955\\\":1000,\\\"_24\\\":1001},\\\"\\u003ccode\\u003ebrowserBuildDirectory\\u003c/code\\u003e\\\",\\\"browserbuilddirectory\\\",{\\\"_961\\\":962,\\\"_955\\\":1003,\\\"_24\\\":1004},\\\"\\u003ccode\\u003edevServerBroadcastDelay\\u003c/code\\u003e\\\",\\\"devserverbroadcastdelay\\\",{\\\"_961\\\":962,\\\"_955\\\":1006,\\\"_24\\\":1007},\\\"\\u003ccode\\u003edevServerPort\\u003c/code\\u003e\\\",\\\"devserverport\\\",{\\\"_961\\\":962,\\\"_955\\\":1009,\\\"_24\\\":1010},\\\"\\u003ccode\\u003eserverBuildDirectory\\u003c/code\\u003e\\\",\\\"serverbuilddirectory\\\",{\\\"_961\\\":962,\\\"_955\\\":1012,\\\"_24\\\":1013},\\\"\\u003ccode\\u003eserverBuildTarget\\u003c/code\\u003e\\\",\\\"serverbuildtarget\\\",{\\\"_961\\\":962,\\\"_955\\\":1015,\\\"_24\\\":1016},\\\"\\u003ccode\\u003eserverModuleFormat\\u003c/code\\u003e\\\",\\\"servermoduleformat\\\",{\\\"_961\\\":962,\\\"_955\\\":1018,\\\"_24\\\":1019},\\\"\\u003ccode\\u003ebrowserNodeBuiltinsPolyfill\\u003c/code\\u003e\\\",\\\"browsernodebuiltinspolyfill\\\",{\\\"_961\\\":962,\\\"_955\\\":1021,\\\"_24\\\":1022},\\\"\\u003ccode\\u003eserverNodeBuiltinsPolyfill\\u003c/code\\u003e\\\",\\\"servernodebuiltinspolyfill\\\",{\\\"_961\\\":962,\\\"_955\\\":1024,\\\"_24\\\":1025},\\\"\\u003ccode\\u003einstallGlobals\\u003c/code\\u003e\\\",\\\"installglobals\\\",{\\\"_961\\\":966,\\\"_955\\\":1027,\\\"_24\\\":1028},\\\"Removal of exported polyfills\\\",\\\"removal-of-exported-polyfills\\\",{\\\"_961\\\":962,\\\"_955\\\":1030,\\\"_24\\\":1031},\\\"\\u003ccode\\u003esource-map-support\\u003c/code\\u003e\\\",\\\"source-map-support\\\",{\\\"_961\\\":962,\\\"_955\\\":1033,\\\"_24\\\":1034},\\\"Netlify adapter\\\",\\\"netlify-adapter\\\",{\\\"_961\\\":962,\\\"_955\\\":1036,\\\"_24\\\":1037},\\\"Vercel adapter\\\",\\\"vercel-adapter\\\",{\\\"_961\\\":962,\\\"_955\\\":1039,\\\"_24\\\":1040},\\\"Built-in PostCSS/Tailwind support\\\",\\\"built-in-postcsstailwind-support\\\",{\\\"_961\\\":962,\\\"_955\\\":1042,\\\"_24\\\":1043},\\\"Troubleshooting\\\",\\\"troubleshooting\\\",{\\\"_961\\\":966,\\\"_955\\\":1045,\\\"_24\\\":1046},\\\"ESM / CommonJS Errors\\\",\\\"esm--commonjs-errors\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#after-upgrading-from-v1-to-v2\\\\\\": 2, "#arc\\\\\\": 1, "#browserbuilddirectory\\\\\\": 1, "#browsernodebuiltinspolyfill\\\\\\": 1, "#built-in-postcsstailwind-support\\\\\\": 1, "#catchboundary-and-errorboundary\\\\\\": 1, "#cloudflare-pages\\\\\\": 1, "#cloudflare-workers\\\\\\": 1, "#custom-app-server\\\\\\": 1, "#deno\\\\\\": 1, "#devserverbroadcastdelay\\\\\\": 1, "#devserverport\\\\\\": 1, "#esm--commonjs-errors\\\\\\": 1, "#file-system-route-convention\\\\\\": 1, "#formmethod\\\\\\": 1, "#installglobals\\\\\\": 1, "#links-imagesizes-and-imagesrcset\\\\\\": 1, "#netlify-adapter\\\\\\": 1, "#node-cjs\\\\\\": 1, "#remix-dev\\\\\\": 1, "#remix-serve\\\\\\": 1, "#removal-of-exported-polyfills\\\\\\": 1, "#route-headers\\\\\\": 1, "#route-meta\\\\\\": 1, "#serverbuilddirectory\\\\\\": 1, "#serverbuildtarget\\\\\\": 1, "#servermoduleformat\\\\\\": 2, "#servernodebuiltinspolyfill\\\\\\": 1, "#source-map-support\\\\\\": 1, "#the-matches-argument\\\\\\": 3, "#the-parentsdata-argument\\\\\\": 1, "#troubleshooting\\\\\\": 2, "#updating-to-the-new-meta\\\\\\": 1, "#upgrading-to-the-new-convention\\\\\\": 1, "#upgrading-to-v2\\\\\\": 1, "#upgrading-without-changing-files\\\\\\": 1, "#usefetcher\\\\\\": 1, "#usetransition\\\\\\": 1, "#using-v1-meta-conventions-in-v2\\\\\\": 1, "#vercel-adapter\\\\\\": 1, "$\\": 1, "$day": 4, "$projectid": 18, "$projectid/": 1, "$projectid/\\\\n│": 1, "$rc": 3, "$taskid": 4, "\u0026\u0026": 20, "*/": 26, "*/\\\\n\\u003c/span\\u003e\\u003cspan": 2, "*/\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 22, "--base03": 123, "--base05": 50, "--base08": 243, "--base09": 68, "--base0a": 80, "--base0b": 157, "--base0c": 44, "--base0d": 83, "--base0e": 168, "--base0f": 12, "--command": 1, "--manual": 3, "-1\\\\\\": 40, "-5": 2, "-\u003e": 8, "-\\u003e": 8, "-c": 4, "-d": 1, "/$": 1, "/*": 2, "/**": 26, "//": 65, "//developer": 1, "//github": 9, "//localhost": 2, "//nodejs": 1, "//npm": 1, "//schema": 2, "//twitter": 1, "//v2": 2, "/\u003e": 3, "/\\u003cspan": 16, "/\\u003e": 2, "/\\u003e\\u003c/code\\u003e": 1, "/_static/build/": 1, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/build": 1, "/build/": 4, "/build/index": 2, "/build\\u003c/span\\u003e\\\\\\": 1, "/file-conventions/remix-config\\\\\\": 1, "/future-flags\\\\\\": 1, "/guides/manual-mode\\\\\\": 1, "/guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\": 1, "/guides/vite\\\\\\": 1, "/other-api/dev\\\\\\": 1, "/public/build": 2, "/public/build\\u003c/span\\u003e\\\\\\": 2, "/route/meta\\\\\\": 1, "/server": 6, "0===e": 1, "0\\u003c/code\\u003e": 1, "10": 43, "100": 1, "1000": 1, "1001": 1, "1002": 1, "1003": 1, "1004": 1, "1005": 1, "1006": 1, "1007": 1, "1008": 1, "1009": 1, "101": 1, "1010": 1, "1011": 1, "1012": 1, "1013": 1, "1014": 1, "1015": 1, "1016": 1, "1017": 1, "1018": 1, "1019": 1, "102": 1, "1020": 1, "1021": 1, "1022": 1, "1023": 1, "1024": 1, "1025": 1, "1026": 1, "1027": 1, "1028": 1, "1029": 1, "103": 1, "1030": 1, "1031": 1, "1032": 1, "1033": 1, "1034": 1, "1035": 1, "1036": 1, "1037": 1, "1038": 1, "1039": 1, "104": 1, "1040": 1, "1041": 1, "1042": 1, "1043": 1, "1044": 1, "1045": 1, "1046": 1, "1047": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 21, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 19, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 15, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 12, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 10, "15": 1, "15+": 3, "15+\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 10, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 10, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 9, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 7, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 7, "1\\\\\\": 47, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 7, "21": 3, "210": 1, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 7, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 7, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 6, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 6, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 5, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 5, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 5, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "28\\\\\\": 5, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "29\\\\\\": 5, "2\\\\\\": 47, "30": 1, "300": 3, "3000": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30\\\\\\": 5, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "31\\\\\\": 5, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "32\\\\\\": 5, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "33\\\\\\": 5, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "34\\\\\\": 5, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "35\\\\\\": 4, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "36\\\\\\": 4, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "37\\\\\\": 4, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "38\\\\\\": 3, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "39\\\\\\": 3, "3\\\\\\": 47, "40": 1, "400": 1, "4004": 2, "4004\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "40\\\\\\": 3, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "41\\\\\\": 2, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "42\\\\\\": 2, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "43\\\\\\": 2, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "44\\\\\\": 2, "45": 2, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "45\\\\\\": 2, "46": 6, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "46\\\\\\": 2, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "47\\\\\\": 2, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "48\\\\\\": 2, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "49\\\\\\": 2, "4\\\\\\": 44, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "50\\\\\\": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "51\\\\\\": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "52\\\\\\": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "53\\\\\\": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "54\\\\\\": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "55\\\\\\": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "56\\\\\\": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "57\\\\\\": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "58\\\\\\": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "59\\\\\\": 1, "5\\\\\\": 38, "5_000": 2, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "60\\\\\\": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "61\\\\\\": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "62\\\\\\": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "63\\\\\\": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "64\\\\\\": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "65\\\\\\": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "66\\\\\\": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "67\\\\\\": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "68\\\\\\": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "69\\\\\\": 1, "6\\\\\\": 37, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "70\\\\\\": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "71\\\\\\": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "72\\\\\\": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "73\\\\\\": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "74\\\\\\": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 31, "80": 1, "800": 1, "8002": 2, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 28, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 23, "963": 1, "964": 1, "965": 1, "966": 5, "967": 1, "968": 1, "969": 1, "97": 1, "970": 1, "971": 1, "972": 1, "973": 1, "974": 1, "975": 1, "976": 1, "977": 1, "978": 1, "979": 1, "98": 1, "980": 1, "981": 1, "982": 1, "983": 1, "984": 1, "985": 1, "986": 1, "987": 1, "988": 1, "989": 1, "99": 1, "990": 1, "991": 1, "992": 1, "993": 1, "994": 1, "995": 1, "996": 1, "997": 1, "998": 1, "999": 1, "9\\\\\\": 27, "\u003c/div\u003e": 4, "\u003c/h1\u003e": 2, "\u003c/p\u003e": 5, "\u003c/pre\u003e": 2, "\u003cdiv\u003e": 4, "\u003cfetcher": 2, "\u003cform": 1, "\u003cform\u003e": 1, "\u003ch1\u003eoops\u003c/h1\u003e": 2, "\u003ch1\u003euh": 2, "\u003clink\u003e": 1, "\u003clinks\u003e": 2, "\u003cmeta": 1, "\u003cp\u003e": 2, "\u003cp\u003esomething": 2, "\u003cp\u003estatus": 2, "\u003cpre\u003e": 2, "\u003cremixserver": 2, "\u003cscript": 2, "\u003csomething\u003e": 2, "==": 5, "===": 46, "===d": 1, "==\\u003c/span\\u003e": 2, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 7, "=\\u003c/span\\u003e": 10, "=\\u003e": 2, "@context": 1, "@netlify/functions": 1, "@netlify/functions@^1": 1, "@netlify/remix-adapter": 3, "@netlify/remix-edge-adapter": 1, "@remix-run/": 1, "@remix-run/cloudflare": 1, "@remix-run/cloudflare\\\\\\": 1, "@remix-run/dev": 49, "@remix-run/netlify": 3, "@remix-run/node": 8, "@remix-run/node\\": 1, "@remix-run/node\\\\\\": 3, "@remix-run/react": 7, "@remix-run/react\\\\\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "@remix-run/v1-meta": 4, "@remix-run/v1-route-convention": 3, "@remix-run/vercel": 2, "@type": 27, "@vercel/node": 1, "\\\\\\": 1307, "\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003eplease": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003e": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003esend": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eupdate": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv": 8, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch2": 12, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch3": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4": 7, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cstrong\\u003ea": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ebecomes": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003echeck": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eeven": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003efor": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ein": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eit": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003emultiple": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eonce": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethat": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003eyou": 3, "\\\\n\\u003c/span\\u003e\\u003cspan": 359, "\\\\nif": 1, "\\\\nthen": 1, "\\\\n└──": 1, "\\n": 1, "\\u0026#x26": 23, "\\u0026#x3c": 31, "\\u003c/code\\u003e": 10, "\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eall": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e_index": 1, "\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003e_prefixed\\u003c/code\\u003e": 1, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003c/li\\u003e\\\\n\\u003c/ol\\u003e\\\\n\\u003ch3": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 29, "\\u003c/p\\u003e\\\\n\\u003ch2": 11, "\\u003c/p\\u003e\\\\n\\u003ch3": 2, "\\u003c/p\\u003e\\\\n\\u003ch4": 3, "\\u003c/p\\u003e\\\\n\\u003col\\u003e\\\\n\\u003cli\\u003e\\\\n\\u003cp\\u003eenable": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eadditionally": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003edue": 2, "\\u003c/p\\u003e\\\\n\\u003cp\\u003efor": 3, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eif": 4, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ein": 6, "\\u003c/p\\u003e\\\\n\\u003cp\\u003einstead": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eto": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eusing": 1, "\\u003c/p\\u003e\\\\n\\u003cp\\u003ewith": 1, "\\u003c/p\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 3, "\\u003c/p\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003ereplace": 1, "\\u003c/span\\u003e": 26, "\\u003c/span\\u003e$": 1, "\\u003c/span\\u003e@\\u003cspan": 22, "\\u003c/span\\u003e\\\\\\": 20, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 49, "\\u003c/span\\u003e\\u0026#x3c": 6, "\\u003c/span\\u003e\\u003cspan": 6, "\\u003ca": 22, "\\u003cbr\\u003e\\\\nkeep": 1, "\\u003ccode\\u003e": 2, "\\u003ccode\\u003e--command\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--manual\\u003c/code\\u003e": 1, "\\u003ccode\\u003e--manual\\u003c/code\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eif": 1, "\\u003ccode\\u003e-c\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@netlify/functions@^1": 1, "\\u003ccode\\u003e@netlify/functions\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@netlify/remix-adapter\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/netlify\\u003c/code\\u003e": 3, "\\u003ccode\\u003e@remix-run/node\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/v1-meta\\u003c/code\\u003e": 2, "\\u003ccode\\u003e@remix-run/v1-route-convention\\u003c/code\\u003e": 1, "\\u003ccode\\u003e@remix-run/vercel\\u003c/code\\u003e": 2, "\\u003ccode\\u003e@vercel/node\\u003c/code\\u003e": 1, "\\u003ccode\\u003e\\u0026#x3c": 6, "\\u003ccode\\u003e__double\\u003c/code\\u003e": 1, "\\u003ccode\\u003e_public": 1, "\\u003ccode\\u003e_public/route": 1, "\\u003ccode\\u003eapp/entry": 1, "\\u003ccode\\u003eassetsbuilddirectory\\u003c/code\\u003e": 1, "\\u003ccode\\u003ebrowserbuilddirectory\\u003c/code\\u003e": 1, "\\u003ccode\\u003ebrowserbuilddirectory\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003ebrowsernodebuiltinspolyfill\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003ecatchboundary\\u003c/code\\u003e": 3, "\\u003ccode\\u003ecjs\\u003c/code\\u003e": 1, "\\u003ccode\\u003ecreatereadablestreamfromreadable\\u003c/code\\u003e": 1, "\\u003ccode\\u003edashboard\\u003c/code\\u003e": 1, "\\u003ccode\\u003edashboard_\\u003c/code\\u003e": 1, "\\u003ccode\\u003edev\\u003c/code\\u003e": 2, "\\u003ccode\\u003edevserverbroadcastdelay\\u003c/code\\u003e": 1, "\\u003ccode\\u003edevserverbroadcastdelay\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003edevserverport\\u003c/code\\u003e": 1, "\\u003ccode\\u003edevserverport\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e": 3, "\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003eerrorboundary\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cdiv": 1, "\\u003ccode\\u003eesm\\u003c/code\\u003e": 1, "\\u003ccode\\u003efetch\\u003c/code\\u003e": 1, "\\u003ccode\\u003efetcher": 10, "\\u003ccode\\u003eformmethod\\u003c/code\\u003e": 1, "\\u003ccode\\u003eformmethod\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003efuture": 3, "\\u003ccode\\u003egetmatchesdata\\u003c/code\\u003e": 1, "\\u003ccode\\u003eheaders\\u003c/code\\u003e": 6, "\\u003ccode\\u003eheaders\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003eheaders\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003ein": 1, "\\u003ccode\\u003eidle": 4, "\\u003ccode\\u003eimagesizes\\u003c/code\\u003e": 2, "\\u003ccode\\u003eimagesrcset\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003eimagesrcset\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eroute": 1, "\\u003ccode\\u003eindex": 1, "\\u003ccode\\u003einstallglobals\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003elinks\\u003c/code\\u003e": 2, "\\u003ccode\\u003ematches\\u003c/code\\u003e": 2, "\\u003ccode\\u003emeta\\u003c/code\\u003e": 10, "\\u003ccode\\u003emeta\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003emeta\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003ein": 1, "\\u003ccode\\u003emeta\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cdiv": 1, "\\u003ccode\\u003emetav1\\u003c/code\\u003e": 3, "\\u003ccode\\u003enavigate": 1, "\\u003ccode\\u003enavigation": 3, "\\u003ccode\\u003enavigation\\u003c/code\\u003e": 1, "\\u003ccode\\u003enode_env=development\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003euse": 1, "\\u003ccode\\u003epackage": 1, "\\u003ccode\\u003eparentheaders\\u003c/code\\u003e": 1, "\\u003ccode\\u003eparentsdata\\u003c/code\\u003e": 3, "\\u003ccode\\u003eremix": 12, "\\u003ccode\\u003eremix-serve\\u003c/code\\u003e": 3, "\\u003ccode\\u003eremix-serve\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003erequire\\u003c/code\\u003e": 1, "\\u003ccode\\u003eresponse\\u003c/code\\u003e": 1, "\\u003ccode\\u003eroute": 1, "\\u003ccode\\u003escripts\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserver": 2, "\\u003ccode\\u003eserver\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserverbuilddirectory\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserverbuilddirectory\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003eserverbuildpath\\u003c/code\\u003e": 2, "\\u003ccode\\u003eserverbuildtarget\\u003c/code\\u003e": 1, "\\u003ccode\\u003eserverbuildtarget\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003eservermoduleformat": 2, "\\u003ccode\\u003eservermoduleformat\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003eservernodebuiltinspolyfill": 1, "\\u003ccode\\u003eservernodebuiltinspolyfill\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003esource-map-support\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003esubmission\\u003c/code\\u003e": 2, "\\u003ccode\\u003esubmit": 2, "\\u003ccode\\u003etransition": 2, "\\u003ccode\\u003etrue\\u003c/code\\u003e": 1, "\\u003ccode\\u003etype\\u003c/code\\u003e": 2, "\\u003ccode\\u003euseactiondata\\u003c/code\\u003e": 1, "\\u003ccode\\u003eusefetcher\\u003c/code\\u003e": 1, "\\u003ccode\\u003eusefetcher\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003eusenavigation": 1, "\\u003ccode\\u003eusenavigation\\u003c/code\\u003e": 2, "\\u003ccode\\u003euserouteerror\\u003c/code\\u003e": 1, "\\u003ccode\\u003eusetransition\\u003c/code\\u003e\\": 1, "\\u003ccode\\u003ev2_dev\\u003c/code\\u003e": 5, "\\u003ccode\\u003ev2_dev\\u003c/code\\u003e\\\\nor": 1, "\\u003ccode\\u003ev2_routeconvention\\u003c/code\\u003e": 1, "\\u003cem\\u003enot\\u003c/em\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 796, "\\u003cstrong\\u003edirect": 1, "\\u003e": 565, "\\u003e+\\u003cspan": 7, "\\u003e--manual\\u003c/span\\u003e": 1, "\\u003e-\\u003cspan": 11, "\\u003e-c\\u003c/span\\u003e": 1, "\\u003e-d\\u003c/span\\u003e": 1, "\\u003e/**": 22, "\\u003e//": 57, "\\u003e/_static/build/\\u003c/span\\u003e\\\\\\": 1, "\\u003e/build/\\u003c/span\\u003e\\\\\\": 4, "\\u003e0\\u003c/span\\u003e": 1, "\\u003e3000\\u003c/span\\u003e": 1, "\\u003e8002\\u003c/span\\u003e": 2, "\\u003e===\\u003c/span\\u003e": 21, "\\u003e==\\u003c/span\\u003e": 3, "\\u003e=\\u003c/span\\u003e": 45, "\\u003e=\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 11, "\\u003e=\\u003e\\u003c/span\\u003e": 4, "\\u003e@context\\u003c/span\\u003e\\\\\\": 1, "\\u003e@remix-run/node\\u003c/span\\u003e\\\\\\": 2, "\\u003e@remix-run/react\\u003c/span\\u003e\\\\\\": 6, "\\u003e@remix-run/v1-meta\\u003c/span\\u003e\\\\\\": 2, "\\u003e@remix-run/v1-route-convention\\u003c/span\\u003e\\\\\\": 1, "\\u003e@remix-run/v1-route-convention\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv": 1, "\\u003e@type\\u003c/span\\u003e\\\\\\": 1, "\\u003e\\\\\\": 1, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 58, "\\u003e\\u0026#x26": 20, "\\u003e\\u003c/code\\u003e": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003earc\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cdiv": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ebrowserbuilddirectory\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003ein": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ebrowsernodebuiltinspolyfill\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003epolyfills": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ecatchboundary\\u003c/code\\u003e": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ecloudflare-pages\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cdiv": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003ecloudflare-workers\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cdiv": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003edeno\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cdiv": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003edevserverbroadcastdelay\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003eremove": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003edevserverport\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003ein": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eformmethod\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cdiv": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003einstallglobals\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003efor": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003enode-cjs\\u003c/code\\u003e\\u003c/h4\\u003e\\\\n\\u003cdiv": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eremix": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eremix-serve\\u003c/code\\u003e\\u003c/h3\\u003e\\\\n\\u003cp\\u003eif": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eserverbuilddirectory\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003ein": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eserverbuildtarget\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003einstead": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eservermoduleformat\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eservernodebuiltinspolyfill\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003epolyfills": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003esource-map-support\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003esource": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eusefetcher\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003elike": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003e\\u003ccode\\u003eusetransition\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eafter": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebuilt-in": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ecustom": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eesm": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003efile": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003elinks": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003enetlify": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eremoval": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroute": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ethe": 2, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003etroubleshooting\\u003c/h2\\u003e\\\\n\\u003ch3": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eupdating": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eupgrading": 3, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eusing": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003evercel": 1, "\\u003e\\u003ca": 40, "\\u003e\\u003ccode\\u003e@netlify/remix-adapter\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003e@netlify/remix-edge-adapter\\u003c/code\\u003e\\u003c/a\\u003e\\\\nand": 1, "\\u003e\\u003ccode\\u003e\\u003cspan": 50, "\\u003e\\u003ccode\\u003ematches\\u003c/code\\u003e": 2, "\\u003e\\u003ccode\\u003epassthrough\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003ereadablestream\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003eremix": 2, "\\u003e\\u003ccode\\u003eservermoduleformat\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003ccode\\u003esource-map-support\\u003c/code\\u003e\\u003c/a\\u003e": 1, "\\u003e\\u003cpre": 50, "\\u003e\\u003cspan": 127, "\\u003eall\\u003c/span\\u003e\\\\\\": 3, "\\u003eapp/\\\\n├──": 3, "\\u003eapp\\u003c/span\\u003e": 1, "\\u003eargs\\u003c/span\\u003e": 6, "\\u003eassert/strict\\u003c/span\\u003e\\\\\\": 1, "\\u003easync\\u003c/span\\u003e": 1, "\\u003eawait\\u003c/span\\u003e": 1, "\\u003ebroadcastdevready\\u003c/span\\u003e": 2, "\\u003ebrowser\\u003c/span\\u003e\\\\\\": 2, "\\u003ebuild/index": 3, "\\u003ebuild\\u003c/span\\u003e\\\\\\": 1, "\\u003ebuild_dir\\u003c/span\\u003e": 2, "\\u003ebuiltinmodules\\u003c/span\\u003e": 2, "\\u003ecanonical\\u003c/span\\u003e\\\\\\": 2, "\\u003ecatchboundary\\u003c/span\\u003e": 1, "\\u003ecaught\\u003c/span\\u003e": 3, "\\u003ecjs\\u003c/span\\u003e\\\\\\": 2, "\\u003eclassic": 1, "\\u003ecomponent\\u003c/span\\u003e": 2, "\\u003econsole\\u003c/span\\u003e": 2, "\\u003econst\\u003c/span\\u003e": 32, "\\u003ecreateroutesfromfolders\\u003c/span\\u003e": 2, "\\u003ecwd\\u003c/span\\u003e": 1, "\\u003edata\\u003c/span\\u003e": 6, "\\u003edefineroutes\\u003c/span\\u003e": 2, "\\u003edeno\\u003c/span\\u003e\\\\\\": 1, "\\u003edescription\\u003c/span\\u003e\\\\\\": 2, "\\u003edev\\u003c/span\\u003e": 1, "\\u003ediv\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 8, "\\u003eempty\\u003c/span\\u003e\\\\\\": 5, "\\u003eerror\\u003c/span\\u003e": 10, "\\u003eerrorboundary\\u003c/span\\u003e": 2, "\\u003eerrormessage\\u003c/span\\u003e": 2, "\\u003eerrormessage\\u003c/span\\u003e\\u003cspan": 1, "\\u003eesm\\u003c/span\\u003e\\\\\\": 3, "\\u003eexport\\u003c/span\\u003e": 13, "\\u003eexports\\u003c/span\\u003e": 22, "\\u003efalse\\u003c/span\\u003e": 5, "\\u003efetcher\\u003c/span\\u003e": 28, "\\u003efind\\u003c/span\\u003e": 1, "\\u003eformaction\\u003c/span\\u003e": 8, "\\u003eformdata\\u003c/span\\u003e": 4, "\\u003eformmethod\\u003c/span\\u003e": 21, "\\u003efrom\\u003c/span\\u003e": 11, "\\u003efs/promises\\u003c/span\\u003e\\\\\\": 1, "\\u003efunction\\u003c/span\\u003e": 18, "\\u003efunctions/": 1, "\\u003efuture": 1, "\\u003eget\\u003c/span\\u003e\\\\\\": 7, "\\u003egetmatchesdata\\u003c/span\\u003e": 2, "\\u003eh1\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "\\u003eh1\\u003c/span\\u003e\\u003eoops\\u0026#x3c": 2, "\\u003eh1\\u003c/span\\u003e\\u003euh": 2, "\\u003ehttps": 1, "\\u003ei\\u003c/span\\u003e": 2, "\\u003eidle\\u003c/span\\u003e\\\\\\": 2, "\\u003eif\\u003c/span\\u003e": 2, "\\u003eimage\\u003c/span\\u003e\\\\\\": 2, "\\u003eimport": 22, "\\u003eimport\\u003c/span\\u003e": 12, "\\u003einstall\\u003c/span\\u003e": 1, "\\u003einstallglobals\\u003c/span\\u003e": 2, "\\u003eisactionredirect\\u003c/span\\u003e": 2, "\\u003eisactionreload\\u003c/span\\u003e": 2, "\\u003eisactionsubmission\\u003c/span\\u003e": 2, "\\u003eisdefinitelyanerror\\u003c/span\\u003e": 1, "\\u003eisdone\\u003c/span\\u003e": 1, "\\u003eisinit\\u003c/span\\u003e": 1, "\\u003eisloadersubmission\\u003c/span\\u003e": 2, "\\u003eisloadersubmissionredirect\\u003c/span\\u003e": 1, "\\u003eisnormalload\\u003c/span\\u003e": 1, "\\u003eisrouteerrorresponse\\u003c/span\\u003e": 2, "\\u003ejoin\\u003c/span\\u003e": 1, "\\u003elet\\u003c/span\\u003e": 1, "\\u003elink\\u003c/span\\u003e\\\\\\": 2, "\\u003elinks\\u003c/span\\u003e\\u003cspan": 2, "\\u003elinksfunction\\u003c/span\\u003e": 1, "\\u003elisten\\u003c/span\\u003e": 1, "\\u003eloading\\u003c/span\\u003e\\\\\\": 8, "\\u003elocation\\u003c/span\\u003e": 4, "\\u003elog\\u003c/span\\u003e": 1, "\\u003em\\u003c/span\\u003e": 2, "\\u003emain\\u003c/span\\u003e\\\\\\": 5, "\\u003emanual": 1, "\\u003ematches\\u003c/span\\u003e": 2, "\\u003ematchesdata\\u003c/span\\u003e": 2, "\\u003emessage\\u003c/span\\u003e": 2, "\\u003emessage\\u003c/span\\u003e\\u003cspan": 2, "\\u003emeta\\u003c/a\\u003e": 1, "\\u003emeta\\u003c/span\\u003e": 8, "\\u003emetav1\\u003c/span\\u003e": 2, "\\u003emodule\\u003c/span\\u003e": 22, "\\u003emodule\\u003c/span\\u003e\\\\\\": 5, "\\u003enavigation\\u003c/span\\u003e": 28, "\\u003enetlify": 1, "\\u003eneutral\\u003c/span\\u003e\\\\\\": 3, "\\u003enode": 2, "\\u003enode\\u003c/span\\u003e\\\\\\": 2, "\\u003enpm\\u003c/span\\u003e": 2, "\\u003enull\\u003c/span\\u003e": 9, "\\u003eofficial": 2, "\\u003eog": 5, "\\u003eorganization\\u003c/span\\u003e\\\\\\": 1, "\\u003eoriginal": 2, "\\u003ep\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 6, "\\u003ep\\u003c/span\\u003e\\u003e\\u003cspan": 2, "\\u003ep\\u003c/span\\u003e\\u003esomething": 2, "\\u003ep\\u003c/span\\u003e\\u003estatus": 2, "\\u003eparentdata\\u003c/span\\u003e": 2, "\\u003eparentsdata\\u003c/span\\u003e": 1, "\\u003epath/posix\\u003c/span\\u003e\\\\\\": 1, "\\u003epath/win32\\u003c/span\\u003e\\\\\\": 1, "\\u003epath\\u003c/span\\u003e": 1, "\\u003epathname\\u003c/span\\u003e": 4, "\\u003eport\\u003c/span\\u003e": 3, "\\u003epost\\u003c/span\\u003e\\\\\\": 4, "\\u003epre\\u003c/span\\u003e\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003epre\\u003c/span\\u003e\\u003e\\u003cspan": 2, "\\u003epreload\\u003c/span\\u003e\\\\\\": 2, "\\u003eprocess\\u003c/span\\u003e": 1, "\\u003eremix": 1, "\\u003eremix\\u003c/span\\u003e": 1, "\\u003eremix\\u003c/span\\u003e\\\\\\": 1, "\\u003erequire\\u003c/span\\u003e": 2, "\\u003ereturn\\u003c/span\\u003e": 12, "\\u003eroot-level": 1, "\\u003erootmeta\\u003c/span\\u003e": 2, "\\u003eroutes/parent\\u003c/span\\u003e\\\\\\": 2, "\\u003eroutes\\u003c/span\\u003e": 1, "\\u003escript": 2, "\\u003eserver/index": 1, "\\u003eshouldrevalidate\\u003c/span\\u003e": 1, "\\u003esomecomponent\\u003c/span\\u003e": 4, "\\u003esomething\\u003c/span\\u003e": 1, "\\u003esource-map-support\\u003c/span\\u003e\\\\\\": 1, "\\u003esource-map-support\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cdiv": 1, "\\u003esourcemapsupport\\u003c/span\\u003e": 2, "\\u003estate\\u003c/span\\u003e": 14, "\\u003estatus\\u003c/span\\u003e\\u003cspan": 2, "\\u003estream/promises\\u003c/span\\u003e\\\\\\": 1, "\\u003estream/web\\u003c/span\\u003e\\\\\\": 1, "\\u003esubmission\\u003c/span\\u003e": 6, "\\u003esubmitting\\u003c/span\\u003e\\\\\\": 2, "\\u003etemplates\\u003c/a\\u003e": 1, "\\u003etimers/promises\\u003c/span\\u003e\\\\\\": 1, "\\u003etitle\\u003c/span\\u003e": 3, "\\u003etransition\\u003c/span\\u003e": 5, "\\u003etroubleshooting\\u003c/a\\u003e": 1, "\\u003etrue\\u003c/span\\u003e": 50, "\\u003etype\\u003c/span\\u003e": 4, "\\u003etype\\u003c/span\\u003e\\u003cspan": 22, "\\u003eunknown": 2, "\\u003eusecatch\\u003c/span\\u003e": 2, "\\u003eusefetcher\\u003c/span\\u003e": 5, "\\u003eusenavigation\\u003c/span\\u003e": 4, "\\u003euserouteerror\\u003c/span\\u003e": 2, "\\u003eusetransition\\u003c/span\\u003e": 2, "\\u003eutil/types\\u003c/span\\u003e\\\\\\": 1, "\\u003ev2_linksfunction\\u003c/span\\u003e": 1, "\\u003evalue\\u003c/span\\u003e\\\\\\": 1, "\\u003evercel": 1, "\\u003eworker\\u003c/span\\u003e\\\\\\": 3, "\\u003e||\\u003c/span\\u003e": 1, "\\u003e🎥": 1, "\\u003e👉": 1, "_-b4drxahv": 1, "_1048\\": 1, "_1049\\": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 28, "_22\\": 152, "_24\\": 180, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 29, "_958\\": 1, "_961\\": 28, "_9\\": 1, "__auth": 2, "__auth/": 1, "__auth/\\\\n│": 1, "__double": 1, "__public": 2, "__public/": 1, "__public/\\\\n│": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_auth": 10, "_index": 11, "_prefixed": 1, "_public": 13, "_public/": 1, "_public/\\\\n│": 1, "_public/route": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "_stream_duplex": 2, "_stream_passthrough": 2, "_stream_readable": 2, "_stream_transform": 2, "_stream_writable": 2, "a=a": 1, "a=document": 1, "abort": 8, "abort_delay": 6, "about": 5, "about-us": 6, "access": 2, "accessed": 2, "accessibility\\": 1, "accessing": 2, "accordingly": 2, "accurately": 4, "across": 6, "action": 6, "action\\": 1, "actiondata\\": 1, "actionredirect": 2, "actionredirect\\\\\\": 2, "actionreload": 2, "actionreload\\\\\\": 2, "actions": 2, "actionsubmission": 2, "actionsubmission\\\\\\": 2, "adapter": 13, "adapter\\": 2, "adapter\\u003c/h2\\u003e\\\\n\\u003cp\\u003ethe": 2, "adapterbuilt-in": 2, "adapters": 3, "adaptervercel": 2, "add": 16, "addition": 2, "additional": 2, "additionally": 1, "after": 7, "after-upgrading-from-v1-to-v2\\": 1, "after-upgrading-from-v1-to-v2\\\\\\": 1, "ahead": 2, "align": 4, "all": 25, "allowed": 2, "allows": 6, "also": 14, "an": 19, "ancestor": 2, "and": 96, "and/or": 4, "any": 10, "api": 8, "api@remix-run/dev": 2, "api\\": 1, "apis": 4, "app": 26, "app/": 3, "app/entry": 3, "app/routes/v1-route": 14, "app/routes/v2-route": 16, "appconfig": 26, "appconfig\\u003c/span\\u003e": 22, "apploadcontext": 2, "approach": 1, "arc": 1, "arc\\\\\\": 1, "are": 50, "args": 6, "argument": 5, "argument\\u003c/a\\u003e": 1, "argument\\u003c/h4\\u003e\\\\n\\u003cp\\u003ein": 1, "argument\\u003c/h4\\u003e\\\\n\\u003cp\\u003enote": 1, "arguments": 3, "arguments\\u003c/a\\u003e": 1, "aria-hidden=\\\\\\": 40, "array": 6, "as": 35, "ask": 4, "asked": 1, "assert": 2, "assert/strict": 1, "asset": 3, "assetsbuilddirectory": 3, "async": 1, "at": 3, "attrs\\": 1, "auth": 2, "automatically": 2, "available": 2, "avoid": 4, "await": 1, "await\\": 1, "away": 2, "b=document": 1, "backend": 3, "background": 4, "basename": 1, "be": 65, "because": 4, "becomes": 3, "been": 7, "before": 7, "behavior": 22, "behaviors": 2, "being": 2, "between": 2, "blank": 4, "body": 16, "box": 2, "breadcrumbs": 3, "break": 1, "breaking": 2, "breeze": 1, "bring": 2, "brings": 2, "broadcastdevready": 2, "browser": 9, "browserbuilddirectory": 4, "browserbuilddirectory\\": 1, "browserbuilddirectory\\\\\\": 1, "browsernodebuiltinspolyfill": 5, "browsernodebuiltinspolyfill\\": 1, "browsernodebuiltinspolyfill\\\\\\": 1, "buffer": 10, "build": 5, "build/index": 3, "build_dir": 2, "built": 3, "built-in": 6, "built-in-postcsstailwind-support\\": 1, "built-in-postcsstailwind-support\\\\\\": 1, "builtinmodules": 2, "bundle": 2, "bundles": 2, "bundles\\": 1, "bundling": 2, "bundling\\": 1, "but": 8, "by": 22, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "cache": 2, "calendar": 8, "calendar/": 1, "calendar/\\\\n│": 1, "called": 2, "came": 4, "camelcase": 4, "can": 91, "canonical": 2, "catch": 1, "catchboundary": 6, "catchboundary-and-errorboundary\\": 1, "catchboundary-and-errorboundary\\\\\\": 1, "caught": 3, "change": 12, "changed": 6, "changelog": 2, "changelog\\": 1, "changing": 4, "check": 3, "checking": 4, "checkout": 2, "children\\": 1, "choose": 2, "cjs": 6, "cjs\\\\\\": 1, "class=\\\\\\": 660, "classic": 1, "cli": 5, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "closer": 2, "closest": 2, "cloudflare": 1, "cloudflare-pages": 1, "cloudflare-pages\\\\\\": 1, "cloudflare-workers": 1, "cloudflare-workers\\\\\\": 1, "cloudflare/deno": 3, "cloudflare/deno\\\\n\\u003c/span\\u003e\\u003cspan": 1, "cloudflare/deno\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "cloudflare\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "co-locate": 2, "co-location": 2, "code": 12, "codeblock-line\\\\\\": 616, "collaborators": 4, "color": 1028, "com/brookslybrand/status/1704265835546578989\\\\\\": 1, "com/netlify/remix-compute/tree/main/packages/remix-adapter\\\\\\": 1, "com/netlify/remix-compute/tree/main/packages/remix-edge-adapter\\\\\\": 1, "com/netlify/remix-template\\\\\\": 1, "com/remix-run/remix/discussions/4462\\\\\\": 1, "com/remix-run/remix/discussions/4482\\\\\\": 1, "com/remix-run/remix/tree/main/templates/netlify\\\\\\": 1, "com/remix-run/remix/tree/main/templates/vercel\\\\\\": 1, "com/remix-run/remix/tree/main/templates\\\\\\": 1, "com/vercel/vercel/tree/main/examples/remix\\\\\\": 1, "common": 4, "commonjs": 7, "community": 3, "community\\": 1, "compared": 1, "compared\\\\nto": 1, "compatible": 2, "compiler": 5, "compiler\\u003c/a\\u003e": 1, "complete": 2, "component": 4, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "conditions": 2, "config": 76, "config\\u003c/a\\u003e": 1, "configuration": 8, "configuration\\": 1, "configurations": 2, "confusion": 2, "console": 5, "const": 42, "constants": 2, "constraints": 2, "constraints\\": 1, "contact": 4, "content": 8, "content-type": 2, "content-type\\\\\\": 2, "continue": 4, "contributing": 3, "contributing\\": 1, "control": 2, "controller": 2, "convention": 10, "convention\\": 1, "convention\\u003c/h2\\u003e\\\\n\\u003ch4": 1, "convention\\u003c/h4\\u003e\\\\n\\u003cul\\u003e\\\\n\\u003cli\\u003eroute": 1, "conventionroute": 2, "conventions": 6, "conventions\\": 1, "convert": 2, "converting": 2, "cookies\\": 1, "correct": 4, "could": 2, "create": 6, "create-remix": 3, "created": 2, "createreadablestreamfromreadable": 7, "createremixstub": 2, "createremixstub\\": 1, "createroutesfromfolders": 2, "creates": 2, "cross-env": 4, "crypto": 2, "css": 15, "css\\": 1, "current": 4, "currently": 2, "custom": 4, "custom-app-server\\": 1, "custom-app-server\\\\\\": 1, "cwd": 1, "d=c": 2, "d\\u003c/p\\u003e\\\\n\\u003cdiv": 2, "dashboard": 27, "dashboard/": 1, "dashboard/\\\\n│": 1, "dashboard_": 3, "data": 37, "data-bad=\\\\\\": 20, "data-code-block=\\\\\\": 50, "data-filename=\\\\\\": 88, "data-good=\\\\\\": 22, "data-highlight=\\\\\\": 13, "data-lang=\\\\\\": 100, "data-line-number=\\\\\\": 613, "data-line-numbers=\\\\\\": 100, "data-nonumber=\\\\\\": 6, "data=": 1, "data\\": 2, "data\\u003c/code\\u003e": 1, "deeper": 2, "deepest": 2, "default": 52, "defer": 2, "defer\\": 1, "deferred": 1, "define": 2, "defineroutes": 2, "deno": 2, "deno\\\\\\": 1, "dependencies": 2, "dependency": 3, "deploy": 2, "deployment": 4, "deployment\\": 2, "deprecated": 4, "derive": 4, "description": 8, "description\\": 1, "descriptors": 4, "details": 2, "dev": 18, "dev\\\\\\": 1, "dev\\u003c/code\\u003e": 1, "dev\\u003c/code\\u003e\\": 1, "dev\\u003c/code\\u003e\\u003c/h2\\u003e\\\\n\\u003cp\\u003efor": 1, "dev\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003cli\\u003eremove": 1, "development": 5, "devremix-servecustom": 2, "devserverbroadcastdelay": 4, "devserverbroadcastdelay\\": 1, "devserverbroadcastdelay\\\\\\": 1, "devserverport": 4, "devserverport\\": 1, "devserverport\\\\\\": 1, "diagnostics_channel": 2, "diff\\\\\\": 8, "different": 6, "differentiate": 4, "direct": 1, "directly": 2, "directory": 4, "disable": 2, "disabling": 3, "discord": 4, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "disruption": 2, "do": 1, "doc\\": 1, "docs": 3, "docs/start/v2": 1, "docs/start/v2\\": 1, "docs\\u003c/a\\u003e": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsupgrading": 1, "document": 1, "documentation": 3, "documentation\\u003c/a\\u003e": 1, "doing": 2, "domain": 2, "don": 4, "done": 2, "done\\\\\\": 1, "dots": 4, "dozens": 2, "due": 2, "e--": 1, "e=0": 1, "each": 4, "easily": 2, "easy": 2, "edit": 4, "either": 2, "eliminated": 2, "else": 2, "empty": 7, "enable": 3, "enabled": 6, "enables": 2, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "entire": 4, "entry": 6, "entrycontext": 2, "environment": 3, "error": 28, "error\\u003c/span\\u003e\\\\\\": 2, "errorboundary": 8, "errorboundary\\": 1, "errorboundaryformmethodusetransitionusefetcherlinks": 2, "errormessage": 3, "errors": 3, "errors\\": 2, "errors\\u003c/h3\\u003e\\\\n\\u003cpre\\u003e\\u003ccode": 1, "errorson": 1, "errorsupgrading": 1, "esm": 9, "esm--commonjs-errors\\": 1, "esm--commonjs-errors\\\\\\": 1, "esm\\\\\\": 1, "especially": 2, "etc": 2, "even": 9, "events": 2, "ever": 2, "every": 4, "everything": 1, "example": 4, "examples": 7, "except": 4, "exceptions": 4, "executing": 4, "execution": 2, "execution\\": 1, "existing": 2, "expects": 2, "explanation": 2, "explanation\\": 1, "explicit": 2, "explicitly": 4, "export": 17, "exported": 5, "exports": 36, "extract": 2, "extract\\": 1, "f=a": 1, "false": 12, "false\\\\\\": 6, "faqs": 2, "faqs\\": 1, "favor": 8, "features": 3, "feel": 4, "fetch": 7, "fetch\\": 1, "fetcher": 58, "fetcher\\": 1, "field": 6, "file": 23, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "file-system-route-convention\\": 1, "file-system-route-convention\\\\\\": 1, "filename\\": 1, "files": 7, "files\\": 1, "files\\u003c/h4\\u003e\\\\n\\u003cp\\u003eyou": 1, "find": 1, "finds": 2, "first": 2, "firstchild": 2, "flag": 7, "flag\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "flags": 5, "flags\\": 1, "flags\\u003c/a\\u003e": 1, "flat": 2, "flattened": 5, "flattened\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "flattens": 4, "flexibility": 2, "flow": 2, "flow\\": 1, "folder": 4, "follow": 2, "following": 8, "follows": 2, "footer": 2, "for": 50, "forget": 4, "form": 18, "form*": 2, "form*\\u003c/code\\u003e": 2, "form\u003e": 1, "form\\": 1, "form\\u003e\\u003c/code\\u003e": 2, "formaction": 8, "format": 2, "formdata": 6, "formdata\\u003c/code\\u003e": 2, "formmethod": 23, "formmethod\\": 1, "formmethod\\\\\\": 1, "found": 5, "free": 4, "frequently": 1, "from": 83, "frontend": 2, "frontend\\": 1, "fs": 6, "fs/promises": 1, "full": 2, "fullstack": 3, "function": 51, "functionality": 2, "functionally": 4, "functions": 6, "functions/": 1, "future": 24, "generate": 2, "get": 47, "get\\\\\\": 2, "getelementbyid": 2, "getitem": 1, "getmatchesdata": 3, "getting": 2, "githubchat": 1, "global": 2, "globals": 8, "go": 8, "goes": 2, "gotchas": 2, "gotchas\\": 1, "gotten": 2, "group": 2, "grouped": 2, "guidance": 4, "guide": 4, "guide\\": 1, "guide\\u003c/a\\u003e": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "h3\\": 1, "had": 10, "handle": 2, "handle\\": 1, "handlebotrequest": 2, "handlebrowserrequest": 2, "handlerequest": 2, "handles": 2, "handling": 4, "handling\\": 2, "has": 16, "hascontent\\": 1, "have": 15, "have\\\\nbeen": 1, "having": 4, "header": 2, "headers": 17, "headers\\": 1, "headersroute": 2, "headinglevel\\": 1, "headings\\": 1, "help": 5, "here": 3, "hierarchy": 6, "history": 4, "hood": 2, "hook": 6, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hosts": 2, "hot": 3, "how": 7, "href": 4, "href=\\\\\\": 65, "html": 3, "html#class-streampassthrough\\\\\\": 1, "html\\": 1, "http": 6, "https": 18, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 40, "icon-link\\\\\\": 40, "id": 2, "id=\\\\\\": 40, "idle": 10, "idle\\u003c/code\\u003e": 4, "if": 48, "im/source-map-support\\\\\\": 1, "image": 2, "imagesizes": 7, "imagesrcset": 5, "imagesrcsetbrowserbuilddirectorydevserverbroadcastdelaydevserverportserverbuilddirectoryserverbuildtargetservermoduleformatbrowsernodebuiltinspolyfillservernodebuiltinspolyfillinstallglobalsremoval": 2, "implementation": 2, "implementations": 2, "import": 59, "import\\\\\\": 1, "important": 2, "imports": 6, "imports\\": 2, "in": 134, "inc": 1, "include": 2, "includes": 2, "index": 14, "init": 1, "init\\\\\\": 1, "initial": 1, "inputs": 4, "insertbefore": 1, "inside": 2, "install": 5, "installglobals": 3, "installglobals\\": 1, "installglobals\\\\\\": 1, "installing": 2, "instances": 2, "instead": 16, "integrate": 2, "integrating": 1, "interactions": 1, "into": 10, "introduction": 1, "is": 55, "isactionredirect": 2, "isactionreload": 2, "isactionsubmission": 2, "isbot": 3, "isbot\\\\\\": 1, "isdefinitelyanerror": 1, "isdone": 1, "isinit": 1, "isloadersubmission": 2, "isloadersubmissionredirect": 1, "isnormalload": 1, "isrouteerrorresponse": 4, "isrouteerrorresponse\\": 1, "isspamode": 1, "issues": 2, "it": 33, "iterative": 1, "its": 4, "itself": 2, "javascript": 4, "javascript\\": 1, "javascript\\\\\\": 44, "join": 1, "js": 36, "js/server": 1, "js\\": 1, "js\\\\\\": 51, "js\\u003c/code\\u003e": 10, "js\\u003c/code\\u003e/\\u003ccode\\u003eserver": 1, "js\\u003c/code\\u003e\\u003c/a\\u003e": 1, "js\\u003c/span\\u003e": 1, "js\\u003c/span\\u003e\\\\\\": 6, "json": 5, "json\\": 1, "json\\\\\\": 2, "json\\u003c/code\\u003e": 2, "just": 10, "keep": 9, "key": 10, "keyed": 2, "keys": 4, "know": 3, "language-sh\\\\\\": 1, "language-text\\\\\\": 3, "large": 2, "layout": 2, "lazy": 3, "ld+json": 2, "ld+json\\u003c/span\\u003e\\\\\\": 2, "leaf": 8, "learning": 1, "let": 8, "licensed": 1, "like": 9, "likely": 2, "line": 2, "link": 4, "link\\": 1, "link\\u003e\\u003c/code\\u003e": 1, "links": 12, "links-imagesizes-and-imagesrcset\\": 1, "links-imagesizes-and-imagesrcset\\\\\\": 1, "links\\": 2, "links\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "linksfunction": 1, "listen": 1, "livereload": 2, "livereload\\": 1, "ll": 10, "load": 2, "loader": 10, "loader\\": 1, "loaderdata\\": 1, "loaders": 2, "loadersubmission": 2, "loadersubmission\\\\\\": 2, "loadersubmissionredirect": 1, "loadersubmissionredirect\\\\\\": 1, "loading": 21, "loading\\": 1, "loads": 2, "local": 3, "localhost\\": 1, "location": 8, "location\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 4, "log": 1, "logdevready": 4, "logic": 4, "login": 4, "logout": 4, "longer": 14, "looking": 4, "looks": 2, "lowercase": 6, "main": 5, "maintain": 2, "make": 2, "makes": 3, "manage": 4, "management": 4, "management\\": 2, "manual": 4, "manually": 2, "many": 2, "map": 2, "match": 4, "matches": 8, "matchesdata": 2, "matching": 2, "math": 1, "may": 8, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "merge": 12, "merged": 2, "merging": 4, "message": 6, "meta": 48, "meta\\": 2, "metacatchboundary": 2, "metav1": 5, "method": 6, "method=": 2, "method=\\\\\\": 2, "might": 2, "migrating": 10, "mind": 6, "minutes": 2, "mitedit": 1, "mode": 5, "mode\\": 1, "module": 54, "module\\": 1, "module\\u003c/span\\u003e\\\\\\": 1, "moduleaction": 2, "modules": 25, "modules\\": 3, "modules\\u003c/code\\u003e": 1, "more": 20, "most": 1, "move": 4, "mozilla": 1, "multiple": 1, "must": 4, "name": 8, "named": 4, "names": 2, "namespace": 2, "naming": 2, "naming\\": 1, "navigate": 1, "navigating": 6, "navigation": 40, "navigations": 2, "navlink": 2, "navlink\\": 1, "necessitated": 2, "need": 13, "needed": 6, "needing": 2, "nested": 2, "nesting": 7, "nesting\\u003c/li\\u003e\\\\n\\u003cli\\u003e\\u003ccode\\u003esuffixed_\\u003c/code\\u003e": 1, "netlify": 5, "netlify-adapter\\": 1, "netlify-adapter\\\\\\": 1, "network": 3, "neutral": 3, "new": 38, "new\\": 1, "nextsibling": 2, "no": 22, "node": 18, "node-cjs": 1, "node-cjs\\\\\\": 1, "node_env=development": 5, "nodetype": 1, "noindex\\": 1, "non-breaking": 2, "non-node": 4, "normal": 4, "normalload": 1, "normalload\\\\\\": 1, "not": 24, "note": 8, "nothing": 4, "now": 31, "now\\\\nremoved": 1, "npm": 2, "null": 10, "number": 1, "object": 12, "objects": 4, "of": 89, "of\\\\n\\u003ca": 1, "official": 2, "og": 5, "oh": 4, "old": 2, "on": 23, "onallready": 2, "once": 10, "one": 5, "onerror": 4, "only": 10, "onshellerror": 4, "onshellready": 2, "onto": 2, "open": 1, "opt": 4, "opt-into": 2, "opt-out": 2, "optimization": 2, "optimization\\": 1, "option": 2, "optional": 2, "options": 5, "options\\\\nfrom": 1, "or": 34, "order\\": 1, "org": 1, "org/api/stream": 1, "org/en-us/docs/web/api/readablestream\\\\\\": 1, "org\\u003c/span\\u003e\\\\\\": 1, "organization": 3, "original": 2, "os": 2, "other": 5, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "otherwise": 2, "our": 6, "out": 11, "outlet": 2, "outlet\\": 1, "output": 2, "outside": 2, "over": 2, "own": 8, "package": 8, "pageremix": 2, "param": 6, "param\\": 1, "parent": 10, "parentdata": 2, "parentheaders": 1, "parentnode": 2, "parentsdata": 4, "parse": 1, "pass": 2, "passed": 2, "passthrough": 7, "path": 11, "path/posix": 1, "path/win32": 1, "pathname": 4, "pending": 3, "perf_hooks": 2, "performance": 2, "performance\\": 1, "performing": 4, "pipe": 8, "pipethrough": 1, "place": 2, "platform": 2, "platforms": 2, "please": 5, "polyfilled": 2, "polyfills": 21, "polyfills\\": 1, "polyfills\\u003c/h3\\u003e\\\\n\\u003cp\\u003eremix": 1, "polyfillssource-map-supportnetlify": 2, "populated": 4, "port": 10, "port\\u003c/code\\u003e": 1, "positions": 2, "post": 4, "postcss": 8, "postcss/tailwind": 5, "postcss\\": 1, "potential": 2, "potentially": 2, "prefer": 2, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "prefix": 2, "preload": 2, "preparation": 2, "present": 2, "presets": 2, "presets\\": 1, "previous": 4, "previoussibling": 1, "primary": 1, "print": 4, "probably": 4, "process": 3, "progressive": 3, "project": 5, "projects": 22, "projects/": 1, "projects/\\\\n│": 1, "promise": 4, "properties": 2, "property": 4, "proposal": 2, "proposal\\u003c/a\\u003e": 2, "props": 2, "provided": 4, "provides": 4, "providing": 2, "publicpath": 10, "pull": 1, "punycode": 2, "purging": 2, "query": 3, "querystring": 2, "questions": 1, "quick": 3, "quickest": 1, "quickly": 5, "quite": 6, "race": 2, "random": 1, "re": 18, "react": 12, "react-dom/server": 1, "react-dom/server\\\\\\": 1, "react-router-scroll-positions": 1, "readablestream": 2, "ready": 3, "ready\\\\\\": 1, "receives": 2, "recent": 2, "recommend": 2, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "redirected": 1, "redirected\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "redundant": 2, "refer": 2, "reference": 2, "reflected": 4, "regular": 3, "reinstate": 2, "reintroduce": 4, "reject": 4, "rel": 8, "related": 5, "released": 2, "reloading": 1, "reloading\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "relying": 2, "remix": 118, "remix-dev\\": 1, "remix-dev\\\\\\": 1, "remix-serve": 4, "remix-serve\\": 1, "remix-serve\\\\\\": 1, "remix\\": 2, "remix\\\\\\": 1, "remixserver": 4, "removal": 6, "removal-of-exported-polyfills\\": 1, "removal-of-exported-polyfills\\\\\\": 1, "remove": 6, "removechild": 2, "removed": 31, "removed\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 16, "removeitem": 1, "removing": 6, "rename": 6, "render": 4, "rendered": 11, "rendered\\\\\\": 1, "rendertopipeablestream": 6, "replace": 5, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "replicate": 2, "request": 3, "requested": 2, "requests": 2, "require": 7, "required": 8, "requires": 2, "resolve": 8, "resource": 3, "resources": 1, "response": 13, "responseheaders": 8, "responsestatuscode": 4, "responsibility": 6, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "result": 4, "retain": 2, "return": 24, "returned": 12, "returning": 2, "returns": 4, "right": 2, "rocking": 1, "rolling": 1, "root": 9, "root-level": 1, "root\\": 1, "rootmeta": 2, "route": 61, "route-headers\\": 1, "route-headers\\\\\\": 1, "route-meta\\": 1, "route-meta\\\\\\": 1, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "route\\u003c/strong\\u003e": 1, "routediscovery": 1, "router": 7, "router\\": 2, "routes": 31, "routes/": 3, "routes/\\\\n│": 3, "routes/docs": 3, "routes/docs\\": 1, "routes/parent": 2, "routes\\": 2, "routes\\\\\\": 1, "run": 2, "run/docs/start/v2": 1, "run\\": 1, "running": 2, "running\\u003c/p\\u003e\\\\n\\u003cdiv": 1, "runtime": 4, "runtimes": 5, "same": 16, "script": 4, "scripts": 4, "scripts\\": 1, "scripts\\\\\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "search": 4, "section": 4, "see": 10, "segments": 4, "semantically": 4, "send": 1, "seo": 4, "server": 59, "server/index": 1, "server\\": 4, "server\\\\\\": 1, "server\\u003c/h3\\u003e\\\\n\\u003cp\\u003eif": 1, "server\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003efor": 1, "serverafter": 2, "serverbuilddirectory": 4, "serverbuilddirectory\\": 1, "serverbuilddirectory\\\\\\": 1, "serverbuildpath": 14, "serverbuildtarget": 2, "serverbuildtarget\\": 1, "serverbuildtarget\\\\\\": 1, "serverconditions": 6, "serverdependenciestobundle": 6, "servermainfields": 10, "serverminify": 10, "servermoduleformat": 14, "servermoduleformat\\": 1, "servermoduleformat\\\\\\": 1, "servernodebuiltinspolyfill": 8, "servernodebuiltinspolyfill\\": 1, "servernodebuiltinspolyfill\\\\\\": 1, "serverplatform": 10, "servers": 2, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 10, "settimeout": 4, "setting": 2, "settings": 4, "setup": 2, "share": 4, "shellrendered": 8, "shellscript\\\\\\": 6, "shopify": 1, "should": 14, "shouldrevalidate": 3, "shouldrevalidate\\": 1, "signature": 2, "signup": 4, "simpler": 4, "simplifying": 1, "since": 6, "single": 7, "siteurl\\": 1, "slice": 1, "slightly": 2, "slug\\": 1, "snuck": 2, "so": 6, "some": 8, "somecomponent": 4, "something": 1, "something\\u003e": 2, "source": 3, "source-map-support": 4, "source-map-support\\": 1, "source-map-support\\\\\\": 1, "sourcemapsupport": 2, "spa": 3, "specific": 2, "specifications": 2, "specified": 2, "specify": 4, "specifying": 6, "ssr": 1, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 26, "state\\u003c/code\\u003e": 6, "status": 6, "steps": 2, "still": 2, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 5, "stream/promises": 1, "stream/web": 1, "stream\\\\\\": 1, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "string_decoder": 2, "style=\\\\\\": 1028, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "submission": 24, "submissions": 10, "submissions\\u003c/strong\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003ein": 2, "submit": 6, "submitted": 4, "submitting": 8, "submitting\\\\\\": 2, "such": 4, "suffixed_": 1, "support": 8, "support\\": 2, "support\\u003c/h2\\u003e\\\\n\\u003cp\\u003ein": 1, "supported": 2, "supporttroubleshootingesm": 2, "surface": 2, "syntaxerror": 2, "sys": 2, "system": 5, "tabindex=\\\\\\": 40, "tagname": 4, "tags": 4, "tailwind": 8, "tailwind\\": 1, "target": 4, "targeting": 2, "tasks": 4, "technical": 3, "technologies\\": 1, "tedious": 2, "template": 4, "template\\u003c/a\\u003e": 4, "templates": 6, "templates\\": 1, "text/html": 2, "text/html\\\\\\": 2, "textencoderstream": 1, "than": 2, "thank": 1, "that": 25, "the": 253, "the-matches-argument\\\\\\": 1, "the-parentsdata-argument\\\\\\": 1, "the\\\\n\\u003ca": 2, "them": 4, "then": 11, "there": 6, "these": 12, "they": 10, "things": 2, "this": 60, "though": 6, "through": 1, "thrown": 4, "thus": 4, "time": 4, "timers": 2, "timers/promises": 1, "tips": 2, "title": 16, "title\\": 1, "title\\u003c/span\\u003e\\\\\\": 5, "tls": 2, "tls\\": 1, "to": 172, "to\\\\n\\u003ccode\\u003e@netlify/remix-adapter\\u003c/code\\u003e": 1, "toc\\": 1, "together": 4, "tools": 2, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "transition": 19, "trouble": 2, "troubleshooting": 2, "troubleshooting\\": 2, "troubleshooting\\\\\\": 1, "true": 63, "true\\\\\\": 147, "try": 1, "ts": 3, "ts\\": 1, "ts\\\\\\": 4, "ts\\u003c/code\\u003e": 1, "tsx": 57, "tsx\\\\\\": 68, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003ebecomes": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003efor": 1, "tsx\\\\n\\u003c/code\\u003e\\u003c/pre\\u003e\\\\n\\u003cp\\u003enote": 1, "tsx\\\\n│": 46, "tsx\\\\n└──": 2, "tsx\\u003c/code\\u003e": 5, "tsx\\u003c/code\\u003e\\u003c/li\\u003e\\\\n\\u003c/ul\\u003e\\\\n\\u003cp\\u003ea": 1, "tty": 2, "tutorial": 3, "two": 2, "type": 34, "type=ld+json\u003e": 2, "type=ld+json\\u003e\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "type\\u003c/code\\u003e": 2, "typecheck": 2, "typeof": 1, "typescript": 2, "typescript\\": 1, "typescript\\\\\\": 6, "ui": 2, "ui\\": 1, "under": 3, "underscore": 2, "underscores": 4, "unhandled": 4, "unknown": 10, "unpredictable": 2, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "up": 2, "update": 7, "updating": 1, "updating-to-the-new-meta\\\\\\": 1, "upgrade": 8, "upgraded": 3, "upgraded\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "upgrading": 17, "upgrading-to-the-new-convention\\\\\\": 1, "upgrading-to-v2\\\\\\": 1, "upgrading-without-changing-files\\\\\\": 1, "upgrading\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "uploads": 2, "uploads\\": 1, "uppercase": 2, "url": 2, "us": 4, "usable": 2, "use": 17, "useactiondata": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usecatch": 2, "used": 8, "usefetcher": 9, "usefetcher\\": 2, "usefetcher\\\\\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 9, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "user": 4, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror": 3, "userouteerror\\": 1, "userouteloaderdata\\": 1, "uses": 6, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "usetransition": 3, "usetransition\\": 1, "usetransition\\\\\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 28, "using-v1-meta-conventions-in-v2\\\\\\": 1, "usually": 4, "util": 2, "util/types": 1, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "ux": 4, "v1": 49, "v1\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "v2": 60, "v2\\": 2, "v2\\u003c/a\\u003e": 1, "v2\\u003c/h1\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003ethis": 1, "v2\\u003c/h3\\u003e\\\\n\\u003cp\\u003eafter": 1, "v2\\u003c/h4\\u003e\\\\n\\u003cp\\u003eyou": 1, "v2\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 3, "v2_dev": 17, "v2_dev\\u003c/code\\u003e": 1, "v2_errorboundary": 2, "v2_headers": 1, "v2_headers\\u003c/code\\u003e": 1, "v2_linksfunction": 1, "v2_normalizeformmethod": 2, "v2_routeconvention": 3, "v2file": 2, "v2getting": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "valid": 2, "validation": 2, "validation\\": 1, "value": 41, "values": 10, "vanilla": 3, "var": 1030, "variables": 2, "variables\\": 1, "ve": 2, "vercel": 7, "vercel-adapter\\": 1, "vercel-adapter\\\\\\": 1, "version": 4, "versions": 4, "via": 12, "view": 2, "vite": 9, "vite\\": 1, "vm": 2, "vs": 6, "walk": 1, "walkthrough": 2, "want": 8, "warning": 2, "was": 2, "wasi": 2, "watch": 2, "watch\\\\\\": 1, "watch\\u003c/code\\u003e": 1, "way": 5, "we": 28, "web": 2, "went": 8, "were": 4, "what": 2, "whatever": 2, "when": 7, "where": 4, "which": 8, "while": 7, "why": 1, "will": 24, "window": 11, "with": 53, "within": 2, "without": 8, "work": 2, "worker": 3, "worker_threads": 2, "working": 2, "works": 2, "would": 2, "writes": 2, "writes\\": 1, "wrong": 2, "wrong\u003c/p\u003e": 1, "wrong\\u0026#x3c": 1, "you": 122, "your": 64, "your\\\\n\\u003ccode\\u003epackage": 1, "yourself": 8, "zlib": 2, "||": 4, "©": 1, "•docs": 1, "│": 134, "└──": 23, "├──": 95, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2, "🎥": 1, "👉": 1 }, "length": 23936 }, { "id": "3f4c4c3fc978861c9bd698fc", "doc_id": "20477dc7cf5dfb536dbe5cb7", "title": "use-action", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/use-action.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-action.json", "content": "--- title: useAction use_cases: \u003e- programmatic forms, client-side mutations, imperative actions, non-form submissions tags: - actions - mutations - client - imperative - programmatic version: '1.0' description: \u003e- Invoke actions programmatically without forms using useAction. Perfect for client-side mutations and imperative updates. --- The `useAction` primitive returns a function that triggers an [action](/solid-router/concepts/actions) when called. `useAction` requires client-side JavaScript and is not progressively enhanceable. ## Import ```tsx import { useAction } from \"@solidjs/router\"; ``` ## Type ```tsx function useAction\u003cT extends Array\u003cany\u003e, U, V\u003e( action: Action\u003cT, U, V\u003e ): (...args: Parameters\u003cAction\u003cT, U, V\u003e\u003e) =\u003e Promise\u003cNarrowResponse\u003cU\u003e\u003e; ``` ## Parameters ### `action` - **Type:** `Action\u003cT, U, V\u003e` - **Required:** Yes The action to be triggered. ## Return value `useAction` returns a function that triggers the action. It takes the same parameters as the action handler and returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that resolves with the action's result. ## Example ```tsx import { action, useAction } from \"@solidjs/router\"; const likePostAction = action(async (id: string) =\u003e { // ... Likes a post on the server. }); function LikeButton(props: { postId: string }) { const likePost = useAction(likePostAction); return \u003cbutton onClick={() =\u003e likePost(props.postId)}\u003eLike\u003c/button\u003e; } ```", "term_freq": { "##": 5, "###": 1, "**": 2, "**required": 1, "**type": 1, "---": 2, "//": 1, "//developer": 1, "//github": 1, "/solid-router/concepts/actions": 1, "\u003cbutton": 1, "=\u003e": 3, "\u003e-": 2, "\u003elike\u003c/button\u003e": 1, "@solidjs/router": 2, "action": 9, "action\u003ct": 2, "actions": 3, "an": 1, "and": 3, "args": 1, "array\u003cany\u003e": 1, "as": 1, "async": 1, "be": 1, "called": 1, "client": 1, "client-side": 3, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/data-apis/use-action": 1, "const": 2, "description": 1, "enhanceable": 1, "example": 1, "extends": 1, "for": 1, "forms": 2, "from": 2, "function": 4, "github-document": 1, "handler": 1, "https": 2, "id": 1, "imperative": 3, "import": 3, "invoke": 1, "is": 1, "it": 1, "javascript": 1, "likebutton": 1, "likepost": 2, "likepostaction": 2, "likes": 1, "mdx": 1, "mozilla": 1, "mutations": 3, "non-form": 1, "not": 1, "on": 1, "onclick=": 1, "org/en-us/docs/web/javascript/reference/global_objects/promise": 1, "parameters": 2, "parameters\u003caction\u003ct": 1, "perfect": 1, "post": 1, "postid": 2, "primitive": 1, "programmatic": 2, "programmatically": 1, "progressively": 1, "promise": 1, "promise\u003cnarrowresponse\u003cu\u003e\u003e": 1, "props": 2, "requires": 1, "resolves": 1, "result": 1, "return": 2, "returns": 3, "same": 1, "server": 1, "string": 2, "submissions": 1, "tags": 1, "takes": 1, "that": 3, "the": 7, "title": 1, "to": 1, "triggered": 1, "triggers": 2, "tsx": 3, "type": 1, "updates": 1, "use-action": 1, "use_cases": 1, "useaction": 8, "useaction\u003ct": 1, "using": 1, "v\u003e": 3, "v\u003e\u003e": 1, "value": 1, "version": 1, "when": 1, "with": 1, "without": 1, "yes": 1 }, "length": 173 }, { "id": "a8db074e6dee7a657a9e28a3", "doc_id": "6fe7afa2b3c889c8c845482a", "title": "use-before-leave", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/primitives/use-before-leave.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-before-leave.json", "content": "--- title: useBeforeLeave use_cases: \u003e- unsaved forms, exit confirmations, data loss prevention, user prompts before navigation, dirty state handling tags: - navigation - forms - confirmation - prevent - prompt - leave version: '1.0' description: \u003e- Prevent route navigation with useBeforeLeave - prompt users before leaving with unsaved changes, handle exit confirmations in SolidJS. --- `useBeforeLeave` takes a function that will be called prior to leaving a route. The function will be called with: - from (_Location_): current location (before change). - to (_string | number_}: path passed to `navigate.` - options (_NavigateOptions_}: options passed to `navigate.` - preventDefault (_void function_): call to block the route change. - defaultPrevented (_readonly boolean_): `true` if any previously called leave handlers called `preventDefault()`. - retry (_void function_, _force?: boolean_ ): call to retry the same navigation. Pass `true` to skip running the leave handlers again (ie. force navigate without confirming). Example usage: ```js useBeforeLeave((e: BeforeLeaveEventArgs) =\u003e { if (form.isDirty \u0026\u0026 !e.defaultPrevented) { // preventDefault to block immediately and prompt user async e.preventDefault(); setTimeout(() =\u003e { if (window.confirm(\"Discard unsaved changes - are you sure?\")) { // user wants to proceed anyway so retry with force=true e.retry(true); } }, 100); } }); ```", "term_freq": { "\u0026\u0026": 1, "---": 2, "//": 2, "//github": 1, "100": 1, "=\u003e": 2, "\u003e-": 2, "_force": 1, "_location_": 1, "_navigateoptions_": 1, "_readonly": 1, "_string": 1, "_void": 2, "again": 1, "and": 1, "any": 1, "anyway": 1, "are": 1, "async": 1, "be": 2, "before": 3, "beforeleaveeventargs": 1, "block": 2, "boolean_": 2, "call": 2, "called": 4, "change": 2, "changes": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/primitives/use-before-leave": 1, "confirm": 1, "confirmation": 1, "confirmations": 2, "confirming": 1, "current": 1, "data": 1, "defaultprevented": 2, "description": 1, "dirty": 1, "discard": 1, "example": 1, "exit": 2, "force": 1, "force=true": 1, "form": 1, "forms": 2, "from": 1, "function": 2, "function_": 2, "github-document": 1, "handle": 1, "handlers": 2, "handling": 1, "https": 1, "ie": 1, "if": 3, "immediately": 1, "in": 1, "isdirty": 1, "js": 1, "leave": 3, "leaving": 2, "location": 1, "loss": 1, "mdx": 1, "navigate": 3, "navigation": 4, "number_": 1, "options": 2, "pass": 1, "passed": 2, "path": 1, "prevent": 2, "preventdefault": 4, "prevention": 1, "previously": 1, "prior": 1, "proceed": 1, "prompt": 3, "prompts": 1, "retry": 4, "route": 3, "running": 1, "same": 1, "settimeout": 1, "skip": 1, "so": 1, "solidjs": 1, "state": 1, "sure": 1, "tags": 1, "takes": 1, "that": 1, "the": 4, "title": 1, "to": 9, "true": 3, "unsaved": 3, "usage": 1, "use-before-leave": 1, "use_cases": 1, "usebeforeleave": 4, "user": 3, "users": 1, "version": 1, "wants": 1, "will": 2, "window": 1, "with": 4, "without": 1, "you": 1 }, "length": 180 }, { "id": "1fff2ce9dd37986064a386fc", "doc_id": "a50e5a1a2b581058e78e563a", "title": "use-context", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/component-apis/use-context.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-context.json", "content": "--- title: useContext use_cases: \u003e- consuming context, accessing global state, avoiding prop drilling, theme access, auth state, shared data tags: - context - providers - global-state - hooks - consumption version: '1.0' description: \u003e- Access context values with useContext to consume data from parent providers. Avoid prop drilling and access shared state throughout your component tree. --- Used to grab context within a context provider scope to allow for deep passing of props without having to pass them through each Component function. It's therefore used in conjunction with [`createContext`](/reference/component-apis/create-context) to consume the data from a Provider scope and thus avoid passing data through intermediate components (prop drilling). ```ts const [state, { increment, decrement }] = useContext(CounterContext) ``` ## Recommended usage It is often a good idea to wrap `useContext` in a function like so: ```ts title=\"/context/counter-component.tsx\" function useCounterContext() { const context = useContext(CounterContext) if (!context) { throw new Error(\"useCounterContext: cannot find a CounterContext\") } return context } ``` See the API reference of [createContext](/reference/component-apis/create-context) the API on how to generate a Provider scope. And check the [Context concepts](/concepts/context) for more information on how to architecture your contexts. ## Type signature ```ts import { type Context } from \"solid-js\" function useContext\u003cT\u003e(context: Context\u003cT\u003e): T ```", "term_freq": { "##": 2, "---": 2, "//github": 1, "/concepts/context": 1, "/context/counter-component": 1, "/reference/component-apis/create-context": 2, "\u003e-": 2, "access": 3, "accessing": 1, "allow": 1, "and": 3, "api": 2, "architecture": 1, "auth": 1, "avoid": 2, "avoiding": 1, "cannot": 1, "check": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/component-apis/use-context": 1, "component": 2, "components": 1, "concepts": 1, "conjunction": 1, "const": 2, "consume": 2, "consuming": 1, "consumption": 1, "context": 11, "context\u003ct\u003e": 1, "contexts": 1, "countercontext": 3, "createcontext": 2, "data": 4, "decrement": 1, "deep": 1, "description": 1, "drilling": 3, "each": 1, "error": 1, "find": 1, "for": 2, "from": 3, "function": 4, "generate": 1, "github-document": 1, "global": 1, "global-state": 1, "good": 1, "grab": 1, "having": 1, "hooks": 1, "how": 2, "https": 1, "idea": 1, "if": 1, "import": 1, "in": 2, "increment": 1, "information": 1, "intermediate": 1, "is": 1, "it": 2, "like": 1, "mdx": 1, "more": 1, "new": 1, "of": 2, "often": 1, "on": 2, "parent": 1, "pass": 1, "passing": 2, "prop": 3, "props": 1, "provider": 3, "providers": 2, "recommended": 1, "reference": 1, "return": 1, "scope": 3, "see": 1, "shared": 2, "signature": 1, "so": 1, "solid-js": 1, "state": 4, "tags": 1, "the": 4, "them": 1, "theme": 1, "therefore": 1, "through": 2, "throughout": 1, "throw": 1, "thus": 1, "title": 1, "title=": 1, "to": 8, "tree": 1, "ts": 3, "tsx": 1, "type": 2, "usage": 1, "use-context": 1, "use_cases": 1, "usecontext": 5, "usecontext\u003ct\u003e": 1, "usecountercontext": 2, "used": 2, "values": 1, "version": 1, "with": 2, "within": 1, "without": 1, "wrap": 1, "your": 2 }, "length": 192 }, { "id": "3a205bcb1a3ae8281c08fce0", "doc_id": "db629769d88bb593b9571f3a", "title": "use-current-matches", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/primitives/use-current-matches.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-current-matches.json", "content": "--- title: useCurrentMatches use_cases: \u003e- breadcrumbs, route metadata, nested routes, navigation menus, route info extraction tags: - routes - breadcrumbs - matches - navigation - metadata version: '1.0' description: \u003e- Access all matched route information with useCurrentMatches - build breadcrumbs, extract route metadata, and navigate nested routes. --- `useCurrentMatches` returns all the matches for the current matched route. Useful for getting all the route information. For example if you stored breadcrumbs on your route definition you could retrieve them like so: ```js const matches = useCurrentMatches(); const breadcrumbs = createMemo(() =\u003e matches().map((m) =\u003e m.route.info.breadcrumb) ); ```", "term_freq": { "---": 2, "//github": 1, "=\u003e": 2, "\u003e-": 2, "access": 1, "all": 3, "and": 1, "breadcrumb": 1, "breadcrumbs": 5, "build": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/primitives/use-current-matches": 1, "const": 2, "could": 1, "creatememo": 1, "current": 1, "definition": 1, "description": 1, "example": 1, "extract": 1, "extraction": 1, "for": 3, "getting": 1, "github-document": 1, "https": 1, "if": 1, "info": 2, "information": 2, "js": 1, "like": 1, "map": 1, "matched": 2, "matches": 4, "mdx": 1, "menus": 1, "metadata": 3, "navigate": 1, "navigation": 2, "nested": 2, "on": 1, "retrieve": 1, "returns": 1, "route": 8, "routes": 3, "so": 1, "stored": 1, "tags": 1, "the": 3, "them": 1, "title": 1, "use-current-matches": 1, "use_cases": 1, "usecurrentmatches": 4, "useful": 1, "version": 1, "with": 1, "you": 2, "your": 1 }, "length": 94 }, { "id": "166914599ef43394a4d64a9e", "doc_id": "ef8a46e17774e5ebf8d0aaa2", "title": "use-head", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/reference/meta/use-head.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-head.json", "content": "--- title: useHead order: 7 use_cases: \u003e- custom head tags, scripts, json-ld, arbitrary head elements, dynamic metadata, ssr head management tags: - usehead - head - meta - script - json-ld - ssr version: '1.0' description: \u003e- useHead inserts custom elements into document head with fine-grained control, including scripts and JSON-LD, while staying SSR-ready. --- `useHead` is a low-level API for registering custom `\u003chead\u003e` tags with the nearest [`MetaProvider`](/solid-meta/reference/meta/metaprovider). ## Import ```ts import { useHead } from \"@solidjs/meta\"; ``` ## Type ```ts type TagDescription = { tag: string; props: Record\u003cstring, unknown\u003e; setting?: { close?: boolean; escape?: boolean; }; id: string; name?: string; ref?: Element; }; function useHead(tag: TagDescription): void; ``` ## Parameters ### `tag` - **Type:** `string` - **Required:** Yes The tag name to render in `\u003chead\u003e` (eg. `\u003cscript\u003e`, `\u003cmeta\u003e`, `\u003ctitle\u003e`). ### `props` - **Type:** `Record\u003cstring, unknown\u003e` - **Required:** Yes Attributes and properties applied to the rendered element. If `props.children` is provided, is provided, it is used as the element’s content for tags such as `title`, `style`, and `script`. During server-side rendering, arrays of strings are concatenated without commas. ### `setting` - **Type:** `{ close?: boolean; escape?: boolean }` - **Required:** No SSR-only rendering options for the tag contents. #### `close` - **Type:** `boolean` - **Required:** No Required for elements that cannot be self-closing, such as `script`, `style`, and `title`. When `true`, the server renders a closing tag and includes `children`. If `false`, `children` is not rendered. #### `escape` - **Type:** `boolean` - **Required:** No When `true`, HTML-escapes `children` during SSR. If omitted or `false`, renders `children` as raw HTML. ### `id` - **Type:** `string` - **Required:** Yes A stable identifier used to match server-rendered tags during hydration. Value should remain consistent for the lifetime of the component. ### `name` - **Type:** `string` - **Required:** No An optional label for the tag. With `meta` tags, can mirror `props.name` or `props.property`. ### `ref` - **Type:** `Element` - **Required:** No An existing element to reuse instead of creating a new one, typically managed internally. ## Return value `useHead` does not return a value. ## Examples ### Simple custom tag ```tsx import { useHead } from \"@solidjs/meta\"; useHead({ tag: \"link\", id: \"rss-feed\", props: { rel: \"alternate\", type: \"application/rss+xml\", title: \"Solid RSS\", href: \"/rss.xml\", }, }); ``` ### JSON-LD per page (script with `close` and `escape`) ```tsx import { useHead } from \"@solidjs/meta\"; const jsonLD = JSON.stringify({ \"@context\": \"https://schema.org\", \"@type\": \"WebSite\", name: \"Solid Docs\", url: \"https://docs.solidjs.com/\", }); useHead({ tag: \"script\", setting: { close: true, escape: false }, id: \"schema-home\", props: { type: \"application/ld+json\", children: jsonLD, }, }); ``` ### Reactive updates ```tsx import { createSignal } from \"solid-js\"; import { useHead } from \"@solidjs/meta\"; const [pageTitle, setPageTitle] = createSignal(\"Getting started\"); useHead({ tag: \"title\", setting: { close: true, escape: true }, id: \"page-title\", props: { get children() { return `${pageTitle()} | Solid`; }, }, }); ``` ## Related - [`\u003cMetaProvider /\u003e`](/solid-meta/reference/meta/metaprovider) - [`\u003cTitle /\u003e`](/solid-meta/reference/meta/title) - [`\u003cMeta /\u003e`](/solid-meta/reference/meta/meta) - [`\u003cLink /\u003e`](/solid-meta/reference/meta/link) - [`\u003cStyle /\u003e`](/solid-meta/reference/meta/style) - [`\u003cBase /\u003e`](/solid-meta/reference/meta/base)", "term_freq": { "##": 6, "###": 9, "####": 2, "**": 16, "**required": 8, "**type": 8, "---": 2, "//docs": 1, "//github": 1, "//schema": 1, "/\u003e": 6, "/rss": 1, "/solid-meta/reference/meta/base": 1, "/solid-meta/reference/meta/link": 1, "/solid-meta/reference/meta/meta": 1, "/solid-meta/reference/meta/metaprovider": 2, "/solid-meta/reference/meta/style": 1, "/solid-meta/reference/meta/title": 1, "\u003cbase": 1, "\u003chead\u003e": 2, "\u003clink": 1, "\u003cmeta": 1, "\u003cmeta\u003e": 1, "\u003cmetaprovider": 1, "\u003cscript\u003e": 1, "\u003cstyle": 1, "\u003ctitle": 1, "\u003ctitle\u003e": 1, "\u003e-": 2, "@context": 1, "@solidjs/meta": 4, "@type": 1, "alternate": 1, "an": 2, "and": 6, "api": 1, "application/ld+json": 1, "application/rss+xml": 1, "applied": 1, "arbitrary": 1, "are": 1, "arrays": 1, "as": 4, "attributes": 1, "be": 1, "boolean": 6, "can": 1, "cannot": 1, "children": 7, "close": 6, "closing": 1, "com/": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-meta/reference/meta/use-head": 1, "commas": 1, "component": 1, "concatenated": 1, "consistent": 1, "const": 2, "content": 1, "contents": 1, "control": 1, "createsignal": 2, "creating": 1, "custom": 4, "description": 1, "docs": 1, "document": 1, "does": 1, "during": 3, "dynamic": 1, "eg": 1, "element": 4, "elements": 3, "element’s": 1, "escape": 6, "examples": 1, "existing": 1, "false": 3, "fine-grained": 1, "for": 6, "from": 5, "function": 1, "get": 1, "getting": 1, "github-document": 1, "head": 5, "href": 1, "html": 1, "html-escapes": 1, "https": 3, "hydration": 1, "id": 5, "identifier": 1, "if": 3, "import": 6, "in": 1, "includes": 1, "including": 1, "inserts": 1, "instead": 1, "internally": 1, "into": 1, "is": 5, "it": 1, "json": 1, "json-ld": 4, "jsonld": 2, "label": 1, "lifetime": 1, "link": 1, "low-level": 1, "managed": 1, "management": 1, "match": 1, "mdx": 1, "meta": 2, "metadata": 1, "metaprovider": 1, "mirror": 1, "name": 5, "nearest": 1, "new": 1, "no": 5, "not": 2, "of": 3, "omitted": 1, "one": 1, "optional": 1, "options": 1, "or": 2, "order": 1, "org": 1, "page": 1, "page-title": 1, "pagetitle": 2, "parameters": 1, "per": 1, "properties": 1, "property": 1, "props": 8, "provided": 2, "raw": 1, "reactive": 1, "record\u003cstring": 2, "ref": 2, "registering": 1, "rel": 1, "related": 1, "remain": 1, "render": 1, "rendered": 2, "rendering": 2, "renders": 2, "required": 1, "return": 3, "reuse": 1, "rss": 1, "rss-feed": 1, "schema-home": 1, "script": 5, "scripts": 2, "self-closing": 1, "server": 1, "server-rendered": 1, "server-side": 1, "setpagetitle": 1, "setting": 4, "should": 1, "simple": 1, "solid": 3, "solid-js": 1, "solidjs": 1, "ssr": 3, "ssr-only": 1, "ssr-ready": 1, "stable": 1, "started": 1, "staying": 1, "string": 6, "stringify": 1, "strings": 1, "style": 2, "such": 2, "tag": 11, "tagdescription": 2, "tags": 6, "that": 1, "the": 9, "title": 5, "to": 4, "true": 5, "ts": 2, "tsx": 3, "type": 4, "typically": 1, "unknown\u003e": 2, "updates": 1, "url": 1, "use-head": 1, "use_cases": 1, "used": 2, "usehead": 13, "value": 3, "version": 1, "void": 1, "website": 1, "when": 2, "while": 1, "with": 4, "without": 1, "xml": 1, "yes": 3 }, "length": 456 }, { "id": "8751e7136437d76b1007b182", "doc_id": "f6605e22fc282900916bb4df", "title": "use-is-routing", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/primitives/use-is-routing.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-is-routing.json", "content": "--- title: useIsRouting use_cases: \u003e- loading states, transition indicators, pending ui, stale content, concurrent rendering feedback tags: - loading - transition - pending - state - ui version: \"1.0\" description: \u003e- Track route transitions with useIsRouting - display loading states, pending UI, and transition feedback during navigation in SolidJS. --- The `useIsRouting` function is a utility for detecting when the router is processing a route transition. ## Import ```ts import { useIsRouting } from \"@solidjs/router\"; ``` ## Type ```ts const useIsRouting: () =\u003e () =\u003e boolean; ``` ## Parameters None. ## Return value **Type:** `() =\u003e boolean` An accessor function that returns `true` during route transitions and `false` otherwise. ## Examples ### Route transition indicator ```tsx import { useIsRouting } from \"@solidjs/router\"; function App() { const isRouting = useIsRouting(); return ( \u003c\u003e {isRouting() \u0026\u0026 \u003cdiv class=\"loading-bar\" /\u003e} \u003cMyContent /\u003e \u003c/\u003e ); } ``` ## Related - [`\u003cRouter\u003e`](/solid-router/reference/components/router) - [`useNavigate`](/solid-router/reference/primitives/use-navigate)", "term_freq": { "##": 6, "###": 1, "\u0026\u0026": 1, "**": 1, "**type": 1, "---": 2, "//github": 1, "/\u003e": 2, "/solid-router/reference/components/router": 1, "/solid-router/reference/primitives/use-navigate": 1, "\u003c/\u003e": 1, "\u003c\u003e": 1, "\u003cdiv": 1, "\u003cmycontent": 1, "\u003crouter\u003e": 1, "=\u003e": 3, "\u003e-": 2, "@solidjs/router": 2, "accessor": 1, "an": 1, "and": 2, "app": 1, "boolean": 2, "class=": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/primitives/use-is-routing": 1, "concurrent": 1, "const": 2, "content": 1, "description": 1, "detecting": 1, "display": 1, "during": 2, "examples": 1, "false": 1, "feedback": 2, "for": 1, "from": 2, "function": 3, "github-document": 1, "https": 1, "import": 3, "in": 1, "indicator": 1, "indicators": 1, "is": 2, "isrouting": 2, "loading": 3, "loading-bar": 1, "mdx": 1, "navigation": 1, "none": 1, "otherwise": 1, "parameters": 1, "pending": 3, "processing": 1, "related": 1, "rendering": 1, "return": 2, "returns": 1, "route": 4, "router": 1, "solidjs": 1, "stale": 1, "state": 1, "states": 2, "tags": 1, "that": 1, "the": 2, "title": 1, "track": 1, "transition": 5, "transitions": 2, "true": 1, "ts": 2, "tsx": 1, "type": 1, "ui": 3, "use-is-routing": 1, "use_cases": 1, "useisrouting": 7, "usenavigate": 1, "utility": 1, "value": 1, "version": 1, "when": 1, "with": 1 }, "length": 133 }, { "id": "1116b21f7da0244be91bd098", "doc_id": "e35154ae17ae41cf55660406", "title": "use-location", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/primitives/use-location.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-location.json", "content": "--- title: useLocation use_cases: \u003e- current url tracking, query parameters, pathname parsing, hash navigation, location state access tags: - location - url - pathname - query - hash - state version: \"1.0\" description: \u003e- Access reactive URL information with useLocation - track pathname, query strings, hash, and navigation state in your SolidJS app. --- The `useLocation` function provides information about the current URL, including pathname, query strings, hash, and navigation state. ## Import ```ts import { useLocation } from \"@solidjs/router\"; ``` ## Type ```ts const useLocation: \u003cS = unknown\u003e() =\u003e Location\u003cS\u003e; interface Location\u003cS = unknown\u003e extends Path { query: SearchParams; state: Readonly\u003cPartial\u003cS\u003e\u003e | null; } interface Path { pathname: string; search: string; hash: string; } ``` ## Parameters None. ## Return value `useLocation` returns a reactive `Location` object containing the current URL information. The `Location` object contains: ### `pathname` **Type:** `string` The path portion of the URL, beginning with a `/` and excluding the query string and hash. ### `search` **Type:** `string` The query string portion of the URL, including the leading `?` character if a parameter exists. ### `hash` **Type:** `string` The hash fragment of the URL, including the leading `#` character if a hash exists. ### `state` **Type:** `Readonly\u003cPartial\u003cS\u003e\u003e | null` Custom state passed from [`useNavigate`](/solid-router/reference/primitives/use-navigate). ### `query` **Type:** `SearchParams` A reactive object containing the parsed query parameters from the URL. ## Examples ### Basic usage ```tsx import { useLocation } from \"@solidjs/router\"; function ProductFilter() { const location = useLocation(); const category = () =\u003e location.query.category || \"all\"; const page = () =\u003e location.query.page || \"1\"; return ( \u003cdiv\u003e \u003cp\u003e Filtering by: {category()}, Page {page()} \u003c/p\u003e \u003c/div\u003e ); } ``` ## Related - [`useNavigate`](/solid-router/reference/primitives/use-navigate) - [`useParams`](/solid-router/reference/primitives/use-params) - [`useSearchParams`](/solid-router/reference/primitives/use-search-params)", "term_freq": { "##": 6, "###": 6, "**": 5, "**type": 5, "---": 2, "//github": 1, "/solid-router/reference/primitives/use-navigate": 2, "/solid-router/reference/primitives/use-params": 1, "/solid-router/reference/primitives/use-search-params": 1, "\u003c/div\u003e": 1, "\u003c/p\u003e": 1, "\u003cdiv\u003e": 1, "\u003cp\u003e": 1, "\u003cs": 1, "=\u003e": 3, "\u003e-": 2, "@solidjs/router": 2, "about": 1, "access": 2, "all": 1, "and": 4, "app": 1, "basic": 1, "beginning": 1, "by": 1, "category": 3, "character": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/primitives/use-location": 1, "const": 4, "containing": 2, "contains": 1, "current": 3, "custom": 1, "description": 1, "examples": 1, "excluding": 1, "exists": 2, "extends": 1, "filtering": 1, "fragment": 1, "from": 4, "function": 2, "github-document": 1, "hash": 9, "https": 1, "if": 2, "import": 3, "in": 1, "including": 3, "information": 3, "interface": 2, "leading": 2, "location": 7, "location\u003cs": 1, "location\u003cs\u003e": 1, "mdx": 1, "navigation": 3, "none": 1, "null": 2, "object": 3, "of": 3, "page": 4, "parameter": 1, "parameters": 3, "parsed": 1, "parsing": 1, "passed": 1, "path": 3, "pathname": 6, "portion": 2, "productfilter": 1, "provides": 1, "query": 11, "reactive": 3, "readonly\u003cpartial\u003cs\u003e\u003e": 2, "related": 1, "return": 2, "returns": 1, "search": 2, "searchparams": 2, "solidjs": 1, "state": 7, "string": 8, "strings": 2, "tags": 1, "the": 15, "title": 1, "track": 1, "tracking": 1, "ts": 2, "tsx": 1, "type": 1, "unknown\u003e": 2, "url": 9, "usage": 1, "use-location": 1, "use_cases": 1, "uselocation": 8, "usenavigate": 2, "useparams": 1, "usesearchparams": 1, "value": 1, "version": 1, "with": 2, "your": 1, "||": 2 }, "length": 255 }, { "id": "828224b163d13aee02107fd7", "doc_id": "1053e9508e7f996ca04d887a", "title": "use-match", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/primitives/use-match.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-match.json", "content": "--- title: useMatch use_cases: \u003e- active links, navigation highlighting, conditional rendering, path matching, menu items tags: - match - active - navigation - path - conditional - links version: \"1.0\" description: \u003e- Check if paths match current route with useMatch - create active navigation links, conditional rendering based on route matching. --- The `useMatch` function checks whether the current path matches a provided path pattern. ## Import ```ts import { useMatch } from \"@solidjs/router\"; ``` ## Type ```ts const useMatch: \u003cS extends string\u003e( path: () =\u003e S, matchFilters?: MatchFilters\u003cS\u003e ): Accessor\u003cPathMatch | undefined\u003e; type MatchFilters\u003cP extends string | readonly string[] = any\u003e = P extends string ? { [K in PathParams\u003cP\u003e[number]]?: MatchFilter } : Record\u003cstring, MatchFilter\u003e; interface PathMatch { params: Params; path: string; } ``` ## Parameters ### `path` - **Type:** `() =\u003e S` - **Required:** Yes An accessor function that returns the path pattern to match against the current route. Uses the same syntax as the `path` prop in the [`\u003cRoute\u003e`](/solid-router/reference/components/route) component. Supports [path parameters](/solid-router/concepts/path-parameters), [optional parameters](/solid-router/concepts/path-parameters#optional-parameters), and [wildcard parameters](/solid-router/concepts/path-parameters#wildcard-routes). ### `filters` - **Type:** `MatchFilters\u003cS\u003e` - **Required:** No An object where keys correspond to route parameter names and values define match filters. Each filter can be: - An array of allowed strings - A regular expression pattern - A function that receives the parameter value as a string and returns true if the parameter should match ## Return value `useMatch` returns a memo containing a `PathMatch` object when the path matches, or `undefined` when there's no match. The `PathMatch` object contains: ### `params` - **Type:** `Record\u003cstring, string\u003e` An object containing the matched path parameters as key-value pairs. ### `path` - **Type:** `string` The matched path. ## Examples ### Basic usage ```tsx import { useMatch } from \"@solidjs/router\"; import { type JSXElement } from \"solid-js\"; type NavLinkProps = { href: string; children: JSXElement; }; function NavLink(props: NavLinkProps) { const match = useMatch(() =\u003e props.href); return ( \u003ca href={props.href} classList={{ active: Boolean(match()) }}\u003e {props.children} \u003c/a\u003e ); } ``` ### With filters ```tsx import { useMatch } from \"@solidjs/router\"; import { Show } from \"solid-js\"; function BlogPost() { const match = useMatch(() =\u003e \"/:lang?/blog/:slug\", { lang: [\"en\", \"es\", \"fr\"], slug: /^[a-z0-9-]+$/, // Only allow lowercase letters, numbers, and hyphens }); const lang = () =\u003e match()?.params.lang || \"en\"; return ( \u003cShow when={match()}\u003e \u003carticle lang={lang()}\u003e \u003cp\u003eBlog slug: {match()?.params.slug}\u003c/p\u003e \u003c/article\u003e \u003c/Show\u003e ); } ``` ### With custom filter functions ```tsx import { useMatch } from \"@solidjs/router\"; function FileInfo() { const match = useMatch(() =\u003e \"/files/:type/:name\", { type: [\"images\", \"documents\", \"videos\"], name: (name) =\u003e name.length \u003e 5 \u0026\u0026 name.endsWith(\".html\"), }); return \u003cdiv\u003eFile: {match()?.params.name}\u003c/div\u003e; } ``` ## Related - [`useParams`](/solid-router/reference/primitives/use-params) - [`useLocation`](/solid-router/reference/primitives/use-location)", "term_freq": { "##": 6, "###": 7, "\u0026\u0026": 1, "**": 6, "**required": 2, "**type": 4, "+$/": 1, "---": 2, "//": 1, "//github": 1, "/^": 1, "/blog/": 1, "/files/": 1, "/solid-router/concepts/path-parameters": 1, "/solid-router/concepts/path-parameters#optional-parameters": 1, "/solid-router/concepts/path-parameters#wildcard-routes": 1, "/solid-router/reference/components/route": 1, "/solid-router/reference/primitives/use-location": 1, "/solid-router/reference/primitives/use-params": 1, "\u003c/a\u003e": 1, "\u003c/article\u003e": 1, "\u003c/div\u003e": 1, "\u003c/p\u003e": 1, "\u003c/show\u003e": 1, "\u003ca": 1, "\u003carticle": 1, "\u003cdiv\u003efile": 1, "\u003cp\u003eblog": 1, "\u003croute\u003e": 1, "\u003cs": 1, "\u003cshow": 1, "=\u003e": 7, "\u003e-": 2, "@solidjs/router": 4, "a-z0-9-": 1, "accessor": 1, "accessor\u003cpathmatch": 1, "active": 4, "against": 1, "allow": 1, "allowed": 1, "an": 4, "and": 4, "any\u003e": 1, "array": 1, "as": 3, "based": 1, "basic": 1, "be": 1, "blogpost": 1, "boolean": 1, "can": 1, "check": 1, "checks": 1, "children": 2, "classlist=": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/primitives/use-match": 1, "component": 1, "conditional": 3, "const": 5, "containing": 2, "contains": 1, "correspond": 1, "create": 1, "current": 3, "custom": 1, "define": 1, "description": 1, "documents": 1, "each": 1, "en": 2, "endswith": 1, "es": 1, "examples": 1, "expression": 1, "extends": 3, "fileinfo": 1, "filter": 2, "filters": 3, "fr": 1, "from": 6, "function": 6, "functions": 1, "github-document": 1, "highlighting": 1, "href": 3, "href=": 1, "html": 1, "https": 1, "hyphens": 1, "if": 2, "images": 1, "import": 7, "in": 2, "interface": 1, "items": 1, "jsxelement": 2, "key-value": 1, "keys": 1, "lang": 5, "lang=": 1, "length": 1, "letters": 1, "links": 3, "lowercase": 1, "match": 14, "matched": 2, "matches": 2, "matchfilter": 1, "matchfilter\u003e": 1, "matchfilters": 1, "matchfilters\u003cp": 1, "matchfilters\u003cs\u003e": 2, "matching": 2, "mdx": 1, "memo": 1, "menu": 1, "name": 6, "names": 1, "navigation": 3, "navlink": 1, "navlinkprops": 2, "no": 2, "number": 1, "numbers": 1, "object": 4, "of": 1, "on": 1, "only": 1, "optional": 1, "or": 1, "pairs": 1, "parameter": 3, "parameters": 5, "params": 6, "path": 14, "pathmatch": 3, "pathparams\u003cp\u003e": 1, "paths": 1, "pattern": 3, "prop": 1, "props": 4, "provided": 1, "readonly": 1, "receives": 1, "record\u003cstring": 2, "regular": 1, "related": 1, "rendering": 2, "return": 4, "returns": 3, "route": 4, "same": 1, "should": 1, "show": 1, "slug": 4, "solid-js": 2, "string": 7, "string\u003e": 2, "strings": 1, "supports": 1, "syntax": 1, "tags": 1, "that": 2, "the": 13, "there": 1, "title": 1, "to": 2, "true": 1, "ts": 2, "tsx": 3, "type": 5, "type/": 1, "undefined": 1, "undefined\u003e": 1, "usage": 1, "use-match": 1, "use_cases": 1, "uselocation": 1, "usematch": 12, "useparams": 1, "uses": 1, "value": 2, "values": 1, "version": 1, "videos": 1, "when": 2, "when=": 1, "where": 1, "whether": 1, "wildcard": 1, "with": 3, "yes": 1, "||": 1 }, "length": 396 }, { "id": "19b45f75fb765345973883f7", "doc_id": "b81b658804b19aad5335d9e7", "title": "use-navigate", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/primitives/use-navigate.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-navigate.json", "content": "--- title: useNavigate use_cases: \u003e- programmatic navigation, redirects, auth flows, form submissions, history manipulation tags: - navigate - redirect - programmatic - history - state version: \"1.0\" description: \u003e- Navigate programmatically with useNavigate - redirect users, handle auth flows, and control navigation with replace and scroll options. --- The `useNavigate` function provides a function for programmatically navigating to a new route. ## Import ```ts import { useNavigate } from \"@solidjs/router\"; ``` ## Type ```ts interface NavigateOptions\u003cS = unknown\u003e { resolve: boolean; replace: boolean; scroll: boolean; state: S; } function useNavigate(): ( to: string, options?: Partial\u003cNavigateOptions\u003e ) =\u003e void; function useNavigate(delta: number): void; ``` ## Parameters `useNavigate` takes no arguments. ## Return value - **Type:** `(to: string | number, options?: NavigateOptions) =\u003e void | (delta: number) =\u003e void` Returns a function that accepts two arguments: ### `to` - **Type:** `string | number` - **Required:** Yes The target destination. - `string`: A path to navigate to. - `number`: A history delta (e.g., `-1` for back, `1` for forward). If provided, the `options` argument is ignored. ### `options` - **Type:** `NavigateOptions` - **Required:** No Configuration object for the navigation. #### `resolve` - **Type:** `boolean` - **Default:** `true` Resolves the path relative to the current route. If `false`, the path is resolved against the root (`/`). If `to` is a query-only string (e.g., `?sort=asc`), this defaults to `false` to preserve the current pathname. #### `replace` - **Type**: `boolean` - **Default**: `false` Replaces the current history entry instead of adding a new one. Used for redirects or state updates to prevent the user from navigating back to the previous state. #### `scroll` - **Type**: `boolean` - **Default**: `true` Scrolls the window to the top after navigation. - `true`: Scrolls to the top or to the element matching the hash. - `false`: Maintains the current scroll position (unless a hash matches). #### `state` - **Type**: `any` - **Default**: `undefined` Arbitrary state stored in `history.state`. This value is accessible via `useLocation().state`. State is serialized using the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm), which supports most built-in types but not functions or DOM nodes. ## Examples ### Basic usage ```tsx import { useNavigate } from \"@solidjs/router\"; const navigate = useNavigate(); navigate(\"/users/123\"); ``` ### With `replace` ```tsx import { useNavigate } from \"@solidjs/router\"; const navigate = useNavigate(); // Redirect (replace history) function login() { navigate(\"/dashboard\", { replace: true }); } ``` ### With `delta` ```tsx import { useNavigate } from \"@solidjs/router\"; const navigate = useNavigate(); // Go back one page function goBack() { navigate(-1); } ``` ### With `state` ```tsx import { useNavigate } from \"@solidjs/router\"; const navigate = useNavigate(); // Pass custom state navigate(\"/checkout\", { state: { from: \"cart\", total: 100 }, }); ``` ## Related - [useLocation](/solid-router/reference/primitives/use-location) - [redirect](/solid-router/reference/response-helpers/redirect)", "term_freq": { "##": 6, "###": 6, "####": 4, "**": 7, "**default": 1, "**default**": 3, "**required": 2, "**type": 4, "**type**": 3, "---": 2, "-1": 2, "//": 3, "//developer": 1, "//github": 1, "/checkout": 1, "/dashboard": 1, "/solid-router/reference/primitives/use-location": 1, "/solid-router/reference/response-helpers/redirect": 1, "/users/123": 1, "100": 1, "=\u003e": 3, "\u003e-": 2, "@solidjs/router": 5, "accepts": 1, "accessible": 1, "adding": 1, "after": 1, "against": 1, "algorithm": 1, "and": 2, "any": 1, "arbitrary": 1, "argument": 1, "arguments": 2, "auth": 2, "back": 3, "basic": 1, "boolean": 6, "built-in": 1, "but": 1, "cart": 1, "clone": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/primitives/use-navigate": 1, "configuration": 1, "const": 4, "control": 1, "current": 4, "custom": 1, "defaults": 1, "delta": 4, "description": 1, "destination": 1, "dom": 1, "element": 1, "entry": 1, "examples": 1, "false": 4, "flows": 2, "for": 5, "form": 1, "forward": 1, "from": 7, "function": 7, "functions": 1, "github-document": 1, "go": 1, "goback": 1, "handle": 1, "hash": 2, "history": 6, "https": 2, "if": 3, "ignored": 1, "import": 6, "in": 1, "instead": 1, "interface": 1, "is": 5, "login": 1, "maintains": 1, "manipulation": 1, "matches": 1, "matching": 1, "mdx": 1, "most": 1, "mozilla": 1, "navigate": 11, "navigateoptions": 2, "navigateoptions\u003cs": 1, "navigating": 2, "navigation": 4, "new": 2, "no": 2, "nodes": 1, "not": 1, "number": 5, "object": 1, "of": 1, "one": 2, "options": 5, "or": 3, "org/en-us/docs/web/api/web_workers_api/structured_clone_algorithm": 1, "page": 1, "parameters": 1, "partial\u003cnavigateoptions\u003e": 1, "pass": 1, "path": 3, "pathname": 1, "position": 1, "preserve": 1, "prevent": 1, "previous": 1, "programmatic": 2, "programmatically": 2, "provided": 1, "provides": 1, "query-only": 1, "redirect": 4, "redirects": 2, "related": 1, "relative": 1, "replace": 6, "replaces": 1, "resolve": 2, "resolved": 1, "resolves": 1, "return": 1, "returns": 1, "root": 1, "route": 2, "scroll": 4, "scrolls": 2, "serialized": 1, "sort=asc": 1, "state": 12, "stored": 1, "string": 5, "structured": 1, "submissions": 1, "supports": 1, "tags": 1, "takes": 1, "target": 1, "that": 1, "the": 19, "this": 2, "title": 1, "to": 15, "top": 2, "total": 1, "true": 4, "ts": 2, "tsx": 4, "two": 1, "type": 1, "types": 1, "undefined": 1, "unknown\u003e": 1, "unless": 1, "updates": 1, "usage": 1, "use-navigate": 1, "use_cases": 1, "used": 1, "uselocation": 2, "usenavigate": 15, "user": 1, "users": 1, "using": 1, "value": 2, "version": 1, "via": 1, "void": 4, "which": 1, "window": 1, "with": 5, "yes": 1 }, "length": 398 }, { "id": "f5a03fe2700b515c5d1bf6ed", "doc_id": "4c51bf63993e434b3dc73a0f", "title": "use-params", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/primitives/use-params.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-params.json", "content": "--- title: useParams use_cases: \"dynamic routes, user profiles, product pages, id-based content, url parameters\" tags: - params - dynamic - routes - parameters - reactive version: \"1.0\" description: \u003e- Access route parameters reactively with useParams - extract dynamic segments from URLs for user profiles, products, and ID-based pages. --- The `useParams` function reads the path parameters of the current route. ## Import ```ts import { useParams } from \"@solidjs/router\"; ``` ## Type ```ts function useParams\u003cT extends Record\u003cstring, string\u003e\u003e(): T; ``` ## Parameters `useParams` takes no arguments. ## Return value - **Type**: `T` `useParams` returns a reactive object where keys match the dynamic segments defined in the route path. Accessing a property within a tracking scope registers a dependency, causing the computation to re-run when the parameter changes. ## Examples ### Basic usage ```ts import { createMemo } from \"solid-js\"; import { useParams } from \"@solidjs/router\"; // Rendered via \u003cRoute path=\"/users/:id\" component={UserPage} /\u003e function UserPage() { const params = useParams(); // Derived value updates when the route parameter changes. const title = createMemo(() =\u003e `Profile for ${params.id}`); return \u003ch1\u003e{title()}\u003c/h1\u003e; } ``` ## Related - [useLocation](/solid-router/reference/primitives/use-location) - [useSearchParams](/solid-router/reference/primitives/use-search-params)", "term_freq": { "##": 6, "###": 1, "**type**": 1, "---": 2, "//": 2, "//github": 1, "/\u003e": 1, "/solid-router/reference/primitives/use-location": 1, "/solid-router/reference/primitives/use-search-params": 1, "/users/": 1, "\u003c/h1\u003e": 1, "\u003ch1\u003e": 1, "\u003croute": 1, "=\u003e": 1, "\u003e-": 1, "@solidjs/router": 2, "access": 1, "accessing": 1, "and": 1, "arguments": 1, "basic": 1, "causing": 1, "changes": 2, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/primitives/use-params": 1, "component=": 1, "computation": 1, "const": 2, "content": 1, "creatememo": 2, "current": 1, "defined": 1, "dependency": 1, "derived": 1, "description": 1, "dynamic": 4, "examples": 1, "extends": 1, "extract": 1, "for": 2, "from": 4, "function": 3, "github-document": 1, "https": 1, "id": 2, "id-based": 2, "import": 4, "in": 1, "keys": 1, "match": 1, "mdx": 1, "no": 1, "object": 1, "of": 1, "pages": 2, "parameter": 2, "parameters": 5, "params": 3, "path": 2, "path=": 1, "product": 1, "products": 1, "profile": 1, "profiles": 2, "property": 1, "re-run": 1, "reactive": 2, "reactively": 1, "reads": 1, "record\u003cstring": 1, "registers": 1, "related": 1, "rendered": 1, "return": 2, "returns": 1, "route": 4, "routes": 2, "scope": 1, "segments": 2, "solid-js": 1, "string\u003e\u003e": 1, "tags": 1, "takes": 1, "the": 8, "title": 3, "to": 1, "tracking": 1, "ts": 3, "type": 1, "updates": 1, "url": 1, "urls": 1, "usage": 1, "use-params": 1, "use_cases": 1, "uselocation": 1, "useparams": 8, "useparams\u003ct": 1, "user": 2, "userpage": 2, "usesearchparams": 1, "value": 2, "version": 1, "via": 1, "when": 2, "where": 1, "with": 1, "within": 1 }, "length": 171 }, { "id": "f31fc8ba0ae27fe11d430b1d", "doc_id": "19298be4eaf00db213fe69b6", "title": "use-preload-route", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/primitives/use-preload-route.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-preload-route.json", "content": "--- title: usePreloadRoute use_cases: \u003e- performance optimization, manual preloading, predictive navigation, prefetching routes tags: - preload - performance - optimization - prefetch - manual version: \"1.0\" description: \u003e- Manually preload routes with usePreloadRoute - optimize performance by prefetching route data before navigation in your SolidJS app. --- The `usePreloadRoute` function is a utility for manually preloading a route. ## Import ```ts import { usePreloadRoute } from \"@solidjs/router\"; ``` ## Type ```ts const usePreloadRoute: () =\u003e ( url: string | URL, options?: { preloadData?: boolean } ) =\u003e void; ``` ## Parameters ### `url` **Type:** `string | URL` **Required:** Yes The route path to preload. Accepts either a `string` path or a [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object. ### `options` - **Type:** `{ preloadData?: boolean }` - **Required:** No A configuration object with the following properties: #### `preloadData` - **Type:** `boolean` - **Default:** `false` When `true`, triggers the route's data loading in addition to preloading the route itself. ## Return value None. ## Examples ### Basic usage ```tsx import { usePreloadRoute } from \"@solidjs/router\"; function SettingsButton() { const preload = usePreloadRoute(); return ( \u003cbutton onClick={() =\u003e preload(\"/users/settings\", { preloadData: true })}\u003e Load settings \u003c/button\u003e ); } ``` ## Related - [`\u003cA\u003e`](/solid-router/reference/components/a) - [`preload`](/solid-router/reference/preload-functions/preload)", "term_freq": { "##": 6, "###": 3, "####": 1, "**": 6, "**default": 1, "**required": 2, "**type": 3, "---": 2, "//developer": 1, "//github": 1, "/solid-router/reference/components/a": 1, "/solid-router/reference/preload-functions/preload": 1, "/users/settings": 1, "\u003c/button\u003e": 1, "\u003ca\u003e": 1, "\u003cbutton": 1, "=\u003e": 3, "\u003e-": 2, "@solidjs/router": 2, "accepts": 1, "addition": 1, "app": 1, "basic": 1, "before": 1, "boolean": 3, "by": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/primitives/use-preload-route": 1, "configuration": 1, "const": 2, "data": 2, "description": 1, "either": 1, "examples": 1, "false": 1, "following": 1, "for": 1, "from": 2, "function": 2, "github-document": 1, "https": 2, "import": 3, "in": 2, "is": 1, "itself": 1, "load": 1, "loading": 1, "manual": 2, "manually": 2, "mdx": 1, "mozilla": 1, "navigation": 2, "no": 1, "none": 1, "object": 2, "onclick=": 1, "optimization": 2, "optimize": 1, "options": 2, "or": 1, "org/en-us/docs/web/api/url": 1, "parameters": 1, "path": 2, "performance": 3, "predictive": 1, "prefetch": 1, "prefetching": 2, "preload": 6, "preloaddata": 4, "preloading": 3, "properties": 1, "related": 1, "return": 2, "route": 5, "routes": 2, "settings": 1, "settingsbutton": 1, "solidjs": 1, "string": 3, "tags": 1, "the": 5, "title": 1, "to": 2, "triggers": 1, "true": 2, "ts": 2, "tsx": 1, "type": 1, "url": 5, "usage": 1, "use-preload-route": 1, "use_cases": 1, "usepreloadroute": 7, "utility": 1, "value": 1, "version": 1, "void": 1, "when": 1, "with": 2, "yes": 1, "your": 1 }, "length": 176 }, { "id": "25b846ff2e3c3b271883cdb6", "doc_id": "6a57d7d0644ea57e8f94eca7", "title": "use-resolved-path", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/primitives/use-resolved-path.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-resolved-path.json", "content": "--- title: useResolvedPath use_cases: \u003e- modular routing, nested routers, relative paths, dynamic base paths, component isolation tags: - path - modular - nested - routing - base - resolved version: '1.0' description: \u003e- Resolve relative paths with useResolvedPath - build modular routers, handle nested routes, and create isolated routing components. --- `useResolvedPath` retrieves a signal\\\u003cstring\\\u003e. It contains the current resolved path as defined in the Route. ```js const path = useResolvedPath(() =\u003e ''); // Parent Route path: /user/* console.log(path()); // /user const path = useResolvedPath(() =\u003e 'a/b/c'); // Parent Route path: /user/* console.log(path()); // /user/a/b/c const path = useResolvedPath(() =\u003e '/a/b/c'); // Note: / // Parent Route path: /user/* console.log(path()); // a/b/c ``` Useful for making modular routers ```js const parentRoutePath = useResolvedPath(() =\u003e ''); return \u003c\u003e \u003ch1\u003eModule component layer\u003c/h1\u003e \u003cRouter base={parentRoutePath()}\u003e // Modular magic \u003cRoute path=\"/\" component={() =\u003e \u003cdiv\u003eIndex\u003c/div\u003e}/\u003e \u003cRoute path=\"/a\" component={() =\u003e \u003cdiv\u003eAComponent\u003c/div\u003e}/\u003e \u003c/Router\u003e \u003c/\u003e ```", "term_freq": { "---": 2, "//": 8, "//github": 1, "/\u003e": 2, "/a": 1, "/a/b/c": 1, "/user": 1, "/user/*": 3, "/user/a/b/c": 1, "\u003c/\u003e": 1, "\u003c/router\u003e": 1, "\u003c\u003e": 1, "\u003cdiv\u003eacomponent\u003c/div\u003e": 1, "\u003cdiv\u003eindex\u003c/div\u003e": 1, "\u003ch1\u003emodule": 1, "\u003croute": 2, "\u003crouter": 1, "=\u003e": 6, "\u003e-": 2, "a/b/c": 2, "and": 1, "as": 1, "base": 2, "base=": 1, "build": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/primitives/use-resolved-path": 1, "component": 2, "component=": 2, "components": 1, "console": 3, "const": 4, "contains": 1, "create": 1, "current": 1, "defined": 1, "description": 1, "dynamic": 1, "for": 1, "github-document": 1, "handle": 1, "https": 1, "in": 1, "isolated": 1, "isolation": 1, "it": 1, "js": 2, "layer\u003c/h1\u003e": 1, "log": 3, "magic": 1, "making": 1, "mdx": 1, "modular": 5, "nested": 3, "note": 1, "parent": 3, "parentroutepath": 2, "path": 11, "path=": 2, "paths": 3, "relative": 2, "resolve": 1, "resolved": 2, "retrieves": 1, "return": 1, "route": 4, "routers": 3, "routes": 1, "routing": 3, "signal\\\u003cstring\\\u003e": 1, "tags": 1, "the": 2, "title": 1, "use-resolved-path": 1, "use_cases": 1, "useful": 1, "useresolvedpath": 7, "version": 1, "with": 1 }, "length": 146 }, { "id": "9475ecd4343d959f6a4c9969", "doc_id": "4b088e1b818e39fc2919b096", "title": "use-search-params", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/primitives/use-search-params.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-search-params.json", "content": "--- title: useSearchParams use_cases: \"pagination, filters, search forms, url state management, query string updates\" tags: - search - query - params - pagination - filters - url version: \"1.0\" description: \u003e- Manage URL query parameters with useSearchParams - handle pagination, filters, and search state directly in the URL query string. --- The `useSearchParams` function reads the URL query parameters for the current route and provides a function to update them. ## Import ```ts import { useSearchParams } from \"@solidjs/router\"; ``` ## Type ```ts function useSearchParams\u003cT extends Record\u003cstring, string | string[]\u003e\u003e(): [ Partial\u003cT\u003e, (params: SetSearchParams, options?: Partial\u003cNavigateOptions\u003e) =\u003e void, ]; ``` ## Parameters `useSearchParams` takes no arguments. ## Return value - **Type:** `[ Partial\u003cT\u003e, (params: SetSearchParams, options?: Partial\u003cNavigateOptions\u003e) =\u003e void ]` `useSearchParams` returns an array with two items. The first item is a reactive object containing the current query parameters. Accessing a property within a tracking scope registers a dependency, causing the computation to re-run when the parameter changes. Values are always strings. The second item is a function that updates the query string. It merges the object provided as its first argument with the current query parameters. Passing an empty string (`\"\"`), an empty array (`[]`), `undefined`, or `null` as a value removes the key. It accepts the same options as [`useNavigate`](/solid-router/reference/primitives/use-navigate) as the second parameter. By default, the `resolve` and `scroll` options are set to `false`. ## Examples ### Basic usage ```tsx import { useSearchParams } from \"@solidjs/router\"; function Paginator() { const [params, setParams] = useSearchParams(); const page = () =\u003e Number(params.page || \"1\"); return ( \u003cdiv\u003e \u003cspan\u003eCurrent Page: {page()}\u003c/span\u003e \u003cbutton onClick={() =\u003e setParams({ page: page() + 1 })}\u003eNext\u003c/button\u003e \u003c/div\u003e ); } ``` ## Related - [`useParams`](/solid-router/reference/primitives/use-params) - [`useLocation`](/solid-router/reference/primitives/use-location) - [`useNavigate`](/solid-router/reference/primitives/use-navigate)", "term_freq": { "##": 6, "###": 1, "**": 1, "**type": 1, "---": 2, "//github": 1, "/solid-router/reference/primitives/use-location": 1, "/solid-router/reference/primitives/use-navigate": 2, "/solid-router/reference/primitives/use-params": 1, "\u003c/div\u003e": 1, "\u003c/span\u003e": 1, "\u003cbutton": 1, "\u003cdiv\u003e": 1, "\u003cspan\u003ecurrent": 1, "=\u003e": 4, "\u003e-": 1, "\u003e\u003e": 1, "\u003enext\u003c/button\u003e": 1, "@solidjs/router": 2, "accepts": 1, "accessing": 1, "always": 1, "an": 3, "and": 3, "are": 2, "argument": 1, "arguments": 1, "array": 2, "as": 4, "basic": 1, "by": 1, "causing": 1, "changes": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/primitives/use-search-params": 1, "computation": 1, "const": 2, "containing": 1, "current": 3, "default": 1, "dependency": 1, "description": 1, "directly": 1, "empty": 2, "examples": 1, "extends": 1, "false": 1, "filters": 3, "first": 2, "for": 1, "forms": 1, "from": 2, "function": 5, "github-document": 1, "handle": 1, "https": 1, "import": 3, "in": 1, "is": 2, "it": 2, "item": 2, "items": 1, "its": 1, "key": 1, "manage": 1, "management": 1, "mdx": 1, "merges": 1, "no": 1, "null": 1, "number": 1, "object": 2, "onclick=": 1, "options": 4, "or": 1, "page": 6, "pagination": 3, "paginator": 1, "parameter": 2, "parameters": 5, "params": 5, "partial\u003cnavigateoptions\u003e": 2, "partial\u003ct\u003e": 2, "passing": 1, "property": 1, "provided": 1, "provides": 1, "query": 8, "re-run": 1, "reactive": 1, "reads": 1, "record\u003cstring": 1, "registers": 1, "related": 1, "removes": 1, "resolve": 1, "return": 2, "returns": 1, "route": 1, "same": 1, "scope": 1, "scroll": 1, "search": 3, "second": 2, "set": 1, "setparams": 2, "setsearchparams": 2, "state": 2, "string": 6, "strings": 1, "tags": 1, "takes": 1, "that": 1, "the": 16, "them": 1, "title": 1, "to": 3, "tracking": 1, "ts": 2, "tsx": 1, "two": 1, "type": 1, "undefined": 1, "update": 1, "updates": 2, "url": 5, "usage": 1, "use-search-params": 1, "use_cases": 1, "uselocation": 1, "usenavigate": 2, "useparams": 1, "usesearchparams": 8, "usesearchparams\u003ct": 1, "value": 2, "values": 1, "version": 1, "void": 2, "when": 1, "with": 3, "within": 1, "||": 1 }, "length": 254 }, { "id": "01d508411de8ab1d79cdf034", "doc_id": "364743f9181593a9a0ea073f", "title": "use-server", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/server/use-server.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-server.json", "content": "--- title: '\"use server\"' use_cases: \u003e- server-only logic, api endpoints, database operations, secure operations, data fetching, server actions, rpc calls, authentication logic tags: - server - rpc - api - data-fetching - actions - security - database version: '1.0' description: \u003e- Create server-only functions in SolidStart using 'use server' directive. Handle database operations, API calls, and secure logic on the server. --- `\"use server\"` enables functions or files to be executed only on the server. Server functions allow client components to call code that is executed in the server context. ```tsx // Function-level const logHello = async (message: string) =\u003e { \"use server\"; console.log(message); }; ``` Or when using at the top of a file. ```tsx // File-level \"use server\"; const logHello = async (message: string) =\u003e { console.log(message); }; ``` **Note:** `\"use server\"` functions must be marked async or return a promise. ## Basic usage When using `\"use server\"`, regardless of whether server rendering is enabled, the functions it apply to will only run on the server. To do this, compilation is used to transform the `\"use server\"` function into an RPC call to the server. If `\"use server\"` is inserted as the first line in a file, the entire file will become server-only. ```tsx {1} \"use server\"; const logHello = async (message: string) =\u003e { console.log(message); }; ``` However, if `\"use server\"` is inserted as the first line of a function, only that function will be server-only: ```tsx {2} const logHello = async (message: string) =\u003e { \"use server\"; console.log(message); }; logHello(\"Hello\"); ``` In both examples, the `logHello` function will only show in the server console, regardless of whether rendering was on the server or in the browser. ## Usage with Data APIs Server functions can be used for fetching data and performing actions on the server. The following examples show how to use server functions alongside solid-router's data APIs. ```tsx {3} const getUser = query((id) =\u003e { \"use server\"; return db.getUser(id); }, \"users\"); const updateUser = action(async (id, data) =\u003e { \"use server\" await db.setUser(id, data); throw redirect(\"/\", { revalidate: getUser.keyFor(id) }); }); ``` When `getUser` or `updateUser` are triggered on the client, an http request will be made to the server, which calls the corresponding server function. ## Single-flight mutations In the above example, when the `updateUser` action is called, a redirect is thrown on the server. Solid Start can handle this redirect on the server instead of propagating it to the client. The data for the redirected page is fetched and streamed to the client in the same http request as the `updateUser` action, rather than the client requiring a separate http request for the redirected page. ## Serialization Server functions allow the serialization of many different data types in the response, using the Seroval serializer. The full list is available [in Seroval's source code](https://github.com/lxsmnsyc/seroval/blob/main/docs/compatibility.md#supported-types). ## Meta information To get a stable function-specific identifier, even for parallel processes or multiple cpu cores or workers, use the [`getServerFunctionMeta`](/solid-start/reference/server/get-server-function-meta)", "term_freq": { "##": 5, "**": 1, "**note": 1, "---": 2, "//": 2, "//github": 2, "/solid-start/reference/server/get-server-function-meta": 1, "=\u003e": 6, "\u003e-": 2, "above": 1, "action": 3, "actions": 3, "allow": 2, "alongside": 1, "an": 2, "and": 3, "api": 3, "apis": 2, "apply": 1, "are": 1, "as": 3, "async": 6, "at": 1, "authentication": 1, "available": 1, "await": 1, "basic": 1, "be": 5, "become": 1, "both": 1, "browser": 1, "call": 2, "called": 1, "calls": 3, "can": 2, "client": 5, "code": 2, "com/lxsmnsyc/seroval/blob/main/docs/compatibility": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/reference/server/use-server": 1, "compilation": 1, "components": 1, "console": 5, "const": 6, "context": 1, "cores": 1, "corresponding": 1, "cpu": 1, "create": 1, "data": 8, "data-fetching": 1, "database": 3, "db": 2, "description": 1, "different": 1, "directive": 1, "do": 1, "enabled": 1, "enables": 1, "endpoints": 1, "entire": 1, "even": 1, "example": 1, "examples": 2, "executed": 2, "fetched": 1, "fetching": 2, "file": 3, "file-level": 1, "files": 1, "first": 2, "following": 1, "for": 4, "full": 1, "function": 5, "function-level": 1, "function-specific": 1, "functions": 8, "get": 1, "getserverfunctionmeta": 1, "getuser": 4, "github-document": 1, "handle": 2, "hello": 1, "how": 1, "however": 1, "http": 3, "https": 2, "id": 5, "identifier": 1, "if": 2, "in": 10, "information": 1, "inserted": 2, "instead": 1, "into": 1, "is": 9, "it": 2, "keyfor": 1, "line": 2, "list": 1, "log": 4, "loghello": 6, "logic": 3, "made": 1, "many": 1, "marked": 1, "md#supported-types": 1, "mdx": 1, "message": 8, "meta": 1, "multiple": 1, "must": 1, "mutations": 1, "of": 6, "on": 8, "only": 4, "operations": 3, "or": 7, "page": 2, "parallel": 1, "performing": 1, "processes": 1, "promise": 1, "propagating": 1, "query": 1, "rather": 1, "redirect": 3, "redirected": 2, "regardless": 2, "rendering": 2, "request": 3, "requiring": 1, "response": 1, "return": 2, "revalidate": 1, "rpc": 3, "run": 1, "same": 1, "secure": 2, "security": 1, "separate": 1, "serialization": 2, "serializer": 1, "seroval": 2, "server": 33, "server-only": 4, "setuser": 1, "show": 2, "single-flight": 1, "solid": 1, "solid-router": 1, "solidstart": 1, "source": 1, "stable": 1, "start": 1, "streamed": 1, "string": 4, "tags": 1, "than": 1, "that": 2, "the": 37, "this": 2, "throw": 1, "thrown": 1, "title": 1, "to": 11, "top": 1, "transform": 1, "triggered": 1, "tsx": 5, "types": 1, "updateuser": 4, "usage": 2, "use": 16, "use-server": 1, "use_cases": 1, "used": 2, "users": 1, "using": 4, "version": 1, "was": 1, "when": 4, "whether": 2, "which": 1, "will": 5, "with": 1, "workers": 1 }, "length": 478 }, { "id": "f6c0e23db19d695730b36439", "doc_id": "df31399bf8d89aed850a8a2a", "title": "use-submission", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/use-submission.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-submission.json", "content": "--- title: useSubmission use_cases: \u003e- form feedback, pending states, optimistic updates, error handling, single submission tracking tags: - forms - submissions - pending - optimistic - errors - feedback version: '1.0' description: \u003e- Track form submission states with useSubmission. Handle pending feedback, optimistic updates, and errors for single forms. --- The `useSubmission` primitive returns the state of the _most recent_ submission for a given [action](/solid-router/concepts/actions). ## Import ```tsx import { useSubmission } from \"@solidjs/router\"; ``` ## Type ```tsx function useSubmission\u003cT extends Array\u003cany\u003e, U, V\u003e( fn: Action\u003cT, U, V\u003e, filter?: (input: V) =\u003e boolean ): Submission\u003cT, NarrowResponse\u003cU\u003e\u003e | SubmissionStub; ``` ## Parameters ### `action` - **Type:** `Action\u003cT, U, V\u003e` - **Required:** Yes The action to track. ### `filter` - **Type:** `(input: V) =\u003e boolean` - **Required:** No A function that filters submissions. It is executed for each submission in the order of creation. It receives an array of the action's inputs as a parameter and must return `true` to select the submission or `false` otherwise. The first submission that passes the filter is returned by `useSubmission`. ## Return value `useSubmission` returns a reactive object with the following properties: ### `input` A reactive value representing the input data of the action. ### `result` A reactive value representing the successful return value of the action. ### `error` A reactive value representing any error thrown by the action. ### `pending` A reactive boolean indicating if the action is currently running. ### `clear` A function to clear the submission's state. ### `retry` A function to re-execute the submission with the same input. ## Examples ### Basic usage ```tsx import { Show } from \"solid-js\"; import { action, useSubmission } from \"@solidjs/router\"; const addTodoAction = action(async (formData: FormData) =\u003e { const name = formData.get(\"name\")?.toString(); if (!name || name.length \u003c= 2) { return { ok: false, message: \"Name must be larger than 2 characters.\" }; } // ... Sends the todo data to the server. return { ok: true }; }, \"addTodo\"); function AddTodoForm() { const submission = useSubmission(addTodoAction); return ( \u003cform action={addTodoAction} method=\"post\"\u003e \u003cinput name=\"name\" /\u003e \u003cbutton type=\"submit\"\u003e{submission.pending ? \"Adding...\" : \"Add\"}\u003c/button\u003e \u003cShow when={!submission.result?.ok}\u003e \u003cdiv\u003e \u003cp\u003e{submission.result.message}\u003c/p\u003e \u003cbutton onClick={() =\u003e submission.clear()}\u003eClear\u003c/button\u003e \u003cbutton onClick={() =\u003e submission.retry()}\u003eRetry\u003c/button\u003e \u003c/div\u003e \u003c/Show\u003e \u003c/form\u003e ); } ``` ### Filtering submissions ```tsx import { useSubmission } from \"@solidjs/router\"; const addTodoAction = action(async (formData: FormData) =\u003e { // ... Sends the todo data to the server. }, \"addTodo\"); function LatestTodo() { const latestValidSubmission = useSubmission( addTodoAction, ([formData]: [FormData]) =\u003e { const name = formData.get(\"name\")?.toString(); return name \u0026\u0026 name.length \u003e 2; } ); return \u003cp\u003eLatest valid submission: {latestValidSubmission.result}\u003c/p\u003e; } ```", "term_freq": { "##": 5, "###": 10, "\u0026\u0026": 1, "**": 4, "**required": 2, "**type": 2, "---": 2, "//": 2, "//github": 1, "/\u003e": 1, "/solid-router/concepts/actions": 1, "\u003c/button\u003e": 1, "\u003c/div\u003e": 1, "\u003c/form\u003e": 1, "\u003c/p\u003e": 2, "\u003c/show\u003e": 1, "\u003c=": 1, "\u003cbutton": 3, "\u003cdiv\u003e": 1, "\u003cform": 1, "\u003cinput": 1, "\u003cp\u003e": 1, "\u003cp\u003elatest": 1, "\u003cshow": 1, "=\u003e": 7, "\u003e-": 2, "\u003eclear\u003c/button\u003e": 1, "\u003eretry\u003c/button\u003e": 1, "@solidjs/router": 3, "_most": 1, "action": 11, "action\u003ct": 2, "action=": 1, "add": 1, "adding": 1, "addtodo": 2, "addtodoaction": 5, "addtodoform": 1, "an": 1, "and": 2, "any": 1, "array": 1, "array\u003cany\u003e": 1, "as": 1, "async": 2, "basic": 1, "be": 1, "boolean": 3, "by": 2, "characters": 1, "clear": 3, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/data-apis/use-submission": 1, "const": 6, "creation": 1, "currently": 1, "data": 3, "description": 1, "each": 1, "error": 3, "errors": 2, "examples": 1, "executed": 1, "extends": 1, "false": 2, "feedback": 3, "filter": 3, "filtering": 1, "filters": 1, "first": 1, "fn": 1, "following": 1, "for": 3, "form": 2, "formdata": 8, "forms": 2, "from": 4, "function": 6, "get": 2, "github-document": 1, "given": 1, "handle": 1, "handling": 1, "https": 1, "if": 2, "import": 5, "in": 1, "indicating": 1, "input": 5, "inputs": 1, "is": 3, "it": 2, "larger": 1, "latesttodo": 1, "latestvalidsubmission": 2, "length": 2, "mdx": 1, "message": 2, "method=": 1, "must": 2, "name": 10, "name=": 1, "narrowresponse\u003cu\u003e\u003e": 1, "no": 1, "object": 1, "of": 5, "ok": 3, "onclick=": 2, "optimistic": 3, "or": 1, "order": 1, "otherwise": 1, "parameter": 1, "parameters": 1, "passes": 1, "pending": 5, "post": 1, "primitive": 1, "properties": 1, "re-execute": 1, "reactive": 5, "receives": 1, "recent_": 1, "representing": 3, "result": 4, "retry": 2, "return": 8, "returned": 1, "returns": 2, "running": 1, "same": 1, "select": 1, "sends": 2, "server": 2, "show": 1, "single": 2, "solid-js": 1, "state": 2, "states": 2, "submission": 15, "submission\u003ct": 1, "submissions": 3, "submissionstub": 1, "submit": 1, "successful": 1, "tags": 1, "than": 1, "that": 2, "the": 23, "thrown": 1, "title": 1, "to": 6, "todo": 2, "tostring": 2, "track": 2, "tracking": 1, "true": 2, "tsx": 4, "type": 1, "type=": 1, "updates": 2, "usage": 1, "use-submission": 1, "use_cases": 1, "usesubmission": 10, "usesubmission\u003ct": 1, "v\u003e": 3, "valid": 1, "value": 5, "version": 1, "when=": 1, "with": 3, "yes": 1, "||": 1 }, "length": 393 }, { "id": "d7859be2d92a8671abda2481", "doc_id": "cca4b56385490b9bf5f5d438", "title": "use-submissions", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/data-apis/use-submissions.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-submissions.json", "content": "--- title: useSubmissions use_cases: \u003e- multiple forms, submission history, batch operations, optimistic lists, error recovery tags: - forms - submissions - multiple - history - optimistic - batch version: '1.0' description: \u003e- Manage multiple form submissions simultaneously with useSubmissions. Track history, handle errors, and show optimistic updates. --- The `useSubmissions` primitive returns the state of all submissions for a given [action](/solid-router/concepts/actions). ## Import ```tsx import { useSubmissions } from \"@solidjs/router\"; ``` ## Type ```tsx function useSubmissions\u003cT extends Array\u003cany\u003e, U, V\u003e( fn: Action\u003cT, U, V\u003e, filter?: (input: V) =\u003e boolean ): Submission\u003cT, NarrowResponse\u003cU\u003e\u003e[] \u0026 { pending: boolean; }; ``` ## Parameters ### `action` - **Type:** `Action\u003cT, U, V\u003e` - **Required:** Yes The action to track. ### `filter` - **Type:** `(input: V) =\u003e boolean` - **Required:** No A function that filters submissions. It is executed for each submission in the order of creation. It receives an array of the action's inputs as a parameter and must return `true` to select the submission or `false` otherwise. ## Return value `useSubmissions` returns a reactive array of submission objects. Each submission object has the following properties: ### `input` The reactive input data of the action. ### `result` A reactive value representing the successful return value of the action. ### `error` A reactive value for any error thrown by the action. ### `pending` A reactive boolean indicating if the action is currently running. ### `clear` A function to clear the submission's state. ### `retry` A function to re-execute the submission with the same input. ## Examples ### Basic usage ```tsx import { For, Show } from \"solid-js\"; import { action, useSubmissions } from \"@solidjs/router\"; const addTodoAction = action(async (formData: FormData) =\u003e { // ... Sends the todo data to the server. }, \"addTodo\"); function AddTodoForm() { const submissions = useSubmissions(addTodoAction); return ( \u003cdiv\u003e \u003cform action={addTodoAction} method=\"post\"\u003e \u003cinput name=\"name\" /\u003e \u003cbutton type=\"submit\"\u003eAdd\u003c/button\u003e \u003c/form\u003e \u003cFor each={submissions}\u003e {(submission) =\u003e ( \u003cdiv\u003e \u003cspan\u003eAdding \"{submission.input[0].get(\"name\")?.toString()}\"\u003c/span\u003e \u003cShow when={submission.pending}\u003e \u003cspan\u003e (pending...)\u003c/span\u003e \u003c/Show\u003e \u003cShow when={submission.result?.ok}\u003e \u003cspan\u003e (completed)\u003c/span\u003e \u003c/Show\u003e \u003cShow when={!submission.result?.ok}\u003e \u003cspan\u003e{` (Error: ${submission.result?.message})`}\u003c/span\u003e \u003cbutton onClick={() =\u003e submission.retry()}\u003eRetry\u003c/button\u003e \u003c/Show\u003e \u003c/div\u003e )} \u003c/For\u003e \u003c/div\u003e ); } ``` ### Filtering submissions ```tsx import { useSubmissions } from \"@solidjs/router\"; const addTodoAction = action(async (formData: FormData) =\u003e { // ... Sends the todo data to the server. }, \"addTodo\"); function FailedTodos() { const failedSubmissions = useSubmissions( addTodoAction, ([formData]: [FormData]) =\u003e { // Filters for submissions that failed a client-side validation const name = formData.get(\"name\")?.toString() ?? \"\"; return name.length \u003c= 2; } ); return ( \u003cdiv\u003e \u003cp\u003eFailed submissions:\u003c/p\u003e \u003cFor each={failedSubmissions}\u003e {(submission) =\u003e ( \u003cdiv\u003e \u003cspan\u003e{submission.input[0].get(\"name\")?.toString()}\u003c/span\u003e \u003cbutton onClick={() =\u003e submission.retry()}\u003eRetry\u003c/button\u003e \u003c/div\u003e )} \u003c/For\u003e \u003c/div\u003e ); } ```", "term_freq": { "##": 5, "###": 10, "**": 4, "**required": 2, "**type": 2, "---": 2, "//": 3, "//github": 1, "/\u003e": 1, "/solid-router/concepts/actions": 1, "\u003c/div\u003e": 4, "\u003c/for\u003e": 2, "\u003c/form\u003e": 1, "\u003c/p\u003e": 1, "\u003c/show\u003e": 3, "\u003c/span\u003e": 5, "\u003c=": 1, "\u003cbutton": 3, "\u003cdiv\u003e": 4, "\u003cfor": 2, "\u003cform": 1, "\u003cinput": 1, "\u003cp\u003efailed": 1, "\u003cshow": 3, "\u003cspan\u003e": 4, "\u003cspan\u003eadding": 1, "=\u003e": 9, "\u003e-": 2, "\u003eadd\u003c/button\u003e": 1, "\u003eretry\u003c/button\u003e": 2, "@solidjs/router": 3, "action": 11, "action\u003ct": 2, "action=": 1, "addtodo": 2, "addtodoaction": 5, "addtodoform": 1, "all": 1, "an": 1, "and": 2, "any": 1, "array": 2, "array\u003cany\u003e": 1, "as": 1, "async": 2, "basic": 1, "batch": 2, "boolean": 4, "by": 1, "clear": 2, "client-side": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-router/reference/data-apis/use-submissions": 1, "completed": 1, "const": 5, "creation": 1, "currently": 1, "data": 3, "description": 1, "each": 2, "each=": 2, "error": 4, "errors": 1, "examples": 1, "executed": 1, "extends": 1, "failed": 1, "failedsubmissions": 2, "failedtodos": 1, "false": 1, "filter": 2, "filtering": 1, "filters": 2, "fn": 1, "following": 1, "for": 5, "form": 1, "formdata": 7, "forms": 2, "from": 4, "function": 6, "get": 3, "github-document": 1, "given": 1, "handle": 1, "has": 1, "history": 3, "https": 1, "if": 1, "import": 5, "in": 1, "indicating": 1, "input": 7, "inputs": 1, "is": 2, "it": 2, "length": 1, "lists": 1, "manage": 1, "mdx": 1, "message": 1, "method=": 1, "multiple": 3, "must": 1, "name": 6, "name=": 1, "narrowresponse\u003cu\u003e\u003e": 1, "no": 1, "object": 1, "objects": 1, "of": 6, "ok": 2, "onclick=": 2, "operations": 1, "optimistic": 3, "or": 1, "order": 1, "otherwise": 1, "parameter": 1, "parameters": 1, "pending": 4, "post": 1, "primitive": 1, "properties": 1, "re-execute": 1, "reactive": 5, "receives": 1, "recovery": 1, "representing": 1, "result": 4, "retry": 3, "return": 6, "returns": 2, "running": 1, "same": 1, "select": 1, "sends": 2, "server": 2, "show": 2, "simultaneously": 1, "solid-js": 1, "state": 2, "submission": 17, "submission\u003ct": 1, "submissions": 9, "submit": 1, "successful": 1, "tags": 1, "that": 2, "the": 20, "thrown": 1, "title": 1, "to": 6, "todo": 2, "tostring": 3, "track": 2, "true": 1, "tsx": 4, "type": 1, "type=": 1, "updates": 1, "usage": 1, "use-submissions": 1, "use_cases": 1, "usesubmissions": 9, "usesubmissions\u003ct": 1, "v\u003e": 3, "validation": 1, "value": 4, "version": 1, "when=": 3, "with": 2, "yes": 1 }, "length": 409 }, { "id": "587682963d0767a967360f0e", "doc_id": "2b6cecd86641d6ba257da89a", "title": "use-transition", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/reactive-utilities/use-transition.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use-transition.json", "content": "--- title: useTransition use_cases: \u003e- async batching, loading states, suspense integration, concurrent updates, ui transitions tags: - transitions - async - suspense - loading - batching - concurrent version: '1.0' description: \u003e- Batch async updates with transitions in SolidJS. Track pending states and defer commits until all async processes complete for smooth UI updates. --- ```ts import { useTransition } from \"solid-js\" function useTransition(): [ pending: () =\u003e boolean, startTransition: (fn: () =\u003e void) =\u003e Promise\u003cvoid\u003e ] ``` Used to batch async updates in a transaction deferring commit until all async processes are complete. This is tied into Suspense and only tracks resources read under Suspense boundaries. ```ts const [isPending, start] = useTransition(); // check if transitioning isPending(); // wrap in transition start(() =\u003e setSignal(newValue), () =\u003e /* transition is done */) ```", "term_freq": { "*/": 1, "---": 2, "/*": 1, "//": 2, "//github": 1, "=\u003e": 5, "\u003e-": 2, "all": 2, "and": 2, "are": 1, "async": 6, "batch": 2, "batching": 2, "boolean": 1, "boundaries": 1, "check": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/reactive-utilities/use-transition": 1, "commit": 1, "commits": 1, "complete": 2, "concurrent": 2, "const": 1, "defer": 1, "deferring": 1, "description": 1, "done": 1, "fn": 1, "for": 1, "from": 1, "function": 1, "github-document": 1, "https": 1, "if": 1, "import": 1, "in": 3, "integration": 1, "into": 1, "is": 2, "ispending": 2, "loading": 2, "mdx": 1, "newvalue": 1, "only": 1, "pending": 2, "processes": 2, "promise\u003cvoid\u003e": 1, "read": 1, "resources": 1, "setsignal": 1, "smooth": 1, "solid-js": 1, "solidjs": 1, "start": 2, "starttransition": 1, "states": 2, "suspense": 4, "tags": 1, "this": 1, "tied": 1, "title": 1, "to": 1, "track": 1, "tracks": 1, "transaction": 1, "transition": 2, "transitioning": 1, "transitions": 3, "ts": 2, "ui": 2, "under": 1, "until": 2, "updates": 4, "use-transition": 1, "use_cases": 1, "used": 1, "usetransition": 4, "version": 1, "void": 1, "with": 1, "wrap": 1 }, "length": 122 }, { "id": "59f89e43e2f4dbffbaed9d50", "doc_id": "2e8897f852e77df49368988e", "title": "use", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/use.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/use.json", "content": "--- title: 'use:*' order: 5 use_cases: \u003e- complex dom interactions, tooltips, form handling, two-way data binding, reusable element behaviors, custom input components tags: - directives - dom - forms - bindings - components - typescript version: '1.0' description: \u003e- Create custom directives in SolidJS to attach reusable behaviors to DOM elements. Perfect for tooltips, form handling, and two-way data binding. --- Custom directives attach reusable behavior to DOM elements, acting as syntactic sugar over `ref`. They’re ideal for complex DOM interactions like scrolling, tooltips, or form handling, which are cumbersome to repeat in JSX. A directive is a function with the following signature ```ts function directive(element: HTMLElement, accessor: Accessor\u003cany\u003e): void; ``` Directive functions are called at render time but before being added to the DOM. You can do whatever you'd like in them including create signals, effects, register clean-up etc. ## Example A `model` directive for two-way data binding ```tsx import type { Accessor, Signal } from \"solid-js\"; function model(element: HTMLInputElement, value: Accessor\u003cSignal\u003cstring\u003e\u003e) { const [field, setField] = value(); createRenderEffect(() =\u003e (element.value = field())); element.addEventListener(\"input\", ({ target }) =\u003e setField(target.value)); } const [name, setName] = createSignal(\"\"); \u003cinput type=\"text\" use:model={[name, setName]} /\u003e; ``` ## TypeScript Support To type custom directives, extend the `DirectiveFunctions` interface ```ts declare module \"solid-js\" { namespace JSX { interface DirectiveFunctions { model: typeof model; } } } ``` If you just want to constrain the second argument to the directive function, you can extend the older `Directives` interface ```tsx declare module \"solid-js\" { namespace JSX { interface Directives { model: Signal\u003cstring\u003e; } } } ``` ## Avoiding Tree-Shaking When importing a directive `d` from another module and using it only as `use:d`, TypeScript (via [babel-preset-typescript](https://babeljs.io/docs/babel-preset-typescript)) may remove the import, as it doesn’t recognize `use:d` as a reference to `d`. To prevent this: 1. Use the `onlyRemoveTypeImports: true` option in `babel-preset-typescript`. For `vite-plugin-solid`, add this to `vite.config.ts` ```ts import solidPlugin from \"vite-plugin-solid\"; export default { plugins: [ solidPlugin({ typescript: { onlyRemoveTypeImports: true } }) ], }; ``` Note: This requires consistent use of `export type` and `import type` in your codebase to avoid issues. 2. Add a fake access like `false \u0026\u0026 d;` in the module ```tsx import { model } from \"./directives\"; false \u0026\u0026 model; // Prevents tree-shaking \u003cinput type=\"text\" use:model={[name, setName]} /\u003e; ``` This is removed by bundlers like Terser, unlike a plain `model;` which may remain in the bundle. :::caution[Limitations] Directives only work with native HTML elements (HTML/SVG/MathML/Custom Elements). Directives are not forwarded and **won't work in user defined components**, such as `\u003cMyComponent use:myinput={[..]}/\u003e` [see also](https://github.com/solidjs/solid/discussions/722) :::", "term_freq": { "##": 3, "\u0026\u0026": 2, "**won": 1, "---": 2, "//": 1, "//babeljs": 1, "//github": 2, "/\u003e": 3, "/directives": 1, "\u003cinput": 2, "\u003cmycomponent": 1, "=\u003e": 2, "\u003e-": 2, "access": 1, "accessor": 2, "accessor\u003cany\u003e": 1, "accessor\u003csignal\u003cstring\u003e\u003e": 1, "acting": 1, "add": 2, "added": 1, "addeventlistener": 1, "also": 1, "and": 4, "another": 1, "are": 3, "argument": 1, "as": 5, "at": 1, "attach": 2, "avoid": 1, "avoiding": 1, "babel-preset-typescript": 2, "before": 1, "behavior": 1, "behaviors": 2, "being": 1, "binding": 3, "bindings": 1, "bundle": 1, "bundlers": 1, "but": 1, "by": 1, "called": 1, "can": 2, "caution": 1, "clean-up": 1, "codebase": 1, "com/solidjs/solid-docs/blob/head/src/routes/reference/jsx-attributes/use": 1, "com/solidjs/solid/discussions/722": 1, "complex": 2, "components": 2, "components**": 1, "config": 1, "consistent": 1, "const": 2, "constrain": 1, "create": 2, "createrendereffect": 1, "createsignal": 1, "cumbersome": 1, "custom": 4, "data": 3, "declare": 2, "default": 1, "defined": 1, "description": 1, "directive": 6, "directivefunctions": 2, "directives": 8, "do": 1, "doesn’t": 1, "dom": 6, "effects": 1, "element": 5, "elements": 4, "etc": 1, "example": 1, "export": 2, "extend": 2, "fake": 1, "false": 2, "field": 2, "following": 1, "for": 4, "form": 3, "forms": 1, "forwarded": 1, "from": 4, "function": 4, "functions": 1, "github-document": 1, "handling": 3, "html": 1, "html/svg/mathml/custom": 1, "htmlelement": 1, "htmlinputelement": 1, "https": 3, "ideal": 1, "if": 1, "import": 5, "importing": 1, "in": 8, "including": 1, "input": 2, "interactions": 2, "interface": 4, "io/docs/babel-preset-typescript": 1, "is": 2, "issues": 1, "it": 2, "jsx": 3, "just": 1, "like": 4, "limitations": 1, "may": 2, "mdx": 1, "model": 8, "model=": 2, "module": 4, "myinput=": 1, "name": 3, "namespace": 2, "native": 1, "not": 1, "note": 1, "of": 1, "older": 1, "only": 2, "onlyremovetypeimports": 2, "option": 1, "or": 1, "order": 1, "over": 1, "perfect": 1, "plain": 1, "plugins": 1, "prevent": 1, "prevents": 1, "recognize": 1, "ref": 1, "reference": 1, "register": 1, "remain": 1, "remove": 1, "removed": 1, "render": 1, "repeat": 1, "requires": 1, "reusable": 3, "scrolling": 1, "second": 1, "see": 1, "setfield": 2, "setname": 3, "signal": 1, "signal\u003cstring\u003e": 1, "signals": 1, "signature": 1, "solid-js": 3, "solidjs": 1, "solidplugin": 2, "such": 1, "sugar": 1, "support": 1, "syntactic": 1, "tags": 1, "target": 2, "terser": 1, "text": 2, "the": 10, "them": 1, "they’re": 1, "this": 4, "time": 1, "title": 1, "to": 12, "tooltips": 3, "tree-shaking": 2, "true": 2, "ts": 4, "tsx": 3, "two-way": 3, "type": 4, "type=": 2, "typeof": 1, "typescript": 4, "unlike": 1, "use": 9, "use_cases": 1, "user": 1, "using": 1, "value": 4, "version": 1, "via": 1, "vite": 1, "vite-plugin-solid": 2, "void": 1, "want": 1, "whatever": 1, "when": 1, "which": 2, "with": 2, "work": 2, "you": 4, "your": 1 }, "length": 395 }, { "id": "f3ed60f8fd7d50f74bb631dc", "doc_id": "8a691890870ad114491c6e7e", "title": "vercel", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deployment-options/vercel.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/vercel.json", "content": "--- title: Vercel order: 6 mainNavExclude: true use_cases: \u003e- deploying to production, hosting solid apps, ci/cd setup, automatic deployments, serverless functions tags: - deployment - hosting - vercel - production - ci/cd - serverless version: '1.0' description: \u003e- Deploy SolidStart apps to Vercel with automatic builds, serverless functions, and GitHub integration for seamless production hosting. --- [Vercel](https://vercel.com/) is a widely-used platform specialized in hosting frontend projects. For detailed information regarding build and deployment instructions, as well as features they offer, please visit the [Vercel documentation](https://vercel.com/docs). ## Using Vercel web interface 1. Navigate to [vercel.com/login](https://vercel.com/login) to log in or create a new account. Connect with your preferred Git repository hosting service. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=0mwBl275l6WC3YD5Uz_IcQ\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=0mwBl275l6WC3YD5Uz_IcQ\u0026type=embed\" /\u003e 2. Once on the dashboard, click the button at the top right corner and choose \"Add New Project.\" On the next page, select \"Continue with GitHub\" or your preferred Git service. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=QhW5b3iEbwyWzJ5fhUDrZw\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=QhW5b3iEbwyWzJ5fhUDrZw\u0026type=embed\" /\u003e 3. You will then see with a list of your repositories. Use the search bar if needed to find the specific repository you want to deploy. Click the \"Import\" button to proceed. 4. After importing your Solid project repository, you will be taken to a configuration screen. If your project requires any environment variables, add them in the designated field. Click \"Deploy\" to start the deployment process. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=_OhHyCQRVxMqXdCkkTE3nw\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=_OhHyCQRVxMqXdCkkTE3nw\u0026type=embed\" /\u003e 5. Once the build and deployment are finished, you will be redirected to a screen that displays a screenshot of your live site. \u003cEraserLink href=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe?elements=hAbTtvs_2l4xDqySVYsiVA\" preview=\"https://app.eraser.io/workspace/w9y9PNVjwSqDCEPNTEoe/preview?elements=hAbTtvs_2l4xDqySVYsiVA\u0026type=embed\" /\u003e ## Using the Vercel CLI 1. Install the Vercel CLI using your preferred package manager. ```package-install-global vercel ``` 2. Open your terminal, navigate to your project directory, and run the following command to log in: ```bash frame=\"none\" vercel ``` 3. Follow the on-screen instructions from the CLI to finalize the deployment. Once completed, your project will be live on Vercel and accessible via the provided URL.", "term_freq": { "##": 2, "---": 2, "//app": 8, "//github": 1, "//vercel": 3, "/\u003e": 4, "\u003ceraserlink": 4, "\u003e-": 2, "accessible": 1, "account": 1, "add": 2, "after": 1, "and": 6, "any": 1, "apps": 2, "are": 1, "as": 2, "at": 1, "automatic": 2, "bar": 1, "bash": 1, "be": 3, "build": 2, "builds": 1, "button": 2, "choose": 1, "ci/cd": 2, "cli": 3, "click": 3, "com/": 1, "com/docs": 1, "com/login": 2, "com/solidjs/solid-docs/blob/head/src/routes/guides/deployment-options/vercel": 1, "command": 1, "completed": 1, "configuration": 1, "connect": 1, "continue": 1, "corner": 1, "create": 1, "dashboard": 1, "deploy": 3, "deploying": 1, "deployment": 5, "deployments": 1, "description": 1, "designated": 1, "detailed": 1, "directory": 1, "displays": 1, "documentation": 1, "elements=0mwbl275l6wc3yd5uz_icq": 1, "elements=0mwbl275l6wc3yd5uz_icq\u0026type=embed": 1, "elements=_ohhycqrvxmqxdckkte3nw": 1, "elements=_ohhycqrvxmqxdckkte3nw\u0026type=embed": 1, "elements=habttvs_2l4xdqysvysiva": 1, "elements=habttvs_2l4xdqysvysiva\u0026type=embed": 1, "elements=qhw5b3iebwywzj5fhudrzw": 1, "elements=qhw5b3iebwywzj5fhudrzw\u0026type=embed": 1, "environment": 1, "eraser": 8, "features": 1, "field": 1, "finalize": 1, "find": 1, "finished": 1, "follow": 1, "following": 1, "for": 2, "frame=": 1, "from": 1, "frontend": 1, "functions": 2, "git": 2, "github": 2, "github-document": 1, "hosting": 5, "href=": 4, "https": 12, "if": 2, "import": 1, "importing": 1, "in": 4, "information": 1, "install": 1, "instructions": 2, "integration": 1, "interface": 1, "io/workspace/w9y9pnvjwsqdcepnteoe": 4, "io/workspace/w9y9pnvjwsqdcepnteoe/preview": 4, "is": 1, "list": 1, "live": 2, "log": 2, "mainnavexclude": 1, "manager": 1, "mdx": 1, "navigate": 2, "needed": 1, "new": 2, "next": 1, "none": 1, "of": 2, "offer": 1, "on": 3, "on-screen": 1, "once": 3, "open": 1, "or": 2, "order": 1, "package": 1, "package-install-global": 1, "page": 1, "platform": 1, "please": 1, "preferred": 3, "preview=": 4, "proceed": 1, "process": 1, "production": 3, "project": 5, "projects": 1, "provided": 1, "redirected": 1, "regarding": 1, "repositories": 1, "repository": 3, "requires": 1, "right": 1, "run": 1, "screen": 2, "screenshot": 1, "seamless": 1, "search": 1, "see": 1, "select": 1, "serverless": 3, "service": 2, "setup": 1, "site": 1, "solid": 2, "solidstart": 1, "specialized": 1, "specific": 1, "start": 1, "tags": 1, "taken": 1, "terminal": 1, "that": 1, "the": 18, "them": 1, "then": 1, "they": 1, "title": 1, "to": 13, "top": 1, "true": 1, "url": 1, "use": 1, "use_cases": 1, "using": 3, "variables": 1, "vercel": 13, "version": 1, "via": 1, "visit": 1, "want": 1, "web": 1, "well": 1, "widely-used": 1, "will": 4, "with": 4, "you": 4, "your": 10 }, "length": 346 }, { "id": "165e5e82145d979e28666f91", "doc_id": "dbbf2811cdaca1d65ec5e559", "title": "vite.config.ts | Remix", "url": "https://v2.remix.run/docs/file-conventions/vite-config", "type": "html", "source": "remix:does", "path": "devour_data/docs/vite.config.ts---remix-dbbf2811.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsvite.config.tsGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite vite.config.ts If your project is still using the Classic Remix Compiler, you should refer to the remix.config.js documentation instead. Remix uses Vite to compile your application. You'll need to provide a Vite config file with the Remix Vite plugin. Here's the minimum configuration you'll need: import { vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [remix()], }); Vite supports using a .js file for your config, but we recommend using TypeScript to help ensure your configuration is valid. Remix Vite Plugin Config import { vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [ remix({ basename: \"/\", buildDirectory: \"build\", future: { /* any enabled future flags */ }, ignoredRouteFiles: [\"**/*.css\"], routes(defineRoutes) { return defineRoutes((route) =\u003e { route(\"/somewhere/cool/*\", \"catchall.tsx\"); }); }, serverBuildFile: \"index.js\", }), ], }); appDirectory The path to the app directory, relative to the project root. Defaults to \"app\". future The future config lets you opt-into future breaking changes via Future Flags. ignoredRouteFiles This is an array of globs (via minimatch) that Remix will match to files while reading your app/routes directory. If a file matches, it will be ignored rather than treated like a route module. This is useful for ignoring CSS/test files you wish to colocate. routes A function for defining custom routes, in addition to those already defined using the filesystem convention in app/routes. Both sets of routes will be merged. import { vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [ remix({ routes: async (defineRoutes) =\u003e { // If you need to do async work, do it before calling `defineRoutes`, we use // the call stack of `route` inside to set nesting. return defineRoutes((route) =\u003e { // A common use for this is catchall routes. // - The first argument is the React Router path to match against // - The second is the relative filename of the route handler route(\"/some/path/*\", \"catchall.tsx\"); // if you want to nest routes, use the optional callback argument route(\"some/:path\", \"some/route/file.js\", () =\u003e { // - path is relative to parent path // - filenames are still relative to the app directory route(\"relative/path\", \"some/other/file\"); }); }); }, }), ], }); serverModuleFormat The output format of the server build, which can either be \"cjs\" or \"esm\". Defaults to \"esm\". buildDirectory The path to the build directory, relative to the project root. Defaults to \"build\". basename An optional basename for your route paths, passed through to the React Router \"basename\" option. Please note that this is different from your asset paths. You can configure the base public path for your assets via the Vite \"base\" option. buildEnd A function that is called after the full Remix build is complete. manifest Whether to write a .remix/manifest.json file to the build directory. Defaults to false. presets An array of presets to ease integration with other tools and hosting providers. serverBuildFile The name of the server file is generated in the server build directory. Defaults to \"index.js\". serverBundles A function for assigning addressable routes to server bundles. You may also want to enable the manifest option since, when server bundles are enabled, it contains mappings between routes and server bundles.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_966\\\":-5,\\\"_967\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":965},{\\\"_18\\\":210},\\\"docs/file-conventions/vite-config.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"viteconfigts\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#viteconfigts\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003evite.config.ts\\u003c/h1\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003eIf your project is still using the \\u003ca href=\\\\\\\"../guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\\"\\u003eClassic Remix Compiler\\u003c/a\\u003e, you should refer to the \\u003ca href=\\\\\\\"./remix-config\\\\\\\"\\u003eremix.config.js documentation\\u003c/a\\u003e instead.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix uses \\u003ca href=\\\\\\\"https://vitejs.dev\\\\\\\"\\u003eVite\\u003c/a\\u003e to compile your application. You'll need to provide a Vite config file with the Remix Vite plugin. Here's the minimum configuration you'll need:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evitePlugin\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eas\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e plugins: [\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e()],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003eVite supports using a \\u003ccode\\u003e.js\\u003c/code\\u003e file for your config, but we recommend using TypeScript to help ensure your configuration is valid.\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"remix-vite-plugin-config\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#remix-vite-plugin-config\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRemix Vite Plugin Config\\u003c/h2\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evitePlugin\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eas\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e plugins: [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e basename: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e buildDirectory: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebuild\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* any enabled future flags */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e ignoredRouteFiles: [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e**/*.css\\u003c/span\\u003e\\\\\\\"],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroutes\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eroute\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/somewhere/cool/*\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecatchall.tsx\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e serverBuildFile: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eindex.js\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e }),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e ],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4 id=\\\\\\\"appdirectory\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#appdirectory\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eappDirectory\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThe path to the \\u003ccode\\u003eapp\\u003c/code\\u003e directory, relative to the project root. Defaults to\\\\n\\u003ccode\\u003e\\\\\\\"app\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"future\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#future\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003efuture\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThe \\u003ccode\\u003efuture\\u003c/code\\u003e config lets you opt-into future breaking changes via \\u003ca href=\\\\\\\"../start/future-flags\\\\\\\"\\u003eFuture Flags\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"ignoredroutefiles\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#ignoredroutefiles\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eignoredRouteFiles\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThis is an array of globs (via \\u003ca href=\\\\\\\"https://npm.im/minimatch\\\\\\\"\\u003eminimatch\\u003c/a\\u003e) that Remix will match to\\\\nfiles while reading your \\u003ccode\\u003eapp/routes\\u003c/code\\u003e directory. If a file matches, it will be\\\\nignored rather than treated like a route module. This is useful for ignoring\\\\nCSS/test files you wish to colocate.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"routes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#routes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroutes\\u003c/h4\\u003e\\\\n\\u003cp\\u003eA function for defining custom routes, in addition to those already defined\\\\nusing the filesystem convention in \\u003ccode\\u003eapp/routes\\u003c/code\\u003e. Both sets of routes will be merged.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evitePlugin\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eas\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e plugins: [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroutes\\u003c/span\\u003e: \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// If you need to do async work, do it before calling `defineRoutes`, we use\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// the call stack of `route` inside to set nesting.\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eroute\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// A common use for this is catchall routes.\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// - The first argument is the React Router path to match against\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// - The second is the relative filename of the route handler\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/some/path/*\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecatchall.tsx\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// if you want to nest routes, use the optional callback argument\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esome/:path\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esome/route/file.js\\u003c/span\\u003e\\\\\\\", () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// - path is relative to parent path\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// - filenames are still relative to the app directory\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003erelative/path\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esome/other/file\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e }),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e ],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4 id=\\\\\\\"servermoduleformat\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#servermoduleformat\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverModuleFormat\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThe output format of the server build, which can either be \\u003ccode\\u003e\\\\\\\"cjs\\\\\\\"\\u003c/code\\u003e or \\u003ccode\\u003e\\\\\\\"esm\\\\\\\"\\u003c/code\\u003e.\\\\nDefaults to \\u003ccode\\u003e\\\\\\\"esm\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"builddirectory\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#builddirectory\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebuildDirectory\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThe path to the build directory, relative to the project root. Defaults to\\\\n\\u003ccode\\u003e\\\\\\\"build\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"basename\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#basename\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebasename\\u003c/h4\\u003e\\\\n\\u003cp\\u003eAn optional basename for your route paths, passed through to the \\u003ca href=\\\\\\\"https://reactrouter.com/v6/routers/create-browser-router#basename\\\\\\\"\\u003eReact Router \\\\\\\"basename\\\\\\\" option\\u003c/a\\u003e. Please note that this is different from your \\u003cem\\u003easset\\u003c/em\\u003e paths. You can configure the \\u003ca href=\\\\\\\"https://vitejs.dev/config/shared-options.html#base\\\\\\\"\\u003ebase public path\\u003c/a\\u003e for your assets via the \\u003ca href=\\\\\\\"https://vitejs.dev/config/shared-options.html#base\\\\\\\"\\u003eVite \\\\\\\"base\\\\\\\" option\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"buildend\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#buildend\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebuildEnd\\u003c/h4\\u003e\\\\n\\u003cp\\u003eA function that is called after the full Remix build is complete.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"manifest\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#manifest\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003emanifest\\u003c/h4\\u003e\\\\n\\u003cp\\u003eWhether to write a \\u003ccode\\u003e.remix/manifest.json\\u003c/code\\u003e file to the build directory. Defaults\\\\nto \\u003ccode\\u003efalse\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"presets\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#presets\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003epresets\\u003c/h4\\u003e\\\\n\\u003cp\\u003eAn array of \\u003ca href=\\\\\\\"../guides/presets\\\\\\\"\\u003epresets\\u003c/a\\u003e to ease integration with other tools and hosting providers.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"serverbuildfile\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#serverbuildfile\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverBuildFile\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThe name of the server file is generated in the server build directory. Defaults to \\u003ccode\\u003e\\\\\\\"index.js\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"serverbundles\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#serverbundles\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverBundles\\u003c/h4\\u003e\\\\n\\u003cp\\u003eA function for assigning addressable routes to \\u003ca href=\\\\\\\"../guides/server-bundles\\\\\\\"\\u003eserver bundles\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou may also want to enable the \\u003ccode\\u003emanifest\\u003c/code\\u003e option since, when server bundles are enabled, it contains mappings between routes and server bundles.\\u003c/p\\u003e\\\",\\\"docs/file-conventions/vite-config\\\",\\\"headings\\\",[960],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Remix Vite Plugin Config\\\",\\\"remix-vite-plugin-config\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#appdirectory\\\\\\": 1, "#basename\\\\\\": 1, "#builddirectory\\\\\\": 1, "#buildend\\\\\\": 1, "#future\\\\\\": 1, "#ignoredroutefiles\\\\\\": 1, "#manifest\\\\\\": 1, "#presets\\\\\\": 1, "#remix-vite-plugin-config\\\\\\": 1, "#routes\\\\\\": 1, "#serverbuildfile\\\\\\": 1, "#serverbundles\\\\\\": 1, "#servermoduleformat\\\\\\": 1, "#viteconfigts\\\\\\": 1, "$\\": 1, "$rc": 3, "**/*": 1, "*/": 1, "*/\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "--base03": 9, "--base05": 3, "--base08": 13, "--base0b": 18, "--base0d": 18, "--base0e": 24, "-1\\\\\\": 14, "-5": 2, "/$": 1, "/*": 1, "//": 8, "//npm": 1, "//reactrouter": 1, "//v2": 2, "//vitejs": 3, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/guides/presets\\\\\\": 1, "/guides/server-bundles\\\\\\": 1, "/guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\": 1, "/remix-config\\\\\\": 1, "/some/path/*": 1, "/somewhere/cool/*": 1, "/start/future-flags\\\\\\": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 2, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 2, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 2, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 2, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 2, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 2, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 2, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 2, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 2, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 2, "1\\\\\\": 3, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 2, "21": 3, "210": 2, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 2, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 3, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 3, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 3, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 3, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 3, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 2, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 2, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 1, "963": 1, "964": 1, "965": 1, "97": 1, "98": 1, "99": 1, "9\\\\\\": 2, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 5, "@remix-run/": 1, "@remix-run/dev": 4, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 109, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003evite": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 37, "\\\\ndefaults": 1, "\\n": 1, "\\u003c/code\\u003e": 6, "\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003ch2": 1, "\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 2, "\\u003c/p\\u003e\\\\n\\u003ch4": 10, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ca": 10, "\\u003ccode\\u003e": 2, "\\u003ccode\\u003e\\\\\\": 4, "\\u003ccode\\u003eapp/routes\\u003c/code\\u003e": 2, "\\u003ccode\\u003eapp\\u003c/code\\u003e": 1, "\\u003ccode\\u003efalse\\u003c/code\\u003e": 1, "\\u003ccode\\u003efuture\\u003c/code\\u003e": 1, "\\u003ccode\\u003emanifest\\u003c/code\\u003e": 1, "\\u003cem\\u003easset\\u003c/em\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 73, "\\u003e": 40, "\\u003e**/*": 1, "\\u003e/*": 1, "\\u003e//": 8, "\\u003e/\\u003c/span\\u003e\\\\\\": 1, "\\u003e/some/path/*\\u003c/span\\u003e\\\\\\": 1, "\\u003e/somewhere/cool/*\\u003c/span\\u003e\\\\\\": 1, "\\u003e=\\u003e\\u003c/span\\u003e": 4, "\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\": 3, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 5, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eappdirectory\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebasename\\u003c/h4\\u003e\\\\n\\u003cp\\u003ean": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebuilddirectory\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebuildend\\u003c/h4\\u003e\\\\n\\u003cp\\u003ea": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003efuture\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eignoredroutefiles\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003emanifest\\u003c/h4\\u003e\\\\n\\u003cp\\u003ewhether": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003epresets\\u003c/h4\\u003e\\\\n\\u003cp\\u003ean": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eremix": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroutes\\u003c/h4\\u003e\\\\n\\u003cp\\u003ea": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverbuildfile\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverbundles\\u003c/h4\\u003e\\\\n\\u003cp\\u003ea": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eservermoduleformat\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003evite": 1, "\\u003e\\u003ca": 14, "\\u003e\\u003ccode\\u003e\\u003cspan": 3, "\\u003e\\u003cpre": 3, "\\u003e\\u003cspan": 23, "\\u003eas\\u003c/span\\u003e": 3, "\\u003easync\\u003c/span\\u003e": 1, "\\u003ebase": 1, "\\u003ebuild\\u003c/span\\u003e\\\\\\": 1, "\\u003ecatchall": 2, "\\u003eclassic": 1, "\\u003edefault\\u003c/span\\u003e": 3, "\\u003edefineconfig\\u003c/span\\u003e": 6, "\\u003edefineroutes\\u003c/span\\u003e": 4, "\\u003eexport\\u003c/span\\u003e": 3, "\\u003efrom\\u003c/span\\u003e": 6, "\\u003efuture": 1, "\\u003eimport\\u003c/span\\u003e": 6, "\\u003eindex": 1, "\\u003eminimatch\\u003c/a\\u003e": 1, "\\u003epresets\\u003c/a\\u003e": 1, "\\u003ereact": 1, "\\u003erelative/path\\u003c/span\\u003e\\\\\\": 1, "\\u003eremix": 1, "\\u003eremix\\u003c/span\\u003e": 6, "\\u003ereturn\\u003c/span\\u003e": 2, "\\u003eroute\\u003c/span\\u003e": 6, "\\u003eroutes\\u003c/span\\u003e": 2, "\\u003eserver": 1, "\\u003esome/": 1, "\\u003esome/other/file\\u003c/span\\u003e\\\\\\": 1, "\\u003esome/route/file": 1, "\\u003evite": 1, "\\u003evite\\u003c/a\\u003e": 1, "\\u003evite\\u003c/span\\u003e\\\\\\": 3, "\\u003eviteplugin\\u003c/span\\u003e": 3, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 153, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 2, "_958\\": 1, "_961\\": 1, "_966\\": 1, "_967\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "addition": 2, "addressable": 2, "after": 2, "against": 1, "against\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "all": 1, "already": 2, "also": 2, "an": 5, "and": 13, "any": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 6, "app/routes": 2, "app\\\\\\": 1, "appdirectory": 1, "appdirectory\\\\\\": 1, "application": 2, "approach": 1, "are": 4, "argument": 3, "argument\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "aria-hidden=\\\\\\": 14, "array": 4, "as": 6, "asked": 1, "asset": 4, "assets": 2, "assigning": 2, "async": 3, "at": 1, "attrs\\": 1, "await\\": 1, "b=document": 1, "backend": 3, "base": 2, "base\\\\\\": 1, "basename": 7, "basename\\\\\\": 2, "be": 6, "be\\\\nignored": 1, "been": 2, "before": 3, "between": 2, "both": 2, "breadcrumbs": 3, "break": 1, "breaking": 2, "breeze": 1, "browser": 3, "build": 12, "build\\\\\\": 1, "builddirectory": 3, "builddirectory\\\\\\": 1, "buildend": 1, "buildend\\\\\\": 1, "built": 1, "bundles": 7, "bundles\\": 1, "bundles\\u003c/a\\u003e": 1, "bundling": 2, "bundling\\": 1, "but": 2, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "call": 2, "callback": 2, "called": 2, "calling": 2, "can": 5, "catch": 1, "catchall": 4, "changelog": 2, "changelog\\": 1, "changes": 2, "children\\": 1, "cjs": 1, "cjs\\\\\\": 1, "class=\\\\\\": 68, "classic": 1, "cli": 5, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "code": 4, "codeblock-line\\\\\\": 54, "colocate": 2, "color": 85, "com/v6/routers/create-browser-router#basename\\\\\\": 1, "common": 2, "community": 3, "community\\": 1, "compile": 2, "compiler": 1, "compiler\\u003c/a\\u003e": 1, "complete": 2, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 22, "config\\": 1, "config\\u003c/h2\\u003e\\\\n\\u003cdiv": 1, "configuration": 6, "configuration\\": 1, "configure": 2, "console": 1, "constraints": 2, "constraints\\": 1, "contains": 2, "contributing": 3, "contributing\\": 1, "controller": 2, "convention": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 16, "css/test": 1, "css\\": 1, "css\\u003c/span\\u003e\\\\\\": 1, "custom": 2, "d=c": 2, "data": 16, "data-code-block=\\\\\\": 3, "data-filename=\\\\\\": 6, "data-lang=\\\\\\": 6, "data-line-number=\\\\\\": 54, "data-line-numbers=\\\\\\": 6, "data=": 1, "data\\": 2, "default": 3, "defaults": 8, "defaults\\\\nto": 1, "defer": 2, "defer\\": 1, "deferred": 1, "defineconfig": 6, "defined": 1, "defined\\\\nusing": 1, "defineroutes": 6, "defining": 2, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "dev/config/shared-options": 2, "dev\\\\\\": 1, "development": 3, "different": 2, "directory": 11, "directory\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 5, "doc\\": 1, "docs/file-conventions/vite-config": 1, "docs/file-conventions/vite-config\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsvite": 1, "document": 1, "documentation": 1, "documentation\\u003c/a\\u003e": 1, "done": 1, "e--": 1, "e=0": 1, "ease": 2, "either": 2, "else": 2, "enable": 2, "enabled": 4, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "ensure": 2, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "esm": 2, "esm\\\\\\": 2, "everything": 1, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "export": 3, "extract": 2, "extract\\": 1, "f=a": 1, "false": 4, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 19, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename": 2, "filename\\": 1, "filenames": 2, "files": 5, "files\\": 1, "filesystem": 2, "first": 2, "firstchild": 2, "flags": 5, "flags\\": 1, "flags\\u003c/a\\u003e": 1, "flow": 2, "flow\\": 1, "for": 20, "form": 11, "form\\": 1, "format": 2, "found": 3, "frequently": 1, "from": 14, "frontend": 2, "frontend\\": 1, "full": 2, "fullstack": 3, "function": 7, "future": 13, "future\\\\\\": 1, "generated": 2, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "globs": 2, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "handle": 2, "handle\\": 1, "handler": 1, "handler\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 3, "here": 3, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hosting": 2, "hot": 3, "how": 1, "href=\\\\\\": 24, "html": 1, "html#base\\\\\\": 2, "html\\": 1, "https": 7, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 14, "icon-link\\\\\\": 14, "id=\\\\\\": 14, "if": 13, "ignored": 1, "ignoredroutefiles": 3, "ignoredroutefiles\\\\\\": 1, "ignoring": 1, "ignoring\\\\ncss/test": 1, "im/minimatch\\\\\\": 1, "import": 11, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 12, "inc": 1, "index": 6, "initial": 1, "insertbefore": 1, "inside": 2, "instead": 2, "integrating": 1, "integration": 2, "interactions": 1, "into": 2, "introduction": 1, "is": 25, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 6, "iterative": 1, "javascript": 2, "javascript\\": 1, "javascript\\\\\\": 2, "js": 13, "js\\": 1, "js\\\\\\": 1, "js\\u003c/code\\u003e": 1, "js\\u003c/span\\u003e\\\\\\": 2, "json": 4, "json\\": 1, "json\\u003c/code\\u003e": 1, "key": 4, "know": 1, "lazy": 3, "learning": 1, "let": 3, "lets": 2, "licensed": 1, "like": 2, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "ll": 4, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "makes": 1, "management": 4, "management\\": 2, "manifest": 2, "manifest\\\\\\": 1, "manual": 3, "mappings": 2, "match": 4, "matches": 2, "math": 1, "may": 2, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "merged": 2, "meta": 4, "meta\\": 2, "migrating": 4, "minimatch": 1, "minimum": 2, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 8, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "most": 1, "name": 2, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 7, "nest": 2, "nesting": 2, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 3, "note": 2, "null": 1, "number": 1, "of": 17, "on": 2, "once": 1, "one": 1, "open": 1, "opt-into": 2, "optimization": 2, "optimization\\": 1, "option": 4, "option\\u003c/a\\u003e": 2, "optional": 4, "or": 3, "order\\": 1, "other": 5, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "output": 2, "param": 2, "param\\": 1, "parent": 2, "parentnode": 2, "parse": 1, "passed": 2, "path": 11, "path\\u003c/a\\u003e": 1, "path\\u003c/span\\u003e\\\\\\": 1, "path\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "paths": 4, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "please": 2, "plugin": 5, "plugins": 6, "positions": 2, "postcss": 2, "postcss\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 4, "presets\\": 1, "presets\\\\\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 7, "provide": 2, "providers": 2, "public": 2, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "rather": 2, "react": 11, "react-router-scroll-positions": 1, "readablestream": 1, "reading": 2, "recommend": 2, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "refer": 2, "regular": 3, "related": 1, "relative": 10, "relative/path": 1, "released": 2, "remix": 28, "remix-vite-plugin-config\\": 1, "remix-vite-plugin-config\\\\\\": 1, "remix/manifest": 2, "remix\\": 2, "removechild": 2, "removeitem": 1, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 2, "rocking": 1, "rolling": 1, "root": 7, "root\\": 1, "route": 26, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 11, "router\\": 2, "routes": 20, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "routes\\\\\\": 1, "run/docs/file-conventions/vite-config": 1, "run\\": 1, "running": 1, "runtimes": 3, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "second": 2, "server": 26, "server\\": 3, "serverbuildfile": 3, "serverbuildfile\\\\\\": 1, "serverbundles": 1, "serverbundles\\\\\\": 1, "servermoduleformat": 1, "servermoduleformat\\\\\\": 1, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 2, "sets": 2, "shopify": 1, "should": 2, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "simplifying": 1, "since": 2, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "some/": 1, "some/other/file": 1, "some/route/file": 1, "spa": 3, "ssr": 1, "stack": 2, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "still": 4, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 85, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 3, "support\\": 1, "supports": 2, "tabindex=\\\\\\": 14, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "than": 2, "thank": 1, "that": 6, "the": 63, "this": 9, "those": 2, "through": 3, "title\\": 1, "tls": 2, "tls\\": 1, "to": 62, "to\\\\n\\u003ccode\\u003e\\\\\\": 2, "to\\\\nfiles": 1, "toc\\": 1, "tools": 2, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "treated": 2, "true": 6, "true\\\\\\": 20, "try": 1, "ts": 4, "ts\\": 1, "ts\\\\\\": 6, "ts\\u003c/h1\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003eif": 1, "tsgetting": 1, "tsx": 2, "tsx\\u003c/span\\u003e\\\\\\": 2, "tutorial": 3, "typeof": 1, "typescript": 4, "typescript\\": 1, "typescript\\\\\\": 4, "ui": 2, "ui\\": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "use": 5, "use\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "useful": 2, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "uses": 2, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 7, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "valid": 2, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 87, "variables": 2, "variables\\": 1, "via": 6, "view": 2, "vite": 26, "vite\\": 1, "viteconfigts\\\\\\": 1, "viteplugin": 3, "vs": 6, "walk": 1, "want": 4, "way": 1, "we": 4, "when": 3, "whether": 1, "which": 2, "while": 3, "why": 1, "will": 8, "window": 11, "wish": 2, "with": 8, "work": 2, "write": 2, "writes": 2, "writes\\": 1, "you": 22, "your": 19, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 5845 }, { "id": "b599896d23807f86343d1cd1", "doc_id": "dbbf2811cdaca1d65ec5e559", "title": "vite.config.ts | Remix", "url": "https://v2.remix.run/docs/file-conventions/vite-config", "type": "html", "source": "remix:routes", "path": "devour_data/docs/vite.config.ts---remix.json", "content": "DocsBlogResourcesReact Router v7 has been released. View the docsDocsBlogResourcesView code on GitHubChat on DiscordReact Router v7 has been released. View the docsvite.config.tsGetting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite Getting StartedQuick Start (5m) Tutorial (30m) Upgrading to v2 Community Future Flags Changelog Discussion TopicsIntroduction, Technical Explanation Runtimes, Adapters, Templates, and Deployment Route Configuration Fullstack Data Flow Server vs. Client Code Execution React Router Progressive Enhancement Pending UI State Management Network Concurrency Management Form vs. fetcher Hot Module Replacement Form Resubmissions File Conventions.client modules .server modules Asset Imports entry.client entry.server root Route File Naming vite.config.ts Route Moduleaction clientAction clientLoader Component ErrorBoundary handle headers HydrateFallback links loader meta shouldRevalidate ComponentsAwait Form Link Links LiveReload Meta NavLink Outlet PrefetchPageLinks Scripts ScrollRestoration HooksuseActionData useAsyncError 🆕useAsyncValue 🆕useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useLoaderData useLocation useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams unstable_usePrompt useResolvedPath useRevalidator 🆕useRouteError 🆕useRouteLoaderData useSearchParams useSubmit useViewTransitionState UtilitiesCookies createRemixStub data defer isRouteErrorResponse json unstable_parseMultipartFormData redirect redirectDocument replace Sessions unstable_createFileUploadHandler unstable_createMemoryUploadHandler StylingCSS Bundling Regular CSS CSS Imports CSS in JS CSS Modules PostCSS Tailwind Vanilla Extract Other API@remix-run/dev CLI 🆕@remix-run/{adapter} @remix-run/serve create-remix (CLI) @remix-run/node @remix-run/testing GuidesAccessibility Development Strategy API Routes Backend For Frontend Breadcrumbs Guide Browser Support Client Data Module Constraints Contributing CSS Files Data Loading Data Writes Dependency optimization Deployment Disabling JavaScript Environment Variables Error Handling FAQs File Uploads Form Validation Gotchas Index Query Param Lazy Route Discovery Local TLS Manual Dev Server MDX Migrating from React Router Not Found Handling Performance Presets Resource Routes Server Bundles Single Fetch SPA Mode Streaming Templates TypeScript Vite vite.config.ts If your project is still using the Classic Remix Compiler, you should refer to the remix.config.js documentation instead. Remix uses Vite to compile your application. You'll need to provide a Vite config file with the Remix Vite plugin. Here's the minimum configuration you'll need: import { vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [remix()], }); Vite supports using a .js file for your config, but we recommend using TypeScript to help ensure your configuration is valid. Remix Vite Plugin Config import { vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [ remix({ basename: \"/\", buildDirectory: \"build\", future: { /* any enabled future flags */ }, ignoredRouteFiles: [\"**/*.css\"], routes(defineRoutes) { return defineRoutes((route) =\u003e { route(\"/somewhere/cool/*\", \"catchall.tsx\"); }); }, serverBuildFile: \"index.js\", }), ], }); appDirectory The path to the app directory, relative to the project root. Defaults to \"app\". future The future config lets you opt-into future breaking changes via Future Flags. ignoredRouteFiles This is an array of globs (via minimatch) that Remix will match to files while reading your app/routes directory. If a file matches, it will be ignored rather than treated like a route module. This is useful for ignoring CSS/test files you wish to colocate. routes A function for defining custom routes, in addition to those already defined using the filesystem convention in app/routes. Both sets of routes will be merged. import { vitePlugin as remix } from \"@remix-run/dev\"; import { defineConfig } from \"vite\"; export default defineConfig({ plugins: [ remix({ routes: async (defineRoutes) =\u003e { // If you need to do async work, do it before calling `defineRoutes`, we use // the call stack of `route` inside to set nesting. return defineRoutes((route) =\u003e { // A common use for this is catchall routes. // - The first argument is the React Router path to match against // - The second is the relative filename of the route handler route(\"/some/path/*\", \"catchall.tsx\"); // if you want to nest routes, use the optional callback argument route(\"some/:path\", \"some/route/file.js\", () =\u003e { // - path is relative to parent path // - filenames are still relative to the app directory route(\"relative/path\", \"some/other/file\"); }); }); }, }), ], }); serverModuleFormat The output format of the server build, which can either be \"cjs\" or \"esm\". Defaults to \"esm\". buildDirectory The path to the build directory, relative to the project root. Defaults to \"build\". basename An optional basename for your route paths, passed through to the React Router \"basename\" option. Please note that this is different from your asset paths. You can configure the base public path for your assets via the Vite \"base\" option. buildEnd A function that is called after the full Remix build is complete. manifest Whether to write a .remix/manifest.json file to the build directory. Defaults to false. presets An array of presets to ease integration with other tools and hosting providers. serverBuildFile The name of the server file is generated in the server build directory. Defaults to \"index.js\". serverBundles A function for assigning addressable routes to server bundles. You may also want to enable the manifest option since, when server bundles are enabled, it contains mappings between routes and server bundles.© Shopify, Inc.•Docs and examples licensed under MITEdit((storageKey2, restoreKey) =\u003e { if (!window.history.state || !window.history.state.key) { let key = Math.random().toString(32).slice(2); window.history.replaceState({ key }, \"\"); } try { let positions = JSON.parse(sessionStorage.getItem(storageKey2) || \"{}\"); let storedY = positions[restoreKey || window.history.state.key]; if (typeof storedY === \"number\") { window.scrollTo(0, storedY); } } catch (error) { console.error(error); sessionStorage.removeItem(storageKey2); } })(\"react-router-scroll-positions\", null)window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":true,\"unstable_subResourceIntegrity\":false,\"v8_middleware\":true,\"v8_splitRouteModules\":true,\"v8_viteEnvironmentApi\":true},\"routeDiscovery\":{\"mode\":\"initial\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());import \"/assets/manifest-b010e014.js\"; import * as route0 from \"/assets/root-CtUYAfRS.js\"; import * as route1 from \"/assets/docs-DauuYQK6.js\"; import * as route2 from \"/assets/docs._-B4dRXAHv.js\"; window.__reactRouterRouteModules = {\"root\":route0,\"routes/docs\":route1,\"routes/docs.$\":route2}; import(\"/assets/entry.client-q2ogymM2.js\");window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_966\\\":-5,\\\"_967\\\":-5},\\\"loaderData\\\",{\\\"_3\\\":4,\\\"_11\\\":12,\\\"_949\\\":950},\\\"root\\\",{\\\"_5\\\":6,\\\"_7\\\":8,\\\"_9\\\":10},\\\"host\\\",\\\"localhost\\\",\\\"siteUrl\\\",\\\"https://v2.remix.run\\\",\\\"noIndex\\\",false,\\\"routes/docs\\\",{\\\"_13\\\":14},\\\"menu\\\",[15,72,160,214,292,364,527,611,665,707],{\\\"_16\\\":17,\\\"_22\\\":23,\\\"_24\\\":25,\\\"_26\\\":10,\\\"_27\\\":28},\\\"attrs\\\",{\\\"_18\\\":19,\\\"_20\\\":21},\\\"title\\\",\\\"Getting Started\\\",\\\"order\\\",1,\\\"filename\\\",\\\"start/index.md\\\",\\\"slug\\\",\\\"start\\\",\\\"hasContent\\\",\\\"children\\\",[29,36,43,50,59,66],{\\\"_16\\\":30,\\\"_22\\\":32,\\\"_24\\\":33,\\\"_26\\\":34,\\\"_27\\\":35},{\\\"_18\\\":31,\\\"_20\\\":21},\\\"Quick Start (5m)\\\",\\\"start/quickstart.md\\\",\\\"start/quickstart\\\",true,[],{\\\"_16\\\":37,\\\"_22\\\":40,\\\"_24\\\":41,\\\"_26\\\":34,\\\"_27\\\":42},{\\\"_18\\\":38,\\\"_20\\\":39},\\\"Tutorial (30m)\\\",2,\\\"start/tutorial.md\\\",\\\"start/tutorial\\\",[],{\\\"_16\\\":44,\\\"_22\\\":47,\\\"_24\\\":48,\\\"_26\\\":34,\\\"_27\\\":49},{\\\"_18\\\":45,\\\"_20\\\":46},\\\"Upgrading to v2\\\",3,\\\"start/v2.md\\\",\\\"start/v2\\\",[],{\\\"_16\\\":51,\\\"_22\\\":56,\\\"_24\\\":57,\\\"_26\\\":34,\\\"_27\\\":58},{\\\"_18\\\":52,\\\"_53\\\":54,\\\"_20\\\":55},\\\"Community\\\",\\\"description\\\",\\\"Community resources for learning Remix and related technologies\\\",4,\\\"start/community.md\\\",\\\"start/community\\\",[],{\\\"_16\\\":60,\\\"_22\\\":63,\\\"_24\\\":64,\\\"_26\\\":34,\\\"_27\\\":65},{\\\"_18\\\":61,\\\"_20\\\":62},\\\"Future Flags\\\",5,\\\"start/future-flags.md\\\",\\\"start/future-flags\\\",[],{\\\"_16\\\":67,\\\"_22\\\":69,\\\"_24\\\":70,\\\"_26\\\":34,\\\"_27\\\":71},{\\\"_18\\\":68},\\\"Changelog\\\",\\\"start/changelog.md\\\",\\\"start/changelog\\\",[],{\\\"_16\\\":73,\\\"_22\\\":75,\\\"_24\\\":76,\\\"_26\\\":10,\\\"_27\\\":77},{\\\"_18\\\":74,\\\"_20\\\":39},\\\"Discussion Topics\\\",\\\"discussion/index.md\\\",\\\"discussion\\\",[78,84,90,96,102,108,115,122,129,136,142,148,154],{\\\"_16\\\":79,\\\"_22\\\":81,\\\"_24\\\":82,\\\"_26\\\":34,\\\"_27\\\":83},{\\\"_18\\\":80,\\\"_20\\\":21},\\\"Introduction, Technical Explanation\\\",\\\"discussion/introduction.md\\\",\\\"discussion/introduction\\\",[],{\\\"_16\\\":85,\\\"_22\\\":87,\\\"_24\\\":88,\\\"_26\\\":34,\\\"_27\\\":89},{\\\"_18\\\":86,\\\"_20\\\":39},\\\"Runtimes, Adapters, Templates, and Deployment\\\",\\\"discussion/runtimes.md\\\",\\\"discussion/runtimes\\\",[],{\\\"_16\\\":91,\\\"_22\\\":93,\\\"_24\\\":94,\\\"_26\\\":34,\\\"_27\\\":95},{\\\"_18\\\":92,\\\"_20\\\":46},\\\"Route Configuration\\\",\\\"discussion/routes.md\\\",\\\"discussion/routes\\\",[],{\\\"_16\\\":97,\\\"_22\\\":99,\\\"_24\\\":100,\\\"_26\\\":34,\\\"_27\\\":101},{\\\"_18\\\":98,\\\"_20\\\":55},\\\"Fullstack Data Flow\\\",\\\"discussion/data-flow.md\\\",\\\"discussion/data-flow\\\",[],{\\\"_16\\\":103,\\\"_22\\\":105,\\\"_24\\\":106,\\\"_26\\\":34,\\\"_27\\\":107},{\\\"_18\\\":104,\\\"_20\\\":62},\\\"Server vs. Client Code Execution\\\",\\\"discussion/server-vs-client.md\\\",\\\"discussion/server-vs-client\\\",[],{\\\"_16\\\":109,\\\"_22\\\":112,\\\"_24\\\":113,\\\"_26\\\":34,\\\"_27\\\":114},{\\\"_18\\\":110,\\\"_20\\\":111},\\\"React Router\\\",6,\\\"discussion/react-router.md\\\",\\\"discussion/react-router\\\",[],{\\\"_16\\\":116,\\\"_22\\\":119,\\\"_24\\\":120,\\\"_26\\\":34,\\\"_27\\\":121},{\\\"_18\\\":117,\\\"_20\\\":118},\\\"Progressive Enhancement\\\",7,\\\"discussion/progressive-enhancement.md\\\",\\\"discussion/progressive-enhancement\\\",[],{\\\"_16\\\":123,\\\"_22\\\":126,\\\"_24\\\":127,\\\"_26\\\":34,\\\"_27\\\":128},{\\\"_18\\\":124,\\\"_20\\\":125},\\\"Pending UI\\\",8,\\\"discussion/pending-ui.md\\\",\\\"discussion/pending-ui\\\",[],{\\\"_16\\\":130,\\\"_22\\\":133,\\\"_24\\\":134,\\\"_26\\\":34,\\\"_27\\\":135},{\\\"_18\\\":131,\\\"_20\\\":132},\\\"State Management\\\",9,\\\"discussion/state-management.md\\\",\\\"discussion/state-management\\\",[],{\\\"_16\\\":137,\\\"_22\\\":139,\\\"_24\\\":140,\\\"_26\\\":34,\\\"_27\\\":141},{\\\"_18\\\":138},\\\"Network Concurrency Management\\\",\\\"discussion/concurrency.md\\\",\\\"discussion/concurrency\\\",[],{\\\"_16\\\":143,\\\"_22\\\":145,\\\"_24\\\":146,\\\"_26\\\":34,\\\"_27\\\":147},{\\\"_18\\\":144},\\\"Form vs. fetcher\\\",\\\"discussion/form-vs-fetcher.md\\\",\\\"discussion/form-vs-fetcher\\\",[],{\\\"_16\\\":149,\\\"_22\\\":151,\\\"_24\\\":152,\\\"_26\\\":34,\\\"_27\\\":153},{\\\"_18\\\":150},\\\"Hot Module Replacement\\\",\\\"discussion/hot-module-replacement.md\\\",\\\"discussion/hot-module-replacement\\\",[],{\\\"_16\\\":155,\\\"_22\\\":157,\\\"_24\\\":158,\\\"_26\\\":34,\\\"_27\\\":159},{\\\"_18\\\":156},\\\"Form Resubmissions\\\",\\\"discussion/resubmissions.md\\\",\\\"discussion/resubmissions\\\",[],{\\\"_16\\\":161,\\\"_22\\\":163,\\\"_24\\\":164,\\\"_26\\\":10,\\\"_27\\\":165},{\\\"_18\\\":162,\\\"_20\\\":46},\\\"File Conventions\\\",\\\"file-conventions/index.md\\\",\\\"file-conventions\\\",[166,173,179,185,191,197,202,208],{\\\"_16\\\":167,\\\"_22\\\":170,\\\"_24\\\":171,\\\"_26\\\":34,\\\"_27\\\":172},{\\\"_18\\\":168,\\\"_169\\\":10},\\\".client modules\\\",\\\"toc\\\",\\\"file-conventions/-client.md\\\",\\\"file-conventions/-client\\\",[],{\\\"_16\\\":174,\\\"_22\\\":176,\\\"_24\\\":177,\\\"_26\\\":34,\\\"_27\\\":178},{\\\"_18\\\":175,\\\"_169\\\":10},\\\".server modules\\\",\\\"file-conventions/-server.md\\\",\\\"file-conventions/-server\\\",[],{\\\"_16\\\":180,\\\"_22\\\":182,\\\"_24\\\":183,\\\"_26\\\":34,\\\"_27\\\":184},{\\\"_18\\\":181,\\\"_169\\\":10},\\\"Asset Imports\\\",\\\"file-conventions/asset-imports.md\\\",\\\"file-conventions/asset-imports\\\",[],{\\\"_16\\\":186,\\\"_22\\\":188,\\\"_24\\\":189,\\\"_26\\\":34,\\\"_27\\\":190},{\\\"_18\\\":187,\\\"_169\\\":10},\\\"entry.client\\\",\\\"file-conventions/entry.client.md\\\",\\\"file-conventions/entry.client\\\",[],{\\\"_16\\\":192,\\\"_22\\\":194,\\\"_24\\\":195,\\\"_26\\\":34,\\\"_27\\\":196},{\\\"_18\\\":193,\\\"_169\\\":10},\\\"entry.server\\\",\\\"file-conventions/entry.server.md\\\",\\\"file-conventions/entry.server\\\",[],{\\\"_16\\\":198,\\\"_22\\\":199,\\\"_24\\\":200,\\\"_26\\\":34,\\\"_27\\\":201},{\\\"_18\\\":3,\\\"_169\\\":10},\\\"file-conventions/root.md\\\",\\\"file-conventions/root\\\",[],{\\\"_16\\\":203,\\\"_22\\\":205,\\\"_24\\\":206,\\\"_26\\\":34,\\\"_27\\\":207},{\\\"_18\\\":204},\\\"Route File Naming\\\",\\\"file-conventions/routes.md\\\",\\\"file-conventions/routes\\\",[],{\\\"_16\\\":209,\\\"_22\\\":211,\\\"_24\\\":212,\\\"_26\\\":34,\\\"_27\\\":213},{\\\"_18\\\":210},\\\"vite.config.ts\\\",\\\"file-conventions/vite-config.md\\\",\\\"file-conventions/vite-config\\\",[],{\\\"_16\\\":215,\\\"_22\\\":217,\\\"_24\\\":218,\\\"_26\\\":10,\\\"_27\\\":219},{\\\"_18\\\":216,\\\"_20\\\":55},\\\"Route Module\\\",\\\"route/index.md\\\",\\\"route\\\",[220,226,232,238,244,250,256,262,268,274,280,286],{\\\"_16\\\":221,\\\"_22\\\":223,\\\"_24\\\":224,\\\"_26\\\":34,\\\"_27\\\":225},{\\\"_18\\\":222},\\\"action\\\",\\\"route/action.md\\\",\\\"route/action\\\",[],{\\\"_16\\\":227,\\\"_22\\\":229,\\\"_24\\\":230,\\\"_26\\\":34,\\\"_27\\\":231},{\\\"_18\\\":228},\\\"clientAction\\\",\\\"route/client-action.md\\\",\\\"route/client-action\\\",[],{\\\"_16\\\":233,\\\"_22\\\":235,\\\"_24\\\":236,\\\"_26\\\":34,\\\"_27\\\":237},{\\\"_18\\\":234},\\\"clientLoader\\\",\\\"route/client-loader.md\\\",\\\"route/client-loader\\\",[],{\\\"_16\\\":239,\\\"_22\\\":241,\\\"_24\\\":242,\\\"_26\\\":34,\\\"_27\\\":243},{\\\"_18\\\":240},\\\"Component\\\",\\\"route/component.md\\\",\\\"route/component\\\",[],{\\\"_16\\\":245,\\\"_22\\\":247,\\\"_24\\\":248,\\\"_26\\\":34,\\\"_27\\\":249},{\\\"_18\\\":246},\\\"ErrorBoundary\\\",\\\"route/error-boundary.md\\\",\\\"route/error-boundary\\\",[],{\\\"_16\\\":251,\\\"_22\\\":253,\\\"_24\\\":254,\\\"_26\\\":34,\\\"_27\\\":255},{\\\"_18\\\":252},\\\"handle\\\",\\\"route/handle.md\\\",\\\"route/handle\\\",[],{\\\"_16\\\":257,\\\"_22\\\":259,\\\"_24\\\":260,\\\"_26\\\":34,\\\"_27\\\":261},{\\\"_18\\\":258},\\\"headers\\\",\\\"route/headers.md\\\",\\\"route/headers\\\",[],{\\\"_16\\\":263,\\\"_22\\\":265,\\\"_24\\\":266,\\\"_26\\\":34,\\\"_27\\\":267},{\\\"_18\\\":264},\\\"HydrateFallback\\\",\\\"route/hydrate-fallback.md\\\",\\\"route/hydrate-fallback\\\",[],{\\\"_16\\\":269,\\\"_22\\\":271,\\\"_24\\\":272,\\\"_26\\\":34,\\\"_27\\\":273},{\\\"_18\\\":270},\\\"links\\\",\\\"route/links.md\\\",\\\"route/links\\\",[],{\\\"_16\\\":275,\\\"_22\\\":277,\\\"_24\\\":278,\\\"_26\\\":34,\\\"_27\\\":279},{\\\"_18\\\":276},\\\"loader\\\",\\\"route/loader.md\\\",\\\"route/loader\\\",[],{\\\"_16\\\":281,\\\"_22\\\":283,\\\"_24\\\":284,\\\"_26\\\":34,\\\"_27\\\":285},{\\\"_18\\\":282},\\\"meta\\\",\\\"route/meta.md\\\",\\\"route/meta\\\",[],{\\\"_16\\\":287,\\\"_22\\\":289,\\\"_24\\\":290,\\\"_26\\\":34,\\\"_27\\\":291},{\\\"_18\\\":288},\\\"shouldRevalidate\\\",\\\"route/should-revalidate.md\\\",\\\"route/should-revalidate\\\",[],{\\\"_16\\\":293,\\\"_22\\\":295,\\\"_24\\\":296,\\\"_26\\\":10,\\\"_27\\\":297},{\\\"_18\\\":294,\\\"_20\\\":62},\\\"Components\\\",\\\"components/index.md\\\",\\\"components\\\",[298,304,310,316,322,328,334,340,346,352,358],{\\\"_16\\\":299,\\\"_22\\\":301,\\\"_24\\\":302,\\\"_26\\\":34,\\\"_27\\\":303},{\\\"_18\\\":300},\\\"Await\\\",\\\"components/await.md\\\",\\\"components/await\\\",[],{\\\"_16\\\":305,\\\"_22\\\":307,\\\"_24\\\":308,\\\"_26\\\":34,\\\"_27\\\":309},{\\\"_18\\\":306},\\\"Form\\\",\\\"components/form.md\\\",\\\"components/form\\\",[],{\\\"_16\\\":311,\\\"_22\\\":313,\\\"_24\\\":314,\\\"_26\\\":34,\\\"_27\\\":315},{\\\"_18\\\":312},\\\"Link\\\",\\\"components/link.md\\\",\\\"components/link\\\",[],{\\\"_16\\\":317,\\\"_22\\\":319,\\\"_24\\\":320,\\\"_26\\\":34,\\\"_27\\\":321},{\\\"_18\\\":318,\\\"_169\\\":10},\\\"Links\\\",\\\"components/links.md\\\",\\\"components/links\\\",[],{\\\"_16\\\":323,\\\"_22\\\":325,\\\"_24\\\":326,\\\"_26\\\":34,\\\"_27\\\":327},{\\\"_18\\\":324,\\\"_169\\\":10},\\\"LiveReload\\\",\\\"components/live-reload.md\\\",\\\"components/live-reload\\\",[],{\\\"_16\\\":329,\\\"_22\\\":331,\\\"_24\\\":332,\\\"_26\\\":34,\\\"_27\\\":333},{\\\"_18\\\":330,\\\"_169\\\":10},\\\"Meta\\\",\\\"components/meta.md\\\",\\\"components/meta\\\",[],{\\\"_16\\\":335,\\\"_22\\\":337,\\\"_24\\\":338,\\\"_26\\\":34,\\\"_27\\\":339},{\\\"_18\\\":336},\\\"NavLink\\\",\\\"components/nav-link.md\\\",\\\"components/nav-link\\\",[],{\\\"_16\\\":341,\\\"_22\\\":343,\\\"_24\\\":344,\\\"_26\\\":34,\\\"_27\\\":345},{\\\"_18\\\":342},\\\"Outlet\\\",\\\"components/outlet.md\\\",\\\"components/outlet\\\",[],{\\\"_16\\\":347,\\\"_22\\\":349,\\\"_24\\\":350,\\\"_26\\\":34,\\\"_27\\\":351},{\\\"_18\\\":348,\\\"_169\\\":10},\\\"PrefetchPageLinks\\\",\\\"components/prefetch-page-links.md\\\",\\\"components/prefetch-page-links\\\",[],{\\\"_16\\\":353,\\\"_22\\\":355,\\\"_24\\\":356,\\\"_26\\\":34,\\\"_27\\\":357},{\\\"_18\\\":354,\\\"_169\\\":10},\\\"Scripts\\\",\\\"components/scripts.md\\\",\\\"components/scripts\\\",[],{\\\"_16\\\":359,\\\"_22\\\":361,\\\"_24\\\":362,\\\"_26\\\":34,\\\"_27\\\":363},{\\\"_18\\\":360},\\\"ScrollRestoration\\\",\\\"components/scroll-restoration.md\\\",\\\"components/scroll-restoration\\\",[],{\\\"_16\\\":365,\\\"_22\\\":367,\\\"_24\\\":368,\\\"_26\\\":10,\\\"_27\\\":369},{\\\"_18\\\":366,\\\"_20\\\":111},\\\"Hooks\\\",\\\"hooks/index.md\\\",\\\"hooks\\\",[370,376,383,389,395,401,407,413,419,425,431,437,443,449,455,461,467,473,479,485,491,497,503,509,515,521],{\\\"_16\\\":371,\\\"_22\\\":373,\\\"_24\\\":374,\\\"_26\\\":34,\\\"_27\\\":375},{\\\"_18\\\":372,\\\"_169\\\":10},\\\"useActionData\\\",\\\"hooks/use-action-data.md\\\",\\\"hooks/use-action-data\\\",[],{\\\"_16\\\":377,\\\"_22\\\":380,\\\"_24\\\":381,\\\"_26\\\":34,\\\"_27\\\":382},{\\\"_18\\\":378,\\\"_379\\\":34},\\\"useAsyncError\\\",\\\"new\\\",\\\"hooks/use-async-error.md\\\",\\\"hooks/use-async-error\\\",[],{\\\"_16\\\":384,\\\"_22\\\":386,\\\"_24\\\":387,\\\"_26\\\":34,\\\"_27\\\":388},{\\\"_18\\\":385,\\\"_379\\\":34},\\\"useAsyncValue\\\",\\\"hooks/use-async-value.md\\\",\\\"hooks/use-async-value\\\",[],{\\\"_16\\\":390,\\\"_22\\\":392,\\\"_24\\\":393,\\\"_26\\\":34,\\\"_27\\\":394},{\\\"_18\\\":391,\\\"_169\\\":10},\\\"useBeforeUnload\\\",\\\"hooks/use-before-unload.md\\\",\\\"hooks/use-before-unload\\\",[],{\\\"_16\\\":396,\\\"_22\\\":398,\\\"_24\\\":399,\\\"_26\\\":34,\\\"_27\\\":400},{\\\"_18\\\":397},\\\"useBlocker\\\",\\\"hooks/use-blocker.md\\\",\\\"hooks/use-blocker\\\",[],{\\\"_16\\\":402,\\\"_22\\\":404,\\\"_24\\\":405,\\\"_26\\\":34,\\\"_27\\\":406},{\\\"_18\\\":403},\\\"useFetcher\\\",\\\"hooks/use-fetcher.md\\\",\\\"hooks/use-fetcher\\\",[],{\\\"_16\\\":408,\\\"_22\\\":410,\\\"_24\\\":411,\\\"_26\\\":34,\\\"_27\\\":412},{\\\"_18\\\":409,\\\"_169\\\":10},\\\"useFetchers\\\",\\\"hooks/use-fetchers.md\\\",\\\"hooks/use-fetchers\\\",[],{\\\"_16\\\":414,\\\"_22\\\":416,\\\"_24\\\":417,\\\"_26\\\":34,\\\"_27\\\":418},{\\\"_18\\\":415},\\\"useFormAction\\\",\\\"hooks/use-form-action.md\\\",\\\"hooks/use-form-action\\\",[],{\\\"_16\\\":420,\\\"_22\\\":422,\\\"_24\\\":423,\\\"_26\\\":34,\\\"_27\\\":424},{\\\"_18\\\":421},\\\"useHref\\\",\\\"hooks/use-href.md\\\",\\\"hooks/use-href\\\",[],{\\\"_16\\\":426,\\\"_22\\\":428,\\\"_24\\\":429,\\\"_26\\\":34,\\\"_27\\\":430},{\\\"_18\\\":427},\\\"useLoaderData\\\",\\\"hooks/use-loader-data.md\\\",\\\"hooks/use-loader-data\\\",[],{\\\"_16\\\":432,\\\"_22\\\":434,\\\"_24\\\":435,\\\"_26\\\":34,\\\"_27\\\":436},{\\\"_18\\\":433},\\\"useLocation\\\",\\\"hooks/use-location.md\\\",\\\"hooks/use-location\\\",[],{\\\"_16\\\":438,\\\"_22\\\":440,\\\"_24\\\":441,\\\"_26\\\":34,\\\"_27\\\":442},{\\\"_18\\\":439,\\\"_169\\\":10},\\\"useMatches\\\",\\\"hooks/use-matches.md\\\",\\\"hooks/use-matches\\\",[],{\\\"_16\\\":444,\\\"_22\\\":446,\\\"_24\\\":447,\\\"_26\\\":34,\\\"_27\\\":448},{\\\"_18\\\":445},\\\"useNavigate\\\",\\\"hooks/use-navigate.md\\\",\\\"hooks/use-navigate\\\",[],{\\\"_16\\\":450,\\\"_22\\\":452,\\\"_24\\\":453,\\\"_26\\\":34,\\\"_27\\\":454},{\\\"_18\\\":451},\\\"useNavigation\\\",\\\"hooks/use-navigation.md\\\",\\\"hooks/use-navigation\\\",[],{\\\"_16\\\":456,\\\"_22\\\":458,\\\"_24\\\":459,\\\"_26\\\":34,\\\"_27\\\":460},{\\\"_18\\\":457},\\\"useNavigationType\\\",\\\"hooks/use-navigation-type.md\\\",\\\"hooks/use-navigation-type\\\",[],{\\\"_16\\\":462,\\\"_22\\\":464,\\\"_24\\\":465,\\\"_26\\\":34,\\\"_27\\\":466},{\\\"_18\\\":463},\\\"useOutlet\\\",\\\"hooks/use-outlet.md\\\",\\\"hooks/use-outlet\\\",[],{\\\"_16\\\":468,\\\"_22\\\":470,\\\"_24\\\":471,\\\"_26\\\":34,\\\"_27\\\":472},{\\\"_18\\\":469},\\\"useOutletContext\\\",\\\"hooks/use-outlet-context.md\\\",\\\"hooks/use-outlet-context\\\",[],{\\\"_16\\\":474,\\\"_22\\\":476,\\\"_24\\\":477,\\\"_26\\\":34,\\\"_27\\\":478},{\\\"_18\\\":475},\\\"useParams\\\",\\\"hooks/use-params.md\\\",\\\"hooks/use-params\\\",[],{\\\"_16\\\":480,\\\"_22\\\":482,\\\"_24\\\":483,\\\"_26\\\":34,\\\"_27\\\":484},{\\\"_18\\\":481},\\\"unstable_usePrompt\\\",\\\"hooks/use-prompt.md\\\",\\\"hooks/use-prompt\\\",[],{\\\"_16\\\":486,\\\"_22\\\":488,\\\"_24\\\":489,\\\"_26\\\":34,\\\"_27\\\":490},{\\\"_18\\\":487},\\\"useResolvedPath\\\",\\\"hooks/use-resolved-path.md\\\",\\\"hooks/use-resolved-path\\\",[],{\\\"_16\\\":492,\\\"_22\\\":494,\\\"_24\\\":495,\\\"_26\\\":34,\\\"_27\\\":496},{\\\"_18\\\":493,\\\"_379\\\":34},\\\"useRevalidator\\\",\\\"hooks/use-revalidator.md\\\",\\\"hooks/use-revalidator\\\",[],{\\\"_16\\\":498,\\\"_22\\\":500,\\\"_24\\\":501,\\\"_26\\\":34,\\\"_27\\\":502},{\\\"_18\\\":499,\\\"_379\\\":34},\\\"useRouteError\\\",\\\"hooks/use-route-error.md\\\",\\\"hooks/use-route-error\\\",[],{\\\"_16\\\":504,\\\"_22\\\":506,\\\"_24\\\":507,\\\"_26\\\":34,\\\"_27\\\":508},{\\\"_18\\\":505,\\\"_169\\\":10},\\\"useRouteLoaderData\\\",\\\"hooks/use-route-loader-data.md\\\",\\\"hooks/use-route-loader-data\\\",[],{\\\"_16\\\":510,\\\"_22\\\":512,\\\"_24\\\":513,\\\"_26\\\":34,\\\"_27\\\":514},{\\\"_18\\\":511},\\\"useSearchParams\\\",\\\"hooks/use-search-params.md\\\",\\\"hooks/use-search-params\\\",[],{\\\"_16\\\":516,\\\"_22\\\":518,\\\"_24\\\":519,\\\"_26\\\":34,\\\"_27\\\":520},{\\\"_18\\\":517},\\\"useSubmit\\\",\\\"hooks/use-submit.md\\\",\\\"hooks/use-submit\\\",[],{\\\"_16\\\":522,\\\"_22\\\":524,\\\"_24\\\":525,\\\"_26\\\":34,\\\"_27\\\":526},{\\\"_18\\\":523,\\\"_169\\\":10},\\\"useViewTransitionState\\\",\\\"hooks/use-view-transition-state.md\\\",\\\"hooks/use-view-transition-state\\\",[],{\\\"_16\\\":528,\\\"_22\\\":530,\\\"_24\\\":531,\\\"_26\\\":10,\\\"_27\\\":532},{\\\"_18\\\":529,\\\"_20\\\":111},\\\"Utilities\\\",\\\"utils/index.md\\\",\\\"utils\\\",[533,539,545,551,557,563,569,575,581,587,593,599,605],{\\\"_16\\\":534,\\\"_22\\\":536,\\\"_24\\\":537,\\\"_26\\\":34,\\\"_27\\\":538},{\\\"_18\\\":535},\\\"Cookies\\\",\\\"utils/cookies.md\\\",\\\"utils/cookies\\\",[],{\\\"_16\\\":540,\\\"_22\\\":542,\\\"_24\\\":543,\\\"_26\\\":34,\\\"_27\\\":544},{\\\"_18\\\":541},\\\"createRemixStub\\\",\\\"utils/create-remix-stub.md\\\",\\\"utils/create-remix-stub\\\",[],{\\\"_16\\\":546,\\\"_22\\\":548,\\\"_24\\\":549,\\\"_26\\\":34,\\\"_27\\\":550},{\\\"_18\\\":547,\\\"_169\\\":10},\\\"data\\\",\\\"utils/data.md\\\",\\\"utils/data\\\",[],{\\\"_16\\\":552,\\\"_22\\\":554,\\\"_24\\\":555,\\\"_26\\\":34,\\\"_27\\\":556},{\\\"_18\\\":553,\\\"_169\\\":10},\\\"defer\\\",\\\"utils/defer.md\\\",\\\"utils/defer\\\",[],{\\\"_16\\\":558,\\\"_22\\\":560,\\\"_24\\\":561,\\\"_26\\\":34,\\\"_27\\\":562},{\\\"_18\\\":559,\\\"_169\\\":10},\\\"isRouteErrorResponse\\\",\\\"utils/is-route-error-response.md\\\",\\\"utils/is-route-error-response\\\",[],{\\\"_16\\\":564,\\\"_22\\\":566,\\\"_24\\\":567,\\\"_26\\\":34,\\\"_27\\\":568},{\\\"_18\\\":565,\\\"_169\\\":10},\\\"json\\\",\\\"utils/json.md\\\",\\\"utils/json\\\",[],{\\\"_16\\\":570,\\\"_22\\\":572,\\\"_24\\\":573,\\\"_26\\\":34,\\\"_27\\\":574},{\\\"_18\\\":571},\\\"unstable_parseMultipartFormData\\\",\\\"utils/parse-multipart-form-data.md\\\",\\\"utils/parse-multipart-form-data\\\",[],{\\\"_16\\\":576,\\\"_22\\\":578,\\\"_24\\\":579,\\\"_26\\\":34,\\\"_27\\\":580},{\\\"_18\\\":577,\\\"_169\\\":10},\\\"redirect\\\",\\\"utils/redirect.md\\\",\\\"utils/redirect\\\",[],{\\\"_16\\\":582,\\\"_22\\\":584,\\\"_24\\\":585,\\\"_26\\\":34,\\\"_27\\\":586},{\\\"_18\\\":583,\\\"_169\\\":10},\\\"redirectDocument\\\",\\\"utils/redirectDocument.md\\\",\\\"utils/redirectDocument\\\",[],{\\\"_16\\\":588,\\\"_22\\\":590,\\\"_24\\\":591,\\\"_26\\\":34,\\\"_27\\\":592},{\\\"_18\\\":589,\\\"_169\\\":10},\\\"replace\\\",\\\"utils/replace.md\\\",\\\"utils/replace\\\",[],{\\\"_16\\\":594,\\\"_22\\\":596,\\\"_24\\\":597,\\\"_26\\\":34,\\\"_27\\\":598},{\\\"_18\\\":595},\\\"Sessions\\\",\\\"utils/sessions.md\\\",\\\"utils/sessions\\\",[],{\\\"_16\\\":600,\\\"_22\\\":602,\\\"_24\\\":603,\\\"_26\\\":34,\\\"_27\\\":604},{\\\"_18\\\":601,\\\"_169\\\":10},\\\"unstable_createFileUploadHandler\\\",\\\"utils/unstable-create-file-upload-handler.md\\\",\\\"utils/unstable-create-file-upload-handler\\\",[],{\\\"_16\\\":606,\\\"_22\\\":608,\\\"_24\\\":609,\\\"_26\\\":34,\\\"_27\\\":610},{\\\"_18\\\":607,\\\"_169\\\":10},\\\"unstable_createMemoryUploadHandler\\\",\\\"utils/unstable-create-memory-upload-handler.md\\\",\\\"utils/unstable-create-memory-upload-handler\\\",[],{\\\"_16\\\":612,\\\"_22\\\":614,\\\"_24\\\":615,\\\"_26\\\":10,\\\"_27\\\":616},{\\\"_18\\\":613,\\\"_20\\\":118},\\\"Styling\\\",\\\"styling/index.md\\\",\\\"styling\\\",[617,623,629,635,641,647,653,659],{\\\"_16\\\":618,\\\"_22\\\":620,\\\"_24\\\":621,\\\"_26\\\":34,\\\"_27\\\":622},{\\\"_18\\\":619},\\\"CSS Bundling\\\",\\\"styling/bundling.md\\\",\\\"styling/bundling\\\",[],{\\\"_16\\\":624,\\\"_22\\\":626,\\\"_24\\\":627,\\\"_26\\\":34,\\\"_27\\\":628},{\\\"_18\\\":625},\\\"Regular CSS\\\",\\\"styling/css.md\\\",\\\"styling/css\\\",[],{\\\"_16\\\":630,\\\"_22\\\":632,\\\"_24\\\":633,\\\"_26\\\":34,\\\"_27\\\":634},{\\\"_18\\\":631},\\\"CSS Imports\\\",\\\"styling/css-imports.md\\\",\\\"styling/css-imports\\\",[],{\\\"_16\\\":636,\\\"_22\\\":638,\\\"_24\\\":639,\\\"_26\\\":34,\\\"_27\\\":640},{\\\"_18\\\":637},\\\"CSS in JS\\\",\\\"styling/css-in-js.md\\\",\\\"styling/css-in-js\\\",[],{\\\"_16\\\":642,\\\"_22\\\":644,\\\"_24\\\":645,\\\"_26\\\":34,\\\"_27\\\":646},{\\\"_18\\\":643},\\\"CSS Modules\\\",\\\"styling/css-modules.md\\\",\\\"styling/css-modules\\\",[],{\\\"_16\\\":648,\\\"_22\\\":650,\\\"_24\\\":651,\\\"_26\\\":34,\\\"_27\\\":652},{\\\"_18\\\":649},\\\"PostCSS\\\",\\\"styling/postcss.md\\\",\\\"styling/postcss\\\",[],{\\\"_16\\\":654,\\\"_22\\\":656,\\\"_24\\\":657,\\\"_26\\\":34,\\\"_27\\\":658},{\\\"_18\\\":655},\\\"Tailwind\\\",\\\"styling/tailwind.md\\\",\\\"styling/tailwind\\\",[],{\\\"_16\\\":660,\\\"_22\\\":662,\\\"_24\\\":663,\\\"_26\\\":34,\\\"_27\\\":664},{\\\"_18\\\":661},\\\"Vanilla Extract\\\",\\\"styling/vanilla-extract.md\\\",\\\"styling/vanilla-extract\\\",[],{\\\"_16\\\":666,\\\"_22\\\":668,\\\"_24\\\":669,\\\"_26\\\":10,\\\"_27\\\":670},{\\\"_18\\\":667,\\\"_20\\\":132},\\\"Other API\\\",\\\"other-api/index.md\\\",\\\"other-api\\\",[671,677,683,689,695,701],{\\\"_16\\\":672,\\\"_22\\\":674,\\\"_24\\\":675,\\\"_26\\\":34,\\\"_27\\\":676},{\\\"_18\\\":673,\\\"_20\\\":39,\\\"_379\\\":34},\\\"@remix-run/dev CLI\\\",\\\"other-api/dev.md\\\",\\\"other-api/dev\\\",[],{\\\"_16\\\":678,\\\"_22\\\":680,\\\"_24\\\":681,\\\"_26\\\":34,\\\"_27\\\":682},{\\\"_18\\\":679,\\\"_20\\\":46},\\\"@remix-run/{adapter}\\\",\\\"other-api/adapter.md\\\",\\\"other-api/adapter\\\",[],{\\\"_16\\\":684,\\\"_22\\\":686,\\\"_24\\\":687,\\\"_26\\\":34,\\\"_27\\\":688},{\\\"_18\\\":685,\\\"_20\\\":46},\\\"@remix-run/serve\\\",\\\"other-api/serve.md\\\",\\\"other-api/serve\\\",[],{\\\"_16\\\":690,\\\"_22\\\":692,\\\"_24\\\":693,\\\"_26\\\":34,\\\"_27\\\":694},{\\\"_18\\\":691},\\\"create-remix (CLI)\\\",\\\"other-api/create-remix.md\\\",\\\"other-api/create-remix\\\",[],{\\\"_16\\\":696,\\\"_22\\\":698,\\\"_24\\\":699,\\\"_26\\\":34,\\\"_27\\\":700},{\\\"_18\\\":697},\\\"@remix-run/node\\\",\\\"other-api/node.md\\\",\\\"other-api/node\\\",[],{\\\"_16\\\":702,\\\"_22\\\":704,\\\"_24\\\":705,\\\"_26\\\":34,\\\"_27\\\":706},{\\\"_18\\\":703},\\\"@remix-run/testing\\\",\\\"other-api/testing.md\\\",\\\"other-api/testing\\\",[],{\\\"_16\\\":708,\\\"_22\\\":711,\\\"_24\\\":712,\\\"_26\\\":10,\\\"_27\\\":713},{\\\"_18\\\":709,\\\"_20\\\":710},\\\"Guides\\\",10,\\\"guides/index.md\\\",\\\"guides\\\",[714,720,726,732,738,744,750,756,762,769,775,782,788,794,800,806,812,818,825,831,837,843,849,855,861,867,874,881,887,893,899,905,911,917,923,930,937,943],{\\\"_16\\\":715,\\\"_22\\\":717,\\\"_24\\\":718,\\\"_26\\\":34,\\\"_27\\\":719},{\\\"_18\\\":716},\\\"Accessibility\\\",\\\"guides/accessibility.md\\\",\\\"guides/accessibility\\\",[],{\\\"_16\\\":721,\\\"_22\\\":723,\\\"_24\\\":724,\\\"_26\\\":34,\\\"_27\\\":725},{\\\"_18\\\":722},\\\"Development Strategy\\\",\\\"guides/api-development-strategy.md\\\",\\\"guides/api-development-strategy\\\",[],{\\\"_16\\\":727,\\\"_22\\\":729,\\\"_24\\\":730,\\\"_26\\\":34,\\\"_27\\\":731},{\\\"_18\\\":728},\\\"API Routes\\\",\\\"guides/api-routes.md\\\",\\\"guides/api-routes\\\",[],{\\\"_16\\\":733,\\\"_22\\\":735,\\\"_24\\\":736,\\\"_26\\\":34,\\\"_27\\\":737},{\\\"_18\\\":734,\\\"_169\\\":10},\\\"Backend For Frontend\\\",\\\"guides/bff.md\\\",\\\"guides/bff\\\",[],{\\\"_16\\\":739,\\\"_22\\\":741,\\\"_24\\\":742,\\\"_26\\\":34,\\\"_27\\\":743},{\\\"_18\\\":740},\\\"Breadcrumbs Guide\\\",\\\"guides/breadcrumbs.md\\\",\\\"guides/breadcrumbs\\\",[],{\\\"_16\\\":745,\\\"_22\\\":747,\\\"_24\\\":748,\\\"_26\\\":34,\\\"_27\\\":749},{\\\"_18\\\":746},\\\"Browser Support\\\",\\\"guides/browser-support.md\\\",\\\"guides/browser-support\\\",[],{\\\"_16\\\":751,\\\"_22\\\":753,\\\"_24\\\":754,\\\"_26\\\":34,\\\"_27\\\":755},{\\\"_18\\\":752},\\\"Client Data\\\",\\\"guides/client-data.md\\\",\\\"guides/client-data\\\",[],{\\\"_16\\\":757,\\\"_22\\\":759,\\\"_24\\\":760,\\\"_26\\\":34,\\\"_27\\\":761},{\\\"_18\\\":758},\\\"Module Constraints\\\",\\\"guides/constraints.md\\\",\\\"guides/constraints\\\",[],{\\\"_16\\\":763,\\\"_22\\\":766,\\\"_24\\\":767,\\\"_26\\\":34,\\\"_27\\\":768},{\\\"_18\\\":764,\\\"_53\\\":765},\\\"Contributing\\\",\\\"Thank you for contributing to Remix! Here's everything you need to know before you open a pull request.\\\",\\\"guides/contributing.md\\\",\\\"guides/contributing\\\",[],{\\\"_16\\\":770,\\\"_22\\\":772,\\\"_24\\\":773,\\\"_26\\\":34,\\\"_27\\\":774},{\\\"_18\\\":771},\\\"CSS Files\\\",\\\"guides/css-files.md\\\",\\\"guides/css-files\\\",[],{\\\"_16\\\":776,\\\"_22\\\":779,\\\"_24\\\":780,\\\"_26\\\":34,\\\"_27\\\":781},{\\\"_18\\\":777,\\\"_53\\\":778},\\\"Data Loading\\\",\\\"One of the primary features of Remix is simplifying interactions with the server to get data into components. This document will help you get the most out of data loading in Remix.\\\",\\\"guides/data-loading.md\\\",\\\"guides/data-loading\\\",[],{\\\"_16\\\":783,\\\"_22\\\":785,\\\"_24\\\":786,\\\"_26\\\":34,\\\"_27\\\":787},{\\\"_18\\\":784},\\\"Data Writes\\\",\\\"guides/data-writes.md\\\",\\\"guides/data-writes\\\",[],{\\\"_16\\\":789,\\\"_22\\\":791,\\\"_24\\\":792,\\\"_26\\\":34,\\\"_27\\\":793},{\\\"_18\\\":790},\\\"Dependency optimization\\\",\\\"guides/dependency-optimization.md\\\",\\\"guides/dependency-optimization\\\",[],{\\\"_16\\\":795,\\\"_22\\\":797,\\\"_24\\\":798,\\\"_26\\\":34,\\\"_27\\\":799},{\\\"_18\\\":796,\\\"_169\\\":10},\\\"Deployment\\\",\\\"guides/deployment.md\\\",\\\"guides/deployment\\\",[],{\\\"_16\\\":801,\\\"_22\\\":803,\\\"_24\\\":804,\\\"_26\\\":34,\\\"_27\\\":805},{\\\"_18\\\":802,\\\"_169\\\":10},\\\"Disabling JavaScript\\\",\\\"guides/disabling-javascript.md\\\",\\\"guides/disabling-javascript\\\",[],{\\\"_16\\\":807,\\\"_22\\\":809,\\\"_24\\\":810,\\\"_26\\\":34,\\\"_27\\\":811},{\\\"_18\\\":808},\\\"Environment Variables\\\",\\\"guides/envvars.md\\\",\\\"guides/envvars\\\",[],{\\\"_16\\\":813,\\\"_22\\\":815,\\\"_24\\\":816,\\\"_26\\\":34,\\\"_27\\\":817},{\\\"_18\\\":814},\\\"Error Handling\\\",\\\"guides/errors.md\\\",\\\"guides/errors\\\",[],{\\\"_16\\\":819,\\\"_22\\\":822,\\\"_24\\\":823,\\\"_26\\\":34,\\\"_27\\\":824},{\\\"_18\\\":820,\\\"_53\\\":821},\\\"FAQs\\\",\\\"Frequently Asked Questions about Remix\\\",\\\"guides/faq.md\\\",\\\"guides/faq\\\",[],{\\\"_16\\\":826,\\\"_22\\\":828,\\\"_24\\\":829,\\\"_26\\\":34,\\\"_27\\\":830},{\\\"_18\\\":827},\\\"File Uploads\\\",\\\"guides/file-uploads.md\\\",\\\"guides/file-uploads\\\",[],{\\\"_16\\\":832,\\\"_22\\\":834,\\\"_24\\\":835,\\\"_26\\\":34,\\\"_27\\\":836},{\\\"_18\\\":833},\\\"Form Validation\\\",\\\"guides/form-validation.md\\\",\\\"guides/form-validation\\\",[],{\\\"_16\\\":838,\\\"_22\\\":840,\\\"_24\\\":841,\\\"_26\\\":34,\\\"_27\\\":842},{\\\"_18\\\":839},\\\"Gotchas\\\",\\\"guides/gotchas.md\\\",\\\"guides/gotchas\\\",[],{\\\"_16\\\":844,\\\"_22\\\":846,\\\"_24\\\":847,\\\"_26\\\":34,\\\"_27\\\":848},{\\\"_18\\\":845,\\\"_169\\\":10},\\\"Index Query Param\\\",\\\"guides/index-query-param.md\\\",\\\"guides/index-query-param\\\",[],{\\\"_16\\\":850,\\\"_22\\\":852,\\\"_24\\\":853,\\\"_26\\\":34,\\\"_27\\\":854},{\\\"_18\\\":851},\\\"Lazy Route Discovery\\\",\\\"guides/lazy-route-discovery.md\\\",\\\"guides/lazy-route-discovery\\\",[],{\\\"_16\\\":856,\\\"_22\\\":858,\\\"_24\\\":859,\\\"_26\\\":34,\\\"_27\\\":860},{\\\"_18\\\":857},\\\"Local TLS\\\",\\\"guides/local-tls.md\\\",\\\"guides/local-tls\\\",[],{\\\"_16\\\":862,\\\"_22\\\":864,\\\"_24\\\":865,\\\"_26\\\":34,\\\"_27\\\":866},{\\\"_18\\\":863},\\\"Manual Dev Server\\\",\\\"guides/manual-mode.md\\\",\\\"guides/manual-mode\\\",[],{\\\"_16\\\":868,\\\"_22\\\":871,\\\"_24\\\":872,\\\"_26\\\":34,\\\"_27\\\":873},{\\\"_18\\\":869,\\\"_53\\\":870},\\\"MDX\\\",\\\"Remix makes integrating MDX into your project a breeze with built in routes and \\\\\\\"import\\\\\\\" support.\\\",\\\"guides/mdx.md\\\",\\\"guides/mdx\\\",[],{\\\"_16\\\":875,\\\"_22\\\":878,\\\"_24\\\":879,\\\"_26\\\":34,\\\"_27\\\":880},{\\\"_18\\\":876,\\\"_53\\\":877},\\\"Migrating from React Router\\\",\\\"Migrating your React Router app to Remix can be done all at once or in stages. This guide will walk you through an iterative approach to get your app running quickly.\\\",\\\"guides/migrating-react-router-app.md\\\",\\\"guides/migrating-react-router-app\\\",[],{\\\"_16\\\":882,\\\"_22\\\":884,\\\"_24\\\":885,\\\"_26\\\":34,\\\"_27\\\":886},{\\\"_18\\\":883},\\\"Not Found Handling\\\",\\\"guides/not-found.md\\\",\\\"guides/not-found\\\",[],{\\\"_16\\\":888,\\\"_22\\\":890,\\\"_24\\\":891,\\\"_26\\\":34,\\\"_27\\\":892},{\\\"_18\\\":889},\\\"Performance\\\",\\\"guides/performance.md\\\",\\\"guides/performance\\\",[],{\\\"_16\\\":894,\\\"_22\\\":896,\\\"_24\\\":897,\\\"_26\\\":34,\\\"_27\\\":898},{\\\"_18\\\":895},\\\"Presets\\\",\\\"guides/presets.md\\\",\\\"guides/presets\\\",[],{\\\"_16\\\":900,\\\"_22\\\":902,\\\"_24\\\":903,\\\"_26\\\":34,\\\"_27\\\":904},{\\\"_18\\\":901},\\\"Resource Routes\\\",\\\"guides/resource-routes.md\\\",\\\"guides/resource-routes\\\",[],{\\\"_16\\\":906,\\\"_22\\\":908,\\\"_24\\\":909,\\\"_26\\\":34,\\\"_27\\\":910},{\\\"_18\\\":907},\\\"Server Bundles\\\",\\\"guides/server-bundles.md\\\",\\\"guides/server-bundles\\\",[],{\\\"_16\\\":912,\\\"_22\\\":914,\\\"_24\\\":915,\\\"_26\\\":34,\\\"_27\\\":916},{\\\"_18\\\":913},\\\"Single Fetch\\\",\\\"guides/single-fetch.md\\\",\\\"guides/single-fetch\\\",[],{\\\"_16\\\":918,\\\"_22\\\":920,\\\"_24\\\":921,\\\"_26\\\":34,\\\"_27\\\":922},{\\\"_18\\\":919},\\\"SPA Mode\\\",\\\"guides/spa-mode.md\\\",\\\"guides/spa-mode\\\",[],{\\\"_16\\\":924,\\\"_22\\\":927,\\\"_24\\\":928,\\\"_26\\\":34,\\\"_27\\\":929},{\\\"_18\\\":925,\\\"_53\\\":926},\\\"Streaming\\\",\\\"When, why, and how to stream with React 18 and Remix's deferred API.\\\",\\\"guides/streaming.md\\\",\\\"guides/streaming\\\",[],{\\\"_16\\\":931,\\\"_22\\\":934,\\\"_24\\\":935,\\\"_26\\\":34,\\\"_27\\\":936},{\\\"_18\\\":932,\\\"_53\\\":933},\\\"Templates\\\",\\\"The quickest way to get rocking and rolling with Remix\\\",\\\"guides/templates.md\\\",\\\"guides/templates\\\",[],{\\\"_16\\\":938,\\\"_22\\\":940,\\\"_24\\\":941,\\\"_26\\\":34,\\\"_27\\\":942},{\\\"_18\\\":939,\\\"_169\\\":10},\\\"TypeScript\\\",\\\"guides/typescript.md\\\",\\\"guides/typescript\\\",[],{\\\"_16\\\":944,\\\"_22\\\":946,\\\"_24\\\":947,\\\"_26\\\":34,\\\"_27\\\":948},{\\\"_18\\\":945},\\\"Vite\\\",\\\"guides/vite.md\\\",\\\"guides/vite\\\",[],\\\"routes/docs.$\\\",{\\\"_951\\\":952},\\\"doc\\\",{\\\"_16\\\":953,\\\"_22\\\":954,\\\"_955\\\":956,\\\"_24\\\":957,\\\"_958\\\":959,\\\"_27\\\":965},{\\\"_18\\\":210},\\\"docs/file-conventions/vite-config.md\\\",\\\"html\\\",\\\"\\u003ch1 id=\\\\\\\"viteconfigts\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#viteconfigts\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003evite.config.ts\\u003c/h1\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003eIf your project is still using the \\u003ca href=\\\\\\\"../guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\\"\\u003eClassic Remix Compiler\\u003c/a\\u003e, you should refer to the \\u003ca href=\\\\\\\"./remix-config\\\\\\\"\\u003eremix.config.js documentation\\u003c/a\\u003e instead.\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eRemix uses \\u003ca href=\\\\\\\"https://vitejs.dev\\\\\\\"\\u003eVite\\u003c/a\\u003e to compile your application. You'll need to provide a Vite config file with the Remix Vite plugin. Here's the minimum configuration you'll need:\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evitePlugin\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eas\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e plugins: [\\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e()],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003eVite supports using a \\u003ccode\\u003e.js\\u003c/code\\u003e file for your config, but we recommend using TypeScript to help ensure your configuration is valid.\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003ch2 id=\\\\\\\"remix-vite-plugin-config\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#remix-vite-plugin-config\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eRemix Vite Plugin Config\\u003c/h2\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"javascript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evitePlugin\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eas\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e plugins: [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e basename: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e buildDirectory: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ebuild\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e future: {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e/* any enabled future flags */\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e ignoredRouteFiles: [\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e**/*.css\\u003c/span\\u003e\\\\\\\"],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroutes\\u003c/span\\u003e(\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e) {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eroute\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/somewhere/cool/*\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecatchall.tsx\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e serverBuildFile: \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003eindex.js\\u003c/span\\u003e\\\\\\\",\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e }),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e ],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4 id=\\\\\\\"appdirectory\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#appdirectory\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eappDirectory\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThe path to the \\u003ccode\\u003eapp\\u003c/code\\u003e directory, relative to the project root. Defaults to\\\\n\\u003ccode\\u003e\\\\\\\"app\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"future\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#future\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003efuture\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThe \\u003ccode\\u003efuture\\u003c/code\\u003e config lets you opt-into future breaking changes via \\u003ca href=\\\\\\\"../start/future-flags\\\\\\\"\\u003eFuture Flags\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"ignoredroutefiles\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#ignoredroutefiles\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eignoredRouteFiles\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThis is an array of globs (via \\u003ca href=\\\\\\\"https://npm.im/minimatch\\\\\\\"\\u003eminimatch\\u003c/a\\u003e) that Remix will match to\\\\nfiles while reading your \\u003ccode\\u003eapp/routes\\u003c/code\\u003e directory. If a file matches, it will be\\\\nignored rather than treated like a route module. This is useful for ignoring\\\\nCSS/test files you wish to colocate.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"routes\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#routes\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroutes\\u003c/h4\\u003e\\\\n\\u003cp\\u003eA function for defining custom routes, in addition to those already defined\\\\nusing the filesystem convention in \\u003ccode\\u003eapp/routes\\u003c/code\\u003e. Both sets of routes will be merged.\\u003c/p\\u003e\\\\n\\u003cdiv data-code-block=\\\\\\\"\\\\\\\" data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\"\\u003e\\u003cpre data-filename=\\\\\\\"vite.config.ts\\\\\\\" data-line-numbers=\\\\\\\"true\\\\\\\" data-lang=\\\\\\\"typescript\\\\\\\" style=\\\\\\\"color: var(--base05);\\\\\\\"\\u003e\\u003ccode\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"1\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003evitePlugin\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eas\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eremix\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"2\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eimport\\u003c/span\\u003e { \\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e } \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003efrom\\u003c/span\\u003e \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003evite\\u003c/span\\u003e\\\\\\\";\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"3\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"4\\\\\\\"\\u003e\\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003eexport\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003edefault\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineConfig\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"5\\\\\\\"\\u003e plugins: [\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"6\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eremix\\u003c/span\\u003e({\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"7\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroutes\\u003c/span\\u003e: \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003easync\\u003c/span\\u003e (\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"8\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// If you need to do async work, do it before calling `defineRoutes`, we use\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"9\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// the call stack of `route` inside to set nesting.\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"10\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"11\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0E)\\\\\\\"\\u003ereturn\\u003c/span\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003edefineRoutes\\u003c/span\\u003e((\\u003cspan style=\\\\\\\"color: var(--base08)\\\\\\\"\\u003eroute\\u003c/span\\u003e) \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"12\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// A common use for this is catchall routes.\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"13\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// - The first argument is the React Router path to match against\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"14\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// - The second is the relative filename of the route handler\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"15\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003e/some/path/*\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003ecatchall.tsx\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"16\\\\\\\"\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"17\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// if you want to nest routes, use the optional callback argument\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"18\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esome/:path\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esome/route/file.js\\u003c/span\\u003e\\\\\\\", () \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003e=\\u003e\\u003c/span\\u003e {\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"19\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// - path is relative to parent path\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"20\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base03)\\\\\\\"\\u003e// - filenames are still relative to the app directory\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"21\\\\\\\"\\u003e \\u003cspan style=\\\\\\\"color: var(--base0D)\\\\\\\"\\u003eroute\\u003c/span\\u003e(\\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003erelative/path\\u003c/span\\u003e\\\\\\\", \\\\\\\"\\u003cspan style=\\\\\\\"color: var(--base0B)\\\\\\\"\\u003esome/other/file\\u003c/span\\u003e\\\\\\\");\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"22\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"23\\\\\\\"\\u003e });\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"24\\\\\\\"\\u003e },\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"25\\\\\\\"\\u003e }),\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"26\\\\\\\"\\u003e ],\\\\n\\u003c/span\\u003e\\u003cspan class=\\\\\\\"codeblock-line\\\\\\\" data-line-number=\\\\\\\"27\\\\\\\"\\u003e});\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4 id=\\\\\\\"servermoduleformat\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#servermoduleformat\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverModuleFormat\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThe output format of the server build, which can either be \\u003ccode\\u003e\\\\\\\"cjs\\\\\\\"\\u003c/code\\u003e or \\u003ccode\\u003e\\\\\\\"esm\\\\\\\"\\u003c/code\\u003e.\\\\nDefaults to \\u003ccode\\u003e\\\\\\\"esm\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"builddirectory\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#builddirectory\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebuildDirectory\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThe path to the build directory, relative to the project root. Defaults to\\\\n\\u003ccode\\u003e\\\\\\\"build\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"basename\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#basename\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebasename\\u003c/h4\\u003e\\\\n\\u003cp\\u003eAn optional basename for your route paths, passed through to the \\u003ca href=\\\\\\\"https://reactrouter.com/v6/routers/create-browser-router#basename\\\\\\\"\\u003eReact Router \\\\\\\"basename\\\\\\\" option\\u003c/a\\u003e. Please note that this is different from your \\u003cem\\u003easset\\u003c/em\\u003e paths. You can configure the \\u003ca href=\\\\\\\"https://vitejs.dev/config/shared-options.html#base\\\\\\\"\\u003ebase public path\\u003c/a\\u003e for your assets via the \\u003ca href=\\\\\\\"https://vitejs.dev/config/shared-options.html#base\\\\\\\"\\u003eVite \\\\\\\"base\\\\\\\" option\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"buildend\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#buildend\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebuildEnd\\u003c/h4\\u003e\\\\n\\u003cp\\u003eA function that is called after the full Remix build is complete.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"manifest\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#manifest\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003emanifest\\u003c/h4\\u003e\\\\n\\u003cp\\u003eWhether to write a \\u003ccode\\u003e.remix/manifest.json\\u003c/code\\u003e file to the build directory. Defaults\\\\nto \\u003ccode\\u003efalse\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"presets\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#presets\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003epresets\\u003c/h4\\u003e\\\\n\\u003cp\\u003eAn array of \\u003ca href=\\\\\\\"../guides/presets\\\\\\\"\\u003epresets\\u003c/a\\u003e to ease integration with other tools and hosting providers.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"serverbuildfile\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#serverbuildfile\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverBuildFile\\u003c/h4\\u003e\\\\n\\u003cp\\u003eThe name of the server file is generated in the server build directory. Defaults to \\u003ccode\\u003e\\\\\\\"index.js\\\\\\\"\\u003c/code\\u003e.\\u003c/p\\u003e\\\\n\\u003ch4 id=\\\\\\\"serverbundles\\\\\\\"\\u003e\\u003ca aria-hidden=\\\\\\\"true\\\\\\\" tabindex=\\\\\\\"-1\\\\\\\" href=\\\\\\\"#serverbundles\\\\\\\"\\u003e\\u003cspan class=\\\\\\\"icon icon-link\\\\\\\"\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverBundles\\u003c/h4\\u003e\\\\n\\u003cp\\u003eA function for assigning addressable routes to \\u003ca href=\\\\\\\"../guides/server-bundles\\\\\\\"\\u003eserver bundles\\u003c/a\\u003e.\\u003c/p\\u003e\\\\n\\u003cp\\u003eYou may also want to enable the \\u003ccode\\u003emanifest\\u003c/code\\u003e option since, when server bundles are enabled, it contains mappings between routes and server bundles.\\u003c/p\\u003e\\\",\\\"docs/file-conventions/vite-config\\\",\\\"headings\\\",[960],{\\\"_961\\\":962,\\\"_955\\\":963,\\\"_24\\\":964},\\\"headingLevel\\\",\\\"h2\\\",\\\"Remix Vite Plugin Config\\\",\\\"remix-vite-plugin-config\\\",[],\\\"actionData\\\",\\\"errors\\\"]\\n\");function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c\u0026\u00268===c.nodeType){var d=c.data;if(\"/$\"===d)if(0===e)break;else e--;else\"$\"!==d\u0026\u0026\"$?\"!==d\u0026\u0026\"$!\"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data=\"$\";a._reactRetry\u0026\u0026a._reactRetry()}};$RC(\"B:0\",\"S:0\")window.__reactRouterContext.streamController.close();$RC(\"B:1\",\"S:1\")", "term_freq": { "#appdirectory\\\\\\": 1, "#basename\\\\\\": 1, "#builddirectory\\\\\\": 1, "#buildend\\\\\\": 1, "#future\\\\\\": 1, "#ignoredroutefiles\\\\\\": 1, "#manifest\\\\\\": 1, "#presets\\\\\\": 1, "#remix-vite-plugin-config\\\\\\": 1, "#routes\\\\\\": 1, "#serverbuildfile\\\\\\": 1, "#serverbundles\\\\\\": 1, "#servermoduleformat\\\\\\": 1, "#viteconfigts\\\\\\": 1, "$\\": 1, "$rc": 3, "**/*": 1, "*/": 1, "*/\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "--base03": 9, "--base05": 3, "--base08": 13, "--base0b": 18, "--base0d": 18, "--base0e": 24, "-1\\\\\\": 14, "-5": 2, "/$": 1, "/*": 1, "//": 8, "//npm": 1, "//reactrouter": 1, "//v2": 2, "//vitejs": 3, "/assets/docs": 1, "/assets/docs-dauuyqk6": 1, "/assets/entry": 1, "/assets/manifest-b010e014": 1, "/assets/root-ctuyafrs": 1, "/guides/presets\\\\\\": 1, "/guides/server-bundles\\\\\\": 1, "/guides/vite#classic-remix-compiler-vs-remix-vite\\\\\\": 1, "/remix-config\\\\\\": 1, "/some/path/*": 1, "/somewhere/cool/*": 1, "/start/future-flags\\\\\\": 1, "0===e": 1, "10": 43, "100": 1, "101": 1, "102": 1, "103": 1, "104": 1, "105": 1, "106": 1, "107": 1, "108": 1, "109": 1, "10\\\\\\": 2, "110": 1, "111": 3, "112": 1, "113": 1, "114": 1, "115": 1, "116": 1, "117": 1, "118": 2, "119": 1, "11\\\\\\": 2, "12": 1, "120": 1, "121": 1, "122": 1, "123": 1, "124": 1, "125": 1, "126": 1, "127": 1, "128": 1, "129": 1, "12\\\\\\": 2, "130": 1, "131": 1, "132": 2, "133": 1, "134": 1, "135": 1, "136": 1, "137": 1, "138": 1, "139": 1, "13\\\\\\": 2, "14": 1, "140": 1, "141": 1, "142": 1, "143": 1, "144": 1, "145": 1, "146": 1, "147": 1, "148": 1, "149": 1, "14\\\\\\": 2, "15": 1, "150": 1, "151": 1, "152": 1, "153": 1, "154": 1, "155": 1, "156": 1, "157": 1, "158": 1, "159": 1, "15\\\\\\": 2, "160": 1, "161": 1, "162": 1, "163": 1, "164": 1, "165": 1, "166": 1, "167": 1, "168": 1, "16\\\\\\": 2, "17": 1, "170": 1, "171": 1, "172": 1, "173": 1, "174": 1, "175": 1, "176": 1, "177": 1, "178": 1, "179": 1, "17\\\\\\": 2, "18": 1, "180": 1, "181": 1, "182": 1, "183": 1, "184": 1, "185": 1, "186": 1, "187": 1, "188": 1, "189": 1, "18\\\\\\": 2, "19": 1, "190": 1, "191": 1, "192": 1, "193": 1, "194": 1, "195": 1, "196": 1, "197": 1, "198": 1, "199": 1, "19\\\\\\": 2, "1\\\\\\": 3, "200": 1, "201": 1, "202": 1, "203": 1, "204": 1, "205": 1, "206": 1, "207": 1, "208": 1, "209": 1, "20\\\\\\": 2, "21": 3, "210": 2, "211": 1, "212": 1, "213": 1, "214": 1, "215": 1, "216": 1, "217": 1, "218": 1, "219": 1, "21\\\\\\": 2, "220": 1, "221": 1, "222": 1, "223": 1, "224": 1, "225": 1, "226": 1, "227": 1, "228": 1, "229": 1, "22\\\\\\": 1, "23": 1, "230": 1, "231": 1, "232": 1, "233": 1, "234": 1, "235": 1, "236": 1, "237": 1, "238": 1, "239": 1, "23\\\\\\": 1, "240": 1, "241": 1, "242": 1, "243": 1, "244": 1, "245": 1, "246": 1, "247": 1, "248": 1, "249": 1, "24\\\\\\": 1, "25": 1, "250": 1, "251": 1, "252": 1, "253": 1, "254": 1, "255": 1, "256": 1, "257": 1, "258": 1, "259": 1, "25\\\\\\": 1, "260": 1, "261": 1, "262": 1, "263": 1, "264": 1, "265": 1, "266": 1, "267": 1, "268": 1, "269": 1, "26\\\\\\": 1, "270": 1, "271": 1, "272": 1, "273": 1, "274": 1, "275": 1, "276": 1, "277": 1, "278": 1, "279": 1, "27\\\\\\": 1, "28": 1, "280": 1, "281": 1, "282": 1, "283": 1, "284": 1, "285": 1, "286": 1, "287": 1, "288": 1, "289": 1, "29": 1, "290": 1, "291": 1, "292": 1, "293": 1, "294": 1, "295": 1, "296": 1, "297": 1, "298": 1, "299": 1, "2\\\\\\": 3, "30": 1, "300": 1, "301": 1, "302": 1, "303": 1, "304": 1, "305": 1, "306": 1, "307": 1, "308": 1, "309": 1, "30m": 3, "31": 1, "310": 1, "311": 1, "312": 1, "313": 1, "314": 1, "315": 1, "316": 1, "317": 1, "318": 1, "319": 1, "32": 2, "320": 1, "321": 1, "322": 1, "323": 1, "324": 1, "325": 1, "326": 1, "327": 1, "328": 1, "329": 1, "33": 1, "330": 1, "331": 1, "332": 1, "333": 1, "334": 1, "335": 1, "336": 1, "337": 1, "338": 1, "339": 1, "34": 146, "340": 1, "341": 1, "342": 1, "343": 1, "344": 1, "345": 1, "346": 1, "347": 1, "348": 1, "349": 1, "35": 1, "350": 1, "351": 1, "352": 1, "353": 1, "354": 1, "355": 1, "356": 1, "357": 1, "358": 1, "359": 1, "36": 1, "360": 1, "361": 1, "362": 1, "363": 1, "364": 1, "365": 1, "366": 1, "367": 1, "368": 1, "369": 1, "37": 1, "370": 1, "371": 1, "372": 1, "373": 1, "374": 1, "375": 1, "376": 1, "377": 1, "378": 1, "38": 1, "380": 1, "381": 1, "382": 1, "383": 1, "384": 1, "385": 1, "386": 1, "387": 1, "388": 1, "389": 1, "39": 4, "390": 1, "391": 1, "392": 1, "393": 1, "394": 1, "395": 1, "396": 1, "397": 1, "398": 1, "399": 1, "3\\\\\\": 3, "40": 1, "400": 1, "401": 1, "402": 1, "403": 1, "404": 1, "405": 1, "406": 1, "407": 1, "408": 1, "409": 1, "41": 1, "410": 1, "411": 1, "412": 1, "413": 1, "414": 1, "415": 1, "416": 1, "417": 1, "418": 1, "419": 1, "42": 1, "420": 1, "421": 1, "422": 1, "423": 1, "424": 1, "425": 1, "426": 1, "427": 1, "428": 1, "429": 1, "43": 1, "430": 1, "431": 1, "432": 1, "433": 1, "434": 1, "435": 1, "436": 1, "437": 1, "438": 1, "439": 1, "44": 1, "440": 1, "441": 1, "442": 1, "443": 1, "444": 1, "445": 1, "446": 1, "447": 1, "448": 1, "449": 1, "45": 1, "450": 1, "451": 1, "452": 1, "453": 1, "454": 1, "455": 1, "456": 1, "457": 1, "458": 1, "459": 1, "46": 5, "460": 1, "461": 1, "462": 1, "463": 1, "464": 1, "465": 1, "466": 1, "467": 1, "468": 1, "469": 1, "47": 1, "470": 1, "471": 1, "472": 1, "473": 1, "474": 1, "475": 1, "476": 1, "477": 1, "478": 1, "479": 1, "48": 1, "480": 1, "481": 1, "482": 1, "483": 1, "484": 1, "485": 1, "486": 1, "487": 1, "488": 1, "489": 1, "49": 1, "490": 1, "491": 1, "492": 1, "493": 1, "494": 1, "495": 1, "496": 1, "497": 1, "498": 1, "499": 1, "4\\\\\\": 3, "50": 1, "500": 1, "501": 1, "502": 1, "503": 1, "504": 1, "505": 1, "506": 1, "507": 1, "508": 1, "509": 1, "51": 1, "510": 1, "511": 1, "512": 1, "513": 1, "514": 1, "515": 1, "516": 1, "517": 1, "518": 1, "519": 1, "52": 1, "520": 1, "521": 1, "522": 1, "523": 1, "524": 1, "525": 1, "526": 1, "527": 1, "528": 1, "529": 1, "530": 1, "531": 1, "532": 1, "533": 1, "534": 1, "535": 1, "536": 1, "537": 1, "538": 1, "539": 1, "54": 1, "540": 1, "541": 1, "542": 1, "543": 1, "544": 1, "545": 1, "546": 1, "547": 1, "548": 1, "549": 1, "55": 3, "550": 1, "551": 1, "552": 1, "553": 1, "554": 1, "555": 1, "556": 1, "557": 1, "558": 1, "559": 1, "56": 1, "560": 1, "561": 1, "562": 1, "563": 1, "564": 1, "565": 1, "566": 1, "567": 1, "568": 1, "569": 1, "57": 1, "570": 1, "571": 1, "572": 1, "573": 1, "574": 1, "575": 1, "576": 1, "577": 1, "578": 1, "579": 1, "58": 1, "580": 1, "581": 1, "582": 1, "583": 1, "584": 1, "585": 1, "586": 1, "587": 1, "588": 1, "589": 1, "59": 1, "590": 1, "591": 1, "592": 1, "593": 1, "594": 1, "595": 1, "596": 1, "597": 1, "598": 1, "599": 1, "5\\\\\\": 3, "5m": 3, "60": 1, "600": 1, "601": 1, "602": 1, "603": 1, "604": 1, "605": 1, "606": 1, "607": 1, "608": 1, "609": 1, "61": 1, "610": 1, "611": 1, "612": 1, "613": 1, "614": 1, "615": 1, "616": 1, "617": 1, "618": 1, "619": 1, "62": 3, "620": 1, "621": 1, "622": 1, "623": 1, "624": 1, "625": 1, "626": 1, "627": 1, "628": 1, "629": 1, "63": 1, "630": 1, "631": 1, "632": 1, "633": 1, "634": 1, "635": 1, "636": 1, "637": 1, "638": 1, "639": 1, "64": 1, "640": 1, "641": 1, "642": 1, "643": 1, "644": 1, "645": 1, "646": 1, "647": 1, "648": 1, "649": 1, "65": 1, "650": 1, "651": 1, "652": 1, "653": 1, "654": 1, "655": 1, "656": 1, "657": 1, "658": 1, "659": 1, "66": 1, "660": 1, "661": 1, "662": 1, "663": 1, "664": 1, "665": 1, "666": 1, "667": 1, "668": 1, "669": 1, "67": 1, "670": 1, "671": 1, "672": 1, "673": 1, "674": 1, "675": 1, "676": 1, "677": 1, "678": 1, "679": 1, "68": 1, "680": 1, "681": 1, "682": 1, "683": 1, "684": 1, "685": 1, "686": 1, "687": 1, "688": 1, "689": 1, "69": 1, "690": 1, "691": 1, "692": 1, "693": 1, "694": 1, "695": 1, "696": 1, "697": 1, "698": 1, "699": 1, "6\\\\\\": 3, "70": 1, "700": 1, "701": 1, "702": 1, "703": 1, "704": 1, "705": 1, "706": 1, "707": 1, "708": 1, "709": 1, "71": 1, "710": 1, "711": 1, "712": 1, "713": 1, "714": 1, "715": 1, "716": 1, "717": 1, "718": 1, "719": 1, "72": 1, "720": 1, "721": 1, "722": 1, "723": 1, "724": 1, "725": 1, "726": 1, "727": 1, "728": 1, "729": 1, "73": 1, "730": 1, "731": 1, "732": 1, "733": 1, "734": 1, "735": 1, "736": 1, "737": 1, "738": 1, "739": 1, "74": 1, "740": 1, "741": 1, "742": 1, "743": 1, "744": 1, "745": 1, "746": 1, "747": 1, "748": 1, "749": 1, "75": 1, "750": 1, "751": 1, "752": 1, "753": 1, "754": 1, "755": 1, "756": 1, "757": 1, "758": 1, "759": 1, "76": 1, "760": 1, "761": 1, "762": 1, "763": 1, "764": 1, "765": 1, "766": 1, "767": 1, "768": 1, "769": 1, "77": 1, "770": 1, "771": 1, "772": 1, "773": 1, "774": 1, "775": 1, "776": 1, "777": 1, "778": 1, "779": 1, "78": 1, "780": 1, "781": 1, "782": 1, "783": 1, "784": 1, "785": 1, "786": 1, "787": 1, "788": 1, "789": 1, "79": 1, "790": 1, "791": 1, "792": 1, "793": 1, "794": 1, "795": 1, "796": 1, "797": 1, "798": 1, "799": 1, "7\\\\\\": 2, "80": 1, "800": 1, "801": 1, "802": 1, "803": 1, "804": 1, "805": 1, "806": 1, "807": 1, "808": 1, "809": 1, "81": 1, "810": 1, "811": 1, "812": 1, "813": 1, "814": 1, "815": 1, "816": 1, "817": 1, "818": 1, "819": 1, "82": 1, "820": 1, "821": 1, "822": 1, "823": 1, "824": 1, "825": 1, "826": 1, "827": 1, "828": 1, "829": 1, "83": 1, "830": 1, "831": 1, "832": 1, "833": 1, "834": 1, "835": 1, "836": 1, "837": 1, "838": 1, "839": 1, "84": 1, "840": 1, "841": 1, "842": 1, "843": 1, "844": 1, "845": 1, "846": 1, "847": 1, "848": 1, "849": 1, "85": 1, "850": 1, "851": 1, "852": 1, "853": 1, "854": 1, "855": 1, "856": 1, "857": 1, "858": 1, "859": 1, "86": 1, "860": 1, "861": 1, "862": 1, "863": 1, "864": 1, "865": 1, "866": 1, "867": 1, "868": 1, "869": 1, "87": 1, "870": 1, "871": 1, "872": 1, "873": 1, "874": 1, "875": 1, "876": 1, "877": 1, "878": 1, "879": 1, "88": 1, "880": 1, "881": 1, "882": 1, "883": 1, "884": 1, "885": 1, "886": 1, "887": 1, "888": 1, "889": 1, "89": 1, "890": 1, "891": 1, "892": 1, "893": 1, "894": 1, "895": 1, "896": 1, "897": 1, "898": 1, "899": 1, "8\\\\\\": 2, "90": 1, "900": 1, "901": 1, "902": 1, "903": 1, "904": 1, "905": 1, "906": 1, "907": 1, "908": 1, "909": 1, "91": 1, "910": 1, "911": 1, "912": 1, "913": 1, "914": 1, "915": 1, "916": 1, "917": 1, "918": 1, "919": 1, "92": 1, "920": 1, "921": 1, "922": 1, "923": 1, "924": 1, "925": 1, "926": 1, "927": 1, "928": 1, "929": 1, "93": 1, "930": 1, "931": 1, "932": 1, "933": 1, "934": 1, "935": 1, "936": 1, "937": 1, "938": 1, "939": 1, "94": 1, "940": 1, "941": 1, "942": 1, "943": 1, "944": 1, "945": 1, "946": 1, "947": 1, "948": 1, "95": 1, "950": 1, "952": 1, "953": 1, "954": 1, "956": 1, "957": 1, "959": 1, "96": 1, "960": 1, "962": 1, "963": 1, "964": 1, "965": 1, "97": 1, "98": 1, "99": 1, "9\\\\\\": 2, "===": 1, "===d": 1, "==d\u0026\u0026": 2, "==d||e++": 1, "=\u003e": 5, "@remix-run/": 1, "@remix-run/dev": 4, "@remix-run/node": 2, "@remix-run/node\\": 1, "@remix-run/serve": 2, "@remix-run/serve\\": 1, "@remix-run/testing": 2, "@remix-run/testing\\": 1, "\\\\\\": 109, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003ch4": 2, "\\\\n\\u003c/span\\u003e\\u003c/code\\u003e\\u003c/pre\\u003e\\u003c/div\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-info\\u003evite": 1, "\\\\n\\u003c/span\\u003e\\u003cspan": 37, "\\\\ndefaults": 1, "\\n": 1, "\\u003c/code\\u003e": 6, "\\u003c/docs-info\\u003e\\u003c/p\\u003e\\\\n\\u003ch2": 1, "\\u003c/docs-warning\\u003e\\u003c/p\\u003e\\\\n\\u003cp\\u003eremix": 1, "\\u003c/p\\u003e\\": 1, "\\u003c/p\\u003e\\\\n\\u003cdiv": 2, "\\u003c/p\\u003e\\\\n\\u003ch4": 10, "\\u003c/p\\u003e\\\\n\\u003cp\\u003eyou": 1, "\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 2, "\\u003ca": 10, "\\u003ccode\\u003e": 2, "\\u003ccode\\u003e\\\\\\": 4, "\\u003ccode\\u003eapp/routes\\u003c/code\\u003e": 2, "\\u003ccode\\u003eapp\\u003c/code\\u003e": 1, "\\u003ccode\\u003efalse\\u003c/code\\u003e": 1, "\\u003ccode\\u003efuture\\u003c/code\\u003e": 1, "\\u003ccode\\u003emanifest\\u003c/code\\u003e": 1, "\\u003cem\\u003easset\\u003c/em\\u003e": 1, "\\u003ch1": 1, "\\u003cspan": 73, "\\u003e": 40, "\\u003e**/*": 1, "\\u003e/*": 1, "\\u003e//": 8, "\\u003e/\\u003c/span\\u003e\\\\\\": 1, "\\u003e/some/path/*\\u003c/span\\u003e\\\\\\": 1, "\\u003e/somewhere/cool/*\\u003c/span\\u003e\\\\\\": 1, "\\u003e=\\u003e\\u003c/span\\u003e": 4, "\\u003e@remix-run/dev\\u003c/span\\u003e\\\\\\": 3, "\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 5, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eappdirectory\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebasename\\u003c/h4\\u003e\\\\n\\u003cp\\u003ean": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebuilddirectory\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003ebuildend\\u003c/h4\\u003e\\\\n\\u003cp\\u003ea": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003efuture\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eignoredroutefiles\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethis": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003emanifest\\u003c/h4\\u003e\\\\n\\u003cp\\u003ewhether": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003epresets\\u003c/h4\\u003e\\\\n\\u003cp\\u003ean": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eremix": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eroutes\\u003c/h4\\u003e\\\\n\\u003cp\\u003ea": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverbuildfile\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eserverbundles\\u003c/h4\\u003e\\\\n\\u003cp\\u003ea": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003eservermoduleformat\\u003c/h4\\u003e\\\\n\\u003cp\\u003ethe": 1, "\\u003e\\u003c/span\\u003e\\u003c/a\\u003evite": 1, "\\u003e\\u003ca": 14, "\\u003e\\u003ccode\\u003e\\u003cspan": 3, "\\u003e\\u003cpre": 3, "\\u003e\\u003cspan": 23, "\\u003eas\\u003c/span\\u003e": 3, "\\u003easync\\u003c/span\\u003e": 1, "\\u003ebase": 1, "\\u003ebuild\\u003c/span\\u003e\\\\\\": 1, "\\u003ecatchall": 2, "\\u003eclassic": 1, "\\u003edefault\\u003c/span\\u003e": 3, "\\u003edefineconfig\\u003c/span\\u003e": 6, "\\u003edefineroutes\\u003c/span\\u003e": 4, "\\u003eexport\\u003c/span\\u003e": 3, "\\u003efrom\\u003c/span\\u003e": 6, "\\u003efuture": 1, "\\u003eimport\\u003c/span\\u003e": 6, "\\u003eindex": 1, "\\u003eminimatch\\u003c/a\\u003e": 1, "\\u003epresets\\u003c/a\\u003e": 1, "\\u003ereact": 1, "\\u003erelative/path\\u003c/span\\u003e\\\\\\": 1, "\\u003eremix": 1, "\\u003eremix\\u003c/span\\u003e": 6, "\\u003ereturn\\u003c/span\\u003e": 2, "\\u003eroute\\u003c/span\\u003e": 6, "\\u003eroutes\\u003c/span\\u003e": 2, "\\u003eserver": 1, "\\u003esome/": 1, "\\u003esome/other/file\\u003c/span\\u003e\\\\\\": 1, "\\u003esome/route/file": 1, "\\u003evite": 1, "\\u003evite\\u003c/a\\u003e": 1, "\\u003evite\\u003c/span\\u003e\\\\\\": 3, "\\u003eviteplugin\\u003c/span\\u003e": 3, "_-b4drxahv": 1, "_11\\": 1, "_13\\": 1, "_169\\": 31, "_16\\": 152, "_18\\": 152, "_1\\": 1, "_20\\": 27, "_22\\": 152, "_24\\": 153, "_26\\": 151, "_27\\": 152, "_379\\": 5, "_3\\": 1, "_53\\": 8, "_5\\": 1, "_7\\": 1, "_949\\": 1, "_951\\": 1, "_955\\": 2, "_958\\": 1, "_961\\": 1, "_966\\": 1, "_967\\": 1, "_9\\": 1, "__reactroutercontext": 5, "__reactrouterroutemodules": 1, "_reactretry": 1, "_reactretry\u0026\u0026a": 1, "a=a": 1, "a=document": 1, "about": 1, "accessibility\\": 1, "action\\": 1, "actiondata\\": 1, "adapter": 3, "adapters": 3, "addition": 2, "addressable": 2, "after": 2, "against": 1, "against\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "all": 1, "already": 2, "also": 2, "an": 5, "and": 13, "any": 2, "api": 4, "api@remix-run/dev": 2, "api\\": 1, "app": 6, "app/routes": 2, "app\\\\\\": 1, "appdirectory": 1, "appdirectory\\\\\\": 1, "application": 2, "approach": 1, "are": 4, "argument": 3, "argument\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "aria-hidden=\\\\\\": 14, "array": 4, "as": 6, "asked": 1, "asset": 4, "assets": 2, "assigning": 2, "async": 3, "at": 1, "attrs\\": 1, "await\\": 1, "b=document": 1, "backend": 3, "base": 2, "base\\\\\\": 1, "basename": 7, "basename\\\\\\": 2, "be": 6, "be\\\\nignored": 1, "been": 2, "before": 3, "between": 2, "both": 2, "breadcrumbs": 3, "break": 1, "breaking": 2, "breeze": 1, "browser": 3, "build": 12, "build\\\\\\": 1, "builddirectory": 3, "builddirectory\\\\\\": 1, "buildend": 1, "buildend\\\\\\": 1, "built": 1, "bundles": 7, "bundles\\": 1, "bundles\\u003c/a\\u003e": 1, "bundling": 2, "bundling\\": 1, "but": 2, "c\u0026\u00268===c": 1, "c=a": 1, "c=d": 1, "call": 2, "callback": 2, "called": 2, "calling": 2, "can": 5, "catch": 1, "catchall": 4, "changelog": 2, "changelog\\": 1, "changes": 2, "children\\": 1, "cjs": 1, "cjs\\\\\\": 1, "class=\\\\\\": 68, "classic": 1, "cli": 5, "cli\\": 1, "client": 12, "client-q2ogymm2": 1, "client\\": 2, "clientaction": 2, "clientaction\\": 1, "clientloader": 2, "clientloader\\": 1, "close": 1, "code": 4, "codeblock-line\\\\\\": 54, "colocate": 2, "color": 85, "com/v6/routers/create-browser-router#basename\\\\\\": 1, "common": 2, "community": 3, "community\\": 1, "compile": 2, "compiler": 1, "compiler\\u003c/a\\u003e": 1, "complete": 2, "component": 2, "component\\": 1, "components": 1, "components/await": 1, "components/await\\": 1, "components/form": 1, "components/form\\": 1, "components/index": 1, "components/link": 1, "components/link\\": 1, "components/links": 1, "components/links\\": 1, "components/live-reload": 1, "components/live-reload\\": 1, "components/meta": 1, "components/meta\\": 1, "components/nav-link": 1, "components/nav-link\\": 1, "components/outlet": 1, "components/outlet\\": 1, "components/prefetch-page-links": 1, "components/prefetch-page-links\\": 1, "components/scripts": 1, "components/scripts\\": 1, "components/scroll-restoration": 1, "components/scroll-restoration\\": 1, "components\\": 2, "componentsawait": 2, "concurrency": 3, "config": 22, "config\\": 1, "config\\u003c/h2\\u003e\\\\n\\u003cdiv": 1, "configuration": 6, "configuration\\": 1, "configure": 2, "console": 1, "constraints": 2, "constraints\\": 1, "contains": 2, "contributing": 3, "contributing\\": 1, "controller": 2, "convention": 2, "conventions": 2, "conventions\\": 1, "cookies\\": 1, "create-remix": 3, "createremixstub": 2, "createremixstub\\": 1, "css": 16, "css/test": 1, "css\\": 1, "css\\u003c/span\\u003e\\\\\\": 1, "custom": 2, "d=c": 2, "data": 16, "data-code-block=\\\\\\": 3, "data-filename=\\\\\\": 6, "data-lang=\\\\\\": 6, "data-line-number=\\\\\\": 54, "data-line-numbers=\\\\\\": 6, "data=": 1, "data\\": 2, "default": 3, "defaults": 8, "defaults\\\\nto": 1, "defer": 2, "defer\\": 1, "deferred": 1, "defineconfig": 6, "defined": 1, "defined\\\\nusing": 1, "defineroutes": 6, "defining": 2, "dependency": 3, "deployment": 4, "deployment\\": 2, "description\\": 1, "dev": 3, "dev/config/shared-options": 2, "dev\\\\\\": 1, "development": 3, "different": 2, "directory": 11, "directory\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "disabling": 3, "discordreact": 1, "discovery": 2, "discovery\\": 1, "discussion": 3, "discussion/concurrency": 1, "discussion/concurrency\\": 1, "discussion/data-flow": 1, "discussion/data-flow\\": 1, "discussion/form-vs-fetcher": 1, "discussion/form-vs-fetcher\\": 1, "discussion/hot-module-replacement": 1, "discussion/hot-module-replacement\\": 1, "discussion/index": 1, "discussion/introduction": 1, "discussion/introduction\\": 1, "discussion/pending-ui": 1, "discussion/pending-ui\\": 1, "discussion/progressive-enhancement": 1, "discussion/progressive-enhancement\\": 1, "discussion/react-router": 1, "discussion/react-router\\": 1, "discussion/resubmissions": 1, "discussion/resubmissions\\": 1, "discussion/routes": 1, "discussion/routes\\": 1, "discussion/runtimes": 1, "discussion/runtimes\\": 1, "discussion/server-vs-client": 1, "discussion/server-vs-client\\": 1, "discussion/state-management": 1, "discussion/state-management\\": 1, "discussion\\": 1, "do": 5, "doc\\": 1, "docs/file-conventions/vite-config": 1, "docs/file-conventions/vite-config\\": 1, "docsblogresourcesreact": 1, "docsdocsblogresourcesview": 1, "docsvite": 1, "document": 1, "documentation": 1, "documentation\\u003c/a\\u003e": 1, "done": 1, "e--": 1, "e=0": 1, "ease": 2, "either": 2, "else": 2, "enable": 2, "enabled": 4, "enhancement": 2, "enhancement\\": 1, "enqueue": 1, "ensure": 2, "entry": 6, "environment": 3, "error": 6, "errorboundary": 2, "errorboundary\\": 1, "errors\\": 1, "esm": 2, "esm\\\\\\": 2, "everything": 1, "examples": 1, "execution": 2, "execution\\": 1, "explanation": 2, "explanation\\": 1, "export": 3, "extract": 2, "extract\\": 1, "f=a": 1, "false": 4, "faqs": 2, "faqs\\": 1, "features": 1, "fetch": 2, "fetch\\": 1, "fetcher": 2, "fetcher\\": 1, "file": 19, "file-conventions/-client": 1, "file-conventions/-client\\": 1, "file-conventions/-server": 1, "file-conventions/-server\\": 1, "file-conventions/asset-imports": 1, "file-conventions/asset-imports\\": 1, "file-conventions/entry": 4, "file-conventions/index": 1, "file-conventions/root": 1, "file-conventions/root\\": 1, "file-conventions/routes": 1, "file-conventions/routes\\": 1, "file-conventions/vite-config": 1, "file-conventions/vite-config\\": 1, "file-conventions\\": 1, "filename": 2, "filename\\": 1, "filenames": 2, "files": 5, "files\\": 1, "filesystem": 2, "first": 2, "firstchild": 2, "flags": 5, "flags\\": 1, "flags\\u003c/a\\u003e": 1, "flow": 2, "flow\\": 1, "for": 20, "form": 11, "form\\": 1, "format": 2, "found": 3, "frequently": 1, "from": 14, "frontend": 2, "frontend\\": 1, "full": 2, "fullstack": 3, "function": 7, "future": 13, "future\\\\\\": 1, "generated": 2, "get": 4, "getelementbyid": 2, "getitem": 1, "getting": 2, "githubchat": 1, "globs": 2, "gotchas": 2, "gotchas\\": 1, "guide": 3, "guide\\": 1, "guides/accessibility": 1, "guides/accessibility\\": 1, "guides/api-development-strategy": 1, "guides/api-development-strategy\\": 1, "guides/api-routes": 1, "guides/api-routes\\": 1, "guides/bff": 1, "guides/bff\\": 1, "guides/breadcrumbs": 1, "guides/breadcrumbs\\": 1, "guides/browser-support": 1, "guides/browser-support\\": 1, "guides/client-data": 1, "guides/client-data\\": 1, "guides/constraints": 1, "guides/constraints\\": 1, "guides/contributing": 1, "guides/contributing\\": 1, "guides/css-files": 1, "guides/css-files\\": 1, "guides/data-loading": 1, "guides/data-loading\\": 1, "guides/data-writes": 1, "guides/data-writes\\": 1, "guides/dependency-optimization": 1, "guides/dependency-optimization\\": 1, "guides/deployment": 1, "guides/deployment\\": 1, "guides/disabling-javascript": 1, "guides/disabling-javascript\\": 1, "guides/envvars": 1, "guides/envvars\\": 1, "guides/errors": 1, "guides/errors\\": 1, "guides/faq": 1, "guides/faq\\": 1, "guides/file-uploads": 1, "guides/file-uploads\\": 1, "guides/form-validation": 1, "guides/form-validation\\": 1, "guides/gotchas": 1, "guides/gotchas\\": 1, "guides/index": 1, "guides/index-query-param": 1, "guides/index-query-param\\": 1, "guides/lazy-route-discovery": 1, "guides/lazy-route-discovery\\": 1, "guides/local-tls": 1, "guides/local-tls\\": 1, "guides/manual-mode": 1, "guides/manual-mode\\": 1, "guides/mdx": 1, "guides/mdx\\": 1, "guides/migrating-react-router-app": 1, "guides/migrating-react-router-app\\": 1, "guides/not-found": 1, "guides/not-found\\": 1, "guides/performance": 1, "guides/performance\\": 1, "guides/presets": 1, "guides/presets\\": 1, "guides/resource-routes": 1, "guides/resource-routes\\": 1, "guides/server-bundles": 1, "guides/server-bundles\\": 1, "guides/single-fetch": 1, "guides/single-fetch\\": 1, "guides/spa-mode": 1, "guides/spa-mode\\": 1, "guides/streaming": 1, "guides/streaming\\": 1, "guides/templates": 1, "guides/templates\\": 1, "guides/typescript": 1, "guides/typescript\\": 1, "guides/vite": 1, "guides/vite\\": 1, "guides\\": 2, "guidesaccessibility": 2, "h2\\": 1, "handle": 2, "handle\\": 1, "handler": 1, "handler\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "handling": 4, "handling\\": 2, "has": 2, "hascontent\\": 1, "headers": 2, "headers\\": 1, "headinglevel\\": 1, "headings\\": 1, "help": 3, "here": 3, "history": 4, "hooks/index": 1, "hooks/use-action-data": 1, "hooks/use-action-data\\": 1, "hooks/use-async-error": 1, "hooks/use-async-error\\": 1, "hooks/use-async-value": 1, "hooks/use-async-value\\": 1, "hooks/use-before-unload": 1, "hooks/use-before-unload\\": 1, "hooks/use-blocker": 1, "hooks/use-blocker\\": 1, "hooks/use-fetcher": 1, "hooks/use-fetcher\\": 1, "hooks/use-fetchers": 1, "hooks/use-fetchers\\": 1, "hooks/use-form-action": 1, "hooks/use-form-action\\": 1, "hooks/use-href": 1, "hooks/use-href\\": 1, "hooks/use-loader-data": 1, "hooks/use-loader-data\\": 1, "hooks/use-location": 1, "hooks/use-location\\": 1, "hooks/use-matches": 1, "hooks/use-matches\\": 1, "hooks/use-navigate": 1, "hooks/use-navigate\\": 1, "hooks/use-navigation": 1, "hooks/use-navigation-type": 1, "hooks/use-navigation-type\\": 1, "hooks/use-navigation\\": 1, "hooks/use-outlet": 1, "hooks/use-outlet-context": 1, "hooks/use-outlet-context\\": 1, "hooks/use-outlet\\": 1, "hooks/use-params": 1, "hooks/use-params\\": 1, "hooks/use-prompt": 1, "hooks/use-prompt\\": 1, "hooks/use-resolved-path": 1, "hooks/use-resolved-path\\": 1, "hooks/use-revalidator": 1, "hooks/use-revalidator\\": 1, "hooks/use-route-error": 1, "hooks/use-route-error\\": 1, "hooks/use-route-loader-data": 1, "hooks/use-route-loader-data\\": 1, "hooks/use-search-params": 1, "hooks/use-search-params\\": 1, "hooks/use-submit": 1, "hooks/use-submit\\": 1, "hooks/use-view-transition-state": 1, "hooks/use-view-transition-state\\": 1, "hooks\\": 2, "hooksuseactiondata": 2, "host\\": 1, "hosting": 2, "hot": 3, "how": 1, "href=\\\\\\": 24, "html": 1, "html#base\\\\\\": 2, "html\\": 1, "https": 7, "hydratefallback": 2, "hydratefallback\\": 1, "icon": 14, "icon-link\\\\\\": 14, "id=\\\\\\": 14, "if": 13, "ignored": 1, "ignoredroutefiles": 3, "ignoredroutefiles\\\\\\": 1, "ignoring": 1, "ignoring\\\\ncss/test": 1, "im/minimatch\\\\\\": 1, "import": 11, "import\\\\\\": 1, "imports": 4, "imports\\": 2, "in": 12, "inc": 1, "index": 6, "initial": 1, "insertbefore": 1, "inside": 2, "instead": 2, "integrating": 1, "integration": 2, "interactions": 1, "into": 2, "introduction": 1, "is": 25, "isrouteerrorresponse": 2, "isrouteerrorresponse\\": 1, "isspamode": 1, "it": 6, "iterative": 1, "javascript": 2, "javascript\\": 1, "javascript\\\\\\": 2, "js": 13, "js\\": 1, "js\\\\\\": 1, "js\\u003c/code\\u003e": 1, "js\\u003c/span\\u003e\\\\\\": 2, "json": 4, "json\\": 1, "json\\u003c/code\\u003e": 1, "key": 4, "know": 1, "lazy": 3, "learning": 1, "let": 3, "lets": 2, "licensed": 1, "like": 2, "link": 2, "link\\": 1, "links": 4, "links\\": 2, "livereload": 2, "livereload\\": 1, "ll": 4, "loader": 2, "loader\\": 1, "loaderdata\\": 1, "loading": 3, "loading\\": 1, "local": 3, "localhost\\": 1, "makes": 1, "management": 4, "management\\": 2, "manifest": 2, "manifest\\\\\\": 1, "manual": 3, "mappings": 2, "match": 4, "matches": 2, "math": 1, "may": 2, "md\\": 152, "mdx": 3, "mdx\\": 1, "menu\\": 1, "merged": 2, "meta": 4, "meta\\": 2, "migrating": 4, "minimatch": 1, "minimum": 2, "mitedit": 1, "mode": 3, "mode\\": 1, "module": 8, "module\\": 1, "moduleaction": 2, "modules": 6, "modules\\": 3, "most": 1, "name": 2, "naming": 2, "naming\\": 1, "navlink": 2, "navlink\\": 1, "need": 7, "nest": 2, "nesting": 2, "network": 3, "new": 2, "new\\": 1, "nextsibling": 2, "nodetype": 1, "noindex\\": 1, "not": 3, "note": 2, "null": 1, "number": 1, "of": 17, "on": 2, "once": 1, "one": 1, "open": 1, "opt-into": 2, "optimization": 2, "optimization\\": 1, "option": 4, "option\\u003c/a\\u003e": 2, "optional": 4, "or": 3, "order\\": 1, "other": 5, "other-api/adapter": 1, "other-api/adapter\\": 1, "other-api/create-remix": 1, "other-api/create-remix\\": 1, "other-api/dev": 1, "other-api/dev\\": 1, "other-api/index": 1, "other-api/node": 1, "other-api/node\\": 1, "other-api/serve": 1, "other-api/serve\\": 1, "other-api/testing": 1, "other-api/testing\\": 1, "other-api\\": 1, "out": 1, "outlet": 2, "outlet\\": 1, "output": 2, "param": 2, "param\\": 1, "parent": 2, "parentnode": 2, "parse": 1, "passed": 2, "path": 11, "path\\u003c/a\\u003e": 1, "path\\u003c/span\\u003e\\\\\\": 1, "path\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "paths": 4, "pending": 3, "performance": 2, "performance\\": 1, "pipethrough": 1, "please": 2, "plugin": 5, "plugins": 6, "positions": 2, "postcss": 2, "postcss\\": 1, "prefetchpagelinks": 2, "prefetchpagelinks\\": 1, "presets": 4, "presets\\": 1, "presets\\\\\\": 1, "previoussibling": 1, "primary": 1, "progressive": 3, "project": 7, "provide": 2, "providers": 2, "public": 2, "pull": 1, "query": 3, "questions": 1, "quick": 1, "quickest": 1, "quickly": 1, "random": 1, "rather": 2, "react": 11, "react-router-scroll-positions": 1, "readablestream": 1, "reading": 2, "recommend": 2, "redirect": 2, "redirect\\": 1, "redirectdocument": 2, "redirectdocument\\": 1, "refer": 2, "regular": 3, "related": 1, "relative": 10, "relative/path": 1, "released": 2, "remix": 28, "remix-vite-plugin-config\\": 1, "remix-vite-plugin-config\\\\\\": 1, "remix/manifest": 2, "remix\\": 2, "removechild": 2, "removeitem": 1, "replace": 2, "replace\\": 1, "replacement": 2, "replacement\\": 1, "replacestate": 1, "request": 1, "resource": 3, "resources": 1, "restorekey": 2, "resubmissions": 2, "resubmissions\\": 1, "return": 2, "rocking": 1, "rolling": 1, "root": 7, "root\\": 1, "route": 26, "route/action": 1, "route/action\\": 1, "route/client-action": 1, "route/client-action\\": 1, "route/client-loader": 1, "route/client-loader\\": 1, "route/component": 1, "route/component\\": 1, "route/error-boundary": 1, "route/error-boundary\\": 1, "route/handle": 1, "route/handle\\": 1, "route/headers": 1, "route/headers\\": 1, "route/hydrate-fallback": 1, "route/hydrate-fallback\\": 1, "route/index": 1, "route/links": 1, "route/links\\": 1, "route/loader": 1, "route/loader\\": 1, "route/meta": 1, "route/meta\\": 1, "route/should-revalidate": 1, "route/should-revalidate\\": 1, "route0": 2, "route1": 2, "route2": 2, "route\\": 1, "routediscovery": 1, "router": 11, "router\\": 2, "routes": 20, "routes/docs": 3, "routes/docs\\": 1, "routes\\": 2, "routes\\\\\\": 1, "run/docs/file-conventions/vite-config": 1, "run\\": 1, "running": 1, "runtimes": 3, "scripts": 2, "scripts\\": 1, "scrollrestoration": 2, "scrollrestoration\\": 1, "scrollto": 1, "second": 2, "server": 26, "server\\": 3, "serverbuildfile": 3, "serverbuildfile\\\\\\": 1, "serverbundles": 1, "serverbundles\\\\\\": 1, "servermoduleformat": 1, "servermoduleformat\\\\\\": 1, "sessions": 2, "sessions\\": 1, "sessionstorage": 2, "set": 2, "sets": 2, "shopify": 1, "should": 2, "shouldrevalidate": 2, "shouldrevalidate\\": 1, "simplifying": 1, "since": 2, "single": 3, "siteurl\\": 1, "slice": 1, "slug\\": 1, "some/": 1, "some/other/file": 1, "some/route/file": 1, "spa": 3, "ssr": 1, "stack": 2, "stages": 1, "start": 4, "start/changelog": 1, "start/changelog\\": 1, "start/community": 1, "start/community\\": 1, "start/future-flags": 1, "start/future-flags\\": 1, "start/index": 1, "start/quickstart": 1, "start/quickstart\\": 1, "start/tutorial": 1, "start/tutorial\\": 1, "start/v2": 1, "start/v2\\": 1, "start\\": 1, "started\\": 1, "startedquick": 2, "state": 6, "still": 4, "storagekey2": 3, "storedy": 3, "strategy": 2, "strategy\\": 1, "stream": 2, "streamcontroller": 3, "streaming": 2, "streaming\\": 1, "style=\\\\\\": 85, "styling/bundling": 1, "styling/bundling\\": 1, "styling/css": 1, "styling/css-imports": 1, "styling/css-imports\\": 1, "styling/css-in-js": 1, "styling/css-in-js\\": 1, "styling/css-modules": 1, "styling/css-modules\\": 1, "styling/css\\": 1, "styling/index": 1, "styling/postcss": 1, "styling/postcss\\": 1, "styling/tailwind": 1, "styling/tailwind\\": 1, "styling/vanilla-extract": 1, "styling/vanilla-extract\\": 1, "styling\\": 2, "stylingcss": 2, "support": 3, "support\\": 1, "supports": 2, "tabindex=\\\\\\": 14, "tailwind": 2, "tailwind\\": 1, "technical": 3, "technologies\\": 1, "templates": 5, "templates\\": 1, "textencoderstream": 1, "than": 2, "thank": 1, "that": 6, "the": 63, "this": 9, "those": 2, "through": 3, "title\\": 1, "tls": 2, "tls\\": 1, "to": 62, "to\\\\n\\u003ccode\\u003e\\\\\\": 2, "to\\\\nfiles": 1, "toc\\": 1, "tools": 2, "topics\\": 1, "topicsintroduction": 2, "tostring": 1, "treated": 2, "true": 6, "true\\\\\\": 20, "try": 1, "ts": 4, "ts\\": 1, "ts\\\\\\": 6, "ts\\u003c/h1\\u003e\\\\n\\u003cp\\u003e\\u003cdocs-warning\\u003eif": 1, "tsgetting": 1, "tsx": 2, "tsx\\u003c/span\\u003e\\\\\\": 2, "tutorial": 3, "typeof": 1, "typescript": 4, "typescript\\": 1, "typescript\\\\\\": 4, "ui": 2, "ui\\": 1, "under": 1, "unstable_createfileuploadhandler": 2, "unstable_createfileuploadhandler\\": 1, "unstable_creatememoryuploadhandler": 2, "unstable_creatememoryuploadhandler\\": 1, "unstable_optimizedeps": 1, "unstable_parsemultipartformdata": 2, "unstable_parsemultipartformdata\\": 1, "unstable_subresourceintegrity": 1, "unstable_useprompt": 2, "unstable_useprompt\\": 1, "upgrading": 3, "uploads": 2, "uploads\\": 1, "use": 5, "use\\u003c/span\\u003e\\\\n\\u003c/span\\u003e\\u003cspan": 1, "useactiondata\\": 1, "useasyncerror": 2, "useasyncerror\\": 1, "useasyncvalue\\": 1, "usebeforeunload\\": 1, "useblocker": 2, "useblocker\\": 1, "usefetcher": 2, "usefetcher\\": 1, "usefetchers": 2, "usefetchers\\": 1, "useformaction": 2, "useformaction\\": 1, "useful": 2, "usehref": 2, "usehref\\": 1, "useloaderdata": 2, "useloaderdata\\": 1, "uselocation": 2, "uselocation\\": 1, "usematches": 2, "usematches\\": 1, "usenavigate": 2, "usenavigate\\": 1, "usenavigation": 2, "usenavigation\\": 1, "usenavigationtype": 2, "usenavigationtype\\": 1, "useoutlet": 2, "useoutlet\\": 1, "useoutletcontext": 2, "useoutletcontext\\": 1, "useparams": 2, "useparams\\": 1, "useresolvedpath": 2, "useresolvedpath\\": 1, "userevalidator": 2, "userevalidator\\": 1, "userouteerror\\": 1, "userouteloaderdata\\": 1, "uses": 2, "usesearchparams": 2, "usesearchparams\\": 1, "usesubmit": 2, "usesubmit\\": 1, "useviewtransitionstate": 2, "useviewtransitionstate\\": 1, "using": 7, "utilities\\": 1, "utilitiescookies": 2, "utils/cookies": 1, "utils/cookies\\": 1, "utils/create-remix-stub": 1, "utils/create-remix-stub\\": 1, "utils/data": 1, "utils/data\\": 1, "utils/defer": 1, "utils/defer\\": 1, "utils/index": 1, "utils/is-route-error-response": 1, "utils/is-route-error-response\\": 1, "utils/json": 1, "utils/json\\": 1, "utils/parse-multipart-form-data": 1, "utils/parse-multipart-form-data\\": 1, "utils/redirect": 1, "utils/redirect\\": 1, "utils/redirectdocument": 1, "utils/redirectdocument\\": 1, "utils/replace": 1, "utils/replace\\": 1, "utils/sessions": 1, "utils/sessions\\": 1, "utils/unstable-create-file-upload-handler": 1, "utils/unstable-create-file-upload-handler\\": 1, "utils/unstable-create-memory-upload-handler": 1, "utils/unstable-create-memory-upload-handler\\": 1, "utils\\": 1, "v2": 2, "v2\\": 1, "v7": 2, "v8_middleware": 1, "v8_splitroutemodules": 1, "v8_viteenvironmentapi": 1, "valid": 2, "validation": 2, "validation\\": 1, "vanilla": 3, "var": 87, "variables": 2, "variables\\": 1, "via": 6, "view": 2, "vite": 26, "vite\\": 1, "viteconfigts\\\\\\": 1, "viteplugin": 3, "vs": 6, "walk": 1, "want": 4, "way": 1, "we": 4, "when": 3, "whether": 1, "which": 2, "while": 3, "why": 1, "will": 8, "window": 11, "wish": 2, "with": 8, "work": 2, "write": 2, "writes": 2, "writes\\": 1, "you": 22, "your": 19, "||": 3, "©": 1, "•docs": 1, "🆕@remix-run/": 2, "🆕useasyncvalue": 2, "🆕usebeforeunload": 2, "🆕userouteerror": 2, "🆕userouteloaderdata": 2 }, "length": 5845 }, { "id": "b800bd36df5d24e3c0190024", "doc_id": "34552a44dcf700c6ebb11a0a", "title": "websocket", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/advanced/websocket.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/websocket.json", "content": "--- title: WebSocket endpoint use_cases: \u003e- real-time updates, chat applications, live notifications, multiplayer games, collaborative editing, streaming data tags: - websocket - real-time - streaming - experimental - server - events version: '1.0' description: \u003e- Set up WebSocket endpoints in SolidStart for real-time bidirectional communication. Handle connections, messages, and events. --- WebSocket endpoint may be included by passing the ws handler file you specify in your start config. Note that this feature is [experimental on the Nitro server](https://nitro.build/guide/websocket#opt-in-to-the-experimental-feature) and its config may change in future releases of SolidStart. Use it with caution. ```ts title=\"./app.config.ts\" import { defineConfig } from \"@solidjs/start/config\"; export default defineConfig({ server: { experimental: { websocket: true, }, }, }).addRouter({ name: \"ws\", type: \"http\", handler: \"./src/ws.ts\", target: \"server\", base: \"/ws\", }); ``` Inside the ws file, you can export an eventHandler function to manage WebSocket connections and events: ```tsx title=\"./src/ws.ts\" import { eventHandler } from \"vinxi/http\"; export default eventHandler({ handler() {}, websocket: { async open(peer) { console.log(\"open\", peer.id, peer.url); }, async message(peer, msg) { const message = msg.text(); console.log(\"msg\", peer.id, peer.url, message); }, async close(peer, details) { console.log(\"close\", peer.id, peer.url); }, async error(peer, error) { console.log(\"error\", peer.id, peer.url, error); }, }, }); ```", "term_freq": { "---": 2, "//github": 1, "//nitro": 1, "/app": 1, "/src/ws": 2, "/ws": 1, "\u003e-": 2, "@solidjs/start/config": 1, "addrouter": 1, "an": 1, "and": 3, "applications": 1, "async": 4, "base": 1, "be": 1, "bidirectional": 1, "build/guide/websocket#opt-in-to-the-experimental-feature": 1, "by": 1, "can": 1, "caution": 1, "change": 1, "chat": 1, "close": 2, "collaborative": 1, "com/solidjs/solid-docs/blob/head/src/routes/solid-start/advanced/websocket": 1, "communication": 1, "config": 3, "connections": 2, "console": 4, "const": 1, "data": 1, "default": 2, "defineconfig": 2, "description": 1, "details": 1, "editing": 1, "endpoint": 2, "endpoints": 1, "error": 4, "eventhandler": 3, "events": 3, "experimental": 3, "export": 3, "feature": 1, "file": 2, "for": 1, "from": 2, "function": 1, "future": 1, "games": 1, "github-document": 1, "handle": 1, "handler": 3, "http": 1, "https": 2, "id": 4, "import": 2, "in": 3, "included": 1, "inside": 1, "is": 1, "it": 1, "its": 1, "live": 1, "log": 4, "manage": 1, "may": 2, "mdx": 1, "message": 3, "messages": 1, "msg": 3, "multiplayer": 1, "name": 1, "nitro": 1, "note": 1, "notifications": 1, "of": 1, "on": 1, "open": 2, "passing": 1, "peer": 12, "real-time": 3, "releases": 1, "server": 4, "set": 1, "solidstart": 2, "specify": 1, "start": 1, "streaming": 2, "tags": 1, "target": 1, "text": 1, "that": 1, "the": 3, "this": 1, "title": 1, "title=": 2, "to": 1, "true": 1, "ts": 4, "tsx": 1, "type": 1, "up": 1, "updates": 1, "url": 4, "use": 1, "use_cases": 1, "version": 1, "vinxi/http": 1, "websocket": 8, "with": 1, "ws": 3, "you": 2, "your": 1 }, "length": 200 }, { "id": "5c26c36555772359460ae6f8", "doc_id": "05854ac817c704a1fa5d9330", "title": "WRITING", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/WRITING.md", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/writing.json", "content": "# Solid Docs Writing Guide ## Introduction Thank you for your interest in writing for Solid. This writing guide is in-progress, so please be sure to check it often as we adjust things. We welcome suggestions and feedback. Bear in mind that the following is a general guideline, but we will use it as a framework to edit any incoming contributions. This is to ensure that Solid's documents remain consistent in tone, voice, structure, and conventions. ## Visual style Solid wants to maintain a consistent brand across all of its documentation. We want to present a consistent and professional face to our users and partners. As such, we have several guidelines that will dictate how your contributions will look once published. While it would be great if you followed these exactly — and our contributing editors would sure love you for it — we know that you'd probably prefer to focus on getting great Solid content ready to go. So please try to follow this visual framework as best as you can to make the process as smooth as possible. Of course, trends in documentation styling change over time, so we're fully aware that these guidelines will likely shift as we consider adopting new best practices. ### Layout The bulk of your contributions will be the body copy. But beyond just your written content, there are several other things to consider while working on your document. #### Tables Though not used all that often, tables are an important tool for several reasons: - They break up text. - They offer clear information to the reader. - They are easy to look through and understand. Solid uses Markdown for tables, so here's how to make one. 1. Start with a vertical line, also called a pipe: `|`. 2. Insert your first heading and end with another pipe. 3. Write the next heading and end it with a pipe. Repeat until you have your column headings. 4. One line under the first column heading, insert at least three dashes: `---`. 5. Repeat this for all of your headings. 6. To create the cells, start a new line with a pipe, then insert the content and surround it in spaces, end the cell with a pipe. 7. To complete the row, create a new cell on the same line. See below for an example of what this would look like in raw Markdown. ``` | Month | Day | | --- | --- | | January | 1 | | February | 2 | | March | 3 | |April | 4 | ``` #### Asides Asides serve as callout boxes in Solid's documentation. They represent a section of the document that is related to the content surrounding the aside, but not directly relevant to the page. They work well with explaining how Solid differs from other popular frameworks, referring to other points in the documentation, or serving as a tangential note. We ask that you use them sparingly. 1. To use an aside, you must first import the correct component. 2. Use the following command in your terminal. (Remember to be in the cloned Solid repo directory.) 3. Once you have the Aside component imported, simply follow the below example for how to add one to your document. ``` :::note content here ::: ``` ### Code examples Solid's documentation contains example code, like you've seen here in this guide. Markdown lets you create inline code and code blocks. If you want to call out a single command or a file path, surround the text with single back ticks: `. Here's an example in raw Markdown: ``` `npm` ``` If, however, you need more than that, then a code block is more appropriate. Start with three back ticks, ```, write your code, then close the block with three more back ticks. Here's an example in raw Markdown: ```` ```bash npm install ```` Code examples are vital to providing users with quick tips on how to use Solid. Knowing when to use inline code versus code blocks can further the understanding of the readers and users alike. ### Images Good documentation takes advantage of images, such as screenshots and graphics, to expand upon the written content. Images should not introduce or explain something new. They are used in addition to the writing, such as increasing a reader's understanding, communicating ideas, emphasizing points, or providing a comparison. To maintain some consistency, we would prefer that you stick to the PNG format so that the images scale well at all screen sizes and resolutions. Please avoid using GIFs if at all possible because they interfere with accessibility. Finally, we strongly request that you use alt text with your images. This is very important for our accessibility initiatives. If you are adding an image to a page, you can do that using HTML syntax. Here's an example of how to do that: ``` \u003cimg src=\"IMAGE.png\" alt=\"alt text here\" /\u003e ``` ## Organization Now that we've laid out how we'd like your contribution to look, we'd like to take a moment to discuss how we'd like to see it organized. Please note that, for editing purposes, **each sentence gets its own line**. Paragraphs should have two lines between them. ### Headings Headings act as the primary means of document organization. Solid uses Markdown, which means headings are defined by hashes `#` followed by a space. For each additional hash, you go down one heading level. Here's an example of a Heading 1 (H1) and a Heading 2 (H2) in raw Markdown. ``` # Solid documentation ## Introduction ``` We primarily use Headings 1 through 3. However, headings can go up to 6. Note we rarely use Headings 5 and 6. Below is a quick breakdown on the different headings. ``` H1: Title H2: Main sections H3: Subsections H4: Small details you would like to call out H5/H6: Advanced concepts ``` ### Lists You will come across two types of lists in your contributions, ordered and unordered. Here's a breakdown on when to use each one. Ordered: This is for step-based, how-to content. You need an ordered list when the order or hierarchy is important. Unordered: Unordered lists help break up content with non-hierarchical items. You will likely use them when writing exceptions and emphasizing important ideas. In addition to these two types, you might need to use a nested list. This is for when a listed item has a sub-part to it that is relevant to its content. Finally, you may come across a point where you need to make a note on a listed item. This would be an area where a nested point would not be appropriate. These notes might link out to another part of the documentation or a piece of reference material; or, they may also inform the reader about a warning or a gotcha. (Gotchas are unexpected and/or unreasonable outcomes that the reader should know about. An example is a command that is similar to the one you listed, but using it would cause some kind of issue.) ### Page linking We would prefer you to keep page linking in mind while you're working on your contribution. The following two points are what you should pay attention to: 1. Interlink when you refer to a topic that has its own page. This makes it possible for the user to easily seek additional information. 2. Be descriptive with the linked text. Do not use \"click here\" or any variation therein, as this is not a best practice for accessibility. Links are written in Markdown. Here's an example of what that looks like: ``` Do: Check the [Solid homepage](https://www.solidjs.com) Don't: Click [here](https://www.solidjs.com) to go to the Solid homepage. ``` ## Reference pages Reference pages document the API surface. Keep them concise and easy to scan. Include: - Imports - Signatures - Parameters - Return values - Short examples Avoid: - Narrative context or “why” - Usage guidance (“when to use”, best practices) - Long notes If explanation is needed, link to a guide or how-to page. ## Voice and tone So far, we've dealt with how your contributions should look and function. As important as all of that is, the core part of your documents is the writing itself, so we want to discuss how we would like our documentation to read. ### Approachable Modern documentation has shifted toward a less formal tone to great effect. Like modern documents, Solid aims to provide a friendly and approachable tone. Of course, your contributions should still maintain a technical focus to provide the reader with the information that they're looking for. We encourage you to pay attention to how [Google](https://developers.google.com/style/tone) defines a friendly tone. \u003e In your documents, aim for a voice and tone that's conversational, friendly, and respectful without being overly colloquial or frivolous; a voice that's casual and natural and approachable, not pedantic or pushy. Try to sound like a knowledgeable friend who understands what the developer wants to do. The old way of writing documentation — the dry, formal, and very rigid method — created a divide between the reader and writer. We don't want that here. We want our users to enjoy reading Solid's docs so that they retain the information they came here for. This requires writing engaging content that is also approachable for most skill levels. The tricky part for you is determining that baseline skill level. Solid caters to a more technically advanced audience, the members of which are more likely to know what you might consider to be basic knowledge. However, in the introductory documentation especially, we should be offering written work that is approachable even to beginners. We'll discuss more what that looks like later, but just remember these two questions when considering your contribution's approachability. Who is the document for? What would I be looking for if I was coming to this document for the first time? Please keep in mind, do not write like you are present with the user. ``` - Do: Visit Solid's homepage. - Don't: We're going to visit Solid's homepage. ``` When writing steps in a how-to section, please start sentences with a verb. ``` - Do: Download npm. - Don't: You will/should download npm. ``` ### Accessible Accessibility has taken a front seat in most aspects of technology in recent years, including documentation. Solid should be accessible to anyone who wishes to use it, meaning that your writing has to meet some basic standards. Some accessibility comes down to visual style, as we discussed. However, it goes hand-in-hand with inclusiveness (which we'll get to next), so there is some overlap between the two. For now, we ask that you understand that Solid wants to ensure that everyone can read our documentation. What does that look like? The first step towards accessibility is using proper English grammar. This is especially helpful for those users who utilize screen readers. Another way you can help the users of assistive technology is by keeping your paragraphs reasonably short. A good rule of thumb is no more than four sentences, or four to five lines of text. Shorter paragraphs help readers of all abilities, since walls of text can discourage in-depth reading and understanding. You can once again practice empathy here. What would you like to read? As discussed in the Organization section, ensuring a strong layout is key to accessible documentation. We encourage you to remember that your contributions should be organized logically. Headings that give a strong indicator of the section's topic, as well as descriptive hyperlinks, go a very long way in helping our readers navigate our docs. ### Inclusive Great documentation strives to be as inclusive for as many people as possible. That includes those from different backgrounds, such as varying countries and languages. As Solid grows, so will its audience, and therefore we should work hard to ensure that everyone feels included while reading our docs. What does inclusive language look like? First, we want to focus on using plain, simple English. That means avoiding the use of jargon wherever possible. (We know that in more advanced documents, this becomes nearly impossible.) In cases where jargon is necessary, be sure the document contains at least one brief description upon the first mention. For example, if you want to use an acronym, spell it out first with the acronym in parentheses after. From then on, you can use the acronym in that document. Plain and simple English also means avoiding contractions, as these are not always easily understood by those for whom English is not the first language. We should also avoid using expressions or figures of speech wherever possible; remember, not everyone will understand what they mean. Secondly, inclusive language means remaining as gender-neutral as possible. Instead of defaulting to one gender, use a gender-neutral word instead. As mentioned previously, we want to use friendly, second-person language to help connect our readers with our documentation. Doing so makes it fairly simple to avoid gendered words. Use your own common sense to determine which word to use, but if you slip up, an editor should catch it. Writing inclusively also entails avoiding ableist language. That usually comes about in certain turns of phrase. Alternatives to ableist words will go a long way to ensuring our documentation meets the needs of more people. Similarly, we should not use divisive terms to get our point across. That means steering clear of socially- and racially-charged language for concepts, such as \"blacklist\" or \"first-class.\" We have chosen to use American English in our documentation, so please remember that especially with spelling. Despite us aiming for an informal tone, that does not mean that we want to get too lax in our language. We should try to avoid too many references to a specific culture (e.g. American). Solid has a large North American audience, but our readers are not exclusive to that region. Please keep this in mind before you use a certain term or phrase. When it comes to the topic of inclusion and inclusive language, empathy is critical. Once again, ask yourself throughout your writing process: Who is this document for? For more on what inclusive language looks like, [Google once again has a great breakdown](https://developers.google.com/style/inclusive-documentation). ## Solid Terms This is a list of Solid-specific words and what they mean. In the second column, we put: - Terms that mean the same thing but shouldn't be used for the sake of consistency. - Terms that mean something different and are easy to confuse with the term at hand These are technical; use them with the default assumption that the reader doesn't know what they mean. | Terms to use | Terms not to use | Definition | | --------------------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Computation, reactive computation | _Not to be confused with_: computed | A scope that automatically reruns when its dependencies change (it doesn't necessarily _have_ dependencies). | | Core primitive | API function | A primitive provided by the Solid core library; this typically provides reactive behaviors but not necessarily ( `createContext` does not). | | Custom primitive | hook | A primitive created outside of the Solid core library; i.e., a function that provides a composable piece of functionality. | | Ownership, owns | | A one-to-many relationship between computations; if a computation \"owns\" one or more other computations, all its owned computations are cleaned up when it is cleaned up. | | Primitive | Hook | A function that serves as a building block of reactivity or behavior. usually begins with `create` or `use`. | | Reactive value | Signal (don't use to describe a general reactive value) | A value that can be tracked (includes signals, memos, properties of `props` and stores). | | Reactivity | | A system for writing expressions or behaviors that depend on certain values and execute when those values change. | | Root | | A computation that has no owner. created by `createRoot`. | | Scope | _Not to be confused with:_ root, effect (specific kinds of scopes) | A body of a function (a chunk of code). | | Solid | SolidJS (unless outside the community/internal writings) | A JavaScript framework made up of a library (providing primitives and UI utilities) and a compiler (allowing you to write in JSX). Its differentiating feature is its reactivity system. | | Tracking scope | Tracking context, reactive context, reactive scope, reactive root | A scope that, when run, Solid automatically tracks all read signals |", "term_freq": { "##": 7, "###": 9, "####": 2, "**each": 1, "---": 3, "---------------------------------": 1, "------------------------------------------------------------------": 1, "----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------": 1, "//developers": 2, "//github": 1, "//www": 2, "/\u003e": 1, "\u003cimg": 1, "_have_": 1, "_not": 2, "abilities": 1, "ableist": 2, "about": 3, "accessibility": 6, "accessible": 3, "acronym": 3, "across": 4, "act": 1, "add": 1, "adding": 1, "addition": 2, "additional": 2, "adjust": 1, "adopting": 1, "advanced": 3, "advantage": 1, "after": 1, "again": 3, "aim": 1, "aiming": 1, "aims": 1, "alike": 1, "all": 9, "allowing": 1, "also": 6, "alt": 2, "alt=": 1, "alternatives": 1, "always": 1, "american": 3, "an": 15, "and": 39, "and/or": 1, "another": 3, "any": 2, "anyone": 1, "api": 2, "approachability": 1, "approachable": 5, "appropriate": 2, "are": 17, "area": 1, "as": 31, "aside": 3, "asides": 2, "ask": 3, "aspects": 1, "assistive": 1, "assumption": 1, "at": 5, "attention": 2, "audience": 3, "automatically": 2, "avoid": 5, "avoiding": 3, "aware": 1, "back": 3, "backgrounds": 1, "baseline": 1, "bash": 1, "basic": 2, "be": 18, "bear": 1, "because": 1, "becomes": 1, "before": 1, "beginners": 1, "begins": 1, "behavior": 1, "behaviors": 2, "being": 1, "below": 3, "best": 4, "between": 4, "beyond": 1, "blacklist": 1, "block": 3, "blocks": 2, "body": 2, "boxes": 1, "brand": 1, "break": 2, "breakdown": 3, "brief": 1, "building": 1, "bulk": 1, "but": 9, "by": 6, "call": 2, "called": 1, "callout": 1, "came": 1, "can": 10, "cases": 1, "casual": 1, "catch": 1, "caters": 1, "cause": 1, "cell": 2, "cells": 1, "certain": 3, "change": 3, "check": 2, "chosen": 1, "chunk": 1, "cleaned": 2, "clear": 2, "click": 2, "cloned": 1, "close": 1, "code": 10, "colloquial": 1, "column": 3, "com": 2, "com/solidjs/solid-docs/blob/head/writing": 1, "com/style/inclusive-documentation": 1, "com/style/tone": 1, "come": 2, "comes": 3, "coming": 1, "command": 3, "common": 1, "communicating": 1, "community/internal": 1, "comparison": 1, "compiler": 1, "complete": 1, "component": 2, "composable": 1, "computation": 4, "computations": 3, "computed": 1, "concepts": 2, "concise": 1, "confuse": 1, "confused": 2, "connect": 1, "consider": 3, "considering": 1, "consistency": 2, "consistent": 3, "contains": 2, "content": 10, "context": 3, "contractions": 1, "contributing": 1, "contribution": 3, "contributions": 7, "conventions": 1, "conversational": 1, "copy": 1, "core": 4, "correct": 1, "countries": 1, "course": 2, "create": 4, "createcontext": 1, "created": 3, "createroot": 1, "critical": 1, "culture": 1, "custom": 1, "dashes": 1, "day": 1, "dealt": 1, "default": 1, "defaulting": 1, "defined": 1, "defines": 1, "definition": 1, "depend": 1, "dependencies": 2, "describe": 1, "description": 1, "descriptive": 2, "despite": 1, "details": 1, "determine": 1, "determining": 1, "developer": 1, "dictate": 1, "different": 3, "differentiating": 1, "differs": 1, "directly": 1, "directory": 1, "discourage": 1, "discuss": 3, "discussed": 2, "divide": 1, "divisive": 1, "do": 8, "docs": 4, "document": 10, "documentation": 19, "documents": 5, "does": 4, "doesn": 2, "doing": 1, "don": 5, "down": 2, "download": 2, "dry": 1, "each": 2, "easily": 2, "easy": 3, "edit": 1, "editing": 1, "editor": 1, "editors": 1, "effect": 2, "empathy": 2, "emphasizing": 2, "encourage": 2, "end": 3, "engaging": 1, "english": 5, "enjoy": 1, "ensure": 3, "ensuring": 2, "entails": 1, "especially": 3, "even": 1, "everyone": 3, "exactly": 1, "example": 10, "examples": 3, "exceptions": 1, "exclusive": 1, "execute": 1, "expand": 1, "explain": 1, "explaining": 1, "explanation": 1, "expressions": 2, "face": 1, "fairly": 1, "far": 1, "feature": 1, "february": 1, "feedback": 1, "feels": 1, "figures": 1, "file": 1, "finally": 2, "first": 9, "first-class": 1, "five": 1, "focus": 3, "follow": 2, "followed": 2, "following": 3, "for": 34, "formal": 2, "format": 1, "four": 2, "framework": 3, "frameworks": 1, "friend": 1, "friendly": 4, "frivolous": 1, "from": 3, "front": 1, "fully": 1, "function": 5, "functionality": 1, "further": 1, "gender": 1, "gender-neutral": 2, "gendered": 1, "general": 2, "get": 3, "gets": 1, "getting": 1, "gifs": 1, "github-document": 1, "give": 1, "go": 6, "goes": 1, "going": 1, "good": 2, "google": 4, "gotcha": 1, "gotchas": 1, "grammar": 1, "graphics": 1, "great": 5, "grows": 1, "guidance": 1, "guide": 4, "guideline": 1, "guidelines": 2, "h1": 2, "h2": 2, "h3": 1, "h4": 1, "h5/h6": 1, "hand": 1, "hand-in-hand": 1, "hard": 1, "has": 8, "hash": 1, "hashes": 1, "have": 5, "heading": 6, "headings": 10, "help": 4, "helpful": 1, "helping": 1, "here": 15, "hierarchy": 1, "homepage": 4, "hook": 2, "how": 11, "how-to": 3, "however": 4, "html": 1, "https": 5, "hyperlinks": 1, "ideas": 2, "if": 10, "image": 2, "images": 5, "import": 1, "important": 5, "imported": 1, "imports": 1, "impossible": 1, "in": 37, "in-depth": 1, "in-progress": 1, "include": 1, "included": 1, "includes": 2, "including": 1, "inclusion": 1, "inclusive": 6, "inclusively": 1, "inclusiveness": 1, "incoming": 1, "increasing": 1, "indicator": 1, "inform": 1, "informal": 1, "information": 4, "initiatives": 1, "inline": 2, "insert": 3, "install": 1, "instead": 2, "interest": 1, "interfere": 1, "interlink": 1, "introduce": 1, "introduction": 2, "introductory": 1, "is": 34, "issue": 1, "it": 18, "item": 2, "items": 1, "its": 9, "itself": 1, "january": 1, "jargon": 2, "javascript": 1, "jsx": 1, "just": 2, "keep": 4, "keeping": 1, "key": 1, "kind": 1, "kinds": 1, "know": 5, "knowing": 1, "knowledge": 1, "knowledgeable": 1, "laid": 1, "language": 9, "languages": 1, "large": 1, "later": 1, "lax": 1, "layout": 2, "least": 2, "less": 1, "lets": 1, "level": 2, "levels": 1, "library": 3, "like": 16, "likely": 3, "line": 4, "line**": 1, "lines": 2, "link": 2, "linked": 1, "linking": 2, "links": 1, "list": 3, "listed": 3, "lists": 3, "ll": 2, "logically": 1, "long": 3, "look": 7, "looking": 2, "looks": 3, "love": 1, "made": 1, "main": 1, "maintain": 3, "make": 3, "makes": 2, "many": 2, "march": 1, "markdown": 8, "material": 1, "may": 2, "md": 1, "mean": 6, "meaning": 1, "means": 6, "meet": 1, "meets": 1, "members": 1, "memos": 1, "mention": 1, "mentioned": 1, "method": 1, "might": 3, "mind": 4, "modern": 2, "moment": 1, "month": 1, "more": 11, "most": 2, "must": 1, "narrative": 1, "natural": 1, "navigate": 1, "nearly": 1, "necessarily": 2, "necessary": 1, "need": 4, "needed": 1, "needs": 1, "nested": 2, "new": 4, "next": 2, "no": 2, "non-hierarchical": 1, "north": 1, "not": 17, "note": 5, "notes": 2, "now": 2, "npm": 4, "of": 45, "offer": 1, "offering": 1, "often": 2, "old": 1, "on": 12, "once": 5, "one": 9, "one-to-many": 1, "or": 21, "order": 1, "ordered": 3, "organization": 3, "organized": 2, "other": 4, "our": 16, "out": 5, "outcomes": 1, "outside": 2, "over": 1, "overlap": 1, "overly": 1, "own": 3, "owned": 1, "owner": 1, "ownership": 1, "owns": 2, "page": 6, "pages": 2, "paragraphs": 3, "parameters": 1, "parentheses": 1, "part": 3, "partners": 1, "path": 1, "pay": 2, "pedantic": 1, "people": 2, "phrase": 2, "piece": 2, "pipe": 5, "plain": 2, "please": 8, "png": 2, "point": 3, "points": 3, "popular": 1, "possible": 7, "practice": 2, "practices": 2, "prefer": 3, "present": 2, "previously": 1, "primarily": 1, "primary": 1, "primitive": 5, "primitives": 1, "probably": 1, "process": 2, "professional": 1, "proper": 1, "properties": 1, "props": 1, "provide": 2, "provided": 1, "provides": 2, "providing": 3, "published": 1, "purposes": 1, "pushy": 1, "put": 1, "questions": 1, "quick": 2, "racially-charged": 1, "rarely": 1, "raw": 4, "re": 4, "reactive": 7, "reactivity": 3, "read": 4, "reader": 7, "readers": 6, "reading": 3, "ready": 1, "reasonably": 1, "reasons": 1, "recent": 1, "refer": 1, "reference": 3, "references": 1, "referring": 1, "region": 1, "related": 1, "relationship": 1, "relevant": 2, "remain": 1, "remaining": 1, "remember": 5, "repeat": 2, "repo": 1, "represent": 1, "request": 1, "requires": 1, "reruns": 1, "resolutions": 1, "respectful": 1, "retain": 1, "return": 1, "rigid": 1, "root": 3, "row": 1, "rule": 1, "run": 1, "sake": 1, "same": 2, "scale": 1, "scan": 1, "scope": 5, "scopes": 1, "screen": 2, "screenshots": 1, "seat": 1, "second": 1, "second-person": 1, "secondly": 1, "section": 4, "sections": 1, "see": 2, "seek": 1, "seen": 1, "sense": 1, "sentence": 1, "sentences": 2, "serve": 1, "serves": 1, "serving": 1, "several": 3, "shift": 1, "shifted": 1, "short": 2, "shorter": 1, "should": 14, "shouldn": 1, "signal": 1, "signals": 2, "signatures": 1, "similar": 1, "similarly": 1, "simple": 3, "simply": 1, "since": 1, "single": 2, "sizes": 1, "skill": 2, "slip": 1, "small": 1, "smooth": 1, "so": 12, "socially-": 1, "solid": 29, "solid-specific": 1, "solidjs": 3, "some": 5, "something": 2, "sound": 1, "space": 1, "spaces": 1, "sparingly": 1, "specific": 2, "speech": 1, "spell": 1, "spelling": 1, "src=": 1, "standards": 1, "start": 4, "steering": 1, "step": 1, "step-based": 1, "steps": 1, "stick": 1, "still": 1, "stores": 1, "strives": 1, "strong": 2, "strongly": 1, "structure": 1, "style": 2, "styling": 1, "sub-part": 1, "subsections": 1, "such": 5, "suggestions": 1, "sure": 3, "surface": 1, "surround": 2, "surrounding": 1, "syntax": 1, "system": 2, "tables": 3, "take": 1, "taken": 1, "takes": 1, "tangential": 1, "technical": 2, "technically": 1, "technology": 2, "term": 2, "terminal": 1, "terms": 6, "text": 7, "than": 2, "thank": 1, "that": 59, "the": 80, "them": 5, "then": 4, "there": 2, "therefore": 1, "therein": 1, "these": 7, "they": 14, "thing": 1, "things": 2, "this": 20, "those": 4, "though": 1, "three": 3, "through": 2, "throughout": 1, "thumb": 1, "ticks": 3, "time": 2, "tips": 1, "title": 1, "to": 108, "tone": 7, "too": 2, "tool": 1, "topic": 3, "toward": 1, "towards": 1, "tracked": 1, "tracking": 2, "tracks": 1, "trends": 1, "tricky": 1, "try": 3, "turns": 1, "two": 6, "types": 2, "typically": 1, "ui": 1, "under": 1, "understand": 3, "understanding": 3, "understands": 1, "understood": 1, "unexpected": 1, "unless": 1, "unordered": 3, "unreasonable": 1, "until": 1, "up": 7, "upon": 2, "us": 1, "usage": 1, "use": 29, "used": 3, "user": 2, "users": 6, "uses": 2, "use”": 1, "using": 6, "usually": 2, "utilities": 1, "utilize": 1, "value": 3, "values": 3, "variation": 1, "varying": 1, "ve": 3, "verb": 1, "versus": 1, "vertical": 1, "very": 3, "visit": 2, "visual": 3, "vital": 1, "voice": 4, "walls": 1, "want": 9, "wants": 3, "warning": 1, "was": 1, "way": 4, "we": 41, "welcome": 1, "well": 3, "what": 14, "when": 13, "where": 3, "wherever": 2, "which": 4, "while": 4, "who": 5, "whom": 1, "will": 10, "will/should": 1, "wishes": 1, "with": 26, "with_": 1, "without": 1, "word": 2, "words": 3, "work": 3, "working": 2, "would": 12, "write": 4, "writer": 1, "writing": 14, "writings": 1, "written": 4, "years": 1, "you": 45, "your": 25, "yourself": 1, "|april": 1, "—": 4, "“when": 1, "“why”": 1 }, "length": 2562 }, { "id": "4acf341c0752a13b762ff697", "doc_id": "e4fa1e1be19ccc0ce2b95b05", "title": "zerops", "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/deployment-options/zerops.mdx", "type": "github-document", "source": "solid:signals", "path": "devour_data/docs/zerops.json", "content": "--- title: Zerops order: 7 mainNavExclude: true use_cases: \u003e- deploying solid apps, static site hosting, ssr deployment, node.js hosting, production deployment tags: - deployment - hosting - zerops - static - ssr - node.js - production version: '1.0' description: \u003e- Deploy SolidStart apps to Zerops cloud platform with support for both static sites and SSR Node.js applications in production. --- [Zerops](https://zerops.io) is a dev-first cloud platform that can be used to deploy both Static and SSR Solid Node.js Apps. For additional one-to-one support, details, and features, you can join the [Zerops Discord server](https://discord.gg/xxzmJSDKPT) and [visit the Zerops Docs](https://docs.zerops.io). Deploy and test Zerops Solid recipes with one click: - [Deploy Solid Node.js \u0026 Static Together](https://app.zerops.io/recipe/solidjs) - [Node.js](https://github.com/zeropsio/recipe-solidjs-nodejs) and [Static](https://github.com/zeropsio/recipe-solidjs-static). - [Deploy Solid Node.js](https://app.zerops.io/recipe/solidjs-nodejs) - [Source Repository](https://github.com/zeropsio/recipe-solidjs-nodejs) - [Deploy Solid Static](https://app.zerops.io/recipe/solidjs-static) - [Source Repository](https://github.com/zeropsio/recipe-solidjs-static) ## Setting up an Account on Zerops 1. Go to [Zerops Registration](https://app.zerops.io/registration) and sign up using GitHub, GitLab, or just your email. ## Setting up your Project Infrastructure There are two ways to set up a Zerops project and a service: #### Using Project Add Wizard (GUI) 1. Go to your [Zerops dashboard](https://app.zerops.io/dashboard/projects). 2. Add a new project using your sidebar. If you're in compact mode, click on your profile and then \"Add new project.\" 3. You'll be redirected to a page where you can choose a service. ##### For Static: 1. Choose Static. 2. Scroll down and change the hostname to your preference. 3. Scroll down and click on the \"Add New Static\" button. ##### For SSR - Node.js: 1. Choose `Node.js` and select `version 20`. 2. Scroll down and change the hostname to your preference. 3. Scroll down and click on the \"Add New Node.js\" button. #### Using Project Import YAML **Note**: This is only used for project creation using YAML on the web interface—no need to add it to the project. 1. Go to your [Zerops dashboard](https://app.zerops.io/dashboard/projects) and click on your profile icon if you are a new user. If not, check your sidebar and click on `Import Project`. ##### Static: ```yaml project: name: recipe-solidjs services: - hostname: app type: static enableSubdomainAccess: true ``` ##### SSR - Node.js: ```yaml project: name: recipe-solidjs services: - hostname: app type: nodejs@20 enableSubdomainAccess: true ``` ## Add zerops.yml to your repository The `zerops.yml` configuration file is used to tell Zerops how to build and run your application, it should be placed to the root of your appplication's repository. Example for **SSR (Server-Side Rendering)** Apps: Set up the `zerops.yml` file in the root of your SSR project. Make sure the setup parameter's value is the same as the hostname of the service. ```yaml zerops: - setup: app build: base: nodejs@latest buildCommands: - pnpm i - pnpm build deployFiles: - .output - node_modules - public - package.json run: base: nodejs@latest ports: - port: 3000 httpSupport: true start: pnpm start ``` Example for **SSG (Static Site Generation)** Apps: Set up the `zerops.yml` file in the root of your SSG project. Make sure the setup parameter's value is the same as the hostname of the service. ```yaml zerops: - setup: app build: base: nodejs@latest buildCommands: - pnpm i - pnpm build deployFiles: - dist/~ run: base: static ``` Push the changes to your GitHub/GitLab repository (necessary if you are planning to use GitHub/GitLab). ## Deploying your apps ### Triggering the pipeline automatically by connecting Github/Gitlab repository You can push your project by [Triggering the pipeline using Zerops CLI](#triggering-the-pipeline-using-githubgitlab) or by connecting the app service with your [GitHub](https://docs.zerops.io/references/github-integration/) / [GitLab](https://docs.zerops.io/references/gitlab-integration) repository from inside the service detail. ### Triggering the pipeline manually using Zerops CLI To download the zCLI binary directly, use [zCLI/releases](https://github.com/zeropsio/zcli/releases) or: 1. Install the Zerops CLI using Terminal. Linux/MacOS ```bash curl -L https://zerops.io/zcli/install.sh | sh ``` Windows ```powershell irm https://zerops.io/zcli/install.ps1 | iex ``` Npm ```package-install-global @zerops/zcli ``` 2. Open Settings \u003e [Access Token Management](https://app.zerops.io/settings/token-management) in the Zerops app and generate a new access token. 3. Log in using your access token with the following command: ```bash zcli login \u003ctoken\u003e ``` 4. Navigate to the root of your app (where zerops.yml is located) and run the following command in Terminal to trigger the deploy: ```bash zcli push ``` Check the official docs if you need more advanced use-cases for [Zerops Docs](http://docs.zerops.io/).", "term_freq": { "##": 4, "###": 2, "####": 2, "#####": 4, "#triggering-the-pipeline-using-githubgitlab": 1, "**": 2, "**note**": 1, "**ssg": 1, "**ssr": 1, "---": 2, "-l": 1, "//app": 7, "//discord": 1, "//docs": 4, "//github": 6, "//zerops": 3, "20": 1, "3000": 1, "\u003ctoken\u003e": 1, "\u003e-": 2, "@zerops/zcli": 1, "access": 3, "account": 1, "add": 7, "additional": 1, "advanced": 1, "an": 1, "and": 19, "app": 7, "application": 1, "applications": 1, "appplication": 1, "apps": 6, "are": 3, "as": 2, "automatically": 1, "base": 4, "bash": 3, "be": 3, "binary": 1, "both": 2, "build": 5, "buildcommands": 2, "button": 2, "by": 3, "can": 4, "change": 2, "changes": 1, "check": 2, "choose": 3, "cli": 3, "click": 6, "cloud": 2, "com/solidjs/solid-docs/blob/head/src/routes/guides/deployment-options/zerops": 1, "com/zeropsio/recipe-solidjs-nodejs": 2, "com/zeropsio/recipe-solidjs-static": 2, "com/zeropsio/zcli/releases": 1, "command": 2, "compact": 1, "configuration": 1, "connecting": 2, "creation": 1, "curl": 1, "dashboard": 2, "deploy": 7, "deployfiles": 2, "deploying": 2, "deployment": 3, "description": 1, "detail": 1, "details": 1, "dev-first": 1, "directly": 1, "discord": 1, "dist/~": 1, "docs": 3, "down": 4, "download": 1, "email": 1, "enablesubdomainaccess": 2, "example": 2, "features": 1, "file": 3, "following": 2, "for": 8, "from": 1, "generate": 1, "generation": 1, "gg/xxzmjsdkpt": 1, "github": 2, "github-document": 1, "github/gitlab": 3, "gitlab": 2, "go": 3, "gui": 1, "hosting": 3, "hostname": 6, "how": 1, "http": 1, "https": 20, "httpsupport": 1, "icon": 1, "iex": 1, "if": 5, "import": 2, "in": 7, "infrastructure": 1, "inside": 1, "install": 1, "interface—no": 1, "io": 2, "io/": 1, "io/dashboard/projects": 2, "io/recipe/solidjs": 1, "io/recipe/solidjs-nodejs": 1, "io/recipe/solidjs-static": 1, "io/references/github-integration/": 1, "io/references/gitlab-integration": 1, "io/registration": 1, "io/settings/token-management": 1, "io/zcli/install": 2, "irm": 1, "is": 6, "it": 2, "join": 1, "js": 11, "json": 1, "just": 1, "linux/macos": 1, "ll": 1, "located": 1, "log": 1, "login": 1, "mainnavexclude": 1, "make": 2, "management": 1, "manually": 1, "mdx": 1, "mode": 1, "more": 1, "name": 2, "navigate": 1, "necessary": 1, "need": 2, "new": 6, "node": 11, "node_modules": 1, "nodejs@20": 1, "nodejs@latest": 3, "not": 1, "npm": 1, "of": 6, "official": 1, "on": 7, "one": 1, "one-to-one": 1, "only": 1, "open": 1, "or": 3, "order": 1, "output": 1, "package": 1, "package-install-global": 1, "page": 1, "parameter": 2, "pipeline": 3, "placed": 1, "planning": 1, "platform": 2, "pnpm": 5, "port": 1, "ports": 1, "powershell": 1, "preference": 2, "production": 3, "profile": 2, "project": 14, "ps1": 1, "public": 1, "push": 3, "re": 1, "recipe-solidjs": 2, "recipes": 1, "redirected": 1, "registration": 1, "rendering": 1, "repository": 7, "root": 4, "run": 4, "same": 2, "scroll": 4, "select": 1, "server": 1, "server-side": 1, "service": 6, "services": 2, "set": 3, "setting": 2, "settings": 1, "setup": 4, "sh": 2, "should": 1, "sidebar": 2, "sign": 1, "site": 2, "sites": 1, "solid": 6, "solidstart": 1, "source": 2, "ssg": 1, "ssr": 7, "start": 2, "static": 14, "support": 2, "sure": 2, "tags": 1, "tell": 1, "terminal": 2, "test": 1, "that": 1, "the": 36, "then": 1, "there": 1, "this": 1, "title": 1, "to": 20, "together": 1, "token": 3, "trigger": 1, "triggering": 3, "true": 4, "two": 1, "type": 2, "up": 6, "use": 2, "use-cases": 1, "use_cases": 1, "used": 3, "user": 1, "using": 9, "value": 2, "version": 2, "visit": 1, "ways": 1, "web": 1, "where": 2, "windows": 1, "with": 4, "wizard": 1, "yaml": 6, "yml": 5, "you": 8, "your": 21, "zcli": 3, "zcli/releases": 1, "zerops": 37 }, "length": 727 } ] }