remove custom templating solution

Author: rmorshea

src/idom/web/module.py

@@ -9,7 +9,8 @@
 from dataclasses import dataclass
 from functools import partial
 from pathlib import Path
-from typing import Any, Dict, List, NewType, Optional, Set, Tuple, Union, overload
+from string import Template
+from typing import Any, List, NewType, Optional, Set, Tuple, Union, overload
 from urllib.parse import urlparse
 
 from typing_extensions import Protocol
@@ -103,7 +104,6 @@ def module_from_template(
     **Templates**
 
     - ``react``: for modules exporting React components
-    - ``react-default``: for React modules that use ``export default``
 
     Parameters:
         template:
@@ -149,7 +149,9 @@ def module_from_template(
     if not target_file.exists():
         target_file.parent.mkdir(parents=True, exist_ok=True)
         target_file.write_text(
-            _resolve_template(template_file, {"$PACKAGE": package, "$CDN": cdn})
+            Template(template_file.read_text()).substitute(
+                {"PACKAGE": package, "CDN": cdn}
+            )
         )
 
     return WebModule(
@@ -328,24 +330,3 @@ def _web_module_path(name: str, prefix: str = "") -> Path:
         directory /= prefix
     path = directory.joinpath(*name.split("/"))
     return path.with_suffix(path.suffix)
-
-
-def _resolve_template(file: Path, substitutions: Dict[str, str]) -> str:
-    # NOTE: If this needs to be any more complex than it is, we should really
-    # reconsider this solution. Either use a real templating solution like Jinja
-    # or do something else entirely.
-    resolved_lines = []
-    for line in file.read_text().splitlines():
-        if line.startswith("$TEMPLATE:"):
-            relative_path = line.split(":", 1)[1].strip()
-            inner_template_file = file.parent.joinpath(*relative_path.split("/"))
-            resolved_lines.append(_resolve_template(inner_template_file, {}))
-        else:
-            resolved_lines.append(line)
-
-    result = "\n".join(resolved_lines)
-    if substitutions:
-        for k, v in substitutions.items():
-            result = result.replace(k, v)
-
-    return result

src/idom/web/templates/react.default.js

@@ -1,5 +1,48 @@
-// add the default export
-export { default } from "$CDN/$PACKAGE";
+export default from "$CDN/$PACKAGE";
+export * from "$CDN/$PACKAGE";
 
-// insert the normal react template
-$TEMPLATE:react.js
+import * as React from "$CDN/react";
+import * as ReactDOM from "$CDN/react-dom";
+
+export function bind(node, config) {
+  return {
+    create: (component, props, children) =>
+      React.createElement(component, wrapEventHandlers(props), ...children),
+    render: (element) => ReactDOM.render(element, node),
+    unmount: () => ReactDOM.unmountComponentAtNode(node),
+  };
+}
+
+function wrapEventHandlers(props) {
+  const newProps = Object.assign({}, props);
+  for (const [key, value] of Object.entries(props)) {
+    if (typeof value === "function") {
+      newProps[key] = makeJsonSafeEventHandler(value);
+    }
+  }
+  return newProps;
+}
+
+function makeJsonSafeEventHandler(oldHandler) {
+  // Since we can't really know what the event handlers get passed we have to check if
+  // they are JSON serializable or not. We can allow normal synthetic events to pass
+  // through since the original handler already knows how to serialize those for us.
+  return function safeEventHandler() {
+    oldHandler(
+      ...Array.from(arguments).filter((value) => {
+        if (typeof value === "object" && value.nativeEvent) {
+          // this is probably a standard React synthetic event
+          return true;
+        } else {
+          try {
+            JSON.stringify(value);
+          } catch (err) {
+            console.error("Failed to serialize some event data");
+            return false;
+          }
+          return true;
+        }
+      })
+    );
+  };
+}