mobx version

Author: zoran995

lib/Views/root.jsx

@@ -1,10 +1,11 @@
+import { observer } from "mobx-react";
 import PropTypes from "prop-types";
-import React, { Suspense, useSyncExternalStore } from "react";
+import React, { Suspense } from "react";
+import { createRoot } from "react-dom/client";
+import Variables from "../Styles/variables.scss";
 import "./global.scss";
 import { Loader } from "./Loader";
 import { terriaStore } from "./terriaStore";
-import Variables from "../Styles/variables.scss";
-import { createRoot } from "react-dom/client";
 
 // Lazy load the entire TerriaUserInterface component
 const LazyTerriaUserInterface = React.lazy(() =>
@@ -13,11 +14,8 @@ const LazyTerriaUserInterface = React.lazy(() =>
   }))
 );
 
-const Root = ({ themeOverrides }) => {
-  const { terria, viewState, status } = useSyncExternalStore(
-    terriaStore.subscribe,
-    terriaStore.getSnapshot
-  );
+const Root = observer(({ themeOverrides }) => {
+  const { terria, viewState, status } = terriaStore;
 
   if (status === "loading") {
     return <Loader />;
@@ -32,7 +30,7 @@ const Root = ({ themeOverrides }) => {
       />
     </Suspense>
   );
-};
+});
 
 Root.propTypes = {
   themeOverrides: PropTypes.object

lib/Views/terriaStore.ts

@@ -1,59 +1,39 @@
+import { makeObservable, observable, action } from "mobx";
 import type Terria from "terriajs/lib/Models/Terria";
 import type ViewState from "terriajs/lib/ReactViewModels/ViewState";
 
-type State =
-  | {
-      terria: Terria;
-      viewState: ViewState;
-      status: "ready";
-    }
-  | {
-      terria: undefined;
-      viewState: undefined;
-      status: "loading";
-    };
-
-let state: State = {
-  terria: undefined,
-  viewState: undefined,
-  status: "loading"
-};
-type Listener = () => void;
-let listeners: Listener[] = [];
-
-const emitChange = () => {
-  for (const listener of listeners) {
-    listener();
+class TerriaStore {
+  terria: Terria | undefined = undefined;
+  viewState: ViewState | undefined = undefined;
+  status: "loading" | "ready" = "loading";
+
+  constructor() {
+    makeObservable(this, {
+      terria: observable,
+      viewState: observable,
+      status: observable,
+      setReady: action
+    });
+
+    this.init();
   }
-};
 
-export const terriaStore = {
   async init() {
+    //@ts-expect-error: need to convert to TS
     await import("terriajs/lib/Core/prerequisites");
 
     const { terria, viewState } = await import("../../index.js").then(
       (module) => module.default
     );
 
-    state = {
-      terria,
-      viewState,
-      status: "ready"
-    };
-
-    emitChange();
-  },
-  subscribe(listener: Listener) {
-    listeners = [...listeners, listener];
-
-    return () => {
-      listeners = listeners.filter((l) => l !== listener);
-    };
-  },
+    this.setReady(terria, viewState);
+  }
 
-  getSnapshot() {
-    return state;
+  setReady(terria: Terria, viewState: ViewState) {
+    this.terria = terria;
+    this.viewState = viewState;
+    this.status = "ready";
   }
-};
+}
 
-terriaStore.init();
+export const terriaStore = new TerriaStore();