Merge branch 'main' into proj4leaflet

Author: na9da

CHANGES.md

@@ -1,5 +1,11 @@
 # Change Log
 
+#### 0.4.3
+
+**2025-10-09**
+
+- Update TerriaJS to [8.11.0](https://github.com/TerriaJS/terriajs/blob/main/CHANGES.md#8110---2025-10-09)
+
 #### 0.4.2
 
 **2025-06-03**

buildprocess/configureWebpackForPlugins.js

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+
 const path = require("path");
 const fs = require("fs");
-
 /**
  * RegExp pattern used for matching plugin package names for applying various rules.
  *
@@ -17,7 +18,7 @@ function configureWebpackForPlugins(config) {
 }
 
 /**
- * Creates a webpack rule for processing svg icons from terriajs plugins using `svg-sprite-loader`.
+ * Creates a webpack rule for processing svg icons from terriajs plugins using terriajs `svg-sprite-loader`.
  * We check two things to decide whether to include an icon:
  *   1. The icon belongs to assets/icons folder
  *   2. assets/icons/../../package.json has a name field with `terriajs-plugin-` prefix
@@ -46,15 +47,12 @@ function createPluginIconsRule() {
       packageNames[svgPath] = packageName;
       return isTerriaJsPlugin;
     },
-    loader: require.resolve("svg-sprite-loader"),
+    loader: require.resolve("terriajs/buildprocess/svgs/svg-sprite-loader.js"),
     options: {
-      esModule: false,
-      symbolId: (svgPath) => {
+      namespace: (svgPath) => {
         // Generate a symbolId by concatenating the package name and the icon name
-        const packageName = packageNames[svgPath] || "terriajs-plugin-";
-        const iconName = path.basename(svgPath, ".svg");
-        const symbolId = `${packageName}-${iconName}`;
-        return symbolId;
+        const packageName = packageNames[svgPath] || "terriajs-plugin";
+        return packageName;
       }
     }
   };

buildprocess/webpack.config.js

@@ -1,12 +1,17 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-require-imports */
+
 const configureWebpackForTerriaJS = require("terriajs/buildprocess/configureWebpack");
 const configureWebpackForPlugins = require("./configureWebpackForPlugins");
+const defaultBabelLoader = require("terriajs/buildprocess/defaultBabelLoader");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const path = require("path");
+const HtmlPlugin = require("html-webpack-plugin");
 
 /**
  * Webpack config for building terriamap
  */
-module.exports = function (devMode) {
+module.exports = function ({ devMode, baseHref = "/" }) {
   // Base configuration
   const config = {
     mode: devMode ? "development" : "production",
@@ -33,29 +38,7 @@ module.exports = function (devMode) {
             path.resolve(__dirname, "..", "plugins.ts"),
             path.resolve(__dirname, "..", "lib")
           ],
-          use: [
-            {
-              loader: "babel-loader",
-              options: {
-                cacheDirectory: true,
-                presets: [
-                  [
-                    "@babel/preset-env",
-                    {
-                      corejs: 3,
-                      useBuiltIns: "usage"
-                    }
-                  ],
-                  ["@babel/preset-react", { runtime: "automatic" }],
-                  ["@babel/preset-typescript", { allowNamespaces: true }]
-                ],
-                plugins: [
-                  ["@babel/plugin-proposal-decorators", { legacy: true }],
-                  "babel-plugin-styled-components"
-                ]
-              }
-            }
-          ]
+          use: [defaultBabelLoader({ devMode })]
         },
         // import html file as string
         {
@@ -80,12 +63,6 @@ module.exports = function (devMode) {
             }
           }
         },
-        // handle css files - inject in html tag
-        {
-          test: /loader\.css$/,
-          include: [path.resolve(__dirname, "..", "lib", "Styles")],
-          use: ["style-loader", "css-loader"]
-        },
         // handle scss files
         {
           test: /\.scss$/,
@@ -100,6 +77,7 @@ module.exports = function (devMode) {
                 defaultExport: true
               }
             },
+            { loader: "terriajs-typings-for-css-modules-loader" },
             {
               loader: "css-loader",
               options: {
@@ -135,6 +113,13 @@ module.exports = function (devMode) {
       new MiniCssExtractPlugin({
         filename: "TerriaMap.css",
         ignoreOrder: true
+      }),
+      new HtmlPlugin({
+        filename: path.resolve(__dirname, "..", "wwwroot", "index.html"),
+        template: path.resolve(__dirname, "..", "wwwroot", "index.ejs"),
+        templateParameters: {
+          baseHref: baseHref
+        }
       })
     ],
     resolve: {

entry.js

@@ -1,32 +1,3 @@
-import globeGif from "./lib/Styles/globe.gif";
-import "./lib/Styles/loader.css";
+import { renderUi } from "./lib/Views/render";
 
-async function loadMainScript() {
-  return import("terriajs/lib/Core/prerequisites")
-    .then(() => import("./index"))
-    .then(({ default: terriaPromise }) => terriaPromise);
-}
-
-function createLoader() {
-  const loaderDiv = document.createElement("div");
-  loaderDiv.classList.add("loader-ui");
-  const loaderGif = document.createElement("img");
-  loaderGif.src = globeGif;
-  loaderDiv.appendChild(loaderGif);
-
-  loaderDiv.style.backgroundColor = "#383F4D";
-  document.body.appendChild(loaderDiv);
-
-  loadMainScript()
-    .catch((_err) => {
-      // Ignore errors and try to show the map anyway
-    })
-    .then(() => {
-      loaderDiv.classList.add("loader-ui-hide");
-      setTimeout(() => {
-        document.body.removeChild(loaderDiv);
-      }, 2000);
-    });
-}
-
-createLoader();
+renderUi();

gulpfile.js

@@ -1,6 +1,8 @@
 /*eslint-env node*/
 /*eslint no-sync: 0*/
 /*eslint no-process-exit: 0*/
+/*eslint no-redeclare: 0*/
+/*eslint @typescript-eslint/no-require-imports: 0*/
 
 "use strict";
 
@@ -17,6 +19,17 @@ var watchOptions = {
   interval: 1000
 };
 
+const getBaseHref = () => {
+  var minimist = require("minimist");
+  // Arguments written in skewer-case can cause problems (unsure why), so stick to camelCase
+  var options = minimist(process.argv.slice(2), {
+    string: ["baseHref"],
+    default: { baseHref: "/" }
+  });
+
+  return options.baseHref;
+};
+
 gulp.task("check-terriajs-dependencies", function (done) {
   var appPackageJson = require("./package.json");
   var terriaPackageJson = require("terriajs/package.json");
@@ -68,33 +81,19 @@ gulp.task("write-version", function (done) {
   done();
 });
 
-gulp.task("render-index", function renderIndex(done) {
-  var ejs = require("ejs");
-  var minimist = require("minimist");
-  // Arguments written in skewer-case can cause problems (unsure why), so stick to camelCase
-  var options = minimist(process.argv.slice(2), {
-    string: ["baseHref"],
-    default: { baseHref: "/" }
-  });
-
-  var index = fs.readFileSync("wwwroot/index.ejs", "utf8");
-  var indexResult = ejs.render(index, { baseHref: options.baseHref });
-
-  fs.writeFileSync(path.join("wwwroot", "index.html"), indexResult);
-  done();
-});
-
 gulp.task(
   "build-app",
   gulp.parallel(
-    "render-index",
     gulp.series(
       "check-terriajs-dependencies",
       "write-version",
       function buildApp(done) {
         var runWebpack = require("terriajs/buildprocess/runWebpack.js");
         var webpack = require("webpack");
-        var webpackConfig = require("./buildprocess/webpack.config.js")(true);
+        var webpackConfig = require("./buildprocess/webpack.config.js")({
+          devMode: true,
+          baseHref: getBaseHref()
+        });
 
         checkForDuplicateCesium();
 
@@ -107,14 +106,16 @@ gulp.task(
 gulp.task(
   "release-app",
   gulp.parallel(
-    "render-index",
     gulp.series(
       "check-terriajs-dependencies",
       "write-version",
       function releaseApp(done) {
         var runWebpack = require("terriajs/buildprocess/runWebpack.js");
         var webpack = require("webpack");
-        var webpackConfig = require("./buildprocess/webpack.config.js")(false);
+        var webpackConfig = require("./buildprocess/webpack.config.js")({
+          devMode: false,
+          baseHref: getBaseHref()
+        });
 
         checkForDuplicateCesium();
 
@@ -130,25 +131,17 @@ gulp.task(
   )
 );
 
-gulp.task(
-  "watch-render-index",
-  gulp.series("render-index", function watchRenderIndex() {
-    gulp.watch(["wwwroot/index.ejs"], gulp.series("render-index"));
-  })
-);
-
 gulp.task(
   "watch-app",
   gulp.parallel(
-    "watch-render-index",
     gulp.series("check-terriajs-dependencies", function watchApp(done) {
       var fs = require("fs");
       var watchWebpack = require("terriajs/buildprocess/watchWebpack");
       var webpack = require("webpack");
-      var webpackConfig = require("./buildprocess/webpack.config.js")(
-        true,
-        false
-      );
+      var webpackConfig = require("./buildprocess/webpack.config.js")({
+        devMode: true,
+        baseHref: getBaseHref()
+      });
 
       checkForDuplicateCesium();
 
@@ -229,6 +222,7 @@ gulp.task("sync-terriajs-dependencies", function (done) {
 
 function syncDependencies(dependencies, targetJson, justWarn) {
   for (var dependency in dependencies) {
+    // eslint-disable-next-line no-prototype-builtins
     if (dependencies.hasOwnProperty(dependency)) {
       var version =
         targetJson.dependencies[dependency] ||
@@ -287,10 +281,24 @@ gulp.task("terriajs-server", terriajsServerGulpTask(3001));
 gulp.task("build", gulp.series("copy-terriajs-assets", "build-app"));
 gulp.task("release", gulp.series("copy-terriajs-assets", "release-app"));
 gulp.task("watch", gulp.parallel("watch-terriajs-assets", "watch-app"));
-// Run render-index before starting terriajs-server because terriajs-server won't
-//  start if index.html isn't present
+// Simple task that waits for index.html then starts server
 gulp.task(
   "dev",
-  gulp.parallel(gulp.series("render-index", "terriajs-server"), "watch")
+  gulp.parallel("watch", function startServerWhenReady(done) {
+    const indexFile = path.join(__dirname, "wwwroot", "index.html");
+
+    if (fs.existsSync(indexFile)) {
+      terriajsServerGulpTask(3001)(done);
+      return;
+    }
+    var watcher = gulp.watch(
+      path.join(__dirname, "wwwroot", "index.html"),
+      watchOptions
+    );
+    watcher.on("add", function () {
+      watcher.close();
+      terriajsServerGulpTask(3001)(done);
+    });
+  })
 );
 gulp.task("default", gulp.series("lint", "build"));

index.js

@@ -9,7 +9,6 @@ import registerCustomComponentTypes from "terriajs/lib/ReactViews/Custom/registe
 import updateApplicationOnHashChange from "terriajs/lib/ViewModels/updateApplicationOnHashChange";
 import updateApplicationOnMessageFromParentWindow from "terriajs/lib/ViewModels/updateApplicationOnMessageFromParentWindow";
 import loadPlugins from "./lib/Core/loadPlugins";
-import render from "./lib/Views/render";
 import showGlobalDisclaimer from "./lib/Views/showGlobalDisclaimer";
 import plugins from "./plugins";
 
@@ -97,10 +96,11 @@ export default terria
         styleSheet.innerText = fontImports;
         document.head.appendChild(styleSheet);
       }
-
-      render(terria, [], viewState);
     } catch (e) {
       console.error(e);
       console.error(e.stack);
     }
+  })
+  .then(() => {
+    return { terria, viewState };
   });

lib/Views/Loader.tsx

@@ -0,0 +1,15 @@
+import globeGif from "../Styles/globe.gif";
+import Styles from "./loader.scss";
+
+export const Loader = () => {
+  return (
+    <div
+      className={Styles.loaderUi}
+      style={{
+        backgroundColor: "#383F4D"
+      }}
+    >
+      <img src={globeGif} />
+    </div>
+  );
+};