check for same sourceInfo in react template

This allows the template to determine whether the imported
component comes from the same import source. Passing children
from different import sources is difficult to handle unless
treated with manual care.

Author: rmorshea

docs/source/javascript-components.rst

@@ -73,12 +73,12 @@ adheres to the following interface:
         loadImportSource(source: string, sourceType: "NAME" | "URL") => Module;
     }
 
-    type ImportSource = {
+    type SourceInfo = {
         source: string;
         sourceType: string;
     }
 
-    type bind = (node: HTMLElement, context: LayoutContext, source: ImportSource) => ({
+    type bind = (node: HTMLElement, context: LayoutContext, source: SourceInfo) => ({
         render(component: any, props: Object, childModels: Array<any>): void;
         unmount(): void;
     });

src/idom/web/templates/react.js

@@ -10,59 +10,71 @@ import {
   elementChildren,
 } from "$CDN/idom-client-react";
 
-export function bind(node, config) {
+export function bind(node, config, sourceInfo) {
   return {
     render: (component, props, children) =>
-      ReactDOM.render(createElement(config, component, props, children), node),
+      ReactDOM.render(
+        createElement(config, sourceInfo, component, props, children),
+        node
+      ),
     unmount: () => ReactDOM.unmountComponentAtNode(node),
   };
 }
 
-function createElement(config, component, props, children) {
+function createElement(config, sourceInfo, component, props, children) {
   return React.createElement(
     LayoutConfigContext.Provider,
     { value: config },
-    React.createElement(component, props, ...createChildren(children, config))
+    React.createElement(
+      component,
+      props,
+      ...createChildren(config, sourceInfo, children)
+    )
   );
 }
 
-function createChildren(children, config) {
+function createChildren(config, sourceInfo, children) {
   if (!children) {
     return [];
   }
   return children.map((child) => {
     if (typeof child == "string") {
       return child;
     } else if (child.importSource) {
-      return createElementFromThisImportSource(child, config);
+      return createElementFromThisImportSource(config, sourceInfo, child);
     } else {
       return React.createElement(Element, { model: child });
     }
   });
 }
 
-function createElementFromThisImportSource(model, config) {
-  const Component = ThisImportSource[model.tagName];
-  if (!Component) {
+function createElementFromThisImportSource(config, sourceInfo, model) {
+  if (
+    model.importSource.source != sourceInfo.source ||
+    model.importSource.sourceType != sourceInfo.sourceType
+  ) {
     console.error(
       `Cannot create ${model.tagName} from different import source ` +
         `${model.importSource.source} (type: ${model.importSource.sourceType})`
     );
+    return React.createElement("pre", {}, "error");
   }
   return React.createElement(
-    Component,
+    ThisImportSource[model.tagName],
     elementAttributes(model, (event) => {
-      event.data = event.data.filter(value => {
+      event.data = event.data.filter((value) => {
         try {
           JSON.stringify(value);
         } catch (err) {
-          console.error(`Failed to serialize some event data for ${model.tagName}`)
+          console.error(
+            `Failed to serialize some event data for ${model.tagName}`
+          );
           return false;
         }
         return true;
-      })
+      });
       config.sendEvent(event);
     }),
-    ...createChildren(model.children, config)
+    ...createChildren(config, sourceInfo, model.children)
   );
 }