Skip to content

Commit 6427992

Browse files
bradwestfallbradwestfall
committed
upgraded to remix 2.0
1 parent 6012e7a commit 6427992

Some content is hidden

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

50 files changed

+9288
-12678
lines changed

‎docs/vscode-snippets.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
"Remix Export Loader": {
108108
"prefix": "exportloader",
109109
"body": [
110-
"export const loader = async ({ params }: LoaderArgs) => {",
110+
"export const loader = async ({ params }: LoaderFunctionArgs) => {",
111111
" return json({ })",
112112
"}",
113113
"",

‎remix/app/entry.server.tsx

+154-53
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,26 @@
44
* For more information, see https://remix.run/file-conventions/entry.server
55
*/
66

7-
import { PassThrough } from "node:stream";
7+
import { PassThrough } from 'node:stream'
88

9-
import type { EntryContext } from "@remix-run/node";
10-
import { Response } from "@remix-run/node";
11-
import { RemixServer } from "@remix-run/react";
12-
import isbot from "isbot";
13-
import { renderToPipeableStream } from "react-dom/server";
9+
import type { AppLoadContext, EntryContext } from '@remix-run/node'
10+
import { createReadableStreamFromReadable } from '@remix-run/node'
11+
import { RemixServer } from '@remix-run/react'
12+
import isbot from 'isbot'
13+
import { renderToPipeableStream } from 'react-dom/server'
1414

15-
const ABORT_DELAY = 5_000;
15+
const ABORT_DELAY = 5_000
1616

1717
export default function handleRequest(
1818
request: Request,
1919
responseStatusCode: number,
2020
responseHeaders: Headers,
21-
remixContext: EntryContext
21+
remixContext: EntryContext,
22+
loadContext: AppLoadContext
2223
) {
23-
return isbot(request.headers.get("user-agent"))
24-
? handleBotRequest(
25-
request,
26-
responseStatusCode,
27-
responseHeaders,
28-
remixContext
29-
)
30-
: handleBrowserRequest(
31-
request,
32-
responseStatusCode,
33-
responseHeaders,
34-
remixContext
35-
);
24+
return isbot(request.headers.get('user-agent'))
25+
? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
26+
: handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext)
3627
}
3728

3829
function handleBotRequest(
@@ -42,39 +33,43 @@ function handleBotRequest(
4233
remixContext: EntryContext
4334
) {
4435
return new Promise((resolve, reject) => {
36+
let shellRendered = false
4537
const { pipe, abort } = renderToPipeableStream(
46-
<RemixServer
47-
context={remixContext}
48-
url={request.url}
49-
abortDelay={ABORT_DELAY}
50-
/>,
38+
<RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
5139
{
5240
onAllReady() {
53-
const body = new PassThrough();
41+
shellRendered = true
42+
const body = new PassThrough()
43+
const stream = createReadableStreamFromReadable(body)
5444

55-
responseHeaders.set("Content-Type", "text/html");
45+
responseHeaders.set('Content-Type', 'text/html')
5646

5747
resolve(
58-
new Response(body, {
48+
new Response(stream, {
5949
headers: responseHeaders,
6050
status: responseStatusCode,
6151
})
62-
);
52+
)
6353

64-
pipe(body);
54+
pipe(body)
6555
},
6656
onShellError(error: unknown) {
67-
reject(error);
57+
reject(error)
6858
},
6959
onError(error: unknown) {
70-
responseStatusCode = 500;
71-
console.error(error);
60+
responseStatusCode = 500
61+
// Log streaming rendering errors from inside the shell. Don't log
62+
// errors encountered during initial shell rendering since they'll
63+
// reject and get logged in handleDocumentRequest.
64+
if (shellRendered) {
65+
console.error(error)
66+
}
7267
},
7368
}
74-
);
69+
)
7570

76-
setTimeout(abort, ABORT_DELAY);
77-
});
71+
setTimeout(abort, ABORT_DELAY)
72+
})
7873
}
7974

