build: rename json-validation to check-assets, improve error messages (@fehmer) (#6933)

- **improve error messages**
- **rename json-validation to check-assets**

frontend/package.json

@@ -7,7 +7,7 @@
     "eslint": "eslint \"./**/*.ts\"",
     "oxlint": "oxlint .",
     "lint": "npm run oxlint && npm run eslint",
-    "validate-json": "tsx ./scripts/json-validation.ts",
+    "check-assets": "tsx ./scripts/check-assets.ts",
     "audit": "vite-bundle-visualizer",
     "dep-graph": "madge -c -i \"dep-graph.png\" ./src/ts",
     "ts-check": "tsc --noEmit",
@@ -15,8 +15,8 @@
     "madge": " madge --circular --extensions ts ./src",
     "start": "vite preview --port 3000",
     "dev": "vite dev",
-    "deploy-live": "npm run validate-json && npm run build && firebase deploy -P live --only hosting",
-    "deploy-preview": "npm run validate-json && npm run build && firebase hosting:channel:deploy preview -P live --expires 2h",
+    "deploy-live": "npm run check-assets && npm run build && firebase deploy -P live --only hosting",
+    "deploy-preview": "npm run check-assets && npm run build && firebase hosting:channel:deploy preview -P live --expires 2h",
     "test": "vitest run",
     "test-coverage": "vitest run --coverage",
     "dev-test": "concurrently --kill-others \"vite dev\" \"vitest\"",

frontend/scripts/check-assets.ts

@@ -1,8 +1,8 @@
 /**
  * Example usage in root or frontend:
- * pnpm validate-json (npm run validate-json)
+ * pnpm check-assets (npm run check-assets)
  * pnpm vaildate-json quotes others(npm run vaildate-json quotes others)
- * pnpm validate-json challenges fonts -p (npm run validate-json challenges fonts -- -p)
+ * pnpm check-assets challenges fonts -p (npm run check-assets challenges fonts -- -p)
  */
 
 import * as fs from "fs";
@@ -106,7 +106,7 @@ async function validateChallenges(): Promise<void> {
 async function validateLayouts(): Promise<void> {
   const problems = new Problems<Layout, "_additional">("Layouts", {
     _additional:
-      "Additional layout files not declared in frontend/src/ts/constants/layouts.ts",
+      "Layout files present but missing in packages/schemas/src/layouts.ts",
   });
 
   for (let layoutName of LayoutsList) {
@@ -138,8 +138,7 @@ async function validateLayouts(): Promise<void> {
   const additionalLayoutFiles = fs
     .readdirSync("./static/layouts")
     .map((it) => it.substring(0, it.length - 5))
-    .filter((it) => !LayoutsList.some((layout) => layout === it))
-    .map((it) => `frontend/static/layouts/${it}.json`);
+    .filter((it) => !LayoutsList.some((layout) => layout === it));
   if (additionalLayoutFiles.length !== 0) {
     additionalLayoutFiles.forEach((it) => problems.add("_additional", it));
   }
@@ -239,9 +238,9 @@ async function validateLanguages(): Promise<void> {
     "Languages",
     {
       _additional:
-        "Additional language files not declared in frontend/src/ts/constants/languages.ts",
+        "Language files present but missing in packages/schemas/src/languages.ts",
       _groups:
-        "Problems in LanguageGroups on frontend/src/ts/constants/languages.ts",
+        "Problems in LanguageGroups in frontend/src/ts/constants/languages.ts",
     }
   );
 
@@ -290,7 +289,6 @@ async function validateLanguages(): Promise<void> {
   fs.readdirSync("./static/languages")
     .map((it) => it.substring(0, it.length - 5))
     .filter((it) => !LanguageList.some((language) => language === it))
-    .map((it) => `frontend/static/languages/${it}.json`)
     .forEach((it) => problems.add("_additional", it));
 
   //check groups
@@ -334,7 +332,7 @@ async function validateLanguages(): Promise<void> {
 async function validateFonts(): Promise<void> {
   const problems = new Problems<KnownFontName, "_additional">("Fonts", {
     _additional:
-      "Additional font files not declared in frontend/src/ts/constants/fonts.ts",
+      "Font files present but missing in frontend/src/ts/constants/fonts.ts",
   });
 
   //no missing files
@@ -367,7 +365,6 @@ async function validateFonts(): Promise<void> {
 
   fontFiles
     .filter((name) => !expectedFontFiles.has(name))
-    .map((name) => `frontend/static/webfonts/${name}`)
     .forEach((file) => problems.add("_additional", file));
 
   console.log(problems.toString());
@@ -380,7 +377,7 @@ async function validateFonts(): Promise<void> {
 async function validateThemes(): Promise<void> {
   const problems = new Problems<ThemeName, "_additional">("Themes", {
     _additional:
-      "Additional theme files not declared in frontend/src/ts/constants/themes.ts",
+      "Theme files present but missing in frontend/src/ts/constants/themes.ts",
   });
 
   //no missing files
@@ -396,7 +393,6 @@ async function validateThemes(): Promise<void> {
   //additional theme files
   themeFiles
     .filter((it) => !ThemesList.some((theme) => theme.name === it))
-    .map((it) => `frontend/static/themes/${it}.css`)
     .forEach((it) => problems.add("_additional", it));
 
   console.log(problems.toString());

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "full-check": "turbo lint ts-check build test integration-test validate-json --force",
+    "full-check": "turbo lint ts-check build test integration-test check-assets --force",
     "prepare": "husky install",
     "pre-commit": "lint-staged",
     "ts-check": "turbo run ts-check",
@@ -54,10 +54,10 @@
     "pretty-fix-assets": "prettier --write ./frontend/static",
     "pretty-fix-pkg": "prettier --write ./packages",
     "lint-json-assets": "cd frontend && eslint \"./static/**/*.json\"",
-    "validate-json": "turbo validate-json --filter @monkeytype/frontend",
-    "check-assets-quotes": "turbo validate-json --filter @monkeytype/frontend  -- quotes",
-    "check-assets-languages": "turbo validate-json --filter @monkeytype/frontend  -- languages",
-    "check-assets-others": "turbo validate-json --filter @monkeytype/frontend  -- others",
+    "check-assets": "turbo check-assets --filter @monkeytype/frontend",
+    "check-assets-quotes": "turbo check-assets --filter @monkeytype/frontend  -- quotes",
+    "check-assets-languages": "turbo check-assets --filter @monkeytype/frontend  -- languages",
+    "check-assets-others": "turbo check-assets --filter @monkeytype/frontend  -- others",
     "knip": "knip"
   },
   "engines": {

packages/release/src/index.js

@@ -179,7 +179,7 @@ const buildProject = () => {
 
   if (isFrontend && !isBackend) {
     runProjectRootCommand(
-      "SENTRY=1 npx turbo lint test validate-json build --filter @monkeytype/frontend --force"
+      "SENTRY=1 npx turbo lint test check-assets build --filter @monkeytype/frontend --force"
     );
   } else if (isBackend && !isFrontend) {
     runProjectRootCommand(
@@ -187,7 +187,7 @@ const buildProject = () => {
     );
   } else {
     runProjectRootCommand(
-      "SENTRY=1 npx turbo lint test validate-json build --force"
+      "SENTRY=1 npx turbo lint test check-assets build --force"
     );
   }
 };

turbo.json

@@ -31,7 +31,7 @@
     "start": {
       "dependsOn": ["build"]
     },
-    "@monkeytype/frontend#validate-json": {
+    "@monkeytype/frontend#check-assets": {
       "dependsOn": ["^parallel", "@monkeytype/schemas#build"]
     },
     "@monkeytype/frontend#build": {