move loader and initialization to react

Author: zoran995

buildprocess/webpack.config.js

@@ -10,7 +10,7 @@ module.exports = function (devMode) {
   // Base configuration
   const config = {
     mode: devMode ? "development" : "production",
-    entry: "./entry.js",
+    entry: "./entry.jsx",
     output: {
       path: path.resolve(__dirname, "..", "wwwroot", "build"),
       filename: "TerriaMap.js",
@@ -28,8 +28,7 @@ module.exports = function (devMode) {
         {
           test: /\.(ts|js)x?$/,
           include: [
-            path.resolve(__dirname, "..", "index.js"),
-            path.resolve(__dirname, "..", "entry.js"),
+            path.resolve(__dirname, "..", "entry.jsx"),
             path.resolve(__dirname, "..", "plugins.ts"),
             path.resolve(__dirname, "..", "lib")
           ],
@@ -80,12 +79,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 +93,7 @@ module.exports = function (devMode) {
                 defaultExport: true
               }
             },
+            { loader: "terriajs-typings-for-css-modules-loader" },
             {
               loader: "css-loader",
               options: {

entry.js

@@ -0,0 +1,8 @@
+import { UserInterface } from "./lib/Views/UserInterface";
+import Variables from "./lib/Styles/variables.scss";
+import { createRoot } from "react-dom/client";
+
+const container = document.getElementById("ui");
+const root = createRoot(container);
+
+root.render(<UserInterface themeOverrides={Variables} />);

entry.jsx

@@ -188,12 +188,7 @@ gulp.task("lint", function (done) {
   var runExternalModule = require("terriajs/buildprocess/runExternalModule");
   const eslintDir = path.dirname(require.resolve("eslint/package.json"));
   const eslintExecutable = path.join(eslintDir, "bin", "eslint.js");
-  runExternalModule(eslintExecutable, [
-    "--max-warnings",
-    "0",
-    "index.js",
-    "lib"
-  ]);
+  runExternalModule(eslintExecutable, ["--max-warnings", "0", "lib"]);
   done();
 });
 

gulpfile.js

@@ -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>
+  );
+};

index.js

@@ -1,22 +1,34 @@
 import PropTypes from "prop-types";
-import React from "react";
+import { useSyncExternalStore } from "react";
 import RelatedMaps from "terriajs/lib/ReactViews/RelatedMaps/RelatedMaps";
-import {
-  ExperimentalMenu,
-  MenuLeft
-} from "terriajs/lib/ReactViews/StandardUserInterface/customizable/Groups";
+import { MenuLeft } from "terriajs/lib/ReactViews/StandardUserInterface/customizable/Groups";
 import MenuItem from "terriajs/lib/ReactViews/StandardUserInterface/customizable/MenuItem";
 import StandardUserInterface from "terriajs/lib/ReactViews/StandardUserInterface/StandardUserInterface";
 import version from "../../version";
 import "./global.scss";
+import { Loader } from "./Loader";
+import { terriaStore } from "./terriaStore";
 
-export default function UserInterface(props) {
-  const relatedMaps = props.viewState.terria.configParameters.relatedMaps;
+export const UserInterface = ({ themeOverrides }) => {
+  const { terria, viewState, status } = useSyncExternalStore(
+    terriaStore.subscribe,
+    terriaStore.getSnapshot
+  );
+
+  if (status === "loading") {
+    return <Loader />;
+  }
+  const relatedMaps = viewState.terria.configParameters.relatedMaps;
   const aboutButtonHrefUrl =
-    props.viewState.terria.configParameters.aboutButtonHrefUrl;
+    viewState.terria.configParameters.aboutButtonHrefUrl;
 
   return (
-    <StandardUserInterface {...props} version={version}>
+    <StandardUserInterface
+      terria={terria}
+      viewState={viewState}
+      themeOverrides={themeOverrides}
+      version={version}
+    >
       <MenuLeft>
         {aboutButtonHrefUrl ? (
           <MenuItem
@@ -29,12 +41,11 @@ export default function UserInterface(props) {
           <RelatedMaps relatedMaps={relatedMaps} />
         ) : null}
       </MenuLeft>
-      <ExperimentalMenu />
+      {/* <ExperimentalMenu /> */}
     </StandardUserInterface>
   );
-}
+};
 
 UserInterface.propTypes = {
-  terria: PropTypes.object,
-  viewState: PropTypes.object
+  themeOverrides: PropTypes.object
 };

lib/Views/Loader.tsx

@@ -0,0 +1,17 @@
+declare namespace GlobalScssNamespace {
+  export interface IGlobalScss {
+    rcSliderTooltipZoomDownIn: string;
+    rcSliderTooltipZoomDownOut: string;
+    "react-datepicker__month--selecting-range": string;
+    "react-datepicker__year--selecting-range": string;
+    reactDatepickerMonthSelectingRange: string;
+    reactDatepickerYearSelectingRange: string;
+  }
+}
+
+declare const GlobalScssModule: GlobalScssNamespace.IGlobalScss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: GlobalScssNamespace.IGlobalScss;
+};
+
+export = GlobalScssModule;

lib/Views/UserInterface.jsx

@@ -0,0 +1,15 @@
+declare namespace LoaderScssNamespace {
+  export interface ILoaderScss {
+    "loader-ui": string;
+    "loader-ui-hide": string;
+    loaderUi: string;
+    loaderUiHide: string;
+  }
+}
+
+declare const LoaderScssModule: LoaderScssNamespace.ILoaderScss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: LoaderScssNamespace.ILoaderScss;
+};
+
+export = LoaderScssModule;