build: Prerender dynamic routes to provide all entries during SSG

.github/workflows/azure-static-web-apps-purple-pebble-028724203.yml

@@ -12,7 +12,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          submodules: true
+          submodules: "recursive"
           lfs: false
       - name: Build And Deploy
         id: builddeploy

.github/workflows/azure-static-web-apps-white-water-047c71203.yml

@@ -17,7 +17,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          submodules: true
+          submodules: "recursive"
           lfs: false
       - name: Build And Deploy
         id: builddeploy

.github/workflows/building.yml

@@ -16,6 +16,7 @@ jobs:
         with:
           ref: ${{ github.event.pull_request.head.ref }}
           fetch-depth: 0
+          submodules: "recursive"
 
       - uses: actions/setup-node@v4
         with:

.github/workflows/testing.yml

@@ -17,6 +17,7 @@ jobs:
         with:
           ref: ${{ github.event.pull_request.head.ref }}
           fetch-depth: 0
+          submodules: "recursive"
 
       - uses: actions/setup-node@v4
         with:

src/lib/features/ebd-form-header.svelte

@@ -20,34 +20,28 @@
     currentEbd: string,
     availableEbds: string[],
   ): string {
-    const formattedCurrentEbd = currentEbd.replace(/[_-]/g, "").toLowerCase();
-    return (
-      availableEbds.find(
-        (ebd) => ebd.replace(/[_-]/g, "").toLowerCase() === formattedCurrentEbd,
-      ) || ""
-    );
+    if (!currentEbd || !availableEbds.length) return "";
+    return availableEbds.find((ebd) => ebd === currentEbd) || "";
   }
 
+  // new format version <select> only causes ebd <select> to reset to placeholder
   function handleFormatVersionSelect(event: CustomEvent<string>) {
     const newFormatVersion = event.detail;
     if (newFormatVersion !== currentFormatVersion) {
       currentFormatVersion = newFormatVersion;
-      currentEbd = "";
+      currentEbd = ""; // Just reset the EBD selection
     }
   }
 
+  // ebd <select> is required for redirect and URL update
+  // [...ebd] exists only as a combination of /ebd/<formatversion>/<ebd>/
   function handleEbdSelect(event: CustomEvent<string>) {
     const newEbd = event.detail;
     if (newEbd !== currentEbd) {
       currentEbd = newEbd;
-      updateUrl(currentFormatVersion, newEbd);
-    }
-  }
-
-  function updateUrl(formatVersion: string, ebd: string) {
-    const formattedEbd = ebd.replace(/_/g, "");
-    if (formatVersion && ebd) {
-      goto(`${base}/ebd/${formatVersion}/${formattedEbd}`);
+      if (currentFormatVersion && newEbd) {
+        goto(`${base}/ebd/${currentFormatVersion}/${newEbd}`);
+      }
     }
   }
 </script>
@@ -73,12 +67,13 @@
         <EbdSelect
           ebds={currentEbds}
           {selectedEbd}
+          disabled={!currentFormatVersion}
           on:select={handleEbdSelect}
         />
       </div>
     </div>
     <div class="ml-auto">
-      <ExportButton {currentFormatVersion} {currentEbd} />
+      <ExportButton {currentFormatVersion} currentEbd={selectedEbd} />
     </div>
   </nav>
 </header>

src/lib/features/export-button.svelte

@@ -19,8 +19,7 @@
     if (!isExportReady || !currentFormatVersion || !currentEbd) return;
 
     isExportReady = false;
-    const ebdFile = `E_${currentEbd.slice(1)}`;
-    const ebdPath = `${base}/ebd/${currentFormatVersion}/${ebdFile}.svg`;
+    const ebdPath = `${base}/ebd/${currentFormatVersion}/${currentEbd}.svg`;
 
     try {
       const response = await fetch(ebdPath);
@@ -33,7 +32,7 @@
       const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = url;
-      a.download = `EBD_E_${currentEbd.slice(1)}_${currentFormatVersion}.svg`;
+      a.download = `${currentFormatVersion}-${currentEbd}.svg`;
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);

