build: generate icons from a Vite plugin and run the server as TypeScript

.github/workflows/deploy.yml

@@ -30,9 +30,6 @@ jobs:
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
 
-      - name: 🖼 Build icons
-        run: npm run build:icons
-
       - name: 🔬 Lint
         run: npm run lint
 
@@ -54,9 +51,6 @@ jobs:
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
 
-      - name: 🖼 Build icons
-        run: npm run build:icons
-
       - name: 🔎 Type check
         run: npm run typecheck --if-present
 
@@ -75,9 +69,6 @@ jobs:
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
 
-      - name: 🖼 Build icons
-        run: npm run build:icons
-
       - name: 🏗 Build
         run: npm run build
 

.gitignore

@@ -2,7 +2,6 @@ node_modules
 .DS_store
 
 /build
-/server-build
 .env
 .cache
 

.prettierignore

@@ -2,7 +2,6 @@ node_modules
 
 /build
 /public/build
-/server-build
 .env
 
 /test-results/

app/routes/_seo+/sitemap[.]xml.ts

@@ -9,10 +9,10 @@ export function loader({ request }: Route.LoaderArgs) {
 	// generateSitemap needs React Router's server route manifest. It used to
 	// arrive as `context.serverBuild`, but React Router 8 requires
 	// getLoadContext to return a RouterContextProvider, and a createContext()
-	// symbol cannot be shared between server/index.ts and the app because
-	// esbuild and Vite produce separate module graphs, so each side would hold
-	// a different context object. Reading the manifest straight out of the
-	// server build keeps it inside the app's own module graph instead.
+	// symbol cannot be shared between server/index.ts and the app because Node
+	// and Vite produce separate module graphs, so each side would hold a
+	// different context object. Reading the manifest straight out of the server
+	// build keeps it inside the app's own module graph instead.
 	return generateSitemap(request, serverRoutes, {
 		siteUrl: getDomainUrl(request),
 		headers: {

eslint.config.js

@@ -14,6 +14,11 @@ export default [
 		},
 	},
 	{
-		ignores: ['.react-router/*'],
+		// Generated, gitignored, and absent in CI, so linting them here would
+		// only ever see files no other machine has. tsconfig picks the sprite's
+		// types up (it is a real module now), so a leftover .d.ts from the
+		// script this replaced would otherwise fail lint as a file "not found
+		// by the project service".
+		ignores: ['.react-router/*', 'app/components/ui/icons/*'],
 	},
 ]

index.js → index.ts

@@ -16,8 +16,6 @@ sourceMapSupport.install({
 	},
 })
 
-if (process.env.NODE_ENV === 'production') {
-	await import('./server-build/index.js')
-} else {
-	await import('./server/index.ts')
-}
+// Node strips the types off this and the rest of the server graph, so there is
+// no compiled copy of it to pick between in development and production.
+await import('./server/index.ts')

other/Dockerfile

@@ -54,7 +54,6 @@ WORKDIR /myapp
 
 COPY --from=production-deps /myapp/node_modules /myapp/node_modules
 
-COPY --from=build /myapp/server-build /myapp/server-build
 COPY --from=build /myapp/build /myapp/build
 COPY --from=build /myapp/package.json /myapp/package.json
 COPY --from=build /myapp/app/components/ui/icons /myapp/app/components/ui/icons

other/sly/sly.json

@@ -4,7 +4,6 @@
 		{
 			"name": "tabler-icons",
 			"directory": "./other/svg-icons",
-			"postinstall": ["npm", "run", "build:icons"],
 			"transformers": ["transform-icon.ts"]
 		}
 	]

other/svg-icons/README.md

@@ -5,7 +5,9 @@ under MIT: https://github.com/radix-ui/icons/blob/master/LICENSE
 
 It's important that you only add icons to this directory that the application
 actually needs as there's no "tree-shaking" for sprites. If you wish to manually
-split up your SVG sprite into multiple files, you'll need to update the
-`build-icons.ts` script to do that.
+split up your SVG sprite into multiple files, you'll need to pass a second
+config to `iconsSpritesheet` in `vite.config.ts` to do that.
 
-Run `npm run build:icons` to update the sprite.
+The sprite and the icon name types are regenerated by the Vite plugin on every
+build, on `npm run dev`, and whenever a file in this directory is added, changed
+or deleted. There is no separate script to run.