Minor doc fixes + log message change

Author: rmorshea

Diff for: docs/source/examples.rst

@@ -50,25 +50,18 @@ Try interacting with the sliders 📈
 .. example:: simple_dashboard
 
 
-Install Javascript Modules
---------------------------
+Dynamically Loaded React Components
+-----------------------------------
 
-Simply install your javascript library of choice using the ``idom`` CLI:
-
-.. code-block:: bash
-
-    idom install victory
-
-Then import the module with :mod:`~idom.web.module`:
+This method is not recommended for use in production applications, but it's great while
+you're experimenting:
 
 .. example:: victory_chart
 
 
 Define Javascript Modules
 -------------------------
 
-Assuming you already installed ``victory`` as in the :ref:`Install Javascript Modules` section:
-
 Click the bars to trigger an event 👇
 
 .. example:: super_simple_chart
@@ -77,8 +70,6 @@ Click the bars to trigger an event 👇
 Material UI Slider
 ------------------
 
-Assuming you already installed ``@material-ui/core`` as in the :ref:`Install Javascript Modules` section:
-
 Move the slider and see the event information update 👇
 
 .. example:: material_ui_slider

Diff for: docs/source/examples/material_ui_button_no_action.py

@@ -1,7 +1,7 @@
 import idom
 
 
-mui = idom.web.module_from_template("react", "@material-ui/core", fallback="⌛")
+mui = idom.web.module_from_template("react", "@material-ui/core@^5.0", fallback="⌛")
 Button = idom.web.export(mui, "Button")
 
 idom.run(

Diff for: docs/source/examples/material_ui_button_on_click.py

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

Diff for: docs/source/examples/material_ui_slider.py

@@ -3,7 +3,7 @@
 import idom
 
 
-mui = idom.web.module_from_template("react", "@material-ui/core", fallback="⌛")
+mui = idom.web.module_from_template("react", "@material-ui/core@^5.0", fallback="⌛")
 Slider = idom.web.export(mui, "Slider")
 
 

Diff for: docs/source/examples/simple_dashboard.py

@@ -9,7 +9,8 @@
 victory = idom.web.module_from_template(
     "react",
     "victory-line",
-    fallback="loading...",
+    fallback="⌛",
+    # not usually required (see issue #461 for more info)
     unmount_before_update=True,
 )
 VictoryLine = idom.web.export(victory, "VictoryLine")

Diff for: docs/source/examples/super_simple_chart.js

@@ -3,10 +3,16 @@ import htm from "https://unpkg.com/htm?module";
 
 const html = htm.bind(h);
 
-export { h as createElement, render as renderElement };
-
-export function unmountElement(container) {
-  render(null, container);
+export function bind(node, config) {
+  return {
+    render: (component, props, children) => {
+      if (children) {
+        console.error("Children not supported");
+      }
+      render(h(component, props), node);
+    },
+    unmount: () => render(null, node),
+  }
 }
 
 export function SuperSimpleChart(props) {

Diff for: scripts/one_example.py

@@ -65,7 +65,7 @@ def update_component():
 
 
 def _print_available_options():
-    for found_example_file in examples_dir.glob("*.py"):
+    for found_example_file in sorted(examples_dir.glob("*.py")):
         print("-", found_example_file.stem)
 
 

Diff for: src/idom/core/layout.py

@@ -136,8 +136,8 @@ async def render(self) -> LayoutUpdate:
                 model_state = self._model_states_by_life_cycle_state_id[model_state_id]
             except KeyError:
                 logger.info(
-                    f"Did not render component with model state ID {model_state_id!r} "
-                    "- component already unmounted or does not belong to this layout"
+                    "Did not render component with model state ID "
+                    "{model_state_id!r} - component already unmounted"
                 )
             else:
                 return self._create_layout_update(model_state)

Diff for: tests/test_core/test_layout.py

@@ -622,10 +622,7 @@ def Child(key):
         await layout.render()
 
     assert re.match(
-        (
-            "Did not render component with model state ID .*? - component already "
-            "unmounted or does not belong to this layout"
-        ),
+        r"Did not render component with model state ID .*? - component already unmounted",
         caplog.records[0].message,
     )