roll custom suspense solution

unfortunately the builtin Suspense has a habbit of flickering
the fallback whenever the view updates, so we needed a custom
solution to this

Author: rmorshea

idom/client/core_modules/layout.js

@@ -8,11 +8,16 @@ import ReactDOM from "../web_modules/react-dom.js";
 import htm from "../web_modules/htm.js";
 
 import serializeEvent from "./event-to-object.js";
-import lazyComponent from "./lazy-component.js";
 
 const html = htm.bind(React.createElement);
+const alreadyImported = {};
 
-function Layout({ endpoint }) {
+export function renderLayout(mountElement, endpoint) {
+  const cmpt = html`<${Layout} endpoint=${endpoint} />`;
+  return ReactDOM.render(cmpt, mountElement);
+}
+
+export default function Layout({ endpoint }) {
   // handle relative endpoint URI
   if (endpoint.startsWith(".") || endpoint.startsWith("/")) {
     let loc = window.location;
@@ -48,36 +53,48 @@ function Layout({ endpoint }) {
       body: { event: event },
     });
   };
-
   if (modelState.root && modelState.models[modelState.root]) {
     return html`<${Element}
       modelState=${modelState}
-      model=${modelState.models[modelState.root]}
       sendEvent=${sendEvent}
+      model=${modelState.models[modelState.root]}
     />`;
   } else {
     return html`<div />`;
   }
 }
 
-function Element({ modelState, model, sendEvent }) {
-  const children = elementChildren(modelState, model, sendEvent);
-  const attributes = elementAttributes(model, sendEvent);
+function Element({ modelState, sendEvent, model }) {
   if (model.importSource) {
-    const cmpt = lazyComponent(model);
-    return html`
-      <${Suspense} fallback="${model.importSource.fallback}">
-        <${cmpt} ...${attributes}>${children}<//>
-      <//>
-    `;
-  } else if (model.children && model.children.length) {
-    return html`<${model.tagName} ...${attributes}>${children}<//>`;
+    return html`<${LazyElement}
+      modelState=${modelState}
+      sendEvent=${sendEvent}
+      model=${model}
+    />`;
+  } else {
+    const children = elementChildren(modelState, sendEvent, model);
+    const attributes = elementAttributes(sendEvent, model);
+    if (model.children && model.children.length) {
+      return html`<${model.tagName} ...${attributes}>${children}<//>`;
+    } else {
+      return html`<${model.tagName} ...${attributes} />`;
+    }
+  }
+}
+
+function LazyElement({ modelState, sendEvent, model }) {
+  const module = useLazyModule(model.importSource.source);
+  if (module) {
+    const cmpt = getPathProperty(module, model.tagName);
+    const children = elementChildren(modelState, sendEvent, model);
+    const attributes = elementAttributes(sendEvent, model);
+    return html`<${cmpt} ...${attributes}>${children}<//>`;
   } else {
-    return html`<${model.tagName} ...${attributes} />`;
+    return html`<div>${model.importSource.fallback}<//>`;
   }
 }
 
-function elementChildren(modelState, model, sendEvent) {
+function elementChildren(modelState, sendEvent, model) {
   if (!model.children) {
     return [];
   } else {
@@ -106,45 +123,84 @@ function elementChildren(modelState, model, sendEvent) {
   }
 }
 
-function elementAttributes(model, sendEvent) {
+function elementAttributes(sendEvent, model) {
   const attributes = Object.assign({}, model.attributes);
 
   if (model.eventHandlers) {
     Object.keys(model.eventHandlers).forEach((eventName) => {
       const eventSpec = model.eventHandlers[eventName];
-      attributes[eventName] = function eventHandler(event) {
-        const data = Array.from(arguments).map((value) => {
-          if (typeof value === "object" && value.nativeEvent) {
-            if (eventSpec["preventDefault"]) {
-              value.preventDefault();
-            }
-            if (eventSpec["stopPropagation"]) {
-              value.stopPropagation();
-            }
-            return serializeEvent(value);
-          } else {
-            return value;
-          }
-        });
-        const sentEvent = new Promise((resolve, reject) => {
-          const msg = {
-            data: data,
-            target: eventSpec["target"],
-          };
-          sendEvent(msg);
-          resolve(msg);
-        });
-      };
+      attributes[eventName] = eventHandler(sendEvent, eventSpec);
     });
   }
 
   return attributes;
 }
 
-function renderLayout(mountElement, endpoint) {
-  const cmpt = html`<${Layout} endpoint=${endpoint} />`;
-  return ReactDOM.render(cmpt, mountElement);
+function eventHandler(sendEvent, eventSpec) {
+  return function () {
+    const data = Array.from(arguments).map((value) => {
+      if (typeof value === "object" && value.nativeEvent) {
+        if (eventSpec["preventDefault"]) {
+          value.preventDefault();
+        }
+        if (eventSpec["stopPropagation"]) {
+          value.stopPropagation();
+        }
+        return serializeEvent(value);
+      } else {
+        return value;
+      }
+    });
+    const sentEvent = new Promise((resolve, reject) => {
+      const msg = {
+        data: data,
+        target: eventSpec["target"],
+      };
+      sendEvent(msg);
+      resolve(msg);
+    });
+  };
+}
+
+function useLazyModule(source) {
+  const [module, setModule] = useState(alreadyImported[source]);
+  if (!module) {
+    dynamicImport(source).then(setModule);
+  }
+  return module;
+}
+
+function dynamicImport(source) {
+  return eval(`import('${source}')`).then(
+    (pkg) => (pkg.default ? pkg.default : pkg),
+    (error) => {
+      if (!error.stack) {
+        throw error;
+      } else {
+        console.log(error);
+        return {
+          default: function Catch() {
+            return html`
+              <pre>
+                  <h1>Error</h1>
+                  <code>${[error.stack, error.message]}</code>
+                </pre
+              >
+            `;
+          },
+        };
+      }
+    }
+  );
 }
 
-export default Layout;
-export { renderLayout };
+function getPathProperty(obj, prop) {
+  // properties may be dot seperated strings
+  const path = prop.split(".");
+  const firstProp = path.shift();
+  let value = obj[firstProp];
+  for (let i = 0; i < path.length; i++) {
+    value = value[path[i]];
+  }
+  return value;
+}