bun

Signed-off-by: Logan McAnsh <[email protected]>

app/entry.server.tsx

@@ -1,73 +1,48 @@
 import crypto from "node:crypto";
-import { Readable } from "node:stream";
-import type { EntryContext, HandleDataRequestFunction } from "@remix-run/node";
-import { Response } from "@remix-run/node";
+import type {
+	EntryContext,
+	HandleDataRequestFunction,
+} from "@remix-run/server-runtime";
 import { RemixServer } from "@remix-run/react";
 import { createSecureHeaders } from "@mcansh/remix-secure-headers";
-import { renderToPipeableStream } from "react-dom/server";
 import { isPrefetch, preloadRouteAssets } from "remix-utils";
 import isbot from "isbot";
+import { renderToReadableStream } from "react-dom/server";
 
 import { NonceContext } from "./components/nonce";
 
-const ABORT_DELAY = 5_000;
-
 export default async function handleRequest(
 	request: Request,
 	responseStatusCode: number,
 	responseHeaders: Headers,
 	remixContext: EntryContext,
 ) {
 	preloadRouteAssets(remixContext, responseHeaders);
-	let callback = isbot(request.headers.get("user-agent"))
-		? "onAllReady"
-		: "onShellReady";
 
 	let nonce = applySecurityHeaders(responseHeaders);
 
-	return new Promise((resolve, reject) => {
-		let shellRendered = false;
-		let { pipe, abort } = renderToPipeableStream(
-			<NonceContext.Provider value={nonce}>
-				<RemixServer
-					context={remixContext}
-					url={request.url}
-					abortDelay={ABORT_DELAY}
-				/>
-			</NonceContext.Provider>,
-			{
-				nonce,
-				[callback]() {
-					shellRendered = true;
-					let body = new Readable.PassThrough();
-
-					responseHeaders.set("Content-Type", "text/html");
-
-					resolve(
-						new Response(Readable.toWeb(body) as ReadableStream, {
-							headers: responseHeaders,
-							status: responseStatusCode,
-						}),
-					);
-
-					pipe(body);
-				},
-				onShellError(error) {
-					reject(error);
-				},
-				onError(error) {
-					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);
-					}
-				},
+	let body = await renderToReadableStream(
+		<NonceContext.Provider value={nonce}>
+			<RemixServer context={remixContext} url={request.url} />
+		</NonceContext.Provider>,
+		{
+			nonce,
+			onError(error, errorInfo) {
+				// log streaming render errors from inside the shell
+				console.error(error, errorInfo);
+				responseStatusCode = 500;
 			},
-		);
+		},
+	);
+
+	if (isbot(request.headers.get("user-agent"))) {
+		await body.allReady;
+	}
 
-		setTimeout(abort, ABORT_DELAY);
+	responseHeaders.set("Content-Type", "text/html");
+	return new Response(body, {
+		status: responseStatusCode,
+		headers: responseHeaders,
 	});
 }
 

app/root.tsx

@@ -1,5 +1,8 @@
 import * as React from "react";
-import type { LinksFunction, V2_MetaFunction } from "@remix-run/node";
+import type {
+	LinksFunction,
+	V2_ServerRuntimeMetaFunction as V2_MetaFunction,
+} from "@remix-run/server-runtime";
 import {
 	isRouteErrorResponse,
 	Links,

app/routes/[.well-known].avatar.ts

@@ -1,4 +1,4 @@
-import type { DataFunctionArgs } from "@remix-run/node";
+import type { DataFunctionArgs } from "@remix-run/server-runtime";
 
 import { getCloudinaryURL } from "~/cloudinary.server";
 

app/routes/_index.tsx

@@ -2,7 +2,7 @@ import {
 	json,
 	type HeadersFunction,
 	type LinksFunction,
-} from "@remix-run/node";
+} from "@remix-run/server-runtime";
 import { useLoaderData } from "@remix-run/react";
 import { cacheHeader } from "pretty-cache-header";
 

app/routes/resume.tsx

@@ -1,5 +1,5 @@
-import type { HeadersFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import type { HeadersFunction } from "@remix-run/server-runtime";
+import { json } from "@remix-run/server-runtime";
 import type { V2_MetaFunction } from "@remix-run/react";
 import { useLoaderData } from "@remix-run/react";
 import { cacheHeader } from "pretty-cache-header";

package.json

@@ -5,11 +5,11 @@
 	"author": "Logan McAnsh <[email protected]> (https://mcan.sh)",
 	"license": "MIT",
 	"sideEffects": false,
-	"type": "commonjs",
+	"type": "module",
 	"scripts": {
 		"build": "run-s type-check && remix build",
 		"clean": "./scripts/clean.mjs",
-		"dev": "remix dev",
+		"dev": "remix dev -c \"bun server.ts\"",
 		"type-check": "tsc",
 		"lint": "eslint --ignore-path .gitignore --cache --fix .",
 		"format": "prettier --ignore-path .gitignore --ignore-unknown --write .",
@@ -18,16 +18,14 @@
 	},
 	"dependencies": {
 		"@mcansh/remix-secure-headers": "^0.7.2",
-		"@remix-run/node": "1.19.3",
 		"@remix-run/react": "1.19.3",
+		"@remix-run/server-runtime": "1.19.3",
 		"cloudinary-build-url": "^0.2.4",
 		"clsx": "^2.0.0",
-		"compression": "^1.7.4",
 		"cross-env": "^7.0.3",
 		"fathom-client": "^3.5.0",
 		"is-ci": "^3.0.1",
 		"isbot": "^3.6.13",
-		"morgan": "^1.10.0",
 		"pretty-cache-header": "^1.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
@@ -38,14 +36,11 @@
 		"@cld-apis/types": "^0.1.6",
 		"@remix-run/dev": "1.19.3",
 		"@remix-run/eslint-config": "1.19.3",
-		"@remix-run/serve": "1.19.3",
-		"@types/node": "^20.6.0",
 		"@types/react": "^18.2.21",
 		"@types/react-dom": "^18.2.7",
 		"@typescript/lib-dom": "npm:@types/web@^0.0.114",
 		"autoprefixer": "^10.4.15",
-		"aws-cdk-lib": "2.91.0",
-		"constructs": "10.2.69",
+		"bun-types": "latest",
 		"del": "^7.1.0",
 		"eslint": "^8.49.0",
 		"eslint-plugin-prefer-let": "^3.0.1",

remix.config.js

@@ -1,7 +1,7 @@
-const path = require("node:path");
+import path from "node:path";
 
 /** @type {import('@remix-run/dev').AppConfig}*/
-module.exports = {
+export default {
 	ignoredRouteFiles: ["**/.*"],
 	appDirectory: "app",
 	assetsBuildDirectory: "public/build",
@@ -10,7 +10,7 @@ module.exports = {
 	tailwind: true,
 	postcss: true,
 	serverBuildPath: "build/index.js",
-	serverModuleFormat: "cjs",
+	serverModuleFormat: "esm",
 	future: {
 		v2_dev: true,
 		v2_errorBoundary: true,

remix.env.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="@remix-run/dev" />
-/// <reference types="@remix-run/node" />
+/// <reference types="@remix-run/server-runtime" />

scripts/clean.mjs

@@ -14,7 +14,7 @@ async function clean() {
 
 	let files = globSync("**/*", {
 		absolute: true,
-		ignore: ["node_modules/**/*", ".vercel/**/*"],
+		ignore: ["node_modules/**/*"],
 		nodir: true,
 		cwd,
 	});

server.ts

@@ -0,0 +1,23 @@
+import type { ServerBuild } from "@remix-run/server-runtime";
+import { createRequestHandler, logDevReady } from "@remix-run/server-runtime";
+import path from "node:path";
+import { type Serve } from "bun";
+
+import * as build from "./build/index.js";
+
+let serverBuild = build as unknown as ServerBuild;
+
+if (Bun.env.NODE_ENV === "development") logDevReady(serverBuild);
+
+let __dirname = path.dirname(new URL(import.meta.url).pathname);
+
+export default {
+	port: Bun.env.PORT || 3000,
+	async fetch(request) {
+		let url = new URL(request.url);
+		let publicFilePath = path.join(__dirname, "public", url.pathname);
+		let file = Bun.file(publicFilePath);
+		if (await file.exists()) return new Response(file);
+		return createRequestHandler(serverBuild, Bun.env.NODE_ENV)(request);
+	},
+} satisfies Serve;

tsconfig.json

@@ -1,5 +1,5 @@
 {
-	"extends": [],
+	"exclude": ["./build", "./public/build"],
 	"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
 	"compilerOptions": {
 		"allowJs": true,
@@ -9,17 +9,19 @@
 		"incremental": true,
 		"isolatedModules": true,
 		"jsx": "react-jsx",
-		"lib": ["DOM", "DOM.Iterable", "ES2019"],
+		"lib": ["DOM", "DOM.Iterable", "ES2022"],
 		"moduleResolution": "bundler",
 		"noEmit": true,
 		"noFallthroughCasesInSwitch": true,
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"strict": true,
-		"target": "ES2019",
+		"target": "ES2022",
+		"module": "ES2022",
 		"baseUrl": ".",
 		"paths": {
 			"~/*": ["./app/*"]
-		}
+		},
+		"types": ["bun-types"]
 	}
 }