ability to specify version in template + no more exports_default (#765)

* ability to specify react version in template

* fix simple chart example

* changelog + add dynamic default export

* test template versioning

Author: rmorshea

docs/source/about/changelog.rst

@@ -36,6 +36,14 @@ Unreleased
   - ``ServerFixture -> BackendFixture``
   - ``DisplayFixture.server -> DisplayFixture.backend``
 
+- :pull:`765` - ``exports_default`` parameter is not longer required for
+  ``module_from_template`` when exporting ``default``.
+
+**Added**
+
+- :pull:`765` - ability to specify versions with module templates (e.g.
+  ``module_from_template("react@^17.0.0", ...)``).
+
 
 v0.38.1
 -------

docs/source/guides/escape-hatches/_examples/material_ui_button_no_action.py

@@ -1,11 +1,17 @@
-import idom
+from idom import component, run, web
 
 
-mui = idom.web.module_from_template("react", "@material-ui/core@^5.0", fallback="⌛")
-Button = idom.web.export(mui, "Button")
-
-idom.run(
-    idom.component(
-        lambda: Button({"color": "primary", "variant": "contained"}, "Hello World!")
-    )
+mui = web.module_from_template(
+    "react@^17.0.0",
+    "@material-ui/[email protected]",
+    fallback="⌛",
 )
+Button = web.export(mui, "Button")
+
+
+@component
+def HelloWorld():
+    return Button({"color": "primary", "variant": "contained"}, "Hello World!")
+
+
+run(HelloWorld)

docs/source/guides/escape-hatches/_examples/material_ui_button_on_click.py

@@ -3,7 +3,11 @@
 import idom
 
 
-mui = idom.web.module_from_template("react", "@material-ui/core@^5.0", fallback="⌛")
+mui = idom.web.module_from_template(
+    "react@^17.0.0",
+    "@material-ui/[email protected]",
+    fallback="⌛",
+)
 Button = idom.web.export(mui, "Button")
 
 

docs/source/guides/escape-hatches/_examples/super_simple_chart/super-simple-chart.js

@@ -48,10 +48,9 @@ function makePath(props, domain, data, options) {
   const getSvgX = (x) => ((x - xMin) / (xMax - xMin)) * width;
   const getSvgY = (y) => height - ((y - yMin) / (yMax - yMin)) * height;
 
-  let pathD = "M " + getSvgX(data[0].x) + " " + getSvgY(data[0].y) + " ";
-  pathD += data.map((point, i) => {
-    return "L " + getSvgX(point.x) + " " + getSvgY(point.y) + " ";
-  });
+  let pathD =
+    `M ${getSvgX(data[0].x)} ${getSvgY(data[0].y)} ` +
+    data.map(({ x, y }, i) => `L ${getSvgX(x)} ${getSvgY(y)}`).join(" ");
 
   return html`<path
     d="${pathD}"

docs/source/reference/_examples/network_graph.py

@@ -4,10 +4,8 @@
 
 
 react_cytoscapejs = idom.web.module_from_template(
-    # we need to use this template because react-cytoscapejs uses a default export
     "react",
     "react-cytoscapejs",
-    exports_default=True,
     fallback="⌛",
 )
 Cytoscape = idom.web.export(react_cytoscapejs, "default")

src/idom/web/module.py

@@ -79,7 +79,6 @@ def module_from_template(
     package: str,
     cdn: str = "https://esm.sh",
     fallback: Optional[Any] = None,
-    exports_default: bool = False,
     resolve_exports: bool = IDOM_DEBUG_MODE.current,
     resolve_exports_depth: int = 5,
     unmount_before_update: bool = False,
@@ -93,7 +92,7 @@ def module_from_template(
 
         This approach is not recommended for use in a production setting because the
         framework templates may use unpinned dependencies that could change without
-        warning.cIt's best to author a module adhering to the
+        warning. It's best to author a module adhering to the
         :ref:`Custom Javascript Component` interface instead.
 
     **Templates**
@@ -110,8 +109,6 @@ def module_from_template(
             Where the package should be loaded from. The CDN must distribute ESM modules
         fallback:
             What to temporarilly display while the module is being loaded.
-        exports_default:
-            Whether the module has a default export.
         resolve_imports:
             Whether to try and find all the named exports of this module.
         resolve_exports_depth:
@@ -122,6 +119,9 @@ def module_from_template(
             Using this option has negative performance consequences since all DOM
             elements must be changed on each render. See :issue:`461` for more info.
     """
+    template_name, _, template_version = template.partition("@")
+    template_version = "@" + template_version if template_version else ""
+
     # We do this since the package may be any valid URL path. Thus we may need to strip
     # object parameters or query information so we save the resulting template under the
     # correct file name.
@@ -130,17 +130,13 @@ def module_from_template(
     # downstream code assumes no trailing slash
     cdn = cdn.rstrip("/")
 
-    template_file_name = (
-        template
-        + (".default" if exports_default else "")
-        + module_name_suffix(package_name)
-    )
+    template_file_name = template_name + module_name_suffix(package_name)
 
     template_file = Path(__file__).parent / "templates" / template_file_name
     if not template_file.exists():
         raise ValueError(f"No template for {template_file_name!r} exists")
 
-    variables = {"PACKAGE": package, "CDN": cdn}
+    variables = {"PACKAGE": package, "CDN": cdn, "VERSION": template_version}
     content = Template(template_file.read_text()).substitute(variables)
 
     return module_from_string(

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

@@ -1,7 +1,20 @@
 export * from "$CDN/$PACKAGE";
 
-import * as React from "$CDN/react";
-import * as ReactDOM from "$CDN/react-dom";
+import * as React from "$CDN/react$VERSION";
+import * as ReactDOM from "$CDN/react-dom$VERSION";
+
+export default ({ children, ...props }) => {
+  const [{ component }, setComponent] = React.useState({});
+  React.useEffect(() => {
+    import("$CDN/$PACKAGE").then((module) => {
+      // dynamically load the default export since we don't know if it's exported.
+      setComponent({ component: module.default });
+    });
+  });
+  return component
+    ? React.createElement(component, props, ...(children || []))
+    : null;
+};
 
 export function bind(node, config) {
   return {

src/idom/web/templates/react.js

@@ -83,7 +83,9 @@ def test_module_from_template_where_template_does_not_exist():
 
 
 async def test_module_from_template(display: DisplayFixture):
-    victory = idom.web.module_from_template("react", "[email protected]")
+    victory = idom.web.module_from_template("[email protected]", "[email protected]")
+
+    assert "[email protected]" in victory.file.read_text()
     VictoryBar = idom.web.export(victory, "VictoryBar")
     await display.show(VictoryBar)