React 18

.babelrc

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

.eslintrc

@@ -2,6 +2,7 @@
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
     "plugin:jsx-control-statements/recommended"
   ],
   "parser": "@babel/eslint-parser",
@@ -32,6 +33,9 @@
     "jsx-control-statements/jsx-use-if-tag": 0,
     "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

buildprocess/ci-deploy.sh

@@ -21,7 +21,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: [

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;
   }
 
   /**

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++) {

lib/Map/ImageryProvider/ProtomapsImageryProvider.ts

@@ -273,17 +273,17 @@ export default class ProtomapsImageryProvider
   readonly defaultNightAlpha = undefined;
   readonly defaultDayAlpha = undefined;
   readonly hasAlphaChannel = true;
-  readonly defaultAlpha = <any>undefined;
-  readonly defaultBrightness = <any>undefined;
-  readonly defaultContrast = <any>undefined;
-  readonly defaultGamma = <any>undefined;
-  readonly defaultHue = <any>undefined;
-  readonly defaultSaturation = <any>undefined;
+  readonly defaultAlpha = undefined as any;
+  readonly defaultBrightness = undefined as any;
+  readonly defaultContrast = undefined as any;
+  readonly defaultGamma = undefined as any;
+  readonly defaultHue = undefined as any;
+  readonly defaultSaturation = undefined as any;
   readonly defaultMagnificationFilter = undefined as any;
   readonly defaultMinificationFilter = undefined as any;
-  readonly proxy = <any>undefined;
+  readonly proxy = undefined as any;
   readonly readyPromise = Promise.resolve(true);
-  readonly tileDiscardPolicy = <any>undefined;
+  readonly tileDiscardPolicy = undefined as any;
 
   // Protomaps properties
   /** Data object from constructor options (this is transformed into `source`) */

lib/Map/Leaflet/ImageryProviderLeafletGridLayer.ts

