From 034a080d87a82720f088add2560538c167c2a39f Mon Sep 17 00:00:00 2001
From: rmorshea <ryan.morshead@gmail.com>
Date: Fri, 19 Mar 2021 00:56:06 -0700
Subject: [PATCH] allow imported modules to define renderComponent func

this function is of the form (component, elementMountPoint)
which is the same as React.render - this makes it possible for
user components to issolate themselves from the rest of the
app with different versions of React or entirely different
frameworks. the change should ideally be backward compatible.
---
 src/index.js | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/index.js b/src/index.js
index 5839fc7..6173242 100644
--- a/src/index.js
+++ b/src/index.js
@@ -62,11 +62,21 @@ function ImportedElement({ model }) {
     model.importSource.source,
     config.importSourceUrl
   );
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    if (ref.current) {
+      module.renderComponent(
+        makeComponentFromModule(module, model, config),
+        ref.current
+      );
+    }
+  }, [ref, module, model, config]);
   if (module) {
-    const cmpt = getPathProperty(module, model.tagName);
-    const children = elementChildren(model);
-    const attributes = elementAttributes(model, config.sendEvent);
-    return html`<${cmpt} ...${attributes}>${children}<//>`;
+    if (module.renderComponent) {
+      return html`<div ref=${ref} />`;
+    } else {
+      return makeComponentFromModule(module, model, config);
+    }
   } else {
     const fallback = model.importSource.fallback;
     if (!fallback) {
@@ -155,6 +165,13 @@ function useLazyModule(source, sourceUrlBase = "") {
   return module;
 }
 
+function makeComponentFromModule(module, model, config) {
+  const cmptDef = getPathProperty(module, model.tagName);
+  const children = elementChildren(model);
+  const attributes = elementAttributes(model, config.sendEvent);
+  return html`<${cmptDef} ...${attributes}>${children}<//>`;
+}
+
 function useInplaceJsonPatch(doc) {
   const ref = react.useRef(doc);
   const forceUpdate = useForceUpdate();