--wip-- [skip ci]

Author: zoran995

.tool-versions

@@ -0,0 +1 @@
+nodejs lts

buildprocess/vite-plugins/assetPlugins.ts

@@ -0,0 +1,44 @@
+import fs from "node:fs";
+
+import type { Plugin } from "vite";
+
+/**
+ * Import XML/KML files from lib/Models as raw text strings.
+ */
+export function xmlRawPlugin(): Plugin {
+  return {
+    name: "xml-raw",
+    transform(_code, id) {
+      if (
+        (id.endsWith(".xml") || id.endsWith(".kml")) &&
+        id.includes("lib/Models")
+      ) {
+        const content = fs.readFileSync(id, "utf-8");
+        return {
+          code: `export default ${JSON.stringify(content)};`,
+          map: null
+        };
+      }
+    }
+  };
+}
+
+/**
+ * Strip moment.js locale imports to save ~500KB.
+ * Webpack used IgnorePlugin for this; in Vite we return an empty module.
+ */
+export function momentLocalePlugin(): Plugin {
+  return {
+    name: "moment-locale-strip",
+    resolveId(source, importer) {
+      if (source === "./locale" && importer && importer.includes("moment")) {
+        return "\0moment-locale-empty";
+      }
+    },
+    load(id) {
+      if (id === "\0moment-locale-empty") {
+        return "export default {};";
+      }
+    }
+  };
+}

buildprocess/vite-plugins/cesiumPlugin.ts

@@ -0,0 +1,110 @@
+import { cpSync, createReadStream, existsSync, statSync } from "node:fs";
+import path from "node:path";
+
+import type { Plugin, ResolvedConfig } from "vite";
+
+const MIME_TYPES: Record<string, string> = {
+  ".js": "application/javascript",
+  ".mjs": "application/javascript",
+  ".json": "application/json",
+  ".wasm": "application/wasm",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".xml": "application/xml",
+  ".glb": "model/gltf-binary",
+  ".bin": "application/octet-stream"
+};
+
+/**
+ * Serves Cesium Workers, Assets, and ThirdParty from the terriajs-cesium
+ * package and terriajs wwwroot static assets during dev mode.
+ *
+ * At runtime, Cesium resolves assets relative to `cesiumBaseUrl` which is
+ * set to `build/TerriaJS/build/Cesium/build/` by the app's index.js.
+ */
+export function cesiumPlugin(options: {
+  terriaJSBasePath: string;
+  cesiumDir: string;
+}): Plugin {
+  const { terriaJSBasePath, cesiumDir } = options;
+  const terriaJSWwwroot = path.join(terriaJSBasePath, "wwwroot");
+  let outDir = "";
+
+  return {
+    name: "cesium-assets",
+
+    configResolved(config: ResolvedConfig) {
+      outDir = path.resolve(config.root, config.build.outDir);
+    },
+
+    closeBundle() {
+      // Copy terriajs wwwroot → outDir/TerriaJS/ (mirrors gulp copy-terriajs-assets)
+      const destPath = path.join(outDir, "TerriaJS");
+      cpSync(terriaJSWwwroot, destPath, { recursive: true });
+    },
+
+    configureServer(server) {
+      // Serve terriajs wwwroot at /build/TerriaJS/
+      // This mirrors the gulp `copy-terriajs-assets` task
+      server.middlewares.use((req, res, next) => {
+        if (!req.url) return next();
+
+        const url = decodeURIComponent(req.url.split("?")[0]);
+
+        // Serve terriajs wwwroot assets at /build/TerriaJS/
+        if (url.startsWith("/build/TerriaJS/")) {
+          const assetPath = url.slice("/build/TerriaJS/".length);
+          const filePath = path.join(terriaJSWwwroot, assetPath);
+          return serveFile(filePath, res, next);
+        }
+
+        // Serve WASM with correct MIME type
+        if (url.endsWith(".wasm")) {
+          const wasmPath = url.startsWith("/build/")
+            ? path.join(terriaJSWwwroot, url.slice(1))
+            : null;
+          if (wasmPath && existsSync(wasmPath)) {
+            return serveFile(wasmPath, res, next);
+          }
+        }
+
+        next();
+      });
+    }
+  };
+
+  function serveFile(
+    filePath: string,
+    res: import("http").ServerResponse,
+    next: () => void
+  ) {
+    if (!existsSync(filePath) || statSync(filePath).isDirectory()) {
+      return next();
+    }
+    const ext = path.extname(filePath);
+    const mime = MIME_TYPES[ext] || "application/octet-stream";
+    res.setHeader("Content-Type", mime);
+    res.setHeader("Cache-Control", "no-cache");
+    createReadStream(filePath).pipe(res);
+  }
+}
+
+/**
+ * Strip Cesium debug pragmas in production builds.
+ * Removes code between //>>includeStart('debug') and //>>includeEnd('debug').
+ */
+export function cesiumDebugStripPlugin(cesiumDir: string): Plugin {
+  const pragmaRegex =
+    /\/\/>>includeStart\('debug', pragmas\.debug\);?[^]*?\/\/>>includeEnd\('debug'\);?/g;
+
+  return {
+    name: "cesium-strip-debug",
+    apply: "build",
+    transform(code, id) {
+      if (!id.endsWith(".js") || !id.includes(cesiumDir)) return;
+      return { code: code.replace(pragmaRegex, ""), map: null };
+    }
+  };
+}

buildprocess/vite-plugins/scssCssModulesPlugin.ts