8075
function handleBrowserRequest(
@@ -84,37 +79,143 @@ function handleBrowserRequest(
8479
remixContext: EntryContext
8580
) {
8681
return new Promise((resolve, reject) => {
82+
let shellRendered = false
8783
const { pipe, abort } = renderToPipeableStream(
88-
<RemixServer
89-
context={remixContext}
90-
url={request.url}
91-
abortDelay={ABORT_DELAY}
92-
/>,
84+
<RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
9385
{
9486
onShellReady() {
95-
const body = new PassThrough();
87+
shellRendered = true
88+
const body = new PassThrough()
89+
const stream = createReadableStreamFromReadable(body)
9690

97-
responseHeaders.set("Content-Type", "text/html");
91+
responseHeaders.set('Content-Type', 'text/html')
9892

9993
resolve(
100-
new Response(body, {
94+
new Response(stream, {
10195
headers: responseHeaders,
10296
status: responseStatusCode,
10397
})
104-
);
98+
)
10599

106-
pipe(body);
100+
pipe(body)
107101
},
108102
onShellError(error: unknown) {
109-
reject(error);
103+
reject(error)
110104
},
111105
onError(error: unknown) {
112-
console.error(error);
113-
responseStatusCode = 500;
106+
responseStatusCode = 500
107+
// Log streaming rendering errors from inside the shell. Don't log
108+
// errors encountered during initial shell rendering since they'll
109+
// reject and get logged in handleDocumentRequest.
110+
if (shellRendered) {
111+
console.error(error)
112+
}
114113
},
115114
}
116-
);
115+
)
117116

118-
setTimeout(abort, ABORT_DELAY);
119-
});
117+
setTimeout(abort, ABORT_DELAY)
118+
})
120119
}
120+
121+
// /**
122+
// * By default, Remix will handle generating the HTTP Response for you.
123+
// * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
124+
// * For more information, see https://remix.run/file-conventions/entry.server
125+
// */
126+
127+
// import { PassThrough } from 'node:stream'
128+
129+
// import type { EntryContext } from '@remix-run/node'
130+
// import { RemixServer } from '@remix-run/react'
131+
// import isbot from 'isbot'
132+
// import { renderToPipeableStream } from 'react-dom/server'
133+
134+
// const ABORT_DELAY = 5_000
135+
136+
// export default function handleRequest(
137+
// request: Request,
138+
// responseStatusCode: number,
139+
// responseHeaders: Headers,
140+
// remixContext: EntryContext
141+
// ) {
142+
// return isbot(request.headers.get('user-agent'))
143+
// ? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
144+
// : handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext)
145+
// }
146+
147+
// function handleBotRequest(
148+
// request: Request,
149+
// responseStatusCode: number,
150+
// responseHeaders: Headers,
151+
// remixContext: EntryContext
152+
// ) {
153+
// return new Promise((resolve, reject) => {
154+
// const { pipe, abort } = renderToPipeableStream(
155+
// <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
156+
// {
157+
// onAllReady() {
158+
// const body = new PassThrough()
159+
160+
// responseHeaders.set('Content-Type', 'text/html')
161+
162+
// resolve(
163+
// new Response(body, {
164+
// headers: responseHeaders,
165+
// status: responseStatusCode,
166+
// })
167+
// )
168+
169+
// pipe(body)
170+
// },
171+
// onShellError(error: unknown) {
172+
// reject(error)
173+
// },
174+
// onError(error: unknown) {
175+
// responseStatusCode = 500
176+
// console.error(error)
177+
// },
178+
// }
179+
// )
180+
181+
// setTimeout(abort, ABORT_DELAY)
182+
// })
183+
// }
184+
185+
// function handleBrowserRequest(
186+
// request: Request,
187+
// responseStatusCode: number,
188+
// responseHeaders: Headers,
189+
// remixContext: EntryContext
190+
// ) {
191+
// return new Promise((resolve, reject) => {
192+
// const { pipe, abort } = renderToPipeableStream(
193+
// <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
194+
// {
195+
// onShellReady() {
196+
// const body = new PassThrough()
197+
198+
// responseHeaders.set('Content-Type', 'text/html')
199+
200+
// resolve(
201+
// new Response(body, {
202+
// headers: responseHeaders,
203+
// status: responseStatusCode,
204+
// })
205+
// )
206+
207+
// pipe(body)
208+
// },
209+
// onShellError(error: unknown) {
210+
// reject(error)
211+
// },
212+
// onError(error: unknown) {
213+
// console.error(error)
214+
// responseStatusCode = 500
215+
// },
216+
// }
217+
// )
218+
219+
// setTimeout(abort, ABORT_DELAY)
220+
// })
221+
// }

‎remix/app/root.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
isRouteErrorResponse,
1010
useRouteError,
1111
} from '@remix-run/react'
12-
import { LinksFunction, LoaderArgs, json } from '@remix-run/node'
12+
import { LinksFunction, LoaderFunctionArgs, json } from '@remix-run/node'
1313
import { MainLayout } from '~/components/MainLayout'
1414
import { Heading } from '~/components/Heading'
1515
import { CenterContent } from '~/components/CenterContent'
@@ -23,7 +23,7 @@ import type { PropsWithChildren } from 'react'
2323

2424
export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]
2525

26-
export async function loader({ request }: LoaderArgs) {
26+
export async function loader({ request }: LoaderFunctionArgs) {
2727
const [sessionUser, cart] = await Promise.all([getSessionUser(request), getCart(request)])
2828
return json({ sessionUser, cart })
2929
}

‎remix/app/routes/_products-layout._index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Link, useRouteLoaderData } from '@remix-run/react'
22
import { BrowseProducts } from '~/components/BrowseProducts'
3-
import type { V2_MetaFunction } from '@remix-run/react'
3+
import type { MetaFunction } from '@remix-run/react'
44
import type { LoaderData } from './_products-layout'
55

