Merge branch 'main' into main

Author: rmorshea

.pre-commit-config.yaml

@@ -1,6 +1,6 @@
 repos:
   - repo: https://github.com/ambv/black
-    rev: 21.12b0
+    rev: 22.1.0
     hooks:
       - id: black
   - repo: https://github.com/PyCQA/flake8

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019 Ryan S. Morshead
+Copyright (c) 2019-2022 Ryan S. Morshead
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

VERSION

@@ -1 +1 @@
-0.35.4
+0.36.0

docs/source/developing-idom/changelog.rst

@@ -7,6 +7,30 @@ team are working on, or have feedback on how issues should be prioritized, feel
 :discussion-type:`open up a discussion <question>`.
 
 
+0.36.0
+------
+
+This release includes an important fix for errors produced after :pull:`623` was merged.
+In addition there is not a new ``http.script`` element which can behave similarly to a
+standard HTML ``<script>`` or, if no attributes are given, operate similarly to an
+effect. If no attributes are given, and when the script evaluates to a function, that
+function will be called the first time it is mounted and any time the content of the
+script is subsequently changed. If the function then returns another function, that
+returned function will be called when the script is removed from the view, or just
+before the content of the script changes.
+
+**Closed Issues**
+
+- State mismatch during component update - :issue:`629`
+- Implement a script tag - :issue:`544`
+
+**Pull Requests**
+
+- make scripts behave more like normal html script element - :pull:`632`
+- Fix state mismatch during component update - :pull:`631`
+- implement script element - :pull:`617`
+
+
 0.35.4
 ------
 

docs/source/reference-material/_examples/snake_game.py

@@ -83,7 +83,7 @@ def on_direction_change(event):
     if snake[-1] in snake[:-1]:
         assign_grid_block_color(grid, snake[-1], "red")
         new_game_state = GameState.lost
-    elif len(snake) == grid_size ** 2:
+    elif len(snake) == grid_size**2:
         assign_grid_block_color(grid, snake[-1], "yellow")
         new_game_state = GameState.won
 

src/client/package-lock.json

@@ -14,7 +14,7 @@
     "publish": "npm --workspaces publish",
     "test": "npm --workspaces test"
   },
-  "version": "0.35.4",
+  "version": "0.36.0",
   "workspaces": [
     "./packages/*"
   ]

src/client/package.json

@@ -21,5 +21,5 @@
     "format": "prettier --write ./src",
     "test": "echo 'no tests'"
   },
-  "version": "0.35.4"
+  "version": "0.36.0"
 }

src/client/packages/idom-app-react/package.json

@@ -31,5 +31,5 @@
     "test": "uvu tests"
   },
   "type": "module",
-  "version": "0.35.4"
+  "version": "0.36.0"
 }

src/client/packages/idom-client-react/package.json

@@ -35,7 +35,7 @@ export function Element({ model }) {
       return null;
     }
   } else if (model.tagName == "script") {
-    return html`<${ScriptElement} script=${model.children[0]} />`;
+    return html`<${ScriptElement} model=${model} />`;
   } else if (model.importSource) {
     return html`<${ImportedElement} model=${model} />`;
   } else {
@@ -58,10 +58,31 @@ function StandardElement({ model }) {
   );
 }
 