@@ -0,0 +1,46 @@
+import fs from "node:fs";
+
+import type { Plugin } from "vite";
+
+const VIRTUAL_EXT = ".module.scss";
+const REAL_EXT = ".scss";
+
+/**
+ * Rewrites .scss imports from JS/TS files to .module.scss so Vite's CSS
+ * Modules pipeline kicks in. The `load` hook reads the actual .scss file
+ * when Vite requests the virtual .module.scss.
+ *
+ * SCSS-to-SCSS imports (@use, @import, @forward) are NOT intercepted — only
+ * JS/TS → SCSS imports are rewritten.
+ *
+ * `composes: from` is handled by vite-css-modules which routes composed
+ * dependencies through Vite's module graph for proper deduplication.
+ */
+export function scssCssModulesPlugin(): Plugin {
+  return {
+    name: "scss-css-modules",
+    enforce: "pre",
+
+    async resolveId(source, importer, options) {
+      if (!source.endsWith(REAL_EXT)) return null;
+      if (!importer || !/\.[jt]sx?$/.test(importer)) return null;
+
+      const resolved = await this.resolve(source, importer, {
+        ...options,
+        skipSelf: true
+      });
+      if (!resolved) return null;
+
+      return resolved.id.replace(/\.scss$/, VIRTUAL_EXT);
+    },
+
+    load(id) {
+      if (!id.endsWith(VIRTUAL_EXT)) return null;
+
+      const realPath = id.slice(0, -VIRTUAL_EXT.length) + REAL_EXT;
+      if (!fs.existsSync(realPath)) return null;
+
+      return fs.readFileSync(realPath, "utf-8");
+    }
+  };
+}

buildprocess/vite-plugins/svgSpritePlugin.ts

@@ -0,0 +1,123 @@
+import fs from "node:fs";
+import path from "node:path";
+
+import type { Plugin } from "vite";
+
+interface IconDir {
+  dir: string;
+  namespace: string;
+}
+
+/**
+ * Vite plugin that collects SVG icons from configured directories, compiles
+ * them into `<symbol>` elements via svg-sprite, and injects them into the HTML.
+ *
+ * Icons are scanned eagerly at startup so the sprite is ready when
+ * `transformIndexHtml` runs (before any JS modules are loaded in dev mode).
+ *
+ * Individual SVG imports return `{ id: "namespace-iconname" }` matching the
+ * shape expected by the Icon component (`<use xlinkHref={"#" + glyph.id} />`).
+ */
+export function svgSpritePlugin(iconDirs: IconDir[]): Plugin {
+  const iconRegistry = new Map<
+    string,
+    Map<string, { path: string; content: string }>
+  >();
+
+  function scanIconDirs() {
+    for (const { dir, namespace } of iconDirs) {
+      if (!fs.existsSync(dir)) continue;
+
+      const icons = new Map<string, { path: string; content: string }>();
+      for (const file of fs.readdirSync(dir)) {
+        if (!file.endsWith(".svg")) continue;
+        const filePath = path.join(dir, file);
+        icons.set(path.basename(file, ".svg"), {
+          path: filePath,
+          content: fs.readFileSync(filePath, "utf-8")
+        });
+      }
+      iconRegistry.set(namespace, icons);
+    }
+  }
+
+  async function buildSprites(): Promise<string[]> {
+    const SVGSpriter = (await import("svg-sprite")).default;
+    const spriteDivs: string[] = [];
+
+    for (const [namespace, icons] of iconRegistry.entries()) {
+      const spriter = new SVGSpriter({
+        mode: {
+          symbol: { inline: true, sprite: `sprite-${namespace}`, bust: false }
+        },
+        svg: { xmlDeclaration: false, doctypeDeclaration: false },
+        shape: {
+          id: {
+            generator: (svg: string) =>
+              `${namespace}-${path.basename(svg.replace(/\s+/g, "_"), ".svg")}`
+          },
+          transform: [
+            {
+              svgo: {
+                plugins: [{ name: "preset-default" }, "removeXMLNS"]
+              }
+            }
+          ]
+        }
+      });
+
+      for (const [iconName, data] of icons) {
+        spriter.add(data.path, `${iconName}.svg`, data.content);
+      }
+
+      const { result } = await spriter.compileAsync();
+      const svgContent = result.symbol.sprite.contents.toString();
+      const safeNs = namespace.replace(/[^a-zA-Z0-9_]/g, "_");
+      spriteDivs.push(
+        `<div id="svg-sprite-${safeNs}" style="display:none">${svgContent}</div>`
+      );
+    }
+
+    return spriteDivs;
+  }
+
+  // Pre-compile the sprite once at startup
+  let spriteHtmlPromise: Promise<string> | undefined;
+
+  return {
+    name: "svg-sprite",
+
+    buildStart() {
+      scanIconDirs();
+      spriteHtmlPromise = buildSprites().then((divs) => divs.join(""));
+    },
+
+    transform(_code, id) {
+      for (const { dir, namespace } of iconDirs) {
+        if (!id.endsWith(".svg") || !id.startsWith(dir)) continue;
+
+        const name = path.basename(id, ".svg");
+        const symbolId = `${namespace}-${name}`;
+
+        return {
+          code: [
+            `export default { id: "${symbolId}" };`,
+            `export const id = "${symbolId}";`,
+            `export const name = "${name}";`
+          ].join("\n"),
+          map: null
+        };
+      }
+    },
+
+    async transformIndexHtml(html) {
+      const spriteHtml = await spriteHtmlPromise;
+      if (!spriteHtml) return html;
+
+      return html.replace(
+        '<div id="svg-sprites" style="display: none"></div>',
+        `<div id="svg-sprites" style="display: none">${spriteHtml}</div>`
+      );
+    }
+  };
+}