@@ -115,9 +115,10 @@ export default class ImageryProviderLeafletGridLayer extends L.GridLayer {
   }
 
   createTile(tilePoint: L.Coords, done: L.DoneCallback) {
-    const canvas = <HTMLCanvasElement>(
-      L.DomUtil.create("canvas", "leaflet-tile")
-    );
+    const canvas = L.DomUtil.create(
+      "canvas",
+      "leaflet-tile"
+    ) as HTMLCanvasElement;
     const size = this.getTileSize();
     canvas.width = size.x;
     canvas.height = size.y;

lib/Map/Leaflet/ImageryProviderLeafletTileLayer.ts

@@ -61,7 +61,7 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
     readonly imageryProvider: ImageryProvider,
     options: L.TileLayerOptions = {}
   ) {
-    super(<any>undefined, {
+    super(undefined as any, {
       ...options,
       updateInterval: defined((imageryProvider as any)._leafletUpdateInterval)
         ? (imageryProvider as any)._leafletUpdateInterval
@@ -153,7 +153,7 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
 
   createTile(coords: L.Coords, done: L.DoneCallback) {
     // Create a tile (Image) as normal.
-    const tile = <HTMLImageElement>super.createTile(coords, done);
+    const tile = super.createTile(coords, done) as HTMLImageElement;
 
     // By default, Leaflet handles tile load errors by setting the Image to the error URL and raising
     // an error event.  We want to first raise an error event that optionally returns a promise and
@@ -168,7 +168,12 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
           .catch((e: unknown) => {
             // The tile has failed irrecoverably, so invoke Leaflet's standard
             // tile error handler.
-            (<any>L.TileLayer).prototype._tileOnError.call(this, done, tile, e);
+            (L.TileLayer as any).prototype._tileOnError.call(
+              this,
+              done,
+              tile,
+              e
+            );
           });
         return;
       }
@@ -182,22 +187,22 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
     };
 
     L.DomEvent.on(tile, "error", (e) => {
-      const level = (<any>this)._getLevelFromZ(coords);
+      const level = (this as any)._getLevelFromZ(coords);
       const message = i18next.t("map.cesium.failedToObtain", {
         x: coords.x,
         y: coords.y,
         level: level
       });
       this._requestImageError = TileProviderError.handleError(
-        <any>this._requestImageError,
+        this._requestImageError as any,
         this.imageryProvider,
-        <any>this.imageryProvider.errorEvent,
+        this.imageryProvider.errorEvent as any,
         message,
         coords.x,
         coords.y,
         level,
         doRequest,
-        <any>e
+        e as any
       );
     });
 
@@ -228,10 +233,10 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
   _update() {
     if (!this.imageryProvider.ready) {
       if (!this._delayedUpdate) {
-        this._delayedUpdate = <any>setTimeout(() => {
+        this._delayedUpdate = setTimeout(() => {
           this._delayedUpdate = undefined;
           this._update();
-        }, this._leafletUpdateInterval);
+        }, this._leafletUpdateInterval) as any;
       }
       return;
     }
@@ -245,7 +250,7 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
         this._delayedUpdate = undefined;
       }
 
-      this._delayedUpdate = <any>setTimeout(() => {
+      this._delayedUpdate = setTimeout(() => {
         this._delayedUpdate = undefined;
 
         // If we're no longer attached to a map, do nothing.
@@ -287,19 +292,19 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
         }
 
         if (isDefined(this.imageryProvider.credit)) {
-          (<any>this._map).attributionControl.addAttribution(
+          (this._map as any).attributionControl.addAttribution(
             getCreditHtml(this.imageryProvider.credit)
           );
         }
 
         this._usable = true;
 
         this._update();
-      }, this._leafletUpdateInterval);
+      }, this._leafletUpdateInterval) as any;
     }
 
     if (this._usable) {
-      (<any>L.TileLayer).prototype._update.apply(this, arguments);
+      (L.TileLayer as any).prototype._update.apply(this, arguments);
 
       this._updateAttribution();
     }
@@ -363,9 +368,11 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
 
     for (let j = ne.y; j < sw.y; ++j) {
       for (let i = sw.x; i < ne.x; ++i) {
-        const credits = <Credit[]>(
-          this.imageryProvider.getTileCredits(i, j, zoom)
-        );
+        const credits = this.imageryProvider.getTileCredits(
+          i,
+          j,
+          zoom
+        ) as Credit[];
         if (!defined(credits)) {
           continue;
         }
@@ -380,7 +387,7 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
           nextCredits.push(credit);
 
           if (!credit._shownInLeafletLastUpdate) {
-            (<any>this._map).attributionControl.addAttribution(
+            (this._map as any).attributionControl.addAttribution(
               getCreditHtml(credit)
             );
           }
@@ -391,7 +398,7 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
     // Remove attributions that applied last update but not this one.
     for (let i = 0; i < this._previousCredits.length; ++i) {
       if (!this._previousCredits[i]._shownInLeaflet) {
-        (<any>this._map).attributionControl.removeAttribution(
+        (this._map as any).attributionControl.removeAttribution(
           getCreditHtml(this._previousCredits[i])
         );
         this._previousCredits[i]._shownInLeafletLastUpdate = false;
@@ -446,7 +453,7 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
       TerriaError.from(
         e,
         `An error ocurred while calling \`ImageryProvider#.pickFeatures\`. \`ImageryProvider.url = ${
-          (<any>this.imageryProvider).url
+          (this.imageryProvider as any).url
         }\``
       ).log();
     }
@@ -461,13 +468,13 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
     for (let i = 0; i < this._previousCredits.length; ++i) {
       this._previousCredits[i]._shownInLeafletLastUpdate = false;
       this._previousCredits[i]._shownInLeaflet = false;
-      (<any>map).attributionControl.removeAttribution(
+      (map as any).attributionControl.removeAttribution(
         getCreditHtml(this._previousCredits[i])
       );
     }
 
     if (this._usable && defined(this.imageryProvider.credit)) {
-      (<any>map).attributionControl.removeAttribution(
+      (map as any).attributionControl.removeAttribution(
         getCreditHtml(this.imageryProvider.credit)
       );
     }

lib/Map/Leaflet/LeafletDataSourceDisplay.ts

@@ -133,7 +133,7 @@ export default class LeafletDataSourceDisplay {
     const dataSources = this._dataSourceCollection;
     const length = dataSources.length;
     for (let i = 0; i < length; i++) {
-      const dataSource = <LeafletDataSource>dataSources.get(i);
+      const dataSource = dataSources.get(i) as LeafletDataSource;
       if (isDefined(dataSource.update)) {
         result = dataSource.update(time) && result;
       }