-
Notifications
You must be signed in to change notification settings - Fork 1
/
mod.tsx
208 lines (198 loc) · 6.29 KB
/
mod.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
import {
ComponentType,
Context,
lazy as reactLazy,
LazyExoticComponent,
ReactNode,
startTransition,
StrictMode,
} from "npm/react";
import { HelmetProvider } from "npm/react-helmet-async";
import { hydrateRoot } from "npm/react-dom/client";
import {
createBrowserRouter,
RouteObject,
RouterProvider,
} from "npm/react-router-dom";
import { AppWindow, createAppContext } from "./env.ts";
export {
createAppContext,
getEnv,
isBrowser,
isDevelopment,
isProduction,
isServer,
isTest,
} from "./env.ts";
export type { AppEnvironment } from "./env.ts";
import {
AppErrorBoundaryProps,
AppErrorContext,
FallbackProps,
HttpError,
withAppErrorBoundary,
} from "./error.tsx";
export {
AppErrorBoundary,
DefaultErrorFallback,
ErrorResponse,
HttpError,
isErrorResponse,
isHttpError,
NotFound,
useAutoReset,
withAppErrorBoundary,
} from "./error.tsx";
export type {
AppErrorBoundaryProps,
ErrorBoundaryProps,
FallbackProps,
HttpErrorOptions,
} from "./error.tsx";
/**
* An interface that defines the configuration for the application's hydration.
*/
export interface HydrateOptions<
AppContext extends Record<string, unknown> = Record<string, unknown>,
> {
/**
* A react router route object.
* The build script will automatically generate this for your application's routes.
* The route object is a default export from `_main.tsx` in your routes directory.
*/
route: RouteObject;
/** A React Component that wraps the entire application. */
Provider?: ComponentType<{ children: ReactNode }>;
/** A context object for the App. */
Context?: Context<AppContext>;
}
/** An interface that extends `HydrateOptions` and is used to configure the App Component. */
interface AppOptions<
AppContext extends Record<string, unknown> = Record<string, unknown>,
> extends HydrateOptions<AppContext> {
Provider: ComponentType<{ children: ReactNode }>;
Context: Context<AppContext>;
}
/**
* A React component used to render the application.
*/
function App<
AppContext extends Record<string, unknown> = Record<string, unknown>,
>({ route, Provider, Context }: AppOptions<AppContext>) {
const router = createBrowserRouter([route]);
const rawError = (window as AppWindow).app.error;
const { stack, ...errorOptions } = rawError ?? {};
const error = rawError && new HttpError(errorOptions);
if (error) {
if (typeof stack === "string") {
error.stack = stack;
}
console.error(error);
}
const context = (window as AppWindow<AppContext>).app.context ?? {};
const appErrorContext = { error };
return (
<StrictMode>
<HelmetProvider>
<AppErrorContext.Provider value={appErrorContext}>
<Context.Provider value={context}>
<Provider>
<RouterProvider router={router} />
</Provider>
</Context.Provider>
</AppErrorContext.Provider>
</HelmetProvider>
</StrictMode>
);
}
/**
* This function is used to hydrate the application in the browser.
* It turns the server rendered application into a single-page application (SPA).
* Hydration is not required if only server-side rendering is desired.
*
* If the default configuration is used, this function will load the route generated from the application's routes.
*
* ```tsx
* import { hydrate } from "x/udibo_react_app/app.tsx";
*
* import route from "./routes/_main.tsx";
*
* hydrate({ route });
* ```
*
* An optional Provider argument can be used to include customer providers around the application.
*/
export function hydrate<
AppContext extends Record<string, unknown> = Record<string, unknown>,
>({ route, Provider, Context }: HydrateOptions<AppContext>) {
const hydrate = () =>
startTransition(() => {
hydrateRoot(
document.body,
<App
route={route}
Provider={Provider ?? (({ children }) => <>{children}</>)}
Context={Context ?? createAppContext<AppContext>()}
/>,
);
});
if (typeof requestIdleCallback !== "undefined") {
requestIdleCallback(hydrate);
} else {
// Safari doesn't support requestIdleCallback
// https://caniuse.com/requestidlecallback
setTimeout(hydrate, 1);
}
}
/**
* An interface that defines a route file.
* A route file exports a react component by default.
* It can optionally export an `ErrorFallback` or `boundary` that will be used for an `AppErrorBoundary` around the react component that it exports by default.
*/
export type RouteFile = {
/** The react component for the route. */
default: ComponentType;
/** An ErrorFallback for an AppErrorBoundary around the react component for the route. */
ErrorFallback?: ComponentType<FallbackProps>;
/** The boundary used by the route. If there is an ErrorFallback exported, exporting a boundary will override the default boundary. */
boundary?: string;
};
/**
* A function used to lazily load a component. This function takes in a factory that returns Promise that resolves to a React component.
* The purpose of this function is to automatically add error boundaries to routes with an `ErrorFallback` or `boundary` export.
* This function is intended for internal use only, and is typically used in the generated `_main.tsx` file for a routes directory.
*/
export function lazy<
T extends RouteFile,
>(factory: () => Promise<T>): LazyExoticComponent<ComponentType>;
export function lazy<
T extends RouteFile,
>(
boundary: string,
factory: () => Promise<T>,
): LazyExoticComponent<ComponentType>;
export function lazy<
T extends RouteFile,
>(
boundaryOrFactory?: string | (() => Promise<T>),
factory?: () => Promise<T>,
): LazyExoticComponent<ComponentType> {
let boundary = typeof boundaryOrFactory === "string"
? boundaryOrFactory
: undefined;
if (typeof boundaryOrFactory !== "string") factory = boundaryOrFactory;
return reactLazy(async () => {
const { default: Component, ErrorFallback, boundary: boundaryOverride } =
await factory!();
const errorBoundaryProps = {
FallbackComponent: ErrorFallback,
} as AppErrorBoundaryProps;
if (boundaryOverride) boundary = boundaryOverride;
if (boundary) errorBoundaryProps.boundary = boundaryOverride ?? boundary;
return {
default: errorBoundaryProps.FallbackComponent
? withAppErrorBoundary(Component, errorBoundaryProps)
: Component,
};
});
}