Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f3233cd
commit 0d12208
Showing
13 changed files
with
6,780 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
/** @type {import('eslint').Linter.Config} */ | ||
module.exports = { | ||
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
node_modules | ||
|
||
/.cache | ||
/build | ||
/public/build | ||
.env |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
/** | ||
* By default, Remix will handle hydrating your app on the client for you. | ||
* 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` ✨ | ||
* For more information, see https://remix.run/file-conventions/entry.client | ||
*/ | ||
|
||
import { RemixBrowser } from '@remix-run/react'; | ||
import { startTransition, StrictMode } from 'react'; | ||
import { hydrateRoot } from 'react-dom/client'; | ||
|
||
startTransition(() => { | ||
hydrateRoot( | ||
document, | ||
<StrictMode> | ||
<RemixBrowser /> | ||
</StrictMode>, | ||
); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,137 @@ | ||
/** | ||
* By default, Remix will handle generating the HTTP Response for you. | ||
* 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` ✨ | ||
* For more information, see https://remix.run/file-conventions/entry.server | ||
*/ | ||
|
||
import { PassThrough } from 'node:stream'; | ||
|
||
import type { AppLoadContext, EntryContext } from '@remix-run/node'; | ||
import { createReadableStreamFromReadable } from '@remix-run/node'; | ||
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( | ||
request: Request, | ||
responseStatusCode: number, | ||
responseHeaders: Headers, | ||
remixContext: EntryContext, | ||
loadContext: AppLoadContext, | ||
) { | ||
return isbot(request.headers.get('user-agent')) | ||
? handleBotRequest( | ||
request, | ||
responseStatusCode, | ||
responseHeaders, | ||
remixContext, | ||
) | ||
: handleBrowserRequest( | ||
request, | ||
responseStatusCode, | ||
responseHeaders, | ||
remixContext, | ||
); | ||
} | ||
|
||
function handleBotRequest( | ||
request: Request, | ||
responseStatusCode: number, | ||
responseHeaders: Headers, | ||
remixContext: EntryContext, | ||
) { | ||
return new Promise((resolve, reject) => { | ||
let shellRendered = false; | ||
const { pipe, abort } = renderToPipeableStream( | ||
<RemixServer | ||
context={remixContext} | ||
url={request.url} | ||
abortDelay={ABORT_DELAY} | ||
/>, | ||
{ | ||
onAllReady() { | ||
shellRendered = true; | ||
const body = new PassThrough(); | ||
const stream = createReadableStreamFromReadable(body); | ||
|
||
responseHeaders.set('Content-Type', 'text/html'); | ||
|
||
resolve( | ||
new Response(stream, { | ||
headers: responseHeaders, | ||
status: responseStatusCode, | ||
}), | ||
); | ||
|
||
pipe(body); | ||
}, | ||
onShellError(error: unknown) { | ||
reject(error); | ||
}, | ||
onError(error: unknown) { | ||
responseStatusCode = 500; | ||
// Log streaming rendering errors from inside the shell. Don't log | ||
// errors encountered during initial shell rendering since they'll | ||
// reject and get logged in handleDocumentRequest. | ||
if (shellRendered) { | ||
console.error(error); | ||
} | ||
}, | ||
}, | ||
); | ||
|
||
setTimeout(abort, ABORT_DELAY); | ||
}); | ||
} | ||
|
||
function handleBrowserRequest( | ||
request: Request, | ||
responseStatusCode: number, | ||
responseHeaders: Headers, | ||
remixContext: EntryContext, | ||
) { | ||
return new Promise((resolve, reject) => { | ||
let shellRendered = false; | ||
const { pipe, abort } = renderToPipeableStream( | ||
<RemixServer | ||
context={remixContext} | ||
url={request.url} | ||
abortDelay={ABORT_DELAY} | ||
/>, | ||
{ | ||
onShellReady() { | ||
shellRendered = true; | ||
const body = new PassThrough(); | ||
const stream = createReadableStreamFromReadable(body); | ||
|
||
responseHeaders.set('Content-Type', 'text/html'); | ||
|
||
resolve( | ||
new Response(stream, { | ||
headers: responseHeaders, | ||
status: responseStatusCode, | ||
}), | ||
); | ||
|
||
pipe(body); | ||
}, | ||
onShellError(error: unknown) { | ||
reject(error); | ||
}, | ||
onError(error: unknown) { | ||
responseStatusCode = 500; | ||
// Log streaming rendering errors from inside the shell. Don't log | ||
// errors encountered during initial shell rendering since they'll | ||
// reject and get logged in handleDocumentRequest. | ||
if (shellRendered) { | ||
console.error(error); | ||
} | ||
}, | ||
}, | ||
); | ||
|
||
setTimeout(abort, ABORT_DELAY); | ||
}); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import { cssBundleHref } from '@remix-run/css-bundle'; | ||
import type { LinksFunction } from '@remix-run/node'; | ||
import { | ||
Links, | ||
LiveReload, | ||
Meta, | ||
Outlet, | ||
Scripts, | ||
ScrollRestoration, | ||
} from '@remix-run/react'; | ||
import styles from '~/styles/globals.css'; | ||
|
||
export const links: LinksFunction = () => [ | ||
...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []), | ||
{ rel: 'stylesheet', href: styles }, | ||
]; | ||
|
||
export default function App() { | ||
return ( | ||
<html lang="en"> | ||
<head> | ||
<meta charSet="utf-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
<Meta /> | ||
<Links /> | ||
</head> | ||
<body> | ||
<Outlet /> | ||
<ScrollRestoration /> | ||
<Scripts /> | ||
<LiveReload /> | ||
</body> | ||
</html> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
import type { MetaFunction, ActionFunctionArgs } from '@remix-run/node'; | ||
import { json } from '@remix-run/node'; | ||
import { Form, useActionData } from '@remix-run/react'; | ||
import { setTimeout } from 'timers/promises'; | ||
import { createServerActionsValidator } from 'react-hook-form/server'; | ||
import { useForm } from 'react-hook-form'; | ||
import { zodResolver } from '../../node_modules/@hookform/resolvers/zod'; | ||
import { z } from 'zod'; | ||
|
||
export const meta: MetaFunction = () => { | ||
return [ | ||
{ title: 'New Remix App' }, | ||
{ name: 'description', content: 'Welcome to Remix!' }, | ||
]; | ||
}; | ||
|
||
const schema = z.object({ | ||
username: z.string().min(1, 'Username is required'), | ||
password: z.string().min(8, 'Password must be at least 8 characters'), | ||
}); | ||
|
||
let count = 0; | ||
const maxCount = 1; | ||
|
||
export async function action({ request }: ActionFunctionArgs) { | ||
const formData = await request.formData(); | ||
|
||
await setTimeout(1000); | ||
|
||
const validator = createServerActionsValidator(formData, { | ||
resolver: zodResolver(schema), | ||
}); | ||
|
||
await validator.validate(); | ||
|
||
if (!validator.isValid()) { | ||
return json(validator.getResult()); | ||
} | ||
|
||
if (Math.random() < 0.5) { | ||
validator.setError('root.serverError', { | ||
type: '409', | ||
message: 'Username already exists. Please choose a different username.', | ||
}); | ||
return json(validator.getResult()); | ||
} | ||
|
||
if (Math.random() < 0.5) { | ||
count++; | ||
if (count > maxCount) { | ||
validator.setError('root.serverError', { | ||
type: '401', | ||
message: 'Too many login attempts.', | ||
}); | ||
return json(validator.getResult()); | ||
} | ||
|
||
validator.setError('root.serverError', { | ||
type: '401', | ||
message: 'Invalid username or password.', | ||
}); | ||
return json(validator.getResult()); | ||
} | ||
|
||
if (Math.random() < 0.5) { | ||
validator.setError('root.serverError', { | ||
type: '500', | ||
message: 'Internal server error. Please try again later.', | ||
}); | ||
} | ||
|
||
return json({ status: 200, message: 'Login successful!' }); | ||
} | ||
|
||
export default function Index() { | ||
const actionData = useActionData<typeof action>(); | ||
console.log('actionData', actionData); | ||
|
||
const { | ||
register, | ||
handleSubmit, | ||
formState: { errors }, | ||
} = useForm<{ | ||
username: string; | ||
password: string; | ||
}>({ | ||
resolver: zodResolver(schema), | ||
defaultValues: actionData?.values || { | ||
username: '', | ||
password: '', | ||
}, | ||
errors: actionData?.errors, | ||
progressive: true, | ||
}); | ||
|
||
console.log('errors', errors); | ||
|
||
return ( | ||
<Form method="post" onSubmit={handleSubmit()}> | ||
<label>Username</label> | ||
<input {...register('username')} placeholder="Username" /> | ||
{errors.username && <p>{errors.username.message}</p>} | ||
<label>Password</label> | ||
<input {...register('password')} type="password" placeholder="Password" /> | ||
{errors.password && <p>{errors.password.message}</p>} | ||
<input type="submit" /> | ||
{errors.root?.serverError && <p>{errors.root.serverError.message}</p>} | ||
</Form> | ||
); | ||
} |
Oops, something went wrong.