[dx] Derive vercel routes from react-router config (#2937)

I had some free time at the end of the week so I investigated the idea
of deriving the vercel routing config from the react-router config, then
storing the derived vercel route info in a jest snapshot, and then
loading the jest snapshot during the build script.

Seems to work well!



### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]

apps/dotcom/scripts/build.ts

@@ -4,8 +4,30 @@ import { exec } from '../../../scripts/lib/exec'
 import { Config } from './vercel-output-config'
 
 import { config } from 'dotenv'
+import json5 from 'json5'
 import { nicelog } from '../../../scripts/lib/nicelog'
-import { SPA_ROUTE_FILTERS } from '../spaRouteFilters'
+
+import { T } from '@tldraw/validate'
+
+// We load the list of routes that should be forwarded to our SPA's index.html here.
+// It uses a jest snapshot file because deriving the set of routes from our
+// react-router config works fine in our test environment, but is tricky to get running in this
+// build script environment for various reasons (no global React, tsx being weird about decorators, etc).
+function loadSpaRoutes() {
+	// eslint-disable-next-line @typescript-eslint/no-var-requires
+	const routesJson = require('../src/__snapshots__/routes.test.tsx.snap')['the_routes 1']
+	const routes = T.arrayOf(
+		T.object({
+			reactRouterPattern: T.string,
+			vercelRouterPattern: T.string,
+		})
+	).validate(json5.parse(routesJson))
+	return routes.map((route) => ({
+		check: true,
+		src: route.vercelRouterPattern,
+		dest: '/index.html',
+	}))
+}
 
 config({
 	path: './.env.local',
@@ -14,6 +36,9 @@ config({
 nicelog('The multiplayer server is', process.env.MULTIPLAYER_SERVER)
 
 async function build() {
+	// make sure we have the latest routes
+	await exec('yarn', ['test', 'src/routes.test.tsx'])
+	const spaRoutes = loadSpaRoutes()
 	await exec('vite', ['build', '--emptyOutDir'])
 	await exec('yarn', ['run', '-T', 'sentry-cli', 'sourcemaps', 'inject', 'dist/assets'])
 	// Clear output static folder (in case we are running locally and have already built the app once before)
@@ -22,12 +47,6 @@ async function build() {
 	await exec('cp', ['-r', 'dist', '.vercel/output/static'])
 	await exec('rm', ['-rf', ...glob.sync('.vercel/output/static/**/*.js.map')])
 
-	const spaRoutes = SPA_ROUTE_FILTERS.map((route) => ({
-		check: true,
-		src: route,
-		dest: '/index.html',
-	}))
-
 	writeFileSync(
 		'.vercel/output/config.json',
 		JSON.stringify(