Close #26: treat tags.script like an HTML dependency inside of JSXTag

cpsievert · cpsievert · commit 8168b49c6f58 · 2022-04-06T18:04:16.000-05:00
diff --git a/htmltools/_jsx.py b/htmltools/_jsx.py
@@ -23,6 +23,7 @@
     HTML,
     MetadataNode,
     HTMLDependency,
+    head_content,
 )
 from ._versions import versions
 
@@ -129,6 +130,12 @@ def tagify_tagifiable_and_get_metadata(x: Any) -> Any:
                 x = copy.copy(x)
             if isinstance(x, MetadataNode):
                 metadata_nodes.append(x)
+            # React.createElement("script") won't invoke it contents in the same
+            # way ordinary HTML tags do, but we can circumvent that by 'hoisting' it
+            # as head_content.
+            if isinstance(x, Tag) and x.name == "script":
+                metadata_nodes.append(head_content(x))
+                return ""
             return x
 
         cp = copy.copy(self)
diff --git a/tests/test_jsx_tags.py b/tests/test_jsx_tags.py
@@ -75,6 +75,7 @@ def test_jsx_tags():
         jsx("`childexpression`"),
         Foo(),
         [Foo(), Bar()],
+        tags.script("alert('hello')"),
         TagList(Foo(), Bar()),
         span(Foo(span()), Bar()),
         int=1,
@@ -84,9 +85,19 @@ def test_jsx_tags():
         string="string",
         list=[1, 2, 3],
     )
-    assert str(x) == textwrap.dedent(
+    assert HTMLDocument(x).render()["html"] == textwrap.dedent(
         """\
-        <script type="text/javascript" data-needs-render="">
+        <!DOCTYPE html>
+        <html>
+          <head>
+            <meta charset="utf-8"/>
+            <script type="application/html-dependencies">react[%s];react-dom[%s];headcontent_eb156e81fa07b6cf22e580f33fa4f1e4b3ee0431[0.0]</script>
+            <script src="lib/react-%s/react.production.min.js"></script>
+            <script src="lib/react-dom-%s/react-dom.production.min.js"></script>
+            <script>alert('hello')</script>
+          </head>
+          <body>
+            <script type="text/javascript" data-needs-render="">
         (function() {
           var container = new DocumentFragment();
           ReactDOM.render(
@@ -98,6 +109,7 @@ def test_jsx_tags():
               React.createElement(Foo),
               React.createElement(Foo),
               React.createElement(Bar),
+              "",
               React.createElement(Foo),
               React.createElement(Bar),
               React.createElement(
@@ -115,7 +127,10 @@ def test_jsx_tags():
           thisScript.after(container);
           thisScript.removeAttribute('data-needs-render');
         })();
-        </script>"""
+        </script>
+          </body>
+        </html>"""
+        % (react_ver, react_dom_ver, react_ver, react_dom_ver)
     )
 
     x = Foo(
