-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
browser.tsx
64 lines (55 loc) · 1.97 KB
/
browser.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import type { BrowserHistory, Action, Location } from "@remix-run/router";
import { createBrowserHistory } from "@remix-run/router";
import type { ReactElement } from "react";
import * as React from "react";
import { RemixEntry } from "./components";
import type { EntryContext } from "./entry";
import type { RouteModules } from "./routeModules";
/* eslint-disable prefer-let/prefer-let */
declare global {
var __remixContext: EntryContext;
var __remixRouteModules: RouteModules;
var __remixManifest: EntryContext["manifest"];
}
/* eslint-enable prefer-let/prefer-let */
export interface RemixBrowserProps {}
interface Update {
action: Action;
location: Location;
}
/**
* The entry point for a Remix app when it is rendered in the browser (in
* `app/entry.client.js`). This component is used by React to hydrate the HTML
* that was received from the server.
*/
export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
let historyRef = React.useRef<BrowserHistory>();
if (historyRef.current == null) {
historyRef.current = createBrowserHistory({ window, v5Compat: true });
}
let history = historyRef.current;
let [state, dispatch] = React.useReducer(
(_: Update, update: Update) => update,
{
action: history.action,
location: history.location,
}
);
React.useLayoutEffect(() => history.listen(dispatch), [history]);
let entryContext = window.__remixContext;
entryContext.manifest = window.__remixManifest;
entryContext.routeModules = window.__remixRouteModules;
// In the browser, we don't need this because a) in the case of loader
// errors we already know the order and b) in the case of render errors
// React knows the order and handles error boundaries normally.
entryContext.appState.trackBoundaries = false;
entryContext.appState.trackCatchBoundaries = false;
return (
<RemixEntry
context={entryContext}
action={state.action}
location={state.location}
navigator={history}
/>
);
}