add back lazy component (even though not working)

Author: rmorshea

scripts/build.sh

@@ -2,3 +2,4 @@
 cd src/idom/client
 npm install
 npm run snowpack
+cd ../../../

src/idom/client/js/event-to-object.js

@@ -1,9 +1,9 @@
 function serializeEvent(event) {
   const data = {};
-  if (event.target.hasOwnProperty("value")) {
+  if ("value" in event.target) {
     data.value = event.target.value;
   }
-  if (eventTransforms.hasOwnProperty(event.type)) {
+  if (event.type in eventTransforms) {
     Object.assign(data, eventTransforms[event.type](event));
   }
   return data;

src/idom/client/js/index.js

@@ -6,7 +6,10 @@ import {
   useMemo,
 } from "../web_modules/preact/hooks.js";
 import htm from "../web_modules/htm.js";
+import { Suspense } from "../web_modules/preact/compat.js";
+
 import serializeEvent from "./event-to-object.js";
+import lazyComponent from "./lazy-component.js";
 
 const html = htm.bind(h);
 
@@ -87,8 +90,8 @@ function Element({ model, sendEvent }) {
   if (model.importSource) {
     const lazy = lazyComponent(model);
     return html`
-      <Suspense fallback="{model.importSource.fallback}">
-        {React.createElement(lazy, attributes, children)}
+      <Suspense fallback="${model.importSource.fallback}">
+        ${h(lazy, attributes, children)}
       </Suspense>
     `;
   } else if (model.children && model.children.length) {
@@ -109,7 +112,10 @@ function elementChildren(model, sendEvent) {
             <${DynamicElement} elementId=${child.data} sendEvent=${sendEvent} />
           `;
         case "obj":
-          return html`<${Element} model=${child.data} sendEvent=${sendEvent} />`;
+          return html`<${Element}
+            model=${child.data}
+            sendEvent=${sendEvent}
+          />`;
         case "str":
           return child.data;
       }

src/idom/client/js/lazy-component.js

@@ -0,0 +1,41 @@
+import { h, Component } from "../web_modules/preact.js";
+import htm from "../web_modules/htm.js";
+import { lazy } from "../web_modules/preact/compat.js";
+
+const html = htm.bind(h);
+
+function lazyComponent(model) {
+  return lazy(() => {
+    return eval(`import('${model.importSource.source}')`).then(
+      (pkg) => {
+        pkg = pkg.default ? pkg.default : pkg;
+        const cmpt = model.tagName ? getPathProperty(pkg, model.tagName) : pkg;
+        return {default: cmpt};
+      },
+      (error) => {
+        function Catch() {
+          return html`
+            <pre>
+              <code>${error.stack}</code>
+            </pre
+            >
+          `;
+        }
+        return { default: Catch };
+      }
+    );
+  });
+}
+
+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;
+}
+
+export default lazyComponent;

src/idom/client/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "index.js",
   "scripts": {
-    "snowpack": "./node-modules/.bin/snowpack",
+    "snowpack": "./node_modules/.bin/snowpack",
     "lint": "./node_modules/.bin/prettier --write ."
   },
   "devDependencies": {
@@ -21,7 +21,8 @@
     "webDependencies": [
       "htm",
       "preact",
-      "preact/hooks"
+      "preact/hooks",
+      "preact/compat"
     ]
   }
 }