fix: correctly await types in serve

commands/serve/web/components/Visualize/Visualize.jsx

@@ -80,6 +80,7 @@ export default function Visualize() {
   const [currentId, setCurrentId] = useState();
   const [themeChooserAnchorEl, setThemeChooserAnchorEl] = React.useState(null);
   const [languageChooserAnchorEl, setLanguageChooserAnchorEl] = React.useState(null);
+  const [initialized, setInit] = useState(false);
   const [nebbie, setNebbie] = useState(null);
   const customThemes = Array.isArray(info?.themes) && info.themes.length ? ['light', 'dark', ...info.themes] : [];
 
@@ -97,11 +98,16 @@ export default function Visualize() {
   );
 
   useEffect(() => {
-    if (info) initiateWatch(info);
+    (async () => {
+      if (info) {
+        await initiateWatch(info);
+        setInit(true);
+      }
+    })();
   }, [info]);
 
   useEffect(() => {
-    if (waiting) return;
+    if (waiting || !initialized) return;
     const n = embed(app, {
       context: {
         theme: currentThemeName,
@@ -132,7 +138,7 @@ export default function Visualize() {
     }
 
     setNebbie(n);
-  }, [app, info, waiting]);
+  }, [app, info, waiting, initialized]);
 
   useLayoutEffect(() => {
     if (!nebbie) return;

commands/serve/web/eRender.js

@@ -32,7 +32,7 @@ const nuke = async ({ app, supernova: { name }, themes, theme, language }) => {
 
 async function renderWithEngine() {
   const info = await getConnectionInfo();
-  initiateWatch(info);
+  await initiateWatch(info);
   if (!info.enigma.appId) {
     location.href = location.origin; //eslint-disable-line
   }
@@ -82,7 +82,7 @@ async function renderWithEngine() {
 async function renderSnapshot() {
   const info = await getConnectionInfo();
   const { themes, supernova } = info;
-  initiateWatch(info);
+  await initiateWatch(info);
   const element = document.querySelector('#chart-container');
   element.classList.toggle('full', true);
 

commands/serve/web/hot.js

@@ -46,13 +46,6 @@ export default function initiateWatch(info) {
       window[info.supernova.name] = mo;
       lightItUp(info.supernova.name);
     });
-    if (info.types) {
-      info.types.forEach((t) => {
-        getModule(t.name, t.url).then((mo) => {
-          window[t.name] = mo;
-        });
-      });
-    }
   };
 
   if (info.sock.port) {
@@ -62,4 +55,13 @@ export default function initiateWatch(info) {
     };
   }
   update();
+  if (info.types) {
+    const proms = info.types.map((t) => {
+      return getModule(t.name, t.url).then((mo) => {
+        window[t.name] = mo;
+      });
+    });
+    return Promise.all(proms);
+  }
+  return Promise.resolve();
 }