Convert CJS require() to ESM import statements.

na9da · na9da · commit 30654f1a33b1 · 2024-11-14T16:42:45.000+11:00
This requires, in some places:
 - simply swapping require with import
 - creating a stub .d.ts module definition in lib/ThirdParty
 - updating the library to get new bundled type definitions
   - file-saver
   - react-responsive
 - or adding @types/x as dependency
   - @types/proj4

Remaining require() imports are all for static assets or web workers which can be fixed when upgrading to webpack 5.
diff --git a/lib/Core/ConsoleAnalytics.js b/lib/Core/ConsoleAnalytics.js
@@ -1,7 +1,7 @@
-var defined = require("terriajs-cesium/Source/Core/defined").default;
-const i18next = require("i18next").default;
+import defined from "terriajs-cesium/Source/Core/defined";
+import i18next from "i18next";
 
-var ConsoleAnalytics = function () {
+const ConsoleAnalytics = function () {
   // either set enableConsoleAnalytics here to true,
   // or pass true in `configParameters.enableConsoleAnalytics` for verbose app analytics
   this.enableConsoleAnalytics = false;
diff --git a/lib/Core/ServerConfig.js b/lib/Core/ServerConfig.js
@@ -1,8 +1,8 @@
-const i18next = require("i18next").default;
-var defaultValue = require("terriajs-cesium/Source/Core/defaultValue").default;
-var loadJson = require("./loadJson").default;
+import i18next from "i18next";
+import defaultValue from "terriajs-cesium/Source/Core/defaultValue";
+import loadJson from "./loadJson";
 
-var DEFAULT_URL = "serverconfig/";
+const DEFAULT_URL = "serverconfig/";
 /**
  * Provides information about the configuration of the Terria server, by querying /serverconfig
  */
diff --git a/lib/Core/loadWithXhr.js b/lib/Core/loadWithXhr.js
@@ -1,6 +1,5 @@
-const defaultValue =
-  require("terriajs-cesium/Source/Core/defaultValue").default;
-const Resource = require("terriajs-cesium/Source/Core/Resource").default;
+import defaultValue from "terriajs-cesium/Source/Core/defaultValue";
+import Resource from "terriajs-cesium/Source/Core/Resource";
 
 function loadWithXhr(options) {
   // Take advantage that most parameters are the same
diff --git a/lib/Map/ImageryProvider/ProtomapsImageryProvider.ts b/lib/Map/ImageryProvider/ProtomapsImageryProvider.ts
@@ -42,8 +42,7 @@ import {
 import { default as TerriaFeature } from "../../Models/Feature/Feature";
 import Terria from "../../Models/Terria";
 import { ImageryProviderWithGridLayerSupport } from "../Leaflet/ImageryProviderLeafletGridLayer";
-
-const geojsonvt = require("geojson-vt").default;
+import geojsonvt from "geojson-vt";
 
 type GeojsonVtFeature = {
   id: any;
diff --git a/lib/Map/Leaflet/LeafletSelectionIndicator.ts b/lib/Map/Leaflet/LeafletSelectionIndicator.ts
@@ -5,7 +5,6 @@ import Ellipsoid from "terriajs-cesium/Source/Core/Ellipsoid";
 import CesiumMath from "terriajs-cesium/Source/Core/Math";
 import TweenCollection from "terriajs-cesium/Source/Scene/TweenCollection";
 import isDefined from "../../Core/isDefined";
-
 import Leaflet from "../../Models/Leaflet";
 
 const selectionIndicatorUrl = require("../../../wwwroot/images/NM-LocationTarget.svg");
diff --git a/lib/Map/PickedFeatures/featureDataToGeoJson.ts b/lib/Map/PickedFeatures/featureDataToGeoJson.ts
@@ -1,5 +1,3 @@
-"use strict";
-
 import Point from "@mapbox/point-geometry";
 import {
   Feature as GeoJsonFeature,
@@ -26,8 +24,7 @@ import {
   toFeatureCollection
 } from "../../ModelMixins/GeojsonMixin";
 import computeRingWindingOrder from "../Vector/computeRingWindingOrder";
-
-const pointInPolygon = require("point-in-polygon");
+import pointInPolygon from "point-in-polygon";
 
 /**
  * Converts feature data, such as from a WMS GetFeatureInfo or an Esri Identify, to
diff --git a/lib/Map/Vector/prettifyProjection.ts b/lib/Map/Vector/prettifyProjection.ts
@@ -1,4 +1,4 @@
-const proj4 = require("proj4/lib/index.js").default;
+import proj4 from "proj4";
 
 /**
  * Turns the longitude / latitude in degrees into a human readable pretty UTM zone representation.
diff --git a/lib/ModelMixins/GroupMixin.ts b/lib/ModelMixins/GroupMixin.ts
@@ -19,8 +19,8 @@ import GroupTraits from "../Traits/TraitsClasses/GroupTraits";
 import { ItemPropertiesTraits } from "../Traits/TraitsClasses/ItemPropertiesTraits";
 import CatalogMemberMixin, { getName } from "./CatalogMemberMixin";
 import ReferenceMixin from "./ReferenceMixin";
+import naturalSort from "javascript-natural-sort";
 
-const naturalSort = require("javascript-natural-sort");
 naturalSort.insensitive = true;
 
 const MERGED_GROUP_ID_PREPEND = "__merged__";
diff --git a/lib/Models/Catalog/CatalogItems/GpxCatalogItem.ts b/lib/Models/Catalog/CatalogItems/GpxCatalogItem.ts
@@ -12,8 +12,7 @@ import GpxCatalogItemTraits from "../../../Traits/TraitsClasses/GpxCatalogItemTr
 import CreateModel from "../../Definition/CreateModel";
 import { ModelConstructorParameters } from "../../Definition/Model";
 import proxyCatalogItemUrl from "../proxyCatalogItemUrl";
-
-const toGeoJSON = require("@mapbox/togeojson");
+import toGeoJSON from "@mapbox/togeojson";
 
 class GpxCatalogItem extends GeoJsonMixin(CreateModel(GpxCatalogItemTraits)) {
   static readonly type = "gpx";
diff --git a/lib/Models/Catalog/Esri/ArcGisFeatureServerCatalogItem.ts b/lib/Models/Catalog/Esri/ArcGisFeatureServerCatalogItem.ts
@@ -38,8 +38,7 @@ import StratumFromTraits from "../../Definition/StratumFromTraits";
 import StratumOrder from "../../Definition/StratumOrder";
 import { ModelConstructorParameters } from "../../Definition/Model";
 import proxyCatalogItemUrl from "../proxyCatalogItemUrl";
-
-const proj4 = require("proj4").default;
+import proj4 from "proj4";
 
 interface DocumentInfo {
   Author?: string;
@@ -257,7 +256,9 @@ class FeatureServerStratum extends LoadableStratum(
         return undefined;
       }
 
+      // @ts-expect-error @types/proj4 doesn't define a constructor type
       const source = new proj4.Proj((proj4definitions as any)[wkid]);
+      // @ts-expect-error @types/proj4 doesn't define a constructor type
       const dest = new proj4.Proj("EPSG:4326");
 
       let p = proj4(source, dest, [extent.xmin, extent.ymin]);
diff --git a/lib/Models/Catalog/Esri/ArcGisMapServerCatalogItem.ts b/lib/Models/Catalog/Esri/ArcGisMapServerCatalogItem.ts
@@ -41,8 +41,7 @@ import getToken from "../../getToken";
 import proxyCatalogItemUrl from "../proxyCatalogItemUrl";
 import MinMaxLevelMixin from "./../../../ModelMixins/MinMaxLevelMixin";
 import { Extent, Layer, Legends, MapServer } from "./ArcGisInterfaces";
-
-const proj4 = require("proj4").default;
+import proj4 from "proj4";
 
 class MapServerStratum extends LoadableStratum(
   ArcGisMapServerCatalogItemTraits
@@ -702,7 +701,9 @@ export function getRectangleFromLayer(
       return;
     }
 
+    // @ts-expect-error @types/proj4 doesn't define a constructor type
     const source = new proj4.Proj(Proj4Definitions[wkid]);
+    // @ts-expect-error @types/proj4 doesn't define a constructor type
     const dest = new proj4.Proj("EPSG:4326");
 
     let p = proj4(source, dest, [extent.xmin, extent.ymin]);
diff --git a/lib/Models/Catalog/Ows/WebMapServiceCapabilitiesStratum.ts b/lib/Models/Catalog/Ows/WebMapServiceCapabilitiesStratum.ts
@@ -44,8 +44,7 @@ import WebMapServiceCapabilities, {
   getRectangleFromLayer
 } from "./WebMapServiceCapabilities";
 import WebMapServiceCatalogItem from "./WebMapServiceCatalogItem";
-
-const dateFormat = require("dateformat");
+import dateFormat from "dateformat";
 
 /** Transforms WMS GetCapabilities XML into WebMapServiceCatalogItemTraits */
 export default class WebMapServiceCapabilitiesStratum extends LoadableStratum(
diff --git a/lib/Models/Catalog/Ows/WebMapServiceCatalogItem.ts b/lib/Models/Catalog/Ows/WebMapServiceCatalogItem.ts
@@ -1,5 +1,3 @@
-// const mobx = require('mobx');
-// const mobxUtils = require('mobx-utils');
 // Problems in current architecture:
 // 1. After loading, can't tell what user actually set versus what came from e.g. GetCapabilities.
 //  Solution: layering
diff --git a/lib/ReactViews/BadgeBar.tsx b/lib/ReactViews/BadgeBar.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useTheme } from "styled-components";
 import { TextSpan } from "../Styled/Text";
-const Box = require("../Styled/Box").default;
+import Box from "../Styled/Box";
 
 interface IProps {
   label: string;
diff --git a/lib/ReactViews/BottomDock/Timeline/DateTimePicker.tsx b/lib/ReactViews/BottomDock/Timeline/DateTimePicker.tsx
@@ -21,9 +21,8 @@ import { scrollBars } from "../../../Styled/mixins";
 import Spacing from "../../../Styled/Spacing";
 import Icon from "../../../Styled/Icon";
 import { formatDateTime } from "./DateFormats";
-
-const dateFormat = require("dateformat");
-const DatePicker = require("react-datepicker").default;
+import dateFormat from "dateformat";
+import DatePicker from "react-datepicker";
 
 function daysInMonth(month: number, year: number) {
   const n = new Date(year, month, 0).getDate();
diff --git a/lib/ReactViews/Custom/ExternalLink.tsx b/lib/ReactViews/Custom/ExternalLink.tsx
@@ -2,9 +2,7 @@ import { AnchorHTMLAttributes, default as React } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { useViewState } from "../Context";
-
-const Icon = require("../../Styled/Icon").default;
-const { StyledIcon } = require("../../Styled/Icon");
+import Icon, { StyledIcon } from "../../Styled/Icon";
 
 interface Props {
   attributes: AnchorHTMLAttributes<HTMLAnchorElement>;
diff --git a/lib/ReactViews/Custom/parseCustomHtmlToReact.ts b/lib/ReactViews/Custom/parseCustomHtmlToReact.ts
@@ -12,9 +12,8 @@ import CustomComponent, {
   ProcessNodeContext
 } from "./CustomComponent";
 import { ExternalLinkIcon, ExternalLinkWithWarning } from "./ExternalLink";
-
-const HtmlToReact = require("html-to-react");
-const utils = require("html-to-react/lib/utils");
+import HtmlToReact from "html-to-react";
+import utils from "html-to-react/lib/utils";
 
 const htmlToReactParser = new HtmlToReact.Parser({
   decodeEntities: true
diff --git a/lib/ReactViews/Generic/Responsive.tsx b/lib/ReactViews/Generic/Responsive.tsx
@@ -1,6 +1,6 @@
 import PropTypes, { InferProps } from "prop-types";
 import React from "react";
-const MediaQuery = require("react-responsive").default;
+import MediaQuery from "react-responsive";
 
 // This should come from some config some where
 const small = 768;
diff --git a/lib/ReactViews/HelpScreens/HelpPrompt.tsx b/lib/ReactViews/HelpScreens/HelpPrompt.tsx
@@ -3,13 +3,10 @@
  */
 import React, { useState } from "react";
 import { useTheme } from "styled-components";
-
 import FadeIn from "../Transitions/FadeIn/FadeIn";
 import SlideUpFadeIn from "../Transitions/SlideUpFadeIn/SlideUpFadeIn";
-
-const TourExplanationBox: any = require("../Tour/TourExplanationBox").default;
-const TourPrefaceBox: any = require("../Tour/TourPrefaceBox").default;
-
+import TourExplanationBox from "../Tour/TourExplanationBox";
+import TourPrefaceBox from "../Tour/TourPrefaceBox";
 import CloseButton from "../Generic/CloseButton";
 import ViewState from "../../ReactViewModels/ViewState";
 import Text from "../../Styled/Text";
diff --git a/lib/ReactViews/Map/MapNavigation/Items/Compass/Compass.tsx b/lib/ReactViews/Map/MapNavigation/Items/Compass/Compass.tsx
@@ -33,9 +33,7 @@ import Icon, { StyledIcon } from "../../../../../Styled/Icon";
 import { GyroscopeGuidance } from "./GyroscopeGuidance";
 import { withTerriaRef } from "../../../../HOCs/withTerriaRef";
 import FadeIn from "../../../../Transitions/FadeIn/FadeIn";
-
-const CameraFlightPath =
-  require("terriajs-cesium/Source/Scene/CameraFlightPath").default;
+import CameraFlightPath from "terriajs-cesium/Source/Scene/CameraFlightPath";
 
 export const COMPASS_LOCAL_PROPERTY_KEY = "CompassHelpPrompted";
 
diff --git a/lib/ReactViews/Map/Panels/SharePanel/SharePanel.tsx b/lib/ReactViews/Map/Panels/SharePanel/SharePanel.tsx
@@ -12,10 +12,8 @@ import { canShorten } from "./BuildShareLink";
 import Styles from "./share-panel.scss";
 import { SharePanelContent } from "./SharePanelContent";
 import { ShareUrl } from "./ShareUrl";
-
-const MenuPanel =
-  require("../../../StandardUserInterface/customizable/MenuPanel").default;
-const StorySharePanel = require("./StorySharePanel").default;
+import MenuPanel from "../../../StandardUserInterface/customizable/MenuPanel";
+import StorySharePanel from "./StorySharePanel";
 
 interface PropTypes extends WithTranslation {
   terria: Terria;
@@ -144,6 +142,7 @@ class SharePanel extends React.Component<PropTypes, SharePanelState> {
       : t("share.btnMapShareTitle");
 
     return !storyShare ? (
+      //@ts-expect-error - not yet ready to tackle tsfying MenuPanel
       <MenuPanel
         theme={dropdownTheme}
         btnText={catalogShareWithoutText ? null : btnText}
@@ -168,6 +167,7 @@ class SharePanel extends React.Component<PropTypes, SharePanelState> {
         viewState={this.props.viewState}
         btnTitle={btnTitle}
         isOpen={this.state.isOpen}
+        //@ts-expect-error - not yet ready to tackle tsfying StorySharePanel
         onOpenChanged={this.changeOpenState}
         showDropdownAsModal={storyShare}
         modalWidth={modalWidth}
diff --git a/lib/ReactViews/Preview/ExportData.tsx b/lib/ReactViews/Preview/ExportData.tsx
@@ -7,7 +7,7 @@ import { observer } from "mobx-react";
 
 import isDefined from "../../Core/isDefined";
 import ExportableMixin from "../../ModelMixins/ExportableMixin";
-const FileSaver = require("file-saver");
+import FileSaver from "file-saver";
 
 interface PropsType extends WithTranslation {
   item: ExportableMixin.Instance;
diff --git a/lib/ReactViews/RelatedMaps/RelatedMaps.tsx b/lib/ReactViews/RelatedMaps/RelatedMaps.tsx
@@ -8,9 +8,7 @@ import { ExternalLinkIcon } from "../Custom/ExternalLink";
 import parseCustomMarkdownToReact from "../Custom/parseCustomMarkdownToReact";
 import { withViewState, WithViewState } from "../Context";
 import Styles from "./related-maps.scss";
-
-const MenuPanel =
-  require("../StandardUserInterface/customizable/MenuPanel").default;
+import MenuPanel from "../StandardUserInterface/customizable/MenuPanel";
 
 type PropTypes = WithViewState &
   WithTranslation & {
@@ -37,6 +35,7 @@ class RelatedMaps extends React.Component<PropTypes> {
     const smallScreen = this.props.viewState.useSmallScreenInterface;
 
     return (
+      //@ts-expect-error - not yet ready to tackle tsfying MenuPanel
       <MenuPanel
         theme={dropdownTheme}
         btnText={t("relatedMaps.buttonText")}
diff --git a/lib/ReactViews/SidePanel/FullScreenButton.jsx b/lib/ReactViews/SidePanel/FullScreenButton.jsx
@@ -1,6 +1,5 @@
-"use strict";
-const React = require("react");
-const PropTypes = require("prop-types");
+import React from "react";
+import PropTypes from "prop-types";
 import classNames from "classnames";
 import { observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
diff --git a/lib/ReactViews/StandardUserInterface/TrainerBar/TrainerBar.tsx b/lib/ReactViews/StandardUserInterface/TrainerBar/TrainerBar.tsx
@@ -19,10 +19,8 @@ import Text, { TextSpan } from "../../../Styled/Text";
 import measureElement, { MeasureElementProps } from "../../HOCs/measureElement";
 import { WithViewState, withViewState } from "../../Context";
 import { applyTranslationIfExists } from "../../../Language/languageHelpers";
-
-const StyledHtml: any =
-  require("../../Map/Panels/HelpPanel/StyledHtml").default;
-const CloseButton: any = require("../../Generic/CloseButton").default;
+import StyledHtml from "../../Map/Panels/HelpPanel/StyledHtml";
+import CloseButton from "../../Generic/CloseButton";
 
 const TrainerBarWrapper = styled(Box)<{ isMapFullScreen: boolean }>`
   top: 0;
diff --git a/lib/ReactViews/Tools/DiffTool/DatePicker.tsx b/lib/ReactViews/Tools/DiffTool/DatePicker.tsx
@@ -13,7 +13,7 @@ import Text, { TextSpan } from "../../../Styled/Text";
 import Box from "../../../Styled/Box";
 import Button from "../../../Styled/Button";
 import Spacing from "../../../Styled/Spacing";
-const dateFormat = require("dateformat");
+import dateFormat from "dateformat";
 
 interface PropsType extends WithTranslation {
   heading: string;
diff --git a/lib/ReactViews/Tools/DiffTool/DiffTool.tsx b/lib/ReactViews/Tools/DiffTool/DiffTool.tsx
@@ -53,8 +53,7 @@ import DatePicker from "./DatePicker";
 import LocationPicker from "./LocationPicker";
 import { CLOSE_TOOL_ID } from "../../Map/MapNavigation/registerMapNavigations";
 import updateModelFromJson from "../../../Models/Definition/updateModelFromJson";
-
-const dateFormat = require("dateformat");
+import dateFormat from "dateformat";
 
 type DiffableItem = DiffableMixin.Instance;
 
@@ -250,8 +249,8 @@ class Main extends React.Component<MainPropsType> {
     if (!firstDate || !secondDate) {
       return name;
     } else {
-      const d1 = dateFormat(firstDate, format);
-      const d2 = dateFormat(secondDate, format);
+      const d1 = dateFormat(JulianDate.toDate(firstDate), format);
+      const d2 = dateFormat(JulianDate.toDate(secondDate), format);
       return `${name} - difference for dates ${d1}, ${d2}`;
     }
   }
@@ -567,7 +566,11 @@ class Main extends React.Component<MainPropsType> {
                 <Box column alignItemsFlexStart>
                   {this.leftDate && (
                     <Text large>
-                      (A) {dateFormat(this.leftDate, "dd/mm/yyyy")}
+                      (A){" "}
+                      {dateFormat(
+                        JulianDate.toDate(this.leftDate),
+                        "dd/mm/yyyy"
+                      )}
                     </Text>
                   )}
                   {!this.leftDate && (
@@ -580,7 +583,11 @@ class Main extends React.Component<MainPropsType> {
                   <Spacing bottom={1} />
                   {this.rightDate && (
                     <Text large>
-                      (B) {dateFormat(this.rightDate, "dd/mm/yyyy")}
+                      (B){" "}
+                      {dateFormat(
+                        JulianDate.toDate(this.rightDate),
+                        "dd/mm/yyyy"
+                      )}
                     </Text>
                   )}
                   {!this.rightDate && (
diff --git a/lib/ReactViews/Tour/TourExplanationBox.tsx b/lib/ReactViews/Tour/TourExplanationBox.tsx
@@ -1,10 +1,10 @@
 import styled from "styled-components";
 import Box from "../../Styled/Box";
-import { TOUR_WIDTH } from "./tour-helpers.ts";
+import { TOUR_WIDTH } from "./tour-helpers";
 // TODO: make relative to app z-index
 export const TourExplanationBoxZIndex = 10000;
 
-export const TourExplanationBox = styled(Box)`
+export const TourExplanationBox = styled(Box)<{ longer?: boolean }>`
   position: absolute;
   width: ${(p) => (p.longer ? `${TOUR_WIDTH + 55}` : `${TOUR_WIDTH}`)}px;
   // background-color: $modal-bg;
@@ -31,7 +31,7 @@ export const TourExplanationBox = styled(Box)`
   h1,
   h2,
   h3 {
-    margin-bottom: ${(p) => p.theme.spacing * 3}px;
+    margin-bottom: ${(p) => (p.theme.spacing as any) * 3}px;
     font-size: 16px;
     font-weight: bold;
   }
diff --git a/lib/ReactViews/Tour/TourPortal.jsx b/lib/ReactViews/Tour/TourPortal.jsx
@@ -32,10 +32,10 @@ import {
 } from "./tour-helpers.ts";
 import TourExplanationBox, {
   TourExplanationBoxZIndex
-} from "./TourExplanationBox.jsx";
+} from "./TourExplanationBox";
 import TourIndicator from "./TourIndicator.jsx";
 import TourOverlay from "./TourOverlay.jsx";
-import TourPrefaceBox from "./TourPrefaceBox.jsx";
+import TourPrefaceBox from "./TourPrefaceBox";
 import TourProgressDot from "./TourProgressDot.jsx";
 
 /**
diff --git a/lib/ReactViews/Tour/TourPrefaceBox.tsx b/lib/ReactViews/Tour/TourPrefaceBox.tsx
diff --git a/lib/Table/TableColumn.ts b/lib/Table/TableColumn.ts
diff --git a/lib/ThirdParty/@mapbox/togeojson/index.d.ts b/lib/ThirdParty/@mapbox/togeojson/index.d.ts
diff --git a/lib/ThirdParty/geojson-vt/index.d.ts b/lib/ThirdParty/geojson-vt/index.d.ts
diff --git a/lib/ThirdParty/html-to-react/index.d.ts b/lib/ThirdParty/html-to-react/index.d.ts
diff --git a/lib/ThirdParty/javascript-natural-sort/index.d.ts b/lib/ThirdParty/javascript-natural-sort/index.d.ts
diff --git a/lib/ThirdParty/point-in-polygon/index.d.ts b/lib/ThirdParty/point-in-polygon/index.d.ts
diff --git a/lib/ThirdParty/react-datepicker/index.d.ts b/lib/ThirdParty/react-datepicker/index.d.ts
diff --git a/lib/ThirdParty/terriajs-cesium-extra/index.d.ts b/lib/ThirdParty/terriajs-cesium-extra/index.d.ts
diff --git a/lib/ViewModels/updateApplicationOnMessageFromParentWindow.js b/lib/ViewModels/updateApplicationOnMessageFromParentWindow.js
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-const proj4 = require("proj4/lib/index.js").default;`
	`1`	`+import proj4 from "proj4";`
`2`	`2`
`3`	`3`	`/**`
`4`	`4`	`* Turns the longitude / latitude in degrees into a human readable pretty UTM zone representation.`