refactor: load/appendJs/Css error handling & onto mountNode

src/playground/babelMaster.ts

@@ -4,6 +4,7 @@ let wrapCode = (code: string) => {
   return `
 (async () => {
   setRendering(true)
+  mountNode.innerHTML = ''
   try {
     let { useRef, useMemo, useState, useEffect, useLayoutEffect, useReducer, useContext, useCallback, useImperativeHandle } = React
     ;;${code};;
@@ -20,6 +21,7 @@ let wrapCode = (code: string) => {
       ReactDOM.render(<App />, mountNode)
     }
   } catch (err) {
+    console.error(['displayError', err])
     displayError(err)
   } finally {
     setRendering(false)
@@ -33,8 +35,8 @@ export let babelTransform = async (code: string): Promise<string> => {
     let fullCode = wrapCode(code);
 
     worker.onerror = e => {
-      console.log(['worker error', e]);
-      reject(e);
+      console.error(['worker onerror', e]);
+      reject(new Error(`worker onerror - ${code.slice(0, 100)}`));
     };
 
     worker.onmessage = e => {

src/playground/types.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+  mountNode: HTMLDivElement;
+}

src/playground/util.tsx

@@ -39,14 +39,12 @@ export let loadJs = (url: string) => {
     let el = document.createElement('script');
     el.src = url;
     el.onload = () => {
-      document.body.removeChild(el);
       resolve();
     };
     el.onerror = e => {
-      document.body.removeChild(el);
-      reject(e);
+      reject(new Error(`loadJs onerror - ${url}`));
     };
-    document.body.appendChild(el);
+    window.mountNode.appendChild(el);
   });
 };
 
@@ -59,9 +57,9 @@ export let loadCss = (url: string) => {
       resolve();
     };
     el.onerror = e => {
-      reject(e);
+      reject(new Error(`loadCss onerror - ${url}`));
     };
-    document.body.appendChild(el);
+    window.mountNode.appendChild(el);
   });
 };
 
@@ -70,14 +68,12 @@ export let appendJs = (code: string) => {
     let el = document.createElement('script');
     el.innerHTML = code;
     el.onload = () => {
-      document.body.removeChild(el);
       resolve();
     };
     el.onerror = e => {
-      document.body.removeChild(el);
-      reject(e);
+      reject(new Error(`appendJs onerror - ${code.slice(0, 100)}`));
     };
-    document.body.appendChild(el);
+    window.mountNode.appendChild(el);
   });
 };
 
@@ -89,8 +85,8 @@ export let appendCss = (code: string) => {
       resolve();
     };
     el.onerror = e => {
-      reject(e);
+      reject(new Error(`appendCss onerror - ${code.slice(0, 100)}`));
     };
-    document.body.appendChild(el);
+    window.mountNode.appendChild(el);
   });
 };