Skip to content

Commit 2f2da0a

Browse files
MichaelDeBoeyMichaelDeBoey
authored
chore: update examples to be in line with templates (#40)
1 parent 4642c9f commit 2f2da0a

File tree

286 files changed

+8510
-1318
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

286 files changed

+8510
-1318
lines changed

‎__template/.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/** @type {import('eslint').Linter.Config} */
12
module.exports = {
23
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
34
};

‎__template/app/entry.client.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
11
import { RemixBrowser } from "@remix-run/react";
2-
import { hydrate } from "react-dom";
2+
import { startTransition, StrictMode } from "react";
3+
import { hydrateRoot } from "react-dom/client";
34

4-
hydrate(<RemixBrowser />, document);
5+
const hydrate = () =>
6+
startTransition(() =>
7+
hydrateRoot(
8+
document,
9+
<StrictMode>
10+
<RemixBrowser />
11+
</StrictMode>
12+
)
13+
);
14+
15+
if (window.requestIdleCallback) {
16+
window.requestIdleCallback(hydrate);
17+
} else {
18+
// Safari doesn't support requestIdleCallback
19+
// https://caniuse.com/requestidlecallback
20+
window.setTimeout(hydrate, 1);
21+
}

‎__template/app/entry.server.tsx‎

Lines changed: 100 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,110 @@
1+
import { PassThrough } from "stream";
2+
13
import type { EntryContext } from "@remix-run/node";
4+
import { Response } from "@remix-run/node";
25
import { RemixServer } from "@remix-run/react";
3-
import { renderToString } from "react-dom/server";
6+
import isbot from "isbot";
7+
import { renderToPipeableStream } from "react-dom/server";
8+
9+
const ABORT_DELAY = 5000;
10+
11+
const handleRequest = (
12+
request: Request,
13+
responseStatusCode: number,
14+
responseHeaders: Headers,
15+
remixContext: EntryContext
16+
) =>
17+
isbot(request.headers.get("user-agent"))
18+
? handleBotRequest(
19+
request,
20+
responseStatusCode,
21+
responseHeaders,
22+
remixContext
23+
)
24+
: handleBrowserRequest(
25+
request,
26+
responseStatusCode,
27+
responseHeaders,
28+
remixContext
29+
);
30+
export default handleRequest;
431

5-
export default function handleRequest(
32+
const handleBotRequest = (
633
request: Request,
734
responseStatusCode: number,
835
responseHeaders: Headers,
936
remixContext: EntryContext
10-
) {
11-
const markup = renderToString(
12-
<RemixServer context={remixContext} url={request.url} />
13-
);
37+
) =>
38+
new Promise((resolve, reject) => {
39+
let didError = false;
40+
41+
const { pipe, abort } = renderToPipeableStream(
42+
<RemixServer context={remixContext} url={request.url} />,
43+
{
44+
onAllReady: () => {
45+
const body = new PassThrough();
46+
47+
responseHeaders.set("Content-Type", "text/html");
48+
49+
resolve(
50+
new Response(body, {
51+
headers: responseHeaders,
52+
status: didError ? 500 : responseStatusCode,
53+
})
54+
);
55+
56+
pipe(body);
57+
},
58+
onShellError: (error: unknown) => {
59+
reject(error);
60+
},
61+
onError: (error: unknown) => {
62+
didError = true;
63+
64+
console.error(error);
65+
},
66+
}
67+
);
68+
69+
setTimeout(abort, ABORT_DELAY);
70+
});
71+
72+
const handleBrowserRequest = (
73+
request: Request,
74+
responseStatusCode: number,
75+
responseHeaders: Headers,
76+
remixContext: EntryContext
77+
) =>
78+
new Promise((resolve, reject) => {
79+
let didError = false;
80+
81+
const { pipe, abort } = renderToPipeableStream(
82+
<RemixServer context={remixContext} url={request.url} />,
83+
{
84+
onShellReady: () => {
85+
const body = new PassThrough();
86+
87+
responseHeaders.set("Content-Type", "text/html");
88+
89+
resolve(
90+
new Response(body, {
91+
headers: responseHeaders,
92+
status: didError ? 500 : responseStatusCode,
93+
})
94+
);
95+
96+
pipe(body);
97+
},
98+
onShellError: (error: unknown) => {
99+
reject(error);
100+
},
101+
onError: (error: unknown) => {
102+
didError = true;
14103

15-
responseHeaders.set("Content-Type", "text/html");
104+
console.error(error);
105+
},
106+
}
107+
);
16108

17-
return new Response("<!DOCTYPE html>" + markup, {
18-
status: responseStatusCode,
19-
headers: responseHeaders,
109+
setTimeout(abort, ABORT_DELAY);
20110
});
21-
}

‎__template/package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,17 @@
1010
"@remix-run/node": "*",
1111
"@remix-run/react": "*",
1212
"@remix-run/serve": "*",
13-
"react": "^17.0.2",
14-
"react-dom": "^17.0.2"
13+
"isbot": "^3.6.5",
14+
"react": "^18.2.0",
15+
"react-dom": "^18.2.0"
1516
},
1617
"devDependencies": {
1718
"@remix-run/dev": "*",
1819
"@remix-run/eslint-config": "*",
19-
"@types/react": "^17.0.39",
20-
"@types/react-dom": "^17.0.13",
21-
"eslint": "^8.10.0",
22-
"typescript": "^4.7.4"
20+
"@types/react": "^18.0.25",
21+
"@types/react-dom": "^18.0.8",
22+
"eslint": "^8.27.0",
23+
"typescript": "^4.8.4"
2324
},
2425
"engines": {
2526
"node": ">=14"

‎_official-blog-tutorial/.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/** @type {import('eslint').Linter.Config} */
12
module.exports = {
23
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
34
};

‎_official-blog-tutorial/app/entry.client.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
11
import { RemixBrowser } from "@remix-run/react";
2-
import { hydrate } from "react-dom";
2+
import { startTransition, StrictMode } from "react";
3+
import { hydrateRoot } from "react-dom/client";
34

4-
hydrate(<RemixBrowser />, document);
5+
const hydrate = () =>
6+
startTransition(() =>
7+
hydrateRoot(
8+
document,
9+
<StrictMode>
10+
<RemixBrowser />
11+
</StrictMode>
12+
)
13+
);
14+
15+
if (window.requestIdleCallback) {
16+
window.requestIdleCallback(hydrate);
17+
} else {
18+
// Safari doesn't support requestIdleCallback
19+
// https://caniuse.com/requestidlecallback
20+
window.setTimeout(hydrate, 1);
21+
}

‎_official-blog-tutorial/app/entry.server.tsx‎

Lines changed: 100 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,110 @@
1+
import { PassThrough } from "stream";
2+
13
import type { EntryContext } from "@remix-run/node";
4+
import { Response } from "@remix-run/node";
25
import { RemixServer } from "@remix-run/react";
3-
import { renderToString } from "react-dom/server";
6+
import isbot from "isbot";
7+
import { renderToPipeableStream } from "react-dom/server";
8+
9+
const ABORT_DELAY = 5000;
10+
11+
const handleRequest = (
12+
request: Request,
13+
responseStatusCode: number,
14+
responseHeaders: Headers,
15+
remixContext: EntryContext
16+
) =>
17+
isbot(request.headers.get("user-agent"))
18+
? handleBotRequest(
19+
request,
20+
responseStatusCode,
21+
responseHeaders,
22+
remixContext
23+
)
24+
: handleBrowserRequest(
25+
request,
26+
responseStatusCode,
27+
responseHeaders,
28+
remixContext
29+
);
30+
export default handleRequest;
431

5-
export default function handleRequest(
32+
const handleBotRequest = (
633
request: Request,
734
responseStatusCode: number,
835
responseHeaders: Headers,
936
remixContext: EntryContext
10-
) {
11-
const markup = renderToString(
12-
<RemixServer context={remixContext} url={request.url} />
13-
);
37+
) =>
38+
new Promise((resolve, reject) => {
39+
let didError = false;
40+
41+
const { pipe, abort } = renderToPipeableStream(
42+
<RemixServer context={remixContext} url={request.url} />,
43+
{
44+
onAllReady: () => {
45+
const body = new PassThrough();
46+
47+
responseHeaders.set("Content-Type", "text/html");
48+
49+
resolve(
50+
new Response(body, {
51+
headers: responseHeaders,
52+
status: didError ? 500 : responseStatusCode,
53+
})
54+
);
55+
56+
pipe(body);
57+
},
58+
onShellError: (error: unknown) => {
59+
reject(error);
60+
},
61+
onError: (error: unknown) => {
62+
didError = true;
63+
64+
console.error(error);
65+
},
66+
}
67+
);
68+
69+
setTimeout(abort, ABORT_DELAY);
70+
});
71+
72+
const handleBrowserRequest = (
73+
request: Request,
74+
responseStatusCode: number,
75+
responseHeaders: Headers,
76+
remixContext: EntryContext
77+
) =>
78+
new Promise((resolve, reject) => {
79+
let didError = false;
80+
81+
const { pipe, abort } = renderToPipeableStream(
82+
<RemixServer context={remixContext} url={request.url} />,
83+
{
84+
onShellReady: () => {
85+
const body = new PassThrough();
86+
87+
responseHeaders.set("Content-Type", "text/html");
88+
89+
resolve(
90+
new Response(body, {
91+
headers: responseHeaders,
92+
status: didError ? 500 : responseStatusCode,
93+
})
94+
);
95+
96+
pipe(body);
97+
},
98+
onShellError: (error: unknown) => {
99+
reject(error);
100+
},
101+
onError: (error: unknown) => {
102+
didError = true;
14103

15-
responseHeaders.set("Content-Type", "text/html");
104+
console.error(error);
105+
},
106+
}
107+
);
16108

17-
return new Response("<!DOCTYPE html>" + markup, {
18-
status: responseStatusCode,
19-
headers: responseHeaders,
109+
setTimeout(abort, ABORT_DELAY);
20110
});
21-
}

‎_official-blog-tutorial/package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,9 @@
3535
"@remix-run/react": "*",
3636
"@remix-run/serve": "*",
3737
"marked": "^4.0.15",
38-
"react": "^17.0.2",
39-
"react-dom": "^17.0.2",
38+
"isbot": "^3.6.5",
39+
"react": "^18.2.0",
40+
"react-dom": "^18.2.0",
4041
"tiny-invariant": "^1.2.0"
4142
},
4243
"devDependencies": {
@@ -51,15 +52,15 @@
5152
"@types/eslint": "^8.4.1",
5253
"@types/marked": "^4.0.3",
5354
"@types/node": "^17.0.31",
54-
"@types/react": "^17.0.44",
55-
"@types/react-dom": "^17.0.16",
55+
"@types/react": "^18.0.25",
56+
"@types/react-dom": "^18.0.8",
5657
"@vitejs/plugin-react": "^1.3.2",
5758
"autoprefixer": "^10.4.7",
5859
"c8": "^7.11.2",
5960
"cross-env": "^7.0.3",
6061
"cypress": "^9.6.0",
6162
"esbuild-register": "^3.3.2",
62-
"eslint": "^8.14.0",
63+
"eslint": "^8.27.0",
6364
"eslint-config-prettier": "^8.5.0",
6465
"happy-dom": "^3.1.0",
6566
"msw": "^0.39.2",
@@ -70,7 +71,7 @@
7071
"prisma": "^3.13.0",
7172
"start-server-and-test": "^1.14.0",
7273
"tailwindcss": "^3.1.0",
73-
"typescript": "^4.7.4",
74+
"typescript": "^4.8.4",
7475
"vite": "^2.9.7",
7576
"vite-tsconfig-paths": "^3.4.1",
7677
"vitest": "^0.10.2"

‎_official-jokes/.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/** @type {import('eslint').Linter.Config} */
12
module.exports = {
23
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
34
};

‎_official-jokes/app/entry.client.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
1-
import ReactDOM from "react-dom";
21
import { RemixBrowser } from "@remix-run/react";
2+
import { startTransition, StrictMode } from "react";
3+
import { hydrateRoot } from "react-dom/client";
34

4-
ReactDOM.hydrate(<RemixBrowser />, document);
5+
const hydrate = () =>
6+
startTransition(() =>
7+
hydrateRoot(
8+
document,
9+
<StrictMode>
10+
<RemixBrowser />
11+
</StrictMode>
12+
)
13+
);
14+
15+
if (window.requestIdleCallback) {
16+
window.requestIdleCallback(hydrate);
17+
} else {
18+
// Safari doesn't support requestIdleCallback
19+
// https://caniuse.com/requestidlecallback
20+
window.setTimeout(hydrate, 1);
21+
}

0 commit comments

Comments
 (0)