6-
export const meta: V2_MetaFunction = () => {
6+
export const meta: MetaFunction = () => {
77
return [{ title: 'Tech Shopper' }]
88
}
99

‎remix/app/routes/_products-layout.products.$productId.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import { Tiles } from '~/components/Tiles'
77
import { Suspense } from 'react'
88
import { BrowseProductItem } from '~/components/BrowseProducts'
99
import { useCart } from '~/state/CartContext'
10-
import type { LoaderArgs } from '@remix-run/node'
10+
import type { LoaderFunctionArgs } from '@remix-run/node'
1111

12-
export const loader = async ({ params }: LoaderArgs) => {
12+
export const loader = async ({ params }: LoaderFunctionArgs) => {
1313
const productId = parseInt(params.productId!)
1414
if (!productId) throw new Response('Invalid Product ID', { status: 404 })
1515

‎remix/app/routes/_products-layout.products._index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { BrowseProducts } from '~/components/BrowseProducts'
2-
import { V2_MetaFunction, useRouteLoaderData } from '@remix-run/react'
2+
import { MetaFunction, useRouteLoaderData } from '@remix-run/react'
33
import type { LoaderData } from './_products-layout'
44

5-
export const meta: V2_MetaFunction = () => {
5+
export const meta: MetaFunction = () => {
66
return [{ title: 'Products' }]
77
}
88

‎remix/app/routes/_products-layout.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import { json } from '@remix-run/node'
22
import { Outlet, useLoaderData } from '@remix-run/react'
33
import { getBrands, getCategories, getProducts } from '~/utils/db.server'
4-
import type { LoaderArgs } from '@remix-run/node'
5-
import type { V2_MetaFunction } from '@remix-run/react'
4+
import type { LoaderFunctionArgs } from '@remix-run/node'
5+
import type { MetaFunction } from '@remix-run/react'
66
import { type UnpackLoader, sortLabel } from '~/utils/helpers'
77
import { ProductsSidebar } from '~/components/ProductsSidebar'
88

9-
export const meta: V2_MetaFunction = () => {
9+
export const meta: MetaFunction = () => {
1010
return [{ title: 'New Remix App' }]
1111
}
1212

13-
export const loader = async ({ request }: LoaderArgs) => {
13+
export const loader = async ({ request }: LoaderFunctionArgs) => {
1414
const searchParams = new URL(request.url).searchParams
1515

1616
const [products, brands, categories] = await Promise.all([

‎remix/app/routes/blog.$slug.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import { json } from '@remix-run/node'
22
import { useLoaderData } from '@remix-run/react'
33
import { MDXContent } from '~/components/MDXContent'
44
import { getPost } from '~/utils/blog.server'
5-
import type { LoaderArgs } from '@remix-run/node'
5+
import type { LoaderFunctionArgs } from '@remix-run/node'
66
import { Heading } from '~/components/Heading'
77

8-
export const loader = async ({ params }: LoaderArgs) => {
8+
export const loader = async ({ params }: LoaderFunctionArgs) => {
99
const slug = params.slug
1010
if (!slug) throw new Response('Not found', { status: 404 })
1111

‎remix/app/routes/cart.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { type ActionArgs } from '@remix-run/node'
1+
import { type ActionFunctionArgs } from '@remix-run/node'
22
import { addToCart, removeFromCart } from '~/utils/cart.server'
33

4-
export async function action({ request }: ActionArgs) {
4+
export async function action({ request }: ActionFunctionArgs) {
55
const formData = await request.formData()
66
const productId = parseInt(formData.get('productId') as string)
77
const quantity = parseInt(formData.get('quantity') as string)

‎remix/app/routes/login.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useState } from 'react'
22
import * as z from 'zod'
33
import { json } from '@remix-run/node'
44
import { Form, Link, useActionData } from '@remix-run/react'
5-
import type { ActionArgs } from '@remix-run/node'
5+
import type { ActionFunctionArgs } from '@remix-run/node'
66
import { createUserSession, verifyUser } from '~/utils/auth.server'
77
import { FieldWrap } from '~/components/FormFields'
88
import { Heading } from '~/components/Heading'
@@ -17,7 +17,7 @@ type FormErrorType = {
1717
[k in keyof FormDataType]?: string[] | undefined
1818
}
1919

20-
export async function action({ request }: ActionArgs) {
20+
export async function action({ request }: ActionFunctionArgs) {
2121
const formData = await request.formData()
2222
const formValues = Object.fromEntries(formData)
2323
const results = formSchema.safeParse(formValues)

0 commit comments

Comments
 (0)