src/routes/+layout.ts

@@ -1,4 +1,4 @@
-export const prerender = "auto"; // skips prerendering [dynamic routes].
+export const prerender = true; // requires all possible entries of [dynamic routes] to be known at build time (see src/server/prerender-entries.ts)
 export const trailingSlash = "always";
 
 export const ssr = true;

src/routes/ebd/+page.svelte

@@ -21,8 +21,7 @@
   function handleEbdSelect(event: CustomEvent<string>) {
     selectedEbd = event.detail;
     if (selectedFormatVersion && selectedEbd) {
-      const formattedEbd = selectedEbd.replace(/_/g, "");
-      goto(`${base}/ebd/${selectedFormatVersion}/${formattedEbd}`);
+      goto(`${base}/ebd/${selectedFormatVersion}/${selectedEbd}`);
     }
   }
 </script>

src/routes/ebd/[...ebd]/+page.server.ts

@@ -0,0 +1,22 @@
+import { getFormatVersions } from "../../../server/format-version-loader";
+import { prerenderEntries } from "../../../server/prerender-entries";
+import type { PageServerLoad } from "./$types";
+
+export function entries() {
+  const routes = prerenderEntries();
+  return routes.map((route) => ({
+    ebd: route.ebd,
+  }));
+}
+
+export const load: PageServerLoad = async ({ params }) => {
+  const [formatVersion, ebdFile] = params.ebd.split("/");
+  const availableVersions = getFormatVersions();
+  const version = availableVersions.find((v) => v.code === formatVersion);
+
+  return {
+    formatVersion: version,
+    ebdFile,
+    svgPath: `/ebd/${formatVersion}/${ebdFile}.svg`,
+  };
+};

src/routes/ebd/[...ebd]/+page.svelte

@@ -20,8 +20,7 @@
 
     isLoading = true;
     error = null;
-    const ebdFile = `E_${ebdKey.slice(1)}`;
-    const ebdPath = `${base}/ebd/${formatVersion}/${ebdFile}.svg`;
+    const ebdPath = `${base}/ebd/${formatVersion}/${ebdKey}.svg`;
 
     try {
       const response = await fetch(ebdPath);

src/server/ebd-loader.ts

@@ -6,48 +6,32 @@ const skippedFormatVersionToInsteadFormatVersionMap: Record<string, string> = {
   FV2410: "FV2404",
 };
 
-function tryReadDir(path: string) {
-  try {
-    return readdirSync(path);
-  } catch {
-    return null;
-  }
-}
-
-// fetch submodule data from either /static/ebd (sveltekit "dev server") or /build/ebd (sveltekit "preview")
 export function getEbds(): Record<string, string[]> {
   const staticPath = join(process.cwd(), "static", "ebd");
-  const buildPath = join(process.cwd(), "build", "ebd");
   const ebds: Record<string, string[]> = {};
 
-  const basePath = tryReadDir(staticPath) ? staticPath : buildPath;
-  const formatVersions = tryReadDir(basePath);
-
-  if (!formatVersions) {
-    console.error("submodule data not found.");
-    return {};
-  }
-
   try {
+    const formatVersions = readdirSync(staticPath, { withFileTypes: true })
+      .filter((dirent) => dirent.isDirectory() && dirent.name.startsWith("FV"))
+      .map((dirent) => dirent.name);
+
     for (const formatVersion of formatVersions) {
       if (skippedFormatVersionToInsteadFormatVersionMap[formatVersion]) {
         continue;
       }
 
-      const versionPath = join(basePath, formatVersion);
-      const files = tryReadDir(versionPath);
+      const versionPath = join(staticPath, formatVersion);
+      const files = readdirSync(versionPath);
 
-      if (files) {
-        ebds[formatVersion] = files
-          .filter((file) => file.endsWith(".svg"))
-          .map((file) => file.replace(".svg", ""))
-          .sort((a, b) => a.localeCompare(b));
-      }
+      ebds[formatVersion] = files
+        .filter((file) => file.endsWith(".svg"))
+        .map((file) => file.replace(".svg", ""))
+        .sort((a, b) => a.localeCompare(b));
     }
 
     return ebds;
   } catch (error) {
-    console.error("Error loading EBDs", error);
+    console.error("error reading EBDs from submodule:", error);
     return {};
   }
 }

src/server/format-version-loader.ts

@@ -39,43 +39,33 @@ function formatVersion(version: string): FormatVersion {
   };
 }
 
