Update to latest Epic Stack ❖

heat-stack/app/components/ui/input-otp.tsx

@@ -40,7 +40,7 @@ const InputOTPSlot = React.forwardRef<
 		<div
 			ref={ref}
 			className={cn(
-				'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+				'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-base md:text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
 				isActive && 'z-10 ring-2 ring-ring ring-offset-background',
 				className,
 			)}
@@ -67,4 +67,4 @@ const InputOTPSeparator = React.forwardRef<
 ))
 InputOTPSeparator.displayName = 'InputOTPSeparator'
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

heat-stack/app/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 			<input
 				type={type}
 				className={cn(
-					'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid',
+					'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid',
 					className,
 				)}
 				ref={ref}

heat-stack/app/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 		return (
 			<textarea
 				className={cn(
-					'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid',
+					'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid',
 					className,
 				)}
 				ref={ref}

heat-stack/app/entry.server.tsx

@@ -1,4 +1,4 @@
-import { PassThrough } from 'stream'
+import { PassThrough } from 'node:stream'
 import {
 	createReadableStreamFromReadable,
 	type LoaderFunctionArgs,
@@ -110,7 +110,7 @@ export function handleError(
 			true,
 		)
 	} else {
-		console.error(chalk.red(error))
+		console.error(error)
 		Sentry.captureException(error)
 	}
 }

heat-stack/app/root.tsx

