Tries to implement early hints but apparently not a good fit with express due to lack of http2 support

Author: mplibunao

.gitignore

@@ -80,3 +80,7 @@ playwright/.cache/
 # Because seed scripts uses lots of media which generates multiple versions. Reduce git bloat
 apps/*/media/assets/
 scratch/
+
+# for running http2 locally
+*.key
+*.cert

README.md

@@ -27,3 +27,19 @@
 
 
 # Add cspotsourcemap
+
+
+# Preload css and preconnect (we don't have any) using early hints
+
+- [github remix run remix discussions](https://github.com/remix-run/remix/discussions/5378)
+- defer this as it might get implemented in remix
+
+# Visual regression testing
+
+- [playwright docs test snapshots](https://playwright.dev/docs/test-snapshots)
+
+# Client hints
+
+- Using kent dodds approach
+- See if you can prevent reload
+- defer as library might get published

apps/web/cert/.keep

@@ -6,8 +6,8 @@ import {
 import { createReadableStreamFromReadable } from '@remix-run/node'
 import { RemixServer } from '@remix-run/react'
 import isbot from 'isbot'
-import { renderToPipeableStream } from 'react-dom/server'
 import { PassThrough } from 'node:stream'
+import { renderToPipeableStream } from 'react-dom/server'
 
 import { IsBotProvider } from './utils/isBotProvider'
 

apps/web/src/app/entry.server.tsx

@@ -0,0 +1,106 @@
+/*
+ * The idea here is to emit "early hints" in the response based on the CSS files or other assets needed by the route
+ *
+ * Eg for a route with 3 css files we want to emit at the top of the response:
+ *
+ * HTTP/1.1 103 Early Hints
+ * Link: </build/_assets/app-XX4AKNF6.css>; rel=preload; as=style;
+ * Link: </build/_assets/react-notion-x-5KGZZXWT.css>; rel=preload; as=style;
+ * Link: </build/_assets/prism-coy-3Y5Y6EPU.css>; rel=preload; as=style;
+ */
+
+import { type LinkDescriptor, type ServerBuild } from '@remix-run/node'
+import { matchServerRoutes } from '@remix-run/server-runtime/dist/routeMatching'
+import { createRoutes } from '@remix-run/server-runtime/dist/routes'
+import { type Response } from 'express'
+import { type ExpressMiddleware } from '~/types/middlewareType'
+
+type EarlyHintAs = 'document' | 'script' | 'image' | 'style' | 'font'
+type EarlyHintCORS = 'anonymous' | 'use-credentials' | 'crossorigin'
+type EarlyHintRel =
+	| 'dns-prefetch'
+	| 'preconnect'
+	| 'prefetch'
+	| 'preload'
+	| 'prerender'
+
+export interface EarlyHintItem {
+	href: string
+	rel: EarlyHintRel
+	cors?: boolean | EarlyHintCORS
+	as?: EarlyHintAs
+}
+
+export const remixEarlyHints = (build: ServerBuild): ExpressMiddleware => {
+	const routes = createRoutes(build.routes)
+
+	return (req, res, next) => {
+		// Find the routes that match
+		const matches = matchServerRoutes(routes, req.path)
+
+		// For those routes, run their links() functions and find their links
+		const matchesLinks: LinkDescriptor[] = (matches ?? []).flatMap((match) => {
+			const { links } = match.route.module
+			return links ? links() : []
+		})
+
+		// Filter down to stylesheets and emit css resources
+		const cssResources = matchesLinks.flatMap((link) => {
+			if ('href' in link && link.rel === 'stylesheet' && link.href) {
+				return [
+					{
+						rel: 'preload',
+						as: 'style',
+						href: link.href,
+					},
+				] satisfies EarlyHintItem[]
+			}
+			return []
+		})
+
+		// you can add custom hints like preconnect to hosts
+		writeEarlyHintsLinks(cssResources, res)
+
+		next()
+	}
+}
+
+function writeEarlyHintsLinks(earlyHints: EarlyHintItem[], res: Response) {
+	const hints = earlyHints.map((earlyHint) => formatEntry(earlyHint))
+
+	res.writeEarlyHints({ link: hints })
+}
+
+const formatEntry = (earlyHint: EarlyHintItem, nodeApi = true) => {
+	const { href, rel, as = '', cors = false } = earlyHint
+
+	let _cors
+	switch (cors) {
+		case true:
+		case 'crossorigin':
+			_cors = 'crossorigin'
+			break
+		case 'anonymous':
+			_cors = 'crossorigin=anonymous'
+			break
+		case 'use-credentials':
+			_cors = 'crossorigin=use-credentials'
+			break
+		case false:
+			_cors = ''
+			break
+		default:
+			_cors = ''
+			break
+	}
+
+	if (nodeApi) {
+		return `<${href}>; rel=${rel}${as.length !== 0 ? '; as=' : ''}${as}${
+			_cors.length !== 0 ? '; ' : ''
+		}${_cors}`
+	}
+
+	return `Link: <${href}>; rel=${rel}${as.length !== 0 ? '; as=' : ''}${as}${
+		_cors.length !== 0 ? '; ' : ''
+	}${_cors}`
+}

apps/web/src/server/middleware/earlyHints.ts

@@ -94,6 +94,13 @@ function types:gen { ## Generates payload types
   pnpm -F web dev:types
 }
 
+function ssl { ## Generate ssl certificate
+  openssl req  -nodes -new -x509  \
+    -keyout ./apps/web/cert/server.key \
+    -out ./apps/web/cert/server.cert \
+    -subj "/C=US/ST=State/L=City/O=company/OU=Com/CN=www.testserver.local"
+}
+
 function dc:run { ## Docker: Runs [SERVICE] for one-off commands; Does not use ports specified in the service config preventing port collisions;
   if [ $# -eq 0 ]; then echo 1>&2 "Usage: $0 $FUNCNAME run [SERVICE] [OPTIONAL COMMANDS]
 $0 $FUNCNAME run api pnpm add -D express