React 18

.babelrc

@@ -7,7 +7,7 @@
         "useBuiltIns": "usage"
       }
     ],
-    "@babel/preset-react",
+    ["@babel/preset-react", { "runtime": "automatic" }],
     ["@babel/typescript", { "allowNamespaces": true }]
   ],
   "plugins": [

.eslintrc

@@ -1,5 +1,9 @@
 {
-  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime"
+  ],
   "parser": "@babel/eslint-parser",
   "parserOptions": {
     "requireConfigFile": false,
@@ -27,6 +31,9 @@
   "rules": {
     "react/jsx-no-undef": 0,
 
+    /* Ignore styled-components css property */
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
+
     /*Possible Errors */
     "no-cond-assign": [1, "except-parens"],
     "no-console": 0,

.github/workflows/ci.yml

@@ -28,11 +28,14 @@ jobs:
         run: yarn prettier-check
 
       - name: Build TerriaJS tests
-        run: yarn gulp lint release -- --continue
+        id: lint_build_spec
+        run: yarn gulp lint build -- --continue
         env:
           NODE_OPTIONS: --max_old_space_size=4096
 
+      # Run on failure of gulp lint build, in case it's a lint failure
       - name: Run tests using xvfb
         uses: GabrielBB/xvfb-action@v1
+        if: ${{success() || steps.lint_build_spec.outcome == 'failure'}}
         with:
           run: yarn gulp test-firefox

.gitignore

@@ -1,3 +1,4 @@
+# Update .prettierignore whenever this file changes
 docs/
 node_modules/
 .idea/
@@ -17,6 +18,7 @@ package-lock.json
 *.swp
 dist
 .history/
+ts-out/
 
 # Catalog index generation files
 catalog-index*.json

.prettierignore

@@ -20,6 +20,7 @@ package-lock.json
 *.swp
 dist
 .history/
+ts-out/
 
 # Catalog index generation files
 catalog-index*.json

buildprocess/ci-deploy.sh

@@ -23,7 +23,7 @@ npm install -g yarn@^1.19.0
 
 # Clone and build TerriaMap, using this version of TerriaJS
 TERRIAJS_COMMIT_HASH=$(git rev-parse HEAD)
-git clone -b main https://github.com/TerriaJS/TerriaMap.git
+git clone -b react-18 https://github.com/TerriaJS/TerriaMap.git
 cd TerriaMap
 TERRIAMAP_COMMIT_HASH=$(git rev-parse HEAD)
 sed -i -e 's@"terriajs": ".*"@"terriajs": "'$GITHUB_REPOSITORY'#'${GITHUB_BRANCH}'"@g' package.json

buildprocess/configureWebpack.js

@@ -126,7 +126,7 @@ function configureWebpack(
                 useBuiltIns: "usage"
               }
             ],
-            "@babel/preset-react",
+            ["@babel/preset-react", { runtime: "automatic" }],
             ["@babel/typescript", { allowNamespaces: true }]
           ],
           plugins: [

buildprocess/terriajsServerGulpTask.js

@@ -0,0 +1,72 @@
+//@ts-check
+/**
+ * terriajs-server gulp task. Runs terriajs-server.
+ * Used in terriajs & TerriaMap gulpfiles.
+ * @param {number | undefined} defaultPort - the default port that terriajs-server should run on
+ * @returns {(done: (error?: Error) => void) => void} A gulp task
+ */
+const terriajsServerGulpTask = (defaultPort = undefined) => {
+  return (done) => {
+    // E.g. gulp terriajs-server --terriajsServerArg port=4000 --terriajsServerArg verbose=true
+    //  or gulp dev --terriajsServerArg port=3000
+    const { spawn } = require("child_process");
+    const fs = require("fs");
+    const minimist = require("minimist");
+    // Arguments written in skewer-case can cause problems (unsure why), so stick to camelCase
+    const options = minimist(process.argv.slice(2), {
+      string: ["terriajsServerArg"],
+      default: { terriajsServerArg: [] }
+    });
+
+    const logFile = fs.openSync("./terriajs-server.log", "w");
+    const serverArgs = Array.isArray(options.terriajsServerArg)
+      ? options.terriajsServerArg
+      : [options.terriajsServerArg];
+    if (defaultPort !== undefined) {
+      serverArgs.splice(0, 0, `port=${defaultPort}`);
+    }
+    const child = spawn(
+      "node",
+      [
+        require.resolve("terriajs-server/terriajs-server.js"),
+        ...serverArgs.map((arg) => `--${arg}`)
+      ],
+      { detached: true, stdio: ["ignore", logFile, logFile] }
+    );
+    child.on("exit", (exitCode, signal) => {
+      done(
+        new Error(
+          "terriajs-server quit" +
+            (exitCode !== null ? ` with exit code: ${exitCode}` : "") +
+            (signal ? ` from signal: ${signal}` : "") +
+            "\nCheck terriajs-server.log for more information."
+        )
+      );
+    });
+    child.on("spawn", () => {
+      console.log("terriajs-server started - see terriajs-server.log for logs");
+    });
+    // Intercept SIGINT, SIGTERM and SIGHUP, cleanup terriajs-server and re-send signal
+    // May fail to catch some relevant signals on Windows
+    // SIGINT: ctrl+c
+    // SIGTERM: kill <pid>
+    // SIGHUP: terminal closed
+    process.once("SIGINT", () => {
+      child.kill("SIGTERM");
+      process.kill(process.pid, "SIGINT");
+    });
+    process.once("SIGTERM", () => {
+      child.kill("SIGTERM");
+      process.kill(process.pid, "SIGTERM");
+    });
+    process.once("SIGHUP", () => {
+      child.kill("SIGTERM");
+      process.kill(process.pid, "SIGHUP");
+    });
+    process.on("exit", () => {
+      child.kill("SIGTERM");
+    });
+  };
+};
+
+module.exports = terriajsServerGulpTask;

doc/contributing/translation-guide-dev.md

@@ -13,7 +13,6 @@ It gets the `t` function and `i18n` instance inside your **functional components
 **Usage**
 
 ```js
-import React from "react";
 import { useTranslation } from "react-i18next";
 
 export function MyComponent() {
@@ -33,7 +32,6 @@ The `withTranslation` is a classic HOC (higher order component) and gets the `t`
 **Usage**
 
 ```js
-import React from "react";
 import { withTranslation } from "react-i18next";
 
 function MyComponent({ t, i18n }) {
@@ -52,7 +50,6 @@ While the Trans component gives you a lot of power by letting you interpolate or
 As long you have no react nodes you like to be integrated into a translated text (text formatting, like strong, i, ...) or adding some link component - you won't need it - most can be done by using the good old t function.
 
 ```js
-import React from "react";
 import { Trans, useTranslation } from "react-i18next";
 
 function MyComponent() {

doc/customizing/skinning.md

@@ -25,11 +25,9 @@ This file creates the main user interface, using [React](https://facebook.github
 For example, here's a version that includes an extra menu that links to terria.io, and adds the measure tool to the navigation area:
 
 ```javascript
-import React from "react";
-
 import version from "../../version";
 
-import StandardUserInterface from "terriajs/lib/ReactViews/StandardUserInterface/StandardUserInterface.jsx";
+import StandardUserInterface from "terriajs/lib/ReactViews/StandardUserInterface/StandardUserInterface";
 import MenuItem from "terriajs/lib/ReactViews/StandardUserInterface/customizable/MenuItem";
 import RelatedMaps from "./RelatedMaps";
 import {

gulpfile.js

@@ -8,6 +8,7 @@
 // the devDependencies available.  Individual tasks, other than `post-npm-install` and any tasks it
 // calls, may require in `devDependency` modules locally.
 var gulp = require("gulp");
+var terriajsServerGulpTask = require("./buildprocess/terriajsServerGulpTask");
 
 gulp.task("build-specs", function (done) {
   var runWebpack = require("./buildprocess/runWebpack.js");
@@ -227,64 +228,7 @@ gulp.task(
   )
 );
 
-gulp.task("terriajs-server", function (done) {
-  // E.g. gulp terriajs-server --terriajsServerArg port=4000 --terriajsServerArg verbose=true
-  //  or gulp dev --terriajsServerArg port=3000
-  const { spawn } = require("child_process");
-  const fs = require("fs");
-  const minimist = require("minimist");
-
-  const knownOptions = {
-    string: ["terriajsServerArg"],
-    default: {
-      terriajsServerArg: []
-    }
-  };
-  const options = minimist(process.argv.slice(2), knownOptions);
-
-  const logFile = fs.openSync("./terriajs-server.log", "a");
-  const serverArgs = Array.isArray(options.terriajsServerArg)
-    ? options.terriajsServerArg
-    : [options.terriajsServerArg];
-  // Spawn detached - attached does not make terriajs-server
-  //  quit when the gulp task is stopped
-  const child = spawn(
-    "node",
-    [
-      "./node_modules/.bin/terriajs-server",
-      "--port=3002",
-      ...serverArgs.map((arg) => `--${arg}`)
-    ],
-    { detached: true, stdio: ["ignore", logFile, logFile] }
-  );
-  child.on("exit", (exitCode, signal) => {
-    done(
-      new Error(
-        "terriajs-server quit" +
-          (exitCode !== null ? ` with exit code: ${exitCode}` : "") +
-          (signal ? ` from signal: ${signal}` : "") +
-          "\nCheck terriajs-server.log for more information."
-      )
-    );
-  });
-  // Intercept SIGINT, SIGTERM and SIGHUP, cleanup terriajs-server and re-send signal
-  // May fail to catch some relevant signals on Windows
-  // SIGINT: ctrl+c
-  // SIGTERM: kill <pid>
-  // SIGHUP: terminal closed
-  process.once("SIGINT", () => {
-    child.kill("SIGTERM");
-    process.kill(process.pid, "SIGINT");
-  });
-  process.once("SIGTERM", () => {
-    child.kill("SIGTERM");
-    process.kill(process.pid, "SIGTERM");
-  });
-  process.once("SIGHUP", () => {
-    child.kill("SIGTERM");
-    process.kill(process.pid, "SIGHUP");
-  });
-});
+gulp.task("terriajs-server", terriajsServerGulpTask(3002));
 
 gulp.task("build", gulp.series("copy-cesium-assets", "build-specs"));
 gulp.task("release", gulp.series("copy-cesium-assets", "release-specs"));

lib/Charts/ChartView.ts

@@ -16,11 +16,9 @@ export default class ChartView {
 
   @computed
   get chartableItems(): ChartableMixin.Instance[] {
-    return <any>(
-      this.terria.workbench.items.filter(
-        (item) => ChartableMixin.isMixedInto(item) && item.chartItems.length > 0
-      )
-    );
+    return this.terria.workbench.items.filter(
+      (item) => ChartableMixin.isMixedInto(item) && item.chartItems.length > 0
+    ) as any;
   }
 
   /**
@@ -32,7 +30,7 @@ export default class ChartView {
     for (let i = 0; i < this.chartableItems.length; i++) {
       for (let j = 0; j < this.chartableItems[i].chartItems.length; j++) {
         const chartItem = this.chartableItems[i].chartItems[j];
-        if (chartItem.isSelectedInWorkbench && chartItem.showInChartPanel) {
+        if (chartItem.showInChartPanel) {
           return chartItem.xAxis;
         }
       }

lib/Core/instanceOf.ts

@@ -15,5 +15,5 @@ export default function instanceOf<T>(
   type: Class<T>,
   instance: any
 ): instance is T {
-  return instance instanceof <any>type;
+  return instance instanceof (type as any);
 }

lib/Core/markdownToHtml.ts

@@ -54,7 +54,7 @@ function markdownToHtml(
     // (typeof string === 'string').  So if this isn't a string primitive, call toString
     // on it in order to make it one.
     if (markdownString && typeof markdownString !== "string") {
-      stringToParse = (<any>markdownString).toString();
+      stringToParse = (markdownString as any).toString();
     }
     if (markdownOptions.injectTermsAsTooltips && markdownOptions.tooltipTerms) {
       stringToParse = injectTerms(stringToParse, markdownOptions.tooltipTerms);

lib/Map/Cesium/CesiumRenderLoopPauser.ts

@@ -305,14 +305,14 @@ export default class CesiumRenderLoopPauser {
 
     const cameraMovedInLastSecond = now - this._lastCameraMoveTime < 1000;
 
-    const surface = (<any>scene.globe)._surface;
+    const surface = (scene.globe as any)._surface;
     const terrainTilesWaiting =
       !surface._tileProvider.ready ||
       surface._tileLoadQueueHigh.length > 0 ||
       surface._tileLoadQueueMedium.length > 0 ||
       surface._tileLoadQueueLow.length > 0 ||
       surface._debug.tilesWaitingForChildren > 0;
-    const tweens = (<any>scene).tweens;
+    const tweens = (scene as any).tweens;
 
     if (
       !cameraMovedInLastSecond &&

lib/Map/ImageryProvider/MapboxVectorTileImageryProvider.ts

@@ -185,35 +185,35 @@ export default class MapboxVectorTileImageryProvider
   get credit(): Credit {
     let credit = this._credit;
     if (credit === undefined) {
-      return <any>undefined;
+      return undefined as any;
     } else if (typeof credit === "string") {
       credit = new Credit(credit);
     }
     return credit;
   }
 
   get defaultAlpha(): number {
-    return <any>undefined;
+    return undefined as any;
   }
 
   get defaultBrightness(): number {
-    return <any>undefined;
+    return undefined as any;
   }
 
   get defaultContrast(): number {
-    return <any>undefined;
+    return undefined as any;
   }
 
   get defaultGamma(): number {
-    return <any>undefined;
+    return undefined as any;
   }
 
   get defaultHue(): number {
-    return <any>undefined;
+    return undefined as any;
   }
 
   get defaultSaturation(): number {
-    return <any>undefined;
+    return undefined as any;
   }
 
   get defaultMagnificationFilter(): any {
@@ -225,15 +225,15 @@ export default class MapboxVectorTileImageryProvider
   }
 
   get proxy(): DefaultProxy {
-    return <any>undefined;
+    return undefined as any;
   }
 
   get readyPromise(): Promise<boolean> {
     return Promise.resolve(true);
   }
 
   get tileDiscardPolicy(): TileDiscardPolicy {
-    return <any>undefined;
+    return undefined as any;
   }
 
   getTileCredits(x: number, y: number, level: number): Credit[] {
@@ -326,7 +326,7 @@ export default class MapboxVectorTileImageryProvider
 
     let pos;
 
-    let extentFactor = canvas.width / (<any>layer).extent; // Vector tile works with extent [0, 4095], but canvas is only [0,255]
+    let extentFactor = canvas.width / (layer as any).extent; // Vector tile works with extent [0, 4095], but canvas is only [0,255]
 
     // Features
     for (let i = 0; i < layer.length; i++) {