Rewriting store to handle a runtime configuration

Author: GregJHarris

src/redux/index.ts

@@ -1 +1,2 @@
 export { store } from "./store";
+export type { CsWebLibConfig } from "./store";

src/redux/store.ts

@@ -8,39 +8,77 @@ import { SimulatorPlugin } from "../connection/sim";
 import { PvwsPlugin } from "../connection/pvws";
 import { ConnectionForwarder } from "../connection/forwarder";
 
-const PVWS_SOCKET =
-  process.env.VITE_PVWS_SOCKET ?? import.meta.env.VITE_PVWS_SOCKET;
-const PVWS_SSL =
-  (process.env.VITE_PVWS_SSL ?? import.meta.env.VITE_PVWS_SSL) === "true";
-const THROTTLE_PERIOD = parseFloat(
-  process.env.VITE_THROTTLE_PERIOD ??
-    import.meta.env.VITE_THROTTLE_PERIOD ??
-    "100"
-);
-
-const simulator = new SimulatorPlugin();
-const plugins: [string, Connection][] = [["sim://", simulator]];
-if (PVWS_SOCKET !== undefined) {
-  const pvws = new PvwsPlugin(PVWS_SOCKET, PVWS_SSL);
-  plugins.unshift(["pva://", pvws]);
-  plugins.unshift(["ca://", pvws]);
-  plugins.unshift(["loc://", pvws]);
-  plugins.unshift(["sim://", pvws]);
-  plugins.unshift(["ssim://", pvws]);
-  plugins.unshift(["dev://", pvws]);
-  plugins.unshift(["eq://", pvws]);
-}
-const connection = new ConnectionForwarder(plugins);
+export type CsWebLibConfig = {
+  PVWS_SOCKET: string | undefined;
+  PVWS_SSL: boolean | undefined;
+  THROTTLE_PERIOD: number | undefined;
+};
+
+// Store singleton
+let storeInstance: ReturnType<typeof createStore> | null = null;
+let connectionInstance: ConnectionForwarder | null = null;
+
+const buildConnection = (config?: CsWebLibConfig) => {
+  const PVWS_SOCKET =
+    config?.PVWS_SOCKET ??
+    process.env.VITE_PVWS_SOCKET ??
+    import.meta.env.VITE_PVWS_SOCKET;
+  const PVWS_SSL =
+    (config?.PVWS_SSL ??
+      process.env.VITE_PVWS_SSL ??
+      import.meta.env.VITE_PVWS_SSL) === "true";
+
+  const simulator = new SimulatorPlugin();
+  const plugins: [string, Connection][] = [["sim://", simulator]];
+
+  if (PVWS_SOCKET !== undefined) {
+    const pvws = new PvwsPlugin(PVWS_SOCKET, PVWS_SSL);
+    plugins.unshift(["pva://", pvws]);
+    plugins.unshift(["ca://", pvws]);
+    plugins.unshift(["loc://", pvws]);
+    plugins.unshift(["sim://", pvws]);
+    plugins.unshift(["ssim://", pvws]);
+    plugins.unshift(["dev://", pvws]);
+    plugins.unshift(["eq://", pvws]);
+  }
+
+  return new ConnectionForwarder(plugins);
+};
 
 const composeEnhancers =
   (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
-export const store = createStore(
-  csReducer,
-  /* preloadedState, */ composeEnhancers(
-    applyMiddleware(
-      connectionMiddleware(connection),
-      throttleMiddleware(new UpdateThrottle(THROTTLE_PERIOD))
+export const store = (config?: CsWebLibConfig) => {
+  if (storeInstance) {
+    return storeInstance;
+  }
+
+  if (!connectionInstance) {
+    connectionInstance = buildConnection(config);
+  }
+
+  const THROTTLE_PERIOD: number = parseFloat(
+    config?.THROTTLE_PERIOD ??
+      process.env.VITE_THROTTLE_PERIOD ??
+      import.meta.env.VITE_THROTTLE_PERIOD ??
+      "100"
+  );
+
+  storeInstance = createStore(
+    csReducer,
+    /* preloadedState, */ composeEnhancers(
+      applyMiddleware(
+        connectionMiddleware(connectionInstance),
+        throttleMiddleware(new UpdateThrottle(THROTTLE_PERIOD))
+      )
     )
-  )
-);
+  );
+
+  return storeInstance;
+};
+
+// Reset store (for testing)
+export const resetStore = () => {
+  storeInstance = null;
+  connectionInstance = null;
+};

src/ui/hooks/useSubscription.ts

@@ -44,7 +44,7 @@ export function useSubscription(
 }
 
 export function writePv(pvName: string, value: DType): void {
-  store.dispatch({
+  store().dispatch({
     type: WRITE_PV,
     payload: { pvName: pvName, value: value }
   });

src/ui/widgets/Tabs/tabContainer.test.tsx

@@ -17,7 +17,7 @@ describe("<TabContainer>", (): void => {
     };
     const { findByText } = await act(() => {
       return render(
-        <Provider store={store}>
+        <Provider store={store()}>
           <TabContainerComponent tabs={{ one: child }} />
         </Provider>
       );
@@ -32,7 +32,7 @@ describe("<TabContainer>", (): void => {
     log.setLevel("error");
     const { findByText } = await act(() => {
       return render(
-        <Provider store={store}>
+        <Provider store={store()}>
           <TabContainerComponent tabs={{ one: child }} />
         </Provider>
       );
@@ -54,7 +54,7 @@ describe("<TabContainer>", (): void => {
 
     const { findByText } = await act(() => {
       return render(
-        <Provider store={store}>
+        <Provider store={store()}>
           <TabContainerComponent tabs={{ one: child1, two: child2 }} />
         </Provider>
       );