chore: setup app entries with mantine

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

View file

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

View file

@ -1,11 +1,10 @@
import { PassThrough } from "stream";
import type { EntryContext } from "@remix-run/node";
import { Response } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import isbot from "isbot";
import { renderToPipeableStream } from "react-dom/server";
import type { EntryContext } from '@remix-run/node';
import { Response } from '@remix-run/node';
import { RemixServer } from '@remix-run/react';
import { renderToString } from 'react-dom/server';
import { injectStyles, createStylesServer } from '@mantine/remix';
const ABORT_DELAY = 5000;
const server = createStylesServer();
export default function handleRequest(
request: Request,
@ -13,99 +12,13 @@ export default function handleRequest(
responseHeaders: Headers,
remixContext: EntryContext
) {
return isbot(request.headers.get("user-agent"))
? handleBotRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
)
: handleBrowserRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
let markup = renderToString(
<RemixServer context={remixContext} url={request.url} />
);
}
responseHeaders.set('Content-Type', 'text/html');
function handleBotRequest(
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} />,
{
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);
return new Response(`<!DOCTYPE html>${injectStyles(markup, server)}`, {
status: responseStatusCode,
headers: responseHeaders
});
}