-function ScriptElement({ script }) {
-  const el = React.useRef();
-  React.useEffect(eval(script), [script]);
-  return null;
+function ScriptElement({ model }) {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    if (model?.children?.length > 1) {
+      console.error("Too many children for 'script' element.");
+    }
+
+    let scriptContent = model?.children?.[0];
+
+    let scriptElement;
+    if (model.attributes) {
+      scriptElement = document.createElement("script");
+      for (const [k, v] of Object.entries(model.attributes)) {
+        scriptElement.setAttribute(k, v);
+      }
+      scriptElement.appendChild(document.createTextNode(scriptContent));
+      ref.current.appendChild(scriptElement);
+    } else {
+      let scriptResult = eval(scriptContent);
+      if (typeof scriptResult == "function") {
+        return scriptResult();
+      }
+    }
+  }, [model.key]);
+  return html`<div ref=${ref} />`;
 }
 
 function ImportedElement({ model }) {

src/client/packages/idom-client-react/src/components.js

@@ -21,7 +21,7 @@
 
 
 __author__ = "idom-team"
-__version__ = "0.35.4"  # DO NOT MODIFY
+__version__ = "0.36.0"  # DO NOT MODIFY
 
 __all__ = [
     "component",

src/idom/__init__.py

@@ -216,11 +216,6 @@ def _render_component(
             pass
         else:
             key, index = new_state.key, new_state.index
-            if old_state is not None:
-                assert key == old_state.key, (
-                    "state mismatch during component update - "
-                    f"key {key!r}!={old_state.key!r} "
-                )
             parent.children_by_key[key] = new_state
             # need to do insertion in case where old_state is None and we're appending
             parent.model.current["children"][index : index + 1] = [

src/idom/core/layout.py

@@ -150,8 +150,12 @@
 - :func:`template`
 """
 
+from __future__ import annotations
+
+from typing import Any, Mapping
+
 from .core.proto import VdomDict
-from .core.vdom import make_vdom_constructor
+from .core.vdom import coalesce_attributes_and_children, make_vdom_constructor
 
 
 # Dcument metadata
@@ -250,18 +254,46 @@
 noscript = make_vdom_constructor("noscript")
 
 
-def script(content: str) -> VdomDict:
+def script(
+    *attributes_and_children: Mapping[str, Any] | str,
+    key: str | int | None = None,
+) -> VdomDict:
     """Create a new `<{script}> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script>`__ element.
 
-    Parameters:
-        content:
-            The text of the script should evaluate to a function. This function will be
-            called when the script is initially created or when the content of the
-            script changes. The function may optionally return a teardown function that
-            is called when the script element is removed from the tree, or when the
-            script content changes.
+    This behaves slightly differently than a normal script element in that it may be run
+    multiple times if its key changes (depending on specific browser behaviors). If no
+    key is given, the key is inferred to be the content of the script or, lastly its
+    'src' attribute if that is given.
+
+    If no attributes are given, the content of the script may evaluate to a function.
+    This function will be called when the script is initially created or when the
+    content of the script changes. The function may itself optionally return a teardown
+    function that is called when the script element is removed from the tree, or when
+    the script content changes.
     """
-    return {"tagName": "script", "children": [content]}
+    model: VdomDict = {"tagName": "script"}
+
+    attributes, children = coalesce_attributes_and_children(attributes_and_children)
+
+    if children:
+        if len(children) > 1:
+            raise ValueError("'script' nodes may have, at most, one child.")
+        elif not isinstance(children[0], str):
+            raise ValueError("The child of a 'script' must be a string.")
+        else:
+            model["children"] = children
+            if key is None:
+                key = children[0]
+
+    if attributes:
+        model["attributes"] = attributes
+        if key is None and not children and "src" in attributes:
+            key = attributes["src"]
+
+    if key is not None:
+        model["key"] = key
+
+    return model
 
 
 # Demarcating edits

src/idom/html.py

@@ -72,7 +72,7 @@ def test_is_vdom(result, value):
             {"tagName": "div", "children": [0, 1, 2]},
         ),
         (
-            idom.vdom("div", map(lambda x: x ** 2, [1, 2, 3])),
+            idom.vdom("div", map(lambda x: x**2, [1, 2, 3])),
             {"tagName": "div", "children": [1, 4, 9]},
         ),
         (

tests/test_core/test_vdom.py

@@ -1,4 +1,6 @@
-from idom import component, html, use_state
+import pytest
+
+from idom import component, config, html, use_state
 from idom.utils import Ref
 
 
@@ -7,8 +9,8 @@ def use_toggle():
     return state, lambda: set_state(not state)
 
 
-def use_counter():
-    state, set_state = use_state(1)
+def use_counter(initial_value):
+    state, set_state = use_state(initial_value)
     return state, lambda: set_state(state + 1)
 
 
@@ -61,7 +63,7 @@ def test_script_re_run_on_content_change(driver, driver_wait, display):
 
     @component
     def HasScript():
-        count, incr_count.current = use_counter()
+        count, incr_count.current = use_counter(1)
         return html.div(
             html.div({"id": "mount-count", "data-value": 0}),
             html.div({"id": "unmount-count", "data-value": 0}),
@@ -92,3 +94,51 @@ def HasScript():
 
     driver_wait.until(lambda d: mount_count.get_attribute("data-value") == "3")
     driver_wait.until(lambda d: unmount_count.get_attribute("data-value") == "2")
+
+
+def test_script_from_src(driver, driver_wait, display):
+    incr_src_id = Ref()
+    file_name_template = "__some_js_script_{src_id}__.js"
+
+    @component
+    def HasScript():
+        src_id, incr_src_id.current = use_counter(0)
+        if src_id == 0:
+            # on initial display we haven't added the file yet.
+            return html.div()
+        else:
+            return html.div(
+                html.div({"id": "run-count", "data-value": 0}),
+                html.script(
+                    {"src": f"/modules/{file_name_template.format(src_id=src_id)}"}
+                ),
+            )
+
+    display(HasScript)
+
+    for i in range(1, 4):
+        script_file = config.IDOM_WED_MODULES_DIR.current / file_name_template.format(
+            src_id=i
+        )
+        script_file.write_text(
+            f"""
+            let runCountEl = document.getElementById("run-count");
+            runCountEl.setAttribute("data-value", {i});
+            """
+        )
+
+        incr_src_id.current()
+
+        run_count = driver.find_element("id", "run-count")
+
+        driver_wait.until(lambda d: (run_count.get_attribute("data-value") == "1"))
+
+
+def test_script_may_only_have_one_child():
+    with pytest.raises(ValueError, match="'script' nodes may have, at most, one child"):
+        html.script("one child", "two child")
+
+
+def test_child_of_script_must_be_string():
+    with pytest.raises(ValueError, match="The child of a 'script' must be a string"):
+        html.script(1)

tests/test_html.py

@@ -136,17 +136,13 @@ def test_resolve_module_exports_from_source():
     names, references = resolve_module_exports_from_source(
         fixture_file.read_text(), exclude_default=False
     )
-    assert (
-        names
-        == (
-            {f"name{i}" for i in range(1, 21)}
-            | {
-                "functionName",
-                "ClassName",
-            }
-        )
-        and references == {"https://source1.com", "https://source2.com"}
-    )
+    assert names == (
+        {f"name{i}" for i in range(1, 21)}
+        | {
+            "functionName",
+            "ClassName",
+        }
+    ) and references == {"https://source1.com", "https://source2.com"}
 
 
 def test_log_on_unknown_export_type(caplog):