@@ -20,7 +20,8 @@ import {
 import { withSentry } from '@sentry/remix'
 import { useRef } from 'react'
 import { HoneypotProvider } from 'remix-utils/honeypot/react'
-// import { z } from 'zod'
+import appleTouchIconAssetUrl from './assets/favicons/apple-touch-icon.png'
+import faviconAssetUrl from './assets/favicons/favicon.svg'
 import { GeneralErrorBoundary } from './components/error-boundary.tsx'
 import { EpicProgress } from './components/progress-bar.tsx'
 import { SearchBar } from './components/search-bar.tsx'
@@ -35,7 +36,6 @@ import {
 } from './components/ui/dropdown-menu.tsx'
 import { Icon, href as iconsHref } from './components/ui/icon.tsx'
 import { EpicToaster } from './components/ui/sonner.tsx'
-// import { ThemeSwitch, useTheme } from './routes/resources+/theme-switch.tsx'
 import tailwindStyleSheetUrl from './styles/tailwind.css?url'
 import { getUserId, logout } from './utils/auth.server.ts'
 import { ClientHintCheck, getHints } from './utils/client-hints.tsx'
@@ -44,7 +44,6 @@ import { getEnv } from './utils/env.server.ts'
 import { honeypot } from './utils/honeypot.server.ts'
 import { combineHeaders, getDomainUrl, getUserImgSrc } from './utils/misc.tsx'
 import { useNonce } from './utils/nonce-provider.ts'
-// import { type Theme, getTheme } from './utils/theme.server.ts'
 import { makeTimings, time } from './utils/timing.server.ts'
 import { getToast } from './utils/toast.server.ts'
 import { useOptionalUser, useUser } from './utils/user.ts'
@@ -53,19 +52,13 @@ export const links: LinksFunction = () => {
 	return [
 		// Preload svg sprite as a resource to avoid render blocking
 		{ rel: 'preload', href: iconsHref, as: 'image' },
-		{ rel: 'mask-icon', href: '/favicons/mask-icon.svg' },
-		{
-			rel: 'alternate icon',
-			type: 'image/png',
-			href: '/favicons/favicon-32x32.png',
-		},
-		{ rel: 'apple-touch-icon', href: '/favicons/apple-touch-icon.png' },
+		{ rel: 'icon', type: 'image/svg+xml', href: faviconAssetUrl },
+		{ rel: 'apple-touch-icon', href: appleTouchIconAssetUrl },
 		{
 			rel: 'manifest',
 			href: '/site.webmanifest',
 			crossOrigin: 'use-credentials',
 		} as const, // necessary to make typescript happy
-		{ rel: 'icon', type: 'image/svg+xml', href: '/favicons/favicon.svg' },
 		{ rel: 'stylesheet', href: tailwindStyleSheetUrl },
 	].filter(Boolean)
 }

heat-stack/app/routes/_seo+/sitemap[.]xml.ts

@@ -3,8 +3,8 @@ import { type ServerBuild, type LoaderFunctionArgs } from '@remix-run/node'
 import { getDomainUrl } from '#app/utils/misc.tsx'
 
 export async function loader({ request, context }: LoaderFunctionArgs) {
-	const serverBuild = (await context.serverBuild) as ServerBuild
-	return generateSitemap(request, serverBuild.routes, {
+	const serverBuild = (await context.serverBuild) as { build: ServerBuild }
+	return generateSitemap(request, serverBuild.build.routes, {
 		siteUrl: getDomainUrl(request),
 		headers: {
 			'Cache-Control': `public, max-age=${60 * 5}`,

heat-stack/app/utils/cache.server.ts

@@ -1,4 +1,4 @@
-import fs from 'fs'
+import fs from 'node:fs'
 import {
 	cachified as baseCachified,
 	verboseReporter,

heat-stack/index.js

@@ -1,5 +1,5 @@
 import 'dotenv/config'
-import * as fs from 'fs'
+import * as fs from 'node:fs'
 import chalk from 'chalk'
 import closeWithGrace from 'close-with-grace'
 import sourceMapSupport from 'source-map-support'

heat-stack/other/build-server.ts

@@ -1,5 +1,5 @@
-import path from 'path'
-import { fileURLToPath } from 'url'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 import esbuild from 'esbuild'
 import fsExtra from 'fs-extra'
 import { globSync } from 'glob'

heat-stack/package.json

@@ -161,8 +161,8 @@
     "node": "20"
   },
   "epic-stack": {
-    "head": "b2f899fec54a76c1e0e863dadad6e9340af5ca1b",
-    "date": "2024-08-15T23:19:44Z"
+    "head": "1f76cd816c07c9bc0ab73bd339a02c98ff34f7ae",
+    "date": "2024-09-17T22:17:16Z"
   },
   "prisma": {
     "seed": "tsx prisma/seed.ts"

heat-stack/public/favicons/README.md

@@ -1,9 +1,10 @@
 # Favicon
 
-This directory has a few versions of icons to account for different devices. In
-some cases, we cannot reliably detect light/dark mode preference. Hence some of
-the icons in here should not have a transparent background. These icons are
+This directory has the icons used for android devices. In
+some cases, we cannot reliably detect light/dark mode preference. Hence these icons should not have a transparent background. These icons are
 referenced in the `site.webmanifest` file.
 
+The icons used by modern browsers and Apple devices are in `app/assets/favicons` as they can be imported with a fingerprint to bust the browser cache.
+
 Note, there's also a `favicon.ico` in the root of `/public` which some older
 browsers will request automatically. This is a fallback for those browsers.

heat-stack/server/index.ts

@@ -1,4 +1,4 @@
-import crypto from 'crypto'
+import crypto from 'node:crypto'
 import { createRequestHandler } from '@remix-run/express'
 import { type ServerBuild } from '@remix-run/node'
 import { ip as ipAddress } from 'address'
@@ -39,7 +39,6 @@ app.set('trust proxy', true)
 // ensure HTTPS only (X-Forwarded-Proto comes from Fly)
 app.use((req, res, next) => {
 	if (req.method !== 'GET') return next()
-
 	const proto = req.get('X-Forwarded-Proto')
 	const host = getHost(req)
 	if (proto === 'http') {
@@ -199,13 +198,19 @@ app.use((req, res, next) => {
 })
 
 async function getBuild() {
-	const build = viteDevServer
-		? viteDevServer.ssrLoadModule('virtual:remix/server-build')
-		: // @ts-ignore this should exist before running the server
-			// but it may not exist just yet.
-			await import('../build/server/index.js')
-	// not sure how to make this happy 🤷‍♂️
-	return build as unknown as ServerBuild
+	try {
+		const build = viteDevServer
+			? await viteDevServer.ssrLoadModule('virtual:remix/server-build')
+			: // @ts-expect-error - the file might not exist yet but it will
+				// eslint-disable-next-line import/no-unresolved
+				await import('../build/server/index.js')
+
+		return { build: build as unknown as ServerBuild, error: null }
+	} catch (error) {
+		// Catch error and return null to make express happy and avoid an unrecoverable crash
+		console.error('Error creating build:', error)
+		return { error: error, build: null as unknown as ServerBuild }
+	}
 }
 
 if (!ALLOW_INDEXING) {
@@ -223,7 +228,14 @@ app.all(
 			serverBuild: getBuild(),
 		}),
 		mode: MODE,
-		build: getBuild,
+		build: async () => {
+			const { error, build } = await getBuild()
+			// gracefully "catch" the error
+			if (error) {
+				throw error
+			}
+			return build
+		},
 	}),
 )
 

heat-stack/tests/e2e/note-images.test.ts

@@ -1,4 +1,4 @@
-import fs from 'fs'
+import fs from 'node:fs'
 import { faker } from '@faker-js/faker'
 import { type NoteImage, type Note } from '@prisma/client'
 import { prisma } from '#app/utils/db.server.ts'

heat-stack/vite.config.ts

@@ -12,11 +12,15 @@ export default defineConfig({
 		cssMinify: MODE === 'production',
 
 		rollupOptions: {
-			external: [/node:.*/, 'stream', 'crypto', 'fsevents'],
+			external: [/node:.*/, 'fsevents'],
 		},
 
 		assetsInlineLimit: (source: string) => {
-			if (source.endsWith('sprite.svg')) {
+			if (
+				source.endsWith('sprite.svg') ||
+				source.endsWith('favicon.svg') ||
+				source.endsWith('apple-touch-icon.png')
+			) {
 				return false
 			}
 		},
@@ -30,27 +34,31 @@ export default defineConfig({
 	},
 	plugins: [
 		envOnlyMacros(),
-		remix({
-			ignoredRouteFiles: ['**/*'],
-			serverModuleFormat: 'esm',
-			routes: async (defineRoutes) => {
-				return flatRoutes('routes', defineRoutes, {
-					ignoredRouteFiles: [
-						'.*',
-						'**/*.css',
-						'**/*.test.{js,jsx,ts,tsx}',
-						'**/__*.*',
-						// This is for server-side utilities you want to colocate
-						// next to your routes without making an additional
-						// directory. If you need a route that includes "server" or
-						// "client" in the filename, use the escape brackets like:
-						// my-route.[server].tsx
-						'**/*.server.*',
-						'**/*.client.*',
-					],
-				})
-			},
-		}),
+		// it would be really nice to have this enabled in tests, but we'll have to
+		// wait until https://github.com/remix-run/remix/issues/9871 is fixed
+		process.env.NODE_ENV === 'test'
+			? null
+			: remix({
+					ignoredRouteFiles: ['**/*'],
+					serverModuleFormat: 'esm',
+					routes: async (defineRoutes) => {
+						return flatRoutes('routes', defineRoutes, {
+							ignoredRouteFiles: [
+								'.*',
+								'**/*.css',
+								'**/*.test.{js,jsx,ts,tsx}',
+								'**/__*.*',
+								// This is for server-side utilities you want to colocate
+								// next to your routes without making an additional
+								// directory. If you need a route that includes "server" or
+								// "client" in the filename, use the escape brackets like:
+								// my-route.[server].tsx
+								'**/*.server.*',
+								'**/*.client.*',
+							],
+						})
+					},
+				}),
 		process.env.SENTRY_AUTH_TOKEN
 			? sentryVitePlugin({
 					disable: MODE !== 'production',
@@ -72,4 +80,14 @@ export default defineConfig({
 				})
 			: null,
 	],
+	test: {
+		include: ['./app/**/*.test.{ts,tsx}'],
+		setupFiles: ['./tests/setup/setup-test-env.ts'],
+		globalSetup: ['./tests/setup/global-setup.ts'],
+		restoreMocks: true,
+		coverage: {
+			include: ['app/**/*.{ts,tsx}'],
+			all: true,
+		},
+	},
 })