-function tryReadDir(path: string) {
-  try {
-    return readdirSync(path, { withFileTypes: true });
-  } catch {
-    return null;
-  }
-}
-
-// fetch submodule data from either /static/ebd (sveltekit "dev server") or /build/ebd (sveltekit "preview")
 export function getFormatVersions(): FormatVersion[] {
   const staticPath = join(process.cwd(), "static", "ebd");
-  const buildPath = join(process.cwd(), "build", "ebd");
 
-  const dirents = tryReadDir(staticPath) || tryReadDir(buildPath);
+  try {
+    const dirents = readdirSync(staticPath, { withFileTypes: true });
+    const uniqueFormatVersion = new Set<string>();
 
-  if (!dirents) {
-    console.error("submodule data not found.");
+    return dirents
+      .filter((dirent) => dirent.isDirectory())
+      .map((dirent) => formatVersion(dirent.name))
+      .filter((version) => {
+        if (
+          Object.keys(skippedFormatVersionToInsteadFormatVersionMap).includes(
+            version.code,
+          )
+        ) {
+          return false;
+        }
+        if (uniqueFormatVersion.has(version.code)) {
+          return false;
+        }
+        uniqueFormatVersion.add(version.code);
+        return true;
+      })
+      .sort((a, b) => b.code.localeCompare(a.code));
+  } catch (error) {
+    console.error("error reading format versions from submodule:", error);
     return [];
   }
-
-  const uniqueFormatVersion = new Set<string>();
-  return dirents
-    .filter((dirent) => dirent.isDirectory())
-    .map((dirent) => formatVersion(dirent.name))
-    .filter((version) => {
-      if (
-        Object.keys(skippedFormatVersionToInsteadFormatVersionMap).includes(
-          version.code,
-        )
-      ) {
-        return false;
-      }
-      if (uniqueFormatVersion.has(version.code)) {
-        return false;
-      }
-      uniqueFormatVersion.add(version.code);
-      return true;
-    })
-    .sort((a, b) => b.code.localeCompare(a.code));
 }

src/server/prerender-entries.ts

@@ -0,0 +1,40 @@
+import { readdirSync } from "fs";
+import { join } from "path";
+
+import { getEbds } from "./ebd-loader";
+import { getFormatVersions } from "./format-version-loader";
+
+export function prerenderEntries() {
+  const staticPath = join(process.cwd(), "static", "ebd");
+  const buildPath = join(process.cwd(), "build", "ebd");
+  const basePath = readdirSync(staticPath) ? staticPath : buildPath;
+
+  const formatVersions = getFormatVersions();
+  const ebds = getEbds();
+
+  const entries = [];
+  const formatVersionCounts: Record<string, number> = {};
+
+  for (const formatVersion of formatVersions) {
+    const ebdList = ebds[formatVersion.code] || [];
+    formatVersionCounts[formatVersion.code] = ebdList.length;
+
+    for (const ebd of ebdList) {
+      entries.push({
+        ebd: `${formatVersion.code}/${ebd}`,
+        filePath: join(basePath, formatVersion.code, `${ebd}.svg`),
+      });
+    }
+  }
+
+  // logging summary for local development ($ npm run build)
+  console.log("\nEBD Prerender Summary:");
+  console.log(`Base path: ${basePath}`);
+  console.log(`Total routes: ${entries.length}`);
+  Object.entries(formatVersionCounts)
+    .sort(([a], [b]) => b.localeCompare(a))
+    .forEach(([fv, count]) => console.log(`${fv}: ${count} routes`));
+  console.log("");
+
+  return entries;
+}