add pre-loading shim to hook wg2nd bindings

1 files changed, 29 insertions, 23 deletions

diff --git a/pages/wg2nd/index.tsx b/pages/wg2nd/index.tsx
index 02537b3..45125d5 100644
--- a/pages/wg2nd/index.tsx
+++ b/pages/wg2nd/index.tsx
@@ -19,33 +19,38 @@ import desc from './desc.md';
  * HOOK THE MODULE FROM THE DOM
  */
 
+interface Wg2ndModule {
+  wg2nd_cmdseq: (intfName : string, intfconfig : string) => string;
+}
+
 declare global {
   interface Window {
-    Module: any;
+    Wg2ndModule: any;
+    wg2ndOnLoad: (module : Wg2ndModule) => void
   }
 }
 
 const useModule = <T extends any>(onInitCallback? : (module: T) => void): T | null => {
   const [module, setModule] = useState<T | null>(null);
 
-  useEffect(() => {
+  function setModuleWithCallback(module : T) {
+    console.log('setting module');
 
-    var Module = {
-      onRuntimeInitialized: function () {
-        if(onInitCallback !== undefined) {
-          onInitCallback(window.Module);
-        }
+    if(onInitCallback !== undefined) {
+      onInitCallback(module);
+    }
 
-        setModule(window.Module);
-      },
-    };
+    setModule(module);
+  }
 
-    if(module === null && typeof window.Module === "object") {
-      if(onInitCallback !== undefined) {
-        onInitCallback(window.Module);
-      }
+  useEffect(() => {
 
-      setModule(window.Module);
+    window.wg2ndOnLoad = function() {
+      setModuleWithCallback(window.Wg2ndModule);
+    }
+
+    if(module === null && typeof window.Wg2ndModule === "object") {
+      setModuleWithCallback(window.Wg2ndModule);
     }
 
   });
@@ -86,10 +91,6 @@ const Panel: React.FC<PanelProps> = ({ children, customStyle }) => (
     </section>
 );
 
-interface Wg2ndModule {
-  wg2nd_cmdseq: (intfName : string, intfconfig : string) => string;
-};
-
 import { Breadcrumbs, LinkCrumb } from "../../components/Breadcrumbs";
 
 const Wg2nd = () => {
@@ -98,14 +99,15 @@ const Wg2nd = () => {
   const ndConfigRef = useRef<HTMLTextAreaElement>(null);
   const parentDebounceDiv = useRef<HTMLDivElement>(null);
 
-  const convertConfig = (module : Wg2ndModule | null) => {
-    if(intfNameRef.current === null || intfConfigRef.current === null || module === null)
+  const convertConfig = (module : Wg2ndModule) => {
+    if(intfNameRef.current === null || intfConfigRef.current === null
+       || ndConfigRef.current === null || parentDebounceDiv.current === null) {
       return;
+    }
 
     const intfName = intfNameRef.current!.value;
     const intfConfig = intfConfigRef.current!.value;
 
-    console.log(module);
     const result = module.wg2nd_cmdseq(intfName, intfConfig);
 
     // This is a hack: adjust a wrapper around the output text area
@@ -170,7 +172,11 @@ const Wg2nd = () => {
         </Box>
         <Button
           sx={{width: '100%'}}
-          onClick={(e) => { convertConfig(module); }}
+          onClick={(e) => {
+            if(module !== null) {
+              convertConfig(module);
+            }
+          }}
         >Generate</Button>
       </Panel>