Adds support for web module subcomponent notation

Author: shawncrawley

src/js/packages/@reactpy/client/src/vdom.tsx

@@ -68,6 +68,7 @@ function createImportSourceElement(props: {
 }): any {
   let type: any;
   if (props.model.importSource) {
+    let rootType = props.model.tagName.split(".")[0];
     if (
       !isImportSourceEqual(props.currentImportSource, props.model.importSource)
     ) {
@@ -78,15 +79,16 @@ function createImportSourceElement(props: {
           stringifyImportSource(props.model.importSource),
       );
       return null;
-    } else if (!props.module[props.model.tagName]) {
+    } else if (!props.module[rootType]) {
       log.error(
         "Module from source " +
           stringifyImportSource(props.currentImportSource) +
-          ` does not export ${props.model.tagName}`,
+          ` does not export ${rootType}`,
       );
       return null;
     } else {
-      type = props.module[props.model.tagName];
+      type = tryGetSubType(props.module, props.model.tagName);
+      if (!type) return null;
     }
   } else {
     type = props.model.tagName;
@@ -103,6 +105,30 @@ function createImportSourceElement(props: {
   );
 }
 
+function tryGetSubType(
+  module: ReactPyModule,
+  component: string
+) {
+  let subComponents: string[] = component.split(".");
+  let rootComponent: string = subComponents[0];
+  let subComponentAccessor: string = rootComponent;
+  let type: any = module[rootComponent];
+  
+  subComponents = subComponents.slice(1);
+  for (let i = 0; i < subComponents.length; i++) {
+    let subComponent = subComponents[i];
+    subComponentAccessor += "." + subComponent;
+    type = type[subComponent];
+    if (!type) {
+      console.error(
+        `Component ${rootComponent} does not have subcomponent ${subComponentAccessor}`
+      );
+      break
+    }
+  }
+  return type;
+}
+
 function isImportSourceEqual(
   source1: ReactPyVdomImportSource,
   source2: ReactPyVdomImportSource,

src/reactpy/web/module.py

@@ -260,14 +260,14 @@ def export(
     if isinstance(export_names, str):
         if (
             web_module.export_names is not None
-            and export_names not in web_module.export_names
+            and export_names.split(".")[0] not in web_module.export_names
         ):
             msg = f"{web_module.source!r} does not export {export_names!r}"
             raise ValueError(msg)
         return _make_export(web_module, export_names, fallback, allow_children)
     else:
         if web_module.export_names is not None:
-            missing = sorted(set(export_names).difference(web_module.export_names))
+            missing = sorted(set([e.split(".")[0] for e in export_names]).difference(web_module.export_names))
             if missing:
                 msg = f"{web_module.source!r} does not export {missing!r}"
                 raise ValueError(msg)

tests/test_web/js_fixtures/subcomponent-notation.js

@@ -0,0 +1,14 @@
+import React from "https://esm.sh/react@19.0"
+import ReactDOM from "https://esm.sh/react-dom@19.0/client"
+import Form from "https://esm.sh/react-bootstrap@2.10.9/Form";
+export {Form};
+
+export function bind(node, config) {
+  const root = ReactDOM.createRoot(node);
+  return {
+    create: (type, props, children) => 
+      React.createElement(type, props, children),
+    render: (element) => root.render(element, node),
+    unmount: () => root.unmount()
+  };
+}

tests/test_web/test_module.py

@@ -268,6 +268,20 @@ async def test_keys_properly_propagated(display: DisplayFixture):
     assert len(children) == 3
 
 
+async def test_subcomponent_notation(display: DisplayFixture):
+    module = reactpy.web.module_from_file(
+        "subcomponent-notation", JS_FIXTURES_DIR / "subcomponent-notation.js",
+    )
+    BootstrapFormLabel = reactpy.web.export(module, "Form.Label")
+
+    await display.show(
+        lambda: BootstrapFormLabel({"htmlFor": "test-123"}, "Test 123")
+    )
+
+    await display.page.wait_for_selector(".form-label", state="attached")
+    # The above will fail due to timeout if it does not work as expected
+
+
 def test_module_from_string():
     reactpy.web.module_from_string("temp", "old")
     with assert_reactpy_did_log(r"Existing web module .* will be replaced with"):