nzambello/work-timer
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

chore: setup app entries with mantine

Browse source
This commit is contained in:
Nicola Zambello 2023-02-14 10:13:40 +01:00
parent a10816e43c
commit 13017299cf
Signed by: nzambello
GPG key ID: 56E4A92C2C1E50BA
2 changed files with 21 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/entry.client.tsx
View file

@ -1,19 +1,22 @@
import { RemixBrowser } from "@remix-run/react"; import { RemixBrowser } from '@remix-run/react';
import { startTransition, StrictMode } from "react"; import { startTransition, StrictMode } from 'react';
import { hydrateRoot } from "react-dom/client"; import { hydrateRoot } from 'react-dom/client';
import { ClientProvider } from '@mantine/remix';
function hydrate() { function hydrate() {
startTransition(() => { startTransition(() => {
hydrateRoot( hydrateRoot(
document, document,
<StrictMode> <StrictMode>
<ClientProvider>
<RemixBrowser /> <RemixBrowser />
</ClientProvider>
</StrictMode> </StrictMode>
); );
}); });
} }
if (typeof requestIdleCallback === "function") { if (typeof requestIdleCallback === 'function') {
requestIdleCallback(hydrate); requestIdleCallback(hydrate);
} else { } else {
// Safari doesn't support requestIdleCallback // Safari doesn't support requestIdleCallback

111
app/entry.server.tsx
View file

@ -1,11 +1,10 @@
import { PassThrough } from "stream"; import type { EntryContext } from '@remix-run/node';
import type { EntryContext } from "@remix-run/node"; import { Response } from '@remix-run/node';
import { Response } from "@remix-run/node"; import { RemixServer } from '@remix-run/react';
import { RemixServer } from "@remix-run/react"; import { renderToString } from 'react-dom/server';
import isbot from "isbot"; import { injectStyles, createStylesServer } from '@mantine/remix';
import { renderToPipeableStream } from "react-dom/server";
const ABORT_DELAY = 5000; const server = createStylesServer();
export default function handleRequest( export default function handleRequest(
request: Request, request: Request,
@ -13,99 +12,13 @@ export default function handleRequest(
responseHeaders: Headers, responseHeaders: Headers,
remixContext: EntryContext remixContext: EntryContext
) { ) {
return isbot(request.headers.get("user-agent")) let markup = renderToString(
? handleBotRequest( <RemixServer context={remixContext} url={request.url} />
request,
responseStatusCode,
responseHeaders,
remixContext
)
: handleBrowserRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
); );
} responseHeaders.set('Content-Type', 'text/html');
function handleBotRequest( return new Response(`<!DOCTYPE html>${injectStyles(markup, server)}`, {
request: Request, status: responseStatusCode,
responseStatusCode: number, headers: responseHeaders
responseHeaders: Headers,
remixContext: EntryContext
) {
return new Promise((resolve, reject) => {
let didError = false;
const { pipe, abort } = renderToPipeableStream(
<RemixServer context={remixContext} url={request.url} />,
{
onAllReady() {
const body = new PassThrough();
responseHeaders.set("Content-Type", "text/html");
resolve(
new Response(body, {
headers: responseHeaders,
status: didError ? 500 : responseStatusCode,
})
);
pipe(body);
},
onShellError(error: unknown) {
reject(error);
},
onError(error: unknown) {
didError = true;
console.error(error);
},
}
);
setTimeout(abort, ABORT_DELAY);
});
}
function handleBrowserRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
return new Promise((resolve, reject) => {
let didError = false;
const { pipe, abort } = renderToPipeableStream(
<RemixServer context={remixContext} url={request.url} />,
{
onShellReady() {
const body = new PassThrough();
responseHeaders.set("Content-Type", "text/html");
resolve(
new Response(body, {
headers: responseHeaders,
status: didError ? 500 : responseStatusCode,
})
);
pipe(body);
},
onShellError(err: unknown) {
reject(err);
},
onError(error: unknown) {
didError = true;
console.error(error);
},
}
);
setTimeout(abort, ABORT_DELAY);
}); });
} }